Changeset 3586

Timestamp:

09/16/13 16:23:01 (11 years ago)

Author:

andmor

Message:

First implementation for: workspace directive, schema metadata pane, CSS3 transitions between pages and selected schemas.

Location:

cats/SCHEMAcat/trunk/urn.org.isocat.schemacat.site/site

Files:

• index.html (modified) (2 diffs)
• lib/animate.css (added)
• partials/workspace.html (modified) (3 diffs)
• scripts/controlers.js (modified) (3 diffs)
• scripts/modules.js (modified) (1 diff)
• styles/SCHEMAcat.css (modified) (1 diff)

cats/SCHEMAcat/trunk/urn.org.isocat.schemacat.site/site/index.html

@@ -12 +12 @@
         <link href="./lib/bootstrap-2.3.2/css/bootstrap.css" rel="stylesheet" />
         <link href="./lib/bootstrap-2.3.2/css/bootstrap-responsive.css" rel="stylesheet" />
+        <link href="./lib/animate.css" rel="stylesheet" />
         <link href="./styles/SCHEMAcat.css" rel="stylesheet" />
 
@@ -53 +54 @@
             </div>
             <div id="pushh"></div>
-            <div data-ng-view=""/>                    
+            <div data-workspace-directive="">
+                <div data-ng-view=""/>
+            </div>
             <div id="pushf"></div>
         </div>

cats/SCHEMAcat/trunk/urn.org.isocat.schemacat.site/site/partials/workspace.html

@@ -1 @@
-<div id="workspace" class="container-fluid">
+<div id="workspace" class="container-fluid" data-ng-class="animatePageChange">
     <div class="row-fluid">
         <div class="span3">
@@ -19 +19 @@
                     <tbody>
                         <tr data-ng-class="{selected: $index==selectedSchemaIndex}" data-ng-repeat="schema in schemasResult['sc:result']['sc:schemas']['sc:schema']" data-ng-click="selectSchema($index)">
-                            <td data-ng-bind="schema['sc:name']"/>
+                            <td data-ng-bind="schema['sc:name']"></td>
                             <td data-ng-show="schema['sc:version'] != '[object Object]'" data-ng-bind="schema['sc:version']"/>
                             <td data-ng-hide="schema['sc:version'] != '[object Object]'"/>
@@ -34 +34 @@
         <div class="span9">
             <div class="hero-unit">
-                <h1>Hello, world!</h1>
-                <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
-                <p>
-                    <a href="#" class="btn btn-primary btn-large">Learn more ...</a>
-                </p>
+                <div id="schema-div" class="container-fluid" data-ng-class="animateSchemaChange">
+                    <h1 data-ng-bind="selectedSchema['sc:schema']['sc:name']"/>
+                    <p data-ng-show="selectedSchema['sc:schema']['sc:description'] != '[object Object]'" data-ng-bind="selectedSchema['sc:schema']['sc:description']"/>
+                    <p data-ng-hide="selectedSchema['sc:schema']['sc:description'] != '[object Object]'">--</p>
+                    <div class="row-fluid">
+                        <div class="span2">
+                            <h4>Version:</h4>
+                            <p data-ng-show="selectedSchema['sc:schema']['sc:version'] != '[object Object]'" data-ng-bind="selectedSchema['sc:schema']['sc:version']"/>
+                            <p data-ng-hide="selectedSchema['sc:schema']['sc:version'] != '[object Object]'">--</p>
+                        </div>
+                        <div class="span2">
+                            <h4>Status:</h4>
+                            <p data-ng-show="selectedSchema['sc:schema']['sc:status'] != '[object Object]'" data-ng-bind="selectedSchema['sc:schema']['sc:status']"/>
+                            <p data-ng-hide="selectedSchema['sc:schema']['sc:status'] != '[object Object]'">--</p>
+                        </div>
+                        <div class="span2">
+                            <h4>Access:</h4>
+                            <p data-ng-show="selectedSchema['sc:schema']['sc:access']['sc:all']['actions'] == 'r'">public</p>
+                            <p data-ng-hide="selectedSchema['sc:schema']['sc:access']['sc:all']['actions'] == 'r'">private</p>
+                        </div>
+                    </div>
+                    <div class="row-fluid">
+                        <div class="span2">
+                            <h5>Group tags:</h5>
+                        </div>
+                        <h6 data-ng-show="selectedSchema['sc:schema']['sc:tag']['content']">[{{selectedSchema['sc:schema']['sc:tag']['content']}}]</h6>
+                    </div>
+                    <p>
+                        <a href="" class="btn btn-primary btn-large">Open schema file...</a>
+                    </p>
+                </div>
             </div>
         </div>

cats/SCHEMAcat/trunk/urn.org.isocat.schemacat.site/site/scripts/controlers.js

@@ -1 +1 @@
 //SCHEMAcat angular controllers
 SCHEMAcat.controller('WorkspaceCtrl', 
-    [ '$scope', '$location', '$routeParams', 'SchemasList' ,'Schema' ,'UserService' , 
-        function($scope, $location, $routeParams, SchemasList, Schema, UserService) {    
+    [ '$scope', '$location', '$routeParams', '$timeout', 'SchemasList' ,'Schema' ,'UserService' , 
+        function($scope, $location, $routeParams, $timeout, SchemasList, Schema, UserService) {    
+            var parentScope = $scope.$parent;  
     
-            $scope.pageSize = 5;
-            $scope.currentPage = $routeParams.pageNumber;
-            $scope.selectedSchemaIndex = $routeParams.schemaIndex;
-            
-            
+            parentScope.pageSize = 5;
+            parentScope.currentPage = $routeParams.pageNumber;
+            parentScope.selectedSchemaIndex = $routeParams.schemaIndex;
+            //keep the workspace page hidden until all data is loaded            
+            parentScope.animatePageChange = 'noDisplay';
+
+            //watch for our AJAX data to arrive and fade in workspace afterwards.
+            var watchListener = $scope.$watch('resultAsArrived', function (newValue, oldValue){
+                if(newValue == true) {
+                    //fade in the workspace page
+                    parentScope.animatePageChange = 
+                        parentScope.toNextPage == true ? 
+                        'animated slideInLeft' : 'animated slideInRight';
+                    
+                    $timeout(function () {
+                        var selectedSchemaRow = $scope.schemasResult['sc:result']['sc:schemas']['sc:schema'][$routeParams.schemaIndex];
+                        alert("You've clicked the " + selectedSchemaRow['sc:name'] + " schema");
+                        });
+                }
+            });
+
+
+            //load the schemas page (trought a 'SchemasList' AJAX call) and the selected schema metadata.
+            //if reading the worspace for the first time i.e. not due to page change click
+            if(!parentScope.workspaceFirstLoaded)
+                loadSchemasList($scope.currentPage);
+
+
             //update the current route when user clicks in another page in the paginator.
-            //This triggers a $routeChangeSuccess event since we are changing the route path part.
+            //This triggers a $routeChangeStart event since we are changing the route path part.
             $scope.selectPage = function (page) {
-                $location.path('workspace/page/'+ page + '/').search({'schemaIndex': 0});
+                $location.path('workspace/page/'+ page + '/').search({'schemaIndex': 0});                
             }
+
 
             //update the current route when the uses clicks one schema in the list. This triggers
@@ -21 +46 @@
             }
             
-            //listen for the $routeChangeSuccess event and get the schemas page (trought a 'SchemasList'
-            //AJAX call) and the selected schema metadata.
-            $scope.$on("$routeChangeSuccess", function(event, route) {
-                $scope.schemasResult = SchemasList.get({userID:UserService.id, 
-                    startPage:$scope.currentPage, pageSize:$scope.pageSize}, 
-                        function(result){
-                            $scope.totalSchemaItems = result['sc:result']['sc:total-schemas'];
-                            getSchemaMetadata($routeParams.schemaIndex);
-                        });
+            
+            //listen for the $routeChangeStart event. Triggered when route path is changed (page change).
+            $scope.$on("$routeChangeStart", function(event, next, current) {
+                if(next.params.pageNumber > current.params.pageNumber)
+                    parentScope.toNextPage = false;
+                else
+                    parentScope.toNextPage = true;
+                    
+                //fade out workspace page
+                parentScope.animatePageChange =
+                    parentScope.toNextPage == true ? 
+                    'animated slideOutRight' : 'animated slideOutLeft';
+                //derregister the listener since the controler is going to be reloaded
+                watchListener();
+                parentScope.resultAsArrived = false; 
+                loadSchemasList(next.params.pageNumber);
             }); 
             
@@ -36 +68 @@
             //navigating back and forth)
             $scope.$on("$routeUpdate", function(event, route) {
-                getSchemaMetadata(route.params.schemaIndex);
+                parentScope.resultAsArrived = false;
+                $scope.animateSchemaChange = 'animated slideOutUp';
+                loadSchemaMetadata(route.params.schemaIndex);
             });          
-                      
-            //gets (trought a 'Schema' AJAX call) the schema metadata of the schema placed
+
+
+            function loadSchemasList(page) {
+                //since we want to keep the server data across controler reloads, we save it in the 
+                //parent scope.
+                parentScope.schemasResult = SchemasList.get({userID:UserService.id, 
+                    startPage:page, pageSize:$scope.pageSize}, 
+                        function(result){
+                            parentScope.totalSchemaItems = result['sc:result']['sc:total-schemas'];
+                            loadSchemaMetadata($location.search().schemaIndex);
+                        });            
+            }   
+
+
+            //loads (trought a 'Schema' AJAX call) the schema metadata of the schema placed
             //in the 'index' position of the schemas list.
-            function getSchemaMetadata(index) {             
+            function loadSchemaMetadata(index) {             
                 //update the selected row to the route search part.
-                $scope.selectedSchemaIndex = index;
+                parentScope.selectedSchemaIndex = index;
                 
                 //make AJAX call to get the schema metadata for the selected row
                 var selectedSchemaRow = $scope.schemasResult['sc:result']['sc:schemas']['sc:schema'][index];
-                $scope.selectedSchema = Schema.get({schemaID:selectedSchemaRow['xml:id']}, 
+                parentScope.selectedSchema = Schema.get({schemaID:selectedSchemaRow['xml:id']}, 
                     function(result){
-                        alert("You've clicked the " + selectedSchemaRow['sc:name'] + " schema");
+                        $scope.animateSchemaChange = 'animated slideInDown';
+                        parentScope.resultAsArrived = true;
                     });
             }
             
+            parentScope.workspaceFirstLoaded = true;
+                     
         }]);
+        
+SCHEMAcat.directive('workspaceDirective', [ function(){
+    return function(scope, element, attrs) {
+        scope.animatePageChange = 'noDisplay';
+        scope.toNextPage = false;
+        scope.workspaceFirstLoaded = false;
+        scope.resultAsArrived = false;        
+    }
+}]);      
+        
  
 SCHEMAcat.controller('TopMenuCtrl', 
     [ '$scope', '$modal', 'UserService', 
         function($scope, $modal, UserService) {
-    
             $scope.displayName = UserService.displayName;
-            
+
             //Modal window handlers and options
             $scope.loginClick = function () {

cats/SCHEMAcat/trunk/urn.org.isocat.schemacat.site/site/scripts/modules.js

@@ -18 +18 @@
             */
             reloadOnSearch: false,
-            resolve: { hash: 
-                        function ($route, $routeParams, $location){
-                            //we can execute code here before loading the cotr
-                    }
+            resolve: {
+            //this will cause a 0.4 second delay to allow CSS fadeOut animation to 
+            //be displayed
+                delay: function($q, $timeout) {
+                var delay = $q.defer();
+                $timeout(delay.resolve, 350);
+                return delay.promise;
+      }
             }
         })

cats/SCHEMAcat/trunk/urn.org.isocat.schemacat.site/site/styles/SCHEMAcat.css

@@ -13 +13 @@
 }
 
+.noDisplay {
+    opacity:0;
+}
+
+#workspace, #schema-div {
+    -webkit-animation-duration: 0.35s;
+    -moz-animation-duration: 0.35s;
+        -o-animation-duration: 0.35s;
+        animation-duration: 0.35s;
+}
 .cursor-pointer{
     cursor:pointer;