← Back to branch summary

~ubuntu-branches/ubuntu/utopic/moodle/utopic

« back to all changes in this revision

Viewing changes to lib/yuilib/3.13.0/clickable-rail/clickable-rail-debug.js

  • Committer: Package Import Robot
  • Author(s): Thijs Kinkhorst
  • Date: 2014-05-12 16:10:38 UTC
  • mfrom: (36.1.3 sid)
  • Revision ID: package-import@ubuntu.com-20140512161038-puyqf65k4e0s8ytz
Tags: 2.6.3-1
New upstream release.

Show diffs side-by-side

added added

removed removed

Lines of Context:
lib/yuilib/3.13.0/clickable-rail/clickable-rail-debug.js
 
1
/*
 
2
YUI 3.13.0 (build 508226d)
 
3
Copyright 2013 Yahoo! Inc. All rights reserved.
 
4
Licensed under the BSD License.
 
5
http://yuilibrary.com/license/
 
6
*/
 
7
 
 
8
YUI.add('clickable-rail', function (Y, NAME) {
 
9
 
 
10
/**
 
11
 * Adds support for mouse interaction with the Slider rail triggering thumb
 
12
 * movement.
 
13
 *
 
14
 * @module slider
 
15
 * @submodule clickable-rail
 
16
 */
 
17
 
 
18
/**
 
19
 * Slider extension that allows clicking on the Slider's rail element,
 
20
 * triggering the thumb to align with the location of the click.
 
21
 *
 
22
 * @class ClickableRail
 
23
 */
 
24
function ClickableRail() {
 
25
    this._initClickableRail();
 
26
}
 
27
 
 
28
Y.ClickableRail = Y.mix(ClickableRail, {
 
29
 
 
30
    // Prototype methods added to host class
 
31
    prototype: {
 
32
 
 
33
        /**
 
34
         * Initializes the internal state and sets up events.
 
35
         *
 
36
         * @method _initClickableRail
 
37
         * @protected
 
38
         */
 
39
        _initClickableRail: function () {
 
40
            this._evtGuid = this._evtGuid || (Y.guid() + '|');
 
41
 
 
42
            /**
 
43
             * Broadcasts when the rail has received a mousedown event and
 
44
             * triggers the thumb positioning.  Use
 
45
             * <code>e.preventDefault()</code> or
 
46
             * <code>set(&quot;clickableRail&quot;, false)</code> to prevent
 
47
             * the thumb positioning.
 
48
             *
 
49
             * @event railMouseDown
 
50
             * @preventable _defRailMouseDownFn
 
51
             */
 
52
            this.publish('railMouseDown', {
 
53
                defaultFn: this._defRailMouseDownFn
 
54
            });
 
55
 
 
56
            this.after('render', this._bindClickableRail);
 
57
            this.on('destroy', this._unbindClickableRail);
 
58
        },
 
59
 
 
60
        /**
 
61
         * Attaches DOM event subscribers to support rail interaction.
 
62
         *
 
63
         * @method _bindClickableRail
 
64
         * @protected
 
65
         */
 
66
        _bindClickableRail: function () {
 
67
            this._dd.addHandle(this.rail);
 
68
 
 
69
            this.rail.on(this._evtGuid + Y.DD.Drag.START_EVENT,
 
70
                Y.bind(this._onRailMouseDown, this));
 
71
        },
 
72
 
 
73
        /**
 
74
         * Detaches DOM event subscribers for cleanup/destruction cycle.
 
75
         *
 
76
         * @method _unbindClickableRail
 
77
         * @protected
 
78
         */
 
79
        _unbindClickableRail: function () {
 
80
            if (this.get('rendered')) {
 
81
                var contentBox = this.get('contentBox'),
 
82
                    rail = contentBox.one('.' + this.getClassName('rail'));
 
83
 
 
84
                rail.detach(this.evtGuid + '*');
 
85
            }
 
86
        },
 
87
 
 
88
        /**
 
89
         * Dispatches the railMouseDown event.
 
90
         *
 
91
         * @method _onRailMouseDown
 
92
         * @param e {DOMEvent} the mousedown event object
 
93
         * @protected
 
94
         */
 
95
        _onRailMouseDown: function (e) {
 
96
            if (this.get('clickableRail') && !this.get('disabled')) {
 
97
                this.fire('railMouseDown', { ev: e });
 
98
                this.thumb.focus();
 
99
            }
 
100
        },
 
101
 
 
102
        /**
 
103
         * Default behavior for the railMouseDown event.  Centers the thumb at
 
104
         * the click location and passes control to the DDM to behave as though
 
105
         * the thumb itself were clicked in preparation for a drag operation.
 
106
         *
 
107
         * @method _defRailMouseDownFn
 
108
         * @param e {Event} the EventFacade for the railMouseDown custom event
 
109
         * @protected
 
110
         */
 
111
        _defRailMouseDownFn: function (e) {
 
112
            e = e.ev;
 
113
 
 
114
            // Logic that determines which thumb should be used is abstracted
 
115
            // to someday support multi-thumb sliders
 
116
            var dd     = this._resolveThumb(e),
 
117
                i      = this._key.xyIndex,
 
118
                length = parseFloat(this.get('length'), 10),
 
119
                thumb,
 
120
                thumbSize,
 
121
                xy;
 
122
 
 
123
            if (dd) {
 
124
                thumb = dd.get('dragNode');
 
125
                thumbSize = parseFloat(thumb.getStyle(this._key.dim), 10);
 
126
 
 
127
                // Step 1. Allow for aligning to thumb center or edge, etc
 
128
                xy = this._getThumbDestination(e, thumb);
 
129
 
 
130
                // Step 2. Remove page offsets to give just top/left style val
 
131
                xy = xy[ i ] - this.rail.getXY()[i];
 
132
 
 
133
                // Step 3. Constrain within the rail in case of attempt to
 
134
                // center the thumb when clicking on the end of the rail
 
135
                xy = Math.min(
 
136
                        Math.max(xy, 0),
 
137
                        (length - thumbSize));
 
138
 
 
139
                this._uiMoveThumb(xy, { source: 'rail' });
 
140
 
 
141
                // Set e.target for DD's IE9 patch which calls
 
142
                // e.target._node.setCapture() to allow imgs to be dragged.
 
143
                // Without this, setCapture is called from the rail and rail
 
144
                // clicks on other Sliders may have their thumb movements
 
145
                // overridden by a different Slider (the thumb on the wrong
 
146
                // Slider moves).
 
147
                e.target = this.thumb.one('img') || this.thumb;
 
148
 
 
149
                // Delegate to DD's natural behavior
 
150
                dd._handleMouseDownEvent(e);
 
151
 
 
152
                // TODO: this won't trigger a slideEnd if the rail is clicked
 
153
                // check if dd._move(e); dd._dragThreshMet = true; dd.start();
 
154
                // will do the trick.  Is that even a good idea?
 
155
            }
 
156
        },
 
157
 
 
158
        /**
 
159
         * Resolves which thumb to actuate if any.  Override this if you want to
 
160
         * support multiple thumbs.  By default, returns the Drag instance for
 
161
         * the thumb stored by the Slider.
 
162
         *
 
163
         * @method _resolveThumb
 
164
         * @param e {DOMEvent} the mousedown event object
 
165
         * @return {DD.Drag} the Drag instance that should be moved
 
166
         * @protected
 
167
         */
 
168
        _resolveThumb: function (e) {
 
169
            /* Temporary workaround
 
170
            var primaryOnly = this._dd.get('primaryButtonOnly'),
 
171
                validClick  = !primaryOnly || e.button <= 1;
 
172
 
 
173
            return (validClick) ? this._dd : null;
 
174
             */
 
175
            return this._dd;
 
176
        },
 
177
 
 
178
        /**
 
179
         * Calculates the top left position the thumb should be moved to to
 
180
         * align the click XY with the center of the specified node.
 
181
         *
 
182
         * @method _getThumbDestination
 
183
         * @param e {DOMEvent} The mousedown event object
 
184
         * @param node {Node} The node to position
 
185
         * @return {Array} the [top, left] pixel position of the destination
 
186
         * @protected
 
187
         */
 
188
        _getThumbDestination: function (e, node) {
 
189
            var offsetWidth  = node.get('offsetWidth'),
 
190
                offsetHeight = node.get('offsetHeight');
 
191
 
 
192
            // center
 
193
            return [
 
194
                (e.pageX - Math.round((offsetWidth  / 2))),
 
195
                (e.pageY - Math.round((offsetHeight / 2)))
 
196
            ];
 
197
        }
 
198
 
 
199
    },
 
200
 
 
201
    // Static properties added onto host class
 
202
    ATTRS: {
 
203
        /**
 
204
         * Enable or disable clickable rail support.
 
205
         *
 
206
         * @attribute clickableRail
 
207
         * @type {Boolean}
 
208
         * @default true
 
209
         */
 
210
        clickableRail: {
 
211
            value: true,
 
212
            validator: Y.Lang.isBoolean
 
213
        }
 
214
    }
 
215
 
 
216
}, true);
 
217
 
 
218
 
 
219
}, '3.13.0', {"requires": ["slider-base"]});