Proyectos de Subversion Moodle

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
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"]});