arnaucube
arnaucube/commonroutesAppPublic Self-hosted repository
commonroutesApp/www/lib/angular-ui-router/src/stateDirectives.js
www/lib/angular-ui-router/src/stateDirectives.jsRaw
  1function parseStateRef(ref, current) {
  2  var preparsed = ref.match(/^\s*({[^}]*})\s*$/), parsed;
  3  if (preparsed) ref = current + '(' + preparsed[1] + ')';
  4  parsed = ref.replace(/\n/g, " ").match(/^([^(]+?)\s*(\((.*)\))?$/);
  5  if (!parsed || parsed.length !== 4) throw new Error("Invalid state ref '" + ref + "'");
  6  return { state: parsed[1], paramExpr: parsed[3] || null };
  7}
  8
  9function stateContext(el) {
 10  var stateData = el.parent().inheritedData('$uiView');
 11
 12  if (stateData && stateData.state && stateData.state.name) {
 13    return stateData.state;
 14  }
 15}
 16
 17/**
 18 * @ngdoc directive
 19 * @name ui.router.state.directive:ui-sref
 20 *
 21 * @requires ui.router.state.$state
 22 * @requires $timeout
 23 *
 24 * @restrict A
 25 *
 26 * @description
 27 * A directive that binds a link (`<a>` tag) to a state. If the state has an associated 
 28 * URL, the directive will automatically generate & update the `href` attribute via 
 29 * the {@link ui.router.state.$state#methods_href $state.href()} method. Clicking 
 30 * the link will trigger a state transition with optional parameters. 
 31 *
 32 * Also middle-clicking, right-clicking, and ctrl-clicking on the link will be 
 33 * handled natively by the browser.
 34 *
 35 * You can also use relative state paths within ui-sref, just like the relative 
 36 * paths passed to `$state.go()`. You just need to be aware that the path is relative
 37 * to the state that the link lives in, in other words the state that loaded the 
 38 * template containing the link.
 39 *
 40 * You can specify options to pass to {@link ui.router.state.$state#go $state.go()}
 41 * using the `ui-sref-opts` attribute. Options are restricted to `location`, `inherit`,
 42 * and `reload`.
 43 *
 44 * @example
 45 * Here's an example of how you'd use ui-sref and how it would compile. If you have the 
 46 * following template:
 47 * <pre>
 48 * <a ui-sref="home">Home</a> | <a ui-sref="about">About</a> | <a ui-sref="{page: 2}">Next page</a>
 49 * 
 50 * <ul>
 51 *     <li ng-repeat="contact in contacts">
 52 *         <a ui-sref="contacts.detail({ id: contact.id })">{{ contact.name }}</a>
 53 *     </li>
 54 * </ul>
 55 * </pre>
 56 * 
 57 * Then the compiled html would be (assuming Html5Mode is off and current state is contacts):
 58 * <pre>
 59 * <a href="#/home" ui-sref="home">Home</a> | <a href="#/about" ui-sref="about">About</a> | <a href="#/contacts?page=2" ui-sref="{page: 2}">Next page</a>
 60 * 
 61 * <ul>
 62 *     <li ng-repeat="contact in contacts">
 63 *         <a href="#/contacts/1" ui-sref="contacts.detail({ id: contact.id })">Joe</a>
 64 *     </li>
 65 *     <li ng-repeat="contact in contacts">
 66 *         <a href="#/contacts/2" ui-sref="contacts.detail({ id: contact.id })">Alice</a>
 67 *     </li>
 68 *     <li ng-repeat="contact in contacts">
 69 *         <a href="#/contacts/3" ui-sref="contacts.detail({ id: contact.id })">Bob</a>
 70 *     </li>
 71 * </ul>
 72 *
 73 * <a ui-sref="home" ui-sref-opts="{reload: true}">Home</a>
 74 * </pre>
 75 *
 76 * @param {string} ui-sref 'stateName' can be any valid absolute or relative state
 77 * @param {Object} ui-sref-opts options to pass to {@link ui.router.state.$state#go $state.go()}
 78 */
 79$StateRefDirective.$inject = ['$state', '$timeout'];
 80function $StateRefDirective($state, $timeout) {
 81  var allowedOptions = ['location', 'inherit', 'reload'];
 82
 83  return {
 84    restrict: 'A',
 85    require: ['?^uiSrefActive', '?^uiSrefActiveEq'],
 86    link: function(scope, element, attrs, uiSrefActive) {
 87      var ref = parseStateRef(attrs.uiSref, $state.current.name);
 88      var params = null, url = null, base = stateContext(element) || $state.$current;
 89      var newHref = null, isAnchor = element.prop("tagName") === "A";
 90      var isForm = element[0].nodeName === "FORM";
 91      var attr = isForm ? "action" : "href", nav = true;
 92
 93      var options = { relative: base, inherit: true };
 94      var optionsOverride = scope.$eval(attrs.uiSrefOpts) || {};
 95
 96      angular.forEach(allowedOptions, function(option) {
 97        if (option in optionsOverride) {
 98          options[option] = optionsOverride[option];
 99        }
100      });
101
102      var update = function(newVal) {
103        if (newVal) params = angular.copy(newVal);
104        if (!nav) return;
105
106        newHref = $state.href(ref.state, params, options);
107
108        var activeDirective = uiSrefActive[1] || uiSrefActive[0];
109        if (activeDirective) {
110          activeDirective.$$setStateInfo(ref.state, params);
111        }
112        if (newHref === null) {
113          nav = false;
114          return false;
115        }
116        attrs.$set(attr, newHref);
117      };
118
119      if (ref.paramExpr) {
120        scope.$watch(ref.paramExpr, function(newVal, oldVal) {
121          if (newVal !== params) update(newVal);
122        }, true);
123        params = angular.copy(scope.$eval(ref.paramExpr));
124      }
125      update();
126
127      if (isForm) return;
128
129      element.bind("click", function(e) {
130        var button = e.which || e.button;
131        if ( !(button > 1 || e.ctrlKey || e.metaKey || e.shiftKey || element.attr('target')) ) {
132          // HACK: This is to allow ng-clicks to be processed before the transition is initiated:
133          var transition = $timeout(function() {
134            $state.go(ref.state, params, options);
135          });
136          e.preventDefault();
137
138          // if the state has no URL, ignore one preventDefault from the <a> directive.
139          var ignorePreventDefaultCount = isAnchor && !newHref ? 1: 0;
140          e.preventDefault = function() {
141            if (ignorePreventDefaultCount-- <= 0)
142              $timeout.cancel(transition);
143          };
144        }
145      });
146    }
147  };
148}
149
150/**
151 * @ngdoc directive
152 * @name ui.router.state.directive:ui-sref-active
153 *
154 * @requires ui.router.state.$state
155 * @requires ui.router.state.$stateParams
156 * @requires $interpolate
157 *
158 * @restrict A
159 *
160 * @description
161 * A directive working alongside ui-sref to add classes to an element when the
162 * related ui-sref directive's state is active, and removing them when it is inactive.
163 * The primary use-case is to simplify the special appearance of navigation menus
164 * relying on `ui-sref`, by having the "active" state's menu button appear different,
165 * distinguishing it from the inactive menu items.
166 *
167 * ui-sref-active can live on the same element as ui-sref or on a parent element. The first
168 * ui-sref-active found at the same level or above the ui-sref will be used.
169 *
170 * Will activate when the ui-sref's target state or any child state is active. If you
171 * need to activate only when the ui-sref target state is active and *not* any of
172 * it's children, then you will use
173 * {@link ui.router.state.directive:ui-sref-active-eq ui-sref-active-eq}
174 *
175 * @example
176 * Given the following template:
177 * <pre>
178 * <ul>
179 *   <li ui-sref-active="active" class="item">
180 *     <a href ui-sref="app.user({user: 'bilbobaggins'})">@bilbobaggins</a>
181 *   </li>
182 * </ul>
183 * </pre>
184 *
185 *
186 * When the app state is "app.user" (or any children states), and contains the state parameter "user" with value "bilbobaggins",
187 * the resulting HTML will appear as (note the 'active' class):
188 * <pre>
189 * <ul>
190 *   <li ui-sref-active="active" class="item active">
191 *     <a ui-sref="app.user({user: 'bilbobaggins'})" href="/users/bilbobaggins">@bilbobaggins</a>
192 *   </li>
193 * </ul>
194 * </pre>
195 *
196 * The class name is interpolated **once** during the directives link time (any further changes to the
197 * interpolated value are ignored).
198 *
199 * Multiple classes may be specified in a space-separated format:
200 * <pre>
201 * <ul>
202 *   <li ui-sref-active='class1 class2 class3'>
203 *     <a ui-sref="app.user">link</a>
204 *   </li>
205 * </ul>
206 * </pre>
207 */
208
209/**
210 * @ngdoc directive
211 * @name ui.router.state.directive:ui-sref-active-eq
212 *
213 * @requires ui.router.state.$state
214 * @requires ui.router.state.$stateParams
215 * @requires $interpolate
216 *
217 * @restrict A
218 *
219 * @description
220 * The same as {@link ui.router.state.directive:ui-sref-active ui-sref-active} but will only activate
221 * when the exact target state used in the `ui-sref` is active; no child states.
222 *
223 */
224$StateRefActiveDirective.$inject = ['$state', '$stateParams', '$interpolate'];
225function $StateRefActiveDirective($state, $stateParams, $interpolate) {
226  return  {
227    restrict: "A",
228    controller: ['$scope', '$element', '$attrs', function ($scope, $element, $attrs) {
229      var state, params, activeClass;
230
231      // There probably isn't much point in $observing this
232      // uiSrefActive and uiSrefActiveEq share the same directive object with some
233      // slight difference in logic routing
234      activeClass = $interpolate($attrs.uiSrefActiveEq || $attrs.uiSrefActive || '', false)($scope);
235
236      // Allow uiSref to communicate with uiSrefActive[Equals]
237      this.$$setStateInfo = function (newState, newParams) {
238        state = $state.get(newState, stateContext($element));
239        params = newParams;
240        update();
241      };
242
243      $scope.$on('$stateChangeSuccess', update);
244
245      // Update route state
246      function update() {
247        if (isMatch()) {
248          $element.addClass(activeClass);
249        } else {
250          $element.removeClass(activeClass);
251        }
252      }
253
254      function isMatch() {
255        if (typeof $attrs.uiSrefActiveEq !== 'undefined') {
256          return state && $state.is(state.name, params);
257        } else {
258          return state && $state.includes(state.name, params);
259        }
260      }
261    }]
262  };
263}
264
265angular.module('ui.router.state')
266  .directive('uiSref', $StateRefDirective)
267  .directive('uiSrefActive', $StateRefActiveDirective)
268  .directive('uiSrefActiveEq', $StateRefActiveDirective);