\r
var X_UI_ScrollBox_SUPPORT_ATTRS = {\r
// スクロール開始するために必要な移動距離、縦か横、どちらか制限する場合、より重要\r
- directionLockThreshold : [ 10, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.LENGTH ],\r
- scrollXEnabled : [ true, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.BOOLEAN ],\r
- scrollYEnabled : [ true, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.BOOLEAN ],\r
- scrollEnabled : [ true, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.BOOLEAN ],\r
- bounceEnabled : [ true, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.BOOLEAN ],\r
- bounceTime : [ 600, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.TIME ],\r
- useWheel : [ true, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.BOOLEAN ],\r
- useKey : [ true, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.BOOLEAN ],\r
- hasScrollShadow : [ true, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.BOOLEAN ],\r
- scrollShadowColor : [ '#000', X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.COLOR ]\r
+ directionLockThreshold : [ 10, XUI_Dirty.CLEAN, XUI_Attr_USER.UINODE, XUI_Attr_Type.LENGTH ],\r
+ scrollXEnabled : [ true, XUI_Dirty.CLEAN, XUI_Attr_USER.UINODE, XUI_Attr_Type.BOOLEAN ],\r
+ scrollYEnabled : [ true, XUI_Dirty.CLEAN, XUI_Attr_USER.UINODE, XUI_Attr_Type.BOOLEAN ],\r
+ scrollEnabled : [ true, XUI_Dirty.CLEAN, XUI_Attr_USER.UINODE, XUI_Attr_Type.BOOLEAN ],\r
+ bounceEnabled : [ true, XUI_Dirty.CLEAN, XUI_Attr_USER.UINODE, XUI_Attr_Type.BOOLEAN ],\r
+ bounceTime : [ 600, XUI_Dirty.CLEAN, XUI_Attr_USER.UINODE, XUI_Attr_Type.TIME ],\r
+ useWheel : [ true, XUI_Dirty.CLEAN, XUI_Attr_USER.UINODE, XUI_Attr_Type.BOOLEAN ],\r
+ useKey : [ true, XUI_Dirty.CLEAN, XUI_Attr_USER.UINODE, XUI_Attr_Type.BOOLEAN ],\r
+ hasScrollShadow : [ true, XUI_Dirty.CLEAN, XUI_Attr_USER.UINODE, XUI_Attr_Type.BOOLEAN ],\r
+ scrollShadowColor : [ '#000', XUI_Dirty.CLEAN, XUI_Attr_USER.UINODE, XUI_Attr_Type.COLOR ]\r
};\r
\r
\r
-X.UI._ScrollBox = X.UI._ChromeBox.inherits(\r
+var XUI_ScrollBox = XUI_ChromeBox.inherits(\r
'_ScrollBox',\r
- X_Class.PRIVATE_DATA | X_Class.SUPER_ACCESS,\r
+ X_Class.PRIVATE_DATA,\r
{\r
- //elmScroll : null,\r
- //elmScroller : null,\r
- //elmScrollbar : null,\r
- \r
directionLockThreshold : 10,\r
scrollXEnabled : true,\r
scrollYEnabled : true,\r
hasScrollShadow : true,\r
scrollShadowColor : '#000',\r
\r
- supportAttrs : XUI_Attr_createAttrDef( X.UI.Attr.Support, X_UI_ScrollBox_SUPPORT_ATTRS ),\r
+ supportAttrs : XUI_Attr_createAttrDef( XUI_Attr_Support, X_UI_ScrollBox_SUPPORT_ATTRS ),\r
\r
scrolling : false,\r
\r
\r
scrollX : 0, // px\r
scrollY : 0, // px\r
- maxScrollX : 0, // px\r
- maxScrollY : 0, // px\r
+ scrollXMax : 0, // px\r
+ scrollYMax : 0, // px\r
+ scrollXRatio : 0, // この値は scroll 不要になっても保持される。 scroll 必要時に参照される\r
+ scrollYRatio : 0, \r
startX : 0, // px\r
startY : 0, // px\r
absStartX : 0, // px\r
pointY : 0, // px\r
distX : 0, // px\r
distY : 0, // px\r
- directionX : 0, // px\r
- directionY : 0, // px \r
- scrollXPercent : 0, // この値は scroll 不要になっても保持される。 scroll 必要時に参照される\r
- scrollYPercent : 0,\r
+ directionX : 0, // -1, 0, 1\r
+ directionY : 0, // -1, 0, 1\r
\r
lastScrollWidth : 0,\r
lastScrollHeight : 0,\r
lastBoxWidth : 0,\r
lastBoxHeight : 0,\r
\r
- _containerNode : null,\r
- scrollManager : null,\r
+ _containerNode : null,\r
+ xnodeSlider : null,\r
\r
Constructor : function( layout, args ){\r
this[ 'Super' ]( layout, args );\r
this._containerNode = X_Class_getPrivate( this.containerNode );\r
- this._containerXNode = 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
creationComplete : function(){\r
- X.UI._Box.prototype.creationComplete.apply( this, arguments );\r
- this.scrollManager;\r
+ XUI_Box.prototype.creationComplete.apply( this, arguments );\r
},\r
\r
calculate : function(){\r
this.lastBoxWidth = this.boxWidth;\r
this.lastBoxHeight = this.boxHeight;\r
\r
- X.UI._Box.prototype.calculate.apply( this, arguments );\r
+ XUI_Box.prototype.calculate.apply( this, arguments );\r
\r
// TODO root の layout_complete 後に。\r
// TODO calculate 前に scroll の解放。\r
this.lastScrollHeight !== this._containerNode.boxHeight ||\r
this.lastBoxWidth !== this.boxWidth || this.lastBoxHeight !== this.boxHeight\r
){\r
- X_UI_rootData[ 'listenOnce' ]( X.UI.Event.LAYOUT_COMPLETE, this, X_UI_ScrollBox_onLayoutComplete );\r
+ X_UI_rootData[ 'listenOnce' ]( XUI_Event.LAYOUT_COMPLETE, this, X_UI_ScrollBox_onLayoutComplete );\r
};\r
},\r
\r
},\r
\r
_remove : function(){\r
- X.UI._AbstractUINode.prototype._remove.apply( this, arguments );\r
+ XUI_AbstractUINode.prototype._remove.apply( this, arguments );\r
if( this.scrolling ){\r
// remove scroll\r
};\r
);\r
\r
function X_UI_ScrollBox_onLayoutBefore( e ){\r
- //this._containerXNode.stop();\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
};\r
\r
function X_UI_ScrollBox_onLayoutComplete( e ){\r
// scroll の停止、GPU の解除\r
- var font = this.fontSize = this._containerXNode.call( 'fontSize' );\r
+ var font = this.fontSize = this.xnodeSlider.call( 'fontSize' );\r
\r
- this.maxScrollX = ( this.boxWidth - this._containerNode.boxWidth ) * font;\r
- this.maxScrollY = ( this.boxHeight - this._containerNode.boxHeight ) * font;\r
+ this.scrollXMax = ( this.boxWidth - this._containerNode.boxWidth ) * font;\r
+ this.scrollYMax = ( this.boxHeight - this._containerNode.boxHeight ) * font;\r
\r
- this.hasHScroll = this.scrollXEnabled && this.maxScrollX < 0;\r
- this.hasVScroll = this.scrollYEnabled && this.maxScrollY < 0;\r
+ this.hasHScroll = this.scrollXEnabled && this.scrollXMax < 0;\r
+ this.hasVScroll = this.scrollYEnabled && this.scrollYMax < 0;\r
\r
if( !this.hasHScroll ){\r
- this.maxScrollX = 0;\r
+ this.scrollXMax = 0;\r
//this.scrollWidth = this.boxWidth;\r
};\r
\r
if( !this.hasVScroll ){\r
- this.maxScrollY = 0;\r
+ this.scrollYMax = 0;\r
//this.scrollHeight = this.boxHeight;\r
};\r
\r
if( this.hasHScroll || this.hasVScroll ){\r
// scroll が必要。\r
if( this.scrolling ){\r
- this.scrollTo( this.maxScrollX * this.scrollXPercent, this.maxScrollY * this.scrollYPercent, 100 );\r
+ X_UI_ScrollBox_translate( this, this.scrollXMax * this.scrollXRatio, this.scrollYMax * this.scrollYRatio, 0, '', 0 );\r
} else {\r
// scroller 作る\r
- this[ 'listen' ]( X.UI.Event._POINTER_DOWN, this, X_UI_ScrollBox_onStart );\r
- X_UI_rootData[ 'listen' ]( X.UI.Event.LAYOUT_BEFORE, this, X_UI_ScrollBox_onLayoutBefore );\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
\r
- this.scrollTo( this.maxScrollX * this.scrollXPercent, this.maxScrollY * this.scrollYPercent );\r
+ X_UI_ScrollBox_translate( this, this.scrollXMax * this.scrollXRatio, this.scrollYMax * this.scrollYRatio, 0, '', 0 );\r
this.scrolling = true;\r
};\r
} else\r
// scroll 不要\r
if( this.scrolling ){\r
// scroller 削除\r
- this[ 'unlisten' ]( X.UI.Event._POINTER_DOWN, this, X_UI_ScrollBox_onStart );\r
- X_UI_rootData[ 'unlisten' ]( X.UI.Event.LAYOUT_BEFORE, this, X_UI_ScrollBox_onLayoutBefore );\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
\r
- ( this.scrollX !== 0 || this.scrollY !== 0 ) && this.scrollTo( 0, 0 );\r
+ ( this.scrollX !== 0 || this.scrollY !== 0 ) && X_UI_ScrollBox_translate( this, 0, 0, 0, '', 0 );\r
\r
delete this.scrolling;\r
+ delete this.scrollXRatio;\r
+ delete this.scrollYRatio;\r
};\r
};\r
\r
opt_easing = opt_easing === '' ? '' : opt_easing || 'circular';\r
opt_release = 0 <= opt_release ? opt_release : 300;\r
\r
- that._containerXNode.animate(\r
+ that.xnodeSlider.animate(\r
{\r
x : that.scrollX,\r
y : that.scrollY\r
// スクロール中の停止\r
if( this.isInTransition || this.isAnimating ){\r
this.isInTransition = this.isAnimating = false;\r
- this[ 'dispatch' ]( X.UI.Event.SCROLL_END );\r
+ this[ 'dispatch' ]( XUI_Event.SCROLL_END );\r
}; \r
\r
this.startX = this.scrollX;\r
this.pointX = e.pageX;\r
this.pointY = e.pageY;\r
\r
- this[ 'listen' ]( X.UI.Event._POINTER_MOVE, this, X_UI_ScrollBox_onMove );\r
- this[ 'listen' ]( [ X.UI.Event._POINTER_UP, X.UI.Event._POINTER_CANCEL ], this, X_UI_ScrollBox_onEnd );\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
\r
return ret | X_Callback_PREVENT_DEFAULT;\r
};\r
};\r
\r
// gpu の用意\r
- if( !this._containerXNode[ '_anime' ] ){\r
+ if( !this.xnodeSlider[ '_anime' ] ){\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
deltaY = this.hasVScroll ? deltaY : 0;\r
\r
if( !this.moved ){\r
- this[ 'dispatch' ]( X.UI.Event.SCROLL_BEFORE_MOVE );\r
+ this[ 'dispatch' ]( XUI_Event.SCROLL_BEFORE_MOVE );\r
this.moved = true;\r
this.minusX = deltaX;\r
this.minusY = deltaY;\r
} else {\r
- this[ 'dispatch' ]( X.UI.Event.SCROLL_MOVE );\r
+ this[ 'dispatch' ]( XUI_Event.SCROLL_MOVE );\r
};\r
\r
newX = this.scrollX + deltaX;// - this.minusX;\r
newY = this.scrollY + deltaY;// - this.minusY;\r
\r
// Slow down if outside of the boundaries\r
- if( 0 < newX || newX < this.maxScrollX ){\r
- newX = this.bounceEnabled ? this.scrollX + ( deltaX ) / 3 : 0 < newX ? 0 : this.maxScrollX;\r
+ if( 0 < newX || newX < this.scrollXMax ){\r
+ newX = this.bounceEnabled ? this.scrollX + ( deltaX ) / 3 : 0 < newX ? 0 : this.scrollXMax;\r
};\r
\r
- if( 0 < newY || newY < this.maxScrollY ){\r
- //console.log( 'slow... ' + newY + ' ' + this.maxScrollY );\r
- newY = this.bounceEnabled ? this.scrollY + ( deltaY ) / 3 : 0 < newY ? 0 : this.maxScrollY;\r
+ if( 0 < newY || newY < this.scrollYMax ){\r
+ //console.log( 'slow... ' + newY + ' ' + this.scrollYMax );\r
+ newY = this.bounceEnabled ? this.scrollY + ( deltaY ) / 3 : 0 < newY ? 0 : this.scrollYMax;\r
};\r
\r
this.directionX = 0 < deltaX ? -1 : deltaX < 0 ? 1 : 0;\r
this.startY = this.scrollY;\r
};\r
// イベントの拘束\r
- return ret | X_Callback_PREVENT_DEFAULT | X_Callback_MONOPOLY;\r
+ return ret | X_Callback_PREVENT_DEFAULT | X_Callback_CAPTURE_POINTER;\r
};\r
\r
function X_UI_ScrollBox_onEnd( e ){\r
momentumX, momentumY,\r
duration, distanceX, distanceY;\r
\r
- this[ 'unlisten' ]( X.UI.Event._POINTER_MOVE, this, X_UI_ScrollBox_onMove );\r
- this[ 'unlisten' ]( [ X.UI.Event._POINTER_UP, X.UI.Event._POINTER_CANCEL ], this, X_UI_ScrollBox_onEnd );\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
if( !this.scrollEnabled || e.pointerType !== this.initiated ){\r
return ret;\r
// start momentum animation if needed\r
if( this.momentumEnabled && duration < 300 ){\r
momentumX = this.hasHScroll ?\r
- X_UI_ScrollBox_momentum( this.scrollX, this.startX, duration, this.maxScrollX, this.bounceEnabled ? this.boxWidth * this.fontSize : 0, this.deceleration ) :\r
+ X_UI_ScrollBox_momentum( this.scrollX, this.startX, duration, this.scrollXMax, this.bounceEnabled ? this.boxWidth * this.fontSize : 0, this.deceleration ) :\r
{ destination: newX, duration: 0 };\r
momentumY = this.hasVScroll ?\r
- X_UI_ScrollBox_momentum( this.scrollY, this.startY, duration, this.maxScrollY, this.bounceEnabled ? this.boxHeight * this.fontSize : 0, this.deceleration ) :\r
+ X_UI_ScrollBox_momentum( this.scrollY, this.startY, duration, this.scrollYMax, this.bounceEnabled ? this.boxHeight * this.fontSize : 0, this.deceleration ) :\r
{ destination: newY, duration: 0 };\r
newX = momentumX.destination;\r
newY = momentumY.destination;\r
\r
if( newX != this.scrollX || newY != this.scrollY ){\r
// change easing function when scroller goes out of the boundaries\r
- if( 0 < newX || newX < this.maxScrollX || 0 < newY || newY < this.maxScrollY ){\r
+ if( 0 < newX || newX < this.scrollXMax || 0 < newY || newY < this.scrollYMax ){\r
easing = 'quadratic';\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' ]( X.UI.Event.SCROLL_END );\r
+ this[ 'dispatch' ]( XUI_Event.SCROLL_END );\r
\r
return ret;\r
};\r
if( !that.hasHScroll || 0 < that.scrollX ){\r
x = 0;\r
} else\r
- if( that.scrollX < that.maxScrollX ){\r
- x = that.maxScrollX;\r
+ if( that.scrollX < that.scrollXMax ){\r
+ x = that.scrollXMax;\r
};\r
\r
if( !that.hasVScroll || 0 < that.scrollY ){\r
y = 0;\r
} else\r
- if( that.scrollY < that.maxScrollY ){\r
- y = that.maxScrollY;\r
+ if( that.scrollY < that.scrollYMax ){\r
+ y = that.scrollYMax;\r
};\r
\r
if( x === that.scrollX && y === that.scrollY ){\r
- console.log( 'no バウンド y:' + y + ' max:' + that.maxScrollY );\r
+ console.log( 'no バウンド y:' + y + ' max:' + that.scrollYMax );\r
return false;\r
};\r
\r
};\r
\r
function X_UI_ScrollBox_onAnimeEnd( e ){\r
- if( e.target !== this._containerXNode || !this.isInTransition ){\r
+ if( e.target !== this.xnodeSlider || !this.isInTransition ){\r
return X_Callback_NONE;\r
};\r
if( !X_UI_ScrollBox_resetPosition( this, this.bounceTime ) ){\r
this.isInTransition = false;\r
- this.dispatch( X.UI.Event.SCROLL_END );\r
+ this.dispatch( XUI_Event.SCROLL_END );\r
};\r
return X_Callback_NONE;\r
};\r
\r
X.UI.ScrollBox = X.UI.ChromeBox.inherits(\r
'ScrollBox',\r
- X_Class.SUPER_ACCESS,\r
- X.UI._ScrollBox,\r
+ X_Class.NONE,\r
+ XUI_ScrollBox,\r
{\r
Constructor : function(){\r
var args = [\r
- 0, // layout \r
+ XUI_Layout_Vertical, \r
{\r
name : 'ScrollBox-Scroller',\r
role : 'container',\r
}\r
],\r
i = arguments.length,\r
- arg, layout;\r
+ arg, layout, attr;\r
\r
for( ; i; ){\r
arg = arguments[ --i ];\r
- if( arg[ 'instanceOf' ] && arg[ 'instanceOf' ]( X.UI.Layout.Base ) ){\r
+ if( arg[ 'instanceOf' ] && arg[ 'instanceOf' ]( XUI_LayoutBase ) ){\r
layout = arg;\r
- } else {\r
+ } else\r
+ if( arg[ 'instanceOf' ] && arg[ 'instanceOf' ]( X.UI.AbstractUINode ) ){\r
args[ args.length ] = arg;\r
+ } else\r
+ if( X_Type_isObject( arg ) ){\r
+ attr = arg;\r
};\r
};\r
\r
- args[ 0 ] = X.UI.Layout.Vertical;\r
- \r
X_Class_newPrivate(\r
this,\r
- X.UI.Layout.Canvas,\r
+ XUI_Layout_Canvas,\r
[\r
{\r
width : '100%',\r
X.UI.VBox.apply( 0, args )\r
]\r
);\r
+ \r
+ attr && this.attr( attr );\r
},\r
scrollX : function(){\r
\r
OSDN Git Service
