Changeset 3580


Ignore:
Timestamp:
09/13/13 16:15:21 (11 years ago)
Author:
andmor
Message:

First commit using angular router.

Location:
cats/SCHEMAcat/trunk/urn.org.isocat.schemacat.site/site
Files:
3 edited

Legend:

Unmodified
Added
Removed

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

    r3550 r3580  
    1010
    1111        <!-- Le styles -->
    12         <link href="./lib/styles/bootstrap-2.3.2/css/bootstrap.css" rel="stylesheet" />
    13         <link href="./lib/styles/bootstrap-2.3.2/css/bootstrap-responsive.css" rel="stylesheet" />
     12        <link href="./lib/bootstrap-2.3.2/css/bootstrap.css" rel="stylesheet" />
     13        <link href="./lib/bootstrap-2.3.2/css/bootstrap-responsive.css" rel="stylesheet" />
    1414        <link href="./styles/SCHEMAcat.css" rel="stylesheet" />
    1515
    … …  
    1717    <body>
    1818        <div id="wrap">
    19             <div id="pushh"></div>
    2019            <div data-ng-controller="TopMenuCtrl">
    2120                <div class="navbar navbar-inverse navbar-fixed-top">
    … …  
    4443                                <div class="pull-right">
    4544                                    <ul class="nav pull-right">
    46                                         <li><a data-ng-click="loginClick()" href="#"><i class="icon-user icon-white"><!--i--></i> <span data-ng-bind="displayName"/>
     45                                        <li><a data-ng-click="loginClick()" class='cursor-pointer'><i class="icon-user icon-white"><!--i--></i> <span data-ng-bind="displayName"/>
    4746                                        </a></li>
    4847                                    </ul>
    … …  
    5352                </div>
    5453            </div>
    55             <div class="container-fluid" data-ng-controller="SchemasListCtrl">
    56                 <div class="row-fluid">
    57                     <div class="span3">
    58                         <div >
    59                             <form class="form-search">
    60                                 <div class="input-append">
    61                                     <input type="text" class="search-query"/>
    62                                     <button type="submit" class="btn">Search</button>
    63                                 </div>
    64                             </form>
    65                             <table class="table table-bordered table-condensed table-hover">
    66                                 <thead>
    67                                     <tr>
    68                                         <th>Schema</th>
    69                                         <th>Version</th>
    70                                         <th>Status</th>
    71                                     </tr>
    72                                 </thead>
    73                                 <tbody>
    74                                     <tr data-ng-class="{selected: $index==selectedSchemaRow}" data-ng-repeat="schema in schemasResult['sc:result']['sc:schemas']['sc:schema']" data-ng-click="selectSchema($index)">
    75                                         <td data-ng-bind="schema['sc:name']"/>
    76                                         <td data-ng-show="schema['sc:version'] != '[object Object]'" data-ng-bind="schema['sc:version']"/>
    77                                         <td data-ng-hide="schema['sc:version'] != '[object Object]'"/>
    78                                         <td data-ng-bind="schema['sc:status']"/>
    79                                     </tr>
    80                                 </tbody>
    81                             </table>
    82                             <div data-ng-show="schemasResult['sc:result']['sc:total-schemas'] &gt; pageSize"  class="centered nowrap">
    83                                 <div data-pagination="" data-page="currentPage" data-total-items="totalSchemaItems" data-items-per-page="pageSize" data-max-size="5" class="pagination-small"
    84                                     data-boundary-links="true" data-previous-text="‹" data-next-text="›" data-first-text="«" data-last-text="»" style="cursor:pointer;"></div>
    85                             </div>
    86                         </div>
    87                     </div>
    88                     <!--/span-->
    89                     <div class="span9">
    90                         <div class="hero-unit">
    91                             <h1>Hello, world!</h1>
    92                             <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>
    93                             <p>
    94                                 <a href="#" class="btn btn-primary btn-large">Learn more ...</a>
    95                             </p>
    96                         </div>
    97                     </div>
    98                 </div>
    99             </div>
     54            <div id="pushh"></div>
     55            <div data-ng-view=""/>                   
    10056            <div id="pushf"></div>
    10157        </div>
    102 
    103 
    10458        <div id="footer">
    10559            <div class="container">
    … …  
    11468        <!--<script src="/org/netkernel/html5/framework/angularjs/latest/angular.min.js"></script>-->
    11569        <!--<script src="/org/netkernel/html5/framework/angularjs/latest/angular-resource.min.js"></script>-->
    116         <script src="./lib/scripts/AngularJS-1.0.8/angular.js"></script>
    117         <script src="./lib/scripts/AngularJS-1.0.8/angular-resource.js"></script>
    118         <script src="./lib/scripts/UI-bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
     70        <script src="./lib/jQuery/1.10.2/jquery-1.10.2.js"></script>
     71        <script src="./lib/AngularJS-1.0.8/angular.js"></script>
     72        <script src="./lib/AngularJS-1.0.8/angular-resource.js"></script>
     73        <script src="./lib/UI-bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
     74        <!-- just used for the top-menu responsive behaviour -->
     75        <script src="./lib/bootstrap-2.3.2/js/bootstrap.js"></script>
     76        <script src="./scripts/modules.js"></script>
    11977        <script src="./scripts/controlers.js"></script>
    12078        <script src="./scripts/services.js"></script>

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

    r3549 r3580  
    11//SCHEMAcat angular controllers
    2 var SCHEMAcat = angular.module('SCHEMAcat', ['ui.bootstrap', 'ngResource']);
     2SCHEMAcat.controller('WorkspaceCtrl',
     3    [ '$scope', '$location', '$routeParams', 'SchemasList' ,'Schema' ,'UserService' ,
     4        function($scope, $location, $routeParams, SchemasList, Schema, UserService) {   
     5   
     6            $scope.pageSize = 5;
     7            $scope.currentPage = $routeParams.pageNumber;
     8            $scope.selectedSchemaIndex = $routeParams.schemaIndex;
     9           
     10           
     11            //update the current route when user clicks in another page in the paginator.
     12            //This triggers a $routeChangeSuccess event since we are changing the route path part.
     13            $scope.selectPage = function (page) {
     14                $location.path('workspace/page/'+ page + '/').search({'schemaIndex': 0});
     15            }
    316
    4 SCHEMAcat.controller('SchemasListCtrl', [ '$scope','SchemasList' ,'Schema' ,'UserService' , function($scope, SchemasList, Schema, UserService) {   
     17            //update the current route when the uses clicks one schema in the list. This triggers
     18            //a $routeUpdate event since we are just changing the route search part.
     19            $scope.selectSchema = function (rowIndex) {
     20                $location.search({'schemaIndex': rowIndex});
     21            }
     22           
     23            //listen for the $routeChangeSuccess event and get the schemas page (trought a 'SchemasList'
     24            //AJAX call) and the selected schema metadata.
     25            $scope.$on("$routeChangeSuccess", function(event, route) {
     26                $scope.schemasResult = SchemasList.get({userID:UserService.id,
     27                    startPage:$scope.currentPage, pageSize:$scope.pageSize},
     28                        function(result){
     29                            $scope.totalSchemaItems = result['sc:result']['sc:total-schemas'];
     30                            getSchemaMetadata($routeParams.schemaIndex);
     31                        });
     32            });
     33           
     34            //listen for the $routeUpdate event and update the selected schema metadata.
     35            //(if not done, the selection highlight is not updated e.g. when
     36            //navigating back and forth)
     37            $scope.$on("$routeUpdate", function(event, route) {
     38                getSchemaMetadata(route.params.schemaIndex);
     39            });         
     40                     
     41            //gets (trought a 'Schema' AJAX call) the schema metadata of the schema placed
     42            //in the 'index' position of the schemas list.
     43            function getSchemaMetadata(index) {             
     44                //update the selected row to the route search part.
     45                $scope.selectedSchemaIndex = index;
     46               
     47                //make AJAX call to get the schema metadata for the selected row
     48                var selectedSchemaRow = $scope.schemasResult['sc:result']['sc:schemas']['sc:schema'][index];
     49                $scope.selectedSchema = Schema.get({schemaID:selectedSchemaRow['xml:id']},
     50                    function(result){
     51                        alert("You've clicked the " + selectedSchemaRow['sc:name'] + " schema");
     52                    });
     53            }
     54           
     55        }]);
     56 
     57SCHEMAcat.controller('TopMenuCtrl',
     58    [ '$scope', '$modal', 'UserService',
     59        function($scope, $modal, UserService) {
    560   
    6     $scope.pageSize = 5;
    7     $scope.currentPage = 1;
    8    
    9    
    10     //paginator
    11     $scope.$watch('currentPage', function() {
    12         $scope.schemasResult = SchemasList.get({userID:UserService.id, startPage:$scope.currentPage, pageSize:$scope.pageSize});
    13         $scope.selectedSchemaRow = 0;
    14      });
    15    
    16     $scope.schemasResult = SchemasList.get({userID:UserService.id, startPage:$scope.currentPage, pageSize:$scope.pageSize},
    17         function(result){
    18             $scope.totalSchemaItems = result['sc:result']['sc:total-schemas'];
    19         });
     61            $scope.displayName = UserService.displayName;
     62           
     63            //Modal window handlers and options
     64            $scope.loginClick = function () {
     65                var modalInstance = $modal.open({
     66                    templateUrl: 'partials/loginModal.html',
     67                    controller: 'LoginModalCtrl'
     68                });
     69               
     70                modalInstance.result.then(function (loginName) {
     71                    alert("Now set the user cookie to ["+loginName+"]");
     72                    document.cookie="USER="+loginName+";domain=;path=/";
     73                    document.location.reload(true);
     74                });
     75            };
     76       
     77        }]);
    2078
    21     $scope.selectSchema = function (rowIndex) {
    22         var selectedSchemaRow = $scope.schemasResult['sc:result']['sc:schemas']['sc:schema'][rowIndex];
    23         alert("You've clicked the " + selectedSchemaRow['sc:name'] + " schema");
    24         $scope.selectedSchemaRow = rowIndex;
    25         $scope.selectedSchema = Schema.get({schemaID:selectedSchemaRow['xml:id']},
    26             function(result){
    27                 null;
    28             });
    29     }
    30    
    31 }]);
    32  
    33 SCHEMAcat.controller('TopMenuCtrl', [ '$scope', '$modal', 'UserService', function($scope, $modal, UserService) {
    34    
    35     $scope.displayName = UserService.displayName;
    36    
    37     //Modal window handlers and options
    38     $scope.loginClick = function () {
    39         var modalInstance = $modal.open({
    40             templateUrl: 'loginModal.html',
    41             controller: 'LoginModalCtrl'
    42         });
    43        
    44         modalInstance.result.then(function (loginName) {
    45             alert("Now set the user cookie to ["+loginName+"]");
    46             document.cookie="USER="+loginName+";domain=;path=/";
    47             document.location.reload(true);
    48         });
    49     };
    50 
    51 }]);
    52 
    53 SCHEMAcat.controller('LoginModalCtrl', ['$scope', '$modalInstance', function($scope, $modalInstance) {
    54     $scope.loginClose = function () {
    55         $modalInstance.dismiss('cancel');
    56     };
    57    
    58     //set cookie code. REMOVE in production
    59     $scope.loginSubmit = function () {
    60         $modalInstance.close(this.loginNameText);
    61     }
    62 }]);
     79SCHEMAcat.controller('LoginModalCtrl',
     80    ['$scope', '$modalInstance',
     81        function($scope, $modalInstance) {
     82            $scope.loginClose = function () {
     83                $modalInstance.dismiss('cancel');
     84            };
     85           
     86            //set cookie code. REMOVE in production
     87            $scope.loginSubmit = function () {
     88                $modalInstance.close(this.loginNameInput.text);
     89            }
     90        }]);

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

    r3545 r3580  
    88    text-align:center;
    99}
    10 .nowrap{
    11     white-space:nowrap;
    12 }
     10
    1311.selected{
    1412    background-color:#f5f5f5;
    1513}
    1614
     15.cursor-pointer{
     16    cursor:pointer;
     17}
     18
     19.paginator{
     20    white-space:nowrap;
     21    min-width: 241px;
     22}
    1723/* Wrapper for page content to push down footer */
    1824#wrap{
Note: See TracChangeset for help on using the changeset viewer.