git.rot13.org Git - angular-drzb/blob - app/js/directives.js

   1 'use strict';
   2
   3 /* Directives */
   4
   5
   6 angular.module('myApp.directives', []).
   7   directive('appVersion', ['version', function(version) {
   8     return function(scope, elm, attrs) {
   9       elm.text(version);
  10     };
  11   }]).
  12   directive('myInput', function() {
  13     return {
  14                 restrict: 'C',
  15                 compile: function(element, attrs) {
  16                         var my_class = attrs['class'] || '';
  17                         my_class = my_class.replace(/ *my-input */,'');
  18                         var my_type  = attrs['type']  || 'text';
  19                         var html = '<div class="'+my_class+'">'
  20                                 +'<label for="'+attrs.ngModel+'">' + attrs.placeholder + '</label>'
  21                                 +'<input type="'+my_type+'" name="'+attrs.ngModel+'" ng-model="' + attrs.ngModel + '"'
  22                                 +' placeholder="'+attrs.placeholder+'" class="'+my_class+'"'
  23                         ;
  24                         if ( attrs.ngRequired ) html += ' ng-required="' + attrs.ngRequired + '"';
  25                         if ( attrs.bsTypeahead )  html += ' bs-typeahead="'+attrs.bsTypeahead+'"';
  26                         if ( attrs.dataItems )  html += ' data-items="'+attrs.dataItems+'"'; // for typeahead
  27                         html += '/></div>';
  28                         element.replaceWith(html);
  29                 }
  30     };
  31   }).
  32
  33 directive('myLabelInput', function() {
  34     return {
  35                 restrict: 'C',
  36                 compile: function(element, attrs) {
  37                         var my_class = attrs['class'] || '';
  38                         my_class = my_class.replace(/ *my-input */,'');
  39                         var my_type  = attrs['type']  || 'text';
  40                         var m = attrs.ngModel;
  41                         var html =
  42 '  <div class="control-group">'+
  43 '    <label class="control-label" for="'+m+'">'+attrs.label+'</label>'+
  44 '    <div class="controls">'+
  45 '      <input type="'+my_type+'" id="'+m+'" ng-model="'+m+'"';
  46                         ;
  47                         if ( attrs.placeholder ) html += ' placeholder="' + attrs.placeholder + '"';
  48                         if ( attrs.ngRequired )  html += ' ng-required="' + attrs.ngRequired + '"';
  49                         if ( attrs.ngChange )    html += ' ng-change="' + attrs.ngChange + '"';
  50                         html += '>'+
  51 '    </div>'+
  52 '  </div>';
  53
  54                         element.replaceWith(html);
  55                 }
  56     };
  57 })
  58
  59 .directive('myLabelSelect', function() {
  60     return {
  61                 restrict: 'C',
  62                 compile: function(element, attrs) {
  63                         var my_class = attrs['class'] || '';
  64                         my_class = my_class.replace(/ *my-input */,'');
  65                         var m = attrs.ngModel;
  66                         var html =
  67 '  <div class="control-group">'+
  68 '    <label class="control-label" for="'+m+'">'+attrs.label+'</label>'+
  69 '    <div class="controls">'+
  70 '      <select id="'+m+'" ng-model="'+m+'"';
  71                         ;
  72                         if ( attrs.ngOptions  ) html += ' ng-options="' + attrs.ngOptions + '"';
  73                         if ( attrs.ngChange )    html += ' ng-change="' + attrs.ngChange + '"';
  74                         html += '></select>'+
  75 '    </div>'+
  76 '  </div>';
  77
  78                         element.replaceWith(html);
  79                 }
  80     };
  81 })
  82
  83 .directive('bsTypeahead', ['$parse', function($parse) {
  84         'use strict';
  85
  86         return {
  87                 restrict: 'A',
  88                 require: '?ngModel',
  89                 link: function postLink(scope, element, attr, controller) {
  90
  91                         var getter = $parse(attr.bsTypeahead),
  92                                         setter = getter.assign,
  93                                         value = getter(scope);
  94
  95                         // Watch bsTypeahead for changes
  96                         scope.$watch(attr.bsTypeahead, function(newValue, oldValue) {
  97                                 if(newValue !== oldValue) {
  98                                         value = newValue;
  99                                 }
 100                         });
 101
 102                         element.attr('data-provide', 'typeahead');
 103                         element.typeahead({
 104                                 source: function(query) { return value; },
 105                                 items: attr.items,
 106                                 updater: function(value) {
 107                                         // If we have a controller (i.e. ngModelController) then wire it up
 108                                         if(controller) {
 109                                                 scope.$apply(function () {
 110                                                         controller.$setViewValue(value);
 111                                                 });
 112                                         }
 113                                         return value;
 114                                 }
 115                         });
 116
 117                         // add entered element into typeahead array for other fields
 118                         element.bind('blur', function() {
 119                                 var new_value = element.val();
 120                                 if ( new_value.length > 1 && $.inArray( new_value, value ) === -1 ) { // IE doesn't have .indexOf
 121                                         scope.$apply( function() {
 122                                                 value.unshift( element.val() );
 123                                         });
 124                                 }
 125                         });
 126
 127                 }
 128         };
 129 }])
 130 .directive('myPagination', function() { // modified ui.bootstrap.pagination
 131   return {
 132     restrict: 'E',
 133     scope: {
 134       numPages: '=',
 135       currentPage: '=',
 136       maxSize: '=',
 137       onSelectPage: '&'
 138     },
 139     templateUrl: 'template/pagination/pagination.html',
 140     replace: true,
 141     link: function(scope) {
 142       scope.$watch('numPages + currentPage + maxSize', function() {
 143         scope.pages = [];
 144
 145         //set the default maxSize to numPages
 146         var maxSize = ( scope.maxSize && scope.maxSize < scope.numPages ) ? scope.maxSize : scope.numPages;
 147         var startPage = scope.currentPage - Math.floor(maxSize/2);
 148
 149         //adjust the startPage within boundary
 150         if(startPage < 1) {
 151             startPage = 1;
 152         }
 153         if ((startPage + maxSize - 1) > scope.numPages) {
 154             startPage = startPage - ((startPage + maxSize - 1) - scope.numPages );
 155         }
 156
 157         for(var i=0; i < maxSize && i < scope.numPages ;i++) {
 158           scope.pages.push(startPage + i);
 159         }
 160         if ( scope.currentPage > scope.numPages ) {
 161           scope.selectPage(scope.numPages);
 162         }
 163       });
 164       scope.noPrevious = function() {
 165         return scope.currentPage === 1;
 166       };
 167       scope.noNext = function() {
 168         return scope.currentPage === scope.numPages;
 169       };
 170       scope.isActive = function(page) {
 171         return scope.currentPage === page;
 172       };
 173
 174       scope.selectPage = function(page) {
 175         if ( ! scope.isActive(page) ) {
 176           scope.currentPage = page;
 177           scope.onSelectPage({ page: page });
 178         }
 179       };
 180
 181       scope.selectPrevious = function() {
 182         if ( !scope.noPrevious() ) {
 183           scope.selectPage(scope.currentPage-1);
 184         }
 185       };
 186       scope.selectNext = function() {
 187         if ( !scope.noNext() ) {
 188           scope.selectPage(scope.currentPage+1);
 189         }
 190       };
 191     }
 192   };
 193 })
 194 ;