* ScrollManager\r
* indicatorX, Y は再利用\r
*/\r
-var XUI_ScrollBox_current,\r
+var XUI_ScrollBox_useCSSP = !X_UA[ 'IE5' ],\r
+ 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_current && XUI_ScrollBox_current !== scrollBox ){\r
+ XUI_ScrollBox_indicatorV &&\r
+ XUI_ScrollBox_current[ 'unlisten' ]( [ X_EVENT_CANCELED, XUI_Event.SCROLL_END ], XUI_ScrollBox_indicatorV, XUI_ScrollBox_indicatorHandleEvent );\r
+ \r
+ XUI_ScrollBox_indicatorH &&\r
+ XUI_ScrollBox_current[ 'unlisten' ]( [ X_EVENT_CANCELED, XUI_Event.SCROLL_END ], XUI_ScrollBox_indicatorH, XUI_ScrollBox_indicatorHandleEvent );\r
+ };\r
+\r
+ if( scrollBox && 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
+ if( scrollBox.xnode !== XUI_ScrollBox_indicatorV.parent ){\r
+ console.log( '*** Scroll Indicator add ***' );\r
+ scrollBox.xnode[ 'append' ]( XUI_ScrollBox_indicatorV );\r
+ XUI_ScrollBox_indicatorV[ 'animate' ]({\r
+ 'from' : { opacity : 0 },\r
+ 'to' : { opacity : 0.5 },\r
+ 'duration' : 900,\r
+ 'easing' : 'circular',\r
+ 'lazyRelease' : 300\r
+ });\r
+ scrollBox\r
+ [ 'listen' ]( [ X_EVENT_CANCELED, XUI_Event.SCROLL_END ], XUI_ScrollBox_indicatorV, XUI_ScrollBox_indicatorHandleEvent );\r
+ };\r
+ } else\r
+ if( XUI_ScrollBox_indicatorV ){\r
+ console.log( '*** Scroll Indicator remove ***' );\r
+ XUI_ScrollBox_indicatorV[ 'remove' ]();\r
};\r
- if( scrollBox.hasHScroll ){\r
+ \r
+ if( scrollBox && 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
+ if( scrollBox.xnode !== XUI_ScrollBox_indicatorH.parent ){ \r
+ scrollBox.xnode[ 'append' ]( XUI_ScrollBox_indicatorH );\r
+ XUI_ScrollBox_indicatorH[ 'animate' ]({\r
+ 'from' : { opacity : 0 },\r
+ 'to' : { opacity : 0.5 },\r
+ 'duration' : 900,\r
+ 'easing' : 'circular',\r
+ 'lazyRelease' : 300\r
+ });\r
+ scrollBox\r
+ [ 'listen' ]( [ X_EVENT_CANCELED, XUI_Event.SCROLL_END ], XUI_ScrollBox_indicatorH, XUI_ScrollBox_indicatorHandleEvent ); \r
+ };\r
+ } else\r
+ if( XUI_ScrollBox_indicatorH ){\r
+ XUI_ScrollBox_indicatorH[ 'remove' ]();\r
};\r
+ \r
+ XUI_ScrollBox_current = scrollBox;\r
};\r
\r
function XUI_ScrollBox_indicatorHandleEvent( e ){\r
+ //if( !XUI_ScrollBox_useCSSP ) return;\r
switch( e.type ){\r
case X_EVENT_CANCELED :\r
case XUI_Event.SCROLL_END :\r
console.log( '-fadeout-' );\r
- this[ 'animate' ](\r
- { opacity : 1 },\r
- { opacity : 0 },\r
- 900, 'circular', 300\r
- );\r
+ this[ 'animate' ]({\r
+ 'from' : { opacity : 0.5 },\r
+ 'to' : { opacity : 0 },\r
+ 'duration' : 900,\r
+ 'easing' : 'circular',\r
+ 'lazyRelease' : 300\r
+ });\r
break;\r
};\r
};\r
\r
_remove : function(){\r
XUI_AbstractUINode.prototype._remove.apply( this, arguments );\r
+ \r
if( this.scrolling ){\r
- // remove scroll\r
+ // scroller 削除\r
+ this[ 'unlisten' ]( XUI_Event._POINTER_DOWN, X_UI_ScrollBox_onStart )\r
+ [ 'unlisten' ]( XUI_Event.DRAG, X_UI_ScrollBox_onMove )\r
+ [ 'unlisten' ]( XUI_Event.DRAG_END, X_UI_ScrollBox_onEnd );\r
+ XUI_rootData[ 'unlisten' ]( XUI_Event.LAYOUT_BEFORE, this, X_UI_ScrollBox_onLayoutBefore );\r
+ \r
+ XUI_rootData[ 'unlisten' ]( XUI_Event.LAYOUT_COMPLETE, this, X_UI_ScrollBox_onLayoutComplete );\r
+ this[ 'unlisten' ]( XUI_Event.SCROLL_END, XUI_rootData, XUI_rootData.calculate );\r
+ \r
+ XUI_ScrollBox_useCSSP ? this.xnodeSlider[ 'stop' ]() : this.xnode[ 'stop' ]();\r
+ \r
+ XUI_ScrollBox_current === this && XUI_ScrollBox_start( null );\r
+ \r
+ this.scrolling = false;\r
};\r
}\r
\r
);\r
\r
function X_UI_ScrollBox_onLayoutBefore( e ){\r
- if( e[ 'cancelable' ] && this.isInTransition && X_Node_Anime_translateZ ){\r
+ if( e[ 'cancelable' ] && this.isInTransition && X_NodeAnime_translateZ ){\r
this[ 'listenOnce' ]( XUI_Event.SCROLL_END, XUI_rootData, XUI_rootData.calculate );\r
return X_CALLBACK_PREVENT_DEFAULT;\r
};\r
this.scrollXRatio = this.scrollX / this.scrollXMax;\r
this.scrollYRatio = this.scrollY / this.scrollYMax;\r
- this.xnodeSlider[ 'stop' ]();\r
+ XUI_ScrollBox_useCSSP ? this.xnodeSlider[ 'stop' ]() : this.xnode[ 'stop' ]();\r
this.isInTransition = false;\r
return X_CALLBACK_NONE;\r
};\r
X_UI_ScrollBox_translate( this, this.scrollXMax * this.scrollXRatio, this.scrollYMax * this.scrollYRatio, 100, '', 300 );\r
} else {\r
// scroller 作る\r
- // shadow の listen には this が必要!\r
- // TODO AbstractUI の listen が悪い!\r
- this[ 'listen' ]( XUI_Event._POINTER_DOWN, this, X_UI_ScrollBox_onStart )\r
- [ 'listen' ]( XUI_Event.DRAG, this, X_UI_ScrollBox_onMove );\r
- this[ 'listen' ]( XUI_Event.DRAG_END, this, X_UI_ScrollBox_onEnd );\r
+ this[ 'listen' ]( XUI_Event._POINTER_DOWN, X_UI_ScrollBox_onStart )\r
+ [ 'listen' ]( XUI_Event.DRAG, X_UI_ScrollBox_onMove )\r
+ [ 'listen' ]( XUI_Event.DRAG_END, X_UI_ScrollBox_onEnd );\r
XUI_rootData[ 'listen' ]( XUI_Event.LAYOUT_BEFORE, this, X_UI_ScrollBox_onLayoutBefore );\r
\r
X_UI_ScrollBox_translate( this, this.scrollXMax * this.scrollXRatio, this.scrollYMax * this.scrollYRatio, 100, '', 300 );\r
// scroll 不要\r
if( this.scrolling ){\r
// scroller 削除\r
- this[ 'unlisten' ]( XUI_Event._POINTER_DOWN, this, X_UI_ScrollBox_onStart )\r
- [ 'unlisten' ]( XUI_Event.DRAG, this, X_UI_ScrollBox_onMove );\r
- this[ 'unlisten' ]( XUI_Event.DRAG_END, this, X_UI_ScrollBox_onEnd );\r
+ this[ 'unlisten' ]( XUI_Event._POINTER_DOWN, X_UI_ScrollBox_onStart )\r
+ [ 'unlisten' ]( XUI_Event.DRAG, X_UI_ScrollBox_onMove )\r
+ [ 'unlisten' ]( XUI_Event.DRAG_END, X_UI_ScrollBox_onEnd );\r
XUI_rootData[ 'unlisten' ]( XUI_Event.LAYOUT_BEFORE, this, X_UI_ScrollBox_onLayoutBefore );\r
\r
( this.scrollX !== 0 || this.scrollY !== 0 ) && X_UI_ScrollBox_translate( this, 0, 0, 100, '', 300 );\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
+ console.log( 'scr ' + y );\r
+ \r
+ if( !XUI_ScrollBox_useCSSP ){\r
+ that.xnode[ 'animate' ]({\r
+ 'from' : {\r
+ scrollX : -that.scrollX,\r
+ scrollY : -that.scrollY\r
+ },\r
+ 'to' : {\r
+ scrollX : -x,\r
+ scrollY : -y\r
+ },\r
+ 'duration' : opt_time,\r
+ 'easing' : opt_easing\r
+ }); \r
+ } else {\r
+ that.xnodeSlider[ 'animate' ]({\r
+ 'from' : {\r
+ x : that.scrollX,\r
+ y : that.scrollY\r
+ },\r
+ 'to' : {\r
+ x : x,\r
+ y : y\r
+ },\r
+ 'duration' : opt_time,\r
+ 'easing' : opt_easing,\r
+ 'lazyRelease' : opt_release\r
+ }); \r
+ };\r
\r
if( X_UA[ 'IE' ] < 6 ){\r
XUI_ScrollBox_indicatorV && XUI_ScrollBox_indicatorV[ 'css' ]( 'left', ( scrollBoxW - that.fontSize * 0.6 | 0 ) + 'px' );\r
XUI_ScrollBox_indicatorH && XUI_ScrollBox_indicatorH[ 'css' ]( 'top' , ( scrollBoxH - that.fontSize * 0.6 | 0 ) + 'px' );\r
};\r
\r
- if( that.hasVScroll && XUI_ScrollBox_indicatorV ){\r
+ if( that.hasVScroll && XUI_ScrollBox_indicatorV && XUI_ScrollBox_indicatorV.parent === that.xnode ){\r
indicatorH = scrollBoxH * scrollBoxH / ( - that.scrollYMax + scrollBoxH );\r
scrollBoxH -= indicatorH;\r
\r
[ 'css' ]({\r
height : ( indicatorH | 0 ) + 'px'\r
})\r
- [ 'animate' ](\r
- {\r
- y : scrollBoxH * that.scrollY / that.scrollYMax\r
- },\r
- {\r
- y : scrollBoxH * y / that.scrollYMax,\r
- opacity : 1\r
- },\r
- opt_time, opt_easing, opt_release\r
- );\r
- };\r
- if( that.hasHScroll && XUI_ScrollBox_indicatorH ){\r
+ [ 'animate' ]({\r
+ 'from' : {\r
+ y : scrollBoxH * that.scrollY / that.scrollYMax },\r
+ 'to' : {\r
+ y : scrollBoxH * y / that.scrollYMax,\r
+ opacity : 0.5\r
+ },\r
+ 'duration' : opt_time,\r
+ 'easing' : opt_easing,\r
+ 'lazyRelease' : opt_release\r
+ });\r
+ };\r
+ if( that.hasHScroll && XUI_ScrollBox_indicatorH && XUI_ScrollBox_indicatorH.parent === that.xnode ){\r
indicatorW = scrollBoxW * scrollBoxW / ( - that.scrollXMax + scrollBoxW );\r
scrollBoxW -= indicatorW;\r
XUI_ScrollBox_indicatorH\r
[ 'css' ]({\r
width : ( indicatorW | 0 ) + 'px'\r
})\r
- [ 'animate' ](\r
- {\r
- x : scrollBoxW * that.scrollX / that.scrollXMax\r
- },\r
- {\r
- x : scrollBoxW * x / that.scrollXMax,\r
- opacity : 1\r
- },\r
- opt_time, opt_easing, opt_release\r
- );\r
+ [ 'animate' ]({\r
+ 'from' : {\r
+ x : scrollBoxW * that.scrollX / that.scrollXMax },\r
+ 'to' : {\r
+ x : scrollBoxW * x / that.scrollXMax,\r
+ opacity : 0.5\r
+ },\r
+ 'duration' : opt_time,\r
+ 'easing' : opt_easing,\r
+ 'lazyRelease' : opt_release\r
+ });\r
};\r
\r
that.scrollX = x;\r
//console.log( '-1-' );\r
this[ 'dispatch' ]( XUI_Event.SCROLL_END );\r
// TODO current位置\r
- this.xnodeSlider[ 'stop' ]();\r
- }; \r
+ XUI_ScrollBox_useCSSP ? this.xnodeSlider[ 'stop' ]() : this.xnode[ 'stop' ]();\r
+ };\r
\r
this.startX = this.scrollX;\r
this.startY = this.scrollY;\r
};\r
\r
// gpu の用意\r
- if( !this.xnodeSlider[ '_anime' ] ){\r
+ if( !XUI_ScrollBox_useCSSP ? ( !this.xnode[ '_anime' ] || !this.xnode[ '_anime' ].phase ) : ( !this.xnodeSlider[ '_anime' ] || !this.xnodeSlider[ '_anime' ].phase ) ){\r
//console.log( 'gpuレイヤーの用意 ' + e.pageY );\r
//console.log( 'mov1 x:' + this.scrollX + ' y:' + this.scrollY );\r
X_UI_ScrollBox_translate( this, this.scrollX, this.scrollY, 0, '', 300 );\r
this.directionX = 0 < deltaX ? -1 : deltaX < 0 ? 1 : 0;\r
this.directionY = 0 < deltaY ? -1 : deltaY < 0 ? 1 : 0;\r
\r
- //console.log( 'mov2 x:' + newX + ' y:' + newY );\r
+ console.log( 'mov2 x:' + newX + ' y:' + newY );\r
X_UI_ScrollBox_translate( this, newX, newY, 0, '', 300 );\r
\r
if( 300 < timestamp - this.startTime ){\r
};\r
\r
function X_UI_ScrollBox_onAnimeEnd( e ){\r
- if( e.target !== this.xnodeSlider ){\r
- console.log( '- not much -' );\r
- console.dir(e);\r
- };\r
- if( e.target === this.xnodeSlider && this.isInTransition && !X_UI_ScrollBox_resetPosition( this, this.bounceTime ) ){\r
+ if( 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
OSDN Git Service
