* ScrollManager\r
* indicatorX, Y は再利用\r
*/\r
+var XUI_ScrollBox_current,\r
+ XUI_ScrollBox_indicatorV,\r
+ XUI_ScrollBox_indicatorH;\r
+\r
+function XUI_ScrollBox_start( scrollBox ){\r
+ // 既存スクロールの停止\r
+ if( scrollBox.hasVScroll ){\r
+ if( !XUI_ScrollBox_indicatorV ){\r
+ XUI_ScrollBox_indicatorV = X_Doc_create( 'div' )[ 'className' ]( 'ScrollBox-IndicatorV' );\r
+ \r
+ };\r
+ XUI_ScrollBox_indicatorV.parent !== scrollBox.xnode && scrollBox.xnode[ 'append' ]( XUI_ScrollBox_indicatorV );\r
+ XUI_ScrollBox_indicatorV[ 'animate' ](\r
+ { opacity : 0 },\r
+ { opacity : 1 },\r
+ 900, 'circular', 300\r
+ );\r
+ scrollBox\r
+ [ 'listenOnce' ]( [ X_EVENT_CANCELED, XUI_Event.SCROLL_END ], XUI_ScrollBox_indicatorV, XUI_ScrollBox_indicatorHandleEvent );\r
+ };\r
+ if( scrollBox.hasHScroll ){\r
+ if( !XUI_ScrollBox_indicatorH ){\r
+ XUI_ScrollBox_indicatorH = X_Doc_create( 'div' )[ 'className' ]( 'ScrollBox-IndicatorH' );\r
+ };\r
+ XUI_ScrollBox_indicatorH.parent !== scrollBox.xnode && scrollBox.xnode[ 'append' ]( XUI_ScrollBox_indicatorH );\r
+ XUI_ScrollBox_indicatorH[ 'animate' ](\r
+ { opacity : 0 },\r
+ { opacity : 1 },\r
+ 900, 'circular', 300\r
+ );\r
+ scrollBox\r
+ [ 'listenOnce' ]( [ X_EVENT_CANCELED, XUI_Event.SCROLL_END ], XUI_ScrollBox_indicatorH, XUI_ScrollBox_indicatorHandleEvent );\r
+ };\r
+};\r
+\r
+function XUI_ScrollBox_indicatorHandleEvent( e ){\r
+ switch( e.type ){\r
+ case X_EVENT_CANCELED :\r
+ case XUI_Event.SCROLL_END :\r
+ this[ 'animate' ](\r
+ { opacity : 1 },\r
+ { opacity : 0 },\r
+ 900, 'circular', 300\r
+ );\r
+ break;\r
+ };\r
+};\r
\r
\r
var X_UI_ScrollBox_SUPPORT_ATTRS = {\r
_containerNode : null,\r
xnodeSlider : null,\r
\r
- xnodeIndicatorX : null,\r
- xnodeIndicatorY : null,\r
- \r
Constructor : function( user, layout, args ){\r
this[ 'Super' ]( user, layout, args );\r
this._containerNode = X_Pair_get( this.containerNode );\r
this.lastScrollHeight !== this._containerNode.boxHeight ||\r
this.lastBoxWidth !== this.boxWidth || this.lastBoxHeight !== this.boxHeight\r
){\r
+ console.log( 'scroll - calc' );\r
X_UI_rootData[ 'listenOnce' ]( XUI_Event.LAYOUT_COMPLETE, this, X_UI_ScrollBox_onLayoutComplete );\r
};\r
},\r
this[ 'listenOnce' ]( XUI_Event.SCROLL_END, X_UI_rootData, X_UI_rootData.calculate );\r
return X_CALLBACK_PREVENT_DEFAULT;\r
};\r
- this.scrollXRatio = this.scrollX ? this.scrollXMax / this.scrollX : 0;\r
- this.scrollYRatio = this.scrollY ? this.scrollYMax / this.scrollY : 0;\r
+ this.scrollXRatio = this.scrollX / this.scrollXMax;\r
+ this.scrollYRatio = this.scrollY / this.scrollYMax;\r
this.xnodeSlider[ 'stop' ]();\r
this.isInTransition = false;\r
return X_CALLBACK_NONE;\r
};\r
};\r
\r
- // TODO use scrollLeft, scrollTop\r
- function X_UI_ScrollBox_translate( that, x, y, opt_time, opt_easing, opt_release ){\r
- \r
- opt_time = 0 <= opt_time ? opt_time : 0;\r
- opt_easing = opt_easing === '' ? '' : opt_easing || 'circular';\r
- opt_release = 0 <= opt_release ? opt_release : 300;\r
- \r
- that.xnodeSlider[ 'animate' ](\r
- {\r
- x : that.scrollX,\r
- y : that.scrollY\r
- },\r
- {\r
- x : x,\r
- y : y\r
- },\r
- opt_time, opt_easing, opt_release\r
- );\r
- \r
- that.scrollX = x;\r
- that.scrollY = y;\r
- \r
- if( that.indicators ){\r
- for( i = that.indicators.length; i--; ){\r
- that.indicators[ i ].updatePosition();\r
- };\r
- };\r
- };\r
+// TODO use scrollLeft, scrollTop\r
+function X_UI_ScrollBox_translate( that, x, y, opt_time, opt_easing, opt_release ){\r
+ var scrollBoxSize, indicatorSize;\r
+ \r
+ opt_time = 0 <= opt_time ? opt_time : 0;\r
+ opt_easing = opt_easing === '' ? '' : opt_easing || 'circular';\r
+ opt_release = 0 <= opt_release ? opt_release : 300;\r
+ \r
+ that.xnodeSlider[ 'animate' ](\r
+ {\r
+ x : that.scrollX,\r
+ y : that.scrollY\r
+ },\r
+ {\r
+ x : x,\r
+ y : y\r
+ },\r
+ opt_time, opt_easing, opt_release\r
+ );\r
+\r
+ if( that.hasVScroll && XUI_ScrollBox_indicatorV ){\r
+ scrollBoxSize = that.fontSize * that.boxHeight;\r
+ indicatorSize = scrollBoxSize * scrollBoxSize / ( - that.scrollYMax + scrollBoxSize );\r
+ scrollBoxSize -= indicatorSize;\r
+ XUI_ScrollBox_indicatorV\r
+ [ 'css' ]({\r
+ height : ( indicatorSize | 0 ) + 'px'\r
+ })\r
+ [ 'animate' ](\r
+ {\r
+ y : scrollBoxSize * that.scrollY / that.scrollYMax\r
+ },\r
+ {\r
+ y : scrollBoxSize * y / that.scrollYMax,\r
+ opacity : 1\r
+ },\r
+ opt_time, opt_easing, opt_release\r
+ );\r
+ };\r
+ if( that.hasHScroll && XUI_ScrollBox_indicatorH ){\r
+ scrollBoxSize = that.fontSize * that.boxWidth;\r
+ indicatorSize = scrollBoxSize * scrollBoxSize / ( - that.scrollXMax + scrollBoxSize );\r
+ scrollBoxSize -= indicatorSize;\r
+ XUI_ScrollBox_indicatorH\r
+ [ 'css' ]({\r
+ width : ( indicatorSize | 0 ) + 'px'\r
+ })\r
+ [ 'animate' ](\r
+ {\r
+ x : scrollBoxSize * that.scrollX / that.scrollXMax\r
+ },\r
+ {\r
+ x : scrollBoxSize * x / that.scrollXMax,\r
+ opacity : 1\r
+ },\r
+ opt_time, opt_easing, opt_release\r
+ );\r
+ };\r
+ \r
+ that.scrollX = x;\r
+ that.scrollY = y;\r
+};\r
\r
function X_UI_ScrollBox_onStart( e ){\r
var ret = X_CALLBACK_NONE;\r
// スクロール中の停止\r
if( this.isInTransition ){\r
this.isInTransition = false;\r
+ console.log( '-1-' );\r
this[ 'dispatch' ]( XUI_Event.SCROLL_END );\r
// TODO current位置\r
this.xnodeSlider[ 'stop' ]();\r
this.moved = true;\r
this.minusX = deltaX;\r
this.minusY = deltaY;\r
+ // indicator\r
+ XUI_ScrollBox_start( this );\r
} else {\r
this[ 'dispatch' ]( XUI_Event.SCROLL_MOVE );\r
};\r
\r
// we scrolled less than 10 pixels\r
if( !this.moved ){\r
- // this[ 'dispatch' ]( X_EVENT_CANCELED );\r
+ this[ 'dispatch' ]( X_EVENT_CANCELED );\r
console.log( 'we scrolled less than 10 pixels ' + e.pageY );\r
return ret;\r
};\r
\r
console.log( 'end2 x:' + newX + ' y:' + newY + ' t:' + time );\r
this.scrollTo( newX, newY, time, easing, 1000 );\r
- return ret;\r
+ } else {\r
+ console.log( 'end1 x:' + newX + ' y:' + newY );\r
+ this.scrollTo( newX, newY, 0, '', 1000 ); // ensures that the last position is rounded\r
+ console.log( '-3-' );\r
+ this[ 'dispatch' ]( XUI_Event.SCROLL_END ); \r
};\r
-\r
- console.log( 'end1 x:' + newX + ' y:' + newY );\r
- this.scrollTo( newX, newY, 0, '', 1000 ); // ensures that the last position is rounded\r
-\r
- this[ 'dispatch' ]( XUI_Event.SCROLL_END );\r
- \r
return ret;\r
};\r
\r
};\r
\r
function X_UI_ScrollBox_onAnimeEnd( e ){\r
- if( e.target !== this.xnodeSlider || !this.isInTransition ){\r
- return X_CALLBACK_NONE;\r
- };\r
- if( !X_UI_ScrollBox_resetPosition( this, this.bounceTime ) ){\r
+ if( e.target === this.xnodeSlider && this.isInTransition && !X_UI_ScrollBox_resetPosition( this, this.bounceTime ) ){\r
this.isInTransition = false;\r
+ console.log( '-2-' );\r
this[ 'dispatch' ]( XUI_Event.SCROLL_END );\r
};\r
return X_CALLBACK_NONE;\r
OSDN Git Service
