7d1348cc07acb3ce7fc3ed0e8352e6e65f782a68Eric FerraiuoloProvides the implementation of view transitions for `Y.App.Transitions` in
7d1348cc07acb3ce7fc3ed0e8352e6e65f782a68Eric Ferraiuolobrowsers which support native CSS3 transitions.
16e78d3096c92e820034cebbda137cb7fa2c6ac4Eric Ferraiuolo@submodule app-transitions-native
7d1348cc07acb3ce7fc3ed0e8352e6e65f782a68Eric FerraiuoloProvides the implementation of view transitions for `Y.App.Transitions` in
7d1348cc07acb3ce7fc3ed0e8352e6e65f782a68Eric Ferraiuolobrowsers which support native CSS3 transitions.
421945fc2bca8dfac11d6a92f5cc7933c7ca53c2Eric FerraiuoloWhen this module is used, `Y.App.TransitionsNative` will automatically mix
421945fc2bca8dfac11d6a92f5cc7933c7ca53c2Eric Ferraiuoloitself in to `Y.App`.
7d1348cc07acb3ce7fc3ed0e8352e6e65f782a68Eric Ferraiuolo@class App.TransitionsNative
d9d247a8a6f960720e449399984fa3be10134d61Eric Ferraiuolo // -- Protected Properties -------------------------------------------------
7d1348cc07acb3ce7fc3ed0e8352e6e65f782a68Eric Ferraiuolo Whether this app is currently transitioning its `activeView`.
d9d247a8a6f960720e449399984fa3be10134d61Eric Ferraiuolo @property _transitioning
d9d247a8a6f960720e449399984fa3be10134d61Eric Ferraiuolo @type Boolean
d9d247a8a6f960720e449399984fa3be10134d61Eric Ferraiuolo @default false
7d1348cc07acb3ce7fc3ed0e8352e6e65f782a68Eric Ferraiuolo A queue that holds pending calls to this app's `_uiTransitionActiveView()`
d9d247a8a6f960720e449399984fa3be10134d61Eric Ferraiuolo @property _viewTransitionQueue
16e78d3096c92e820034cebbda137cb7fa2c6ac4Eric Ferraiuolo // -- Lifecycle Methods ----------------------------------------------------
7d1348cc07acb3ce7fc3ed0e8352e6e65f782a68Eric Ferraiuolo // TODO: Consider the AOP approach that `Plugin.WidgetAnim` uses.
d9d247a8a6f960720e449399984fa3be10134d61Eric Ferraiuolo Y.Do.before(this._queueActiveView, this, '_uiSetActiveView');
16e78d3096c92e820034cebbda137cb7fa2c6ac4Eric Ferraiuolo // -- Protected Methods ----------------------------------------------------
7d1348cc07acb3ce7fc3ed0e8352e6e65f782a68Eric Ferraiuolo Dequeues any pending calls to `_uiTransitionActiveView()`.
7d1348cc07acb3ce7fc3ed0e8352e6e65f782a68Eric Ferraiuolo **Note:** When there is more than one queued transition, only the most
7d1348cc07acb3ce7fc3ed0e8352e6e65f782a68Eric Ferraiuolo recent `activeView` change will be visually transitioned, while the others
7d1348cc07acb3ce7fc3ed0e8352e6e65f782a68Eric Ferraiuolo will have their `transition` option overridden to `false`.
7d1348cc07acb3ce7fc3ed0e8352e6e65f782a68Eric Ferraiuolo @method _dequeueActiveView
99d4ac376f33d146e113dfd79e8bc62392116203Eric Ferraiuolo // When items are still left in the queue, override the transition
99d4ac376f33d146e113dfd79e8bc62392116203Eric Ferraiuolo // so it does not run.
7d1348cc07acb3ce7fc3ed0e8352e6e65f782a68Eric Ferraiuolo // Overrides `transition` option and splices in the new options.
99d4ac376f33d146e113dfd79e8bc62392116203Eric Ferraiuolo options = Y.merge(transition[2], {transition: false});
99d4ac376f33d146e113dfd79e8bc62392116203Eric Ferraiuolo this._uiTransitionActiveView.apply(this, transition);
7d1348cc07acb3ce7fc3ed0e8352e6e65f782a68Eric Ferraiuolo Returns an object containing a named fx for both `viewIn` and `viewOut`
7d1348cc07acb3ce7fc3ed0e8352e6e65f782a68Eric Ferraiuolo based on the relationship between the specified `newView` and `oldView`.
16e78d3096c92e820034cebbda137cb7fa2c6ac4Eric Ferraiuolo @method _getFx
d9d247a8a6f960720e449399984fa3be10134d61Eric Ferraiuolo @param {View} newView The view being transitioned-in.
d9d247a8a6f960720e449399984fa3be10134d61Eric Ferraiuolo @param {View} oldView The view being transitioned-out.
7d1348cc07acb3ce7fc3ed0e8352e6e65f782a68Eric Ferraiuolo @param {String} [transition] The preferred transition to use.
7d1348cc07acb3ce7fc3ed0e8352e6e65f782a68Eric Ferraiuolo @return {Object} An object containing a named fx for both `viewIn` and
16e78d3096c92e820034cebbda137cb7fa2c6ac4Eric Ferraiuolo _getFx: function (newView, oldView, transition) {
7d1348cc07acb3ce7fc3ed0e8352e6e65f782a68Eric Ferraiuolo Queues calls to `_uiTransitionActiveView()` to make sure a currently running
7d1348cc07acb3ce7fc3ed0e8352e6e65f782a68Eric Ferraiuolo transition isn't interrupted.
7d1348cc07acb3ce7fc3ed0e8352e6e65f782a68Eric Ferraiuolo **Note:** This method prevents the default `_uiSetActiveView()` method from
d9d247a8a6f960720e449399984fa3be10134d61Eric Ferraiuolo @method _queueActiveView
7d1348cc07acb3ce7fc3ed0e8352e6e65f782a68Eric Ferraiuolo Performs the actual change of this app's `activeView` by visually
7d1348cc07acb3ce7fc3ed0e8352e6e65f782a68Eric Ferraiuolo transitioning between the `newView` and `oldView` using any specified
16e78d3096c92e820034cebbda137cb7fa2c6ac4Eric Ferraiuolo The `newView` is attached to the app by rendering it to the `viewContainer`,
16e78d3096c92e820034cebbda137cb7fa2c6ac4Eric Ferraiuolo and making this app a bubble target of its events.
16e78d3096c92e820034cebbda137cb7fa2c6ac4Eric Ferraiuolo The `oldView` is detached from the app by removing it from the
16e78d3096c92e820034cebbda137cb7fa2c6ac4Eric Ferraiuolo `viewContainer`, and removing this app as a bubble target for its events.
16e78d3096c92e820034cebbda137cb7fa2c6ac4Eric Ferraiuolo The `oldView` will either be preserved or properly destroyed.
7d1348cc07acb3ce7fc3ed0e8352e6e65f782a68Eric Ferraiuolo **Note:** This method overrides `_uiSetActiveView()` and provides all of its
7d1348cc07acb3ce7fc3ed0e8352e6e65f782a68Eric Ferraiuolo functionality plus supports visual transitions. Also, the `activeView`
7d1348cc07acb3ce7fc3ed0e8352e6e65f782a68Eric Ferraiuolo attribute is read-only and can be changed by calling the `showView()`
16e78d3096c92e820034cebbda137cb7fa2c6ac4Eric Ferraiuolo @method _uiTransitionActiveView
16e78d3096c92e820034cebbda137cb7fa2c6ac4Eric Ferraiuolo @param {View} newView The View which is now this app's `activeView`.
16e78d3096c92e820034cebbda137cb7fa2c6ac4Eric Ferraiuolo @param {View} [oldView] The View which was this app's `activeView`.
16e78d3096c92e820034cebbda137cb7fa2c6ac4Eric Ferraiuolo @param {Object} [options] Optional object containing any of the following
7d1348cc07acb3ce7fc3ed0e8352e6e65f782a68Eric Ferraiuolo @param {Function} [options.callback] Optional callback function to call
7d1348cc07acb3ce7fc3ed0e8352e6e65f782a68Eric Ferraiuolo after new `activeView` is ready to use, the function will be passed:
7d1348cc07acb3ce7fc3ed0e8352e6e65f782a68Eric Ferraiuolo @param {View} options.callback.view A reference to the new
7d1348cc07acb3ce7fc3ed0e8352e6e65f782a68Eric Ferraiuolo `activeView`.
16e78d3096c92e820034cebbda137cb7fa2c6ac4Eric Ferraiuolo @param {Boolean} [options.prepend] Whether the new view should be
16e78d3096c92e820034cebbda137cb7fa2c6ac4Eric Ferraiuolo prepended instead of appended to the `viewContainer`.
7d1348cc07acb3ce7fc3ed0e8352e6e65f782a68Eric Ferraiuolo @param {Boolean|String} [options.transition] Optional transition override.
7d1348cc07acb3ce7fc3ed0e8352e6e65f782a68Eric Ferraiuolo A transition can be specified which will override the default, or
7d1348cc07acb3ce7fc3ed0e8352e6e65f782a68Eric Ferraiuolo `false` for no transition.
16e78d3096c92e820034cebbda137cb7fa2c6ac4Eric Ferraiuolo _uiTransitionActiveView: function (newView, oldView, options) {
16e78d3096c92e820034cebbda137cb7fa2c6ac4Eric Ferraiuolo container, transitioning, isChild, isParent, prepend,
d9d247a8a6f960720e449399984fa3be10134d61Eric Ferraiuolo // Quits early when to new and old views are the same.
d9d247a8a6f960720e449399984fa3be10134d61Eric Ferraiuolo fx = this._getFx(newView, oldView, options.transition);
d9d247a8a6f960720e449399984fa3be10134d61Eric Ferraiuolo isChild = this._isChildView(newView, oldView);
d9d247a8a6f960720e449399984fa3be10134d61Eric Ferraiuolo isParent = !isChild && this._isParentView(newView, oldView);
d9d247a8a6f960720e449399984fa3be10134d61Eric Ferraiuolo // Preforms simply attach/detach of the new and old view respectively
d9d247a8a6f960720e449399984fa3be10134d61Eric Ferraiuolo // when there's no transition to perform.
16e78d3096c92e820034cebbda137cb7fa2c6ac4Eric Ferraiuolo transitioning = AppTransitions.CLASS_NAMES.transitioning;
d9d247a8a6f960720e449399984fa3be10134d61Eric Ferraiuolo // Called when view transitions completed, if none were added this will
d9d247a8a6f960720e449399984fa3be10134d61Eric Ferraiuolo // run right away.
16e78d3096c92e820034cebbda137cb7fa2c6ac4Eric Ferraiuolo // Setup a new stack to run the view transitions in parallel.
16e78d3096c92e820034cebbda137cb7fa2c6ac4Eric Ferraiuolo transitions = new Y.Parallel({context: this});
16e78d3096c92e820034cebbda137cb7fa2c6ac4Eric Ferraiuolo // Transition the new view first to prevent a gap when sliding.
d9d247a8a6f960720e449399984fa3be10134d61Eric Ferraiuolo .transition(fx.viewIn, fxConfig, transitions.add());
d9d247a8a6f960720e449399984fa3be10134d61Eric Ferraiuolo .transition(fx.viewOut, fxConfig, transitions.add());
7d1348cc07acb3ce7fc3ed0e8352e6e65f782a68Eric Ferraiuolo// -- Transition fx ------------------------------------------------------------
16e78d3096c92e820034cebbda137cb7fa2c6ac4Eric Ferraiuolo 'app:fadeIn': {
16e78d3096c92e820034cebbda137cb7fa2c6ac4Eric Ferraiuolo if (config.crossView && !config.prepended) {
16e78d3096c92e820034cebbda137cb7fa2c6ac4Eric Ferraiuolo end: function () {
16e78d3096c92e820034cebbda137cb7fa2c6ac4Eric Ferraiuolo this.setStyle('transform', 'translateX(0)');
16e78d3096c92e820034cebbda137cb7fa2c6ac4Eric Ferraiuolo 'app:fadeOut': {
16e78d3096c92e820034cebbda137cb7fa2c6ac4Eric Ferraiuolo end: function () {
16e78d3096c92e820034cebbda137cb7fa2c6ac4Eric Ferraiuolo this.setStyle('transform', 'translateX(0)');
16e78d3096c92e820034cebbda137cb7fa2c6ac4Eric Ferraiuolo 'app:slideLeft': {
ce4cefb48a881b28475d82002d20aca07191acd7Eric Ferraiuolo start: function () {
16e78d3096c92e820034cebbda137cb7fa2c6ac4Eric Ferraiuolo end: function () {
16e78d3096c92e820034cebbda137cb7fa2c6ac4Eric Ferraiuolo this.setStyle('transform', 'translateX(0)');
16e78d3096c92e820034cebbda137cb7fa2c6ac4Eric Ferraiuolo 'app:slideRight': {
16e78d3096c92e820034cebbda137cb7fa2c6ac4Eric Ferraiuolo start: function () {
16e78d3096c92e820034cebbda137cb7fa2c6ac4Eric Ferraiuolo end: function () {
16e78d3096c92e820034cebbda137cb7fa2c6ac4Eric Ferraiuolo this.setStyle('transform', 'translateX(0)');
16e78d3096c92e820034cebbda137cb7fa2c6ac4Eric Ferraiuolo// -- Namespacae ---------------------------------------------------------------