From eedd028ba64be2ea0828cf686f1d0ec3bb4010d5 Mon Sep 17 00:00:00 2001 From: itozyun Date: Thu, 16 Apr 2015 22:01:49 +0900 Subject: [PATCH] Version 0.6.138, working X.UI.ScrollBox!, fix Node.prev & Node.next. --- 0.6.x/js/01_core/03_XType.js | 3 +- 0.6.x/js/01_core/06_XURL.js | 8 +- 0.6.x/js/02_dom/02_XNode.js | 52 +++-- 0.6.x/js/02_dom/09_XHTMLParser.js | 56 ++--- 0.6.x/js/02_dom/10_XNodeAnime.js | 45 ++-- 0.6.x/js/06_net/00_XNet.js | 2 +- 0.6.x/js/06_net/01_XNetXHR.js | 3 +- 0.6.x/js/20_ui/00_XUI.js | 38 +-- 0.6.x/js/20_ui/02_XUI_Attr.js | 115 ++++----- 0.6.x/js/20_ui/04_XUI_Event.js | 3 + 0.6.x/js/20_ui/05_XUI_Gesture.js | 2 +- 0.6.x/js/20_ui/06_AbstractUINode.js | 297 ++++++++++++------------ 0.6.x/js/20_ui/08_Box.js | 12 +- 0.6.x/js/20_ui/11_VBox.js | 8 +- 0.6.x/js/20_ui/12_HBox.js | 8 +- 0.6.x/js/20_ui/13_TileBox.js | 8 +- 0.6.x/js/20_ui/14_ChromeBox.js | 7 +- 0.6.x/js/20_ui/15_ScrollBox.js | 450 +++++++++++++++++++----------------- 0.6.x/js/20_ui/20_PageRoot.js | 20 +- 19 files changed, 601 insertions(+), 536 deletions(-) diff --git a/0.6.x/js/01_core/03_XType.js b/0.6.x/js/01_core/03_XType.js index fdf181c..a7a78aa 100644 --- a/0.6.x/js/01_core/03_XType.js +++ b/0.6.x/js/01_core/03_XType.js @@ -56,10 +56,11 @@ X[ 'Type' ] = { /** * Object か？判定する。typeof null === 'object' に対策済なので null は Object ではない。 + * new String(), new Number(), new Boolean() も typeof object なので対策 * @alias X.Type.isObject */ function X_Type_isObject( v ){ - return v && typeof v === 'object'; // typeof null === 'object' に対策 + return v && typeof v === 'object'; // && ( v !== v + '' && v !== v + 0 && v !== true ) ; // typeof null === 'object' に対策 }; /** * Function か？判定する。 diff --git a/0.6.x/js/01_core/06_XURL.js b/0.6.x/js/01_core/06_XURL.js index 9d2dd87..39951cb 100644 --- a/0.6.x/js/01_core/06_XURL.js +++ b/0.6.x/js/01_core/06_XURL.js @@ -48,13 +48,13 @@ var X_URL_BASE_URL = ( function( parts ){ */ X[ 'URL' ] = { - 'BASE_URL' : X_URL_BASE_URL, + 'BASE_URL' : X_URL_BASE_URL, - 'IS_FILE' : X_URL_IS_FILE, + 'IS_FILE' : X_URL_IS_FILE, - 'IS_LOCAL' : X_URL_IS_LOCAL, + 'IS_LOCAL' : X_URL_IS_LOCAL, - 'PARAMS' : X_URL_PARAMS, + 'PARAMS' : X_URL_PARAMS, 'toAbsolutePath' : X_URL_toAbsolutePath, diff --git a/0.6.x/js/02_dom/02_XNode.js b/0.6.x/js/02_dom/02_XNode.js index ab3d01c..c0bb170 100644 --- a/0.6.x/js/02_dom/02_XNode.js +++ b/0.6.x/js/02_dom/02_XNode.js @@ -142,7 +142,6 @@ var Node = X[ 'Node' ] = X_EventDispatcher[ 'inherits' ]( /** * NodeList と動作を一致させるためのプロパティ。常に 1。 * @type {number} - * @private * @alias Node.prototype.length */ length : 1, @@ -150,7 +149,6 @@ var Node = X[ 'Node' ] = X_EventDispatcher[ 'inherits' ]( /** * 親 Node。 * @type {Node} - * @private * @alias Node.prototype.parent */ parent : null, // remove された枝も親子構造は維持している。 @@ -671,7 +669,14 @@ function X_Node_appendAt( start, v ){ return this; case X_Node_TYPE.XNODE : // 親の xnodes から v を消す - v.parent && v[ 'remove' ](); + if( v.parent ){ + if( v.parent === this ){ + i = v[ 'getOrder' ](); + if( i === start ) return this; + if( i < start ) --start; + }; + v[ 'remove' ](); + }; // IE4 でテキストノードの追加、FIXED 済でない場合、親に要素の追加を通知 if( X_UA[ 'IE4' ] && !v[ '_tag' ] && ( this[ '_flags' ] & X_Node_State.IE4_FIXED ) === 0 ) this[ '_flags' ] |= X_Node_State.IE4_DIRTY_CHILDREN; break; @@ -716,14 +721,14 @@ function X_Node_appendTo( parent, opt_index ){ /** - * ノードの直前の要素を取得。または直前に挿入。 + * ノードの直前の要素を取得。または直前に挿入。挿入する要素が先にいる兄弟でも正しく動作する。 * @alias Node.prototype.prev - * @param {Node|string|HTMLElement|TextNode} [v] HTMLElement と TextNode は内部のみ。 + * @param {Node|string|HTMLElement|TextNode} [...v] HTMLElement と TextNode は内部のみ。 * @return {Node} 自身。チェインメソッド * @example childNode.prev( prevNode ); */ function X_Node_prev( v ){ - var parent = this.parent, xnodes, i, l, start; + var parent = this.parent, xnodes, i, l; // getter if( v === undefined ){ @@ -736,19 +741,18 @@ function X_Node_prev( v ){ if( !parent ) return this; l = arguments.length; - start = this[ 'getOrder' ](); if( 1 < l ){ - for( ; l; ){ - parent[ 'appendAt' ]( start, arguments[ --l ] ); + for( i = 0; l; ++i ){ + parent[ 'appendAt' ]( this[ 'getOrder' ]() - i, arguments[ --l ] ); }; return this; }; - parent[ 'appendAt' ]( start, v ); + parent[ 'appendAt' ]( this[ 'getOrder' ](), v ); return this; }; /** - * ノードの直後の要素を取得。または直後に挿入。 + * ノードの直後の要素を取得。または直後に挿入。挿入する要素が先にいる兄弟でも正しく動作する。 * @alias Node.prototype.next * @param {Node|string|HTMLElement|TextNode} [v] HTMLElement と TextNode は内部のみ。 * @return {Node} 自身。チェインメソッド @@ -769,23 +773,19 @@ function X_Node_next( v ){ l = arguments.length; start = this[ 'getOrder' ]() + 1; + if( parent[ '_xnodes' ].length <= start ){ - if( 1 < l ){ - for( i = 0; i < l; ++i ){ - parent[ 'append' ]( arguments[ i ] ); - }; - return this; + for( i = 0; i < l; ++i ){ + parent[ 'append' ]( arguments[ i ] ); }; - parent[ 'append' ]( v ); - return this; - }; + } else if( 1 < l ){ for( ; l; ){ - parent[ 'appendAt' ]( start, arguments[ --l ] ); + parent[ 'appendAt' ]( this[ 'getOrder' ]() + 1, arguments[ --l ] ); }; - return this; + } else { + parent[ 'appendAt' ]( start, v ); }; - parent[ 'appendAt' ]( start, v ); return this; }; @@ -1213,6 +1213,9 @@ function X_Node_call( name /*, opt_args... */ ){ return v; case 'fontSize' : return X_Node_CSS_getCharSize( this ); + case 'GPU' : + return this[ '_flags' ] & X_Node_State.GPU_NOW ? 'NOW' : + this[ '_flags' ] & X_Node_State.GPU_RELEASE_RESERVED ? '解除予約' : ''; case 'inGPU' : return !!( this[ '_flags' ] & ( X_Node_State.GPU_NOW | X_Node_State.GPU_RELEASE_RESERVED ) ); }; @@ -1359,13 +1362,12 @@ var X_Node__commitUpdate = }; // 2. GPU解放予約 - // TODO もしかしたらこのタイミングで更新できるかも。 if( that[ '_flags' ] & X_Node_State.GPU_RELEASE_RESERVED ){ - console.log( 'GPU 解放 ' ); + // console.log( 'GPU 解放 ' ); //X_Node_updateReservedByReleaseGPU = true; //X_Node__updateRawNode( that, elm ); that[ '_flags' ] &= X_Node_BitMask_RESET_GPU; - //return elm; + //return elm;// TODO もしかしたらこのタイミングで更新できるかも。 }; // 3. GPU予約 -> GPU diff --git a/0.6.x/js/02_dom/09_XHTMLParser.js b/0.6.x/js/02_dom/09_XHTMLParser.js index 60b6d27..764ce5f 100644 --- a/0.6.x/js/02_dom/09_XHTMLParser.js +++ b/0.6.x/js/02_dom/09_XHTMLParser.js @@ -8,7 +8,7 @@ var X_HTMLParser_CHARS = { 'A':1,'B':1,'C':1,'D':1,'E':1,'F':1,'G':1,'H':1,'I':1,'J':1,'K':1,'L':1,'M':1,'N':1,'O':1,'P':1,'Q':1,'R':1,'S':1,'T':1,'U':1,'V':1,'W':1,'X':1,'Y':1,'Z':1, 'a':2,'b':2,'c':2,'d':2,'e':2,'f':2,'g':2,'h':2,'i':2,'j':2,'k':2,'l':2,'m':2,'n':2,'o':2,'p':2,'q':2,'r':2,'s':2,'t':2,'u':2,'v':2,'w':2,'x':2,'y':2,'z':2, - // "0" ': 4, "1" : 4, "2" : 4, "3" : 4, "4" : 4, "5" : 4, "6" : 4, "7" : 4, "8" : 4, "9" : 4, closure compiler で minify すると ie4 で error、eval使う + '!':1,// "0" ': 4, "1" : 4, "2" : 4, "3" : 4, "4" : 4, "5" : 4, "6" : 4, "7" : 4, "8" : 4, "9" : 4, closure compiler で minify すると ie4 で error、eval使う '\t' : 16, '\r\n' : 16, '\r' : 16, '\n' : 16, '\f' : 16, '\b' : 16, ' ' : 16 }, @@ -55,8 +55,6 @@ var X_HTMLParser_CHARS = { var special = X_HTMLParser_special, //plainText = X_HTMLParser_plainText, startTime = async && X_Timer_now(), - _parseStartTag = X_HTMLParser__parseStartTag, - _parseEndTag = X_HTMLParser__parseEndTag, stack = async ? async[ 1 ] : [], lastHtml = html, chars, last, text, index; @@ -66,10 +64,10 @@ var X_HTMLParser_CHARS = { last = stack[ stack.length - 1 ]; // Make sure we're not in a script or style element - if ( last && special[ last ] === 1 ) { - if( 0 <= ( index = html.toUpperCase().indexOf( ' ' + obj.destX + ' d:' + obj.duration ); + // console.log( 'animate() ' + this[ '_id' ] + ' y:' + obj.startY + ' > ' + obj.destY + ' d:' + obj.duration ); return this; }; Node.prototype[ 'stop' ] = function(){ var obj = this[ '_anime' ]; - if( !obj ) return; + + if( !obj ) return this; + if( X_Node_Anime_hasTransition ){ obj.phase = 100; X_Node_Anime_needsDetection = true; @@ -154,24 +156,26 @@ function X_Node_Anime_reserveUpdate( before ){ X_Node_Anime_reserved = true; if( X_Node_updateTimerID ){ - console.log( before ? '> BEFORE_UPDATE' : '> UPDATED' ); + //console.log( before ? '> BEFORE_UPDATE' : '> UPDATED' ); before = false; X_System[ 'listenOnce' ]( before ? X_EVENT_BEFORE_UPDATE : X_EVENT_UPDATED, X_Node_Anime_updateAnimations ); } else { - console.log( '> Timer' ); + //console.log( '> Timer' ); // Opera12 requestAnimationFrame では transition が動かない、、、 X_Node_Anime_updateTimerID = X_UA[ 'Opera' ] ? X_Timer_once( 0, X_Node_Anime_updateAnimations ) : - X_Timer_requestFrame( X_Node_Anime_updateAnimations ); + X_Timer_requestFrame( X_Node_Anime_updateAnimations ); }; + } else { + // console.log( ' X_Node_Anime_reserved 済、予約なし' ); }; }; function X_Node_Anime_updateAnimations( v, updateNow ){ var i = X_Node_ANIMATIONS.length, ret, c = false; - //console.log( v.type || v ); + // console.log( v.type || v ); //console.log( 'updateAnimations len:' + i + ' time:' + v + ' det:' + X_Node_Anime_needsDetection ); @@ -287,7 +291,7 @@ function X_Node_Anime_updateAnimation( xnode ){ transitionDelay : '0s' // 0.001 にすると transitionend のタイミングが狂う、、、 }); - console.log( '開始位置 ' + phase ); + //console.log( '開始位置 ' + phase ); X_Node_Anime_updatePosition( xnode, obj.startX, obj.startY, obj.startA, phase === 8 ); xnode[ 'dispatch' ]( { type : X_EVENT_ANIME_START, gpu : phase === 8 } ); @@ -304,12 +308,12 @@ function X_Node_Anime_updateAnimation( xnode ){ transitionDuration : obj.duration + 'ms' }); - console.log( '修了位置 ' + phase ); + //console.log( '修了位置 ' + phase ); X_Node_Anime_updatePosition( xnode, obj.destX, obj.destY, obj.destA, obj.gpuParent ); obj.phase = 2; break; }; - console.log( 'duration = 0 の場合、アニメーションの解除' ); + //console.log( 'duration = 0 の場合、アニメーションの解除' ); // duration = 0 の場合、アニメーションの解除 case 3 : // アニメーションの解除 @@ -367,7 +371,7 @@ function X_Node_Anime_updateAnimation( xnode ){ case 15 : // GPU有効で停止（待機）している xnode の解除 //console.log( 'GPU有効で停止（待機）している xnode の解除' + xnode[ '_tag' ] + xnode[ 'getOrder' ]() ); - console.log( 'GPU有効で停止（待機）している xnode のGPU解除' ); + // console.log( 'GPU有効で停止（待機）している xnode のGPU解除' ); X_Node_Anime_clearTransition( xnode ); X_Node_Anime_updatePosition( xnode, obj.destX, obj.destY, obj.destA, false ); obj.gpuTimerID && X_Timer_remove( obj.gpuTimerID ); @@ -376,7 +380,7 @@ function X_Node_Anime_updateAnimation( xnode ){ case 100 : // stop() : アニメーションを中断して削除 //console.log( 'stop() gpu:' + obj.gpuParent ); - console.log( 'アニメーションを中断して削除' ); + // console.log( 'アニメーションを中断して削除' ); current = X_Node_Anime_getComputedPosition( xnode ); X_Node_Anime_clearTransition( xnode ); @@ -404,10 +408,15 @@ function X_Node_Anime_getComputedPosition( that ) { }; function X_Node_Anime_onTransitionEnd( e ){ - if( !this[ '_anime' ] || this[ '_anime' ].phase !== 2 ) return X_Callback_PREVENT_DEFAULT | X_Callback_STOP_PROPAGATION; - this[ '_anime' ].phase = 3; + // console.log( 'アニメ終了[onTransitionEnd] ' + ( this[ '_anime' ] && this[ '_anime' ].phase ) ); - console.log( 'トランジション終了' ); + if( !this[ '_anime' ] || this[ '_anime' ].phase !== 2 ){ + // ここで return してしまうと、view の更新イベント待ちの場合、アニメが止まる + X_Node_Anime_reserved && !X_Node_Anime_updateTimerID && !X_Node_updateTimerID && X_Node_Anime_reserveUpdate( X_Node_Anime_reserved = false ); + return X_Callback_PREVENT_DEFAULT | X_Callback_STOP_PROPAGATION; + }; + + this[ '_anime' ].phase = 3; X_Node_Anime_onTransition = true; this[ 'dispatch' ]( { type : X_EVENT_ANIME_END, gpu : this[ '_anime' ].gpuParent } ); @@ -424,7 +433,7 @@ function X_Node_Anime_onTransitionEnd( e ){ function X_Node_Anime_releaseGPULayer(){ var obj = this[ '_anime' ], tmp; if( !obj ){ - console.log( '_anime無' ); + // console.log( '_anime無' ); return; }; X_Node_Anime_clearTransition( this ); @@ -432,13 +441,13 @@ function X_Node_Anime_releaseGPULayer(){ X_Node_ANIMATIONS.splice( X_Node_ANIMATIONS.indexOf( this ), 1 ); delete obj.gpuTimerID; delete this[ '_anime' ]; - console.log( 'GPUレイヤーの破棄を指示' ); + //console.log( 'GPUレイヤーの破棄を指示' ); X_ViewPort[ 'listenOnce' ]( X_EVENT_AFTER_UPDATE, this, X_Node_Anime_gpuReleased ); }; function X_Node_Anime_gpuReleased(){ - console.log( 'GPU レイヤーが解放されました' ); + //console.log( 'GPU レイヤーが解放されました' ); this[ 'dispatch' ]( { type : X_EVENT_GPU_RELEASED, gpu : true } ); }; @@ -458,7 +467,7 @@ function X_Node_Anime_clearTransition( xnode ){ }; function X_Node_Anime_updatePosition( xnode, x, y, opacity, useGPU ){ - //console.log( 'y : ' + y + ' gpu : ' + !!useGPU ); + // console.log( 'updatePosition y:' + y + ' gpu:' + !!useGPU ); if( X_Node_Anime_hasTransform ){ xnode[ 'css' ]({ transform : 'translate(' + ( x | 0 ) + 'px,' + ( y | 0 ) + 'px)' + ( useGPU ? X_Node_Anime_translateZ : '' ), diff --git a/0.6.x/js/06_net/00_XNet.js b/0.6.x/js/06_net/00_XNet.js index 30779d1..8e1e63d 100644 --- a/0.6.x/js/06_net/00_XNet.js +++ b/0.6.x/js/06_net/00_XNet.js @@ -104,7 +104,7 @@ var X_NET_Queue = X_EventDispatcher[ 'inherits' ]( 'Constructor' : function( type, data ){ this.type = type; - this.data = data; + this.data = data; //this[ 'listenOnce' ]( X_EVENT_COMPLETE, X_NET_proxyDispatch ); X_EventDispatcher_systemListen( this, X_EVENT_COMPLETE, X_NET_proxyDispatch ); diff --git a/0.6.x/js/06_net/01_XNetXHR.js b/0.6.x/js/06_net/01_XNetXHR.js index 4ca0b62..4eb6988 100644 --- a/0.6.x/js/06_net/01_XNetXHR.js +++ b/0.6.x/js/06_net/01_XNetXHR.js @@ -68,8 +68,9 @@ X[ 'Net' ][ 'XHR' ] = { // Progress Events Chrome7, firefox3.5, ie10, opera12, Safari?, Chrome for Android 0.16 'PROGRESS' : false, // - 'UL_PROGRESS' : false + 'UL_PROGRESS' : false, + 'CORS' : X_Net_XHR_X_DOMAIN || ( X_Net_XHR_W3C && X_Net_XHR_W3C.withCredentials !== undefined ) }; if( X_Net_XHR_W3C || X_Net_XHR_ACTIVE_X ){ diff --git a/0.6.x/js/20_ui/00_XUI.js b/0.6.x/js/20_ui/00_XUI.js index 878677a..4212773 100644 --- a/0.6.x/js/20_ui/00_XUI.js +++ b/0.6.x/js/20_ui/00_XUI.js @@ -31,21 +31,6 @@ X.UI = { CONTENT : 4 // コンテンツが変更された }, - Util : { - createChecker : function( str ){ - var ret = {}, - ary = str.split( ',' ), - l = ary.length, - i = 0, v; - for( ; i < l; ){ - v = ary[ i ]; - ret[ v ] = ++i; - ret[ i ] = v; - }; - return ret; - } - }, - currentRootData : null, Layout : { @@ -63,3 +48,26 @@ X.UI = { } }; +/* + * 'none,chrome,container' を受け取ったら、 + * { + * 'none' : 1, + * 'chrome' : 2, + * 'container' : 3, + * 1 : 'none', + * 2 : 'chrome', + * 3 : 'container' + * }　こんな object を返す。 + */ +function XUI_createChecker( str ){ + var ret = {}, + ary = str.split( ',' ), + l = ary.length, + i = 0, v; + for( ; i < l; ){ + v = ary[ i ]; + ret[ v ] = ++i; + ret[ i ] = v; + }; + return ret; +}; diff --git a/0.6.x/js/20_ui/02_XUI_Attr.js b/0.6.x/js/20_ui/02_XUI_Attr.js index 0ae487f..846a2e2 100644 --- a/0.6.x/js/20_ui/02_XUI_Attr.js +++ b/0.6.x/js/20_ui/02_XUI_Attr.js @@ -4,61 +4,36 @@ X.UI.Attr = { USER : { XNODE : 0, - UINODE : 1, + UINODE : 1, // 値は _uinode にコピーされます。 LAYOUT : 2 }, Type : { - LIST : 0, - LENGTH : 1, // '1.5em' - MINUS_LENGTH : 2, - PERCENT : 4, // '90%', 0.0 ~ 1.0 こういう指定はできない！ - MINUS_PERCENT : 8, - NUMERICAL : 16, // 1.1 (lineHeight only) - AUTO : 32, // 'auto' - COLOR : 64, // 0x000000 ~ 0xFFFFFF, RED, #000000 ~ #FFFFFF, #000 ~ #FFF - URL : 128, - STRING : 128, - FONT_NAME : 256, - BOOLEAN : 512, - COMBI : 1024, - QUARTET : 2048, - DEFAULT_ONLY : 4096, - INIT_ONLY : 8192 + LIST : 16384, + LENGTH : 1, // '1.5em' + MINUS_LENGTH : 2, + PERCENT : 4, // '90%', 0.0 ~ 1.0 こういう指定はできない！ + MINUS_PERCENT : 8, + NUMERICAL : 16, // 1.1 (lineHeight only) + AUTO : 32, // 'auto' + COLOR : 64, // 0x000000 ~ 0xFFFFFF, RED, #000000 ~ #FFFFFF, #000 ~ #FFF + URL : 128, + STRING : 128, + FONT_NAME : 256, + BOOLEAN : 512, + COMBI : 1024, + QUARTET : 2048, + DEFAULT_ONLY : 4096, + INIT_ONLY : 8192 }, Option : { - BORDER_STYLE : X.UI.Util.createChecker( 'none,hidden,dotted,dashed,solid,double,groove,ridge,inset,outset' ), - ALIGN : X.UI.Util.createChecker( 'left,center,right,justify' ), - TEXT_DECORATION : X.UI.Util.createChecker( 'none,underline,overline,line-through,blink' ), - TEXT_TRANSFORM : X.UI.Util.createChecker( 'none,capitalize,lowercase,uppercase' ), - BOX_SIZING : X.UI.Util.createChecker( 'content,padding,border' ), - CURSOR : X.UI.Util.createChecker( 'pointer,wait' ) - }, - - createAttrDef : function( base, defs ){ - var F = base ? X_Object_clone( base ) : {}, - z = base ? base._last : 0, - n = 1, - p, def; - - // 属性定義の上書き - for( p in defs ){ - if( X_EMPTY_OBJECT[ p ] ) continue; - if( p === '_last' ) continue; - if( !X_Type_isArray( def = defs[ p ] ) ) continue; - F[ p ] = def; - if( !base || !X_Type_isArray( base[ p ] ) ){ - def.No = z += n; - // add - n = def[ 3 ] & X.UI.Attr.Type.QUARTET ? 4 : - def[ 3 ] & X.UI.Attr.Type.COMBI ? 2 : 1; - } else { - def.No = base[ p ].No; - }; - }; - F._last = z; - return F; + BORDER_STYLE : 'none,hidden,dotted,dashed,solid,double,groove,ridge,inset,outset', + ALIGN : 'left,center,right,justify', + TEXT_DECORATION : 'none,underline,overline,line-through,blink', + TEXT_TRANSFORM : 'none,capitalize,lowercase,uppercase', + BOX_SIZING : 'content,padding,border', + CURSOR : 'pointer,wait' }, CSS3 : { @@ -84,6 +59,34 @@ X.UI.Attr = { } }; + function XUI_Attr_createAttrDef( base, defs ){ + var F = base ? X_Object_clone( base ) : {}, + z = base ? base._last : 0, + n = 1, + p, def; + + // 属性定義の上書き + for( p in defs ){ + if( X_EMPTY_OBJECT[ p ] ) continue; + if( p === '_last' ) continue; + if( !X_Type_isArray( def = defs[ p ] ) ) continue; + F[ p ] = def; + if( !base || !X_Type_isArray( base[ p ] ) ){ + def.No = z += n; + // add + n = def[ 3 ] & X.UI.Attr.Type.QUARTET ? 4 : + def[ 3 ] & X.UI.Attr.Type.COMBI ? 2 : 1; + } else { + def.No = base[ p ].No; + }; + if( def[ 3 ] & X.UI.Attr.Type.LIST && X_Type_isString( def[ 4 ] ) ){ + def[ 4 ] = XUI_createChecker( def[ 4 ] ); + }; + }; + F._last = z; + return F; + }; + /* * 0: 初期値 : undefined は不可！ * 1: dirty @@ -91,20 +94,20 @@ X.UI.Attr = { * 3: 受け付けるデータ型 * 4: 選択方式の場合、その候補 */ -X.UI.Attr.Support = X.UI.Attr.createAttrDef( false, +X.UI.Attr.Support = XUI_Attr_createAttrDef( 0, { className : [ null, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.DEFAULT_ONLY | X.UI.Attr.Type.STRING ], pointerHoverClass : [ null, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.DEFAULT_ONLY | X.UI.Attr.Type.STRING ], pointerDownClass : [ null, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.DEFAULT_ONLY | X.UI.Attr.Type.STRING ], invalidLayoutColor: [ null, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.DEFAULT_ONLY | X.UI.Attr.Type.COLOR ], - role : [ 0, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.INIT_ONLY | X.UI.Attr.Type.LIST, 'none,chrome' ], + role : [ 1, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.INIT_ONLY | X.UI.Attr.Type.LIST, 'none,chrome' ], selectable : [ false, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.INIT_ONLY | X.UI.Attr.Type.BOOLEAN ], visible : [ true, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.BOOLEAN ], pointerEnabled : [ false, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.BOOLEAN ], pointerChildren : [ true, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.BOOLEAN ], - cursor : [ null, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.LIST, X.UI.Attr.Option.CURSOR ], + cursor : [ 1, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.LIST, X.UI.Attr.Option.CURSOR ], tooltip : [ null, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.STRING ], borderWidth : [ 0, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.QUARTET | X.UI.Attr.Type.LENGTH | X.UI.Attr.Type.PERCENT ], // em [ top, right, bottom, left ] @@ -116,14 +119,14 @@ X.UI.Attr.Support = X.UI.Attr.createAttrDef( false, height : [ X.UI.Attr.AUTO, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH | X.UI.Attr.Type.PERCENT | X.UI.Attr.Type.AUTO ], minHeight : [ 0, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH | X.UI.Attr.Type.PERCENT ], maxHeight : [ X.UI.Attr.AUTO, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH | X.UI.Attr.Type.PERCENT | X.UI.Attr.Type.AUTO ], - sizing : [ 0, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LIST, X.UI.Attr.Option.BOX_SIZING ], + sizing : [ 1, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LIST, X.UI.Attr.Option.BOX_SIZING ], left : [ null, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH | X.UI.Attr.Type.PERCENT | X.UI.Attr.Type.MINUS_LENGTH | X.UI.Attr.Type.MINUS_PERCENT ], top : [ null, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH | X.UI.Attr.Type.PERCENT | X.UI.Attr.Type.MINUS_LENGTH | X.UI.Attr.Type.MINUS_PERCENT ], bottom : [ null, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH | X.UI.Attr.Type.PERCENT | X.UI.Attr.Type.MINUS_LENGTH | X.UI.Attr.Type.MINUS_PERCENT ], right : [ null, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH | X.UI.Attr.Type.PERCENT | X.UI.Attr.Type.MINUS_LENGTH | X.UI.Attr.Type.MINUS_PERCENT ], borderColor : [ 0x0, X.UI.Dirty.PAINT, X.UI.Attr.USER.XNODE, X.UI.Attr.Type.QUARTET | X.UI.Attr.Type.COLOR ], // color [ top, right, bottom, left ] - borderStyle : [ 0, X.UI.Dirty.PAINT, X.UI.Attr.USER.XNODE, X.UI.Attr.Type.QUARTET | X.UI.Attr.Type.LIST, X.UI.Attr.Option.BORDER_STYLE ], // string [ top, right, bottom, left ] + borderStyle : [ 1, X.UI.Dirty.PAINT, X.UI.Attr.USER.XNODE, X.UI.Attr.Type.QUARTET | X.UI.Attr.Type.LIST, X.UI.Attr.Option.BORDER_STYLE ], // string [ top, right, bottom, left ] bgColor : [ 0xFFFFFF, X.UI.Dirty.PAINT, X.UI.Attr.USER.XNODE, X.UI.Attr.Type.COLOR ], // color, none fontColor : [ 0x0, X.UI.Dirty.PAINT, X.UI.Attr.USER.XNODE, X.UI.Attr.Type.COLOR ], @@ -135,9 +138,9 @@ X.UI.Attr.Support = X.UI.Attr.createAttrDef( false, lineHeight : [ 1, X.UI.Dirty.FONT, X.UI.Attr.USER.XNODE, X.UI.Attr.Type.NUMERICAL ], // percent letterSpacing : [ 0, X.UI.Dirty.FONT, X.UI.Attr.USER.XNODE, X.UI.Attr.Type.LENGTH ], wordSpacing : [ 0, X.UI.Dirty.FONT, X.UI.Attr.USER.XNODE, X.UI.Attr.Type.LENGTH ], - textAlign : [ 0, X.UI.Dirty.FONT, X.UI.Attr.USER.XNODE, X.UI.Attr.Type.LIST, X.UI.Attr.Option.ALIGN ], - textDecoration : [ 0, X.UI.Dirty.FONT, X.UI.Attr.USER.XNODE, X.UI.Attr.Type.LIST, X.UI.Attr.Option.TEXT_DECORATION ], - textTransform : [ 0, X.UI.Dirty.FONT, X.UI.Attr.USER.XNODE, X.UI.Attr.Type.LIST, X.UI.Attr.Option.TEXT_TRANSFORM ] + textAlign : [ 1, X.UI.Dirty.FONT, X.UI.Attr.USER.XNODE, X.UI.Attr.Type.LIST, X.UI.Attr.Option.ALIGN ], + textDecoration : [ 1, X.UI.Dirty.FONT, X.UI.Attr.USER.XNODE, X.UI.Attr.Type.LIST, X.UI.Attr.Option.TEXT_DECORATION ], + textTransform : [ 1, X.UI.Dirty.FONT, X.UI.Attr.USER.XNODE, X.UI.Attr.Type.LIST, X.UI.Attr.Option.TEXT_TRANSFORM ] } ); diff --git a/0.6.x/js/20_ui/04_XUI_Event.js b/0.6.x/js/20_ui/04_XUI_Event.js index 893359f..8f38aae 100644 --- a/0.6.x/js/20_ui/04_XUI_Event.js +++ b/0.6.x/js/20_ui/04_XUI_Event.js @@ -6,6 +6,9 @@ X.UI.Event = { CREATION_COMPLETE : ++X_Event_last, REMOVED : ++X_Event_last, + LAYOUT_BEFORE : ++X_Event_last, + LAYOUT_COMPLETE : ++X_Event_last, + // http://d.hatena.ne.jp/edvakf/20100205/1265338487 // http://d.hatena.ne.jp/uupaa/20100401/1270097629 ENTER_VIEW : ++X_Event_last, // 要素が視界に入った diff --git a/0.6.x/js/20_ui/05_XUI_Gesture.js b/0.6.x/js/20_ui/05_XUI_Gesture.js index 9fd95b8..1f7bd1f 100644 --- a/0.6.x/js/20_ui/05_XUI_Gesture.js +++ b/0.6.x/js/20_ui/05_XUI_Gesture.js @@ -91,7 +91,7 @@ }; numTouches = touches.length; - console.log( 'numTouches ' + numTouches ); + ///console.log( 'numTouches ' + numTouches ); } else // touch if ( type & TOUCH ){ //sourceEventType.match(/touch/)) { diff --git a/0.6.x/js/20_ui/06_AbstractUINode.js b/0.6.x/js/20_ui/06_AbstractUINode.js index 13af1bc..f649cd5 100644 --- a/0.6.x/js/20_ui/06_AbstractUINode.js +++ b/0.6.x/js/20_ui/06_AbstractUINode.js @@ -17,7 +17,7 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( attrObject : null, unverifiedAttrs : null, - role : null, + role : 1, pointerDisabled : false, hoverClassName : null, hovering : false, @@ -30,8 +30,8 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( boxX : 0, boxY : 0, - scrollWidth : 0, - scrollHeight : 0, + scrollWidth : 0, // remove? + scrollHeight : 0, // remove? boxWidth : X.UI.Attr.AUTO, minBoxWidth : 0, maxBoxWidth : X.UI.Attr.AUTO, @@ -133,6 +133,7 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( } else if( list && ( _v = list[ v ] ) ){ // good + console.log( v + ' ' + _v ); v = _v; } else if( ( percent || minusPct ) && v.lastIndexOf( '%' ) !== -1 && isFinite( _v = parseFloat( v ) ) && v === _v + '%' ){ @@ -216,8 +217,8 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( }; if( !X.UI.attrClassProto && user === X.UI.Attr.USER.XNODE && this.xnode ){ - this.xnode[ 'css' ]( X.UI.Attr.Rename[ name ] || name, this._createCssText( name ) ); - //console.log( ( X.UI.Attr.Rename[ name ] || name ) + ' ' + this._createCssText( name ) + ' ' + propID + ' ' + attrs[ propID ] ); + this.xnode[ 'css' ]( X.UI.Attr.Rename[ name ] || name, XUI_AbstractUINode_createCssText( this, name ) ); + //console.log( ( X.UI.Attr.Rename[ name ] || name ) + ' ' + XUI_AbstractUINode_createCssText( this, name ) + ' ' + propID + ' ' + attrs[ propID ] ); }; return; }; @@ -260,87 +261,15 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( attrs[ propID ] = v; }; + if( name && user === X.UI.Attr.USER.UINODE ){ + this[ name ] = v; + }; + if( name && user === X.UI.Attr.USER.XNODE && this.xnode ){ - this.xnode[ 'css' ]( X.UI.Attr.Rename[ name ] || name, this._createCssText( name ) ); - //console.log( ( X.UI.Attr.Rename[ name ] || name ) + ' ' + this._createCssText( name ) + ' ' + propID + ' ' + attrs[ propID ] ); + this.xnode[ 'css' ]( X.UI.Attr.Rename[ name ] || name, XUI_AbstractUINode_createCssText( this, name ) ); + //console.log( ( X.UI.Attr.Rename[ name ] || name ) + ' ' + XUI_AbstractUINode_createCssText( this, name ) + ' ' + propID + ' ' + attrs[ propID ] ); } else - if( this.dirty < dirty ) this.dirty = dirty; - }; - }, - - _createCssText : function( name ){ - var attrs = this.attrObject || this.attrClass.prototype || X.UI.AttrClass, - def = this.supportAttrs[ name ], - no = def.No, - v = attrs[ def.No ], - type = def[ 3 ], - list = def[ 4 ], - flag = !!( type & X.UI.Attr.Type.BOOLEAN ), - combi = !!( type & X.UI.Attr.Type.COMBI ), - quartet = !!( type & X.UI.Attr.Type.QUARTET ); - - if( quartet ){ - if( attrs[ no + 1 ] === attrs[ no + 3 ] ){ - if( v === attrs[ no + 2 ] ){ - if( v === attrs[ no + 1 ] ){ - return this._createCssValue( v, type, list ); - }; - return [ - this._createCssValue( v, type, list ), - this._createCssValue( attrs[ no + 1 ], type, list ) - ].join( ' ' ); - }; - return [ - this._createCssValue( v, type, list ), - this._createCssValue( attrs[ no + 1 ], type, list ), - this._createCssValue( attrs[ no + 2 ], type, list ) - ].join( ' ' ); - }; - return [ - this._createCssValue( v, type, list ), - this._createCssValue( attrs[ no + 1 ], type, list ), - this._createCssValue( attrs[ no + 2 ], type, list ), - this._createCssValue( attrs[ no + 3 ], type, list ) - ].join( ' ' ); - } else - if( combi ){ - return [ - this._createCssValue( v, type, list ), - this._createCssValue( attrs[ no + 1 ], type, list ) - ].join( ' ' ); - } else - if( flag ){ - return v ? list : 'normal'; // - }; - return this._createCssValue( v, type, list ); - }, - - _createCssValue : function( v, type, list ){ - var length = !!( type & X.UI.Attr.Type.LENGTH ), - minusLen = !!( type & X.UI.Attr.Type.MINUS_LENGTH ), - percent = !!( type & X.UI.Attr.Type.PERCENT ), - minusPct = !!( type & X.UI.Attr.Type.MINUS_PERCENT ), - numerical = !!( type & X.UI.Attr.Type.NUMERICAL ), - auto = !!( type & X.UI.Attr.Type.AUTO ), - color = !!( type & X.UI.Attr.Type.COLOR ), - url = !!( type & X.UI.Attr.Type.URL ), - fontName = !!( type & X.UI.Attr.Type.FONT_NAME ); - - if( X_Type_isNumber( v ) ){ - if( auto && v === X.UI.Attr.AUTO ) return 'auto'; - if( length || minusLen ) return v + 'em'; - if( numerical ) return v; - if( list && list[ v ] ) return list[ v ]; - if( color ){ - if( v < 0x100000 ){ - v = '00000' + v.toString( 16 ); - return '#' + v.substr( v.length - 6 ); - }; - return '#' + v.toString( 16 ); - }; - }; - if( X_Type_isString( v ) ){ - if( percent || minusPct || url || fontName ) return v; + if( this.dirty < dirty ) this.dirty = dirty; }; }, @@ -420,10 +349,10 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( this.xnode [ 'css' ]( 'left', x ? x + 'em' : 0 ) [ 'css' ]( 'top', y ? y + 'em' : 0 ) - [ 'css' ]( 'width', this.contentWidth ? X.UI._AbstractUINode.ceil( this.contentWidth ) + 'em' : 0 ) - [ 'css' ]( 'height', this.contentHeight ? X.UI._AbstractUINode.ceil( this.contentHeight ) + 'em' : 0 ) - [ 'css' ]( 'padding', this._createCssText( 'padding' ) ) - [ 'css' ]( 'borderWidth', this._createCssText( 'borderWidth' ) ); + [ 'css' ]( 'width', this.contentWidth ? XUI_AbstractUINode_ceil( this.contentWidth ) + 'em' : 0 ) + [ 'css' ]( 'height', this.contentHeight ? XUI_AbstractUINode_ceil( this.contentHeight ) + 'em' : 0 ) + [ 'css' ]( 'padding', XUI_AbstractUINode_createCssText( this, 'padding' ) ) + [ 'css' ]( 'borderWidth', XUI_AbstractUINode_createCssText( this, 'borderWidth' ) ); }, /* @@ -431,7 +360,6 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( */ preMesure : function( allowedW, allowedH ){ var attrs = this.attrObject || this.attrClass.prototype || X.UI.AttrClass, - calc = X.UI._AbstractUINode.calcValue, box = attrs[ X.UI.Attr.Support.sizing.No ], min, max, boxL, boxT, boxR, boxB, @@ -443,10 +371,10 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( // 自身が constraintW の場合 親が AUTO ではない // 自身が constraintW でない場合自身が AUTO はなくかつ親 が AUTO の場合 or 自身は % でない - paddingR = calc( attrs[ X.UI.Attr.Support.padding.No + 1 ], allowedW ); - paddingL = calc( attrs[ X.UI.Attr.Support.padding.No + 3 ], allowedW ); - borderR = calc( attrs[ X.UI.Attr.Support.borderWidth.No + 1 ], allowedW ); - borderL = calc( attrs[ X.UI.Attr.Support.borderWidth.No + 3 ], allowedW ); + paddingR = XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.padding.No + 1 ], allowedW ); + paddingL = XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.padding.No + 3 ], allowedW ); + borderR = XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.borderWidth.No + 1 ], allowedW ); + borderL = XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.borderWidth.No + 3 ], allowedW ); boxMinus = 0; switch( box ){ case 3 : // border-box @@ -460,9 +388,9 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( if( this.constraintW ? allowedW !== X.UI.Attr.AUTO : !this.autoWidth && ( allowedW !== X.UI.Attr.AUTO || !this.percentWidth ) ){ if( this.constraintW ){ // 制約レイアウト - contentW = allowedW - ( boxL = calc( attrs[ X.UI.Attr.Support.left.No ], allowedW ) ) - ( boxR = calc( attrs[ X.UI.Attr.Support.right.No ], allowedW ) ); + contentW = allowedW - ( boxL = XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.left.No ], allowedW ) ) - ( boxR = XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.right.No ], allowedW ) ); } else { - contentW = X.UI._AbstractUINode.finalValue( attrs[ X.UI.Attr.Support.width.No ], attrs[ X.UI.Attr.Support.minWidth.No ], attrs[ X.UI.Attr.Support.maxWidth.No ], allowedW ); + contentW = XUI_AbstractUINode_calcFinalValue( attrs[ X.UI.Attr.Support.width.No ], attrs[ X.UI.Attr.Support.minWidth.No ], attrs[ X.UI.Attr.Support.maxWidth.No ], allowedW ); }; this.contentWidth = contentW + boxMinus; this.scrollWidth = this.contentWidth + this.contentL + this.contentR; @@ -473,8 +401,8 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( delete this.minBoxWidth; delete this.maxBoxWidth; } else { - this.minContentWidth = calc( attrs[ X.UI.Attr.Support.minWidth.No ], allowedW ) + boxMinus; - this.maxContentWidth = calc( attrs[ X.UI.Attr.Support.maxWidth.No ], allowedW ) + boxMinus; + this.minContentWidth = XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.minWidth.No ], allowedW ) + boxMinus; + this.maxContentWidth = XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.maxWidth.No ], allowedW ) + boxMinus; this.scrollWidth = this.contentWidth + this.contentL + this.contentR; this.minBoxWidth = this.minContentWidth - boxMinus + this.contentL + this.contentR; this.maxBoxWidth = this.maxContentWidth - boxMinus + this.contentL + this.contentR; @@ -484,10 +412,10 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( //delete this.boxSizingOffsetLR; }; - paddingT = calc( attrs[ X.UI.Attr.Support.padding.No + 0 ], allowedH );// paddingTRBL の % 指定は 最大幅に対して TB でも幅に対して - paddingB = calc( attrs[ X.UI.Attr.Support.padding.No + 2 ], allowedH ); - borderT = calc( attrs[ X.UI.Attr.Support.borderWidth.No + 0 ], allowedH ); - borderB = calc( attrs[ X.UI.Attr.Support.borderWidth.No + 2 ], allowedH ); + paddingT = XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.padding.No + 0 ], allowedH );// paddingTRBL の % 指定は 最大幅に対して TB でも幅に対して + paddingB = XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.padding.No + 2 ], allowedH ); + borderT = XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.borderWidth.No + 0 ], allowedH ); + borderB = XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.borderWidth.No + 2 ], allowedH ); boxMinus = 0; switch( box ){ case 3 : // border-box @@ -502,9 +430,9 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( // Height if( this.constraintH ? allowedH !== X.UI.Attr.AUTO : !this.autoHeight && ( allowedH !== X.UI.Attr.AUTO || !this.percentHeight ) ){ if( this.constraintH ){ // 制約レイアウト - contentH = allowedH - ( boxT = calc( attrs[ X.UI.Attr.Support.top.No ], allowedH ) ) - ( boxB = calc( attrs[ X.UI.Attr.Support.bottom.No ], allowedH ) ); + contentH = allowedH - ( boxT = XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.top.No ], allowedH ) ) - ( boxB = XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.bottom.No ], allowedH ) ); } else { - contentH = X.UI._AbstractUINode.finalValue( attrs[ X.UI.Attr.Support.height.No ], attrs[ X.UI.Attr.Support.minHeight.No ], attrs[ X.UI.Attr.Support.maxHeight.No ], allowedH ); + contentH = XUI_AbstractUINode_calcFinalValue( attrs[ X.UI.Attr.Support.height.No ], attrs[ X.UI.Attr.Support.minHeight.No ], attrs[ X.UI.Attr.Support.maxHeight.No ], allowedH ); }; this.contentHeight = contentH + boxMinus; this.scrollHeight = this.contentHeight + this.contentT + this.contentB; @@ -515,8 +443,8 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( delete this.minBoxHeight; delete this.maxBoxHeight; } else { - this.minContentHeight = calc( attrs[ X.UI.Attr.Support.minHeight.No ], allowedH ) + boxMinus; - this.maxContentHeight = calc( attrs[ X.UI.Attr.Support.maxHeight.No ], allowedH ) + boxMinus; + this.minContentHeight = XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.minHeight.No ], allowedH ) + boxMinus; + this.maxContentHeight = XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.maxHeight.No ], allowedH ) + boxMinus; this.minBoxHeight = this.minContentHeight - boxMinus + this.contentT + this.contentB; this.maxBoxHeight = this.maxContentHeight - boxMinus + this.contentT + this.contentB; @@ -528,12 +456,12 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( if( this.parentData && this.parentData.layout.overrideAttrsForChild.left ){ if( this.constraintW ){ - this.boxX = ( boxL || boxL === 0 ) ? boxL : calc( attrs[ X.UI.Attr.Support.left.No ], allowedW ); + this.boxX = ( boxL || boxL === 0 ) ? boxL : XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.left.No ], allowedW ); } else if( attrs[ X.UI.Attr.Support.right.No ] === null ){ - this.boxX = ( boxL || boxL === 0 ) ? boxL : calc( attrs[ X.UI.Attr.Support.left.No ], allowedW ); + this.boxX = ( boxL || boxL === 0 ) ? boxL : XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.left.No ], allowedW ); } else { - this.boxX = alllowW - this.boxWidth - ( ( boxR || boxR === 0 ) ? boxR : calc( attrs[ X.UI.Attr.Support.right.No ], allowedW ) ); + this.boxX = alllowW - this.boxWidth - ( ( boxR || boxR === 0 ) ? boxR : XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.right.No ], allowedW ) ); }; } else { delete this.boxX; @@ -541,12 +469,12 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( if( this.parentData && this.parentData.layout.overrideAttrsForChild.top ){ if( this.constraintH ){ - this.boxY = ( boxT || boxT === 0 ) ? boxT : calc( attrs[ X.UI.Attr.Support.top.No ], allowedH ); + this.boxY = ( boxT || boxT === 0 ) ? boxT : XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.top.No ], allowedH ); } else if( attrs[ X.UI.Attr.Support.bottom.No ] === null ){ - this.boxY = ( boxT || boxT === 0 ) ? boxT : calc( attrs[ X.UI.Attr.Support.top.No ], allowedH ); + this.boxY = ( boxT || boxT === 0 ) ? boxT : XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.top.No ], allowedH ); } else { - this.boxY = allowedH - this.boxHeight - ( ( boxB || boxB === 0 ) ? boxB : calc( attrs[ X.UI.Attr.Support.bottom.No ], allowedH ) ); + this.boxY = allowedH - this.boxHeight - ( ( boxB || boxB === 0 ) ? boxB : XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.bottom.No ], allowedH ) ); }; } else { delete this.boxY; @@ -608,7 +536,7 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( if( w - this.boxSizingOffsetLR < this.minContentWidth ) this.contentWidth = this.minContentWidth + this.boxSizingOffsetLR; this.lastContentWidth = this.contentWidth; - w !== this.contentWidth && xnode[ 'css' ]( 'width', X.UI._AbstractUINode.ceil( this.contentWidth ) + 'em' ); + w !== this.contentWidth && xnode[ 'css' ]( 'width', XUI_AbstractUINode_ceil( this.contentWidth ) + 'em' ); if( h === X.UI.Attr.AUTO ){ this.contentHeight = h = xnode[ 'css' ]( 'height', 'auto' )[ 'scrollHeight' ]() / X_Node_CSS_getCharSize( xnode ); // scrollHeight() ?? @@ -623,7 +551,7 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( } else if( h === X.UI.Attr.AUTO ){ if( w !== this.lastContentWidth ){ - xnode[ 'css' ]( 'width', X.UI._AbstractUINode.ceil( w ) + 'em' ); + xnode[ 'css' ]( 'width', XUI_AbstractUINode_ceil( w ) + 'em' ); this.lastContentWidth = w; this.contentHeight = h = xnode[ 'css' ]( 'height', 'auto' )[ 'scrollHeight' ]() / X_Node_CSS_getCharSize( xnode ); @@ -666,7 +594,6 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( */ postMesure : function(){ var attrs = this.attrObject || this.attrClass.prototype || X.UI.AttrClass, - calc = X.UI._AbstractUINode.calcValue, box = attrs[ X.UI.Attr.Support.sizing.No ], contentW, contentH, contentPlus, @@ -677,10 +604,10 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( // Width if( this.boxWidth === X.UI.Attr.AUTO ){ contentW = this.contentWidth; - paddingR = calc( attrs[ X.UI.Attr.Support.padding.No + 1 ], contentW ); - paddingL = calc( attrs[ X.UI.Attr.Support.padding.No + 3 ], contentW ); - borderR = calc( attrs[ X.UI.Attr.Support.borderWidth.No + 1 ], contentW ); - borderL = calc( attrs[ X.UI.Attr.Support.borderWidth.No + 3 ], contentW ); + paddingR = XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.padding.No + 1 ], contentW ); + paddingL = XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.padding.No + 3 ], contentW ); + borderR = XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.borderWidth.No + 1 ], contentW ); + borderL = XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.borderWidth.No + 3 ], contentW ); contentPlus = 0; switch( box ){ case 3 : // border-box @@ -692,8 +619,8 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( if( !this.constraintW ){ contentW += contentPlus; - min = calc( attrs[ X.UI.Attr.Support.minWidth.No ], contentW ); - max = calc( attrs[ X.UI.Attr.Support.maxWidth.No ], contentW ); + min = XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.minWidth.No ], contentW ); + max = XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.maxWidth.No ], contentW ); if( contentW < min && contentPlus < min ){ this.contentWidth = min - contentPlus; } else @@ -708,10 +635,10 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( // Height if( this.boxHeight === X.UI.Attr.AUTO ){ contentH = this.contentHeight; - paddingT = calc( attrs[ X.UI.Attr.Support.padding.No + 0 ], contentH );// paddingTRBL の % 指定は 最大幅に対して TB でも幅に対して - paddingB = calc( attrs[ X.UI.Attr.Support.padding.No + 2 ], contentH ); - borderT = calc( attrs[ X.UI.Attr.Support.borderWidth.No + 0 ], contentH ); - borderB = calc( attrs[ X.UI.Attr.Support.borderWidth.No + 2 ], contentH ); + paddingT = XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.padding.No + 0 ], contentH );// paddingTRBL の % 指定は 最大幅に対して TB でも幅に対して + paddingB = XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.padding.No + 2 ], contentH ); + borderT = XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.borderWidth.No + 0 ], contentH ); + borderB = XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.borderWidth.No + 2 ], contentH ); contentPlus = 0; switch( box ){ case 3 : // border-box @@ -722,8 +649,8 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( }; if( !this.constraintH ){ contentH += contentPlus; - min = calc( attrs[ X.UI.Attr.Support.minHeight.No ], contentH ); - max = calc( attrs[ X.UI.Attr.Support.maxHeight.No ], contentH ); + min = XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.minHeight.No ], contentH ); + max = XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.maxHeight.No ], contentH ); if( contentH < min && contentPlus < min ){ this.contentHeight = min - contentPlus; } else @@ -750,7 +677,9 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( }; }, - + /* + * context を明示しない場合、User が context になる！ + */ listen : function( type, arg1, arg2, arg3 ){ var root, events, counter, f; if( X.UI.Event._START_POINTER <= type && type <= X.UI.Event._END_POINTER ){ @@ -777,7 +706,7 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( }; }; }; - f = X_Callback_classifyCallbackArgs( arg1, arg2, arg3 ); + arg1 && arg1.kind ? ( f = arg1 ) : ( f = X_Callback_classifyCallbackArgs( arg1, arg2, arg3 ) ); if( !f.kind ){ return X_EventDispatcher_listen.call( this, type, this.User, f ); } else @@ -814,7 +743,7 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( }; }; }; - f = X_Callback_classifyCallbackArgs( arg1, arg2, arg3 ); + arg1 && arg1.kind ? ( f = arg1 ) : ( f = X_Callback_classifyCallbackArgs( arg1, arg2, arg3 ) ); if( !f.kind ){ return X_EventDispatcher_unlisten.apply( this, [ type, this.User, f ] ); } else @@ -843,7 +772,83 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( } ); -X.UI._AbstractUINode.calcValue = function( styleValue, srcValue ){ +function XUI_AbstractUINode_createCssText( that, name ){ + var attrs = that.attrObject || that.attrClass.prototype || X.UI.AttrClass, + def = that.supportAttrs[ name ], + no = def.No, + v = attrs[ def.No ], + type = def[ 3 ], + list = def[ 4 ], + flag = !!( type & X.UI.Attr.Type.BOOLEAN ), + combi = !!( type & X.UI.Attr.Type.COMBI ), + quartet = !!( type & X.UI.Attr.Type.QUARTET ); + + if( quartet ){ + if( attrs[ no + 1 ] === attrs[ no + 3 ] ){ + if( v === attrs[ no + 2 ] ){ + if( v === attrs[ no + 1 ] ){ + return XUI_AbstractUINode_createCssValue( v, type, list ); + }; + return [ + XUI_AbstractUINode_createCssValue( v, type, list ), + XUI_AbstractUINode_createCssValue( attrs[ no + 1 ], type, list ) + ].join( ' ' ); + }; + return [ + XUI_AbstractUINode_createCssValue( v, type, list ), + XUI_AbstractUINode_createCssValue( attrs[ no + 1 ], type, list ), + XUI_AbstractUINode_createCssValue( attrs[ no + 2 ], type, list ) + ].join( ' ' ); + }; + return [ + XUI_AbstractUINode_createCssValue( v, type, list ), + XUI_AbstractUINode_createCssValue( attrs[ no + 1 ], type, list ), + XUI_AbstractUINode_createCssValue( attrs[ no + 2 ], type, list ), + XUI_AbstractUINode_createCssValue( attrs[ no + 3 ], type, list ) + ].join( ' ' ); + } else + if( combi ){ + return [ + XUI_AbstractUINode_createCssValue( v, type, list ), + XUI_AbstractUINode_createCssValue( attrs[ no + 1 ], type, list ) + ].join( ' ' ); + } else + if( flag ){ + return v ? list : 'normal'; // + }; + return XUI_AbstractUINode_createCssValue( v, type, list ); +}; + +function XUI_AbstractUINode_createCssValue( v, type, list ){ + var length = !!( type & X.UI.Attr.Type.LENGTH ), + minusLen = !!( type & X.UI.Attr.Type.MINUS_LENGTH ), + percent = !!( type & X.UI.Attr.Type.PERCENT ), + minusPct = !!( type & X.UI.Attr.Type.MINUS_PERCENT ), + numerical = !!( type & X.UI.Attr.Type.NUMERICAL ), + auto = !!( type & X.UI.Attr.Type.AUTO ), + color = !!( type & X.UI.Attr.Type.COLOR ), + url = !!( type & X.UI.Attr.Type.URL ), + fontName = !!( type & X.UI.Attr.Type.FONT_NAME ); + + if( X_Type_isNumber( v ) ){ + if( auto && v === X.UI.Attr.AUTO ) return 'auto'; + if( length || minusLen ) return v + 'em'; + if( numerical ) return v; + if( list && list[ v ] ) return list[ v ]; + if( color ){ + if( v < 0x100000 ){ + v = '00000' + v.toString( 16 ); + return '#' + v.substr( v.length - 6 ); + }; + return '#' + v.toString( 16 ); + }; + }; + if( X_Type_isString( v ) ){ + if( percent || minusPct || url || fontName ) return v; + }; +}; + +function XUI_AbstractUINode_calcValue( styleValue, srcValue ){ /* * String の場合は必ず % */ @@ -854,14 +859,13 @@ X.UI._AbstractUINode.calcValue = function( styleValue, srcValue ){ return styleValue; }; -X.UI._AbstractUINode.finalValue = function( styleValue, styleMin, styleMax, srcValue ){ - var calc = X.UI._AbstractUINode.calcValue, - v = calc( styleValue, srcValue ), - min = calc( styleMin, srcValue ), - max = calc( styleMax, srcValue ); +function XUI_AbstractUINode_calcFinalValue( styleValue, styleMin, styleMax, srcValue ){ + var v = XUI_AbstractUINode_calcValue( styleValue, srcValue ), + min = XUI_AbstractUINode_calcValue( styleMin, srcValue ), + max = XUI_AbstractUINode_calcValue( styleMax, srcValue ); return v <= min ? min : max <= v ? max : v; }; -X.UI._AbstractUINode.ceil = function( v ){ +function XUI_AbstractUINode_ceil( v ){ if( 0 <= v ){ return ( v * 10 + 0.999 | 0 ) / 10; }; @@ -939,10 +943,10 @@ X.UI.AbstractUINode = X_Class_create( return X_Class_getPrivate( this )[ 'dispatch' ]( e ); }, - getNextNode : function(){ + nextNode : function(){ }, - getPrevNode : function(){ + prevNode : function(){ }, nodeIndex : function( v ){ @@ -979,23 +983,6 @@ X.UI.AbstractUINode = X_Class_create( getHeight : function(){ // dirty の場合、rootData.calculate return X_Class_getPrivate( this ).boxHeight; - }, - scrollTo : function( x, y ){ - X_Class_getPrivate( this ).scrollTo( x, y ); - }, - getScrollX : function( v ){ - // dirty の場合、rootData.calculate - return X_Class_getPrivate( this ).scrollX( v ); - }, - getScrollY : function( v ){ - // dirty の場合、rootData.calculate - return X_Class_getPrivate( this ).scrollY( v ); - }, - disabled : function( v ){ - return X_Class_getPrivate( this ).disabled( v ); - }, - cursor : function( v ){ - return X_Class_getPrivate( this ).cursor( v ); } } ); diff --git a/0.6.x/js/20_ui/08_Box.js b/0.6.x/js/20_ui/08_Box.js index e90abdd..dfe2e15 100644 --- a/0.6.x/js/20_ui/08_Box.js +++ b/0.6.x/js/20_ui/08_Box.js @@ -53,6 +53,8 @@ X.UI._Box = X.UI._AbstractUINode.inherits( 'X.UI._Box', X_Class.PRIVATE_DATA | X_Class.SUPER_ACCESS, // 現状 super 指定がないとconstructor未定擬時に親のconstructor が使われない { + supportAttrs : XUI_Attr_createAttrDef( X.UI._AbstractUINode.prototype.supportAttrs, X.UI.Layout.Canvas.overrideAttrsForSelf ), + layout : null, uinodes : null, xnodes : null, @@ -66,9 +68,11 @@ X.UI._Box = X.UI._AbstractUINode.inherits( Constructor : function( layout, args ){ var i = 0, - l = args.length, + l = args.length || 1, j = -1, - uinodes, arg, _data, attrs, support; + uinodes, arg, _data, attrs, support, p; + + //if( !args.length ) args = [ args ]; if( !this.User[ 'instanceOf' ]( X.UI.Box ) ){ //throw new Error( 'Box を継承したインスタンスだけが _Box のオーナーになれます' ); @@ -373,13 +377,13 @@ X.UI.Box.presets = function(){ }; if( privateKlass ){ - supports = X.UI.Attr.createAttrDef( privateKlass.prototype.supportAttrs, layout.overrideAttrsForSelf ); + supports = XUI_Attr_createAttrDef( privateKlass.prototype.supportAttrs, layout.overrideAttrsForSelf ); klass = this.inherits( privateKlass ); privateKlass.prototype.supportAttrs = supports, privateKlass.prototype.attrClass = X.UI.Attr.preset( privateKlass.prototype.attrClass, supports, attrs ); } else { - supports = X.UI.Attr.createAttrDef( shadow.prototype.supportAttrs, layout.overrideAttrsForSelf ); + supports = XUI_Attr_createAttrDef( shadow.prototype.supportAttrs, layout.overrideAttrsForSelf ); klass = this.inherits( boxName, diff --git a/0.6.x/js/20_ui/11_VBox.js b/0.6.x/js/20_ui/11_VBox.js index 14febc5..00b706a 100644 --- a/0.6.x/js/20_ui/11_VBox.js +++ b/0.6.x/js/20_ui/11_VBox.js @@ -5,6 +5,8 @@ X.UI.Layout.Vertical = X.UI.Layout.create( { overrideAttrsForSelf : { selectable : false, role : [ 0, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.INIT_ONLY | X.UI.Attr.Type.LIST, 'none,chrome,container' ], + width : [ '100%', X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH | X.UI.Attr.Type.PERCENT | X.UI.Attr.Type.AUTO ], + height : [ X.UI.Attr.AUTO, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH | X.UI.Attr.Type.PERCENT | X.UI.Attr.Type.AUTO ], childWidth : [ X.UI.Attr.AUTO, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH | X.UI.Attr.Type.PERCENT | X.UI.Attr.Type.AUTO ], childHeight : [ X.UI.Attr.AUTO, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH | X.UI.Attr.Type.PERCENT | X.UI.Attr.Type.AUTO ], gapY : [ 0, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH ] @@ -34,9 +36,9 @@ X.UI.Layout.Vertical = X.UI.Layout.create( { autoW = contentW === X.UI.Attr.AUTO; autoH = contentH === X.UI.Attr.AUTO; detectionPhase = autoW || autoH; - gapY = X.UI._AbstractUINode.calcValue( attrs[ data.supportAttrs.gapY.No ], contentH ); - childW = X.UI._AbstractUINode.calcValue( attrs[ data.supportAttrs.childWidth.No ], contentW ); - childH = X.UI._AbstractUINode.calcValue( attrs[ data.supportAttrs.childHeight.No ], contentH ); + gapY = XUI_AbstractUINode_calcValue( attrs[ data.supportAttrs.gapY.No ], contentH ); + childW = XUI_AbstractUINode_calcValue( attrs[ data.supportAttrs.childWidth.No ], contentW ); + childH = XUI_AbstractUINode_calcValue( attrs[ data.supportAttrs.childHeight.No ], contentH ); _x = data.contentL; _y = data.contentT; diff --git a/0.6.x/js/20_ui/12_HBox.js b/0.6.x/js/20_ui/12_HBox.js index 0fea3ea..52b9bdf 100644 --- a/0.6.x/js/20_ui/12_HBox.js +++ b/0.6.x/js/20_ui/12_HBox.js @@ -4,6 +4,8 @@ X.UI.Layout.Horizontal = X.UI.Layout.create( { overrideAttrsForSelf : { selectable : false, role : [ 0, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.INIT_ONLY | X.UI.Attr.Type.LIST, 'none,chrome,container' ], + width : [ '100%', X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH | X.UI.Attr.Type.PERCENT | X.UI.Attr.Type.AUTO ], + height : [ X.UI.Attr.AUTO, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH | X.UI.Attr.Type.PERCENT | X.UI.Attr.Type.AUTO ], childWidth : [ X.UI.Attr.AUTO, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH | X.UI.Attr.Type.PERCENT | X.UI.Attr.Type.AUTO ], childHeight : [ X.UI.Attr.AUTO, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH | X.UI.Attr.Type.PERCENT | X.UI.Attr.Type.AUTO ], gapX : [ 0, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH ] @@ -32,9 +34,9 @@ X.UI.Layout.Horizontal = X.UI.Layout.create( { autoW = contentW === X.UI.Attr.AUTO; autoH = contentH === X.UI.Attr.AUTO; detectionPhase = autoW || autoH; - gapX = X.UI._AbstractUINode.calcValue( attrs[ data.supportAttrs.gapX.No ], contentW ); - childW = X.UI._AbstractUINode.calcValue( attrs[ data.supportAttrs.childWidth.No ], contentW ); - childH = X.UI._AbstractUINode.calcValue( attrs[ data.supportAttrs.childHeight.No ], contentH ); + gapX = XUI_AbstractUINode_calcValue( attrs[ data.supportAttrs.gapX.No ], contentW ); + childW = XUI_AbstractUINode_calcValue( attrs[ data.supportAttrs.childWidth.No ], contentW ); + childH = XUI_AbstractUINode_calcValue( attrs[ data.supportAttrs.childHeight.No ], contentH ); _x = data.contentL; _y = data.contentT; diff --git a/0.6.x/js/20_ui/13_TileBox.js b/0.6.x/js/20_ui/13_TileBox.js index d118565..3856e9c 100644 --- a/0.6.x/js/20_ui/13_TileBox.js +++ b/0.6.x/js/20_ui/13_TileBox.js @@ -35,10 +35,10 @@ X.UI.Layout.Tile = X.UI.Layout.create( { _x = data.contentL; _y = data.contentT; _w = data.contentWidth; - gapX = X.UI._AbstractUINode.calcValue( attrs[ data.supportAttrs.gapX.No ], contentW ); - gapY = X.UI._AbstractUINode.calcValue( attrs[ data.supportAttrs.gapY.No ], contentH ); - childW = X.UI._AbstractUINode.calcValue( attrs[ data.supportAttrs.childWidth.No ], contentW ); - childH = X.UI._AbstractUINode.calcValue( attrs[ data.supportAttrs.childHeight.No ], contentH ); + gapX = XUI_AbstractUINode_calcValue( attrs[ data.supportAttrs.gapX.No ], contentW ); + gapY = XUI_AbstractUINode_calcValue( attrs[ data.supportAttrs.gapY.No ], contentH ); + childW = XUI_AbstractUINode_calcValue( attrs[ data.supportAttrs.childWidth.No ], contentW ); + childH = XUI_AbstractUINode_calcValue( attrs[ data.supportAttrs.childHeight.No ], contentH ); numH = X.UI.Attr.FLOOR( ( _w + gapX ) / ( childW + gapX ) ); numV = l % numH ? X.UI.Attr.FLOOR( l / numH ) + 1 : l / numH; _h = _y + data.contentB + ( childH + gapY ) * numH - gapY; diff --git a/0.6.x/js/20_ui/14_ChromeBox.js b/0.6.x/js/20_ui/14_ChromeBox.js index 2fc9bc5..ed1cd7e 100644 --- a/0.6.x/js/20_ui/14_ChromeBox.js +++ b/0.6.x/js/20_ui/14_ChromeBox.js @@ -15,13 +15,14 @@ X.UI._ChromeBox = X.UI._Box.inherits( for( ; i; ){ node = uinodes[ --i ]; - if( node.forContainer === true ){ + if( node.role === 3 ){ if( this.containerNode ){ //throw new Error( 'ContainerNode　が複数設定されています！ContainerNode はクロームボックスにひとつ、生成時に設定できます ' + node ); }; - this.containerNode = node; + this.containerNode = node.User; + this._containerNode = node; } else { - if( !this.chromeNodes ) this.chromeNodes = []; + if( !this.chromeNodes ) this.chromeNodes = []; this.chromeNodes[ this.chromeNodes.length ] = node; }; }; diff --git a/0.6.x/js/20_ui/15_ScrollBox.js b/0.6.x/js/20_ui/15_ScrollBox.js index 03de673..0191bb0 100644 --- a/0.6.x/js/20_ui/15_ScrollBox.js +++ b/0.6.x/js/20_ui/15_ScrollBox.js @@ -30,14 +30,16 @@ function X_UI_ScrollBox_momentum( current, start, time, lowerMargin, wrapperSize var X_UI_ScrollBox_SUPPORT_ATTRS = { // スクロール開始するために必要な移動距離、縦か横、どちらか制限する場合、より重要 - directionLockThreshold : [ 10, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.LENGTH ], - scrollX : [ true, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.BOOLEAN ], - scrollY : [ true, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.BOOLEAN ], - enabled : [ true, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.BOOLEAN ], - bounce : [ true, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.BOOLEAN ], - bounceTime : [ 600, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.TIME ], - useWheel : [ true, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.BOOLEAN ], - useKey : [ true, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.BOOLEAN ], + directionLockThreshold : [ 10, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.LENGTH ], + scrollXEnabled : [ true, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.BOOLEAN ], + scrollYEnabled : [ true, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.BOOLEAN ], + scrollEnabled : [ true, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.BOOLEAN ], + bounceEnabled : [ true, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.BOOLEAN ], + bounceTime : [ 600, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.TIME ], + useWheel : [ true, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.BOOLEAN ], + useKey : [ true, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.BOOLEAN ], + hasScrollShadow : [ true, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.BOOLEAN ], + scrollShadowColor : [ '#000', X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.COLOR ] }; @@ -49,28 +51,30 @@ X.UI._ScrollBox = X.UI._ChromeBox.inherits( //elmScroller : null, //elmScrollbar : null, - supportAttrs : X.UI.Attr.createAttrDef( X.UI.Attr.Support, X_UI_ScrollBox_SUPPORT_ATTRS ), + directionLockThreshold : 10, + scrollXEnabled : true, + scrollYEnabled : true, + scrollEnabled : true, + bounceEnabled : true, + momentumEnabled : true, + bounceTime : 600, + useWheel : true, + useKey : true, + hasScrollShadow : true, + scrollShadowColor : '#000', - scrolling : false, + supportAttrs : XUI_Attr_createAttrDef( X.UI.Attr.Support, X_UI_ScrollBox_SUPPORT_ATTRS ), + + scrolling : false, initiated : '', moved : false, - distX : 0, - distY : 0, - directionX : 0, - directionY : 0, directionLocked : '', startTime : 0, endTime : 0, isAnimating : false, - startX : 0, - startY : 0, - absStartX : 0, - absStartY : 0, - pointX : 0, - pointY : 0, - maxScrollX : 0, - maxScrollY : 0, + isInTransition : false, + hasHScroll : false, hasVScroll : false, @@ -78,9 +82,23 @@ X.UI._ScrollBox = X.UI._ChromeBox.inherits( wheelTimeout : 0, requestFrameID : 0, - _scrollX : 0, - _scrollY : 0, - scrollXPercent : 0, + fontSize : 0, + + scrollX : 0, // px + scrollY : 0, // px + maxScrollX : 0, // px + maxScrollY : 0, // px + startX : 0, // px + startY : 0, // px + absStartX : 0, // px + absStartY : 0, // px + pointX : 0, // px + pointY : 0, // px + distX : 0, // px + distY : 0, // px + directionX : 0, // px + directionY : 0, // px + scrollXPercent : 0, // この値は scroll 不要になっても保持される。 scroll 必要時に参照される scrollYPercent : 0, lastScrollWidth : 0, @@ -94,97 +112,49 @@ X.UI._ScrollBox = X.UI._ChromeBox.inherits( Constructor : function( layout, args ){ this[ 'Super' ]( layout, args ); this._containerNode = X_Class_getPrivate( this.containerNode ); + this._containerXNode = this._containerNode.xnode[ 'className' ]( 'ScrollSlider' ).listen( X_EVENT_ANIME_END, this, X_UI_ScrollBox_onAnimeEnd ); + this.xnode[ 'className' ]( 'ScrollBox' ); }, creationComplete : function(){ X.UI._Box.prototype.creationComplete.apply( this, arguments ); this.scrollManager; - this._check(); }, calculate : function(){ - this.lastScrollWidth = this.scrollWidth; - this.lastScrollHeight = this.scrollHeight; + this.lastScrollWidth = this._containerNode.boxWidth; + this.lastScrollHeight = this._containerNode.boxHeight; this.lastBoxWidth = this.boxWidth; this.lastBoxHeight = this.boxHeight; X.UI._Box.prototype.calculate.apply( this, arguments ); + // TODO root の layout_complete 後に。 + // TODO calculate 前に scroll の解放。 + if( - this.lastScrollWidth !== this.scrollWidth || this.lastScrollHeight !== this.scrollHeight || + this.lastScrollWidth !== this._containerNode.boxWidth || + this.lastScrollHeight !== this._containerNode.boxHeight || this.lastBoxWidth !== this.boxWidth || this.lastBoxHeight !== this.boxHeight ){ - // scroll の停止、GPU の解除 - this._check(); + X_UI_rootData[ 'listenOnce' ]( X.UI.Event.LAYOUT_COMPLETE, this, X_UI_ScrollBox_onLayoutComplete ); }; - }, scrollBy : function( x, y, opt_time, opt_easing ){ - this.scrollTo( this.x + x, this.y + y, opt_time, opt_easing ); + this.scrollTo( this.scrollX + x, this.scrollY + y, opt_time, opt_easing ); }, - scrollTo : function( x, y, opt_time, opt_easing ){ - opt_time = 0 <= opt_time ? opt_time : 0; - opt_easing = opt_easing || 'circular'; - - this.isInTransition = !!opt_time; - - this.containerNode.animate( - { - x : this.x, - y : this.y - }, - { - x : x, - y : y - }, - opt_time, opt_easing, 1000 - ); + scrollTo : function( x, y, opt_time, opt_easing, opt_release ){ + //if( this.scrollX === x && this.scrollY === y ) return; + + opt_time = 0 <= opt_time ? opt_time : 0; + opt_easing = opt_easing || 'circular'; + opt_release = 0 <= opt_release ? opt_release : 300; - this.x = x; - this.y = y; + this.isInTransition = 0 < opt_time; - if( this.indicators ){ - for( i = this.indicators.length; i--; ){ - this.indicators[ i ].updatePosition( opt_time, opt_easing ); - }; - }; - }, - - _check : function(){ - var needVScroll, needHScroll; - if( this.boxWidth < this._containerNode.scrollWidth || this.boxHeight < this._containerNode.scrollHeight ){ - // scroll - if( this.scrolling ){ - // fix scroll position from scrollXPercent, scrollYPercent - // - - } else { - // create scroller - - - this[ 'listen' ]( X.UI.Event.POINTER_START, X_UI_ScrollBox_onStart ); - - - this._move( 0, 0 ); - - this.scrolling = true; - }; - } else - // no scroll - if( this.scrolling ){ - // remove scroller - this[ 'unlisten' ]( X.UI.Event.POINTER_START ); - - ( this._scrollX !== 0 || this._scrollY !== 0 ) && this._move( 0, 0 ); - - delete this.scrolling; - }; - }, - - _move : function( x, y ){ - + X_UI_ScrollBox_translate( this, x, y, opt_time, opt_easing, opt_release ); }, _remove : function(){ @@ -197,16 +167,102 @@ X.UI._ScrollBox = X.UI._ChromeBox.inherits( } ); +function X_UI_ScrollBox_onLayoutBefore( e ){ + //this._containerXNode.stop(); +}; + +function X_UI_ScrollBox_onLayoutComplete( e ){ + // scroll の停止、GPU の解除 + var font = this.fontSize = this._containerXNode.call( 'fontSize' ); + + this.maxScrollX = ( this.boxWidth - this._containerNode.boxWidth ) * font; + this.maxScrollY = ( this.boxHeight - this._containerNode.boxHeight ) * font; + + this.hasHScroll = this.scrollXEnabled && this.maxScrollX < 0; + this.hasVScroll = this.scrollYEnabled && this.maxScrollY < 0; + + if( !this.hasHScroll ){ + this.maxScrollX = 0; + //this.scrollWidth = this.boxWidth; + }; + + if( !this.hasVScroll ){ + this.maxScrollY = 0; + //this.scrollHeight = this.boxHeight; + }; + + delete this.endTime; + delete this.directionX; + delete this.directionY; + + //this.wrapperOffset = this.xnodeWrapper[ 'offset' ](); + + //this[ 'dispatch' ]('refresh'); + + X_UI_ScrollBox_resetPosition( this, 0 ); + + if( this.hasHScroll || this.hasVScroll ){ + // scroll が必要。 + if( this.scrolling ){ + this.scrollTo( this.maxScrollX * this.scrollXPercent, this.maxScrollY * this.scrollYPercent, 100 ); + } else { + // scroller 作る + this[ 'listen' ]( X.UI.Event._POINTER_DOWN, this, X_UI_ScrollBox_onStart ); + X_UI_rootData[ 'listen' ]( X.UI.Event.LAYOUT_BEFORE, this, X_UI_ScrollBox_onLayoutBefore ); + + this.scrollTo( this.maxScrollX * this.scrollXPercent, this.maxScrollY * this.scrollYPercent ); + this.scrolling = true; + }; + } else + // scroll 不要 + if( this.scrolling ){ + // scroller 削除 + this[ 'unlisten' ]( X.UI.Event._POINTER_DOWN, this, X_UI_ScrollBox_onStart ); + X_UI_rootData[ 'unlisten' ]( X.UI.Event.LAYOUT_BEFORE, this, X_UI_ScrollBox_onLayoutBefore ); + + ( this.scrollX !== 0 || this.scrollY !== 0 ) && this.scrollTo( 0, 0 ); + + delete this.scrolling; + }; +}; + + function X_UI_ScrollBox_translate( that, x, y, opt_time, opt_easing, opt_release ){ + + opt_time = 0 <= opt_time ? opt_time : 0; + opt_easing = opt_easing === '' ? '' : opt_easing || 'circular'; + opt_release = 0 <= opt_release ? opt_release : 300; + + that._containerXNode.animate( + { + x : that.scrollX, + y : that.scrollY + }, + { + x : x | 0, + y : y | 0 + }, + opt_time, opt_easing, opt_release + ); + + that.scrollX = x | 0; + that.scrollY = y | 0; + + if( that.indicators ){ + for( i = that.indicators.length; i--; ){ + that.indicators[ i ].updatePosition(); + }; + }; + }; function X_UI_ScrollBox_onStart( e ){ var ret = X_Callback_NONE; - + // React to left mouse button only if( e.pointerType === 'mouse' && e.button !== 0 ){ return ret; }; - - if( !this.enabled || ( this.initiated && e.pointerType !== this.initiated ) ){ + + if( !this.scrollEnabled || ( this.initiated && e.pointerType !== this.initiated ) ){ return ret; }; @@ -220,22 +276,21 @@ function X_UI_ScrollBox_onStart( e ){ this.startTime = X_Timer_now(); // スクロール中の停止 - if( this.isAnimating ){ - delete this.isAnimating; + if( this.isInTransition || this.isAnimating ){ + this.isInTransition = this.isAnimating = false; this[ 'dispatch' ]( X.UI.Event.SCROLL_END ); }; - this.startX = this.x; - this.startY = this.y; - this.absStartX = this.x; - this.absStartY = this.y; + this.startX = this.scrollX; + this.startY = this.scrollY; + this.absStartX = this.scrollX; + this.absStartY = this.scrollY; this.pointX = e.pageX; this.pointY = e.pageY; - this[ 'listen' ]( X.UI.Event.POINTER_MOVE, X_UI_ScrollBox_onMove ); - this[ 'listen' ]( X.UI.Event.POINTER_END , X_UI_ScrollBox_onEnd ); + this[ 'listen' ]( X.UI.Event._POINTER_MOVE, this, X_UI_ScrollBox_onMove ); + this[ 'listen' ]( [ X.UI.Event._POINTER_UP, X.UI.Event._POINTER_CANCEL ], this, X_UI_ScrollBox_onEnd ); - //console.log( 'start : 3' ); return ret | X_Callback_PREVENT_DEFAULT; }; @@ -246,14 +301,15 @@ function X_UI_ScrollBox_onMove( e ){ absDistX, absDistY; // 規定以上の move でスクロール開始 - if( !this.enabled || e.pointerType !== this.initiated ){ + if( !this.scrollEnabled || e.pointerType !== this.initiated ){ return ret; }; // gpu の用意 - if( !this.containerNode[ '_anime' ] ){ - console.log( 'gpuレイヤーの用意' ); - this._translate( this.x, this.y ); + if( !this._containerXNode[ '_anime' ] ){ + //console.log( 'gpuレイヤーの用意 ' + e.pageY ); + //console.log( 'mov1 x:' + this.scrollX + ' y:' + this.scrollY ); + X_UI_ScrollBox_translate( this, this.scrollX, this.scrollY, 0, '', 300 ); return ret; }; @@ -305,26 +361,29 @@ function X_UI_ScrollBox_onMove( e ){ this[ 'dispatch' ]( X.UI.Event.SCROLL_MOVE ); }; - newX = this.x + deltaX;// - this.minusX; - newY = this.y + deltaY;// - this.minusY; + newX = this.scrollX + deltaX;// - this.minusX; + newY = this.scrollY + deltaY;// - this.minusY; // Slow down if outside of the boundaries if( 0 < newX || newX < this.maxScrollX ){ - newX = this.bounce ? this.x + ( deltaX ) / 3 : 0 < newX ? 0 : this.maxScrollX; + newX = this.bounceEnabled ? this.scrollX + ( deltaX ) / 3 : 0 < newX ? 0 : this.maxScrollX; }; + if( 0 < newY || newY < this.maxScrollY ){ - newY = this.bounce ? this.y + ( deltaY ) / 3 : 0 < newY ? 0 : this.maxScrollY; + //console.log( 'slow... ' + newY + ' ' + this.maxScrollY ); + newY = this.bounceEnabled ? this.scrollY + ( deltaY ) / 3 : 0 < newY ? 0 : this.maxScrollY; }; this.directionX = 0 < deltaX ? -1 : deltaX < 0 ? 1 : 0; this.directionY = 0 < deltaY ? -1 : deltaY < 0 ? 1 : 0; - this._translate( newX, newY ); + //console.log( 'mov2 x:' + newX + ' y:' + newY ); + X_UI_ScrollBox_translate( this, newX, newY, 0, '', 300 ); if( 300 < timestamp - this.startTime ){ this.startTime = timestamp; - this.startX = this.x; - this.startY = this.y; + this.startX = this.scrollX; + this.startY = this.scrollY; }; // イベントの拘束 return ret | X_Callback_PREVENT_DEFAULT | X_Callback_MONOPOLY; @@ -336,12 +395,12 @@ function X_UI_ScrollBox_onEnd( e ){ easing = '', newX, newY, momentumX, momentumY, - duration, distanceX, distanceY; + duration, distanceX, distanceY, font; - this[ 'unlisten' ]( X.UI.Event.POINTER_MOVE, X_UI_ScrollBox_onMove ); - this[ 'unlisten' ]( X.UI.Event.POINTER_END, X_UI_ScrollBox_onEnd ); + this[ 'unlisten' ]( X.UI.Event._POINTER_MOVE, this, X_UI_ScrollBox_onMove ); + this[ 'unlisten' ]( [ X.UI.Event._POINTER_UP, X.UI.Event._POINTER_CANCEL ], this, X_UI_ScrollBox_onEnd ); - if( !this.enabled || e.pointerType !== this.initiated ){ + if( !this.scrollEnabled || e.pointerType !== this.initiated ){ return ret; }; @@ -350,13 +409,13 @@ function X_UI_ScrollBox_onEnd( e ){ this.endTime = X_Timer_now(); duration = this.endTime - this.startTime; - newX = Math.round( this.x ); - newY = Math.round( this.y ); + newX = Math.round( this.scrollX ); + newY = Math.round( this.scrollY ); distanceX = Math.abs(newX - this.startX); distanceY = Math.abs(newY - this.startY); // reset if we are outside of the boundaries - if( X_UI_ScrollBox_resetPosition( this, this.options.bounceTime ) ){ + if( X_UI_ScrollBox_resetPosition( this, this.bounceTime ) ){ return ret; }; @@ -365,116 +424,85 @@ function X_UI_ScrollBox_onEnd( e ){ // this[ 'dispatch' ]( X_EVENT_CANCELED ); return ret; }; - - this.scrollTo( newX, newY, 0 ); // ensures that the last position is rounded // start momentum animation if needed - if( this.options.momentum && duration < 300 ){ + if( this.momentumEnabled && duration < 300 ){ + font = this.fontSize; momentumX = this.hasHScroll ? - X_UI_ScrollBox_momentum( this.x, this.startX, duration, this.maxScrollX, this.options.bounce ? this.wrapperWidth : 0, this.options.deceleration ) :{ destination: newX, duration: 0 }; + X_UI_ScrollBox_momentum( this.scrollX, this.startX, duration, this.maxScrollX, this.bounceEnabled ? this.boxWidth * font : 0, this.deceleration ) : + { destination: newX, duration: 0 }; momentumY = this.hasVScroll ? - X_UI_ScrollBox_momentum( this.y, this.startY, duration, this.maxScrollY, this.options.bounce ? this.wrapperHeight : 0, this.options.deceleration ) : { destination: newY, duration: 0 }; + X_UI_ScrollBox_momentum( this.scrollY, this.startY, duration, this.maxScrollY, this.bounceEnabled ? this.boxHeight * font : 0, this.deceleration ) : + { destination: newY, duration: 0 }; newX = momentumX.destination; newY = momentumY.destination; - time = Math.max( momentumX.duration, momentumY.duration ); - this.isInTransition = 1; + time = Math.max( momentumX.duration, momentumY.duration ) | 0; + this.isInTransition = true; + } else { + //console.log( '慣性無し' ); }; - if( newX != this.x || newY != this.y ){ + if( newX != this.scrollX || newY != this.scrollY ){ // change easing function when scroller goes out of the boundaries if( 0 < newX || newX < this.maxScrollX || 0 < newY || newY < this.maxScrollY ){ easing = 'quadratic'; }; - this.scrollTo( newX, newY, time, easing ); + //console.log( 'end2 x:' + newX + ' y:' + newY + ' t:' + time ); + this.scrollTo( newX, newY, time, easing, 1000 ); return ret; }; + //console.log( 'end1 x:' + newX + ' y:' + newY ); + this.scrollTo( newX, newY, 0, '', 1000 ); // ensures that the last position is rounded + this[ 'dispatch' ]( X.UI.Event.SCROLL_END ); return ret; }; function X_UI_ScrollBox_resetPosition( that, time ){ - var x = this.x, - y = this.y; + var x = that.scrollX, + y = that.scrollY; time = time || 0; - if( !this.hasHScroll || 0 < this.x ){ + if( !that.hasHScroll || 0 < that.scrollX ){ x = 0; } else - if( this.x < this.maxScrollX ){ - x = this.maxScrollX; + if( that.scrollX < that.maxScrollX ){ + x = that.maxScrollX; }; - if( !this.hasVScroll || 0 < this.y ){ + if( !that.hasVScroll || 0 < that.scrollY ){ y = 0; } else - if( this.y < this.maxScrollY ){ - y = this.maxScrollY; + if( that.scrollY < that.maxScrollY ){ + y = that.maxScrollY; }; - if( x === this.x && y === this.y ){ - console.log( 'no バウンド' ); + if( x === that.scrollX && y === that.scrollY ){ + //console.log( 'no バウンド y:' + y + ' max:' + that.maxScrollY ); return false; }; - console.log( 'バウンド!' ); - this.scrollTo( x, y, time, this.options.bounceEasing ); + //console.log( 'バウンド!' ); + //console.log( 'rese x:' + x + ' y:' + y ); + that.scrollTo( x, y, time, that.bounceEasing, 1000 ); return true; }; -function X_UI_ScrollBox_translate( x, y ){ - this.containerNode.animate( - { - x : this.x, - y : this.y - }, - { - x : x, - y : y - }, - 0, '', 300 - ); - - this.x = x; - this.y = y; - - if( this.indicators ){ - for( i = this.indicators.length; i--; ){ - this.indicators[ i ].updatePosition(); - }; - }; -}; - -function X_UI_ScrollBox_refresh( remove ){ - this.maxScrollX = this.boxWidth - this.containerNode.boxWidth; - this.maxScrollY = this.boxHeight - this.containerNode.boxHeight; - - this.hasHScroll = this.User[ 'attr' ]( 'scrollX' ) && this.maxScrollX < 0; - this.hasVScroll = this.User[ 'attr' ]( 'scrollY' ) && this.maxScrollY < 0; - - if( !this.hasHScroll ){ - this.maxScrollX = 0; - this.scrollerWidth = this.wrapperWidth; +function X_UI_ScrollBox_onAnimeEnd( e ){ + if( e.target !== this._containerXNode || !this.isInTransition ){ + return X_Callback_NONE; }; - - if( !this.hasVScroll ){ - this.maxScrollY = 0; - this.scrollerHeight = this.wrapperHeight; + //this.xnodeScroller.stop(); + if( !X_UI_ScrollBox_resetPosition( this, this.bounceTime ) ){ + this.isInTransition = false; + this.dispatch( X.UI.Event.SCROLL_END ); }; - - delete this.endTime; - delete this.directionX; - delete this.directionY; - - this.wrapperOffset = this.xnodeWrapper[ 'offset' ](); - - //this[ 'dispatch' ]('refresh'); - - X_UI_ScrollBox_resetPosition( this, 0 ); + return X_Callback_NONE; }; X.UI.ScrollBox = X.UI.ChromeBox.inherits( @@ -483,7 +511,17 @@ X.UI.ScrollBox = X.UI.ChromeBox.inherits( X.UI._ScrollBox, { Constructor : function(){ - var args = [], + var args = [ + 0, // layout + { + name : 'ScrollBox-Scroller', + role : 'container', + width : 'auto', + minWidth : '100%', + height : 'auto', + minHeight : '100%' + } + ], i = arguments.length, arg, layout; @@ -495,24 +533,20 @@ X.UI.ScrollBox = X.UI.ChromeBox.inherits( args[ args.length ] = arg; }; }; - /* - this.style = DisplayNodeStyle( this, - X_Class_newPrivate( - this, - X.UI.Layout.Canvas, - [ - Box( - layout || VerticalLayoutManager, - { - name : 'ScrollBox-Scroller', - role : 'container' - }, - args - ) - ] - ) + + args[ 0 ] = X.UI.Layout.Vertical; + + X_Class_newPrivate( + this, + X.UI.Layout.Canvas, + [ + { + width : '100%', + height : '100%' + }, + X.UI.VBox.apply( 0, args ) + ] ); - this.style.addName( 'ScrollBox' ); */ }, scrollX : function(){ diff --git a/0.6.x/js/20_ui/20_PageRoot.js b/0.6.x/js/20_ui/20_PageRoot.js index 43fbb74..8890fd4 100644 --- a/0.6.x/js/20_ui/20_PageRoot.js +++ b/0.6.x/js/20_ui/20_PageRoot.js @@ -114,7 +114,7 @@ X.UI._PageRoot = X.UI._Box.inherits( } ); // hover や rollover rollout のための move イベントの追加 - this.xnodeInteractiveLayer[ 'listen' ]( X.UI.Event.IdToName[ X.UI.Event._POINTER_MOVE ], X_UI_eventRellay ); + this.xnodeInteractiveLayer[ 'listen' ]( 'pointermove', X_UI_eventRellay ); if( counter[ X.UI.Event._POINTER_MOVE ] ){ ++counter[ X.UI.Event._POINTER_MOVE ]; } else { @@ -145,12 +145,16 @@ X.UI._PageRoot = X.UI._Box.inherits( }; }, calculate : function( e ){ - var size = X[ 'ViewPort' ][ 'getSize' ](), - font = X[ 'ViewPort' ][ 'getBaseFontSize' ](), - w = size[ 0 ], - h = size[ 1 ]; - this.layout.calculate( this, false, 0, 0, w / font, h / font ); + var size, font, w, h; + + this[ 'dispatch' ]( X.UI.Event.LAYOUT_BEFORE ); + + size = X[ 'ViewPort' ][ 'getSize' ](); + font = X[ 'ViewPort' ][ 'getBaseFontSize' ](); + this.layout.calculate( this, false, 0, 0, size[ 0 ] / font, size[ 1 ] / font ); this.calcReserved = false; + + X_ViewPort[ 'listenOnce' ]( X_EVENT_AFTER_UPDATE, this, XUI_PageRoot_onViewUpdate ); }, updateCoursor : function( cursor ){ @@ -164,6 +168,10 @@ X.UI._PageRoot = X.UI._Box.inherits( } ); +function XUI_PageRoot_onViewUpdate( e ){ + this[ 'dispatch' ]( X.UI.Event.LAYOUT_COMPLETE ); +}; + X.UI.PageRoot = X.UI.Box.presets( 'PageRoot', X.UI._PageRoot, -- 2.11.0