scrollview-base-debug.js revision 7dff9877fcd73e6db005c517f14a66bf2a9bf82e
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * The scrollview-base module provides a basic ScrollView Widget, without scrollbar indicators
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @module scrollview-base
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glassvar getClassName = Y.ClassNameManager.getClassName,
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * ScrollView provides a scrollable widget, supporting flick gestures, across both touch and mouse based devices.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @class ScrollView
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @param config {Object} Object literal with initial attribute values
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @extends Widget
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @constructor
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass ScrollView.superclass.constructor.apply(this, arguments);
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // Y.ScrollView prototype
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * Designated initializer
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @method initializer
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass initializer: function() {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * Notification event fired at the end of a scroll transition
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @event scrollEnd
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @param e {EventFacade} The default event facade.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * Notification event fired at the end of a flick gesture (the flick animation may still be in progress)
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @event flick
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @param e {EventFacade} The default event facade.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass var sv = this;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // Cache - they're write once, and not going to change
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * Override the contentBox sizing method, since the contentBox height
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * should not be that of the boundingBox.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @method _uiSizeCB
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @protected
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass _uiSizeCB: function() {},
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * Content box transition callback
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @method _onTransEnd
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @param {Event.Facade} e The event facade
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass _onTransEnd: function(e) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * bindUI implementation
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * Hooks up events for the widget
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @method bindUI
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass bindUI: function() {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // IE SELECT HACK. See if we can do this non-natively and in the gesture for a future release.
6bb97cfdea627b5bb0523ad4e6d2623c5fbf6954Satyen Desai * @method _bindAttrs
6bb97cfdea627b5bb0523ad4e6d2623c5fbf6954Satyen Desai _bindAttrs : function() {
f10a402d8cc7dba5b475e38d8beaf6b79342c927Tilo Mitra // Helps avoid potential CSS race where in the styles from
f10a402d8cc7dba5b475e38d8beaf6b79342c927Tilo Mitra // scrollview-list-skin.css are applied after syncUI() fires.
f10a402d8cc7dba5b475e38d8beaf6b79342c927Tilo Mitra // Without a _uiDimensionChange() call, the scrollview only
6bb97cfdea627b5bb0523ad4e6d2623c5fbf6954Satyen Desai // scrolls partially due to the fact that styles added in the CSS
f10a402d8cc7dba5b475e38d8beaf6b79342c927Tilo Mitra // altered the height/width of the bounding box.
7dff9877fcd73e6db005c517f14a66bf2a9bf82eDerek Gathright // TODO: Remove?
7dff9877fcd73e6db005c517f14a66bf2a9bf82eDerek Gathright //this._uiDimensionsChange();
1acbfdfeb2e94810b2799036a96b3829e492696dSatyen Desai * Bind (or unbind) gesture move listeners required for drag support
6bb97cfdea627b5bb0523ad4e6d2623c5fbf6954Satyen Desai * @method _bindDrag
1acbfdfeb2e94810b2799036a96b3829e492696dSatyen Desai * @param drag {boolean} If true, the method binds listener to enable drag (gesturemovestart). If false, the method unbinds gesturemove listeners for drag support.
6bb97cfdea627b5bb0523ad4e6d2623c5fbf6954Satyen Desai bb.on('drag|gesturemovestart', Y.bind(this._onGestureMoveStart, this));
1acbfdfeb2e94810b2799036a96b3829e492696dSatyen Desai * Bind (or unbind) flick listeners.
6bb97cfdea627b5bb0523ad4e6d2623c5fbf6954Satyen Desai * @method _bindFlick
1acbfdfeb2e94810b2799036a96b3829e492696dSatyen Desai * @param flick {Object|boolean} If truthy, the method binds listeners for flick support. If false, the method unbinds flick listeners.
6bb97cfdea627b5bb0523ad4e6d2623c5fbf6954Satyen Desai cb.on("flick|flick", Y.bind(this._flick, this), flick);
45be43296becb0d27a3414d29d9b4e3a1e3448b4Derek Gathright cb.on("mousewheel", Y.bind(this._mousewheel, this), mousewheel);
f7240e17b052fc7215fbe9e0f77da32b21d1da78Satyen Desai * syncUI implementation.
f7240e17b052fc7215fbe9e0f77da32b21d1da78Satyen Desai * Update the scroll position, based on the current value of scrollX/scrollY.
f7240e17b052fc7215fbe9e0f77da32b21d1da78Satyen Desai * @method syncUI
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass syncUI: function() {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass this.scrollTo(this.get(SCROLL_X), this.get(SCROLL_Y));
609b3fdb3368975ebd66bf9ef6a074e3ca726524Jenny Donnelly * Scroll the element to a given xy coordinate
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @method scrollTo
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @param x {Number} The x-position to scroll to
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @param y {Number} The y-position to scroll to
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @param duration {Number} Duration, in ms, of the scroll animation (default is 0)
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @param easing {String} An easing equation if duration is set
45be43296becb0d27a3414d29d9b4e3a1e3448b4Derek Gathright // TODO: Figure out a better way to detect mousewheel events
45be43296becb0d27a3414d29d9b4e3a1e3448b4Derek Gathright if ( y < this._minScrollY) {
45be43296becb0d27a3414d29d9b4e3a1e3448b4Derek Gathright else if ( y > this._maxScrollY) {
6bb97cfdea627b5bb0523ad4e6d2623c5fbf6954Satyen Desai xSet = (x !== null),
6bb97cfdea627b5bb0523ad4e6d2623c5fbf6954Satyen Desai ySet = (y !== null),
6bb97cfdea627b5bb0523ad4e6d2623c5fbf6954Satyen Desai // ANDROID WORKAROUND - try and stop existing transition, before kicking off new one.
6bb97cfdea627b5bb0523ad4e6d2623c5fbf6954Satyen Desai cb.setStyle(TRANS.DURATION, ZERO).setStyle(TRANS.PROPERTY, EMPTY);
6bb97cfdea627b5bb0523ad4e6d2623c5fbf6954Satyen Desai transition.transform = this._transform(xMove, yMove);
6bb97cfdea627b5bb0523ad4e6d2623c5fbf6954Satyen Desai Y.log("Transition: duration, easing:" + [transition.duration, transition.easing], "scrollview");
6bb97cfdea627b5bb0523ad4e6d2623c5fbf6954Satyen Desai callback = this._transEndCB = Y.bind(this._onTransEnd, this);
6bb97cfdea627b5bb0523ad4e6d2623c5fbf6954Satyen Desai cb.setStyle('transform', this._transform(xMove, yMove));
609b3fdb3368975ebd66bf9ef6a074e3ca726524Jenny Donnelly * Utility method, to create the translate transform string with the
479b9ac417be02467aadae8cd650d29050001f0bSatyen Desai * x, y translation amounts provided.
479b9ac417be02467aadae8cd650d29050001f0bSatyen Desai * @method _transform
479b9ac417be02467aadae8cd650d29050001f0bSatyen Desai * @param {Number} x Number of pixels to translate along the x axis
479b9ac417be02467aadae8cd650d29050001f0bSatyen Desai * @param {Number} y Number of pixels to translate along the y axis
479b9ac417be02467aadae8cd650d29050001f0bSatyen Desai _transform : function(x, y) {
479b9ac417be02467aadae8cd650d29050001f0bSatyen Desai // TODO: Would we be better off using a Matrix for this?
479b9ac417be02467aadae8cd650d29050001f0bSatyen Desai return (this._forceHWTransforms) ? 'translate('+ x +'px,'+ y +'px) translateZ(0px)' : 'translate('+ x +'px,'+ y +'px)';
609b3fdb3368975ebd66bf9ef6a074e3ca726524Jenny Donnelly * Utility method, to move the given element to the given xy position
609b3fdb3368975ebd66bf9ef6a074e3ca726524Jenny Donnelly * @method _moveTo
609b3fdb3368975ebd66bf9ef6a074e3ca726524Jenny Donnelly * @param node {Node} The node to move
609b3fdb3368975ebd66bf9ef6a074e3ca726524Jenny Donnelly * @param x {Number} The x-position to move to
609b3fdb3368975ebd66bf9ef6a074e3ca726524Jenny Donnelly * @param y {Number} The y-position to move to
609b3fdb3368975ebd66bf9ef6a074e3ca726524Jenny Donnelly node.setStyle('transform', this._transform(x, y));
479b9ac417be02467aadae8cd650d29050001f0bSatyen Desai * Flag driving whether or not we should try and force H/W acceleration when transforming. Currently enabled by default for Webkit.
479b9ac417be02467aadae8cd650d29050001f0bSatyen Desai * Used by the _transform method.
479b9ac417be02467aadae8cd650d29050001f0bSatyen Desai * @property _forceHWTransforms
479b9ac417be02467aadae8cd650d29050001f0bSatyen Desai * @type boolean
479b9ac417be02467aadae8cd650d29050001f0bSatyen Desai * @protected
7dff9877fcd73e6db005c517f14a66bf2a9bf82eDerek Gathright _forceHWTransforms: Y.UA.webkit ? true : false,
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * <p>Used to control whether or not ScrollView's internal
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * gesturemovestart, gesturemove and gesturemoveend
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * event listeners should preventDefault. The value is an
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * object, with "start", "move" and "end" properties used to
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * specify which events should preventDefault and which shouldn't:</p>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * start : false,
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * move : true,
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * end : false
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * <p>The default values are set up in order to prevent panning,
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * on touch devices, while allowing click listeners on elements inside
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * the ScrollView to be notified as expected.</p>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @property _prevent
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @type Object
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @protected
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * gesturemovestart event handler
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @method _onGestureMoveStart
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @param e {Event.Facade} The gesturemovestart event facade
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass var sv = this,
6bb97cfdea627b5bb0523ad4e6d2623c5fbf6954Satyen Desai sv._hm = bb.on('drag|gesturemove', Y.bind(sv._onGestureMove, sv));
6bb97cfdea627b5bb0523ad4e6d2623c5fbf6954Satyen Desai sv._hme = bb.on('drag|gesturemoveend', Y.bind(sv._onGestureMoveEnd, sv));
6bb97cfdea627b5bb0523ad4e6d2623c5fbf6954Satyen Desai * Internal state, defines whether or not the scrollview is currently being dragged
6bb97cfdea627b5bb0523ad4e6d2623c5fbf6954Satyen Desai * @property _isDragging
6bb97cfdea627b5bb0523ad4e6d2623c5fbf6954Satyen Desai * @type boolean
6bb97cfdea627b5bb0523ad4e6d2623c5fbf6954Satyen Desai * @protected
6bb97cfdea627b5bb0523ad4e6d2623c5fbf6954Satyen Desai * Internal state, defines whether or not the scrollview is currently animating a flick
6bb97cfdea627b5bb0523ad4e6d2623c5fbf6954Satyen Desai * @property _flicking
6bb97cfdea627b5bb0523ad4e6d2623c5fbf6954Satyen Desai * @type boolean
6bb97cfdea627b5bb0523ad4e6d2623c5fbf6954Satyen Desai * @protected
6bb97cfdea627b5bb0523ad4e6d2623c5fbf6954Satyen Desai * Internal state, defines whether or not the scrollview needs to snap to a boundary edge
6bb97cfdea627b5bb0523ad4e6d2623c5fbf6954Satyen Desai * @property _snapToEdge
6bb97cfdea627b5bb0523ad4e6d2623c5fbf6954Satyen Desai * @type boolean
6bb97cfdea627b5bb0523ad4e6d2623c5fbf6954Satyen Desai * @protected
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * gesturemove event handler
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @method _onGestureMove
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @param e {Event.Facade} The gesturemove event facade
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass _onGestureMove: function(e) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass var sv = this;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * gestureend event handler
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @method _onGestureMoveEnd
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @param e {Event.Facade} The gesturemoveend event facade
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass startPoint = vert ? sv._startClientY : sv._startClientX,
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass endPoint = vert ? sv._endClientY : sv._endClientX,
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * Internal state, defines whether or not the scrollview has been scrolled half it's width/height
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @property _scrolledHalfway
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @type boolean
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @protected
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass sv._scrolledHalfway = sv._snapToEdge = sv._isDragging = false;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * Contains the distance (postive or negative) in pixels by which the scrollview was last scrolled. This is useful when
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * setting up click listeners on the scrollview content, which on mouse based devices are always fired, even after a
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * <p>Touch based devices don't currently fire a click event, if the finger has been moved (beyond a threshold) so this check isn't required,
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * if working in a purely touch based environment</p>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @property lastScrolledAmt
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @type Number
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // Check for halfway
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass if((horiz && absDistance > bb.get('offsetWidth')/2) || (vert && absDistance > bb.get('offsetHeight')/2)) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * Internal state, defines whether or not the scrollview has been scrolled in the forward (distance > 0), or backward (distance < 0) direction
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @property _scrolledForward
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @type boolean
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @protected
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // Check for min/max
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass Y.log("half:" + sv._scrolledHalfway + ", fwd:" + sv._scrolledForward, "scrollview");
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * After listener for changes to the scrollX or scrollY attribute
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @method _afterScrollChange
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @param e {Event.Facade} The event facade
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @protected
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass _afterScrollChange : function(e) {
6bb97cfdea627b5bb0523ad4e6d2623c5fbf6954Satyen Desai * After listener for changes to the flick attribute
6bb97cfdea627b5bb0523ad4e6d2623c5fbf6954Satyen Desai * @method _afterFlickChange
6bb97cfdea627b5bb0523ad4e6d2623c5fbf6954Satyen Desai * @param e {Event.Facade} The event facade
6bb97cfdea627b5bb0523ad4e6d2623c5fbf6954Satyen Desai * @protected
6bb97cfdea627b5bb0523ad4e6d2623c5fbf6954Satyen Desai * After listener for changes to the disabled attribute
6bb97cfdea627b5bb0523ad4e6d2623c5fbf6954Satyen Desai * @method _afterDisabledChange
6bb97cfdea627b5bb0523ad4e6d2623c5fbf6954Satyen Desai * @param e {Event.Facade} The event facade
6bb97cfdea627b5bb0523ad4e6d2623c5fbf6954Satyen Desai * @protected
6bb97cfdea627b5bb0523ad4e6d2623c5fbf6954Satyen Desai // Cache for performance - we check during move
6bb97cfdea627b5bb0523ad4e6d2623c5fbf6954Satyen Desai * After listener for changes to the drag attribute
6bb97cfdea627b5bb0523ad4e6d2623c5fbf6954Satyen Desai * @method _afterDragChange
6bb97cfdea627b5bb0523ad4e6d2623c5fbf6954Satyen Desai * @param e {Event.Facade} The event facade
6bb97cfdea627b5bb0523ad4e6d2623c5fbf6954Satyen Desai * @protected
6bb97cfdea627b5bb0523ad4e6d2623c5fbf6954Satyen Desai _afterDragChange : function(e) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * Used to move the ScrollView content
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @method _uiScrollTo
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @param x {Number}
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @param y {Number}
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @param duration {Number}
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @param easing {String}
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @protected
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // TODO: This doesn't seem right. This is not UI logic.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass duration = duration || this._snapToEdge ? 400 : 0;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass easing = easing || this._snapToEdge ? ScrollView.SNAP_EASING : null;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * After listener for the height or width attribute
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @method _afterDimChange
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @param e {Event.Facade} The event facade
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @protected
d5daadf7c87a641483741ee68c26b343acb5717cJenny Donnelly * Utility method to obtain scrollWidth, scrollHeight,
d5daadf7c87a641483741ee68c26b343acb5717cJenny Donnelly * accounting for the impact of translate on scrollWidth, scrollHeight
d5daadf7c87a641483741ee68c26b343acb5717cJenny Donnelly * @method _getScrollDims
42ee290e5cc998848c8ec5c1d96315e3db73b340Satyen Desai * @returns {Array} The offsetWidth, offsetHeight, scrollWidth and scrollHeight as an array: [offsetWidth, offsetHeight, scrollWidth, scrollHeight]
d5daadf7c87a641483741ee68c26b343acb5717cJenny Donnelly // Ideally using CSSMatrix - don't think we have it normalized yet though.
d5daadf7c87a641483741ee68c26b343acb5717cJenny Donnelly // origX = (new WebKitCSSMatrix(cb.getComputedStyle("transform"))).e;
d5daadf7c87a641483741ee68c26b343acb5717cJenny Donnelly // origY = (new WebKitCSSMatrix(cb.getComputedStyle("transform"))).f;
609b3fdb3368975ebd66bf9ef6a074e3ca726524Jenny Donnelly // TODO: Is this OK? Just in case it's called 'during' a transition.
aa1e03f2af02ffea69e75323bf4fff95cbf736c5Satyen Desai this._forceHWTransforms = false; // the z translation was causing issues with picking up accurate scrollWidths in Chrome/Mac.
42ee290e5cc998848c8ec5c1d96315e3db73b340Satyen Desai dims = [bb.get("offsetWidth"), bb.get("offsetHeight"), bb.get('scrollWidth'), bb.get('scrollHeight')];
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * This method gets invoked whenever the height or width attributes change,
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * allowing us to determine which scrolling axes need to be enabled.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @method _uiDimensionsChange
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @protected
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass var sv = this,
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * Internal state, defines whether or not the scrollview can scroll vertically
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @property _scrollsVertical
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @type boolean
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @protected
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * Internal state, defines the maximum amount that the scrollview can be scrolled along the Y axis
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @property _maxScrollY
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @type number
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @protected
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * Internal state, defines the minimum amount that the scrollview can be scrolled along the Y axis
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @property _minScrollY
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @type number
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @protected
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * Internal state, cached scrollHeight, for performance
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @property _scrollHeight
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @type number
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @protected
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * Internal state, defines whether or not the scrollview can scroll horizontally
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @property _scrollsHorizontal
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @type boolean
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @protected
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * Internal state, defines the maximum amount that the scrollview can be scrolled along the X axis
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @property _maxScrollX
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @type number
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @protected
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * Internal state, defines the minimum amount that the scrollview can be scrolled along the X axis
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @property _minScrollX
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @type number
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @protected
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * Internal state, cached scrollWidth, for performance
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @property _scrollWidth
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @type number
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @protected
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * Execute a flick at the end of a scroll action
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @method _flick
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @param distance {Number} The distance (in px) the user scrolled before the flick
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @param time {Number} The number of ms the scroll event lasted before the flick
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @protected
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass _flick: function(e) {
6bb97cfdea627b5bb0523ad4e6d2623c5fbf6954Satyen Desai * Internal state, currently calculated velocity from the flick
6bb97cfdea627b5bb0523ad4e6d2623c5fbf6954Satyen Desai * @property _currentVelocity
6bb97cfdea627b5bb0523ad4e6d2623c5fbf6954Satyen Desai * @type number
6bb97cfdea627b5bb0523ad4e6d2623c5fbf6954Satyen Desai * @protected
45be43296becb0d27a3414d29d9b4e3a1e3448b4Derek Gathright scrollToY = scrollY - (e.wheelDelta * scrollOffset);
45be43296becb0d27a3414d29d9b4e3a1e3448b4Derek Gathright // if we have scrollbars plugin, update & set the flash timer on the scrollbar
45be43296becb0d27a3414d29d9b4e3a1e3448b4Derek Gathright // TODO: The scrollbars should handle this themselves
45be43296becb0d27a3414d29d9b4e3a1e3448b4Derek Gathright // or just this
45be43296becb0d27a3414d29d9b4e3a1e3448b4Derek Gathright // this.scrollbars._hostDimensionsChange();
45be43296becb0d27a3414d29d9b4e3a1e3448b4Derek Gathright // prevent browser default behavior on mouse scroll
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * Execute a single frame in the flick animation
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @method _flickFrame
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @protected
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass _flickFrame: function() {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass var sv = this,
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass sv._flickTimer = Y.later(step, sv, '_flickFrame', null, true);
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * Stop the animation timer
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @method _killTimer
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @param fireEvent {Boolean} If true, fire the scrollEnd event
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @protected
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass var sv = this;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * The scrollX, scrollY setter implementation
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @method _setScroll
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @param {Number} val
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @param {String} dim
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @return {Number} The constrained value, if it exceeds min/max range
6bb97cfdea627b5bb0523ad4e6d2623c5fbf6954Satyen Desai var bouncing = this._cachedBounce || this.get(BOUNCE),
6bb97cfdea627b5bb0523ad4e6d2623c5fbf6954Satyen Desai maxScroll = (dim == DIM_X) ? this._maxScrollX : this._maxScrollY,
6bb97cfdea627b5bb0523ad4e6d2623c5fbf6954Satyen Desai max = bouncing ? maxScroll + range : maxScroll;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * Setter for the scrollX attribute
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @method _setScrollX
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @param val {Number} The new scrollX value
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @return {Number} The normalized value
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @protected
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * Setter for the scrollY ATTR
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @method _setScrollY
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @param val {Number} The new scrollY value
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @return {Number} The normalized value
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @protected
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // Y.ScrollView static properties
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * The identity of the widget.
10d8bafc5c24f3a4285cf6060a1935ba5cfc4b85Luke Smith * @property NAME
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @type String
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @default 'scrollview'
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @protected
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * Static property used to define the default attribute configuration of
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * the Widget.
10d8bafc5c24f3a4285cf6060a1935ba5cfc4b85Luke Smith * @property ATTRS
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @type {Object}
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @protected
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * The scroll position in the y-axis
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @attribute scrollY
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @type Number
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @default 0
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * The scroll position in the x-axis
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @attribute scrollX
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @type Number
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @default 0
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * Drag coefficent for inertial scrolling. The closer to 1 this
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * value is, the less friction during scrolling.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @attribute deceleration
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @default 0.93
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * Drag coefficient for intertial scrolling at the upper
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * and lower boundaries of the scrollview. Set to 0 to
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * disable "rubber-banding".
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @attribute bounce
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @type Number
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @default 0.1
6bb97cfdea627b5bb0523ad4e6d2623c5fbf6954Satyen Desai * The minimum distance and/or velocity which define a flick. Can be set to false,
6bb97cfdea627b5bb0523ad4e6d2623c5fbf6954Satyen Desai * to disable flick support (note: drag support is enabled/disabled separately)
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @attribute flick
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @type Object
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @default Object with properties minDistance = 10, minVelocity = 0.3.
6bb97cfdea627b5bb0523ad4e6d2623c5fbf6954Satyen Desai * Enable/Disable dragging the ScrollView content (note: flick support is enabled/disabled separately)
6bb97cfdea627b5bb0523ad4e6d2623c5fbf6954Satyen Desai * @attribute drag
6bb97cfdea627b5bb0523ad4e6d2623c5fbf6954Satyen Desai * @type boolean
6bb97cfdea627b5bb0523ad4e6d2623c5fbf6954Satyen Desai * @default true
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * List of class names used in the scrollview's DOM
10d8bafc5c24f3a4285cf6060a1935ba5cfc4b85Luke Smith * @property CLASS_NAMES
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @type Object
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * Flag used to source property changes initiated from the DOM
10d8bafc5c24f3a4285cf6060a1935ba5cfc4b85Luke Smith * @property UI_SRC
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @type String
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @default "ui"
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * The default bounce distance in pixels
10d8bafc5c24f3a4285cf6060a1935ba5cfc4b85Luke Smith * @property BOUNCE_RANGE
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @type Number
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @default 150
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * The interval used when animating the flick
10d8bafc5c24f3a4285cf6060a1935ba5cfc4b85Luke Smith * @property FRAME_STEP
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @type Number
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @default 30
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * The default easing used when animating the flick
10d8bafc5c24f3a4285cf6060a1935ba5cfc4b85Luke Smith * @property EASING
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @type String
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @default 'cubic-bezier(0, 0.1, 0, 1.0)'
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * The default easing to use when animating the bounce snap back.
10d8bafc5c24f3a4285cf6060a1935ba5cfc4b85Luke Smith * @property SNAP_EASING
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @type String
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @default 'ease-out'
10d8bafc5c24f3a4285cf6060a1935ba5cfc4b85Luke Smith * Object map of style property names used to set transition properties.
d8d2286d8330892bb02eb2bf0735322f559ef5efSatyen Desai * Defaults to the vendor prefix established by the Transition module.
d8d2286d8330892bb02eb2bf0735322f559ef5efSatyen Desai * The configured property names are `_TRANSITION.DURATION` (e.g. "WebkitTransitionDuration") and
d8d2286d8330892bb02eb2bf0735322f559ef5efSatyen Desai * `_TRANSITION.PROPERTY (e.g. "WebkitTransitionProperty").
10d8bafc5c24f3a4285cf6060a1935ba5cfc4b85Luke Smith * @property _TRANSITION
d8d2286d8330892bb02eb2bf0735322f559ef5efSatyen Desai DURATION : Transition._VENDOR_PREFIX + "TransitionDuration",
d8d2286d8330892bb02eb2bf0735322f559ef5efSatyen Desai PROPERTY : Transition._VENDOR_PREFIX + "TransitionProperty"
7dff9877fcd73e6db005c517f14a66bf2a9bf82eDerek Gathright}, '@VERSION@' ,{skinnable:true, requires:['widget', 'event-gestures', 'transition']});