1 | angular.module("ui.bootstrap", ["ui.bootstrap.tpls", "ui.bootstrap.transition","ui.bootstrap.collapse","ui.bootstrap.accordion","ui.bootstrap.alert","ui.bootstrap.bindHtml","ui.bootstrap.buttons","ui.bootstrap.carousel","ui.bootstrap.position","ui.bootstrap.datepicker","ui.bootstrap.dropdownToggle","ui.bootstrap.modal","ui.bootstrap.pagination","ui.bootstrap.tooltip","ui.bootstrap.popover","ui.bootstrap.progressbar","ui.bootstrap.rating","ui.bootstrap.tabs","ui.bootstrap.timepicker","ui.bootstrap.typeahead"]); |
---|
2 | angular.module("ui.bootstrap.tpls", ["template/accordion/accordion-group.html","template/accordion/accordion.html","template/alert/alert.html","template/carousel/carousel.html","template/carousel/slide.html","template/datepicker/datepicker.html","template/datepicker/popup.html","template/modal/backdrop.html","template/modal/window.html","template/pagination/pager.html","template/pagination/pagination.html","template/tooltip/tooltip-html-unsafe-popup.html","template/tooltip/tooltip-popup.html","template/popover/popover.html","template/progressbar/bar.html","template/progressbar/progress.html","template/progressbar/progressbar.html","template/rating/rating.html","template/tabs/tab.html","template/tabs/tabset.html","template/timepicker/timepicker.html","template/typeahead/typeahead-match.html","template/typeahead/typeahead-popup.html"]); |
---|
3 | angular.module('ui.bootstrap.transition', []) |
---|
4 | |
---|
5 | /** |
---|
6 | * $transition service provides a consistent interface to trigger CSS 3 transitions and to be informed when they complete. |
---|
7 | * @param {DOMElement} element The DOMElement that will be animated. |
---|
8 | * @param {string|object|function} trigger The thing that will cause the transition to start: |
---|
9 | * - As a string, it represents the css class to be added to the element. |
---|
10 | * - As an object, it represents a hash of style attributes to be applied to the element. |
---|
11 | * - As a function, it represents a function to be called that will cause the transition to occur. |
---|
12 | * @return {Promise} A promise that is resolved when the transition finishes. |
---|
13 | */ |
---|
14 | .factory('$transition', ['$q', '$timeout', '$rootScope', function($q, $timeout, $rootScope) { |
---|
15 | |
---|
16 | var $transition = function(element, trigger, options) { |
---|
17 | options = options || {}; |
---|
18 | var deferred = $q.defer(); |
---|
19 | var endEventName = $transition[options.animation ? "animationEndEventName" : "transitionEndEventName"]; |
---|
20 | |
---|
21 | var transitionEndHandler = function(event) { |
---|
22 | $rootScope.$apply(function() { |
---|
23 | element.unbind(endEventName, transitionEndHandler); |
---|
24 | deferred.resolve(element); |
---|
25 | }); |
---|
26 | }; |
---|
27 | |
---|
28 | if (endEventName) { |
---|
29 | element.bind(endEventName, transitionEndHandler); |
---|
30 | } |
---|
31 | |
---|
32 | // Wrap in a timeout to allow the browser time to update the DOM before the transition is to occur |
---|
33 | $timeout(function() { |
---|
34 | if ( angular.isString(trigger) ) { |
---|
35 | element.addClass(trigger); |
---|
36 | } else if ( angular.isFunction(trigger) ) { |
---|
37 | trigger(element); |
---|
38 | } else if ( angular.isObject(trigger) ) { |
---|
39 | element.css(trigger); |
---|
40 | } |
---|
41 | //If browser does not support transitions, instantly resolve |
---|
42 | if ( !endEventName ) { |
---|
43 | deferred.resolve(element); |
---|
44 | } |
---|
45 | }); |
---|
46 | |
---|
47 | // Add our custom cancel function to the promise that is returned |
---|
48 | // We can call this if we are about to run a new transition, which we know will prevent this transition from ending, |
---|
49 | // i.e. it will therefore never raise a transitionEnd event for that transition |
---|
50 | deferred.promise.cancel = function() { |
---|
51 | if ( endEventName ) { |
---|
52 | element.unbind(endEventName, transitionEndHandler); |
---|
53 | } |
---|
54 | deferred.reject('Transition cancelled'); |
---|
55 | }; |
---|
56 | |
---|
57 | return deferred.promise; |
---|
58 | }; |
---|
59 | |
---|
60 | // Work out the name of the transitionEnd event |
---|
61 | var transElement = document.createElement('trans'); |
---|
62 | var transitionEndEventNames = { |
---|
63 | 'WebkitTransition': 'webkitTransitionEnd', |
---|
64 | 'MozTransition': 'transitionend', |
---|
65 | 'OTransition': 'oTransitionEnd', |
---|
66 | 'transition': 'transitionend' |
---|
67 | }; |
---|
68 | var animationEndEventNames = { |
---|
69 | 'WebkitTransition': 'webkitAnimationEnd', |
---|
70 | 'MozTransition': 'animationend', |
---|
71 | 'OTransition': 'oAnimationEnd', |
---|
72 | 'transition': 'animationend' |
---|
73 | }; |
---|
74 | function findEndEventName(endEventNames) { |
---|
75 | for (var name in endEventNames){ |
---|
76 | if (transElement.style[name] !== undefined) { |
---|
77 | return endEventNames[name]; |
---|
78 | } |
---|
79 | } |
---|
80 | } |
---|
81 | $transition.transitionEndEventName = findEndEventName(transitionEndEventNames); |
---|
82 | $transition.animationEndEventName = findEndEventName(animationEndEventNames); |
---|
83 | return $transition; |
---|
84 | }]); |
---|
85 | |
---|
86 | angular.module('ui.bootstrap.collapse',['ui.bootstrap.transition']) |
---|
87 | |
---|
88 | // The collapsible directive indicates a block of html that will expand and collapse |
---|
89 | .directive('collapse', ['$transition', function($transition) { |
---|
90 | // CSS transitions don't work with height: auto, so we have to manually change the height to a |
---|
91 | // specific value and then once the animation completes, we can reset the height to auto. |
---|
92 | // Unfortunately if you do this while the CSS transitions are specified (i.e. in the CSS class |
---|
93 | // "collapse") then you trigger a change to height 0 in between. |
---|
94 | // The fix is to remove the "collapse" CSS class while changing the height back to auto - phew! |
---|
95 | var fixUpHeight = function(scope, element, height) { |
---|
96 | // We remove the collapse CSS class to prevent a transition when we change to height: auto |
---|
97 | element.removeClass('collapse'); |
---|
98 | element.css({ height: height }); |
---|
99 | // It appears that reading offsetWidth makes the browser realise that we have changed the |
---|
100 | // height already :-/ |
---|
101 | var x = element[0].offsetWidth; |
---|
102 | element.addClass('collapse'); |
---|
103 | }; |
---|
104 | |
---|
105 | return { |
---|
106 | link: function(scope, element, attrs) { |
---|
107 | |
---|
108 | var isCollapsed; |
---|
109 | var initialAnimSkip = true; |
---|
110 | |
---|
111 | scope.$watch(attrs.collapse, function(value) { |
---|
112 | if (value) { |
---|
113 | collapse(); |
---|
114 | } else { |
---|
115 | expand(); |
---|
116 | } |
---|
117 | }); |
---|
118 | |
---|
119 | |
---|
120 | var currentTransition; |
---|
121 | var doTransition = function(change) { |
---|
122 | if ( currentTransition ) { |
---|
123 | currentTransition.cancel(); |
---|
124 | } |
---|
125 | currentTransition = $transition(element,change); |
---|
126 | currentTransition.then( |
---|
127 | function() { currentTransition = undefined; }, |
---|
128 | function() { currentTransition = undefined; } |
---|
129 | ); |
---|
130 | return currentTransition; |
---|
131 | }; |
---|
132 | |
---|
133 | var expand = function () { |
---|
134 | isCollapsed = false; |
---|
135 | if (initialAnimSkip) { |
---|
136 | initialAnimSkip = false; |
---|
137 | expandDone(); |
---|
138 | } else { |
---|
139 | var targetElHeight = element[0].scrollHeight; |
---|
140 | if (targetElHeight) { |
---|
141 | doTransition({ height: targetElHeight + 'px' }).then(expandDone); |
---|
142 | } else { |
---|
143 | expandDone(); |
---|
144 | } |
---|
145 | } |
---|
146 | }; |
---|
147 | |
---|
148 | function expandDone() { |
---|
149 | if ( !isCollapsed ) { |
---|
150 | fixUpHeight(scope, element, 'auto'); |
---|
151 | element.addClass('in'); |
---|
152 | } |
---|
153 | } |
---|
154 | |
---|
155 | var collapse = function() { |
---|
156 | isCollapsed = true; |
---|
157 | element.removeClass('in'); |
---|
158 | if (initialAnimSkip) { |
---|
159 | initialAnimSkip = false; |
---|
160 | fixUpHeight(scope, element, 0); |
---|
161 | } else { |
---|
162 | fixUpHeight(scope, element, element[0].scrollHeight + 'px'); |
---|
163 | doTransition({'height':'0'}); |
---|
164 | } |
---|
165 | }; |
---|
166 | } |
---|
167 | }; |
---|
168 | }]); |
---|
169 | |
---|
170 | angular.module('ui.bootstrap.accordion', ['ui.bootstrap.collapse']) |
---|
171 | |
---|
172 | .constant('accordionConfig', { |
---|
173 | closeOthers: true |
---|
174 | }) |
---|
175 | |
---|
176 | .controller('AccordionController', ['$scope', '$attrs', 'accordionConfig', function ($scope, $attrs, accordionConfig) { |
---|
177 | |
---|
178 | // This array keeps track of the accordion groups |
---|
179 | this.groups = []; |
---|
180 | |
---|
181 | // Ensure that all the groups in this accordion are closed, unless close-others explicitly says not to |
---|
182 | this.closeOthers = function(openGroup) { |
---|
183 | var closeOthers = angular.isDefined($attrs.closeOthers) ? $scope.$eval($attrs.closeOthers) : accordionConfig.closeOthers; |
---|
184 | if ( closeOthers ) { |
---|
185 | angular.forEach(this.groups, function (group) { |
---|
186 | if ( group !== openGroup ) { |
---|
187 | group.isOpen = false; |
---|
188 | } |
---|
189 | }); |
---|
190 | } |
---|
191 | }; |
---|
192 | |
---|
193 | // This is called from the accordion-group directive to add itself to the accordion |
---|
194 | this.addGroup = function(groupScope) { |
---|
195 | var that = this; |
---|
196 | this.groups.push(groupScope); |
---|
197 | |
---|
198 | groupScope.$on('$destroy', function (event) { |
---|
199 | that.removeGroup(groupScope); |
---|
200 | }); |
---|
201 | }; |
---|
202 | |
---|
203 | // This is called from the accordion-group directive when to remove itself |
---|
204 | this.removeGroup = function(group) { |
---|
205 | var index = this.groups.indexOf(group); |
---|
206 | if ( index !== -1 ) { |
---|
207 | this.groups.splice(this.groups.indexOf(group), 1); |
---|
208 | } |
---|
209 | }; |
---|
210 | |
---|
211 | }]) |
---|
212 | |
---|
213 | // The accordion directive simply sets up the directive controller |
---|
214 | // and adds an accordion CSS class to itself element. |
---|
215 | .directive('accordion', function () { |
---|
216 | return { |
---|
217 | restrict:'EA', |
---|
218 | controller:'AccordionController', |
---|
219 | transclude: true, |
---|
220 | replace: false, |
---|
221 | templateUrl: 'template/accordion/accordion.html' |
---|
222 | }; |
---|
223 | }) |
---|
224 | |
---|
225 | // The accordion-group directive indicates a block of html that will expand and collapse in an accordion |
---|
226 | .directive('accordionGroup', ['$parse', function($parse) { |
---|
227 | return { |
---|
228 | require:'^accordion', // We need this directive to be inside an accordion |
---|
229 | restrict:'EA', |
---|
230 | transclude:true, // It transcludes the contents of the directive into the template |
---|
231 | replace: true, // The element containing the directive will be replaced with the template |
---|
232 | templateUrl:'template/accordion/accordion-group.html', |
---|
233 | scope:{ heading:'@' }, // Create an isolated scope and interpolate the heading attribute onto this scope |
---|
234 | controller: function() { |
---|
235 | this.setHeading = function(element) { |
---|
236 | this.heading = element; |
---|
237 | }; |
---|
238 | }, |
---|
239 | link: function(scope, element, attrs, accordionCtrl) { |
---|
240 | var getIsOpen, setIsOpen; |
---|
241 | |
---|
242 | accordionCtrl.addGroup(scope); |
---|
243 | |
---|
244 | scope.isOpen = false; |
---|
245 | |
---|
246 | if ( attrs.isOpen ) { |
---|
247 | getIsOpen = $parse(attrs.isOpen); |
---|
248 | setIsOpen = getIsOpen.assign; |
---|
249 | |
---|
250 | scope.$parent.$watch(getIsOpen, function(value) { |
---|
251 | scope.isOpen = !!value; |
---|
252 | }); |
---|
253 | } |
---|
254 | |
---|
255 | scope.$watch('isOpen', function(value) { |
---|
256 | if ( value ) { |
---|
257 | accordionCtrl.closeOthers(scope); |
---|
258 | } |
---|
259 | if ( setIsOpen ) { |
---|
260 | setIsOpen(scope.$parent, value); |
---|
261 | } |
---|
262 | }); |
---|
263 | } |
---|
264 | }; |
---|
265 | }]) |
---|
266 | |
---|
267 | // Use accordion-heading below an accordion-group to provide a heading containing HTML |
---|
268 | // <accordion-group> |
---|
269 | // <accordion-heading>Heading containing HTML - <img src="..."></accordion-heading> |
---|
270 | // </accordion-group> |
---|
271 | .directive('accordionHeading', function() { |
---|
272 | return { |
---|
273 | restrict: 'EA', |
---|
274 | transclude: true, // Grab the contents to be used as the heading |
---|
275 | template: '', // In effect remove this element! |
---|
276 | replace: true, |
---|
277 | require: '^accordionGroup', |
---|
278 | compile: function(element, attr, transclude) { |
---|
279 | return function link(scope, element, attr, accordionGroupCtrl) { |
---|
280 | // Pass the heading to the accordion-group controller |
---|
281 | // so that it can be transcluded into the right place in the template |
---|
282 | // [The second parameter to transclude causes the elements to be cloned so that they work in ng-repeat] |
---|
283 | accordionGroupCtrl.setHeading(transclude(scope, function() {})); |
---|
284 | }; |
---|
285 | } |
---|
286 | }; |
---|
287 | }) |
---|
288 | |
---|
289 | // Use in the accordion-group template to indicate where you want the heading to be transcluded |
---|
290 | // You must provide the property on the accordion-group controller that will hold the transcluded element |
---|
291 | // <div class="accordion-group"> |
---|
292 | // <div class="accordion-heading" ><a ... accordion-transclude="heading">...</a></div> |
---|
293 | // ... |
---|
294 | // </div> |
---|
295 | .directive('accordionTransclude', function() { |
---|
296 | return { |
---|
297 | require: '^accordionGroup', |
---|
298 | link: function(scope, element, attr, controller) { |
---|
299 | scope.$watch(function() { return controller[attr.accordionTransclude]; }, function(heading) { |
---|
300 | if ( heading ) { |
---|
301 | element.html(''); |
---|
302 | element.append(heading); |
---|
303 | } |
---|
304 | }); |
---|
305 | } |
---|
306 | }; |
---|
307 | }); |
---|
308 | |
---|
309 | angular.module("ui.bootstrap.alert", []) |
---|
310 | |
---|
311 | .controller('AlertController', ['$scope', '$attrs', function ($scope, $attrs) { |
---|
312 | $scope.closeable = 'close' in $attrs; |
---|
313 | }]) |
---|
314 | |
---|
315 | .directive('alert', function () { |
---|
316 | return { |
---|
317 | restrict:'EA', |
---|
318 | controller:'AlertController', |
---|
319 | templateUrl:'template/alert/alert.html', |
---|
320 | transclude:true, |
---|
321 | replace:true, |
---|
322 | scope: { |
---|
323 | type: '=', |
---|
324 | close: '&' |
---|
325 | } |
---|
326 | }; |
---|
327 | }); |
---|
328 | |
---|
329 | angular.module('ui.bootstrap.bindHtml', []) |
---|
330 | |
---|
331 | .directive('bindHtmlUnsafe', function () { |
---|
332 | return function (scope, element, attr) { |
---|
333 | element.addClass('ng-binding').data('$binding', attr.bindHtmlUnsafe); |
---|
334 | scope.$watch(attr.bindHtmlUnsafe, function bindHtmlUnsafeWatchAction(value) { |
---|
335 | element.html(value || ''); |
---|
336 | }); |
---|
337 | }; |
---|
338 | }); |
---|
339 | angular.module('ui.bootstrap.buttons', []) |
---|
340 | |
---|
341 | .constant('buttonConfig', { |
---|
342 | activeClass: 'active', |
---|
343 | toggleEvent: 'click' |
---|
344 | }) |
---|
345 | |
---|
346 | .controller('ButtonsController', ['buttonConfig', function(buttonConfig) { |
---|
347 | this.activeClass = buttonConfig.activeClass || 'active'; |
---|
348 | this.toggleEvent = buttonConfig.toggleEvent || 'click'; |
---|
349 | }]) |
---|
350 | |
---|
351 | .directive('btnRadio', function () { |
---|
352 | return { |
---|
353 | require: ['btnRadio', 'ngModel'], |
---|
354 | controller: 'ButtonsController', |
---|
355 | link: function (scope, element, attrs, ctrls) { |
---|
356 | var buttonsCtrl = ctrls[0], ngModelCtrl = ctrls[1]; |
---|
357 | |
---|
358 | //model -> UI |
---|
359 | ngModelCtrl.$render = function () { |
---|
360 | element.toggleClass(buttonsCtrl.activeClass, angular.equals(ngModelCtrl.$modelValue, scope.$eval(attrs.btnRadio))); |
---|
361 | }; |
---|
362 | |
---|
363 | //ui->model |
---|
364 | element.bind(buttonsCtrl.toggleEvent, function () { |
---|
365 | if (!element.hasClass(buttonsCtrl.activeClass)) { |
---|
366 | scope.$apply(function () { |
---|
367 | ngModelCtrl.$setViewValue(scope.$eval(attrs.btnRadio)); |
---|
368 | ngModelCtrl.$render(); |
---|
369 | }); |
---|
370 | } |
---|
371 | }); |
---|
372 | } |
---|
373 | }; |
---|
374 | }) |
---|
375 | |
---|
376 | .directive('btnCheckbox', function () { |
---|
377 | return { |
---|
378 | require: ['btnCheckbox', 'ngModel'], |
---|
379 | controller: 'ButtonsController', |
---|
380 | link: function (scope, element, attrs, ctrls) { |
---|
381 | var buttonsCtrl = ctrls[0], ngModelCtrl = ctrls[1]; |
---|
382 | |
---|
383 | function getTrueValue() { |
---|
384 | return getCheckboxValue(attrs.btnCheckboxTrue, true); |
---|
385 | } |
---|
386 | |
---|
387 | function getFalseValue() { |
---|
388 | return getCheckboxValue(attrs.btnCheckboxFalse, false); |
---|
389 | } |
---|
390 | |
---|
391 | function getCheckboxValue(attributeValue, defaultValue) { |
---|
392 | var val = scope.$eval(attributeValue); |
---|
393 | return angular.isDefined(val) ? val : defaultValue; |
---|
394 | } |
---|
395 | |
---|
396 | //model -> UI |
---|
397 | ngModelCtrl.$render = function () { |
---|
398 | element.toggleClass(buttonsCtrl.activeClass, angular.equals(ngModelCtrl.$modelValue, getTrueValue())); |
---|
399 | }; |
---|
400 | |
---|
401 | //ui->model |
---|
402 | element.bind(buttonsCtrl.toggleEvent, function () { |
---|
403 | scope.$apply(function () { |
---|
404 | ngModelCtrl.$setViewValue(element.hasClass(buttonsCtrl.activeClass) ? getFalseValue() : getTrueValue()); |
---|
405 | ngModelCtrl.$render(); |
---|
406 | }); |
---|
407 | }); |
---|
408 | } |
---|
409 | }; |
---|
410 | }); |
---|
411 | |
---|
412 | /** |
---|
413 | * @ngdoc overview |
---|
414 | * @name ui.bootstrap.carousel |
---|
415 | * |
---|
416 | * @description |
---|
417 | * AngularJS version of an image carousel. |
---|
418 | * |
---|
419 | */ |
---|
420 | angular.module('ui.bootstrap.carousel', ['ui.bootstrap.transition']) |
---|
421 | .controller('CarouselController', ['$scope', '$timeout', '$transition', '$q', function ($scope, $timeout, $transition, $q) { |
---|
422 | var self = this, |
---|
423 | slides = self.slides = [], |
---|
424 | currentIndex = -1, |
---|
425 | currentTimeout, isPlaying; |
---|
426 | self.currentSlide = null; |
---|
427 | |
---|
428 | var destroyed = false; |
---|
429 | /* direction: "prev" or "next" */ |
---|
430 | self.select = function(nextSlide, direction) { |
---|
431 | var nextIndex = slides.indexOf(nextSlide); |
---|
432 | //Decide direction if it's not given |
---|
433 | if (direction === undefined) { |
---|
434 | direction = nextIndex > currentIndex ? "next" : "prev"; |
---|
435 | } |
---|
436 | if (nextSlide && nextSlide !== self.currentSlide) { |
---|
437 | if ($scope.$currentTransition) { |
---|
438 | $scope.$currentTransition.cancel(); |
---|
439 | //Timeout so ng-class in template has time to fix classes for finished slide |
---|
440 | $timeout(goNext); |
---|
441 | } else { |
---|
442 | goNext(); |
---|
443 | } |
---|
444 | } |
---|
445 | function goNext() { |
---|
446 | // Scope has been destroyed, stop here. |
---|
447 | if (destroyed) { return; } |
---|
448 | //If we have a slide to transition from and we have a transition type and we're allowed, go |
---|
449 | if (self.currentSlide && angular.isString(direction) && !$scope.noTransition && nextSlide.$element) { |
---|
450 | //We shouldn't do class manip in here, but it's the same weird thing bootstrap does. need to fix sometime |
---|
451 | nextSlide.$element.addClass(direction); |
---|
452 | var reflow = nextSlide.$element[0].offsetWidth; //force reflow |
---|
453 | |
---|
454 | //Set all other slides to stop doing their stuff for the new transition |
---|
455 | angular.forEach(slides, function(slide) { |
---|
456 | angular.extend(slide, {direction: '', entering: false, leaving: false, active: false}); |
---|
457 | }); |
---|
458 | angular.extend(nextSlide, {direction: direction, active: true, entering: true}); |
---|
459 | angular.extend(self.currentSlide||{}, {direction: direction, leaving: true}); |
---|
460 | |
---|
461 | $scope.$currentTransition = $transition(nextSlide.$element, {}); |
---|
462 | //We have to create new pointers inside a closure since next & current will change |
---|
463 | (function(next,current) { |
---|
464 | $scope.$currentTransition.then( |
---|
465 | function(){ transitionDone(next, current); }, |
---|
466 | function(){ transitionDone(next, current); } |
---|
467 | ); |
---|
468 | }(nextSlide, self.currentSlide)); |
---|
469 | } else { |
---|
470 | transitionDone(nextSlide, self.currentSlide); |
---|
471 | } |
---|
472 | self.currentSlide = nextSlide; |
---|
473 | currentIndex = nextIndex; |
---|
474 | //every time you change slides, reset the timer |
---|
475 | restartTimer(); |
---|
476 | } |
---|
477 | function transitionDone(next, current) { |
---|
478 | angular.extend(next, {direction: '', active: true, leaving: false, entering: false}); |
---|
479 | angular.extend(current||{}, {direction: '', active: false, leaving: false, entering: false}); |
---|
480 | $scope.$currentTransition = null; |
---|
481 | } |
---|
482 | }; |
---|
483 | $scope.$on('$destroy', function () { |
---|
484 | destroyed = true; |
---|
485 | }); |
---|
486 | |
---|
487 | /* Allow outside people to call indexOf on slides array */ |
---|
488 | self.indexOfSlide = function(slide) { |
---|
489 | return slides.indexOf(slide); |
---|
490 | }; |
---|
491 | |
---|
492 | $scope.next = function() { |
---|
493 | var newIndex = (currentIndex + 1) % slides.length; |
---|
494 | |
---|
495 | //Prevent this user-triggered transition from occurring if there is already one in progress |
---|
496 | if (!$scope.$currentTransition) { |
---|
497 | return self.select(slides[newIndex], 'next'); |
---|
498 | } |
---|
499 | }; |
---|
500 | |
---|
501 | $scope.prev = function() { |
---|
502 | var newIndex = currentIndex - 1 < 0 ? slides.length - 1 : currentIndex - 1; |
---|
503 | |
---|
504 | //Prevent this user-triggered transition from occurring if there is already one in progress |
---|
505 | if (!$scope.$currentTransition) { |
---|
506 | return self.select(slides[newIndex], 'prev'); |
---|
507 | } |
---|
508 | }; |
---|
509 | |
---|
510 | $scope.select = function(slide) { |
---|
511 | self.select(slide); |
---|
512 | }; |
---|
513 | |
---|
514 | $scope.isActive = function(slide) { |
---|
515 | return self.currentSlide === slide; |
---|
516 | }; |
---|
517 | |
---|
518 | $scope.slides = function() { |
---|
519 | return slides; |
---|
520 | }; |
---|
521 | |
---|
522 | $scope.$watch('interval', restartTimer); |
---|
523 | $scope.$on('$destroy', resetTimer); |
---|
524 | |
---|
525 | function restartTimer() { |
---|
526 | resetTimer(); |
---|
527 | var interval = +$scope.interval; |
---|
528 | if (!isNaN(interval) && interval>=0) { |
---|
529 | currentTimeout = $timeout(timerFn, interval); |
---|
530 | } |
---|
531 | } |
---|
532 | |
---|
533 | function resetTimer() { |
---|
534 | if (currentTimeout) { |
---|
535 | $timeout.cancel(currentTimeout); |
---|
536 | currentTimeout = null; |
---|
537 | } |
---|
538 | } |
---|
539 | |
---|
540 | function timerFn() { |
---|
541 | if (isPlaying) { |
---|
542 | $scope.next(); |
---|
543 | restartTimer(); |
---|
544 | } else { |
---|
545 | $scope.pause(); |
---|
546 | } |
---|
547 | } |
---|
548 | |
---|
549 | $scope.play = function() { |
---|
550 | if (!isPlaying) { |
---|
551 | isPlaying = true; |
---|
552 | restartTimer(); |
---|
553 | } |
---|
554 | }; |
---|
555 | $scope.pause = function() { |
---|
556 | if (!$scope.noPause) { |
---|
557 | isPlaying = false; |
---|
558 | resetTimer(); |
---|
559 | } |
---|
560 | }; |
---|
561 | |
---|
562 | self.addSlide = function(slide, element) { |
---|
563 | slide.$element = element; |
---|
564 | slides.push(slide); |
---|
565 | //if this is the first slide or the slide is set to active, select it |
---|
566 | if(slides.length === 1 || slide.active) { |
---|
567 | self.select(slides[slides.length-1]); |
---|
568 | if (slides.length == 1) { |
---|
569 | $scope.play(); |
---|
570 | } |
---|
571 | } else { |
---|
572 | slide.active = false; |
---|
573 | } |
---|
574 | }; |
---|
575 | |
---|
576 | self.removeSlide = function(slide) { |
---|
577 | //get the index of the slide inside the carousel |
---|
578 | var index = slides.indexOf(slide); |
---|
579 | slides.splice(index, 1); |
---|
580 | if (slides.length > 0 && slide.active) { |
---|
581 | if (index >= slides.length) { |
---|
582 | self.select(slides[index-1]); |
---|
583 | } else { |
---|
584 | self.select(slides[index]); |
---|
585 | } |
---|
586 | } else if (currentIndex > index) { |
---|
587 | currentIndex--; |
---|
588 | } |
---|
589 | }; |
---|
590 | |
---|
591 | }]) |
---|
592 | |
---|
593 | /** |
---|
594 | * @ngdoc directive |
---|
595 | * @name ui.bootstrap.carousel.directive:carousel |
---|
596 | * @restrict EA |
---|
597 | * |
---|
598 | * @description |
---|
599 | * Carousel is the outer container for a set of image 'slides' to showcase. |
---|
600 | * |
---|
601 | * @param {number=} interval The time, in milliseconds, that it will take the carousel to go to the next slide. |
---|
602 | * @param {boolean=} noTransition Whether to disable transitions on the carousel. |
---|
603 | * @param {boolean=} noPause Whether to disable pausing on the carousel (by default, the carousel interval pauses on hover). |
---|
604 | * |
---|
605 | * @example |
---|
606 | <example module="ui.bootstrap"> |
---|
607 | <file name="index.html"> |
---|
608 | <carousel> |
---|
609 | <slide> |
---|
610 | <img src="http://placekitten.com/150/150" style="margin:auto;"> |
---|
611 | <div class="carousel-caption"> |
---|
612 | <p>Beautiful!</p> |
---|
613 | </div> |
---|
614 | </slide> |
---|
615 | <slide> |
---|
616 | <img src="http://placekitten.com/100/150" style="margin:auto;"> |
---|
617 | <div class="carousel-caption"> |
---|
618 | <p>D'aww!</p> |
---|
619 | </div> |
---|
620 | </slide> |
---|
621 | </carousel> |
---|
622 | </file> |
---|
623 | <file name="demo.css"> |
---|
624 | .carousel-indicators { |
---|
625 | top: auto; |
---|
626 | bottom: 15px; |
---|
627 | } |
---|
628 | </file> |
---|
629 | </example> |
---|
630 | */ |
---|
631 | .directive('carousel', [function() { |
---|
632 | return { |
---|
633 | restrict: 'EA', |
---|
634 | transclude: true, |
---|
635 | replace: true, |
---|
636 | controller: 'CarouselController', |
---|
637 | require: 'carousel', |
---|
638 | templateUrl: 'template/carousel/carousel.html', |
---|
639 | scope: { |
---|
640 | interval: '=', |
---|
641 | noTransition: '=', |
---|
642 | noPause: '=' |
---|
643 | } |
---|
644 | }; |
---|
645 | }]) |
---|
646 | |
---|
647 | /** |
---|
648 | * @ngdoc directive |
---|
649 | * @name ui.bootstrap.carousel.directive:slide |
---|
650 | * @restrict EA |
---|
651 | * |
---|
652 | * @description |
---|
653 | * Creates a slide inside a {@link ui.bootstrap.carousel.directive:carousel carousel}. Must be placed as a child of a carousel element. |
---|
654 | * |
---|
655 | * @param {boolean=} active Model binding, whether or not this slide is currently active. |
---|
656 | * |
---|
657 | * @example |
---|
658 | <example module="ui.bootstrap"> |
---|
659 | <file name="index.html"> |
---|
660 | <div ng-controller="CarouselDemoCtrl"> |
---|
661 | <carousel> |
---|
662 | <slide ng-repeat="slide in slides" active="slide.active"> |
---|
663 | <img ng-src="{{slide.image}}" style="margin:auto;"> |
---|
664 | <div class="carousel-caption"> |
---|
665 | <h4>Slide {{$index}}</h4> |
---|
666 | <p>{{slide.text}}</p> |
---|
667 | </div> |
---|
668 | </slide> |
---|
669 | </carousel> |
---|
670 | <div class="row-fluid"> |
---|
671 | <div class="span6"> |
---|
672 | <ul> |
---|
673 | <li ng-repeat="slide in slides"> |
---|
674 | <button class="btn btn-mini" ng-class="{'btn-info': !slide.active, 'btn-success': slide.active}" ng-disabled="slide.active" ng-click="slide.active = true">select</button> |
---|
675 | {{$index}}: {{slide.text}} |
---|
676 | </li> |
---|
677 | </ul> |
---|
678 | <a class="btn" ng-click="addSlide()">Add Slide</a> |
---|
679 | </div> |
---|
680 | <div class="span6"> |
---|
681 | Interval, in milliseconds: <input type="number" ng-model="myInterval"> |
---|
682 | <br />Enter a negative number to stop the interval. |
---|
683 | </div> |
---|
684 | </div> |
---|
685 | </div> |
---|
686 | </file> |
---|
687 | <file name="script.js"> |
---|
688 | function CarouselDemoCtrl($scope) { |
---|
689 | $scope.myInterval = 5000; |
---|
690 | var slides = $scope.slides = []; |
---|
691 | $scope.addSlide = function() { |
---|
692 | var newWidth = 200 + ((slides.length + (25 * slides.length)) % 150); |
---|
693 | slides.push({ |
---|
694 | image: 'http://placekitten.com/' + newWidth + '/200', |
---|
695 | text: ['More','Extra','Lots of','Surplus'][slides.length % 4] + ' ' |
---|
696 | ['Cats', 'Kittys', 'Felines', 'Cutes'][slides.length % 4] |
---|
697 | }); |
---|
698 | }; |
---|
699 | for (var i=0; i<4; i++) $scope.addSlide(); |
---|
700 | } |
---|
701 | </file> |
---|
702 | <file name="demo.css"> |
---|
703 | .carousel-indicators { |
---|
704 | top: auto; |
---|
705 | bottom: 15px; |
---|
706 | } |
---|
707 | </file> |
---|
708 | </example> |
---|
709 | */ |
---|
710 | |
---|
711 | .directive('slide', ['$parse', function($parse) { |
---|
712 | return { |
---|
713 | require: '^carousel', |
---|
714 | restrict: 'EA', |
---|
715 | transclude: true, |
---|
716 | replace: true, |
---|
717 | templateUrl: 'template/carousel/slide.html', |
---|
718 | scope: { |
---|
719 | }, |
---|
720 | link: function (scope, element, attrs, carouselCtrl) { |
---|
721 | //Set up optional 'active' = binding |
---|
722 | if (attrs.active) { |
---|
723 | var getActive = $parse(attrs.active); |
---|
724 | var setActive = getActive.assign; |
---|
725 | var lastValue = scope.active = getActive(scope.$parent); |
---|
726 | scope.$watch(function parentActiveWatch() { |
---|
727 | var parentActive = getActive(scope.$parent); |
---|
728 | |
---|
729 | if (parentActive !== scope.active) { |
---|
730 | // we are out of sync and need to copy |
---|
731 | if (parentActive !== lastValue) { |
---|
732 | // parent changed and it has precedence |
---|
733 | lastValue = scope.active = parentActive; |
---|
734 | } else { |
---|
735 | // if the parent can be assigned then do so |
---|
736 | setActive(scope.$parent, parentActive = lastValue = scope.active); |
---|
737 | } |
---|
738 | } |
---|
739 | return parentActive; |
---|
740 | }); |
---|
741 | } |
---|
742 | |
---|
743 | carouselCtrl.addSlide(scope, element); |
---|
744 | //when the scope is destroyed then remove the slide from the current slides array |
---|
745 | scope.$on('$destroy', function() { |
---|
746 | carouselCtrl.removeSlide(scope); |
---|
747 | }); |
---|
748 | |
---|
749 | scope.$watch('active', function(active) { |
---|
750 | if (active) { |
---|
751 | carouselCtrl.select(scope); |
---|
752 | } |
---|
753 | }); |
---|
754 | } |
---|
755 | }; |
---|
756 | }]); |
---|
757 | |
---|
758 | angular.module('ui.bootstrap.position', []) |
---|
759 | |
---|
760 | /** |
---|
761 | * A set of utility methods that can be use to retrieve position of DOM elements. |
---|
762 | * It is meant to be used where we need to absolute-position DOM elements in |
---|
763 | * relation to other, existing elements (this is the case for tooltips, popovers, |
---|
764 | * typeahead suggestions etc.). |
---|
765 | */ |
---|
766 | .factory('$position', ['$document', '$window', function ($document, $window) { |
---|
767 | |
---|
768 | function getStyle(el, cssprop) { |
---|
769 | if (el.currentStyle) { //IE |
---|
770 | return el.currentStyle[cssprop]; |
---|
771 | } else if ($window.getComputedStyle) { |
---|
772 | return $window.getComputedStyle(el)[cssprop]; |
---|
773 | } |
---|
774 | // finally try and get inline style |
---|
775 | return el.style[cssprop]; |
---|
776 | } |
---|
777 | |
---|
778 | /** |
---|
779 | * Checks if a given element is statically positioned |
---|
780 | * @param element - raw DOM element |
---|
781 | */ |
---|
782 | function isStaticPositioned(element) { |
---|
783 | return (getStyle(element, "position") || 'static' ) === 'static'; |
---|
784 | } |
---|
785 | |
---|
786 | /** |
---|
787 | * returns the closest, non-statically positioned parentOffset of a given element |
---|
788 | * @param element |
---|
789 | */ |
---|
790 | var parentOffsetEl = function (element) { |
---|
791 | var docDomEl = $document[0]; |
---|
792 | var offsetParent = element.offsetParent || docDomEl; |
---|
793 | while (offsetParent && offsetParent !== docDomEl && isStaticPositioned(offsetParent) ) { |
---|
794 | offsetParent = offsetParent.offsetParent; |
---|
795 | } |
---|
796 | return offsetParent || docDomEl; |
---|
797 | }; |
---|
798 | |
---|
799 | return { |
---|
800 | /** |
---|
801 | * Provides read-only equivalent of jQuery's position function: |
---|
802 | * http://api.jquery.com/position/ |
---|
803 | */ |
---|
804 | position: function (element) { |
---|
805 | var elBCR = this.offset(element); |
---|
806 | var offsetParentBCR = { top: 0, left: 0 }; |
---|
807 | var offsetParentEl = parentOffsetEl(element[0]); |
---|
808 | if (offsetParentEl != $document[0]) { |
---|
809 | offsetParentBCR = this.offset(angular.element(offsetParentEl)); |
---|
810 | offsetParentBCR.top += offsetParentEl.clientTop - offsetParentEl.scrollTop; |
---|
811 | offsetParentBCR.left += offsetParentEl.clientLeft - offsetParentEl.scrollLeft; |
---|
812 | } |
---|
813 | |
---|
814 | var boundingClientRect = element[0].getBoundingClientRect(); |
---|
815 | return { |
---|
816 | width: boundingClientRect.width || element.prop('offsetWidth'), |
---|
817 | height: boundingClientRect.height || element.prop('offsetHeight'), |
---|
818 | top: elBCR.top - offsetParentBCR.top, |
---|
819 | left: elBCR.left - offsetParentBCR.left |
---|
820 | }; |
---|
821 | }, |
---|
822 | |
---|
823 | /** |
---|
824 | * Provides read-only equivalent of jQuery's offset function: |
---|
825 | * http://api.jquery.com/offset/ |
---|
826 | */ |
---|
827 | offset: function (element) { |
---|
828 | var boundingClientRect = element[0].getBoundingClientRect(); |
---|
829 | return { |
---|
830 | width: boundingClientRect.width || element.prop('offsetWidth'), |
---|
831 | height: boundingClientRect.height || element.prop('offsetHeight'), |
---|
832 | top: boundingClientRect.top + ($window.pageYOffset || $document[0].body.scrollTop || $document[0].documentElement.scrollTop), |
---|
833 | left: boundingClientRect.left + ($window.pageXOffset || $document[0].body.scrollLeft || $document[0].documentElement.scrollLeft) |
---|
834 | }; |
---|
835 | } |
---|
836 | }; |
---|
837 | }]); |
---|
838 | |
---|
839 | angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.position']) |
---|
840 | |
---|
841 | .constant('datepickerConfig', { |
---|
842 | dayFormat: 'dd', |
---|
843 | monthFormat: 'MMMM', |
---|
844 | yearFormat: 'yyyy', |
---|
845 | dayHeaderFormat: 'EEE', |
---|
846 | dayTitleFormat: 'MMMM yyyy', |
---|
847 | monthTitleFormat: 'yyyy', |
---|
848 | showWeeks: true, |
---|
849 | startingDay: 0, |
---|
850 | yearRange: 20, |
---|
851 | minDate: null, |
---|
852 | maxDate: null |
---|
853 | }) |
---|
854 | |
---|
855 | .controller('DatepickerController', ['$scope', '$attrs', 'dateFilter', 'datepickerConfig', function($scope, $attrs, dateFilter, dtConfig) { |
---|
856 | var format = { |
---|
857 | day: getValue($attrs.dayFormat, dtConfig.dayFormat), |
---|
858 | month: getValue($attrs.monthFormat, dtConfig.monthFormat), |
---|
859 | year: getValue($attrs.yearFormat, dtConfig.yearFormat), |
---|
860 | dayHeader: getValue($attrs.dayHeaderFormat, dtConfig.dayHeaderFormat), |
---|
861 | dayTitle: getValue($attrs.dayTitleFormat, dtConfig.dayTitleFormat), |
---|
862 | monthTitle: getValue($attrs.monthTitleFormat, dtConfig.monthTitleFormat) |
---|
863 | }, |
---|
864 | startingDay = getValue($attrs.startingDay, dtConfig.startingDay), |
---|
865 | yearRange = getValue($attrs.yearRange, dtConfig.yearRange); |
---|
866 | |
---|
867 | this.minDate = dtConfig.minDate ? new Date(dtConfig.minDate) : null; |
---|
868 | this.maxDate = dtConfig.maxDate ? new Date(dtConfig.maxDate) : null; |
---|
869 | |
---|
870 | function getValue(value, defaultValue) { |
---|
871 | return angular.isDefined(value) ? $scope.$parent.$eval(value) : defaultValue; |
---|
872 | } |
---|
873 | |
---|
874 | function getDaysInMonth( year, month ) { |
---|
875 | return new Date(year, month, 0).getDate(); |
---|
876 | } |
---|
877 | |
---|
878 | function getDates(startDate, n) { |
---|
879 | var dates = new Array(n); |
---|
880 | var current = startDate, i = 0; |
---|
881 | while (i < n) { |
---|
882 | dates[i++] = new Date(current); |
---|
883 | current.setDate( current.getDate() + 1 ); |
---|
884 | } |
---|
885 | return dates; |
---|
886 | } |
---|
887 | |
---|
888 | function makeDate(date, format, isSelected, isSecondary) { |
---|
889 | return { date: date, label: dateFilter(date, format), selected: !!isSelected, secondary: !!isSecondary }; |
---|
890 | } |
---|
891 | |
---|
892 | this.modes = [ |
---|
893 | { |
---|
894 | name: 'day', |
---|
895 | getVisibleDates: function(date, selected) { |
---|
896 | var year = date.getFullYear(), month = date.getMonth(), firstDayOfMonth = new Date(year, month, 1); |
---|
897 | var difference = startingDay - firstDayOfMonth.getDay(), |
---|
898 | numDisplayedFromPreviousMonth = (difference > 0) ? 7 - difference : - difference, |
---|
899 | firstDate = new Date(firstDayOfMonth), numDates = 0; |
---|
900 | |
---|
901 | if ( numDisplayedFromPreviousMonth > 0 ) { |
---|
902 | firstDate.setDate( - numDisplayedFromPreviousMonth + 1 ); |
---|
903 | numDates += numDisplayedFromPreviousMonth; // Previous |
---|
904 | } |
---|
905 | numDates += getDaysInMonth(year, month + 1); // Current |
---|
906 | numDates += (7 - numDates % 7) % 7; // Next |
---|
907 | |
---|
908 | var days = getDates(firstDate, numDates), labels = new Array(7); |
---|
909 | for (var i = 0; i < numDates; i ++) { |
---|
910 | var dt = new Date(days[i]); |
---|
911 | days[i] = makeDate(dt, format.day, (selected && selected.getDate() === dt.getDate() && selected.getMonth() === dt.getMonth() && selected.getFullYear() === dt.getFullYear()), dt.getMonth() !== month); |
---|
912 | } |
---|
913 | for (var j = 0; j < 7; j++) { |
---|
914 | labels[j] = dateFilter(days[j].date, format.dayHeader); |
---|
915 | } |
---|
916 | return { objects: days, title: dateFilter(date, format.dayTitle), labels: labels }; |
---|
917 | }, |
---|
918 | compare: function(date1, date2) { |
---|
919 | return (new Date( date1.getFullYear(), date1.getMonth(), date1.getDate() ) - new Date( date2.getFullYear(), date2.getMonth(), date2.getDate() ) ); |
---|
920 | }, |
---|
921 | split: 7, |
---|
922 | step: { months: 1 } |
---|
923 | }, |
---|
924 | { |
---|
925 | name: 'month', |
---|
926 | getVisibleDates: function(date, selected) { |
---|
927 | var months = new Array(12), year = date.getFullYear(); |
---|
928 | for ( var i = 0; i < 12; i++ ) { |
---|
929 | var dt = new Date(year, i, 1); |
---|
930 | months[i] = makeDate(dt, format.month, (selected && selected.getMonth() === i && selected.getFullYear() === year)); |
---|
931 | } |
---|
932 | return { objects: months, title: dateFilter(date, format.monthTitle) }; |
---|
933 | }, |
---|
934 | compare: function(date1, date2) { |
---|
935 | return new Date( date1.getFullYear(), date1.getMonth() ) - new Date( date2.getFullYear(), date2.getMonth() ); |
---|
936 | }, |
---|
937 | split: 3, |
---|
938 | step: { years: 1 } |
---|
939 | }, |
---|
940 | { |
---|
941 | name: 'year', |
---|
942 | getVisibleDates: function(date, selected) { |
---|
943 | var years = new Array(yearRange), year = date.getFullYear(), startYear = parseInt((year - 1) / yearRange, 10) * yearRange + 1; |
---|
944 | for ( var i = 0; i < yearRange; i++ ) { |
---|
945 | var dt = new Date(startYear + i, 0, 1); |
---|
946 | years[i] = makeDate(dt, format.year, (selected && selected.getFullYear() === dt.getFullYear())); |
---|
947 | } |
---|
948 | return { objects: years, title: [years[0].label, years[yearRange - 1].label].join(' - ') }; |
---|
949 | }, |
---|
950 | compare: function(date1, date2) { |
---|
951 | return date1.getFullYear() - date2.getFullYear(); |
---|
952 | }, |
---|
953 | split: 5, |
---|
954 | step: { years: yearRange } |
---|
955 | } |
---|
956 | ]; |
---|
957 | |
---|
958 | this.isDisabled = function(date, mode) { |
---|
959 | var currentMode = this.modes[mode || 0]; |
---|
960 | return ((this.minDate && currentMode.compare(date, this.minDate) < 0) || (this.maxDate && currentMode.compare(date, this.maxDate) > 0) || ($scope.dateDisabled && $scope.dateDisabled({date: date, mode: currentMode.name}))); |
---|
961 | }; |
---|
962 | }]) |
---|
963 | |
---|
964 | .directive( 'datepicker', ['dateFilter', '$parse', 'datepickerConfig', '$log', function (dateFilter, $parse, datepickerConfig, $log) { |
---|
965 | return { |
---|
966 | restrict: 'EA', |
---|
967 | replace: true, |
---|
968 | templateUrl: 'template/datepicker/datepicker.html', |
---|
969 | scope: { |
---|
970 | dateDisabled: '&' |
---|
971 | }, |
---|
972 | require: ['datepicker', '?^ngModel'], |
---|
973 | controller: 'DatepickerController', |
---|
974 | link: function(scope, element, attrs, ctrls) { |
---|
975 | var datepickerCtrl = ctrls[0], ngModel = ctrls[1]; |
---|
976 | |
---|
977 | if (!ngModel) { |
---|
978 | return; // do nothing if no ng-model |
---|
979 | } |
---|
980 | |
---|
981 | // Configuration parameters |
---|
982 | var mode = 0, selected = new Date(), showWeeks = datepickerConfig.showWeeks; |
---|
983 | |
---|
984 | if (attrs.showWeeks) { |
---|
985 | scope.$parent.$watch($parse(attrs.showWeeks), function(value) { |
---|
986 | showWeeks = !! value; |
---|
987 | updateShowWeekNumbers(); |
---|
988 | }); |
---|
989 | } else { |
---|
990 | updateShowWeekNumbers(); |
---|
991 | } |
---|
992 | |
---|
993 | if (attrs.min) { |
---|
994 | scope.$parent.$watch($parse(attrs.min), function(value) { |
---|
995 | datepickerCtrl.minDate = value ? new Date(value) : null; |
---|
996 | refill(); |
---|
997 | }); |
---|
998 | } |
---|
999 | if (attrs.max) { |
---|
1000 | scope.$parent.$watch($parse(attrs.max), function(value) { |
---|
1001 | datepickerCtrl.maxDate = value ? new Date(value) : null; |
---|
1002 | refill(); |
---|
1003 | }); |
---|
1004 | } |
---|
1005 | |
---|
1006 | function updateShowWeekNumbers() { |
---|
1007 | scope.showWeekNumbers = mode === 0 && showWeeks; |
---|
1008 | } |
---|
1009 | |
---|
1010 | // Split array into smaller arrays |
---|
1011 | function split(arr, size) { |
---|
1012 | var arrays = []; |
---|
1013 | while (arr.length > 0) { |
---|
1014 | arrays.push(arr.splice(0, size)); |
---|
1015 | } |
---|
1016 | return arrays; |
---|
1017 | } |
---|
1018 | |
---|
1019 | function refill( updateSelected ) { |
---|
1020 | var date = null, valid = true; |
---|
1021 | |
---|
1022 | if ( ngModel.$modelValue ) { |
---|
1023 | date = new Date( ngModel.$modelValue ); |
---|
1024 | |
---|
1025 | if ( isNaN(date) ) { |
---|
1026 | valid = false; |
---|
1027 | $log.error('Datepicker directive: "ng-model" value must be a Date object, a number of milliseconds since 01.01.1970 or a string representing an RFC2822 or ISO 8601 date.'); |
---|
1028 | } else if ( updateSelected ) { |
---|
1029 | selected = date; |
---|
1030 | } |
---|
1031 | } |
---|
1032 | ngModel.$setValidity('date', valid); |
---|
1033 | |
---|
1034 | var currentMode = datepickerCtrl.modes[mode], data = currentMode.getVisibleDates(selected, date); |
---|
1035 | angular.forEach(data.objects, function(obj) { |
---|
1036 | obj.disabled = datepickerCtrl.isDisabled(obj.date, mode); |
---|
1037 | }); |
---|
1038 | |
---|
1039 | ngModel.$setValidity('date-disabled', (!date || !datepickerCtrl.isDisabled(date))); |
---|
1040 | |
---|
1041 | scope.rows = split(data.objects, currentMode.split); |
---|
1042 | scope.labels = data.labels || []; |
---|
1043 | scope.title = data.title; |
---|
1044 | } |
---|
1045 | |
---|
1046 | function setMode(value) { |
---|
1047 | mode = value; |
---|
1048 | updateShowWeekNumbers(); |
---|
1049 | refill(); |
---|
1050 | } |
---|
1051 | |
---|
1052 | ngModel.$render = function() { |
---|
1053 | refill( true ); |
---|
1054 | }; |
---|
1055 | |
---|
1056 | scope.select = function( date ) { |
---|
1057 | if ( mode === 0 ) { |
---|
1058 | var dt = ngModel.$modelValue ? new Date( ngModel.$modelValue ) : new Date(0, 0, 0, 0, 0, 0, 0); |
---|
1059 | dt.setFullYear( date.getFullYear(), date.getMonth(), date.getDate() ); |
---|
1060 | ngModel.$setViewValue( dt ); |
---|
1061 | refill( true ); |
---|
1062 | } else { |
---|
1063 | selected = date; |
---|
1064 | setMode( mode - 1 ); |
---|
1065 | } |
---|
1066 | }; |
---|
1067 | scope.move = function(direction) { |
---|
1068 | var step = datepickerCtrl.modes[mode].step; |
---|
1069 | selected.setMonth( selected.getMonth() + direction * (step.months || 0) ); |
---|
1070 | selected.setFullYear( selected.getFullYear() + direction * (step.years || 0) ); |
---|
1071 | refill(); |
---|
1072 | }; |
---|
1073 | scope.toggleMode = function() { |
---|
1074 | setMode( (mode + 1) % datepickerCtrl.modes.length ); |
---|
1075 | }; |
---|
1076 | scope.getWeekNumber = function(row) { |
---|
1077 | return ( mode === 0 && scope.showWeekNumbers && row.length === 7 ) ? getISO8601WeekNumber(row[0].date) : null; |
---|
1078 | }; |
---|
1079 | |
---|
1080 | function getISO8601WeekNumber(date) { |
---|
1081 | var checkDate = new Date(date); |
---|
1082 | checkDate.setDate(checkDate.getDate() + 4 - (checkDate.getDay() || 7)); // Thursday |
---|
1083 | var time = checkDate.getTime(); |
---|
1084 | checkDate.setMonth(0); // Compare with Jan 1 |
---|
1085 | checkDate.setDate(1); |
---|
1086 | return Math.floor(Math.round((time - checkDate) / 86400000) / 7) + 1; |
---|
1087 | } |
---|
1088 | } |
---|
1089 | }; |
---|
1090 | }]) |
---|
1091 | |
---|
1092 | .constant('datepickerPopupConfig', { |
---|
1093 | dateFormat: 'yyyy-MM-dd', |
---|
1094 | currentText: 'Today', |
---|
1095 | toggleWeeksText: 'Weeks', |
---|
1096 | clearText: 'Clear', |
---|
1097 | closeText: 'Done', |
---|
1098 | closeOnDateSelection: true, |
---|
1099 | appendToBody: false, |
---|
1100 | showButtonBar: true |
---|
1101 | }) |
---|
1102 | |
---|
1103 | .directive('datepickerPopup', ['$compile', '$parse', '$document', '$position', 'dateFilter', 'datepickerPopupConfig', 'datepickerConfig', |
---|
1104 | function ($compile, $parse, $document, $position, dateFilter, datepickerPopupConfig, datepickerConfig) { |
---|
1105 | return { |
---|
1106 | restrict: 'EA', |
---|
1107 | require: 'ngModel', |
---|
1108 | link: function(originalScope, element, attrs, ngModel) { |
---|
1109 | var scope = originalScope.$new(), // create a child scope so we are not polluting original one |
---|
1110 | dateFormat, |
---|
1111 | closeOnDateSelection = angular.isDefined(attrs.closeOnDateSelection) ? originalScope.$eval(attrs.closeOnDateSelection) : datepickerPopupConfig.closeOnDateSelection, |
---|
1112 | appendToBody = angular.isDefined(attrs.datepickerAppendToBody) ? originalScope.$eval(attrs.datepickerAppendToBody) : datepickerPopupConfig.appendToBody; |
---|
1113 | |
---|
1114 | attrs.$observe('datepickerPopup', function(value) { |
---|
1115 | dateFormat = value || datepickerPopupConfig.dateFormat; |
---|
1116 | ngModel.$render(); |
---|
1117 | }); |
---|
1118 | |
---|
1119 | scope.showButtonBar = angular.isDefined(attrs.showButtonBar) ? originalScope.$eval(attrs.showButtonBar) : datepickerPopupConfig.showButtonBar; |
---|
1120 | |
---|
1121 | originalScope.$on('$destroy', function() { |
---|
1122 | $popup.remove(); |
---|
1123 | scope.$destroy(); |
---|
1124 | }); |
---|
1125 | |
---|
1126 | attrs.$observe('currentText', function(text) { |
---|
1127 | scope.currentText = angular.isDefined(text) ? text : datepickerPopupConfig.currentText; |
---|
1128 | }); |
---|
1129 | attrs.$observe('toggleWeeksText', function(text) { |
---|
1130 | scope.toggleWeeksText = angular.isDefined(text) ? text : datepickerPopupConfig.toggleWeeksText; |
---|
1131 | }); |
---|
1132 | attrs.$observe('clearText', function(text) { |
---|
1133 | scope.clearText = angular.isDefined(text) ? text : datepickerPopupConfig.clearText; |
---|
1134 | }); |
---|
1135 | attrs.$observe('closeText', function(text) { |
---|
1136 | scope.closeText = angular.isDefined(text) ? text : datepickerPopupConfig.closeText; |
---|
1137 | }); |
---|
1138 | |
---|
1139 | var getIsOpen, setIsOpen; |
---|
1140 | if ( attrs.isOpen ) { |
---|
1141 | getIsOpen = $parse(attrs.isOpen); |
---|
1142 | setIsOpen = getIsOpen.assign; |
---|
1143 | |
---|
1144 | originalScope.$watch(getIsOpen, function updateOpen(value) { |
---|
1145 | scope.isOpen = !! value; |
---|
1146 | }); |
---|
1147 | } |
---|
1148 | scope.isOpen = getIsOpen ? getIsOpen(originalScope) : false; // Initial state |
---|
1149 | |
---|
1150 | function setOpen( value ) { |
---|
1151 | if (setIsOpen) { |
---|
1152 | setIsOpen(originalScope, !!value); |
---|
1153 | } else { |
---|
1154 | scope.isOpen = !!value; |
---|
1155 | } |
---|
1156 | } |
---|
1157 | |
---|
1158 | var documentClickBind = function(event) { |
---|
1159 | if (scope.isOpen && event.target !== element[0]) { |
---|
1160 | scope.$apply(function() { |
---|
1161 | setOpen(false); |
---|
1162 | }); |
---|
1163 | } |
---|
1164 | }; |
---|
1165 | |
---|
1166 | var elementFocusBind = function() { |
---|
1167 | scope.$apply(function() { |
---|
1168 | setOpen( true ); |
---|
1169 | }); |
---|
1170 | }; |
---|
1171 | |
---|
1172 | // popup element used to display calendar |
---|
1173 | var popupEl = angular.element('<div datepicker-popup-wrap><div datepicker></div></div>'); |
---|
1174 | popupEl.attr({ |
---|
1175 | 'ng-model': 'date', |
---|
1176 | 'ng-change': 'dateSelection()' |
---|
1177 | }); |
---|
1178 | var datepickerEl = angular.element(popupEl.children()[0]); |
---|
1179 | if (attrs.datepickerOptions) { |
---|
1180 | datepickerEl.attr(angular.extend({}, originalScope.$eval(attrs.datepickerOptions))); |
---|
1181 | } |
---|
1182 | |
---|
1183 | // TODO: reverse from dateFilter string to Date object |
---|
1184 | function parseDate(viewValue) { |
---|
1185 | if (!viewValue) { |
---|
1186 | ngModel.$setValidity('date', true); |
---|
1187 | return null; |
---|
1188 | } else if (angular.isDate(viewValue)) { |
---|
1189 | ngModel.$setValidity('date', true); |
---|
1190 | return viewValue; |
---|
1191 | } else if (angular.isString(viewValue)) { |
---|
1192 | var date = new Date(viewValue); |
---|
1193 | if (isNaN(date)) { |
---|
1194 | ngModel.$setValidity('date', false); |
---|
1195 | return undefined; |
---|
1196 | } else { |
---|
1197 | ngModel.$setValidity('date', true); |
---|
1198 | return date; |
---|
1199 | } |
---|
1200 | } else { |
---|
1201 | ngModel.$setValidity('date', false); |
---|
1202 | return undefined; |
---|
1203 | } |
---|
1204 | } |
---|
1205 | ngModel.$parsers.unshift(parseDate); |
---|
1206 | |
---|
1207 | // Inner change |
---|
1208 | scope.dateSelection = function(dt) { |
---|
1209 | if (angular.isDefined(dt)) { |
---|
1210 | scope.date = dt; |
---|
1211 | } |
---|
1212 | ngModel.$setViewValue(scope.date); |
---|
1213 | ngModel.$render(); |
---|
1214 | |
---|
1215 | if (closeOnDateSelection) { |
---|
1216 | setOpen( false ); |
---|
1217 | } |
---|
1218 | }; |
---|
1219 | |
---|
1220 | element.bind('input change keyup', function() { |
---|
1221 | scope.$apply(function() { |
---|
1222 | scope.date = ngModel.$modelValue; |
---|
1223 | }); |
---|
1224 | }); |
---|
1225 | |
---|
1226 | // Outter change |
---|
1227 | ngModel.$render = function() { |
---|
1228 | var date = ngModel.$viewValue ? dateFilter(ngModel.$viewValue, dateFormat) : ''; |
---|
1229 | element.val(date); |
---|
1230 | scope.date = ngModel.$modelValue; |
---|
1231 | }; |
---|
1232 | |
---|
1233 | function addWatchableAttribute(attribute, scopeProperty, datepickerAttribute) { |
---|
1234 | if (attribute) { |
---|
1235 | originalScope.$watch($parse(attribute), function(value){ |
---|
1236 | scope[scopeProperty] = value; |
---|
1237 | }); |
---|
1238 | datepickerEl.attr(datepickerAttribute || scopeProperty, scopeProperty); |
---|
1239 | } |
---|
1240 | } |
---|
1241 | addWatchableAttribute(attrs.min, 'min'); |
---|
1242 | addWatchableAttribute(attrs.max, 'max'); |
---|
1243 | if (attrs.showWeeks) { |
---|
1244 | addWatchableAttribute(attrs.showWeeks, 'showWeeks', 'show-weeks'); |
---|
1245 | } else { |
---|
1246 | scope.showWeeks = datepickerConfig.showWeeks; |
---|
1247 | datepickerEl.attr('show-weeks', 'showWeeks'); |
---|
1248 | } |
---|
1249 | if (attrs.dateDisabled) { |
---|
1250 | datepickerEl.attr('date-disabled', attrs.dateDisabled); |
---|
1251 | } |
---|
1252 | |
---|
1253 | function updatePosition() { |
---|
1254 | scope.position = appendToBody ? $position.offset(element) : $position.position(element); |
---|
1255 | scope.position.top = scope.position.top + element.prop('offsetHeight'); |
---|
1256 | } |
---|
1257 | |
---|
1258 | var documentBindingInitialized = false, elementFocusInitialized = false; |
---|
1259 | scope.$watch('isOpen', function(value) { |
---|
1260 | if (value) { |
---|
1261 | updatePosition(); |
---|
1262 | $document.bind('click', documentClickBind); |
---|
1263 | if(elementFocusInitialized) { |
---|
1264 | element.unbind('focus', elementFocusBind); |
---|
1265 | } |
---|
1266 | element[0].focus(); |
---|
1267 | documentBindingInitialized = true; |
---|
1268 | } else { |
---|
1269 | if(documentBindingInitialized) { |
---|
1270 | $document.unbind('click', documentClickBind); |
---|
1271 | } |
---|
1272 | element.bind('focus', elementFocusBind); |
---|
1273 | elementFocusInitialized = true; |
---|
1274 | } |
---|
1275 | |
---|
1276 | if ( setIsOpen ) { |
---|
1277 | setIsOpen(originalScope, value); |
---|
1278 | } |
---|
1279 | }); |
---|
1280 | |
---|
1281 | scope.today = function() { |
---|
1282 | scope.dateSelection(new Date()); |
---|
1283 | }; |
---|
1284 | scope.clear = function() { |
---|
1285 | scope.dateSelection(null); |
---|
1286 | }; |
---|
1287 | |
---|
1288 | var $popup = $compile(popupEl)(scope); |
---|
1289 | if ( appendToBody ) { |
---|
1290 | $document.find('body').append($popup); |
---|
1291 | } else { |
---|
1292 | element.after($popup); |
---|
1293 | } |
---|
1294 | } |
---|
1295 | }; |
---|
1296 | }]) |
---|
1297 | |
---|
1298 | .directive('datepickerPopupWrap', function() { |
---|
1299 | return { |
---|
1300 | restrict:'EA', |
---|
1301 | replace: true, |
---|
1302 | transclude: true, |
---|
1303 | templateUrl: 'template/datepicker/popup.html', |
---|
1304 | link:function (scope, element, attrs) { |
---|
1305 | element.bind('click', function(event) { |
---|
1306 | event.preventDefault(); |
---|
1307 | event.stopPropagation(); |
---|
1308 | }); |
---|
1309 | } |
---|
1310 | }; |
---|
1311 | }); |
---|
1312 | |
---|
1313 | /* |
---|
1314 | * dropdownToggle - Provides dropdown menu functionality in place of bootstrap js |
---|
1315 | * @restrict class or attribute |
---|
1316 | * @example: |
---|
1317 | <li class="dropdown"> |
---|
1318 | <a class="dropdown-toggle">My Dropdown Menu</a> |
---|
1319 | <ul class="dropdown-menu"> |
---|
1320 | <li ng-repeat="choice in dropChoices"> |
---|
1321 | <a ng-href="{{choice.href}}">{{choice.text}}</a> |
---|
1322 | </li> |
---|
1323 | </ul> |
---|
1324 | </li> |
---|
1325 | */ |
---|
1326 | |
---|
1327 | angular.module('ui.bootstrap.dropdownToggle', []).directive('dropdownToggle', ['$document', '$location', function ($document, $location) { |
---|
1328 | var openElement = null, |
---|
1329 | closeMenu = angular.noop; |
---|
1330 | return { |
---|
1331 | restrict: 'CA', |
---|
1332 | link: function(scope, element, attrs) { |
---|
1333 | scope.$watch('$location.path', function() { closeMenu(); }); |
---|
1334 | element.parent().bind('click', function() { closeMenu(); }); |
---|
1335 | element.bind('click', function (event) { |
---|
1336 | |
---|
1337 | var elementWasOpen = (element === openElement); |
---|
1338 | |
---|
1339 | event.preventDefault(); |
---|
1340 | event.stopPropagation(); |
---|
1341 | |
---|
1342 | if (!!openElement) { |
---|
1343 | closeMenu(); |
---|
1344 | } |
---|
1345 | |
---|
1346 | if (!elementWasOpen && !element.hasClass('disabled') && !element.prop('disabled')) { |
---|
1347 | element.parent().addClass('open'); |
---|
1348 | openElement = element; |
---|
1349 | closeMenu = function (event) { |
---|
1350 | if (event) { |
---|
1351 | event.preventDefault(); |
---|
1352 | event.stopPropagation(); |
---|
1353 | } |
---|
1354 | $document.unbind('click', closeMenu); |
---|
1355 | element.parent().removeClass('open'); |
---|
1356 | closeMenu = angular.noop; |
---|
1357 | openElement = null; |
---|
1358 | }; |
---|
1359 | $document.bind('click', closeMenu); |
---|
1360 | } |
---|
1361 | }); |
---|
1362 | } |
---|
1363 | }; |
---|
1364 | }]); |
---|
1365 | |
---|
1366 | angular.module('ui.bootstrap.modal', []) |
---|
1367 | |
---|
1368 | /** |
---|
1369 | * A helper, internal data structure that acts as a map but also allows getting / removing |
---|
1370 | * elements in the LIFO order |
---|
1371 | */ |
---|
1372 | .factory('$$stackedMap', function () { |
---|
1373 | return { |
---|
1374 | createNew: function () { |
---|
1375 | var stack = []; |
---|
1376 | |
---|
1377 | return { |
---|
1378 | add: function (key, value) { |
---|
1379 | stack.push({ |
---|
1380 | key: key, |
---|
1381 | value: value |
---|
1382 | }); |
---|
1383 | }, |
---|
1384 | get: function (key) { |
---|
1385 | for (var i = 0; i < stack.length; i++) { |
---|
1386 | if (key == stack[i].key) { |
---|
1387 | return stack[i]; |
---|
1388 | } |
---|
1389 | } |
---|
1390 | }, |
---|
1391 | keys: function() { |
---|
1392 | var keys = []; |
---|
1393 | for (var i = 0; i < stack.length; i++) { |
---|
1394 | keys.push(stack[i].key); |
---|
1395 | } |
---|
1396 | return keys; |
---|
1397 | }, |
---|
1398 | top: function () { |
---|
1399 | return stack[stack.length - 1]; |
---|
1400 | }, |
---|
1401 | remove: function (key) { |
---|
1402 | var idx = -1; |
---|
1403 | for (var i = 0; i < stack.length; i++) { |
---|
1404 | if (key == stack[i].key) { |
---|
1405 | idx = i; |
---|
1406 | break; |
---|
1407 | } |
---|
1408 | } |
---|
1409 | return stack.splice(idx, 1)[0]; |
---|
1410 | }, |
---|
1411 | removeTop: function () { |
---|
1412 | return stack.splice(stack.length - 1, 1)[0]; |
---|
1413 | }, |
---|
1414 | length: function () { |
---|
1415 | return stack.length; |
---|
1416 | } |
---|
1417 | }; |
---|
1418 | } |
---|
1419 | }; |
---|
1420 | }) |
---|
1421 | |
---|
1422 | /** |
---|
1423 | * A helper directive for the $modal service. It creates a backdrop element. |
---|
1424 | */ |
---|
1425 | .directive('modalBackdrop', ['$modalStack', '$timeout', function ($modalStack, $timeout) { |
---|
1426 | return { |
---|
1427 | restrict: 'EA', |
---|
1428 | replace: true, |
---|
1429 | templateUrl: 'template/modal/backdrop.html', |
---|
1430 | link: function (scope) { |
---|
1431 | |
---|
1432 | scope.animate = false; |
---|
1433 | |
---|
1434 | //trigger CSS transitions |
---|
1435 | $timeout(function () { |
---|
1436 | scope.animate = true; |
---|
1437 | }); |
---|
1438 | |
---|
1439 | scope.close = function (evt) { |
---|
1440 | var modal = $modalStack.getTop(); |
---|
1441 | if (modal && modal.value.backdrop && modal.value.backdrop != 'static') { |
---|
1442 | evt.preventDefault(); |
---|
1443 | evt.stopPropagation(); |
---|
1444 | $modalStack.dismiss(modal.key, 'backdrop click'); |
---|
1445 | } |
---|
1446 | }; |
---|
1447 | } |
---|
1448 | }; |
---|
1449 | }]) |
---|
1450 | |
---|
1451 | .directive('modalWindow', ['$timeout', function ($timeout) { |
---|
1452 | return { |
---|
1453 | restrict: 'EA', |
---|
1454 | scope: { |
---|
1455 | index: '@' |
---|
1456 | }, |
---|
1457 | replace: true, |
---|
1458 | transclude: true, |
---|
1459 | templateUrl: 'template/modal/window.html', |
---|
1460 | link: function (scope, element, attrs) { |
---|
1461 | scope.windowClass = attrs.windowClass || ''; |
---|
1462 | |
---|
1463 | // focus a freshly-opened modal |
---|
1464 | element[0].focus(); |
---|
1465 | |
---|
1466 | $timeout(function () { |
---|
1467 | // trigger CSS transitions |
---|
1468 | scope.animate = true; |
---|
1469 | }); |
---|
1470 | } |
---|
1471 | }; |
---|
1472 | }]) |
---|
1473 | |
---|
1474 | .factory('$modalStack', ['$document', '$compile', '$rootScope', '$$stackedMap', |
---|
1475 | function ($document, $compile, $rootScope, $$stackedMap) { |
---|
1476 | |
---|
1477 | var OPENED_MODAL_CLASS = 'modal-open'; |
---|
1478 | |
---|
1479 | var backdropjqLiteEl, backdropDomEl; |
---|
1480 | var backdropScope = $rootScope.$new(true); |
---|
1481 | var openedWindows = $$stackedMap.createNew(); |
---|
1482 | var $modalStack = {}; |
---|
1483 | |
---|
1484 | function backdropIndex() { |
---|
1485 | var topBackdropIndex = -1; |
---|
1486 | var opened = openedWindows.keys(); |
---|
1487 | for (var i = 0; i < opened.length; i++) { |
---|
1488 | if (openedWindows.get(opened[i]).value.backdrop) { |
---|
1489 | topBackdropIndex = i; |
---|
1490 | } |
---|
1491 | } |
---|
1492 | return topBackdropIndex; |
---|
1493 | } |
---|
1494 | |
---|
1495 | $rootScope.$watch(backdropIndex, function(newBackdropIndex){ |
---|
1496 | backdropScope.index = newBackdropIndex; |
---|
1497 | }); |
---|
1498 | |
---|
1499 | function removeModalWindow(modalInstance) { |
---|
1500 | |
---|
1501 | var body = $document.find('body').eq(0); |
---|
1502 | var modalWindow = openedWindows.get(modalInstance).value; |
---|
1503 | |
---|
1504 | //clean up the stack |
---|
1505 | openedWindows.remove(modalInstance); |
---|
1506 | |
---|
1507 | //remove window DOM element |
---|
1508 | modalWindow.modalDomEl.remove(); |
---|
1509 | body.toggleClass(OPENED_MODAL_CLASS, openedWindows.length() > 0); |
---|
1510 | |
---|
1511 | //remove backdrop if no longer needed |
---|
1512 | if (backdropDomEl && backdropIndex() == -1) { |
---|
1513 | backdropDomEl.remove(); |
---|
1514 | backdropDomEl = undefined; |
---|
1515 | } |
---|
1516 | |
---|
1517 | //destroy scope |
---|
1518 | modalWindow.modalScope.$destroy(); |
---|
1519 | } |
---|
1520 | |
---|
1521 | $document.bind('keydown', function (evt) { |
---|
1522 | var modal; |
---|
1523 | |
---|
1524 | if (evt.which === 27) { |
---|
1525 | modal = openedWindows.top(); |
---|
1526 | if (modal && modal.value.keyboard) { |
---|
1527 | $rootScope.$apply(function () { |
---|
1528 | $modalStack.dismiss(modal.key); |
---|
1529 | }); |
---|
1530 | } |
---|
1531 | } |
---|
1532 | }); |
---|
1533 | |
---|
1534 | $modalStack.open = function (modalInstance, modal) { |
---|
1535 | |
---|
1536 | openedWindows.add(modalInstance, { |
---|
1537 | deferred: modal.deferred, |
---|
1538 | modalScope: modal.scope, |
---|
1539 | backdrop: modal.backdrop, |
---|
1540 | keyboard: modal.keyboard |
---|
1541 | }); |
---|
1542 | |
---|
1543 | var body = $document.find('body').eq(0); |
---|
1544 | |
---|
1545 | if (backdropIndex() >= 0 && !backdropDomEl) { |
---|
1546 | backdropjqLiteEl = angular.element('<div modal-backdrop></div>'); |
---|
1547 | backdropDomEl = $compile(backdropjqLiteEl)(backdropScope); |
---|
1548 | body.append(backdropDomEl); |
---|
1549 | } |
---|
1550 | |
---|
1551 | var angularDomEl = angular.element('<div modal-window></div>'); |
---|
1552 | angularDomEl.attr('window-class', modal.windowClass); |
---|
1553 | angularDomEl.attr('index', openedWindows.length() - 1); |
---|
1554 | angularDomEl.html(modal.content); |
---|
1555 | |
---|
1556 | var modalDomEl = $compile(angularDomEl)(modal.scope); |
---|
1557 | openedWindows.top().value.modalDomEl = modalDomEl; |
---|
1558 | body.append(modalDomEl); |
---|
1559 | body.addClass(OPENED_MODAL_CLASS); |
---|
1560 | }; |
---|
1561 | |
---|
1562 | $modalStack.close = function (modalInstance, result) { |
---|
1563 | var modal = openedWindows.get(modalInstance); |
---|
1564 | if (modal) { |
---|
1565 | modal.value.deferred.resolve(result); |
---|
1566 | removeModalWindow(modalInstance); |
---|
1567 | } |
---|
1568 | }; |
---|
1569 | |
---|
1570 | $modalStack.dismiss = function (modalInstance, reason) { |
---|
1571 | var modalWindow = openedWindows.get(modalInstance).value; |
---|
1572 | if (modalWindow) { |
---|
1573 | modalWindow.deferred.reject(reason); |
---|
1574 | removeModalWindow(modalInstance); |
---|
1575 | } |
---|
1576 | }; |
---|
1577 | |
---|
1578 | $modalStack.getTop = function () { |
---|
1579 | return openedWindows.top(); |
---|
1580 | }; |
---|
1581 | |
---|
1582 | return $modalStack; |
---|
1583 | }]) |
---|
1584 | |
---|
1585 | .provider('$modal', function () { |
---|
1586 | |
---|
1587 | var $modalProvider = { |
---|
1588 | options: { |
---|
1589 | backdrop: true, //can be also false or 'static' |
---|
1590 | keyboard: true |
---|
1591 | }, |
---|
1592 | $get: ['$injector', '$rootScope', '$q', '$http', '$templateCache', '$controller', '$modalStack', |
---|
1593 | function ($injector, $rootScope, $q, $http, $templateCache, $controller, $modalStack) { |
---|
1594 | |
---|
1595 | var $modal = {}; |
---|
1596 | |
---|
1597 | function getTemplatePromise(options) { |
---|
1598 | return options.template ? $q.when(options.template) : |
---|
1599 | $http.get(options.templateUrl, {cache: $templateCache}).then(function (result) { |
---|
1600 | return result.data; |
---|
1601 | }); |
---|
1602 | } |
---|
1603 | |
---|
1604 | function getResolvePromises(resolves) { |
---|
1605 | var promisesArr = []; |
---|
1606 | angular.forEach(resolves, function (value, key) { |
---|
1607 | if (angular.isFunction(value) || angular.isArray(value)) { |
---|
1608 | promisesArr.push($q.when($injector.invoke(value))); |
---|
1609 | } |
---|
1610 | }); |
---|
1611 | return promisesArr; |
---|
1612 | } |
---|
1613 | |
---|
1614 | $modal.open = function (modalOptions) { |
---|
1615 | |
---|
1616 | var modalResultDeferred = $q.defer(); |
---|
1617 | var modalOpenedDeferred = $q.defer(); |
---|
1618 | |
---|
1619 | //prepare an instance of a modal to be injected into controllers and returned to a caller |
---|
1620 | var modalInstance = { |
---|
1621 | result: modalResultDeferred.promise, |
---|
1622 | opened: modalOpenedDeferred.promise, |
---|
1623 | close: function (result) { |
---|
1624 | $modalStack.close(modalInstance, result); |
---|
1625 | }, |
---|
1626 | dismiss: function (reason) { |
---|
1627 | $modalStack.dismiss(modalInstance, reason); |
---|
1628 | } |
---|
1629 | }; |
---|
1630 | |
---|
1631 | //merge and clean up options |
---|
1632 | modalOptions = angular.extend({}, $modalProvider.options, modalOptions); |
---|
1633 | modalOptions.resolve = modalOptions.resolve || {}; |
---|
1634 | |
---|
1635 | //verify options |
---|
1636 | if (!modalOptions.template && !modalOptions.templateUrl) { |
---|
1637 | throw new Error('One of template or templateUrl options is required.'); |
---|
1638 | } |
---|
1639 | |
---|
1640 | var templateAndResolvePromise = |
---|
1641 | $q.all([getTemplatePromise(modalOptions)].concat(getResolvePromises(modalOptions.resolve))); |
---|
1642 | |
---|
1643 | |
---|
1644 | templateAndResolvePromise.then(function resolveSuccess(tplAndVars) { |
---|
1645 | |
---|
1646 | var modalScope = (modalOptions.scope || $rootScope).$new(); |
---|
1647 | modalScope.$close = modalInstance.close; |
---|
1648 | modalScope.$dismiss = modalInstance.dismiss; |
---|
1649 | |
---|
1650 | var ctrlInstance, ctrlLocals = {}; |
---|
1651 | var resolveIter = 1; |
---|
1652 | |
---|
1653 | //controllers |
---|
1654 | if (modalOptions.controller) { |
---|
1655 | ctrlLocals.$scope = modalScope; |
---|
1656 | ctrlLocals.$modalInstance = modalInstance; |
---|
1657 | angular.forEach(modalOptions.resolve, function (value, key) { |
---|
1658 | ctrlLocals[key] = tplAndVars[resolveIter++]; |
---|
1659 | }); |
---|
1660 | |
---|
1661 | ctrlInstance = $controller(modalOptions.controller, ctrlLocals); |
---|
1662 | } |
---|
1663 | |
---|
1664 | $modalStack.open(modalInstance, { |
---|
1665 | scope: modalScope, |
---|
1666 | deferred: modalResultDeferred, |
---|
1667 | content: tplAndVars[0], |
---|
1668 | backdrop: modalOptions.backdrop, |
---|
1669 | keyboard: modalOptions.keyboard, |
---|
1670 | windowClass: modalOptions.windowClass |
---|
1671 | }); |
---|
1672 | |
---|
1673 | }, function resolveError(reason) { |
---|
1674 | modalResultDeferred.reject(reason); |
---|
1675 | }); |
---|
1676 | |
---|
1677 | templateAndResolvePromise.then(function () { |
---|
1678 | modalOpenedDeferred.resolve(true); |
---|
1679 | }, function () { |
---|
1680 | modalOpenedDeferred.reject(false); |
---|
1681 | }); |
---|
1682 | |
---|
1683 | return modalInstance; |
---|
1684 | }; |
---|
1685 | |
---|
1686 | return $modal; |
---|
1687 | }] |
---|
1688 | }; |
---|
1689 | |
---|
1690 | return $modalProvider; |
---|
1691 | }); |
---|
1692 | |
---|
1693 | angular.module('ui.bootstrap.pagination', []) |
---|
1694 | |
---|
1695 | .controller('PaginationController', ['$scope', '$attrs', '$parse', '$interpolate', function ($scope, $attrs, $parse, $interpolate) { |
---|
1696 | var self = this, |
---|
1697 | setNumPages = $attrs.numPages ? $parse($attrs.numPages).assign : angular.noop; |
---|
1698 | |
---|
1699 | this.init = function(defaultItemsPerPage) { |
---|
1700 | if ($attrs.itemsPerPage) { |
---|
1701 | $scope.$parent.$watch($parse($attrs.itemsPerPage), function(value) { |
---|
1702 | self.itemsPerPage = parseInt(value, 10); |
---|
1703 | $scope.totalPages = self.calculateTotalPages(); |
---|
1704 | }); |
---|
1705 | } else { |
---|
1706 | this.itemsPerPage = defaultItemsPerPage; |
---|
1707 | } |
---|
1708 | }; |
---|
1709 | |
---|
1710 | this.noPrevious = function() { |
---|
1711 | return this.page === 1; |
---|
1712 | }; |
---|
1713 | this.noNext = function() { |
---|
1714 | return this.page === $scope.totalPages; |
---|
1715 | }; |
---|
1716 | |
---|
1717 | this.isActive = function(page) { |
---|
1718 | return this.page === page; |
---|
1719 | }; |
---|
1720 | |
---|
1721 | this.calculateTotalPages = function() { |
---|
1722 | var totalPages = this.itemsPerPage < 1 ? 1 : Math.ceil($scope.totalItems / this.itemsPerPage); |
---|
1723 | return Math.max(totalPages || 0, 1); |
---|
1724 | }; |
---|
1725 | |
---|
1726 | this.getAttributeValue = function(attribute, defaultValue, interpolate) { |
---|
1727 | return angular.isDefined(attribute) ? (interpolate ? $interpolate(attribute)($scope.$parent) : $scope.$parent.$eval(attribute)) : defaultValue; |
---|
1728 | }; |
---|
1729 | |
---|
1730 | this.render = function() { |
---|
1731 | this.page = parseInt($scope.page, 10) || 1; |
---|
1732 | if (this.page > 0 && this.page <= $scope.totalPages) { |
---|
1733 | $scope.pages = this.getPages(this.page, $scope.totalPages); |
---|
1734 | } |
---|
1735 | }; |
---|
1736 | |
---|
1737 | $scope.selectPage = function(page) { |
---|
1738 | if ( ! self.isActive(page) && page > 0 && page <= $scope.totalPages) { |
---|
1739 | $scope.page = page; |
---|
1740 | $scope.onSelectPage({ page: page }); |
---|
1741 | } |
---|
1742 | }; |
---|
1743 | |
---|
1744 | $scope.$watch('page', function() { |
---|
1745 | self.render(); |
---|
1746 | }); |
---|
1747 | |
---|
1748 | $scope.$watch('totalItems', function() { |
---|
1749 | $scope.totalPages = self.calculateTotalPages(); |
---|
1750 | }); |
---|
1751 | |
---|
1752 | $scope.$watch('totalPages', function(value) { |
---|
1753 | setNumPages($scope.$parent, value); // Readonly variable |
---|
1754 | |
---|
1755 | if ( self.page > value ) { |
---|
1756 | $scope.selectPage(value); |
---|
1757 | } else { |
---|
1758 | self.render(); |
---|
1759 | } |
---|
1760 | }); |
---|
1761 | }]) |
---|
1762 | |
---|
1763 | .constant('paginationConfig', { |
---|
1764 | itemsPerPage: 10, |
---|
1765 | boundaryLinks: false, |
---|
1766 | directionLinks: true, |
---|
1767 | firstText: 'First', |
---|
1768 | previousText: 'Previous', |
---|
1769 | nextText: 'Next', |
---|
1770 | lastText: 'Last', |
---|
1771 | rotate: true |
---|
1772 | }) |
---|
1773 | |
---|
1774 | .directive('pagination', ['$parse', 'paginationConfig', function($parse, config) { |
---|
1775 | return { |
---|
1776 | restrict: 'EA', |
---|
1777 | scope: { |
---|
1778 | page: '=', |
---|
1779 | totalItems: '=', |
---|
1780 | onSelectPage:' &' |
---|
1781 | }, |
---|
1782 | controller: 'PaginationController', |
---|
1783 | templateUrl: 'template/pagination/pagination.html', |
---|
1784 | replace: true, |
---|
1785 | link: function(scope, element, attrs, paginationCtrl) { |
---|
1786 | |
---|
1787 | // Setup configuration parameters |
---|
1788 | var maxSize, |
---|
1789 | boundaryLinks = paginationCtrl.getAttributeValue(attrs.boundaryLinks, config.boundaryLinks ), |
---|
1790 | directionLinks = paginationCtrl.getAttributeValue(attrs.directionLinks, config.directionLinks ), |
---|
1791 | firstText = paginationCtrl.getAttributeValue(attrs.firstText, config.firstText, true), |
---|
1792 | previousText = paginationCtrl.getAttributeValue(attrs.previousText, config.previousText, true), |
---|
1793 | nextText = paginationCtrl.getAttributeValue(attrs.nextText, config.nextText, true), |
---|
1794 | lastText = paginationCtrl.getAttributeValue(attrs.lastText, config.lastText, true), |
---|
1795 | rotate = paginationCtrl.getAttributeValue(attrs.rotate, config.rotate); |
---|
1796 | |
---|
1797 | paginationCtrl.init(config.itemsPerPage); |
---|
1798 | |
---|
1799 | if (attrs.maxSize) { |
---|
1800 | scope.$parent.$watch($parse(attrs.maxSize), function(value) { |
---|
1801 | maxSize = parseInt(value, 10); |
---|
1802 | paginationCtrl.render(); |
---|
1803 | }); |
---|
1804 | } |
---|
1805 | |
---|
1806 | // Create page object used in template |
---|
1807 | function makePage(number, text, isActive, isDisabled) { |
---|
1808 | return { |
---|
1809 | number: number, |
---|
1810 | text: text, |
---|
1811 | active: isActive, |
---|
1812 | disabled: isDisabled |
---|
1813 | }; |
---|
1814 | } |
---|
1815 | |
---|
1816 | paginationCtrl.getPages = function(currentPage, totalPages) { |
---|
1817 | var pages = []; |
---|
1818 | |
---|
1819 | // Default page limits |
---|
1820 | var startPage = 1, endPage = totalPages; |
---|
1821 | var isMaxSized = ( angular.isDefined(maxSize) && maxSize < totalPages ); |
---|
1822 | |
---|
1823 | // recompute if maxSize |
---|
1824 | if ( isMaxSized ) { |
---|
1825 | if ( rotate ) { |
---|
1826 | // Current page is displayed in the middle of the visible ones |
---|
1827 | startPage = Math.max(currentPage - Math.floor(maxSize/2), 1); |
---|
1828 | endPage = startPage + maxSize - 1; |
---|
1829 | |
---|
1830 | // Adjust if limit is exceeded |
---|
1831 | if (endPage > totalPages) { |
---|
1832 | endPage = totalPages; |
---|
1833 | startPage = endPage - maxSize + 1; |
---|
1834 | } |
---|
1835 | } else { |
---|
1836 | // Visible pages are paginated with maxSize |
---|
1837 | startPage = ((Math.ceil(currentPage / maxSize) - 1) * maxSize) + 1; |
---|
1838 | |
---|
1839 | // Adjust last page if limit is exceeded |
---|
1840 | endPage = Math.min(startPage + maxSize - 1, totalPages); |
---|
1841 | } |
---|
1842 | } |
---|
1843 | |
---|
1844 | // Add page number links |
---|
1845 | for (var number = startPage; number <= endPage; number++) { |
---|
1846 | var page = makePage(number, number, paginationCtrl.isActive(number), false); |
---|
1847 | pages.push(page); |
---|
1848 | } |
---|
1849 | |
---|
1850 | // Add links to move between page sets |
---|
1851 | if ( isMaxSized && ! rotate ) { |
---|
1852 | if ( startPage > 1 ) { |
---|
1853 | var previousPageSet = makePage(startPage - 1, '...', false, false); |
---|
1854 | pages.unshift(previousPageSet); |
---|
1855 | } |
---|
1856 | |
---|
1857 | if ( endPage < totalPages ) { |
---|
1858 | var nextPageSet = makePage(endPage + 1, '...', false, false); |
---|
1859 | pages.push(nextPageSet); |
---|
1860 | } |
---|
1861 | } |
---|
1862 | |
---|
1863 | // Add previous & next links |
---|
1864 | if (directionLinks) { |
---|
1865 | var previousPage = makePage(currentPage - 1, previousText, false, paginationCtrl.noPrevious()); |
---|
1866 | pages.unshift(previousPage); |
---|
1867 | |
---|
1868 | var nextPage = makePage(currentPage + 1, nextText, false, paginationCtrl.noNext()); |
---|
1869 | pages.push(nextPage); |
---|
1870 | } |
---|
1871 | |
---|
1872 | // Add first & last links |
---|
1873 | if (boundaryLinks) { |
---|
1874 | var firstPage = makePage(1, firstText, false, paginationCtrl.noPrevious()); |
---|
1875 | pages.unshift(firstPage); |
---|
1876 | |
---|
1877 | var lastPage = makePage(totalPages, lastText, false, paginationCtrl.noNext()); |
---|
1878 | pages.push(lastPage); |
---|
1879 | } |
---|
1880 | |
---|
1881 | return pages; |
---|
1882 | }; |
---|
1883 | } |
---|
1884 | }; |
---|
1885 | }]) |
---|
1886 | |
---|
1887 | .constant('pagerConfig', { |
---|
1888 | itemsPerPage: 10, |
---|
1889 | previousText: '« Previous', |
---|
1890 | nextText: 'Next »', |
---|
1891 | align: true |
---|
1892 | }) |
---|
1893 | |
---|
1894 | .directive('pager', ['pagerConfig', function(config) { |
---|
1895 | return { |
---|
1896 | restrict: 'EA', |
---|
1897 | scope: { |
---|
1898 | page: '=', |
---|
1899 | totalItems: '=', |
---|
1900 | onSelectPage:' &' |
---|
1901 | }, |
---|
1902 | controller: 'PaginationController', |
---|
1903 | templateUrl: 'template/pagination/pager.html', |
---|
1904 | replace: true, |
---|
1905 | link: function(scope, element, attrs, paginationCtrl) { |
---|
1906 | |
---|
1907 | // Setup configuration parameters |
---|
1908 | var previousText = paginationCtrl.getAttributeValue(attrs.previousText, config.previousText, true), |
---|
1909 | nextText = paginationCtrl.getAttributeValue(attrs.nextText, config.nextText, true), |
---|
1910 | align = paginationCtrl.getAttributeValue(attrs.align, config.align); |
---|
1911 | |
---|
1912 | paginationCtrl.init(config.itemsPerPage); |
---|
1913 | |
---|
1914 | // Create page object used in template |
---|
1915 | function makePage(number, text, isDisabled, isPrevious, isNext) { |
---|
1916 | return { |
---|
1917 | number: number, |
---|
1918 | text: text, |
---|
1919 | disabled: isDisabled, |
---|
1920 | previous: ( align && isPrevious ), |
---|
1921 | next: ( align && isNext ) |
---|
1922 | }; |
---|
1923 | } |
---|
1924 | |
---|
1925 | paginationCtrl.getPages = function(currentPage) { |
---|
1926 | return [ |
---|
1927 | makePage(currentPage - 1, previousText, paginationCtrl.noPrevious(), true, false), |
---|
1928 | makePage(currentPage + 1, nextText, paginationCtrl.noNext(), false, true) |
---|
1929 | ]; |
---|
1930 | }; |
---|
1931 | } |
---|
1932 | }; |
---|
1933 | }]); |
---|
1934 | |
---|
1935 | /** |
---|
1936 | * The following features are still outstanding: animation as a |
---|
1937 | * function, placement as a function, inside, support for more triggers than |
---|
1938 | * just mouse enter/leave, html tooltips, and selector delegation. |
---|
1939 | */ |
---|
1940 | angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap.bindHtml' ] ) |
---|
1941 | |
---|
1942 | /** |
---|
1943 | * The $tooltip service creates tooltip- and popover-like directives as well as |
---|
1944 | * houses global options for them. |
---|
1945 | */ |
---|
1946 | .provider( '$tooltip', function () { |
---|
1947 | // The default options tooltip and popover. |
---|
1948 | var defaultOptions = { |
---|
1949 | placement: 'top', |
---|
1950 | animation: true, |
---|
1951 | popupDelay: 0 |
---|
1952 | }; |
---|
1953 | |
---|
1954 | // Default hide triggers for each show trigger |
---|
1955 | var triggerMap = { |
---|
1956 | 'mouseenter': 'mouseleave', |
---|
1957 | 'click': 'click', |
---|
1958 | 'focus': 'blur' |
---|
1959 | }; |
---|
1960 | |
---|
1961 | // The options specified to the provider globally. |
---|
1962 | var globalOptions = {}; |
---|
1963 | |
---|
1964 | /** |
---|
1965 | * `options({})` allows global configuration of all tooltips in the |
---|
1966 | * application. |
---|
1967 | * |
---|
1968 | * var app = angular.module( 'App', ['ui.bootstrap.tooltip'], function( $tooltipProvider ) { |
---|
1969 | * // place tooltips left instead of top by default |
---|
1970 | * $tooltipProvider.options( { placement: 'left' } ); |
---|
1971 | * }); |
---|
1972 | */ |
---|
1973 | this.options = function( value ) { |
---|
1974 | angular.extend( globalOptions, value ); |
---|
1975 | }; |
---|
1976 | |
---|
1977 | /** |
---|
1978 | * This allows you to extend the set of trigger mappings available. E.g.: |
---|
1979 | * |
---|
1980 | * $tooltipProvider.setTriggers( 'openTrigger': 'closeTrigger' ); |
---|
1981 | */ |
---|
1982 | this.setTriggers = function setTriggers ( triggers ) { |
---|
1983 | angular.extend( triggerMap, triggers ); |
---|
1984 | }; |
---|
1985 | |
---|
1986 | /** |
---|
1987 | * This is a helper function for translating camel-case to snake-case. |
---|
1988 | */ |
---|
1989 | function snake_case(name){ |
---|
1990 | var regexp = /[A-Z]/g; |
---|
1991 | var separator = '-'; |
---|
1992 | return name.replace(regexp, function(letter, pos) { |
---|
1993 | return (pos ? separator : '') + letter.toLowerCase(); |
---|
1994 | }); |
---|
1995 | } |
---|
1996 | |
---|
1997 | /** |
---|
1998 | * Returns the actual instance of the $tooltip service. |
---|
1999 | * TODO support multiple triggers |
---|
2000 | */ |
---|
2001 | this.$get = [ '$window', '$compile', '$timeout', '$parse', '$document', '$position', '$interpolate', function ( $window, $compile, $timeout, $parse, $document, $position, $interpolate ) { |
---|
2002 | return function $tooltip ( type, prefix, defaultTriggerShow ) { |
---|
2003 | var options = angular.extend( {}, defaultOptions, globalOptions ); |
---|
2004 | |
---|
2005 | /** |
---|
2006 | * Returns an object of show and hide triggers. |
---|
2007 | * |
---|
2008 | * If a trigger is supplied, |
---|
2009 | * it is used to show the tooltip; otherwise, it will use the `trigger` |
---|
2010 | * option passed to the `$tooltipProvider.options` method; else it will |
---|
2011 | * default to the trigger supplied to this directive factory. |
---|
2012 | * |
---|
2013 | * The hide trigger is based on the show trigger. If the `trigger` option |
---|
2014 | * was passed to the `$tooltipProvider.options` method, it will use the |
---|
2015 | * mapped trigger from `triggerMap` or the passed trigger if the map is |
---|
2016 | * undefined; otherwise, it uses the `triggerMap` value of the show |
---|
2017 | * trigger; else it will just use the show trigger. |
---|
2018 | */ |
---|
2019 | function getTriggers ( trigger ) { |
---|
2020 | var show = trigger || options.trigger || defaultTriggerShow; |
---|
2021 | var hide = triggerMap[show] || show; |
---|
2022 | return { |
---|
2023 | show: show, |
---|
2024 | hide: hide |
---|
2025 | }; |
---|
2026 | } |
---|
2027 | |
---|
2028 | var directiveName = snake_case( type ); |
---|
2029 | |
---|
2030 | var startSym = $interpolate.startSymbol(); |
---|
2031 | var endSym = $interpolate.endSymbol(); |
---|
2032 | var template = |
---|
2033 | '<div '+ directiveName +'-popup '+ |
---|
2034 | 'title="'+startSym+'tt_title'+endSym+'" '+ |
---|
2035 | 'content="'+startSym+'tt_content'+endSym+'" '+ |
---|
2036 | 'placement="'+startSym+'tt_placement'+endSym+'" '+ |
---|
2037 | 'animation="tt_animation" '+ |
---|
2038 | 'is-open="tt_isOpen"'+ |
---|
2039 | '>'+ |
---|
2040 | '</div>'; |
---|
2041 | |
---|
2042 | return { |
---|
2043 | restrict: 'EA', |
---|
2044 | scope: true, |
---|
2045 | link: function link ( scope, element, attrs ) { |
---|
2046 | var tooltip = $compile( template )( scope ); |
---|
2047 | var transitionTimeout; |
---|
2048 | var popupTimeout; |
---|
2049 | var appendToBody = angular.isDefined( options.appendToBody ) ? options.appendToBody : false; |
---|
2050 | var triggers = getTriggers( undefined ); |
---|
2051 | var hasRegisteredTriggers = false; |
---|
2052 | var hasEnableExp = angular.isDefined(attrs[prefix+'Enable']); |
---|
2053 | |
---|
2054 | // By default, the tooltip is not open. |
---|
2055 | // TODO add ability to start tooltip opened |
---|
2056 | scope.tt_isOpen = false; |
---|
2057 | |
---|
2058 | function toggleTooltipBind () { |
---|
2059 | if ( ! scope.tt_isOpen ) { |
---|
2060 | showTooltipBind(); |
---|
2061 | } else { |
---|
2062 | hideTooltipBind(); |
---|
2063 | } |
---|
2064 | } |
---|
2065 | |
---|
2066 | // Show the tooltip with delay if specified, otherwise show it immediately |
---|
2067 | function showTooltipBind() { |
---|
2068 | if(hasEnableExp && !scope.$eval(attrs[prefix+'Enable'])) { |
---|
2069 | return; |
---|
2070 | } |
---|
2071 | if ( scope.tt_popupDelay ) { |
---|
2072 | popupTimeout = $timeout( show, scope.tt_popupDelay ); |
---|
2073 | } else { |
---|
2074 | scope.$apply( show ); |
---|
2075 | } |
---|
2076 | } |
---|
2077 | |
---|
2078 | function hideTooltipBind () { |
---|
2079 | scope.$apply(function () { |
---|
2080 | hide(); |
---|
2081 | }); |
---|
2082 | } |
---|
2083 | |
---|
2084 | // Show the tooltip popup element. |
---|
2085 | function show() { |
---|
2086 | var position, |
---|
2087 | ttWidth, |
---|
2088 | ttHeight, |
---|
2089 | ttPosition; |
---|
2090 | |
---|
2091 | // Don't show empty tooltips. |
---|
2092 | if ( ! scope.tt_content ) { |
---|
2093 | return; |
---|
2094 | } |
---|
2095 | |
---|
2096 | // If there is a pending remove transition, we must cancel it, lest the |
---|
2097 | // tooltip be mysteriously removed. |
---|
2098 | if ( transitionTimeout ) { |
---|
2099 | $timeout.cancel( transitionTimeout ); |
---|
2100 | } |
---|
2101 | |
---|
2102 | // Set the initial positioning. |
---|
2103 | tooltip.css({ top: 0, left: 0, display: 'block' }); |
---|
2104 | |
---|
2105 | // Now we add it to the DOM because need some info about it. But it's not |
---|
2106 | // visible yet anyway. |
---|
2107 | if ( appendToBody ) { |
---|
2108 | $document.find( 'body' ).append( tooltip ); |
---|
2109 | } else { |
---|
2110 | element.after( tooltip ); |
---|
2111 | } |
---|
2112 | |
---|
2113 | // Get the position of the directive element. |
---|
2114 | position = appendToBody ? $position.offset( element ) : $position.position( element ); |
---|
2115 | |
---|
2116 | // Get the height and width of the tooltip so we can center it. |
---|
2117 | ttWidth = tooltip.prop( 'offsetWidth' ); |
---|
2118 | ttHeight = tooltip.prop( 'offsetHeight' ); |
---|
2119 | |
---|
2120 | // Calculate the tooltip's top and left coordinates to center it with |
---|
2121 | // this directive. |
---|
2122 | switch ( scope.tt_placement ) { |
---|
2123 | case 'right': |
---|
2124 | ttPosition = { |
---|
2125 | top: position.top + position.height / 2 - ttHeight / 2, |
---|
2126 | left: position.left + position.width |
---|
2127 | }; |
---|
2128 | break; |
---|
2129 | case 'bottom': |
---|
2130 | ttPosition = { |
---|
2131 | top: position.top + position.height, |
---|
2132 | left: position.left + position.width / 2 - ttWidth / 2 |
---|
2133 | }; |
---|
2134 | break; |
---|
2135 | case 'left': |
---|
2136 | ttPosition = { |
---|
2137 | top: position.top + position.height / 2 - ttHeight / 2, |
---|
2138 | left: position.left - ttWidth |
---|
2139 | }; |
---|
2140 | break; |
---|
2141 | default: |
---|
2142 | ttPosition = { |
---|
2143 | top: position.top - ttHeight, |
---|
2144 | left: position.left + position.width / 2 - ttWidth / 2 |
---|
2145 | }; |
---|
2146 | break; |
---|
2147 | } |
---|
2148 | |
---|
2149 | ttPosition.top += 'px'; |
---|
2150 | ttPosition.left += 'px'; |
---|
2151 | |
---|
2152 | // Now set the calculated positioning. |
---|
2153 | tooltip.css( ttPosition ); |
---|
2154 | |
---|
2155 | // And show the tooltip. |
---|
2156 | scope.tt_isOpen = true; |
---|
2157 | } |
---|
2158 | |
---|
2159 | // Hide the tooltip popup element. |
---|
2160 | function hide() { |
---|
2161 | // First things first: we don't show it anymore. |
---|
2162 | scope.tt_isOpen = false; |
---|
2163 | |
---|
2164 | //if tooltip is going to be shown after delay, we must cancel this |
---|
2165 | $timeout.cancel( popupTimeout ); |
---|
2166 | |
---|
2167 | // And now we remove it from the DOM. However, if we have animation, we |
---|
2168 | // need to wait for it to expire beforehand. |
---|
2169 | // FIXME: this is a placeholder for a port of the transitions library. |
---|
2170 | if ( scope.tt_animation ) { |
---|
2171 | transitionTimeout = $timeout(function () { |
---|
2172 | tooltip.remove(); |
---|
2173 | }, 500); |
---|
2174 | } else { |
---|
2175 | tooltip.remove(); |
---|
2176 | } |
---|
2177 | } |
---|
2178 | |
---|
2179 | /** |
---|
2180 | * Observe the relevant attributes. |
---|
2181 | */ |
---|
2182 | attrs.$observe( type, function ( val ) { |
---|
2183 | scope.tt_content = val; |
---|
2184 | |
---|
2185 | if (!val && scope.tt_isOpen ) { |
---|
2186 | hide(); |
---|
2187 | } |
---|
2188 | }); |
---|
2189 | |
---|
2190 | attrs.$observe( prefix+'Title', function ( val ) { |
---|
2191 | scope.tt_title = val; |
---|
2192 | }); |
---|
2193 | |
---|
2194 | attrs.$observe( prefix+'Placement', function ( val ) { |
---|
2195 | scope.tt_placement = angular.isDefined( val ) ? val : options.placement; |
---|
2196 | }); |
---|
2197 | |
---|
2198 | attrs.$observe( prefix+'PopupDelay', function ( val ) { |
---|
2199 | var delay = parseInt( val, 10 ); |
---|
2200 | scope.tt_popupDelay = ! isNaN(delay) ? delay : options.popupDelay; |
---|
2201 | }); |
---|
2202 | |
---|
2203 | var unregisterTriggers = function() { |
---|
2204 | if (hasRegisteredTriggers) { |
---|
2205 | element.unbind( triggers.show, showTooltipBind ); |
---|
2206 | element.unbind( triggers.hide, hideTooltipBind ); |
---|
2207 | } |
---|
2208 | }; |
---|
2209 | |
---|
2210 | attrs.$observe( prefix+'Trigger', function ( val ) { |
---|
2211 | unregisterTriggers(); |
---|
2212 | |
---|
2213 | triggers = getTriggers( val ); |
---|
2214 | |
---|
2215 | if ( triggers.show === triggers.hide ) { |
---|
2216 | element.bind( triggers.show, toggleTooltipBind ); |
---|
2217 | } else { |
---|
2218 | element.bind( triggers.show, showTooltipBind ); |
---|
2219 | element.bind( triggers.hide, hideTooltipBind ); |
---|
2220 | } |
---|
2221 | |
---|
2222 | hasRegisteredTriggers = true; |
---|
2223 | }); |
---|
2224 | |
---|
2225 | var animation = scope.$eval(attrs[prefix + 'Animation']); |
---|
2226 | scope.tt_animation = angular.isDefined(animation) ? !!animation : options.animation; |
---|
2227 | |
---|
2228 | attrs.$observe( prefix+'AppendToBody', function ( val ) { |
---|
2229 | appendToBody = angular.isDefined( val ) ? $parse( val )( scope ) : appendToBody; |
---|
2230 | }); |
---|
2231 | |
---|
2232 | // if a tooltip is attached to <body> we need to remove it on |
---|
2233 | // location change as its parent scope will probably not be destroyed |
---|
2234 | // by the change. |
---|
2235 | if ( appendToBody ) { |
---|
2236 | scope.$on('$locationChangeSuccess', function closeTooltipOnLocationChangeSuccess () { |
---|
2237 | if ( scope.tt_isOpen ) { |
---|
2238 | hide(); |
---|
2239 | } |
---|
2240 | }); |
---|
2241 | } |
---|
2242 | |
---|
2243 | // Make sure tooltip is destroyed and removed. |
---|
2244 | scope.$on('$destroy', function onDestroyTooltip() { |
---|
2245 | $timeout.cancel( transitionTimeout ); |
---|
2246 | $timeout.cancel( popupTimeout ); |
---|
2247 | unregisterTriggers(); |
---|
2248 | tooltip.remove(); |
---|
2249 | tooltip.unbind(); |
---|
2250 | tooltip = null; |
---|
2251 | }); |
---|
2252 | } |
---|
2253 | }; |
---|
2254 | }; |
---|
2255 | }]; |
---|
2256 | }) |
---|
2257 | |
---|
2258 | .directive( 'tooltipPopup', function () { |
---|
2259 | return { |
---|
2260 | restrict: 'EA', |
---|
2261 | replace: true, |
---|
2262 | scope: { content: '@', placement: '@', animation: '&', isOpen: '&' }, |
---|
2263 | templateUrl: 'template/tooltip/tooltip-popup.html' |
---|
2264 | }; |
---|
2265 | }) |
---|
2266 | |
---|
2267 | .directive( 'tooltip', [ '$tooltip', function ( $tooltip ) { |
---|
2268 | return $tooltip( 'tooltip', 'tooltip', 'mouseenter' ); |
---|
2269 | }]) |
---|
2270 | |
---|
2271 | .directive( 'tooltipHtmlUnsafePopup', function () { |
---|
2272 | return { |
---|
2273 | restrict: 'EA', |
---|
2274 | replace: true, |
---|
2275 | scope: { content: '@', placement: '@', animation: '&', isOpen: '&' }, |
---|
2276 | templateUrl: 'template/tooltip/tooltip-html-unsafe-popup.html' |
---|
2277 | }; |
---|
2278 | }) |
---|
2279 | |
---|
2280 | .directive( 'tooltipHtmlUnsafe', [ '$tooltip', function ( $tooltip ) { |
---|
2281 | return $tooltip( 'tooltipHtmlUnsafe', 'tooltip', 'mouseenter' ); |
---|
2282 | }]); |
---|
2283 | |
---|
2284 | /** |
---|
2285 | * The following features are still outstanding: popup delay, animation as a |
---|
2286 | * function, placement as a function, inside, support for more triggers than |
---|
2287 | * just mouse enter/leave, html popovers, and selector delegatation. |
---|
2288 | */ |
---|
2289 | angular.module( 'ui.bootstrap.popover', [ 'ui.bootstrap.tooltip' ] ) |
---|
2290 | .directive( 'popoverPopup', function () { |
---|
2291 | return { |
---|
2292 | restrict: 'EA', |
---|
2293 | replace: true, |
---|
2294 | scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&' }, |
---|
2295 | templateUrl: 'template/popover/popover.html' |
---|
2296 | }; |
---|
2297 | }) |
---|
2298 | .directive( 'popover', [ '$compile', '$timeout', '$parse', '$window', '$tooltip', function ( $compile, $timeout, $parse, $window, $tooltip ) { |
---|
2299 | return $tooltip( 'popover', 'popover', 'click' ); |
---|
2300 | }]); |
---|
2301 | |
---|
2302 | |
---|
2303 | angular.module('ui.bootstrap.progressbar', ['ui.bootstrap.transition']) |
---|
2304 | |
---|
2305 | .constant('progressConfig', { |
---|
2306 | animate: true, |
---|
2307 | max: 100 |
---|
2308 | }) |
---|
2309 | |
---|
2310 | .controller('ProgressController', ['$scope', '$attrs', 'progressConfig', '$transition', function($scope, $attrs, progressConfig, $transition) { |
---|
2311 | var self = this, |
---|
2312 | bars = [], |
---|
2313 | max = angular.isDefined($attrs.max) ? $scope.$parent.$eval($attrs.max) : progressConfig.max, |
---|
2314 | animate = angular.isDefined($attrs.animate) ? $scope.$parent.$eval($attrs.animate) : progressConfig.animate; |
---|
2315 | |
---|
2316 | this.addBar = function(bar, element) { |
---|
2317 | var oldValue = 0, index = bar.$parent.$index; |
---|
2318 | if ( angular.isDefined(index) && bars[index] ) { |
---|
2319 | oldValue = bars[index].value; |
---|
2320 | } |
---|
2321 | bars.push(bar); |
---|
2322 | |
---|
2323 | this.update(element, bar.value, oldValue); |
---|
2324 | |
---|
2325 | bar.$watch('value', function(value, oldValue) { |
---|
2326 | if (value !== oldValue) { |
---|
2327 | self.update(element, value, oldValue); |
---|
2328 | } |
---|
2329 | }); |
---|
2330 | |
---|
2331 | bar.$on('$destroy', function() { |
---|
2332 | self.removeBar(bar); |
---|
2333 | }); |
---|
2334 | }; |
---|
2335 | |
---|
2336 | // Update bar element width |
---|
2337 | this.update = function(element, newValue, oldValue) { |
---|
2338 | var percent = this.getPercentage(newValue); |
---|
2339 | |
---|
2340 | if (animate) { |
---|
2341 | element.css('width', this.getPercentage(oldValue) + '%'); |
---|
2342 | $transition(element, {width: percent + '%'}); |
---|
2343 | } else { |
---|
2344 | element.css({'transition': 'none', 'width': percent + '%'}); |
---|
2345 | } |
---|
2346 | }; |
---|
2347 | |
---|
2348 | this.removeBar = function(bar) { |
---|
2349 | bars.splice(bars.indexOf(bar), 1); |
---|
2350 | }; |
---|
2351 | |
---|
2352 | this.getPercentage = function(value) { |
---|
2353 | return Math.round(100 * value / max); |
---|
2354 | }; |
---|
2355 | }]) |
---|
2356 | |
---|
2357 | .directive('progress', function() { |
---|
2358 | return { |
---|
2359 | restrict: 'EA', |
---|
2360 | replace: true, |
---|
2361 | transclude: true, |
---|
2362 | controller: 'ProgressController', |
---|
2363 | require: 'progress', |
---|
2364 | scope: {}, |
---|
2365 | template: '<div class="progress" ng-transclude></div>' |
---|
2366 | //templateUrl: 'template/progressbar/progress.html' // Works in AngularJS 1.2 |
---|
2367 | }; |
---|
2368 | }) |
---|
2369 | |
---|
2370 | .directive('bar', function() { |
---|
2371 | return { |
---|
2372 | restrict: 'EA', |
---|
2373 | replace: true, |
---|
2374 | transclude: true, |
---|
2375 | require: '^progress', |
---|
2376 | scope: { |
---|
2377 | value: '=', |
---|
2378 | type: '@' |
---|
2379 | }, |
---|
2380 | templateUrl: 'template/progressbar/bar.html', |
---|
2381 | link: function(scope, element, attrs, progressCtrl) { |
---|
2382 | progressCtrl.addBar(scope, element); |
---|
2383 | } |
---|
2384 | }; |
---|
2385 | }) |
---|
2386 | |
---|
2387 | .directive('progressbar', function() { |
---|
2388 | return { |
---|
2389 | restrict: 'EA', |
---|
2390 | replace: true, |
---|
2391 | transclude: true, |
---|
2392 | controller: 'ProgressController', |
---|
2393 | scope: { |
---|
2394 | value: '=', |
---|
2395 | type: '@' |
---|
2396 | }, |
---|
2397 | templateUrl: 'template/progressbar/progressbar.html', |
---|
2398 | link: function(scope, element, attrs, progressCtrl) { |
---|
2399 | progressCtrl.addBar(scope, angular.element(element.children()[0])); |
---|
2400 | } |
---|
2401 | }; |
---|
2402 | }); |
---|
2403 | angular.module('ui.bootstrap.rating', []) |
---|
2404 | |
---|
2405 | .constant('ratingConfig', { |
---|
2406 | max: 5, |
---|
2407 | stateOn: null, |
---|
2408 | stateOff: null |
---|
2409 | }) |
---|
2410 | |
---|
2411 | .controller('RatingController', ['$scope', '$attrs', '$parse', 'ratingConfig', function($scope, $attrs, $parse, ratingConfig) { |
---|
2412 | |
---|
2413 | this.maxRange = angular.isDefined($attrs.max) ? $scope.$parent.$eval($attrs.max) : ratingConfig.max; |
---|
2414 | this.stateOn = angular.isDefined($attrs.stateOn) ? $scope.$parent.$eval($attrs.stateOn) : ratingConfig.stateOn; |
---|
2415 | this.stateOff = angular.isDefined($attrs.stateOff) ? $scope.$parent.$eval($attrs.stateOff) : ratingConfig.stateOff; |
---|
2416 | |
---|
2417 | this.createRateObjects = function(states) { |
---|
2418 | var defaultOptions = { |
---|
2419 | stateOn: this.stateOn, |
---|
2420 | stateOff: this.stateOff |
---|
2421 | }; |
---|
2422 | |
---|
2423 | for (var i = 0, n = states.length; i < n; i++) { |
---|
2424 | states[i] = angular.extend({ index: i }, defaultOptions, states[i]); |
---|
2425 | } |
---|
2426 | return states; |
---|
2427 | }; |
---|
2428 | |
---|
2429 | // Get objects used in template |
---|
2430 | $scope.range = angular.isDefined($attrs.ratingStates) ? this.createRateObjects(angular.copy($scope.$parent.$eval($attrs.ratingStates))): this.createRateObjects(new Array(this.maxRange)); |
---|
2431 | |
---|
2432 | $scope.rate = function(value) { |
---|
2433 | if ( $scope.readonly || $scope.value === value) { |
---|
2434 | return; |
---|
2435 | } |
---|
2436 | |
---|
2437 | $scope.value = value; |
---|
2438 | }; |
---|
2439 | |
---|
2440 | $scope.enter = function(value) { |
---|
2441 | if ( ! $scope.readonly ) { |
---|
2442 | $scope.val = value; |
---|
2443 | } |
---|
2444 | $scope.onHover({value: value}); |
---|
2445 | }; |
---|
2446 | |
---|
2447 | $scope.reset = function() { |
---|
2448 | $scope.val = angular.copy($scope.value); |
---|
2449 | $scope.onLeave(); |
---|
2450 | }; |
---|
2451 | |
---|
2452 | $scope.$watch('value', function(value) { |
---|
2453 | $scope.val = value; |
---|
2454 | }); |
---|
2455 | |
---|
2456 | $scope.readonly = false; |
---|
2457 | if ($attrs.readonly) { |
---|
2458 | $scope.$parent.$watch($parse($attrs.readonly), function(value) { |
---|
2459 | $scope.readonly = !!value; |
---|
2460 | }); |
---|
2461 | } |
---|
2462 | }]) |
---|
2463 | |
---|
2464 | .directive('rating', function() { |
---|
2465 | return { |
---|
2466 | restrict: 'EA', |
---|
2467 | scope: { |
---|
2468 | value: '=', |
---|
2469 | onHover: '&', |
---|
2470 | onLeave: '&' |
---|
2471 | }, |
---|
2472 | controller: 'RatingController', |
---|
2473 | templateUrl: 'template/rating/rating.html', |
---|
2474 | replace: true |
---|
2475 | }; |
---|
2476 | }); |
---|
2477 | |
---|
2478 | /** |
---|
2479 | * @ngdoc overview |
---|
2480 | * @name ui.bootstrap.tabs |
---|
2481 | * |
---|
2482 | * @description |
---|
2483 | * AngularJS version of the tabs directive. |
---|
2484 | */ |
---|
2485 | |
---|
2486 | angular.module('ui.bootstrap.tabs', []) |
---|
2487 | |
---|
2488 | .controller('TabsetController', ['$scope', function TabsetCtrl($scope) { |
---|
2489 | var ctrl = this, |
---|
2490 | tabs = ctrl.tabs = $scope.tabs = []; |
---|
2491 | |
---|
2492 | ctrl.select = function(tab) { |
---|
2493 | angular.forEach(tabs, function(tab) { |
---|
2494 | tab.active = false; |
---|
2495 | }); |
---|
2496 | tab.active = true; |
---|
2497 | }; |
---|
2498 | |
---|
2499 | ctrl.addTab = function addTab(tab) { |
---|
2500 | tabs.push(tab); |
---|
2501 | if (tabs.length === 1 || tab.active) { |
---|
2502 | ctrl.select(tab); |
---|
2503 | } |
---|
2504 | }; |
---|
2505 | |
---|
2506 | ctrl.removeTab = function removeTab(tab) { |
---|
2507 | var index = tabs.indexOf(tab); |
---|
2508 | //Select a new tab if the tab to be removed is selected |
---|
2509 | if (tab.active && tabs.length > 1) { |
---|
2510 | //If this is the last tab, select the previous tab. else, the next tab. |
---|
2511 | var newActiveIndex = index == tabs.length - 1 ? index - 1 : index + 1; |
---|
2512 | ctrl.select(tabs[newActiveIndex]); |
---|
2513 | } |
---|
2514 | tabs.splice(index, 1); |
---|
2515 | }; |
---|
2516 | }]) |
---|
2517 | |
---|
2518 | /** |
---|
2519 | * @ngdoc directive |
---|
2520 | * @name ui.bootstrap.tabs.directive:tabset |
---|
2521 | * @restrict EA |
---|
2522 | * |
---|
2523 | * @description |
---|
2524 | * Tabset is the outer container for the tabs directive |
---|
2525 | * |
---|
2526 | * @param {boolean=} vertical Whether or not to use vertical styling for the tabs. |
---|
2527 | * |
---|
2528 | * @example |
---|
2529 | <example module="ui.bootstrap"> |
---|
2530 | <file name="index.html"> |
---|
2531 | <tabset> |
---|
2532 | <tab heading="Vertical Tab 1"><b>First</b> Content!</tab> |
---|
2533 | <tab heading="Vertical Tab 2"><i>Second</i> Content!</tab> |
---|
2534 | </tabset> |
---|
2535 | <hr /> |
---|
2536 | <tabset vertical="true"> |
---|
2537 | <tab heading="Vertical Tab 1"><b>First</b> Vertical Content!</tab> |
---|
2538 | <tab heading="Vertical Tab 2"><i>Second</i> Vertical Content!</tab> |
---|
2539 | </tabset> |
---|
2540 | </file> |
---|
2541 | </example> |
---|
2542 | */ |
---|
2543 | .directive('tabset', function() { |
---|
2544 | return { |
---|
2545 | restrict: 'EA', |
---|
2546 | transclude: true, |
---|
2547 | replace: true, |
---|
2548 | scope: {}, |
---|
2549 | controller: 'TabsetController', |
---|
2550 | templateUrl: 'template/tabs/tabset.html', |
---|
2551 | link: function(scope, element, attrs) { |
---|
2552 | scope.vertical = angular.isDefined(attrs.vertical) ? scope.$parent.$eval(attrs.vertical) : false; |
---|
2553 | scope.type = angular.isDefined(attrs.type) ? scope.$parent.$eval(attrs.type) : 'tabs'; |
---|
2554 | } |
---|
2555 | }; |
---|
2556 | }) |
---|
2557 | |
---|
2558 | /** |
---|
2559 | * @ngdoc directive |
---|
2560 | * @name ui.bootstrap.tabs.directive:tab |
---|
2561 | * @restrict EA |
---|
2562 | * |
---|
2563 | * @param {string=} heading The visible heading, or title, of the tab. Set HTML headings with {@link ui.bootstrap.tabs.directive:tabHeading tabHeading}. |
---|
2564 | * @param {string=} select An expression to evaluate when the tab is selected. |
---|
2565 | * @param {boolean=} active A binding, telling whether or not this tab is selected. |
---|
2566 | * @param {boolean=} disabled A binding, telling whether or not this tab is disabled. |
---|
2567 | * |
---|
2568 | * @description |
---|
2569 | * Creates a tab with a heading and content. Must be placed within a {@link ui.bootstrap.tabs.directive:tabset tabset}. |
---|
2570 | * |
---|
2571 | * @example |
---|
2572 | <example module="ui.bootstrap"> |
---|
2573 | <file name="index.html"> |
---|
2574 | <div ng-controller="TabsDemoCtrl"> |
---|
2575 | <button class="btn btn-small" ng-click="items[0].active = true"> |
---|
2576 | Select item 1, using active binding |
---|
2577 | </button> |
---|
2578 | <button class="btn btn-small" ng-click="items[1].disabled = !items[1].disabled"> |
---|
2579 | Enable/disable item 2, using disabled binding |
---|
2580 | </button> |
---|
2581 | <br /> |
---|
2582 | <tabset> |
---|
2583 | <tab heading="Tab 1">First Tab</tab> |
---|
2584 | <tab select="alertMe()"> |
---|
2585 | <tab-heading><i class="icon-bell"></i> Alert me!</tab-heading> |
---|
2586 | Second Tab, with alert callback and html heading! |
---|
2587 | </tab> |
---|
2588 | <tab ng-repeat="item in items" |
---|
2589 | heading="{{item.title}}" |
---|
2590 | disabled="item.disabled" |
---|
2591 | active="item.active"> |
---|
2592 | {{item.content}} |
---|
2593 | </tab> |
---|
2594 | </tabset> |
---|
2595 | </div> |
---|
2596 | </file> |
---|
2597 | <file name="script.js"> |
---|
2598 | function TabsDemoCtrl($scope) { |
---|
2599 | $scope.items = [ |
---|
2600 | { title:"Dynamic Title 1", content:"Dynamic Item 0" }, |
---|
2601 | { title:"Dynamic Title 2", content:"Dynamic Item 1", disabled: true } |
---|
2602 | ]; |
---|
2603 | |
---|
2604 | $scope.alertMe = function() { |
---|
2605 | setTimeout(function() { |
---|
2606 | alert("You've selected the alert tab!"); |
---|
2607 | }); |
---|
2608 | }; |
---|
2609 | }; |
---|
2610 | </file> |
---|
2611 | </example> |
---|
2612 | */ |
---|
2613 | |
---|
2614 | /** |
---|
2615 | * @ngdoc directive |
---|
2616 | * @name ui.bootstrap.tabs.directive:tabHeading |
---|
2617 | * @restrict EA |
---|
2618 | * |
---|
2619 | * @description |
---|
2620 | * Creates an HTML heading for a {@link ui.bootstrap.tabs.directive:tab tab}. Must be placed as a child of a tab element. |
---|
2621 | * |
---|
2622 | * @example |
---|
2623 | <example module="ui.bootstrap"> |
---|
2624 | <file name="index.html"> |
---|
2625 | <tabset> |
---|
2626 | <tab> |
---|
2627 | <tab-heading><b>HTML</b> in my titles?!</tab-heading> |
---|
2628 | And some content, too! |
---|
2629 | </tab> |
---|
2630 | <tab> |
---|
2631 | <tab-heading><i class="icon-heart"></i> Icon heading?!?</tab-heading> |
---|
2632 | That's right. |
---|
2633 | </tab> |
---|
2634 | </tabset> |
---|
2635 | </file> |
---|
2636 | </example> |
---|
2637 | */ |
---|
2638 | .directive('tab', ['$parse', function($parse) { |
---|
2639 | return { |
---|
2640 | require: '^tabset', |
---|
2641 | restrict: 'EA', |
---|
2642 | replace: true, |
---|
2643 | templateUrl: 'template/tabs/tab.html', |
---|
2644 | transclude: true, |
---|
2645 | scope: { |
---|
2646 | heading: '@', |
---|
2647 | onSelect: '&select', //This callback is called in contentHeadingTransclude |
---|
2648 | //once it inserts the tab's content into the dom |
---|
2649 | onDeselect: '&deselect' |
---|
2650 | }, |
---|
2651 | controller: function() { |
---|
2652 | //Empty controller so other directives can require being 'under' a tab |
---|
2653 | }, |
---|
2654 | compile: function(elm, attrs, transclude) { |
---|
2655 | return function postLink(scope, elm, attrs, tabsetCtrl) { |
---|
2656 | var getActive, setActive; |
---|
2657 | if (attrs.active) { |
---|
2658 | getActive = $parse(attrs.active); |
---|
2659 | setActive = getActive.assign; |
---|
2660 | scope.$parent.$watch(getActive, function updateActive(value, oldVal) { |
---|
2661 | // Avoid re-initializing scope.active as it is already initialized |
---|
2662 | // below. (watcher is called async during init with value === |
---|
2663 | // oldVal) |
---|
2664 | if (value !== oldVal) { |
---|
2665 | scope.active = !!value; |
---|
2666 | } |
---|
2667 | }); |
---|
2668 | scope.active = getActive(scope.$parent); |
---|
2669 | } else { |
---|
2670 | setActive = getActive = angular.noop; |
---|
2671 | } |
---|
2672 | |
---|
2673 | scope.$watch('active', function(active) { |
---|
2674 | // Note this watcher also initializes and assigns scope.active to the |
---|
2675 | // attrs.active expression. |
---|
2676 | setActive(scope.$parent, active); |
---|
2677 | if (active) { |
---|
2678 | tabsetCtrl.select(scope); |
---|
2679 | scope.onSelect(); |
---|
2680 | } else { |
---|
2681 | scope.onDeselect(); |
---|
2682 | } |
---|
2683 | }); |
---|
2684 | |
---|
2685 | scope.disabled = false; |
---|
2686 | if ( attrs.disabled ) { |
---|
2687 | scope.$parent.$watch($parse(attrs.disabled), function(value) { |
---|
2688 | scope.disabled = !! value; |
---|
2689 | }); |
---|
2690 | } |
---|
2691 | |
---|
2692 | scope.select = function() { |
---|
2693 | if ( ! scope.disabled ) { |
---|
2694 | scope.active = true; |
---|
2695 | } |
---|
2696 | }; |
---|
2697 | |
---|
2698 | tabsetCtrl.addTab(scope); |
---|
2699 | scope.$on('$destroy', function() { |
---|
2700 | tabsetCtrl.removeTab(scope); |
---|
2701 | }); |
---|
2702 | |
---|
2703 | |
---|
2704 | //We need to transclude later, once the content container is ready. |
---|
2705 | //when this link happens, we're inside a tab heading. |
---|
2706 | scope.$transcludeFn = transclude; |
---|
2707 | }; |
---|
2708 | } |
---|
2709 | }; |
---|
2710 | }]) |
---|
2711 | |
---|
2712 | .directive('tabHeadingTransclude', [function() { |
---|
2713 | return { |
---|
2714 | restrict: 'A', |
---|
2715 | require: '^tab', |
---|
2716 | link: function(scope, elm, attrs, tabCtrl) { |
---|
2717 | scope.$watch('headingElement', function updateHeadingElement(heading) { |
---|
2718 | if (heading) { |
---|
2719 | elm.html(''); |
---|
2720 | elm.append(heading); |
---|
2721 | } |
---|
2722 | }); |
---|
2723 | } |
---|
2724 | }; |
---|
2725 | }]) |
---|
2726 | |
---|
2727 | .directive('tabContentTransclude', function() { |
---|
2728 | return { |
---|
2729 | restrict: 'A', |
---|
2730 | require: '^tabset', |
---|
2731 | link: function(scope, elm, attrs) { |
---|
2732 | var tab = scope.$eval(attrs.tabContentTransclude); |
---|
2733 | |
---|
2734 | //Now our tab is ready to be transcluded: both the tab heading area |
---|
2735 | //and the tab content area are loaded. Transclude 'em both. |
---|
2736 | tab.$transcludeFn(tab.$parent, function(contents) { |
---|
2737 | angular.forEach(contents, function(node) { |
---|
2738 | if (isTabHeading(node)) { |
---|
2739 | //Let tabHeadingTransclude know. |
---|
2740 | tab.headingElement = node; |
---|
2741 | } else { |
---|
2742 | elm.append(node); |
---|
2743 | } |
---|
2744 | }); |
---|
2745 | }); |
---|
2746 | } |
---|
2747 | }; |
---|
2748 | function isTabHeading(node) { |
---|
2749 | return node.tagName && ( |
---|
2750 | node.hasAttribute('tab-heading') || |
---|
2751 | node.hasAttribute('data-tab-heading') || |
---|
2752 | node.tagName.toLowerCase() === 'tab-heading' || |
---|
2753 | node.tagName.toLowerCase() === 'data-tab-heading' |
---|
2754 | ); |
---|
2755 | } |
---|
2756 | }) |
---|
2757 | |
---|
2758 | ; |
---|
2759 | |
---|
2760 | angular.module('ui.bootstrap.timepicker', []) |
---|
2761 | |
---|
2762 | .constant('timepickerConfig', { |
---|
2763 | hourStep: 1, |
---|
2764 | minuteStep: 1, |
---|
2765 | showMeridian: true, |
---|
2766 | meridians: null, |
---|
2767 | readonlyInput: false, |
---|
2768 | mousewheel: true |
---|
2769 | }) |
---|
2770 | |
---|
2771 | .directive('timepicker', ['$parse', '$log', 'timepickerConfig', '$locale', function ($parse, $log, timepickerConfig, $locale) { |
---|
2772 | return { |
---|
2773 | restrict: 'EA', |
---|
2774 | require:'?^ngModel', |
---|
2775 | replace: true, |
---|
2776 | scope: {}, |
---|
2777 | templateUrl: 'template/timepicker/timepicker.html', |
---|
2778 | link: function(scope, element, attrs, ngModel) { |
---|
2779 | if ( !ngModel ) { |
---|
2780 | return; // do nothing if no ng-model |
---|
2781 | } |
---|
2782 | |
---|
2783 | var selected = new Date(), |
---|
2784 | meridians = angular.isDefined(attrs.meridians) ? scope.$parent.$eval(attrs.meridians) : timepickerConfig.meridians || $locale.DATETIME_FORMATS.AMPMS; |
---|
2785 | |
---|
2786 | var hourStep = timepickerConfig.hourStep; |
---|
2787 | if (attrs.hourStep) { |
---|
2788 | scope.$parent.$watch($parse(attrs.hourStep), function(value) { |
---|
2789 | hourStep = parseInt(value, 10); |
---|
2790 | }); |
---|
2791 | } |
---|
2792 | |
---|
2793 | var minuteStep = timepickerConfig.minuteStep; |
---|
2794 | if (attrs.minuteStep) { |
---|
2795 | scope.$parent.$watch($parse(attrs.minuteStep), function(value) { |
---|
2796 | minuteStep = parseInt(value, 10); |
---|
2797 | }); |
---|
2798 | } |
---|
2799 | |
---|
2800 | // 12H / 24H mode |
---|
2801 | scope.showMeridian = timepickerConfig.showMeridian; |
---|
2802 | if (attrs.showMeridian) { |
---|
2803 | scope.$parent.$watch($parse(attrs.showMeridian), function(value) { |
---|
2804 | scope.showMeridian = !!value; |
---|
2805 | |
---|
2806 | if ( ngModel.$error.time ) { |
---|
2807 | // Evaluate from template |
---|
2808 | var hours = getHoursFromTemplate(), minutes = getMinutesFromTemplate(); |
---|
2809 | if (angular.isDefined( hours ) && angular.isDefined( minutes )) { |
---|
2810 | selected.setHours( hours ); |
---|
2811 | refresh(); |
---|
2812 | } |
---|
2813 | } else { |
---|
2814 | updateTemplate(); |
---|
2815 | } |
---|
2816 | }); |
---|
2817 | } |
---|
2818 | |
---|
2819 | // Get scope.hours in 24H mode if valid |
---|
2820 | function getHoursFromTemplate ( ) { |
---|
2821 | var hours = parseInt( scope.hours, 10 ); |
---|
2822 | var valid = ( scope.showMeridian ) ? (hours > 0 && hours < 13) : (hours >= 0 && hours < 24); |
---|
2823 | if ( !valid ) { |
---|
2824 | return undefined; |
---|
2825 | } |
---|
2826 | |
---|
2827 | if ( scope.showMeridian ) { |
---|
2828 | if ( hours === 12 ) { |
---|
2829 | hours = 0; |
---|
2830 | } |
---|
2831 | if ( scope.meridian === meridians[1] ) { |
---|
2832 | hours = hours + 12; |
---|
2833 | } |
---|
2834 | } |
---|
2835 | return hours; |
---|
2836 | } |
---|
2837 | |
---|
2838 | function getMinutesFromTemplate() { |
---|
2839 | var minutes = parseInt(scope.minutes, 10); |
---|
2840 | return ( minutes >= 0 && minutes < 60 ) ? minutes : undefined; |
---|
2841 | } |
---|
2842 | |
---|
2843 | function pad( value ) { |
---|
2844 | return ( angular.isDefined(value) && value.toString().length < 2 ) ? '0' + value : value; |
---|
2845 | } |
---|
2846 | |
---|
2847 | // Input elements |
---|
2848 | var inputs = element.find('input'), hoursInputEl = inputs.eq(0), minutesInputEl = inputs.eq(1); |
---|
2849 | |
---|
2850 | // Respond on mousewheel spin |
---|
2851 | var mousewheel = (angular.isDefined(attrs.mousewheel)) ? scope.$eval(attrs.mousewheel) : timepickerConfig.mousewheel; |
---|
2852 | if ( mousewheel ) { |
---|
2853 | |
---|
2854 | var isScrollingUp = function(e) { |
---|
2855 | if (e.originalEvent) { |
---|
2856 | e = e.originalEvent; |
---|
2857 | } |
---|
2858 | //pick correct delta variable depending on event |
---|
2859 | var delta = (e.wheelDelta) ? e.wheelDelta : -e.deltaY; |
---|
2860 | return (e.detail || delta > 0); |
---|
2861 | }; |
---|
2862 | |
---|
2863 | hoursInputEl.bind('mousewheel wheel', function(e) { |
---|
2864 | scope.$apply( (isScrollingUp(e)) ? scope.incrementHours() : scope.decrementHours() ); |
---|
2865 | e.preventDefault(); |
---|
2866 | }); |
---|
2867 | |
---|
2868 | minutesInputEl.bind('mousewheel wheel', function(e) { |
---|
2869 | scope.$apply( (isScrollingUp(e)) ? scope.incrementMinutes() : scope.decrementMinutes() ); |
---|
2870 | e.preventDefault(); |
---|
2871 | }); |
---|
2872 | } |
---|
2873 | |
---|
2874 | scope.readonlyInput = (angular.isDefined(attrs.readonlyInput)) ? scope.$eval(attrs.readonlyInput) : timepickerConfig.readonlyInput; |
---|
2875 | if ( ! scope.readonlyInput ) { |
---|
2876 | |
---|
2877 | var invalidate = function(invalidHours, invalidMinutes) { |
---|
2878 | ngModel.$setViewValue( null ); |
---|
2879 | ngModel.$setValidity('time', false); |
---|
2880 | if (angular.isDefined(invalidHours)) { |
---|
2881 | scope.invalidHours = invalidHours; |
---|
2882 | } |
---|
2883 | if (angular.isDefined(invalidMinutes)) { |
---|
2884 | scope.invalidMinutes = invalidMinutes; |
---|
2885 | } |
---|
2886 | }; |
---|
2887 | |
---|
2888 | scope.updateHours = function() { |
---|
2889 | var hours = getHoursFromTemplate(); |
---|
2890 | |
---|
2891 | if ( angular.isDefined(hours) ) { |
---|
2892 | selected.setHours( hours ); |
---|
2893 | refresh( 'h' ); |
---|
2894 | } else { |
---|
2895 | invalidate(true); |
---|
2896 | } |
---|
2897 | }; |
---|
2898 | |
---|
2899 | hoursInputEl.bind('blur', function(e) { |
---|
2900 | if ( !scope.validHours && scope.hours < 10) { |
---|
2901 | scope.$apply( function() { |
---|
2902 | scope.hours = pad( scope.hours ); |
---|
2903 | }); |
---|
2904 | } |
---|
2905 | }); |
---|
2906 | |
---|
2907 | scope.updateMinutes = function() { |
---|
2908 | var minutes = getMinutesFromTemplate(); |
---|
2909 | |
---|
2910 | if ( angular.isDefined(minutes) ) { |
---|
2911 | selected.setMinutes( minutes ); |
---|
2912 | refresh( 'm' ); |
---|
2913 | } else { |
---|
2914 | invalidate(undefined, true); |
---|
2915 | } |
---|
2916 | }; |
---|
2917 | |
---|
2918 | minutesInputEl.bind('blur', function(e) { |
---|
2919 | if ( !scope.invalidMinutes && scope.minutes < 10 ) { |
---|
2920 | scope.$apply( function() { |
---|
2921 | scope.minutes = pad( scope.minutes ); |
---|
2922 | }); |
---|
2923 | } |
---|
2924 | }); |
---|
2925 | } else { |
---|
2926 | scope.updateHours = angular.noop; |
---|
2927 | scope.updateMinutes = angular.noop; |
---|
2928 | } |
---|
2929 | |
---|
2930 | ngModel.$render = function() { |
---|
2931 | var date = ngModel.$modelValue ? new Date( ngModel.$modelValue ) : null; |
---|
2932 | |
---|
2933 | if ( isNaN(date) ) { |
---|
2934 | ngModel.$setValidity('time', false); |
---|
2935 | $log.error('Timepicker directive: "ng-model" value must be a Date object, a number of milliseconds since 01.01.1970 or a string representing an RFC2822 or ISO 8601 date.'); |
---|
2936 | } else { |
---|
2937 | if ( date ) { |
---|
2938 | selected = date; |
---|
2939 | } |
---|
2940 | makeValid(); |
---|
2941 | updateTemplate(); |
---|
2942 | } |
---|
2943 | }; |
---|
2944 | |
---|
2945 | // Call internally when we know that model is valid. |
---|
2946 | function refresh( keyboardChange ) { |
---|
2947 | makeValid(); |
---|
2948 | ngModel.$setViewValue( new Date(selected) ); |
---|
2949 | updateTemplate( keyboardChange ); |
---|
2950 | } |
---|
2951 | |
---|
2952 | function makeValid() { |
---|
2953 | ngModel.$setValidity('time', true); |
---|
2954 | scope.invalidHours = false; |
---|
2955 | scope.invalidMinutes = false; |
---|
2956 | } |
---|
2957 | |
---|
2958 | function updateTemplate( keyboardChange ) { |
---|
2959 | var hours = selected.getHours(), minutes = selected.getMinutes(); |
---|
2960 | |
---|
2961 | if ( scope.showMeridian ) { |
---|
2962 | hours = ( hours === 0 || hours === 12 ) ? 12 : hours % 12; // Convert 24 to 12 hour system |
---|
2963 | } |
---|
2964 | scope.hours = keyboardChange === 'h' ? hours : pad(hours); |
---|
2965 | scope.minutes = keyboardChange === 'm' ? minutes : pad(minutes); |
---|
2966 | scope.meridian = selected.getHours() < 12 ? meridians[0] : meridians[1]; |
---|
2967 | } |
---|
2968 | |
---|
2969 | function addMinutes( minutes ) { |
---|
2970 | var dt = new Date( selected.getTime() + minutes * 60000 ); |
---|
2971 | selected.setHours( dt.getHours(), dt.getMinutes() ); |
---|
2972 | refresh(); |
---|
2973 | } |
---|
2974 | |
---|
2975 | scope.incrementHours = function() { |
---|
2976 | addMinutes( hourStep * 60 ); |
---|
2977 | }; |
---|
2978 | scope.decrementHours = function() { |
---|
2979 | addMinutes( - hourStep * 60 ); |
---|
2980 | }; |
---|
2981 | scope.incrementMinutes = function() { |
---|
2982 | addMinutes( minuteStep ); |
---|
2983 | }; |
---|
2984 | scope.decrementMinutes = function() { |
---|
2985 | addMinutes( - minuteStep ); |
---|
2986 | }; |
---|
2987 | scope.toggleMeridian = function() { |
---|
2988 | addMinutes( 12 * 60 * (( selected.getHours() < 12 ) ? 1 : -1) ); |
---|
2989 | }; |
---|
2990 | } |
---|
2991 | }; |
---|
2992 | }]); |
---|
2993 | |
---|
2994 | angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position', 'ui.bootstrap.bindHtml']) |
---|
2995 | |
---|
2996 | /** |
---|
2997 | * A helper service that can parse typeahead's syntax (string provided by users) |
---|
2998 | * Extracted to a separate service for ease of unit testing |
---|
2999 | */ |
---|
3000 | .factory('typeaheadParser', ['$parse', function ($parse) { |
---|
3001 | |
---|
3002 | // 00000111000000000000022200000000000000003333333333333330000000000044000 |
---|
3003 | var TYPEAHEAD_REGEXP = /^\s*(.*?)(?:\s+as\s+(.*?))?\s+for\s+(?:([\$\w][\$\w\d]*))\s+in\s+(.*)$/; |
---|
3004 | |
---|
3005 | return { |
---|
3006 | parse:function (input) { |
---|
3007 | |
---|
3008 | var match = input.match(TYPEAHEAD_REGEXP), modelMapper, viewMapper, source; |
---|
3009 | if (!match) { |
---|
3010 | throw new Error( |
---|
3011 | "Expected typeahead specification in form of '_modelValue_ (as _label_)? for _item_ in _collection_'" + |
---|
3012 | " but got '" + input + "'."); |
---|
3013 | } |
---|
3014 | |
---|
3015 | return { |
---|
3016 | itemName:match[3], |
---|
3017 | source:$parse(match[4]), |
---|
3018 | viewMapper:$parse(match[2] || match[1]), |
---|
3019 | modelMapper:$parse(match[1]) |
---|
3020 | }; |
---|
3021 | } |
---|
3022 | }; |
---|
3023 | }]) |
---|
3024 | |
---|
3025 | .directive('typeahead', ['$compile', '$parse', '$q', '$timeout', '$document', '$position', 'typeaheadParser', |
---|
3026 | function ($compile, $parse, $q, $timeout, $document, $position, typeaheadParser) { |
---|
3027 | |
---|
3028 | var HOT_KEYS = [9, 13, 27, 38, 40]; |
---|
3029 | |
---|
3030 | return { |
---|
3031 | require:'ngModel', |
---|
3032 | link:function (originalScope, element, attrs, modelCtrl) { |
---|
3033 | |
---|
3034 | //SUPPORTED ATTRIBUTES (OPTIONS) |
---|
3035 | |
---|
3036 | //minimal no of characters that needs to be entered before typeahead kicks-in |
---|
3037 | var minSearch = originalScope.$eval(attrs.typeaheadMinLength) || 1; |
---|
3038 | |
---|
3039 | //minimal wait time after last character typed before typehead kicks-in |
---|
3040 | var waitTime = originalScope.$eval(attrs.typeaheadWaitMs) || 0; |
---|
3041 | |
---|
3042 | //should it restrict model values to the ones selected from the popup only? |
---|
3043 | var isEditable = originalScope.$eval(attrs.typeaheadEditable) !== false; |
---|
3044 | |
---|
3045 | //binding to a variable that indicates if matches are being retrieved asynchronously |
---|
3046 | var isLoadingSetter = $parse(attrs.typeaheadLoading).assign || angular.noop; |
---|
3047 | |
---|
3048 | //a callback executed when a match is selected |
---|
3049 | var onSelectCallback = $parse(attrs.typeaheadOnSelect); |
---|
3050 | |
---|
3051 | var inputFormatter = attrs.typeaheadInputFormatter ? $parse(attrs.typeaheadInputFormatter) : undefined; |
---|
3052 | |
---|
3053 | var appendToBody = attrs.typeaheadAppendToBody ? $parse(attrs.typeaheadAppendToBody) : false; |
---|
3054 | |
---|
3055 | //INTERNAL VARIABLES |
---|
3056 | |
---|
3057 | //model setter executed upon match selection |
---|
3058 | var $setModelValue = $parse(attrs.ngModel).assign; |
---|
3059 | |
---|
3060 | //expressions used by typeahead |
---|
3061 | var parserResult = typeaheadParser.parse(attrs.typeahead); |
---|
3062 | |
---|
3063 | var hasFocus; |
---|
3064 | |
---|
3065 | //pop-up element used to display matches |
---|
3066 | var popUpEl = angular.element('<div typeahead-popup></div>'); |
---|
3067 | popUpEl.attr({ |
---|
3068 | matches: 'matches', |
---|
3069 | active: 'activeIdx', |
---|
3070 | select: 'select(activeIdx)', |
---|
3071 | query: 'query', |
---|
3072 | position: 'position' |
---|
3073 | }); |
---|
3074 | //custom item template |
---|
3075 | if (angular.isDefined(attrs.typeaheadTemplateUrl)) { |
---|
3076 | popUpEl.attr('template-url', attrs.typeaheadTemplateUrl); |
---|
3077 | } |
---|
3078 | |
---|
3079 | //create a child scope for the typeahead directive so we are not polluting original scope |
---|
3080 | //with typeahead-specific data (matches, query etc.) |
---|
3081 | var scope = originalScope.$new(); |
---|
3082 | originalScope.$on('$destroy', function(){ |
---|
3083 | scope.$destroy(); |
---|
3084 | }); |
---|
3085 | |
---|
3086 | var resetMatches = function() { |
---|
3087 | scope.matches = []; |
---|
3088 | scope.activeIdx = -1; |
---|
3089 | }; |
---|
3090 | |
---|
3091 | var getMatchesAsync = function(inputValue) { |
---|
3092 | |
---|
3093 | var locals = {$viewValue: inputValue}; |
---|
3094 | isLoadingSetter(originalScope, true); |
---|
3095 | $q.when(parserResult.source(originalScope, locals)).then(function(matches) { |
---|
3096 | |
---|
3097 | //it might happen that several async queries were in progress if a user were typing fast |
---|
3098 | //but we are interested only in responses that correspond to the current view value |
---|
3099 | if (inputValue === modelCtrl.$viewValue && hasFocus) { |
---|
3100 | if (matches.length > 0) { |
---|
3101 | |
---|
3102 | scope.activeIdx = 0; |
---|
3103 | scope.matches.length = 0; |
---|
3104 | |
---|
3105 | //transform labels |
---|
3106 | for(var i=0; i<matches.length; i++) { |
---|
3107 | locals[parserResult.itemName] = matches[i]; |
---|
3108 | scope.matches.push({ |
---|
3109 | label: parserResult.viewMapper(scope, locals), |
---|
3110 | model: matches[i] |
---|
3111 | }); |
---|
3112 | } |
---|
3113 | |
---|
3114 | scope.query = inputValue; |
---|
3115 | //position pop-up with matches - we need to re-calculate its position each time we are opening a window |
---|
3116 | //with matches as a pop-up might be absolute-positioned and position of an input might have changed on a page |
---|
3117 | //due to other elements being rendered |
---|
3118 | scope.position = appendToBody ? $position.offset(element) : $position.position(element); |
---|
3119 | scope.position.top = scope.position.top + element.prop('offsetHeight'); |
---|
3120 | |
---|
3121 | } else { |
---|
3122 | resetMatches(); |
---|
3123 | } |
---|
3124 | isLoadingSetter(originalScope, false); |
---|
3125 | } |
---|
3126 | }, function(){ |
---|
3127 | resetMatches(); |
---|
3128 | isLoadingSetter(originalScope, false); |
---|
3129 | }); |
---|
3130 | }; |
---|
3131 | |
---|
3132 | resetMatches(); |
---|
3133 | |
---|
3134 | //we need to propagate user's query so we can higlight matches |
---|
3135 | scope.query = undefined; |
---|
3136 | |
---|
3137 | //Declare the timeout promise var outside the function scope so that stacked calls can be cancelled later |
---|
3138 | var timeoutPromise; |
---|
3139 | |
---|
3140 | //plug into $parsers pipeline to open a typeahead on view changes initiated from DOM |
---|
3141 | //$parsers kick-in on all the changes coming from the view as well as manually triggered by $setViewValue |
---|
3142 | modelCtrl.$parsers.unshift(function (inputValue) { |
---|
3143 | |
---|
3144 | hasFocus = true; |
---|
3145 | |
---|
3146 | if (inputValue && inputValue.length >= minSearch) { |
---|
3147 | if (waitTime > 0) { |
---|
3148 | if (timeoutPromise) { |
---|
3149 | $timeout.cancel(timeoutPromise);//cancel previous timeout |
---|
3150 | } |
---|
3151 | timeoutPromise = $timeout(function () { |
---|
3152 | getMatchesAsync(inputValue); |
---|
3153 | }, waitTime); |
---|
3154 | } else { |
---|
3155 | getMatchesAsync(inputValue); |
---|
3156 | } |
---|
3157 | } else { |
---|
3158 | isLoadingSetter(originalScope, false); |
---|
3159 | resetMatches(); |
---|
3160 | } |
---|
3161 | |
---|
3162 | if (isEditable) { |
---|
3163 | return inputValue; |
---|
3164 | } else { |
---|
3165 | if (!inputValue) { |
---|
3166 | // Reset in case user had typed something previously. |
---|
3167 | modelCtrl.$setValidity('editable', true); |
---|
3168 | return inputValue; |
---|
3169 | } else { |
---|
3170 | modelCtrl.$setValidity('editable', false); |
---|
3171 | return undefined; |
---|
3172 | } |
---|
3173 | } |
---|
3174 | }); |
---|
3175 | |
---|
3176 | modelCtrl.$formatters.push(function (modelValue) { |
---|
3177 | |
---|
3178 | var candidateViewValue, emptyViewValue; |
---|
3179 | var locals = {}; |
---|
3180 | |
---|
3181 | if (inputFormatter) { |
---|
3182 | |
---|
3183 | locals['$model'] = modelValue; |
---|
3184 | return inputFormatter(originalScope, locals); |
---|
3185 | |
---|
3186 | } else { |
---|
3187 | |
---|
3188 | //it might happen that we don't have enough info to properly render input value |
---|
3189 | //we need to check for this situation and simply return model value if we can't apply custom formatting |
---|
3190 | locals[parserResult.itemName] = modelValue; |
---|
3191 | candidateViewValue = parserResult.viewMapper(originalScope, locals); |
---|
3192 | locals[parserResult.itemName] = undefined; |
---|
3193 | emptyViewValue = parserResult.viewMapper(originalScope, locals); |
---|
3194 | |
---|
3195 | return candidateViewValue!== emptyViewValue ? candidateViewValue : modelValue; |
---|
3196 | } |
---|
3197 | }); |
---|
3198 | |
---|
3199 | scope.select = function (activeIdx) { |
---|
3200 | //called from within the $digest() cycle |
---|
3201 | var locals = {}; |
---|
3202 | var model, item; |
---|
3203 | |
---|
3204 | locals[parserResult.itemName] = item = scope.matches[activeIdx].model; |
---|
3205 | model = parserResult.modelMapper(originalScope, locals); |
---|
3206 | $setModelValue(originalScope, model); |
---|
3207 | modelCtrl.$setValidity('editable', true); |
---|
3208 | |
---|
3209 | onSelectCallback(originalScope, { |
---|
3210 | $item: item, |
---|
3211 | $model: model, |
---|
3212 | $label: parserResult.viewMapper(originalScope, locals) |
---|
3213 | }); |
---|
3214 | |
---|
3215 | resetMatches(); |
---|
3216 | |
---|
3217 | //return focus to the input element if a mach was selected via a mouse click event |
---|
3218 | element[0].focus(); |
---|
3219 | }; |
---|
3220 | |
---|
3221 | //bind keyboard events: arrows up(38) / down(40), enter(13) and tab(9), esc(27) |
---|
3222 | element.bind('keydown', function (evt) { |
---|
3223 | |
---|
3224 | //typeahead is open and an "interesting" key was pressed |
---|
3225 | if (scope.matches.length === 0 || HOT_KEYS.indexOf(evt.which) === -1) { |
---|
3226 | return; |
---|
3227 | } |
---|
3228 | |
---|
3229 | evt.preventDefault(); |
---|
3230 | |
---|
3231 | if (evt.which === 40) { |
---|
3232 | scope.activeIdx = (scope.activeIdx + 1) % scope.matches.length; |
---|
3233 | scope.$digest(); |
---|
3234 | |
---|
3235 | } else if (evt.which === 38) { |
---|
3236 | scope.activeIdx = (scope.activeIdx ? scope.activeIdx : scope.matches.length) - 1; |
---|
3237 | scope.$digest(); |
---|
3238 | |
---|
3239 | } else if (evt.which === 13 || evt.which === 9) { |
---|
3240 | scope.$apply(function () { |
---|
3241 | scope.select(scope.activeIdx); |
---|
3242 | }); |
---|
3243 | |
---|
3244 | } else if (evt.which === 27) { |
---|
3245 | evt.stopPropagation(); |
---|
3246 | |
---|
3247 | resetMatches(); |
---|
3248 | scope.$digest(); |
---|
3249 | } |
---|
3250 | }); |
---|
3251 | |
---|
3252 | element.bind('blur', function (evt) { |
---|
3253 | hasFocus = false; |
---|
3254 | }); |
---|
3255 | |
---|
3256 | // Keep reference to click handler to unbind it. |
---|
3257 | var dismissClickHandler = function (evt) { |
---|
3258 | if (element[0] !== evt.target) { |
---|
3259 | resetMatches(); |
---|
3260 | scope.$digest(); |
---|
3261 | } |
---|
3262 | }; |
---|
3263 | |
---|
3264 | $document.bind('click', dismissClickHandler); |
---|
3265 | |
---|
3266 | originalScope.$on('$destroy', function(){ |
---|
3267 | $document.unbind('click', dismissClickHandler); |
---|
3268 | }); |
---|
3269 | |
---|
3270 | var $popup = $compile(popUpEl)(scope); |
---|
3271 | if ( appendToBody ) { |
---|
3272 | $document.find('body').append($popup); |
---|
3273 | } else { |
---|
3274 | element.after($popup); |
---|
3275 | } |
---|
3276 | } |
---|
3277 | }; |
---|
3278 | |
---|
3279 | }]) |
---|
3280 | |
---|
3281 | .directive('typeaheadPopup', function () { |
---|
3282 | return { |
---|
3283 | restrict:'EA', |
---|
3284 | scope:{ |
---|
3285 | matches:'=', |
---|
3286 | query:'=', |
---|
3287 | active:'=', |
---|
3288 | position:'=', |
---|
3289 | select:'&' |
---|
3290 | }, |
---|
3291 | replace:true, |
---|
3292 | templateUrl:'template/typeahead/typeahead-popup.html', |
---|
3293 | link:function (scope, element, attrs) { |
---|
3294 | |
---|
3295 | scope.templateUrl = attrs.templateUrl; |
---|
3296 | |
---|
3297 | scope.isOpen = function () { |
---|
3298 | return scope.matches.length > 0; |
---|
3299 | }; |
---|
3300 | |
---|
3301 | scope.isActive = function (matchIdx) { |
---|
3302 | return scope.active == matchIdx; |
---|
3303 | }; |
---|
3304 | |
---|
3305 | scope.selectActive = function (matchIdx) { |
---|
3306 | scope.active = matchIdx; |
---|
3307 | }; |
---|
3308 | |
---|
3309 | scope.selectMatch = function (activeIdx) { |
---|
3310 | scope.select({activeIdx:activeIdx}); |
---|
3311 | }; |
---|
3312 | } |
---|
3313 | }; |
---|
3314 | }) |
---|
3315 | |
---|
3316 | .directive('typeaheadMatch', ['$http', '$templateCache', '$compile', '$parse', function ($http, $templateCache, $compile, $parse) { |
---|
3317 | return { |
---|
3318 | restrict:'EA', |
---|
3319 | scope:{ |
---|
3320 | index:'=', |
---|
3321 | match:'=', |
---|
3322 | query:'=' |
---|
3323 | }, |
---|
3324 | link:function (scope, element, attrs) { |
---|
3325 | var tplUrl = $parse(attrs.templateUrl)(scope.$parent) || 'template/typeahead/typeahead-match.html'; |
---|
3326 | $http.get(tplUrl, {cache: $templateCache}).success(function(tplContent){ |
---|
3327 | element.replaceWith($compile(tplContent.trim())(scope)); |
---|
3328 | }); |
---|
3329 | } |
---|
3330 | }; |
---|
3331 | }]) |
---|
3332 | |
---|
3333 | .filter('typeaheadHighlight', function() { |
---|
3334 | |
---|
3335 | function escapeRegexp(queryToEscape) { |
---|
3336 | return queryToEscape.replace(/([.?*+^$[\]\\(){}|-])/g, "\\$1"); |
---|
3337 | } |
---|
3338 | |
---|
3339 | return function(matchItem, query) { |
---|
3340 | return query ? matchItem.replace(new RegExp(escapeRegexp(query), 'gi'), '<strong>$&</strong>') : matchItem; |
---|
3341 | }; |
---|
3342 | }); |
---|
3343 | angular.module("template/accordion/accordion-group.html", []).run(["$templateCache", function($templateCache) { |
---|
3344 | $templateCache.put("template/accordion/accordion-group.html", |
---|
3345 | "<div class=\"accordion-group\">\n" + |
---|
3346 | " <div class=\"accordion-heading\" ><a class=\"accordion-toggle\" ng-click=\"isOpen = !isOpen\" accordion-transclude=\"heading\">{{heading}}</a></div>\n" + |
---|
3347 | " <div class=\"accordion-body\" collapse=\"!isOpen\">\n" + |
---|
3348 | " <div class=\"accordion-inner\" ng-transclude></div> </div>\n" + |
---|
3349 | "</div>"); |
---|
3350 | }]); |
---|
3351 | |
---|
3352 | angular.module("template/accordion/accordion.html", []).run(["$templateCache", function($templateCache) { |
---|
3353 | $templateCache.put("template/accordion/accordion.html", |
---|
3354 | "<div class=\"accordion\" ng-transclude></div>"); |
---|
3355 | }]); |
---|
3356 | |
---|
3357 | angular.module("template/alert/alert.html", []).run(["$templateCache", function($templateCache) { |
---|
3358 | $templateCache.put("template/alert/alert.html", |
---|
3359 | "<div class='alert' ng-class='type && \"alert-\" + type'>\n" + |
---|
3360 | " <button ng-show='closeable' type='button' class='close' ng-click='close()'>×</button>\n" + |
---|
3361 | " <div ng-transclude></div>\n" + |
---|
3362 | "</div>\n" + |
---|
3363 | ""); |
---|
3364 | }]); |
---|
3365 | |
---|
3366 | angular.module("template/carousel/carousel.html", []).run(["$templateCache", function($templateCache) { |
---|
3367 | $templateCache.put("template/carousel/carousel.html", |
---|
3368 | "<div ng-mouseenter=\"pause()\" ng-mouseleave=\"play()\" class=\"carousel\">\n" + |
---|
3369 | " <ol class=\"carousel-indicators\" ng-show=\"slides().length > 1\">\n" + |
---|
3370 | " <li ng-repeat=\"slide in slides()\" ng-class=\"{active: isActive(slide)}\" ng-click=\"select(slide)\"></li>\n" + |
---|
3371 | " </ol>\n" + |
---|
3372 | " <div class=\"carousel-inner\" ng-transclude></div>\n" + |
---|
3373 | " <a ng-click=\"prev()\" class=\"carousel-control left\" ng-show=\"slides().length > 1\">‹</a>\n" + |
---|
3374 | " <a ng-click=\"next()\" class=\"carousel-control right\" ng-show=\"slides().length > 1\">›</a>\n" + |
---|
3375 | "</div>\n" + |
---|
3376 | ""); |
---|
3377 | }]); |
---|
3378 | |
---|
3379 | angular.module("template/carousel/slide.html", []).run(["$templateCache", function($templateCache) { |
---|
3380 | $templateCache.put("template/carousel/slide.html", |
---|
3381 | "<div ng-class=\"{\n" + |
---|
3382 | " 'active': leaving || (active && !entering),\n" + |
---|
3383 | " 'prev': (next || active) && direction=='prev',\n" + |
---|
3384 | " 'next': (next || active) && direction=='next',\n" + |
---|
3385 | " 'right': direction=='prev',\n" + |
---|
3386 | " 'left': direction=='next'\n" + |
---|
3387 | " }\" class=\"item\" ng-transclude></div>\n" + |
---|
3388 | ""); |
---|
3389 | }]); |
---|
3390 | |
---|
3391 | angular.module("template/datepicker/datepicker.html", []).run(["$templateCache", function($templateCache) { |
---|
3392 | $templateCache.put("template/datepicker/datepicker.html", |
---|
3393 | "<table>\n" + |
---|
3394 | " <thead>\n" + |
---|
3395 | " <tr class=\"text-center\">\n" + |
---|
3396 | " <th><button type=\"button\" class=\"btn pull-left\" ng-click=\"move(-1)\"><i class=\"icon-chevron-left\"></i></button></th>\n" + |
---|
3397 | " <th colspan=\"{{rows[0].length - 2 + showWeekNumbers}}\"><button type=\"button\" class=\"btn btn-block\" ng-click=\"toggleMode()\"><strong>{{title}}</strong></button></th>\n" + |
---|
3398 | " <th><button type=\"button\" class=\"btn pull-right\" ng-click=\"move(1)\"><i class=\"icon-chevron-right\"></i></button></th>\n" + |
---|
3399 | " </tr>\n" + |
---|
3400 | " <tr class=\"text-center\" ng-show=\"labels.length > 0\">\n" + |
---|
3401 | " <th ng-show=\"showWeekNumbers\">#</th>\n" + |
---|
3402 | " <th ng-repeat=\"label in labels\">{{label}}</th>\n" + |
---|
3403 | " </tr>\n" + |
---|
3404 | " </thead>\n" + |
---|
3405 | " <tbody>\n" + |
---|
3406 | " <tr ng-repeat=\"row in rows\">\n" + |
---|
3407 | " <td ng-show=\"showWeekNumbers\" class=\"text-center\"><em>{{ getWeekNumber(row) }}</em></td>\n" + |
---|
3408 | " <td ng-repeat=\"dt in row\" class=\"text-center\">\n" + |
---|
3409 | " <button type=\"button\" style=\"width:100%;\" class=\"btn\" ng-class=\"{'btn-info': dt.selected}\" ng-click=\"select(dt.date)\" ng-disabled=\"dt.disabled\"><span ng-class=\"{muted: dt.secondary}\">{{dt.label}}</span></button>\n" + |
---|
3410 | " </td>\n" + |
---|
3411 | " </tr>\n" + |
---|
3412 | " </tbody>\n" + |
---|
3413 | "</table>\n" + |
---|
3414 | ""); |
---|
3415 | }]); |
---|
3416 | |
---|
3417 | angular.module("template/datepicker/popup.html", []).run(["$templateCache", function($templateCache) { |
---|
3418 | $templateCache.put("template/datepicker/popup.html", |
---|
3419 | "<ul class=\"dropdown-menu\" ng-style=\"{display: (isOpen && 'block') || 'none', top: position.top+'px', left: position.left+'px'}\">\n" + |
---|
3420 | " <li ng-transclude></li>\n" + |
---|
3421 | " <li ng-show=\"showButtonBar\" style=\"padding:10px 9px 2px\">\n" + |
---|
3422 | " <span class=\"btn-group\">\n" + |
---|
3423 | " <button type=\"button\" class=\"btn btn-small btn-inverse\" ng-click=\"today()\">{{currentText}}</button>\n" + |
---|
3424 | " <button type=\"button\" class=\"btn btn-small btn-info\" ng-click=\"showWeeks = ! showWeeks\" ng-class=\"{active: showWeeks}\">{{toggleWeeksText}}</button>\n" + |
---|
3425 | " <button type=\"button\" class=\"btn btn-small btn-danger\" ng-click=\"clear()\">{{clearText}}</button>\n" + |
---|
3426 | " </span>\n" + |
---|
3427 | " <button type=\"button\" class=\"btn btn-small btn-success pull-right\" ng-click=\"isOpen = false\">{{closeText}}</button>\n" + |
---|
3428 | " </li>\n" + |
---|
3429 | "</ul>\n" + |
---|
3430 | ""); |
---|
3431 | }]); |
---|
3432 | |
---|
3433 | angular.module("template/modal/backdrop.html", []).run(["$templateCache", function($templateCache) { |
---|
3434 | $templateCache.put("template/modal/backdrop.html", |
---|
3435 | "<div class=\"modal-backdrop fade\" ng-class=\"{in: animate}\" ng-style=\"{'z-index': 1040 + index*10}\" ng-click=\"close($event)\"></div>"); |
---|
3436 | }]); |
---|
3437 | |
---|
3438 | angular.module("template/modal/window.html", []).run(["$templateCache", function($templateCache) { |
---|
3439 | $templateCache.put("template/modal/window.html", |
---|
3440 | "<div tabindex=\"-1\" class=\"modal fade {{ windowClass }}\" ng-class=\"{in: animate}\" ng-style=\"{'z-index': 1050 + index*10}\" ng-transclude></div>"); |
---|
3441 | }]); |
---|
3442 | |
---|
3443 | angular.module("template/pagination/pager.html", []).run(["$templateCache", function($templateCache) { |
---|
3444 | $templateCache.put("template/pagination/pager.html", |
---|
3445 | "<div class=\"pager\">\n" + |
---|
3446 | " <ul>\n" + |
---|
3447 | " <li ng-repeat=\"page in pages\" ng-class=\"{disabled: page.disabled, previous: page.previous, next: page.next}\"><a ng-click=\"selectPage(page.number)\">{{page.text}}</a></li>\n" + |
---|
3448 | " </ul>\n" + |
---|
3449 | "</div>\n" + |
---|
3450 | ""); |
---|
3451 | }]); |
---|
3452 | |
---|
3453 | angular.module("template/pagination/pagination.html", []).run(["$templateCache", function($templateCache) { |
---|
3454 | $templateCache.put("template/pagination/pagination.html", |
---|
3455 | "<div class=\"pagination\"><ul>\n" + |
---|
3456 | " <li ng-repeat=\"page in pages\" ng-class=\"{active: page.active, disabled: page.disabled}\"><a ng-click=\"selectPage(page.number)\">{{page.text}}</a></li>\n" + |
---|
3457 | " </ul>\n" + |
---|
3458 | "</div>\n" + |
---|
3459 | ""); |
---|
3460 | }]); |
---|
3461 | |
---|
3462 | angular.module("template/tooltip/tooltip-html-unsafe-popup.html", []).run(["$templateCache", function($templateCache) { |
---|
3463 | $templateCache.put("template/tooltip/tooltip-html-unsafe-popup.html", |
---|
3464 | "<div class=\"tooltip {{placement}}\" ng-class=\"{ in: isOpen(), fade: animation() }\">\n" + |
---|
3465 | " <div class=\"tooltip-arrow\"></div>\n" + |
---|
3466 | " <div class=\"tooltip-inner\" bind-html-unsafe=\"content\"></div>\n" + |
---|
3467 | "</div>\n" + |
---|
3468 | ""); |
---|
3469 | }]); |
---|
3470 | |
---|
3471 | angular.module("template/tooltip/tooltip-popup.html", []).run(["$templateCache", function($templateCache) { |
---|
3472 | $templateCache.put("template/tooltip/tooltip-popup.html", |
---|
3473 | "<div class=\"tooltip {{placement}}\" ng-class=\"{ in: isOpen(), fade: animation() }\">\n" + |
---|
3474 | " <div class=\"tooltip-arrow\"></div>\n" + |
---|
3475 | " <div class=\"tooltip-inner\" ng-bind=\"content\"></div>\n" + |
---|
3476 | "</div>\n" + |
---|
3477 | ""); |
---|
3478 | }]); |
---|
3479 | |
---|
3480 | angular.module("template/popover/popover.html", []).run(["$templateCache", function($templateCache) { |
---|
3481 | $templateCache.put("template/popover/popover.html", |
---|
3482 | "<div class=\"popover {{placement}}\" ng-class=\"{ in: isOpen(), fade: animation() }\">\n" + |
---|
3483 | " <div class=\"arrow\"></div>\n" + |
---|
3484 | "\n" + |
---|
3485 | " <div class=\"popover-inner\">\n" + |
---|
3486 | " <h3 class=\"popover-title\" ng-bind=\"title\" ng-show=\"title\"></h3>\n" + |
---|
3487 | " <div class=\"popover-content\" ng-bind=\"content\"></div>\n" + |
---|
3488 | " </div>\n" + |
---|
3489 | "</div>\n" + |
---|
3490 | ""); |
---|
3491 | }]); |
---|
3492 | |
---|
3493 | angular.module("template/progressbar/bar.html", []).run(["$templateCache", function($templateCache) { |
---|
3494 | $templateCache.put("template/progressbar/bar.html", |
---|
3495 | "<div class=\"bar\" ng-class=\"type && 'bar-' + type\" ng-transclude></div>"); |
---|
3496 | }]); |
---|
3497 | |
---|
3498 | angular.module("template/progressbar/progress.html", []).run(["$templateCache", function($templateCache) { |
---|
3499 | $templateCache.put("template/progressbar/progress.html", |
---|
3500 | "<div class=\"progress\" ng-transclude></div>"); |
---|
3501 | }]); |
---|
3502 | |
---|
3503 | angular.module("template/progressbar/progressbar.html", []).run(["$templateCache", function($templateCache) { |
---|
3504 | $templateCache.put("template/progressbar/progressbar.html", |
---|
3505 | "<div class=\"progress\"><div class=\"bar\" ng-class=\"type && 'bar-' + type\" ng-transclude></div></div>"); |
---|
3506 | }]); |
---|
3507 | |
---|
3508 | angular.module("template/rating/rating.html", []).run(["$templateCache", function($templateCache) { |
---|
3509 | $templateCache.put("template/rating/rating.html", |
---|
3510 | "<span ng-mouseleave=\"reset()\">\n" + |
---|
3511 | " <i ng-repeat=\"r in range\" ng-mouseenter=\"enter($index + 1)\" ng-click=\"rate($index + 1)\" ng-class=\"$index < val && (r.stateOn || 'icon-star') || (r.stateOff || 'icon-star-empty')\"></i>\n" + |
---|
3512 | "</span>"); |
---|
3513 | }]); |
---|
3514 | |
---|
3515 | angular.module("template/tabs/tab.html", []).run(["$templateCache", function($templateCache) { |
---|
3516 | $templateCache.put("template/tabs/tab.html", |
---|
3517 | "<li ng-class=\"{active: active, disabled: disabled}\">\n" + |
---|
3518 | " <a ng-click=\"select()\" tab-heading-transclude>{{heading}}</a>\n" + |
---|
3519 | "</li>\n" + |
---|
3520 | ""); |
---|
3521 | }]); |
---|
3522 | |
---|
3523 | angular.module("template/tabs/tabset-titles.html", []).run(["$templateCache", function($templateCache) { |
---|
3524 | $templateCache.put("template/tabs/tabset-titles.html", |
---|
3525 | "<ul class=\"nav {{type && 'nav-' + type}}\" ng-class=\"{'nav-stacked': vertical}\">\n" + |
---|
3526 | "</ul>\n" + |
---|
3527 | ""); |
---|
3528 | }]); |
---|
3529 | |
---|
3530 | angular.module("template/tabs/tabset.html", []).run(["$templateCache", function($templateCache) { |
---|
3531 | $templateCache.put("template/tabs/tabset.html", |
---|
3532 | "\n" + |
---|
3533 | "<div class=\"tabbable\">\n" + |
---|
3534 | " <ul class=\"nav {{type && 'nav-' + type}}\" ng-class=\"{'nav-stacked': vertical}\" ng-transclude>\n" + |
---|
3535 | " </ul>\n" + |
---|
3536 | " <div class=\"tab-content\">\n" + |
---|
3537 | " <div class=\"tab-pane\" \n" + |
---|
3538 | " ng-repeat=\"tab in tabs\" \n" + |
---|
3539 | " ng-class=\"{active: tab.active}\"\n" + |
---|
3540 | " tab-content-transclude=\"tab\">\n" + |
---|
3541 | " </div>\n" + |
---|
3542 | " </div>\n" + |
---|
3543 | "</div>\n" + |
---|
3544 | ""); |
---|
3545 | }]); |
---|
3546 | |
---|
3547 | angular.module("template/timepicker/timepicker.html", []).run(["$templateCache", function($templateCache) { |
---|
3548 | $templateCache.put("template/timepicker/timepicker.html", |
---|
3549 | "<table class=\"form-inline\">\n" + |
---|
3550 | " <tr class=\"text-center\">\n" + |
---|
3551 | " <td><a ng-click=\"incrementHours()\" class=\"btn btn-link\"><i class=\"icon-chevron-up\"></i></a></td>\n" + |
---|
3552 | " <td> </td>\n" + |
---|
3553 | " <td><a ng-click=\"incrementMinutes()\" class=\"btn btn-link\"><i class=\"icon-chevron-up\"></i></a></td>\n" + |
---|
3554 | " <td ng-show=\"showMeridian\"></td>\n" + |
---|
3555 | " </tr>\n" + |
---|
3556 | " <tr>\n" + |
---|
3557 | " <td class=\"control-group\" ng-class=\"{'error': invalidHours}\"><input type=\"text\" ng-model=\"hours\" ng-change=\"updateHours()\" class=\"span1 text-center\" ng-mousewheel=\"incrementHours()\" ng-readonly=\"readonlyInput\" maxlength=\"2\"></td>\n" + |
---|
3558 | " <td>:</td>\n" + |
---|
3559 | " <td class=\"control-group\" ng-class=\"{'error': invalidMinutes}\"><input type=\"text\" ng-model=\"minutes\" ng-change=\"updateMinutes()\" class=\"span1 text-center\" ng-readonly=\"readonlyInput\" maxlength=\"2\"></td>\n" + |
---|
3560 | " <td ng-show=\"showMeridian\"><button type=\"button\" ng-click=\"toggleMeridian()\" class=\"btn text-center\">{{meridian}}</button></td>\n" + |
---|
3561 | " </tr>\n" + |
---|
3562 | " <tr class=\"text-center\">\n" + |
---|
3563 | " <td><a ng-click=\"decrementHours()\" class=\"btn btn-link\"><i class=\"icon-chevron-down\"></i></a></td>\n" + |
---|
3564 | " <td> </td>\n" + |
---|
3565 | " <td><a ng-click=\"decrementMinutes()\" class=\"btn btn-link\"><i class=\"icon-chevron-down\"></i></a></td>\n" + |
---|
3566 | " <td ng-show=\"showMeridian\"></td>\n" + |
---|
3567 | " </tr>\n" + |
---|
3568 | "</table>\n" + |
---|
3569 | ""); |
---|
3570 | }]); |
---|
3571 | |
---|
3572 | angular.module("template/typeahead/typeahead-match.html", []).run(["$templateCache", function($templateCache) { |
---|
3573 | $templateCache.put("template/typeahead/typeahead-match.html", |
---|
3574 | "<a tabindex=\"-1\" bind-html-unsafe=\"match.label | typeaheadHighlight:query\"></a>"); |
---|
3575 | }]); |
---|
3576 | |
---|
3577 | angular.module("template/typeahead/typeahead-popup.html", []).run(["$templateCache", function($templateCache) { |
---|
3578 | $templateCache.put("template/typeahead/typeahead-popup.html", |
---|
3579 | "<ul class=\"typeahead dropdown-menu\" ng-style=\"{display: isOpen()&&'block' || 'none', top: position.top+'px', left: position.left+'px'}\">\n" + |
---|
3580 | " <li ng-repeat=\"match in matches\" ng-class=\"{active: isActive($index) }\" ng-mouseenter=\"selectActive($index)\" ng-click=\"selectMatch($index)\">\n" + |
---|
3581 | " <div typeahead-match index=\"$index\" match=\"match\" query=\"query\" template-url=\"templateUrl\"></div>\n" + |
---|
3582 | " </li>\n" + |
---|
3583 | "</ul>"); |
---|
3584 | }]); |
---|