/** * AngularUI - The companion suite for AngularJS * @version v0.3.2 - 2012-12-04 * @link http://angular-ui.github.com * @license MIT License, http://www.opensource.org/licenses/MIT */ angular.module('ui.config', []).value('ui.config', {}); angular.module('ui.filters', ['ui.config']); angular.module('ui.directives', ['ui.config']); angular.module('ui', ['ui.filters', 'ui.directives', 'ui.config']); /* jQuery UI Sortable plugin wrapper @param [ui-sortable] {object} Options to pass to $.fn.sortable() merged onto ui.config */ angular.module('ui.directives').directive('uiSortable', [ 'ui.config', function(uiConfig) { var options; options = {}; if (uiConfig.sortable != null) { angular.extend(options, uiConfig.sortable); } return { require: '?ngModel', link: function(scope, element, attrs, ngModel) { var onStart, onUpdate, opts, _start, _update; opts = angular.extend({}, options, scope.$eval(attrs.uiOptions)); if (ngModel != null) { onStart = function(e, ui) { return ui.item.data('ui-sortable-start', ui.item.index()); }; onUpdate = function(e, ui) { var end, start; start = ui.item.data('ui-sortable-start'); end = ui.item.index(); ngModel.$modelValue.splice(end, 0, ngModel.$modelValue.splice(start, 1)[0]); return scope.$apply(); }; _start = opts.start; opts.start = function(e, ui) { onStart(e, ui); if (typeof _start === "function") { _start(e, ui); } return scope.$apply(); }; _update = opts.update; opts.update = function(e, ui) { onUpdate(e, ui); if (typeof _update === "function") { _update(e, ui); } return scope.$apply(); }; } return element.sortable(opts); } }; } ]); /** * General-purpose jQuery wrapper. Simply pass the plugin name as the expression. * * It is possible to specify a default set of parameters for each jQuery plugin. * Under the jq key, namespace each plugin by that which will be passed to ui-jq. * Unfortunately, at this time you can only pre-define the first parameter. * @example { jq : { datepicker : { showOn:'click' } } } * * @param ui-jq {string} The $elm.[pluginName]() to call. * @param [ui-options] {mixed} Expression to be evaluated and passed as options to the function * Multiple parameters can be separated by commas * Set {ngChange:false} to disable passthrough support for change events ( since angular watches 'input' events, not 'change' events ) * * @example */ angular.module('ui.directives').directive('uiJq', ['ui.config', function (uiConfig) { return { restrict: 'A', compile: function (tElm, tAttrs) { if (!angular.isFunction(tElm[tAttrs.uiJq])) { throw new Error('ui-jq: The "' + tAttrs.uiJq + '" function does not exist'); } var options = uiConfig.jq && uiConfig.jq[tAttrs.uiJq]; return function (scope, elm, attrs) { var linkOptions = [], ngChange = 'change'; if (attrs.uiOptions) { linkOptions = scope.$eval('[' + attrs.uiOptions + ']'); if (angular.isObject(options) && angular.isObject(linkOptions[0])) { linkOptions[0] = angular.extend(options, linkOptions[0]); } } else if (options) { linkOptions = [options]; } if (attrs.ngModel && elm.is('select,input,textarea')) { if (linkOptions && angular.isObject(linkOptions[0]) && linkOptions[0].ngChange !== undefined) { ngChange = linkOptions[0].ngChange; } if (ngChange) { elm.on(ngChange, function () { elm.trigger('input'); }); } } elm[attrs.uiJq].apply(elm, linkOptions); }; } }; }]); /** * General-purpose Event binding. Bind any event not natively supported by Angular * Pass an object with keynames for events to ui-event * Allows $event object and $params object to be passed * * @example * @example * * @param ui-event {string|object literal} The event to bind to as a string or a hash of events with their callbacks */ angular.module('ui.directives').directive('uiEvent', ['$parse', function ($parse) { return function (scope, elm, attrs) { var events = scope.$eval(attrs.uiEvent); angular.forEach(events, function (uiEvent, eventName) { var fn = $parse(uiEvent); elm.bind(eventName, function (evt) { var params = Array.prototype.slice.call(arguments); //Take out first paramater (event object); params = params.splice(1); scope.$apply(function () { fn(scope, {$event: evt, $params: params}); }); }); }); }; }]); /* Attaches jquery-ui input mask onto input element */ angular.module('ui.directives').directive('uiMask', [ function () { return { require:'ngModel', link:function ($scope, element, attrs, controller) { /* We override the render method to run the jQuery mask plugin */ controller.$render = function () { var value = controller.$viewValue || ''; element.val(value); element.mask($scope.$eval(attrs.uiMask)); }; /* Add a parser that extracts the masked value into the model but only if the mask is valid */ controller.$parsers.push(function (value) { //the second check (or) is only needed due to the fact that element.isMaskValid() will keep returning undefined //until there was at least one key event var isValid = element.isMaskValid() || angular.isUndefined(element.isMaskValid()) && element.val().length>0; controller.$setValidity('mask', isValid); return isValid ? value : undefined; }); /* When keyup, update the view value */ element.bind('keyup', function () { $scope.$apply(function () { controller.$setViewValue(element.mask()); }); }); } }; } ]); angular.module('ui.directives') .directive('uiModal', ['$timeout', function($timeout) { return { restrict: 'EAC', require: 'ngModel', link: function(scope, elm, attrs, model) { //helper so you don't have to type class="modal hide" elm.addClass('modal hide'); elm.on( 'shown', function() { elm.find( "[autofocus]" ).focus(); }); scope.$watch(attrs.ngModel, function(value) { elm.modal(value && 'show' || 'hide'); }); //If bootstrap animations are enabled, listen to 'shown' and 'hidden' events elm.on(jQuery.support.transition && 'shown' || 'show', function() { $timeout(function() { model.$setViewValue(true); }); }); elm.on(jQuery.support.transition && 'hidden' || 'hide', function() { $timeout(function() { model.$setViewValue(false); }); }); } }; }]); /** * Add a clear button to form inputs to reset their value */ angular.module('ui.directives').directive('uiReset', ['ui.config', function (uiConfig) { var resetValue = null; if (uiConfig.reset !== undefined) resetValue = uiConfig.reset; return { require: 'ngModel', link: function (scope, elm, attrs, ctrl) { var aElement; aElement = angular.element(''); elm.wrap('').after(aElement); aElement.bind('click', function (e) { e.preventDefault(); scope.$apply(function () { if (attrs.uiReset) ctrl.$setViewValue(scope.$eval(attrs.uiReset)); else ctrl.$setViewValue(resetValue); ctrl.$render(); }); }); } }; }]); (function () { var app = angular.module('ui.directives'); //Setup map events from a google map object to trigger on a given element too, //then we just use ui-event to catch events from an element function bindMapEvents(scope, eventsStr, googleObject, element) { angular.forEach(eventsStr.split(' '), function (eventName) { //Prefix all googlemap events with 'map-', so eg 'click' //for the googlemap doesn't interfere with a normal 'click' event var $event = { type: 'map-' + eventName }; google.maps.event.addListener(googleObject, eventName, function (evt) { element.trigger(angular.extend({}, $event, evt)); //We create an $apply if it isn't happening. we need better support for this //We don't want to use timeout because tons of these events fire at once, //and we only need one $apply if (!scope.$$phase) scope.$apply(); }); }); } app.directive('uiMap', ['ui.config', '$parse', function (uiConfig, $parse) { var mapEvents = 'bounds_changed center_changed click dblclick drag dragend ' + 'dragstart heading_changed idle maptypeid_changed mousemove mouseout ' + 'mouseover projection_changed resize rightclick tilesloaded tilt_changed ' + 'zoom_changed'; var options = uiConfig.map || {}; return { restrict: 'A', //doesn't work as E for unknown reason link: function (scope, elm, attrs) { var opts = angular.extend({}, options, scope.$eval(attrs.uiOptions)); var map = new google.maps.Map(elm[0], opts); var model = $parse(attrs.uiMap); //Set scope variable for the map model.assign(scope, map); bindMapEvents(scope, mapEvents, map, elm); } }; }]); app.directive('uiMapInfoWindow', ['ui.config', '$parse', '$compile', function (uiConfig, $parse, $compile) { var infoWindowEvents = 'closeclick content_change domready ' + 'position_changed zindex_changed'; var options = uiConfig.mapInfoWindow || {}; return { link: function (scope, elm, attrs) { var opts = angular.extend({}, options, scope.$eval(attrs.uiOptions)); opts.content = elm[0]; var model = $parse(attrs.uiMapInfoWindow); var infoWindow = model(scope); if (!infoWindow) { infoWindow = new google.maps.InfoWindow(opts); model.assign(scope, infoWindow); } bindMapEvents(scope, infoWindowEvents, infoWindow, elm); /* The info window's contents dont' need to be on the dom anymore, google maps has them stored. So we just replace the infowindow element with an empty div. (we don't just straight remove it from the dom because straight removing things from the dom can mess up angular) */ elm.replaceWith('
'); //Decorate infoWindow.open to $compile contents before opening var _open = infoWindow.open; infoWindow.open = function open(a1, a2, a3, a4, a5, a6) { $compile(elm.contents())(scope); _open.call(infoWindow, a1, a2, a3, a4, a5, a6); }; } }; }]); /* * Map overlay directives all work the same. Take map marker for example * will $watch 'myMarker' and each time it changes, * it will hook up myMarker's events to the directive dom element. Then * ui-event will be able to catch all of myMarker's events. Super simple. */ function mapOverlayDirective(directiveName, events) { app.directive(directiveName, [function () { return { restrict: 'A', link: function (scope, elm, attrs) { scope.$watch(attrs[directiveName], function (newObject) { bindMapEvents(scope, events, newObject, elm); }); } }; }]); } mapOverlayDirective('uiMapMarker', 'animation_changed click clickable_changed cursor_changed ' + 'dblclick drag dragend draggable_changed dragstart flat_changed icon_changed ' + 'mousedown mouseout mouseover mouseup position_changed rightclick ' + 'shadow_changed shape_changed title_changed visible_changed zindex_changed'); mapOverlayDirective('uiMapPolyline', 'click dblclick mousedown mousemove mouseout mouseover mouseup rightclick'); mapOverlayDirective('uiMapPolygon', 'click dblclick mousedown mousemove mouseout mouseover mouseup rightclick'); mapOverlayDirective('uiMapRectangle', 'bounds_changed click dblclick mousedown mousemove mouseout mouseover ' + 'mouseup rightclick'); mapOverlayDirective('uiMapCircle', 'center_changed click dblclick mousedown mousemove ' + 'mouseout mouseover mouseup radius_changed rightclick'); mapOverlayDirective('uiMapGroundOverlay', 'click dblclick'); })(); angular.module('ui.directives').factory('keypressHelper', ['$parse', function keypress($parse){ var keysByCode = { 8: 'backspace', 9: 'tab', 13: 'enter', 27: 'esc', 32: 'space', 33: 'pageup', 34: 'pagedown', 35: 'end', 36: 'home', 37: 'left', 38: 'up', 39: 'right', 40: 'down', 45: 'insert', 46: 'delete' }; var capitaliseFirstLetter = function (string) { return string.charAt(0).toUpperCase() + string.slice(1); }; return function(mode, scope, elm, attrs) { var params, combinations = []; params = scope.$eval(attrs['ui'+capitaliseFirstLetter(mode)]); // Prepare combinations for simple checking angular.forEach(params, function (v, k) { var combination, expression; expression = $parse(v); angular.forEach(k.split(' '), function(variation) { combination = { expression: expression, keys: {} }; angular.forEach(variation.split('-'), function (value) { combination.keys[value] = true; }); combinations.push(combination); }); }); // Check only matching of pressed keys one of the conditions elm.bind(mode, function (event) { // No need to do that inside the cycle var altPressed = event.metaKey || event.altKey; var ctrlPressed = event.ctrlKey; var shiftPressed = event.shiftKey; var keyCode = event.keyCode; // normalize keycodes if (mode === 'keypress' && !shiftPressed && keyCode >= 97 && keyCode <= 122) { keyCode = keyCode - 32; } // Iterate over prepared combinations angular.forEach(combinations, function (combination) { var mainKeyPressed = (combination.keys[keysByCode[event.keyCode]] || combination.keys[event.keyCode.toString()]) || false; var altRequired = combination.keys.alt || false; var ctrlRequired = combination.keys.ctrl || false; var shiftRequired = combination.keys.shift || false; if ( mainKeyPressed && ( altRequired == altPressed ) && ( ctrlRequired == ctrlPressed ) && ( shiftRequired == shiftPressed ) ) { // Run the function scope.$apply(function () { combination.expression(scope, { '$event': event }); }); } }); }); }; }]); /** * Bind one or more handlers to particular keys or their combination * @param hash {mixed} keyBindings Can be an object or string where keybinding expression of keys or keys combinations and AngularJS Exspressions are set. Object syntax: "{ keys1: expression1 [, keys2: expression2 [ , ... ]]}". String syntax: ""expression1 on keys1 [ and expression2 on keys2 [ and ... ]]"". Expression is an AngularJS Expression, and key(s) are dash-separated combinations of keys and modifiers (one or many, if any. Order does not matter). Supported modifiers are 'ctrl', 'shift', 'alt' and key can be used either via its keyCode (13 for Return) or name. Named keys are 'backspace', 'tab', 'enter', 'esc', 'space', 'pageup', 'pagedown', 'end', 'home', 'left', 'up', 'right', 'down', 'insert', 'delete'. * @example **/ angular.module('ui.directives').directive('uiKeydown', ['keypressHelper', function(keypressHelper){ return { link: function (scope, elm, attrs) { keypressHelper('keydown', scope, elm, attrs); } }; }]); angular.module('ui.directives').directive('uiKeypress', ['keypressHelper', function(keypressHelper){ return { link: function (scope, elm, attrs) { keypressHelper('keypress', scope, elm, attrs); } }; }]); angular.module('ui.directives').directive('uiKeyup', ['keypressHelper', function(keypressHelper){ return { link: function (scope, elm, attrs) { keypressHelper('keyup', scope, elm, attrs); } }; }]); /** * General-purpose validator for ngModel. * angular.js comes with several built-in validation mechanism for input fields (ngRequired, ngPattern etc.) but using * an arbitrary validation function requires creation of a custom formatters and / or parsers. * The ui-validate directive makes it easy to use any function(s) defined in scope as a validator function(s). * A validator function will trigger validation on both model and input changes. * * @example * @example * * @param ui-validate {string|object literal} If strings is passed it should be a scope's function to be used as a validator. * If an object literal is passed a key denotes a validation error key while a value should be a validator function. * In both cases validator function should take a value to validate as its argument and should return true/false indicating a validation result. */ angular.module('ui.directives').directive('uiValidate', function () { return { restrict: 'A', require: 'ngModel', link: function (scope, elm, attrs, ctrl) { var validateFn, validateExpr = attrs.uiValidate; validateExpr = scope.$eval(validateExpr); if (!validateExpr) { return; } if (angular.isFunction(validateExpr)) { validateExpr = { validator: validateExpr }; } angular.forEach(validateExpr, function (validatorFn, key) { validateFn = function (valueToValidate) { if (validatorFn(valueToValidate)) { ctrl.$setValidity(key, true); return valueToValidate; } else { ctrl.$setValidity(key, false); return undefined; } }; ctrl.$formatters.push(validateFn); ctrl.$parsers.push(validateFn); }); } }; }); /** * Animates the injection of new DOM elements by simply creating the DOM with a class and then immediately removing it * Animations must be done using CSS3 transitions, but provide excellent flexibility * * @todo Add proper support for animating out * @param [options] {mixed} Can be an object with multiple options, or a string with the animation class * class {string} the CSS class(es) to use. For example, 'ui-hide' might be an excellent alternative class. * @example
  • {{item}}
  • */ angular.module('ui.directives').directive('uiAnimate', ['ui.config', '$timeout', function (uiConfig, $timeout) { var options = {}; if (angular.isString(uiConfig.animate)) { options['class'] = uiConfig.animate; } else if (uiConfig.animate) { options = uiConfig.animate; } return { restrict: 'A', // supports using directive as element, attribute and class link: function ($scope, element, attrs) { var opts = {}; if (attrs.uiAnimate) { opts = $scope.$eval(attrs.uiAnimate); if (angular.isString(opts)) { opts = {'class': opts}; } } opts = angular.extend({'class': 'ui-animate'}, options, opts); element.addClass(opts['class']); $timeout(function () { element.removeClass(opts['class']); }, 20, false); } }; }]); /** * Enhanced Select2 Dropmenus * * @AJAX Mode - When in this mode, your value will be an object (or array of objects) of the data used by Select2 * This change is so that you do not have to do an additional query yourself on top of Select2's own query * @params [options] {object} The configuration options passed to $.fn.select2(). Refer to the documentation */ angular.module('ui.directives').directive('uiSelect2', ['ui.config', '$http', function (uiConfig, $http) { var options = {}; if (uiConfig.select2) { angular.extend(options, uiConfig.select2); } return { require: '?ngModel', compile: function (tElm, tAttrs) { var watch, repeatOption, repeatAttr, isSelect = tElm.is('select'), isMultiple = (tAttrs.multiple !== undefined); // Enable watching of the options dataset if in use if (tElm.is('select')) { repeatOption = tElm.find('option[ng-repeat], option[data-ng-repeat]'); if (repeatOption.length) { repeatAttr = repeatOption.attr('ng-repeat') || repeatOption.attr('data-ng-repeat'); watch = jQuery.trim(repeatAttr.split('|')[0]).split(' ').pop(); } } return function (scope, elm, attrs, controller) { // instance-specific options var opts = angular.extend({}, options, scope.$eval(attrs.uiSelect2)); if (isSelect) { // Use