scrollview-scrollbars-debug.js revision cc438feb3ca2316f1b8ece51eed4ae6eabe5b61d
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * Provides a plugin, which adds support for a scroll indicator to ScrollView instances
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * @module scrollview-scrollbars
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * ScrollView plugin that adds scroll indicators to ScrollView instances
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * @class ScrollViewScrollbars
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * @namespace Plugin
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * @extends Plugin.Base
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * @constructor
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync ScrollbarsPlugin.superclass.constructor.apply(this, arguments);
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync showing: getClassName(SCROLLVIEW, SCROLLBAR, 'showing'),
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync scrollbarV: getClassName(SCROLLVIEW, SCROLLBAR, 'vert'),
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync scrollbarH: getClassName(SCROLLVIEW, SCROLLBAR, 'horiz'),
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync scrollbarVB: getClassName(SCROLLVIEW, SCROLLBAR, 'vert', 'basic'),
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync scrollbarHB: getClassName(SCROLLVIEW, SCROLLBAR, 'horiz', 'basic'),
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * The identity of the plugin
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * @property ScrollViewScrollbars.NAME
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * @type String
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * @default 'scrollbars-plugin'
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsyncScrollbarsPlugin.NAME = 'pluginScrollViewScrollbars';
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * The namespace on which the plugin will reside.
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * @property ScrollViewScrollbars.NS
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * @type String
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * @default 'scrollbars'
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * HTML template for the scrollbar
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * @property ScrollViewScrollbars.SCROLLBAR_TEMPLATE
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * @type Object
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync '<span class="' + _classNames.child + ' ' + _classNames.first + '"></span>',
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync '<span class="' + _classNames.child + ' ' + _classNames.middle + '"></span>',
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync '<span class="' + _classNames.child + ' ' + _classNames.last + '"></span>',
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * The default attribute configuration for the plugin
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * @property ScrollViewScrollbars.ATTRS
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * @type Object
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * Vertical scrollbar node
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * @attribute verticalNode
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * @type Y.Node
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync value: Y.Node.create(ScrollbarsPlugin.SCROLLBAR_TEMPLATE)
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * Horizontal scrollbar node
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * @attribute horizontalNode
f9105e3999e3d6db9a2bd0277865c9caf3b7dc46vboxsync * @type Y.Node
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync value: Y.Node.create(ScrollbarsPlugin.SCROLLBAR_TEMPLATE)
64863d3a0ffadf1ac248b295b78be5d55db6ee13vboxsyncY.namespace("Plugin").ScrollViewScrollbars = Y.extend(ScrollbarsPlugin, Y.Plugin.Base, {
e7c4c205cb0af88b5ef0786be46da94847a9a37bvboxsync * Designated initializer
64863d3a0ffadf1ac248b295b78be5d55db6ee13vboxsync * @method initializer
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync initializer: function() {
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync this.afterHostMethod('_uiDimensionsChange', this._hostDimensionsChange);
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * Set up the DOM nodes for the scrollbars. This method is invoked whenver the
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * host's _uiDimensionsChange fires, giving us the opportunity to remove un-needed
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * scrollbars, as well as add one if necessary.
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * @method _hostDimensionsChange
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * @protected
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync } else if(!host._scrollsVertical && verticalNodeInDoc) {
4aebc69aadd38c5c13ed4211d60635ad49538275vboxsync // Horizontal
4aebc69aadd38c5c13ed4211d60635ad49538275vboxsync if(host._scrollsHorizontal && !horizontalNodeInDoc) {
4aebc69aadd38c5c13ed4211d60635ad49538275vboxsync } else if(!host._scrollsHorizontal && horizontalNodeInDoc) {
4aebc69aadd38c5c13ed4211d60635ad49538275vboxsync * Position and resize the scroll bars according to the content size
4aebc69aadd38c5c13ed4211d60635ad49538275vboxsync * @method _update
4aebc69aadd38c5c13ed4211d60635ad49538275vboxsync * @param currentPos {Number} The current scrollX or scrollY value (not used here, but passed by default from _uiScrollX/_uiScrollY)
4aebc69aadd38c5c13ed4211d60635ad49538275vboxsync * @param duration {Number} Number of ms of animation (optional) - used when snapping to bounds
4aebc69aadd38c5c13ed4211d60635ad49538275vboxsync * @param easing {String} Optional easing equation to use during the animation, if duration is set
4aebc69aadd38c5c13ed4211d60635ad49538275vboxsync * @protected
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync scrollHeight = host._scrollHeight || cb.get('scrollHeight'),
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync scrollWidth = host._scrollWidth || cb.get('scrollWidth'),
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync // TODO: Remove 4px cross dependency on CSS
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync scrollSize = Math.floor(height * (height/scrollHeight));
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync scrollPos = Math.floor((currentY/(scrollHeight - height) ) * (height-scrollSize)) * -1;
241adddf415cbdf66230864a215b24415f482e72vboxsync scrollSize = scrollSize - (scrollPos - (height - scrollSize));
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync transition.transform = 'translate(0,0) scaleY('+(size)+')';
241adddf415cbdf66230864a215b24415f482e72vboxsync transition.transform = 'translate(0,'+(scrollSize-10)+'px)';
241adddf415cbdf66230864a215b24415f482e72vboxsync verticalNode.get('children').item(2).transition(transition);
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync scrollSize = Math.floor(width * (width/scrollWidth));
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync scrollPos = Math.floor((currentX/(scrollWidth - width) ) * (width-scrollSize)) * -1;
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync scrollSize = scrollSize - (scrollPos - (width - scrollSize));
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync transition.transform = 'translate(0,0) scaleX('+(size)+')';
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync //transition.bottom = 0;
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync //transition.bottom = transformY;
3dd1d8fdf12303b292d9ee378edbc5f5fb6d6cb5vboxsync transition.transform = 'translate('+(scrollSize-12)+'px,0)';
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync //transition.bottom = 0;
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync if (!basic) { horizontalNode.get('children').item(2).transition(transition); }
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * Show the scroll bar indicators
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * @method show
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * @param animated {Boolean} Whether or not to animate the showing
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * Hide the scroll bar indicators
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * @method hide
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * @param animated {Boolean} Whether or not to animate the hiding
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * Internal hide/show implementation utility method
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * @method _show
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * @param {Object} show
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * @param {Object} animated
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * @protected
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * Momentarily flash the scroll bars to indicate current scroll position
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * @method flash
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync flash: function() {
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync if(host._scrollsVertical && (host._scrollHeight > host.get('height'))) {
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync if(host._scrollsHorizontal && (host._scrollWidth > this.get('host').get('width'))) {
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync this.show(true);
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync this._flashTimer = Y.later(800, this, 'hide', true);
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * Setter for the verticalNode attribute
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * @method _setVerticalNode
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * @param node {Y.Node} The Y.Node instance for the scrollbar
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * @protected
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync * Setter for the horizontalNode attribute
acfd0f69e98191229ae3d97174e5fee9b950fe29vboxsync * @method _setHorizontalNode
acfd0f69e98191229ae3d97174e5fee9b950fe29vboxsync * @param node {Y.Node} The Y.Node instance for the scrollbar
acfd0f69e98191229ae3d97174e5fee9b950fe29vboxsync * @protected
febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync}, '@VERSION@' ,{skinnable:true, requires:['plugin']});