src/common/directives/navigation.js

   1 angular.module('dlux.directives.navigation', [])
   2
   3 /*
   4  * Helper to set CSS class to active via ng-class using $location.path()
   5  * or $state.includes()
   6 */
   7 .directive('isActive', function($compile) {
   8   return {
   9     restrict: 'A',
  10     replace: false,
  11     scope: {
  12       state: '@',
  13       stateParams: '=',
  14       stateActive: '@',
  15       url: '@'
  16     },
  17
  18     controller: function ($scope, $location, $state) {
  19       $scope.$state = $state;
  20       $scope.$location = $location;
  21     },
  22     compile: function() {
  23       return function (scope, iElement, iAttrs, controller) {
  24         var active;
  25         if (scope.state) {
  26           var state = scope.stateActive || scope.$state.current.name.split('.')[0];
  27           active = 'active: $state.includes(\'' + scope.state + '\')';
  28         } else if (scope.url) {
  29           active = 'active: url === $location.path()';
  30         } else {
  31           active = "false";
  32         }
  33         iElement.attr('ng-class', '{ ' + active  + ' }'); // Adding the ngClass
  34         iElement.removeAttr('is-active'); // Avoid infinite loop
  35         $compile(iElement)(scope);
  36       };
  37     }
  38   };
  39 })
  40
  41
  42 .directive('brdAnchor', function ($compile, $rootScope) {
  43   return {
  44     restrict: 'E',
  45     replace: true,
  46     scope: {
  47       label: '@',
  48       state: '@',
  49       stateParams: '=',
  50       url: '@'
  51     },
  52
  53     /* The idea is to support both state and url, to be able to set {active} either
  54      if stateActive matches via $state.includes() or if the url matches
  55      Change this into a actual href later on ? - see https://github.com/angular-ui/ui-router/issues/395
  56     */
  57     template: '<a href="" ng-click="doClick()">{{label}}</a>',
  58     controller: function ($scope, $rootScope, $location, $state) {
  59       $scope.$location = $location;
  60       $scope.$state = $state;
  61
  62       $scope.doClick = function () {
  63         var args = {
  64           label: $scope.label,
  65           state: $scope.state,
  66           stateParams: $scope.stateParams,
  67           url: $scope.url
  68         };
  69
  70         $rootScope.$broadcast('event:navigation', args);
  71
  72         if (!$scope.url && $scope.state) {
  73           var params = $scope.stateParams || {};
  74           $state.go($scope.state, params);
  75         } else if ($scope.url) {
  76           $location.path($scope.url);
  77         }
  78       };
  79     }
  80   };
  81 })
  82
  83
  84 .directive('buttonCancel', function() {
  85     // Runs during compile
  86     return {
  87         restrict: 'E',
  88         replace: true,
  89         scope: {
  90             'btnLabel': '@label',
  91             'btnSize': '@size',
  92             'btnGlyph': '@glyph',
  93             'cancelFunc': '=function',
  94             'state': '@',
  95             'stateParams': '=',
  96         },
  97         template: '<button class="btn btn-{{size}} btn-danger" ng-click="doCancel()"><span class="glyphicon glyphicon-{{glyph}}"></span> {{label}}</button>',
  98         controller: function ($scope, $state) {
  99           $scope.label = $scope.btnLabel || 'Cancel';
 100           $scope.size = $scope.btnSize || 'md';
 101           $scope.glyph = $scope.btnGlyph || 'remove-circle';
 102
 103           $scope.doCancel = function () {
 104             if (angular.isFunction($scope.cancelFunc)) {
 105               $scope.cancelFunc();
 106               return;
 107             }
 108
 109             var params = $scope.stateParams || {};
 110             $state.go($scope.state, params);
 111           };
 112         }
 113     };
 114 })
 115
 116 .directive('buttonSubmit', function(){
 117   // Runs during compile
 118   return {
 119     restrict: 'E',
 120     replace: true,
 121     scope: {
 122       'btnLabel': '@label',
 123       'btnSize': '@size',
 124       'btnGlyph': '@glyph',
 125       'submitFunc': '=function',
 126       'form': '=form',
 127       'validator': '='
 128     },
 129     template: '<button class="btn btn-{{size}} btn-success" ng-click="doSubmit()" ng-disabled="submitDisabled"><span class="glyphicon glyphicon-{{glyph}}"></span> {{label}}</button>',
 130     controller: function ($scope) {
 131       $scope.label = $scope.btnLabel || 'Submit';
 132       $scope.size = $scope.btnSize || 'md';
 133       $scope.glyph = $scope.btnGlyph || 'ok-circle';
 134
 135       $scope.submitDisabled = true;
 136
 137       $scope.doSubmit = function () {
 138         if ($scope.submitFunc) {
 139           $scope.submitFunc();
 140         }
 141       };
 142
 143       $scope.toggle = function (newVal) {
 144         $scope.submitDisabled = newVal ? false : true;
 145       };
 146
 147
 148       // Setup a watch for form.$valid if it's passed
 149       if (!$scope.validator && $scope.form) {
 150         $scope.$watch('form.$valid', function (newVal, oldVal) {
 151           $scope.toggle(newVal);
 152         });
 153       }
 154
 155       // This overrules the form watch if set - use with cauthion!
 156       if ($scope.validator && angular.isFunction($scope.validator)) {
 157         $scope.$watch(
 158           function() {
 159             return $scope.validator();
 160           },
 161           function(newVal, oldVal) {
 162             $scope.toggle(newVal);
 163           }
 164         );
 165       }
 166
 167       // Lastly if none of the above goes we'll just enable ourselves
 168       if (!$scope.form && !$scope.validator) {
 169         $scope.submitDisabled = false;
 170       }
 171     }
 172   };
 173 })
 174
 175
 176 .directive('showSelected', function() {
 177   // Runs during compile
 178   return {
 179     restrict: 'E',
 180     replace: true,
 181     scope: {
 182       'data': '='
 183     },
 184     template: '<div>{{data.length}}</div>',
 185   };
 186 })
 187
 188 .directive('ctrlReload', function() {
 189   // Runs during compile
 190   return {
 191     replace: true,
 192     restrict: 'E',
 193     scope: {
 194       svc: '=service'
 195     },
 196     template: '<button class="btn btn-primary btn-xs" ng-click="svc.getAll()"><i class="glyphicon glyphicon-refresh"></i></button>',
 197     link: function ($scope, iElm, iAttrs, controller) {
 198       $scope.$on('evt:refresh', function() {
 199         $scope.svc.getAll();
 200       })
 201     }
 202   };
 203 })
 204
 205 .directive('ctrlDelete', function($rootScope) {
 206   // Runs during compile
 207   return {
 208     replace: true,
 209     restrict: 'E',
 210     template: '<button class="btn btn-danger btn-xs" ng-click="deleteSelected()" ng-disabled="gridOptions.selectedItems.length == 0"><i class="glyphicon glyphicon-remove"></i></button>',
 211     link: function($scope, iElm, iAttrs, controller) {
 212       var i = 0;
 213       var selected = $scope.gridOptions.selectedItems;
 214
 215       // Fire up a evt:refresh event once done.
 216       $scope.deleteSelected = function () {
 217         angular.forEach(selected, function(value, key) {
 218           $scope.svc.delete(value).then(
 219             function () {
 220               i++;
 221               if (i == selected.length) {
 222                 $rootScope.$broadcast('evt:refresh')
 223               }
 224             }
 225           )
 226         });
 227       }
 228     }
 229   };
 230 })