| 1 | 
           efrain | 
           1 | 
           YUI.add('app-transitions', function (Y, NAME) {
  | 
        
        
            | 
            | 
           2 | 
              | 
        
        
            | 
            | 
           3 | 
           /**
  | 
        
        
            | 
            | 
           4 | 
           `Y.App` extension that provides view transitions in browsers which support
  | 
        
        
            | 
            | 
           5 | 
           native CSS3 transitions.
  | 
        
        
            | 
            | 
           6 | 
              | 
        
        
            | 
            | 
           7 | 
           @module app
  | 
        
        
            | 
            | 
           8 | 
           @submodule app-transitions
  | 
        
        
            | 
            | 
           9 | 
           @since 3.5.0
  | 
        
        
            | 
            | 
           10 | 
           **/
  | 
        
        
            | 
            | 
           11 | 
              | 
        
        
            | 
            | 
           12 | 
           /**
  | 
        
        
            | 
            | 
           13 | 
           `Y.App` extension that provides view transitions in browsers which support
  | 
        
        
            | 
            | 
           14 | 
           native CSS3 transitions.
  | 
        
        
            | 
            | 
           15 | 
              | 
        
        
            | 
            | 
           16 | 
           View transitions provide an nice way to move from one "page" to the next that is
  | 
        
        
            | 
            | 
           17 | 
           both pleasant to the user and helps to communicate a hierarchy between sections
  | 
        
        
            | 
            | 
           18 | 
           of an application.
  | 
        
        
            | 
            | 
           19 | 
              | 
        
        
            | 
            | 
           20 | 
           When the `"app-transitions"` module is used, it will automatically mix itself
  | 
        
        
            | 
            | 
           21 | 
           into `Y.App` and transition between `activeView` changes using the following
  | 
        
        
            | 
            | 
           22 | 
           effects:
  | 
        
        
            | 
            | 
           23 | 
              | 
        
        
            | 
            | 
           24 | 
             - **`fade`**: Cross-fades between the old an new active views.
  | 
        
        
            | 
            | 
           25 | 
              | 
        
        
            | 
            | 
           26 | 
             - **`slideLeft`**: The old and new active views are positioned next to each
  | 
        
        
            | 
            | 
           27 | 
               other and both slide to the left.
  | 
        
        
            | 
            | 
           28 | 
              | 
        
        
            | 
            | 
           29 | 
             - **`slideRight`**: The old and new active views are positioned next to each
  | 
        
        
            | 
            | 
           30 | 
               other and both slide to the right.
  | 
        
        
            | 
            | 
           31 | 
              | 
        
        
            | 
            | 
           32 | 
           **Note:** Transitions are an opt-in feature and are enabled via an app's
  | 
        
        
            | 
            | 
           33 | 
           `transitions` attribute.
  | 
        
        
            | 
            | 
           34 | 
              | 
        
        
            | 
            | 
           35 | 
           @class App.Transitions
  | 
        
        
            | 
            | 
           36 | 
           @uses App.TransitionsNative
  | 
        
        
            | 
            | 
           37 | 
           @extensionfor App
  | 
        
        
            | 
            | 
           38 | 
           @since 3.5.0
  | 
        
        
            | 
            | 
           39 | 
           **/
  | 
        
        
            | 
            | 
           40 | 
           function AppTransitions() {}
  | 
        
        
            | 
            | 
           41 | 
              | 
        
        
            | 
            | 
           42 | 
           AppTransitions.ATTRS = {
  | 
        
        
            | 
            | 
           43 | 
               /**
  | 
        
        
            | 
            | 
           44 | 
               Whether or not this application should use view transitions, and if so then
  | 
        
        
            | 
            | 
           45 | 
               which ones or `true` for the defaults which are specified by the
  | 
        
        
            | 
            | 
           46 | 
               `transitions` prototype property.
  | 
        
        
            | 
            | 
           47 | 
              | 
        
        
            | 
            | 
           48 | 
               **Note:** Transitions are an opt-in feature and will only be used in
  | 
        
        
            | 
            | 
           49 | 
               browsers which support native CSS3 transitions.
  | 
        
        
            | 
            | 
           50 | 
              | 
        
        
            | 
            | 
           51 | 
               @attribute transitions
  | 
        
        
            | 
            | 
           52 | 
               @type Boolean|Object
  | 
        
        
            | 
            | 
           53 | 
               @default false
  | 
        
        
            | 
            | 
           54 | 
               @since 3.5.0
  | 
        
        
            | 
            | 
           55 | 
               **/
  | 
        
        
            | 
            | 
           56 | 
               transitions: {
  | 
        
        
            | 
            | 
           57 | 
                   setter: '_setTransitions',
  | 
        
        
            | 
            | 
           58 | 
                   value : false
  | 
        
        
            | 
            | 
           59 | 
               }
  | 
        
        
            | 
            | 
           60 | 
           };
  | 
        
        
            | 
            | 
           61 | 
              | 
        
        
            | 
            | 
           62 | 
           /**
  | 
        
        
            | 
            | 
           63 | 
           Collect of transitions -> fx.
  | 
        
        
            | 
            | 
           64 | 
              | 
        
        
            | 
            | 
           65 | 
           A transition (e.g. "fade") is a simple name given to a configuration of fx to
  | 
        
        
            | 
            | 
           66 | 
           apply, consisting of `viewIn` and `viewOut` properties who's values are names of
  | 
        
        
            | 
            | 
           67 | 
           fx registered on `Y.Transition.fx`.
  | 
        
        
            | 
            | 
           68 | 
              | 
        
        
            | 
            | 
           69 | 
           By default transitions: `fade`, `slideLeft`, and `slideRight` have fx defined.
  | 
        
        
            | 
            | 
           70 | 
              | 
        
        
            | 
            | 
           71 | 
           @property FX
  | 
        
        
            | 
            | 
           72 | 
           @type Object
  | 
        
        
            | 
            | 
           73 | 
           @static
  | 
        
        
            | 
            | 
           74 | 
           @since 3.5.0
  | 
        
        
            | 
            | 
           75 | 
           **/
  | 
        
        
            | 
            | 
           76 | 
           AppTransitions.FX = {
  | 
        
        
            | 
            | 
           77 | 
               fade: {
  | 
        
        
            | 
            | 
           78 | 
                   viewIn : 'app:fadeIn',
  | 
        
        
            | 
            | 
           79 | 
                   viewOut: 'app:fadeOut'
  | 
        
        
            | 
            | 
           80 | 
               },
  | 
        
        
            | 
            | 
           81 | 
              | 
        
        
            | 
            | 
           82 | 
               slideLeft: {
  | 
        
        
            | 
            | 
           83 | 
                   viewIn : 'app:slideLeft',
  | 
        
        
            | 
            | 
           84 | 
                   viewOut: 'app:slideLeft'
  | 
        
        
            | 
            | 
           85 | 
               },
  | 
        
        
            | 
            | 
           86 | 
              | 
        
        
            | 
            | 
           87 | 
               slideRight: {
  | 
        
        
            | 
            | 
           88 | 
                   viewIn : 'app:slideRight',
  | 
        
        
            | 
            | 
           89 | 
                   viewOut: 'app:slideRight'
  | 
        
        
            | 
            | 
           90 | 
               }
  | 
        
        
            | 
            | 
           91 | 
           };
  | 
        
        
            | 
            | 
           92 | 
              | 
        
        
            | 
            | 
           93 | 
           AppTransitions.prototype = {
  | 
        
        
            | 
            | 
           94 | 
               // -- Public Properties ----------------------------------------------------
  | 
        
        
            | 
            | 
           95 | 
              | 
        
        
            | 
            | 
           96 | 
               /**
  | 
        
        
            | 
            | 
           97 | 
               Default transitions to use when the `activeView` changes.
  | 
        
        
            | 
            | 
           98 | 
              | 
        
        
            | 
            | 
           99 | 
               The following are types of changes for which transitions can be defined that
  | 
        
        
            | 
            | 
           100 | 
               correspond to the relationship between the new and previous `activeView`:
  | 
        
        
            | 
            | 
           101 | 
              | 
        
        
            | 
            | 
           102 | 
                 * `navigate`: The default transition to use when changing the `activeView`
  | 
        
        
            | 
            | 
           103 | 
                   of the application.
  | 
        
        
            | 
            | 
           104 | 
              | 
        
        
            | 
            | 
           105 | 
                 * `toChild`: The transition to use when the new `activeView` is configured
  | 
        
        
            | 
            | 
           106 | 
                   as a child of the previously active view via its `parent` property as
  | 
        
        
            | 
            | 
           107 | 
                   defined in this app's `views`.
  | 
        
        
            | 
            | 
           108 | 
              | 
        
        
            | 
            | 
           109 | 
                 * `toParent`: The transition to use when the new `activeView` is
  | 
        
        
            | 
            | 
           110 | 
                   configured as the `parent` of the previously active view as defined in
  | 
        
        
            | 
            | 
           111 | 
                   this app's `views`.
  | 
        
        
            | 
            | 
           112 | 
              | 
        
        
            | 
            | 
           113 | 
               **Note:** Transitions are an opt-in feature and will only be used in
  | 
        
        
            | 
            | 
           114 | 
               browsers which support native CSS3 transitions.
  | 
        
        
            | 
            | 
           115 | 
              | 
        
        
            | 
            | 
           116 | 
               @property transitions
  | 
        
        
            | 
            | 
           117 | 
               @type Object
  | 
        
        
            | 
            | 
           118 | 
               @default
  | 
        
        
            | 
            | 
           119 | 
                   {
  | 
        
        
            | 
            | 
           120 | 
                       navigate: 'fade',
  | 
        
        
            | 
            | 
           121 | 
                       toChild : 'slideLeft',
  | 
        
        
            | 
            | 
           122 | 
                       toParent: 'slideRight'
  | 
        
        
            | 
            | 
           123 | 
                   }
  | 
        
        
            | 
            | 
           124 | 
               @since 3.5.0
  | 
        
        
            | 
            | 
           125 | 
               **/
  | 
        
        
            | 
            | 
           126 | 
               transitions: {
  | 
        
        
            | 
            | 
           127 | 
                   navigate: 'fade',
  | 
        
        
            | 
            | 
           128 | 
                   toChild : 'slideLeft',
  | 
        
        
            | 
            | 
           129 | 
                   toParent: 'slideRight'
  | 
        
        
            | 
            | 
           130 | 
               },
  | 
        
        
            | 
            | 
           131 | 
              | 
        
        
            | 
            | 
           132 | 
               // -- Public Methods -------------------------------------------------------
  | 
        
        
            | 
            | 
           133 | 
              | 
        
        
            | 
            | 
           134 | 
               /**
  | 
        
        
            | 
            | 
           135 | 
               Sets which view is active/visible for the application. This will set the
  | 
        
        
            | 
            | 
           136 | 
               app's `activeView` attribute to the specified `view`.
  | 
        
        
            | 
            | 
           137 | 
              | 
        
        
            | 
            | 
           138 | 
               The `view` will be "attached" to this app, meaning it will be both rendered
  | 
        
        
            | 
            | 
           139 | 
               into this app's `viewContainer` node and all of its events will bubble to
  | 
        
        
            | 
            | 
           140 | 
               the app. The previous `activeView` will be "detached" from this app.
  | 
        
        
            | 
            | 
           141 | 
              | 
        
        
            | 
            | 
           142 | 
               When a string-name is provided for a view which has been registered on this
  | 
        
        
            | 
            | 
           143 | 
               app's `views` object, the referenced metadata will be used and the
  | 
        
        
            | 
            | 
           144 | 
               `activeView` will be set to either a preserved view instance, or a new
  | 
        
        
            | 
            | 
           145 | 
               instance of the registered view will be created using the specified `config`
  | 
        
        
            | 
            | 
           146 | 
               object passed-into this method.
  | 
        
        
            | 
            | 
           147 | 
              | 
        
        
            | 
            | 
           148 | 
               A callback function can be specified as either the third or fourth argument,
  | 
        
        
            | 
            | 
           149 | 
               and this function will be called after the new `view` becomes the
  | 
        
        
            | 
            | 
           150 | 
               `activeView`, is rendered to the `viewContainer`, and is ready to use.
  | 
        
        
            | 
            | 
           151 | 
              | 
        
        
            | 
            | 
           152 | 
               @example
  | 
        
        
            | 
            | 
           153 | 
                   var app = new Y.App({
  | 
        
        
            | 
            | 
           154 | 
                       views: {
  | 
        
        
            | 
            | 
           155 | 
                           usersView: {
  | 
        
        
            | 
            | 
           156 | 
                               // Imagine that `Y.UsersView` has been defined.
  | 
        
        
            | 
            | 
           157 | 
                               type: Y.UsersView
  | 
        
        
            | 
            | 
           158 | 
                           }
  | 
        
        
            | 
            | 
           159 | 
                       },
  | 
        
        
            | 
            | 
           160 | 
              | 
        
        
            | 
            | 
           161 | 
                       transitions: true,
  | 
        
        
            | 
            | 
           162 | 
                       users      : new Y.ModelList()
  | 
        
        
            | 
            | 
           163 | 
                   });
  | 
        
        
            | 
            | 
           164 | 
              | 
        
        
            | 
            | 
           165 | 
                   app.route('/users/', function () {
  | 
        
        
            | 
            | 
           166 | 
                       this.showView('usersView', {users: this.get('users')});
  | 
        
        
            | 
            | 
           167 | 
                   });
  | 
        
        
            | 
            | 
           168 | 
              | 
        
        
            | 
            | 
           169 | 
                   app.render();
  | 
        
        
            | 
            | 
           170 | 
                   app.navigate('/uses/');
  | 
        
        
            | 
            | 
           171 | 
                   // => Creates a new `Y.UsersView` and transitions to it.
  | 
        
        
            | 
            | 
           172 | 
              | 
        
        
            | 
            | 
           173 | 
               @method showView
  | 
        
        
            | 
            | 
           174 | 
               @param {String|View} view The name of a view defined in the `views` object,
  | 
        
        
            | 
            | 
           175 | 
                   or a view instance which should become this app's `activeView`.
  | 
        
        
            | 
            | 
           176 | 
               @param {Object} [config] Optional configuration to use when creating a new
  | 
        
        
            | 
            | 
           177 | 
                   view instance. This config object can also be used to update an existing
  | 
        
        
            | 
            | 
           178 | 
                   or preserved view's attributes when `options.update` is `true`.
  | 
        
        
            | 
            | 
           179 | 
               @param {Object} [options] Optional object containing any of the following
  | 
        
        
            | 
            | 
           180 | 
                   properties:
  | 
        
        
            | 
            | 
           181 | 
                 @param {Function} [options.callback] Optional callback function to call
  | 
        
        
            | 
            | 
           182 | 
                   after new `activeView` is ready to use, the function will be passed:
  | 
        
        
            | 
            | 
           183 | 
                     @param {View} options.callback.view A reference to the new
  | 
        
        
            | 
            | 
           184 | 
                       `activeView`.
  | 
        
        
            | 
            | 
           185 | 
                 @param {Boolean} [options.prepend=false] Whether the `view` should be
  | 
        
        
            | 
            | 
           186 | 
                   prepended instead of appended to the `viewContainer`.
  | 
        
        
            | 
            | 
           187 | 
                 @param {Boolean} [options.render] Whether the `view` should be rendered.
  | 
        
        
            | 
            | 
           188 | 
                   **Note:** If no value is specified, a view instance will only be
  | 
        
        
            | 
            | 
           189 | 
                   rendered if it's newly created by this method.
  | 
        
        
            | 
            | 
           190 | 
                 @param {Boolean|String} [options.transition] Optional transition override.
  | 
        
        
            | 
            | 
           191 | 
                   A transition can be specified which will override the default, or
  | 
        
        
            | 
            | 
           192 | 
                   `false` for no transition.
  | 
        
        
            | 
            | 
           193 | 
                 @param {Boolean} [options.update=false] Whether an existing view should
  | 
        
        
            | 
            | 
           194 | 
                   have its attributes updated by passing the `config` object to its
  | 
        
        
            | 
            | 
           195 | 
                   `setAttrs()` method. **Note:** This option does not have an effect if
  | 
        
        
            | 
            | 
           196 | 
                   the `view` instance is created as a result of calling this method.
  | 
        
        
            | 
            | 
           197 | 
               @param {Function} [callback] Optional callback Function to call after the
  | 
        
        
            | 
            | 
           198 | 
                   new `activeView` is ready to use. **Note:** this will override
  | 
        
        
            | 
            | 
           199 | 
                   `options.callback` and it can be specified as either the third or fourth
  | 
        
        
            | 
            | 
           200 | 
                   argument. The function will be passed the following:
  | 
        
        
            | 
            | 
           201 | 
                 @param {View} callback.view A reference to the new `activeView`.
  | 
        
        
            | 
            | 
           202 | 
               @chainable
  | 
        
        
            | 
            | 
           203 | 
               @since 3.5.0
  | 
        
        
            | 
            | 
           204 | 
               **/
  | 
        
        
            | 
            | 
           205 | 
               // Does not override `showView()` but does use `options.transitions`.
  | 
        
        
            | 
            | 
           206 | 
              | 
        
        
            | 
            | 
           207 | 
               // -- Protected Methods ----------------------------------------------------
  | 
        
        
            | 
            | 
           208 | 
              | 
        
        
            | 
            | 
           209 | 
               /**
  | 
        
        
            | 
            | 
           210 | 
               Setter for `transitions` attribute.
  | 
        
        
            | 
            | 
           211 | 
              | 
        
        
            | 
            | 
           212 | 
               When specified as `true`, the defaults will be use as specified by the
  | 
        
        
            | 
            | 
           213 | 
               `transitions` prototype property.
  | 
        
        
            | 
            | 
           214 | 
              | 
        
        
            | 
            | 
           215 | 
               @method _setTransitions
  | 
        
        
            | 
            | 
           216 | 
               @param {Boolean|Object} transitions The new `transitions` attribute value.
  | 
        
        
            | 
            | 
           217 | 
               @return {Mixed} The processed value which represents the new state.
  | 
        
        
            | 
            | 
           218 | 
               @protected
  | 
        
        
            | 
            | 
           219 | 
               @see App.Base.showView()
  | 
        
        
            | 
            | 
           220 | 
               @since 3.5.0
  | 
        
        
            | 
            | 
           221 | 
               **/
  | 
        
        
            | 
            | 
           222 | 
               _setTransitions: function (transitions) {
  | 
        
        
            | 
            | 
           223 | 
                   var defTransitions = this.transitions;
  | 
        
        
            | 
            | 
           224 | 
              | 
        
        
            | 
            | 
           225 | 
                   if (transitions && transitions === true) {
  | 
        
        
            | 
            | 
           226 | 
                       return Y.merge(defTransitions);
  | 
        
        
            | 
            | 
           227 | 
                   }
  | 
        
        
            | 
            | 
           228 | 
              | 
        
        
            | 
            | 
           229 | 
                   return transitions;
  | 
        
        
            | 
            | 
           230 | 
               }
  | 
        
        
            | 
            | 
           231 | 
           };
  | 
        
        
            | 
            | 
           232 | 
              | 
        
        
            | 
            | 
           233 | 
           // -- Namespace ----------------------------------------------------------------
  | 
        
        
            | 
            | 
           234 | 
           Y.App.Transitions = AppTransitions;
  | 
        
        
            | 
            | 
           235 | 
           Y.Base.mix(Y.App, [AppTransitions]);
  | 
        
        
            | 
            | 
           236 | 
              | 
        
        
            | 
            | 
           237 | 
           Y.mix(Y.App.CLASS_NAMES, {
  | 
        
        
            | 
            | 
           238 | 
               transitioning: Y.ClassNameManager.getClassName('app', 'transitioning')
  | 
        
        
            | 
            | 
           239 | 
           });
  | 
        
        
            | 
            | 
           240 | 
              | 
        
        
            | 
            | 
           241 | 
              | 
        
        
            | 
            | 
           242 | 
           }, '3.18.1', {"requires": ["app-base"]});
  |