+/*\r
+ * scroll 要素は常にひとつ\r
+ * 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
+ 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
+ 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
+ console.log( '-fadeout-' );\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
directionLocked : '',\r
startTime : 0,\r
endTime : 0,\r
- isAnimating : false,\r
isInTransition : false,\r
\r
hasHScroll : false,\r
Constructor : function( user, layout, args ){\r
this[ 'Super' ]( user, layout, args );\r
this._containerNode = X_Pair_get( this.containerNode );\r
- this.xnodeSlider = this._containerNode.xnode[ 'className' ]( 'ScrollSlider' ).listen( X_EVENT_ANIME_END, this, X_UI_ScrollBox_onAnimeEnd );\r
+ this.xnodeSlider = this._containerNode.xnode[ 'className' ]( 'ScrollSlider' )[ 'listen' ]( X_EVENT_ANIME_END, this, X_UI_ScrollBox_onAnimeEnd );\r
this.xnode[ 'className' ]( 'ScrollBox' );\r
},\r
\r
this.lastScrollHeight !== this._containerNode.boxHeight ||\r
this.lastBoxWidth !== this.boxWidth || this.lastBoxHeight !== this.boxHeight\r
){\r
- X_UI_rootData[ 'listenOnce' ]( XUI_Event.LAYOUT_COMPLETE, this, X_UI_ScrollBox_onLayoutComplete );\r
+ console.log( 'scroll - calc' );\r
+ XUI_rootData[ 'listenOnce' ]( XUI_Event.LAYOUT_COMPLETE, this, X_UI_ScrollBox_onLayoutComplete );\r
};\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
+ this.xnodeSlider[ 'stop' ]();\r
};\r
}\r
\r
\r
function X_UI_ScrollBox_onLayoutBefore( e ){\r
if( e[ 'cancelable' ] && this.isInTransition && X_Node_Anime_translateZ ){\r
- this[ 'listenOnce' ]( XUI_Event.SCROLL_END, X_UI_rootData, X_UI_rootData.calculate );\r
- return X_Callback_PREVENT_DEFAULT;\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 / this.scrollX : 0;\r
- this.scrollYRatio = this.scrollY ? this.scrollYMax / this.scrollY : 0;\r
- this.xnodeSlider.stop();\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
+ return X_CALLBACK_NONE;\r
};\r
\r
function X_UI_ScrollBox_onLayoutComplete( e ){\r
// scroll の停止、GPU の解除\r
- var font = this.fontSize = this.xnodeSlider.call( 'fontSize' );\r
+ var font = this.fontSize = this.xnodeSlider[ 'call' ]( 'fontSize' );\r
\r
this.scrollXMax = ( this.boxWidth - this._containerNode.boxWidth ) * font | 0;\r
this.scrollYMax = ( this.boxHeight - this._containerNode.boxHeight ) * font | 0;\r
X_UI_ScrollBox_translate( this, this.scrollXMax * this.scrollXRatio, this.scrollYMax * this.scrollYRatio, 100, '', 300 );\r
} else {\r
// scroller 作る\r
- this[ 'listen' ]( XUI_Event._POINTER_DOWN, this, X_UI_ScrollBox_onStart );\r
- X_UI_rootData[ 'listen' ]( XUI_Event.LAYOUT_BEFORE, this, X_UI_ScrollBox_onLayoutBefore );\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
this.scrolling = true;\r
// scroll 不要\r
if( this.scrolling ){\r
// scroller 削除\r
- this[ 'unlisten' ]( XUI_Event._POINTER_DOWN, this, X_UI_ScrollBox_onStart );\r
- X_UI_rootData[ 'unlisten' ]( XUI_Event.LAYOUT_BEFORE, this, X_UI_ScrollBox_onLayoutBefore );\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
\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 scrollBoxH = that.fontSize * that.boxHeight,\r
+ scrollBoxW = that.fontSize * that.boxWidth,\r
+ indicatorH, indicatorW;\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
-function X_UI_ScrollBox_onStart( e ){\r
- var ret = X_Callback_NONE;\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
- // React to left mouse button only\r
- if( e.pointerType === 'mouse' && e.button !== 0 ){\r
- return ret;\r
+ if( that.hasVScroll && XUI_ScrollBox_indicatorV ){\r
+ indicatorH = scrollBoxH * scrollBoxH / ( - that.scrollYMax + scrollBoxH );\r
+ scrollBoxH -= indicatorH;\r
+\r
+ XUI_ScrollBox_indicatorV\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
+ 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
};\r
\r
+ that.scrollX = x;\r
+ that.scrollXEm = x / that.fontSize;\r
+ that.scrollY = y;\r
+ that.scrollYEm = y / that.fontSize;\r
+};\r
+\r
+function X_UI_ScrollBox_onStart( e ){\r
+ var ret = X_CALLBACK_NONE;\r
+ \r
if( !this.scrollEnabled || ( this.initiated && e.pointerType !== this.initiated ) ){\r
return ret;\r
};\r
this.startTime = X_Timer_now();\r
\r
// スクロール中の停止\r
- if( this.isInTransition || this.isAnimating ){\r
- this.isInTransition = this.isAnimating = false;\r
+ if( this.isInTransition ){\r
+ this.isInTransition = false;\r
+ //console.log( '-1-' );\r
this[ 'dispatch' ]( XUI_Event.SCROLL_END );\r
- this.xnodeSlider.stop();\r
+ // TODO current位置\r
+ this.xnodeSlider[ 'stop' ]();\r
}; \r
\r
this.startX = this.scrollX;\r
this.pointX = e.pageX;\r
this.pointY = e.pageY;\r
\r
- console.log( 'scrollstart ' + e.pageY );\r
- \r
- this[ 'listen' ]( XUI_Event._POINTER_MOVE, this, X_UI_ScrollBox_onMove );\r
- this[ 'listen' ]( [ XUI_Event._POINTER_UP, XUI_Event._POINTER_CANCEL ], this, X_UI_ScrollBox_onEnd );\r
+ console.log( 'scrollstart ' + e.pageY + e.target.className() );\r
\r
- return ret | X_Callback_PREVENT_DEFAULT;\r
+ return ret | X_CALLBACK_PREVENT_DEFAULT;\r
};\r
\r
function X_UI_ScrollBox_onMove( e ){\r
- var ret = X_Callback_NONE,\r
+ var ret = X_CALLBACK_NONE,\r
deltaX, deltaY, timestamp,\r
newX, newY,\r
absDistX, absDistY;\r
// 規定以上の move でスクロール開始\r
\r
-console.log( 'scrollmove ' + e.buttons + ' ' + e.button );\r
+//console.log( 'scrollmove ' + e.buttons + ' ' + e.button );\r
\r
if( !this.scrollEnabled || e.pointerType !== this.initiated ){\r
return ret;\r
};\r
- \r
- if( e.buttons !== 1 ){\r
- return X_UI_ScrollBox_onEnd.call( this, e );\r
- };\r
\r
// gpu の用意\r
if( !this.xnodeSlider[ '_anime' ] ){\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
this.startY = this.scrollY;\r
};\r
// イベントの拘束\r
- return ret | X_Callback_PREVENT_DEFAULT | X_Callback_CAPTURE_POINTER;\r
+ return ret | X_CALLBACK_PREVENT_DEFAULT | X_CALLBACK_CAPTURE_POINTER;\r
};\r
\r
function X_UI_ScrollBox_onEnd( e ){\r
- var ret = X_Callback_NONE,\r
+ var ret = X_CALLBACK_NONE,\r
time = 0,\r
easing = '',\r
newX, newY,\r
momentumX, momentumY,\r
duration, distanceX, distanceY;\r
- \r
- this[ 'unlisten' ]( XUI_Event._POINTER_MOVE, this, X_UI_ScrollBox_onMove );\r
- this[ 'unlisten' ]( [ XUI_Event._POINTER_UP, XUI_Event._POINTER_CANCEL ], this, X_UI_ScrollBox_onEnd );\r
+ \r
+ //console.log( e.type + ' onend ' + XUI_Event.POINTER_OUT );\r
\r
if( !this.scrollEnabled || e.pointerType !== this.initiated ){\r
+ //console.log( e.type + ' onend 1 ' + e.pointerType + ' ' + this.initiated );\r
return ret;\r
};\r
\r
\r
// reset if we are outside of the boundaries\r
if( X_UI_ScrollBox_resetPosition( this, this.bounceTime ) ){\r
- return ret;\r
+ //console.log( e.type + ' onend 2 ' + XUI_Event.POINTER_OUT );\r
+ return ret | X_CALLBACK_PREVENT_DEFAULT | X_CALLBACK_RELEASE_POINTER;\r
};\r
\r
// we scrolled less than 10 pixels\r
if( !this.moved ){\r
- // this[ 'dispatch' ]( X_EVENT_CANCELED );\r
- console.log( 'we scrolled less than 10 pixels ' + e.pageY );\r
- return ret;\r
+ this[ 'dispatch' ]( X_EVENT_CANCELED );\r
+ //console.log( 'we scrolled less than 10 pixels ' + e.pageY );\r
+ return ret | X_CALLBACK_PREVENT_DEFAULT | X_CALLBACK_RELEASE_POINTER;\r
};\r
\r
// start momentum animation if needed\r
time = Math.max( momentumX.duration, momentumY.duration ) | 0;\r
this.isInTransition = true;\r
} else {\r
- console.log( '慣性無し' );\r
+ //console.log( '慣性無し' );\r
};\r
\r
if( newX != this.scrollX || newY != this.scrollY ){\r
easing = 'quadratic';\r
};\r
\r
- console.log( 'end2 x:' + newX + ' y:' + newY + ' t:' + time );\r
+ //console.log( 'end2 x:' + newX + ' y:' + newY + '<-y:' + this.scrollY + ' 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
+ return ret | X_CALLBACK_PREVENT_DEFAULT | X_CALLBACK_RELEASE_POINTER;\r
};\r
\r
function X_UI_ScrollBox_resetPosition( that, time ){\r
};\r
\r
if( x === that.scrollX && y === that.scrollY ){\r
- console.log( 'no バウンド y:' + y + ' max:' + that.scrollYMax );\r
+ //console.log( 'no バウンド y:' + y + ' max:' + that.scrollYMax );\r
return false;\r
};\r
\r
- //console.log( 'バウンド!' );\r
- //console.log( 'rese x:' + x + ' y:' + y );\r
+ //console.log( ' ===> resetPosition - バウンド!' );\r
+ //console.log( ' x:' + x + ' y:' + y );\r
that.scrollTo( x, y, time, that.bounceEasing, 1000 );\r
\r
return true;\r
};\r
\r
function X_UI_ScrollBox_onAnimeEnd( e ){\r
- if( e.target !== this.xnodeSlider || !this.isInTransition ){\r
- return X_Callback_NONE;\r
+ if( e.target !== this.xnodeSlider ){\r
+ console.log( '- not much -' );\r
+ console.dir(e);\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
+ //console.log(' -2.1- '+this.isInTransition );\r
+ return X_CALLBACK_NONE;\r
};\r
\r
function X_UI_ScrollBox_momentum( current, start, time, lowerMargin, wrapperSize, deceleration ){\r
};\r
};\r
\r
-// TODO Box の継承に！\r
X.UI.ScrollBox = X.UI.ChromeBox.inherits(\r
'ScrollBox',\r
X_Class.NONE,\r
if( XUI_ScrollBox.prototype.usableAttrs === XUI_ChromeBox.prototype.usableAttrs ){\r
XUI_ScrollBox.prototype.usableAttrs = supports = XUI_Attr_createAttrDef( XUI_Attr_Support, X_UI_ScrollBox_SUPPORT_ATTRS );\r
\r
- XUI_ScrollBox.prototype.attrClass = XUI_Attr_preset( XUI_Box.prototype.attrClass, supports, { width : '100%', height : '100%', bgColor : 0x111111 } );\r
+ XUI_ScrollBox.prototype.attrClass = XUI_Attr_preset( XUI_Box.prototype.attrClass, supports, { width : '100%', height : '100%', bgColor : 0x111111 } );\r
};\r
\r
var args = [\r
minHeight : '100%'\r
}\r
],\r
- i = arguments.length,\r
+ l = arguments.length, i = 0, j = 1,\r
arg, attr;\r
\r
- for( ; i; ){\r
- arg = arguments[ --i ];\r
+ for( ; i < l; ++i ){\r
+ arg = arguments[ i ];\r
if( arg[ 'instanceOf' ] && arg[ 'instanceOf' ]( XUI_LayoutBase ) ){\r
args[ 0 ] = arg;\r
} else\r
if( arg[ 'instanceOf' ] && arg[ 'instanceOf' ]( X.UI.AbstractUINode ) ){\r
- args[ args.length ] = arg;\r
+ args[ ++j ] = arg;\r
} else\r
if( X_Type_isObject( arg ) ){\r
- args[ args.length ] = attr = arg;\r
+ args[ ++j ] = attr = arg;\r
slider = attr.scrollSlider;\r
};\r
};\r
\r
}\r
}\r
-);
\ No newline at end of file
+);\r
+\r
OSDN Git Service
