From fef2e81d242a7ebd86dcb1089338303ef28659d5 Mon Sep 17 00:00:00 2001 From: itozyun Date: Mon, 7 Dec 2015 00:52:39 +0900 Subject: [PATCH] Version 0.6.199, bug fixes X.Node.Anime & X.Util.Window & X.Net.OAuth2 & X.UI.*. --- 0.6.x/js/01_core/13_XClass.js | 6 +- 0.6.x/js/02_dom/06_XNodeCSS.js | 2 +- 0.6.x/js/02_dom/10_XNodeAnime.js | 834 ++++++++++++++---------------------- 0.6.x/js/02_dom/20_XNode.js | 37 +- 0.6.x/js/05_util/06_XWindow.js | 62 ++- 0.6.x/js/06_net/05_XXHRGadget.js | 2 +- 0.6.x/js/06_net/10_XOAuth2.js | 110 +++-- 0.6.x/js/07_audio/00_XAudio.js | 2 +- 0.6.x/js/20_ui/01_XUI_LayoutBase.js | 2 - 0.6.x/js/20_ui/05_XUI_Gesture.js | 18 +- 0.6.x/js/20_ui/08_Box.js | 2 + 0.6.x/js/20_ui/15_ScrollBox.js | 68 +-- 0.6.x/js/20_ui/20_Root.js | 15 +- 13 files changed, 524 insertions(+), 636 deletions(-) diff --git a/0.6.x/js/01_core/13_XClass.js b/0.6.x/js/01_core/13_XClass.js index f0dc784..de84007 100644 --- a/0.6.x/js/01_core/13_XClass.js +++ b/0.6.x/js/01_core/13_XClass.js @@ -171,7 +171,9 @@ X_Class_CommonMethods = // index が替わっている可能性があるので取り直し if( X_Class_SUPER_CALLER[ i ] !== me ) i = X_Class_SUPER_CALLER.indexOf( me ); - if( X_Class_SUPER_STACKS[ i ] === stack ) console.log( 'スーパークラス、またはスーパークラスのコンストラクタは存在しません' ); + if( X_Class_SUPER_STACKS[ i ] === stack ){ + //console.log( 'スーパークラス、またはスーパークラスのコンストラクタは存在しません' ); + }; if( stack === 0 ){ X_Class_SUPER_CALLER.splice( i, 1 ); @@ -662,7 +664,7 @@ function X_Class_actualConstructor( f, args ){ obj = def.Constructor ? def.Constructor.apply( instance, args ) : - instance[ 'Super' ].apply( instance, args ); + def.SuperClass && instance[ 'Super' ].apply( instance, args ); if( obj !== instance && ( X_Type_isObject( obj ) || X_Type_isFunction( obj ) ) ){ // Class instance[ 'kill' ](); diff --git a/0.6.x/js/02_dom/06_XNodeCSS.js b/0.6.x/js/02_dom/06_XNodeCSS.js index 28e337d..a59b708 100644 --- a/0.6.x/js/02_dom/06_XNodeCSS.js +++ b/0.6.x/js/02_dom/06_XNodeCSS.js @@ -831,7 +831,7 @@ X[ 'CSS' ] = { for( j = vendors.length; j; ){ v = vendors[ --j ]; if( testStyle[ v + prop ] !== undefined ){ - if( v === 'ms' && !( 10 <= X_UA[ 'IEHost' ] ) ) v = 'Ms';// for ie9, 但し ie11 のieには不要 + if( v === 'ms'/* && !( 10 <= X_UA[ 'IEHost' ] )*/ ) v = 'Ms';// for ie9, 但し ie11 のieには不要 if( v === 'o' ) v = 'O';//for opera12 X_Node_CSS_VENDER_PREFIX[ search ] = v + prop; break; diff --git a/0.6.x/js/02_dom/10_XNodeAnime.js b/0.6.x/js/02_dom/10_XNodeAnime.js index 9458c38..6ba1bc2 100644 --- a/0.6.x/js/02_dom/10_XNodeAnime.js +++ b/0.6.x/js/02_dom/10_XNodeAnime.js @@ -1,531 +1,361 @@ -var - ease = { - 'quadratic' : { - style: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)', - fn: function (k) { - return k * ( 2 - k ); - } - }, - 'circular' : { - style: 'cubic-bezier(0.1, 0.57, 0.1, 1)', // Not properly "circular" but this looks better, it should be (0.075, 0.82, 0.165, 1) - fn: function (k) { - return Math.sqrt( 1 - ( --k * k ) ); - } - }, - 'back' : { - style: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)', - fn: function (k) { - var b = 4; - return ( k = k - 1 ) * k * ( ( b + 1 ) * k + b ) + 1; - } - }, - 'bounce' : { - style: '', - fn: function (k) { - if ( ( k /= 1 ) < ( 1 / 2.75 ) ) { - return 7.5625 * k * k; - } else if ( k < ( 2 / 2.75 ) ) { - return 7.5625 * ( k -= ( 1.5 / 2.75 ) ) * k + 0.75; - } else if ( k < ( 2.5 / 2.75 ) ) { - return 7.5625 * ( k -= ( 2.25 / 2.75 ) ) * k + 0.9375; - } else { - return 7.5625 * ( k -= ( 2.625 / 2.75 ) ) * k + 0.984375; - } - } - }, - 'elastic' : { - style: '', - fn: function (k) { - var f = 0.22, - e = 0.4; - - if ( k === 0 ) { return 0; } - if ( k == 1 ) { return 1; } - - return ( e * Math.pow( 2, - 10 * k ) * Math.sin( ( k - f / 4 ) * ( 2 * Math.PI ) / f ) + 1 ); - } - } - }; - -// お約束 -// transform や transition animation は スタイルシートに書かない - -// 新規アニメーションが追加された場合、 -// tree が dirty なら AFTER_COMMIT を待つ -// 1) xnode の既存アニメーションとの親子関係の調査 -// 親なら -> 既存アニメーションの GPU レイヤー解除 -// 子なら -> GPU レイヤーを設定しない -// 2) 目標座標のセット -// 3) アニメーション完了後も GPU レイヤーはしばらく解除しない スクロール等の連続アニメーション時に GPU 転送時間で画面ががたつくから -// アニメ中の remove - -var X_Node_ANIMATIONS = [], - X_Node_Anime_reserved = false, - X_Node_Anime_updateTimerID = 0, - X_Node_Anime_needsDetection = false, - X_Node_Anime_onTransition = false, +var X_NodeAnime_QUEUE = [], + X_NodeAnime_uid = 0, + X_NodeAnime_reserved = false, + X_NodeAnime_updateTimerID = 0, + X_NodeAnime_needsDetection = false, - X_Node_Anime_hasTransform = !!X_Node_CSS_VENDER_PREFIX[ 'transform' ], + X_NodeAnime_hasTransform = !!X_Node_CSS_VENDER_PREFIX[ 'transform' ], /* Opera mobile で translateZ(0) が有効だと XY が 0 0 になる */ /* GPUレイヤーにいる間に要素のコンテンツを変更をすると transitionend が動かなくなるっぽい Mac safari と firefox */ - X_Node_Anime_translateZ = X_Node_CSS_VENDER_PREFIX[ 'perspective' ] && !X_UA[ 'OperaMobile' ] && !X_UA[ 'OperaTablet' ] ? ' translateZ(0)' : '', - /* Opera12(XP,8.1) 切った方がスムース, win Safari3 で、たまに動作が止まってしまう、、、 */ - X_Node_Anime_hasTransition = false && !!X_Node_CSS_VENDER_PREFIX[ 'transitionDelay' ] && !( X_UA[ 'iOS' ] < 6 ) && !X_UA[ 'Opera' ] && !X_UA[ 'Blink' ], // && !( X_UA[ 'Webkit' ] <= 528.16 ), - X_Node_Anime_transitionProps = X_Node_Anime_hasTransform ? X_Node_CSS_VENDER_PREFIX[ 'transform' ] : 'left,top', - // transitionEnd イベント中に要素の更新( X_Node_startUpdate() )ができるか？ - // iOS3+4 では可能、iOS6.1.5 で不可。TODO iOS5　及び他の環境で調査。ダメな場合、anime.html が正しく描画されない。 - X_Node_updateOnTransitionEnd = false; - -// gpu化だけ transformX , willChange -// 終了位置の変更 -// 中断 + X_NodeAnime_translateZ = X_Node_CSS_VENDER_PREFIX[ 'perspective' ] && !X_UA[ 'OperaMobile' ] && !X_UA[ 'OperaTablet' ] ? ' translateZ(0)' : '', + + X_NodeAnime_transitionProps = X_NodeAnime_hasTransform ? X_Node_CSS_VENDER_PREFIX[ 'transform' ] : 'left,top'; /* - * TODO : DX Anime - * TODO : scale, ActiveX transform, zoom, fontSizeScale - * TODO : rotate, ActiveX transform -> 位置補正のために size 情報が必要なので、commitUpdate 後に計算して適用 - * TODO : matrix - * TODO : skew - * TODO : filter - * TODO 前回位置からの継続 - * TODO scrollLeft, scrollTop + * phase: + * 0: アニメーション無 + * 1: 登録されたばかり + * 2: 準待機 + * 3: 後続待機 + * 4: 強制停止(GPU転送予約) + * 5: GPU解除待ち + * 6: 開始可能 + * 7: アニメーション中 + * TODO node.css( 'opacity' ) の上書き */ + +var X_NODE_ANIME_RESET = 1, + X_NODE_ANIME_STAY_GPU = 2; + /** * GPU サポートの効いたアニメーションの設定 X.Event.ANIME_START, X.Event.ANIME_END, X.Event.GPU_RELEASED - * * @alias Node.prototype.animate * @param {object} start { x : 0, y : 0, opacity : 1 } * @param {object} dest { x : 100, y : 100, opacity : 0 } * @param {number=} duartion アニメーション時間 ms * @param {string=} easing 'quadratic', 'circular', 'back', 'bounce', 'elastic' * @param {number=} wait GPU レイヤーの遅延解除 ms + * @param {number=} option フォールバックについて * @return {Node} メソッドチェーン */ -function X_Node_animate( start, dest, duration, easing, wait ){ - var isNew = !this[ '_anime' ], - obj = this[ '_anime' ]; +function X_Node_animate( start, dest, duration, easing, lazyRelease, option ){ + var list = X_NodeAnime_QUEUE, + obj = this[ '_anime' ], + isNew = !obj, + now, stop; - if( !obj ){ - this[ '_anime' ] = obj = X_Node_Anime_getComputedPosition( this ); - obj.destX = obj.x; - obj.destY = obj.y; - obj.destA = obj.a; + if( !( this[ '_flags' ] & X_NodeFlags_IN_TREE ) ){ + alert( '@animate 要素はツリーに追加されていません!' ); + // それでもアニメーションしてタイマー代わりにするとか、、、? + return this; }; - obj.duration = 0 <= duration && X_Type_isFinite( duration ) ? duration : 500; - obj.easing = ease[ easing ] || ease[ 'circular' ]; - // 現在 GPUレイヤーのtop になっているか？将来については phase で判定 - obj.gpuParent = obj.gpuParent || false; - obj.phase = duration === 0 ? 9 : obj.phase === 9 ? 9 : 0; // - obj.wait = X_Type_isFinite( wait ) ? wait : 1000; - - obj.startTime = X_Timer_now(); - obj.startX = ( start.x || start.x === 0 ) ? start.x : obj.x || NaN; - obj.startY = ( start.y || start.y === 0 ) ? start.y : obj.y || NaN; - obj.startA = 0 <= start.opacity && start.opacity <= 1 ? start.opacity : obj.a || 1; - - obj.destTime = obj.startTime + obj.duration; - obj.destX = ( dest.x || dest.x === 0 ) ? dest.x : obj.destX || NaN; - obj.destY = ( dest.y || dest.y === 0 ) ? dest.y : obj.destY || NaN; - obj.destA = 0 <= dest.opacity && dest.opacity <= 1 ? dest.opacity : obj.destA || 1; - - X_Node_ANIMATIONS.indexOf( this ) === -1 && - ( X_Node_ANIMATIONS[ X_Node_ANIMATIONS.length ] = this ); - + if( isNew ){ + this[ '_anime' ] = obj = { + x : 0, y : 0, a : 1, + destX : 0, destY : 0, destA : 1, + duration : 0 + //phase, lazyRelease, easing, follower, releaseNow + }; + }; - if( X_Node_Anime_onTransition ) return this; + if( 0 <= duration && X_Type_isFinite( duration ) ){ + obj.duration = duration; + stop = !duration; + }; - if( X_Node_Anime_hasTransition ){ - - if( obj.gpuTimerID ){ - X_Timer_remove( obj.gpuTimerID ); - delete obj.gpuTimerID; - }; - - X_Node_Anime_needsDetection = true; + if( obj.phase !== 7 ){ + // アニメーション中は easing の変更ができない + obj.easing = X_Type_isFunction( easing ) ? easing : X_NodeAnime_ease[ easing ] || X_NodeAnime_ease[ 'circular' ]; + }; +// form : + obj.startX = obj.x = X_NodeAnime_getFinite( start[ 'x' ], obj.x ); + obj.startY = obj.y = X_NodeAnime_getFinite( start[ 'y' ], obj.y ); + obj.startA = obj.a = X_NodeAnime_getFinite( start[ 'opacity' ], obj.a ); + + // to : + obj.destX = X_NodeAnime_getFinite( dest[ 'x' ], obj.destX ); + obj.destY = X_NodeAnime_getFinite( dest[ 'y' ], obj.destY ); + obj.destA = X_NodeAnime_getFinite( dest[ 'opacity' ], obj.destA ); + + obj.lazyRelease = 0 <= lazyRelease && X_Type_isFinite( lazyRelease ) ? lazyRelease : 0; + + if( stop && 6 <= obj.phase ){ + this[ 'stop' ](); // 現在値で停止 + } else + if( !stop || obj.lazyRelease ){ + if( isNew || !obj.phase ){ + list[ list.length ] = this; + obj.phase = 1; + obj.uid = ++X_NodeAnime_uid; + X_NodeAnime_needsDetection = true; + } else + if( obj.phase < 4 ){ + list.splice( list.indexOf( this ), 1 ); + list[ list.length ] = this; + obj.uid = ++X_NodeAnime_uid; + X_NodeAnime_needsDetection = true; + } else + if( !stop ){ + // リストの先頭にいるため検査不要でアニメーション開始可能 4, 5, 6, 7 + obj.phase = 6; + } else + // obj.lazyRelease はあり + if( obj.phase !== 5 ){ // GPU解除待ち ではない -> 4. 6, 7 + obj.phase = 4; // 強制停止(GPU転送予約) + obj.releaseNow = false; // TODO folower が要るため GPU 転送できないケースあり + X_NodeAnime_needsDetection = true; + }; - X_Node_Anime_reserveUpdate( true ); - } else { - if( !X_Node_Anime_reserved ){ - X_Node_Anime_reserved = true; + if( !X_NodeAnime_reserved ){ + X_NodeAnime_reserved = true; + if( X_Node_updateTimerID ){ - X_System[ 'listen' ]( X_EVENT_UPDATED, X_Node_Anime_updateAnimationsNoTransition ); - X_Node_Anime_updateTimerID && X_Timer_cancelFrame( X_Node_Anime_updateTimerID ); - X_Node_Anime_updateTimerID = 0; + if( X_NodeAnime_updateTimerID ) X_NodeAnime_updateTimerID = X_Timer_cancelFrame( X_NodeAnime_updateTimerID ); + + X_System[ 'listen' ]( X_EVENT_UPDATED, X_NodeAnime_updateAnimations ); } else { - X_System[ 'unlisten' ]( X_EVENT_UPDATED, X_Node_Anime_updateAnimationsNoTransition ); - X_Node_Anime_updateTimerID = X_Timer_requestFrame( X_Node_Anime_updateAnimationsNoTransition ); + X_System[ 'unlisten' ]( X_EVENT_UPDATED, X_NodeAnime_updateAnimations ); + X_NodeAnime_updateTimerID = X_Timer_requestFrame( X_NodeAnime_updateAnimations ); }; + }; + } else { + if( obj.phase ){ + this[ 'stop' ](); // リストから外す }; - - isNew && this[ 'dispatch' ]( { type : X_EVENT_ANIME_START, 'gpu' : false } ); + console.log( 'リストに加えない!' ); }; - - // console.log( 'animate() ' + this[ '_id' ] + ' y:' + obj.startY + ' > ' + obj.destY + ' d:' + obj.duration ); - + return this; }; +function X_NodeAnime_getFinite( a, b ){ + if( a || a === 0 ) return a; + if( b || b === 0 ) return b; + return NaN; +}; + +/* + * 1.アニメーション中の要素の停止 ->後続アニメーションの開始 + * 2.アニメーション待機中の要素の停止 -> 後続アニメーションの再調査 + */ /** * アニメーションの停止。 * @alias Node.prototype.stop * @return {Node} メソッドチェーン */ -function X_Node_stop(){ - var obj = this[ '_anime' ]; +function X_Node_stop( option ){ + var obj = this[ '_anime' ], + list = X_NodeAnime_QUEUE, + i, rm, j, xnode, _obj; - if( !obj ) return this; - - if( X_Node_Anime_hasTransition ){ - obj.phase = 100; - X_Node_Anime_needsDetection = true; - X_Node_Anime_reserveUpdate(); - } else { - X_Node_ANIMATIONS.splice( X_Node_ANIMATIONS.indexOf( this ), 1 ); - //obj.gpuTimerID && X_Timer_remove( obj.gpuTimerID ); - delete this[ '_anime' ]; + if( !obj || !obj.phase ) return this; + + switch( obj.phase ){ + case 6 : // アニメーション開始可能 ?? + case 2 : // 準待機 + case 3 : // アニメーション待機中 + X_NodeAnime_needsDetection = true; + case 1 : + rm = true; + + case 4 : // 強制停止(GPU転送予約) + case 7 : // アニメーション中 + if( option & X_NODE_ANIME_RESET ){ + obj.startX = obj.startY = obj.destX = obj.destY = obj.x = obj.y = 0; + obj.startA = obj.destA = obj.a = 1; + }; // TODO 終了値で停止も,,, + + if( rm ) break; // 1,2,3,6 の場合ここまで + + obj.destX = obj.x; + obj.destY = obj.y; + obj.destA = obj.a; + + obj.phase = 4; // 強制解除 + X_NodeAnime_needsDetection = true; + + case 5 : // GPU解除待ち + obj.releaseNow = !( option & X_NODE_ANIME_STAY_GPU ); + break; }; + + if( rm ){ + list.splice( list.indexOf( this ), 1 ); + obj.phase = 0; + }; + return this; }; -function X_Node_Anime_reserveUpdate( before ){ - if( !X_Node_Anime_reserved ){ - X_Node_Anime_reserved = true; +/* + * 1. 新規アニメーションが現在アニメーション中の要素の親か子であればアニメーションを待機 + * 2. + */ +function X_NodeAnime_detectWaitAnimation( xnode, duration, isText ){ + var list = X_NodeAnime_QUEUE, + i = 0, _xnode; + + for( ; _xnode = list[ i ]; ++i ){ + if( _xnode === xnode ) break; - if( X_Node_updateTimerID ){ - //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' ); - // 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 ); + // アニメーションの優先度はリストにいる順 + // まず先行する後続待機要素の中に、親子関係のものがいないか？探す + if( _xnode[ '_anime' ].phase <= 3 ){ + if( xnode[ 'contains' ]( _xnode ) || _xnode[ 'contains' ]( xnode ) ){ + // -> いる、このような要素が複数いる場合、誰に後続すればいいか？判然としないため、準待機フラグを立てる + return 2; + }; }; - } else { - // console.log( ' X_Node_Anime_reserved 済、予約なし' ); }; -}; -function X_Node_Anime_updateAnimations( v, updateNow ){ - var i = X_Node_ANIMATIONS.length, c = false, ret, xnode; - - // console.log( v.type || v ); - - //console.log( 'updateAnimations len:' + i + ' time:' + v + ' det:' + X_Node_Anime_needsDetection ); - - if( X_Node_Anime_needsDetection ) X_Node_Anime_detectAnimationLayers(); - - for( ; i; ){ - xnode = X_Node_ANIMATIONS[ --i ]; - //console.log( 'phase : ' + xnode[ '_id' ] + ' ' + xnode[ '_anime' ].phase + ' ' + xnode[ '_anime' ].duration ); - ret = X_Node_Anime_updateAnimation( xnode ); - if( ret === true ){ - X_Node_ANIMATIONS.splice( i, 1 ); - xnode[ '_anime' ].gpuTimerID && X_Timer_remove( xnode[ '_anime' ].gpuTimerID ); - delete xnode[ '_anime' ]; - } else - if( ret !== false ){ - c = true; + // -> いない、アニメーション中(開始可能も)の要素の中に、親子関係のものがいないか？探す + // -> いる、待機状態へ + // -> いない、アニメーションが可能 + for( i = 0; _xnode = list[ i ]; ++i ){ + if( _xnode === xnode ) break; + + if( 6 <= _xnode[ '_anime' ].phase ){ + if( xnode[ 'contains' ]( _xnode ) || _xnode[ 'contains' ]( xnode ) ){ + return isText ? 3 : _xnode; + }; }; }; - - if( ( X_Node_Anime_updateTimerID || updateNow ) && X_Node_updateTimerID ) X_Node_startUpdate(); - - X_Node_Anime_updateTimerID = 0; - X_Node_Anime_reserved = false; - if( c ){ - X_Node_Anime_reserveUpdate(); - }; + // アニメーション可能 + return duration ? 6 : 4; // duration がない場合は、アニメーション強制停止へ進みそこから GPU 解除待ちへ }; -// TODO X_Timer_requestFrame 経由の BEFORE_UPDATE で更新を行う -function X_Node_Anime_detectAnimationLayers(){ - var i = X_Node_ANIMATIONS.length, - l = i, - j, xnode, parent, _xnode, hasGPUChild, remove; - - for( ; i; ){ - xnode = X_Node_ANIMATIONS[ --i ]; - parent = hasGPUChild = false; - for( j = l; j; ){ - _xnode = X_Node_ANIMATIONS[ --j ]; +function X_NodeAnime_updateAnimations( e ){ + var list = X_NodeAnime_QUEUE, + i = list.length, + now = X_Timer_now(), + c = false, + i, xnode, obj, _xnode, + rm, easing, follower, lazy; + + if( X_NodeAnime_needsDetection ){ + X_NodeAnime_needsDetection = false; + + // + list.sort( X_NodeAnime_sortAnimationNode ); + + for( i = 0; xnode = list[ i ]; ++i ){ + obj = xnode[ '_anime' ]; - if( xnode.parent === _xnode.parent ){ - continue; - } else - if( _xnode[ 'contains' ]( xnode ) ){ - if( ( _xnode[ '_anime' ].phase === 3 && _xnode[ '_anime' ].gpuParent ) || _xnode[ '_anime' ].phase === 10 ){ - _xnode[ '_anime' ].phase = 15; - } else - if( xnode[ '_anime' ].gpuParent ){ - parent = true; - xnode[ '_anime' ].phase = xnode[ '_anime' ].phase === 2 ? 6 : 15;// GPU レイヤーの解除 > アニメーションは継続, すでに終了フェイズなら破棄 - } else - if( [ 7, 8, 9, 13, 14 ].indexOf( xnode[ '_anime' ].phase ) !== -1 ){// GPU レイヤーの中止 - parent = true; - xnode[ '_anime' ].phase -= 8; + if( obj.phase <= 3 ){ + if( !X_Type_isNumber( obj.phase = _xnode = X_NodeAnime_detectWaitAnimation( xnode, obj.duration ) ) ){ + _xnode[ '_anime' ].follower = true; + obj.phase = 3; // 後続待機 }; - break; - } else - if( xnode[ 'contains' ]( _xnode ) ){ - if( ( xnode[ '_anime' ].phase === 3 && xnode[ '_anime' ].gpuParent ) || xnode[ '_anime' ].phase === 10 ){ - xnode[ '_anime' ].phase = 15; - } else - if( _xnode[ '_anime' ].gpuParent ){ - hasGPUChild = true; - _xnode[ '_anime' ].phase = _xnode[ '_anime' ].phase === 2 ? 6 : 15;// GPU レイヤーの解除 > アニメーションは継続, すでに終了フェイズなら破棄 - } else - if( [ 7, 8, 9, 13, 14 ].indexOf( _xnode[ '_anime' ].phase ) !== -1 ){// GPU レイヤーの中止 - hasGPUChild = true; - _xnode[ '_anime' ].phase -= 8; - }; - break; - }; - }; - - if( !parent && xnode[ '_anime' ].phase !== 15 ){ - if( xnode[ '_anime' ].phase === 0 ){ - // 新規 - xnode[ '_anime' ].phase = hasGPUChild ? 7 : 8;// 非GPU -> GPU 子に GPU アニメをもつなら、タイミングをずらす。 - } else - if( [ 3, 4, 10, 100 ].indexOf( xnode[ '_anime' ].phase ) === -1 ){ - // 非GPU -> GPU - xnode[ '_anime' ].phase = hasGPUChild ? 13 : 14;// 非GPU -> GPU 子に GPU アニメをもつなら、タイミングをずらす。 + } else { + obj.follower = false; }; }; }; - X_Node_Anime_needsDetection = false; -}; + for( ; i; ){ + rm = false; + xnode = list[ --i ]; + obj = xnode[ '_anime' ]; -function X_Node_Anime_updateAnimation( xnode ){ - var obj = xnode[ '_anime' ], - phase = obj.phase, - current, time; - switch( phase ){ - case 2 : - // アニメーション中 - return false; - - case -1 :// 子の GPU レイヤー解除待ち - case 7 : - ++obj.phase; - break; - case 0 : // 開始位置+アニメーションの設定 - case 8 : - X_ViewPort[ 'unlisten' ]( X_EVENT_AFTER_UPDATE, xnode, X_Node_Anime_gpuReleased ); - - xnode[ 'css' ]({ - //willChange : X_Node_Anime_transitionProps + ',opacity,width,height', - backfaceVisibility : 'hidden', - transitionTimingFunction : obj.easing.style, - transitionDelay : '0s' // 0.001 にすると transitionend のタイミングが狂う、、、 - }); - - //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 } ); - ++obj.phase; - break; - case 1 : - case 9 : // 終了位置の設定 - obj.gpuParent = phase === 9; - if( obj.duration ){ - xnode[ 'listenOnce' ]( 'transitionend', X_Node_Anime_onTransitionEnd ); - - xnode[ 'css' ]({ - transitionProperty : X_Node_Anime_transitionProps + ',opacity,width,height', - transitionDuration : obj.duration + 'ms' - }); + switch( obj.phase ){ + case 7 : // アニメーション中 + if( now < obj.destTime ){ + easing = obj.progress = obj.easing.fn( ( now - obj.startTime ) / obj.duration ); + X_NodeAnime_updatePosition( xnode, + obj.x = ( obj.destX - obj.startX ) * easing + obj.startX | 0, + obj.y = ( obj.destY - obj.startY ) * easing + obj.startY | 0, + obj.a = ( obj.destA - obj.startA ) * easing + obj.startA, true ); + c = true; + break; + }; + // アニメーション終了 + case 4 : // 強制停止(GPU転送予約) + lazy = !obj.follower && !obj.releaseNow && obj.lazyRelease; + X_NodeAnime_updatePosition( xnode, obj.destX, obj.destY, obj.destA, !!lazy ); + + xnode[ 'asyncDispatch' ]( X_EVENT_ANIME_END ); - //console.log( '修了位置 ' + phase ); - X_Node_Anime_updatePosition( xnode, obj.destX, obj.destY, obj.destA, obj.gpuParent ); - obj.phase = 2; + if( lazy ){ + console.log( 'アニメーション終了(' + obj.phase + ') -> GPU 解除待機 ' + lazy ); + obj.releaseTime = now + lazy; + obj.phase = 5; // GPU解除待ち + c = true; + } else { + console.log( 'アニメーション終了(' + obj.phase + ') -> ' ); + rm = true; + }; break; - }; - //console.log( 'duration = 0 の場合、アニメーションの解除' ); - // duration = 0 の場合、アニメーションの解除 - - case 3 : // TransitionEnd　-> アニメーションの解除 - obj.phase = obj.gpuParent ? 10 : 4; - - //console.log( '#### アニメーションの解除 ' + obj.phase ); - - // このタイミングで animation 関連の css を削除したところ(X_Node_Anime_clearTransition)、iOS3、4 で再描画忘れが度々起きるように、、、 - if( !obj.gpuParent ) X_Node_Anime_clearTransition( xnode ); - break; - case 4 : - // アニメーションは停止・GPU=false -> リストから削除 - obj.gpuParent = false; - return true; - - case 10 : - // アニメーションは停止・GPUレイヤーは解除していない(再アニメーションに備えて待機) - if( !obj.gpuTimerID ){ - //console.log( '#### アニメーションは停止 ' + obj.wait ); - if( obj.wait ){ - obj.gpuTimerID = X_Timer_once( obj.wait, xnode, X_Node_Anime_releaseGPULayer ); + case 6 : // アニメーション開始可能 + obj.startTime = now; + obj.destTime = now + obj.duration; + obj.phase = 7; // アニメーション中 + obj.progress = 0; + X_NodeAnime_updatePosition( xnode, obj.startX, obj.startY, obj.startA, true ); + xnode[ 'asyncDispatch' ]( X_EVENT_ANIME_START ); + c = true; + break; + + case 5 : // GPU解除待ち + if( obj.releaseTime <= now || obj.follower || obj.releaseNow ){ + X_NodeAnime_translateZ && X_NodeAnime_updatePosition( xnode, obj.destX, obj.destY, obj.destA, false ); + rm = true; } else { - X_Node_Anime_releaseGPULayer.call( xnode ); + c = true; }; - }; - return false; - - case 5 : - case 13 : - // 子のGPU解除待ち - ++obj.phase; - break; - - // GPU レイヤーの変更> アニメーションは継続,但し残り時間が短ければ停止 - case 6 : - case 14 : - now = X_Timer_now(); - time = obj.duration - now + obj.startTime; - if( time < 16 ){ - X_Node_Anime_clearTransition( xnode ); - X_Node_Anime_updatePosition( xnode, obj.destX, obj.destY, obj.destA, phase === 14 ); - obj.phase = phase === 14 ? 10 : 4; - xnode[ 'dispatch' ]( time, { type : X_EVENT_ANIME_END, 'gpu' : obj.gpuParent } ); - } else { - current = X_Node_Anime_getComputedPosition( xnode ); - obj.startX = current.x; - obj.startY = current.y; - obj.startA = current.a; - obj.duration = time; - obj.startTime = now; - X_Node_Anime_updatePosition( xnode, current.x, current.y, current.a, phase === 14 ); - obj.phase = phase === 14 ? 9 : 1; - }; - break; - - case 15 : - // GPU有効で停止（待機）している xnode の解除 - //console.log( 'GPU有効で停止（待機）している xnode の解除' + xnode[ '_tag' ] + xnode[ 'getOrder' ]() ); - // 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 ); - //delete obj.gpuTimerID; - X_ViewPort[ 'listenOnce' ]( X_EVENT_AFTER_UPDATE, xnode, X_Node_Anime_gpuReleased ); - return true; + break; + }; - case 100 : // stop() : アニメーションを中断して削除 - //console.log( 'stop() gpu:' + obj.gpuParent ); - // console.log( 'アニメーションを中断して削除' ); - current = X_Node_Anime_getComputedPosition( xnode ); - - X_Node_Anime_clearTransition( xnode ); - X_Node_Anime_updatePosition( xnode, current.x, current.y, current.a, obj.gpuParent ); - obj.phase = obj.gpuParent ? 10 : 4; - break; + obj.releaseNow = false; - }; -}; - -function X_Node_Anime_getComputedPosition( that ){ - var raw = that[ '_rawObject' ], - x = NaN, y = NaN, a = 1, style, matrix; - - if( raw ){ - if( X_Node_Anime_hasTransform ){ - if( style = X_Node_CSS_getComputedStyle( raw, null ) ){ - matrix = ( style[ X_Node_CSS_VENDER_PREFIX[ 'transform' ] ] || '' ).split( ')' )[ 0 ].split( ', ' ); - x = + ( matrix[ 12 ] || matrix[ 4 ] ); - y = + ( matrix[ 13 ] || matrix[ 5 ] ); - a = matrix[ X_Node_CSS_Support[ 'opacity' ] ]; - }; - } else - if( X_Node_CSS_getComputedStyle ){ - if( style = X_Node_CSS_getComputedStyle( raw, null ) ){ - x = parseFloat( style[ 'left' ] ); - y = parseFloat( style[ 'top' ] ); - a = parseFloat( style[ X_Node_CSS_Support[ 'opacity' ] ] ); - }; - } else - if( style = ( raw.currentStyle || raw.style ) ){ - x = parseFloat( style[ 'left' ] ); - y = parseFloat( style[ 'top' ] ); - a = that[ '_css' ] && 0 <= that[ '_css' ].opacity ? that[ '_css' ].opacity : 1; - //parseFloat( ( style[ 'filter' ] || 'opacity=1' ).split( 'opacity=' )[ 1 ] ); + if( rm ){ + X_NodeAnime_translateZ && xnode[ 'asyncDispatch' ]( X_EVENT_GPU_RELEASED ); + // 後続のアニメーションがある場合 + if( obj.follower ) X_NodeAnime_needsDetection = c = true; + list.splice( i, 1 ); + obj.phase = 0; }; }; - - return { x : x, y : y, a : a }; -}; - -function X_Node_Anime_onTransitionEnd( e ){ - console.log( '[TransitionEnd] ' + ( this[ '_anime' ] && this[ '_anime' ].phase ) ); - - 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_clearTransition( this ); // X_EVENT_ANIME_END より前で呼んでおく - - X_Node_Anime_onTransition = true; - this[ 'dispatch' ]( { type : X_EVENT_ANIME_END, 'gpu' : this[ '_anime' ].gpuParent } ); - X_Node_Anime_onTransition = false; - - X_Node_Anime_needsDetection = true; - // iOS は transitionend 内の 更新でアニメーション可能 iOS3, iOS4 で確認 - // win+Gecko は不可 - X_Node_Anime_updateAnimations( 0, X_Node_updateOnTransitionEnd ); + //c && console.log( 'anime... ' + X_Node_updateTimerID ); - return X_CALLBACK_PREVENT_DEFAULT | X_CALLBACK_STOP_PROPAGATION; -}; - -function X_Node_Anime_releaseGPULayer(){ - var obj = this[ '_anime' ], tmp; - if( !obj ){ - // console.log( '_anime無' ); - return; + if( X_NodeAnime_reserved = c ){ + if( X_Node_updateTimerID ){ + // scrollbox では X_System X_EVENT_UPDATED は不可。。。 + !e || e.type !== X_EVENT_UPDATED ? + X_System[ 'listen' ]( X_EVENT_UPDATED, X_NodeAnime_updateAnimations ) : + X_NodeAnime_updateTimerID && X_Timer_cancelFrame( X_NodeAnime_updateTimerID ); + X_NodeAnime_updateTimerID = 0; + } else { + X_System[ 'unlisten' ]( X_EVENT_UPDATED, X_NodeAnime_updateAnimations ); + X_NodeAnime_updateTimerID = X_Timer_requestFrame( X_NodeAnime_updateAnimations ); + }; + } else { + X_System[ 'unlisten' ]( X_EVENT_UPDATED, X_NodeAnime_updateAnimations ); + X_NodeAnime_updateTimerID = 0; }; - X_Node_Anime_clearTransition( this ); - X_Node_Anime_updatePosition( this, obj.destX, obj.destY, obj.destA, false ); - X_Node_ANIMATIONS.splice( X_Node_ANIMATIONS.indexOf( this ), 1 ); - delete obj.gpuTimerID; - delete this[ '_anime' ]; - //console.log( 'GPUレイヤーの破棄を指示' ); - - X_ViewPort[ 'listenOnce' ]( X_EVENT_AFTER_UPDATE, this, X_Node_Anime_gpuReleased ); -}; - -function X_Node_Anime_gpuReleased(){ - //console.log( 'GPU レイヤーが解放されました' ); - this[ 'dispatch' ]( { type : X_EVENT_GPU_RELEASED, 'gpu' : true } ); }; -function X_Node_Anime_clearTransition( xnode ){ - // 開始座標のセット(新規のみ) - // アニメーション指定のセット(または解除)(対象のみ) - // 目標座標のセット - xnode[ 'unlisten' ]( 'transitionend', X_Node_Anime_onTransitionEnd ); - - xnode[ 'css' ]({ - //willChange : '', - backfaceVisibility : '', - transitionTimingFunction : '', - transitionDelay : '', - transitionDuration : '' - }); +/* + * アニメーション開始、アニメーション中、強制停止(GPU転送予約)、GPU解除待ち の要素をリストの先頭に + */ +function X_NodeAnime_sortAnimationNode( xnode1, xnode2 ){ + var a = 4 <= xnode1[ '_anime' ].phase, + b = 4 <= xnode2[ '_anime' ].phase; + + if( ( a && b ) && ( !a && !b ) ){ // Chrome のみ + return xnode1[ '_anime' ].uid - xnode2[ '_anime' ].uid; + }; + return a ? -1 : 1; }; -function X_Node_Anime_updatePosition( xnode, x, y, opacity, useGPU ){ +function X_NodeAnime_updatePosition( xnode, x, y, opacity, useGPU ){ //console.log( 'updatePosition x:' + x + ' gpu:' + !!useGPU ); - if( X_Node_Anime_hasTransform ){ + if( X_NodeAnime_hasTransform ){ xnode[ 'css' ]({ - transform : 'translate(' + ( x | 0 ) + 'px,' + ( y | 0 ) + 'px)' + ( useGPU ? X_Node_Anime_translateZ : '' ), + transform : 'translate(' + ( x | 0 ) + 'px,' + ( y | 0 ) + 'px)' + ( useGPU ? X_NodeAnime_translateZ : '' ), opacity : opacity }); } else { @@ -534,7 +364,7 @@ function X_Node_Anime_updatePosition( xnode, x, y, opacity, useGPU ){ opacity === opacity && xnode[ 'css' ]( 'opacity', opacity ); }; - if( X_Node_Anime_translateZ ){ + if( X_NodeAnime_translateZ ){ if( useGPU ){ if( xnode[ '_flags' ] & X_NodeFlags_GPU_RELEASE_RESERVED ){ xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU; @@ -556,54 +386,52 @@ function X_Node_Anime_updatePosition( xnode, x, y, opacity, useGPU ){ }; }; -function X_Node_Anime_updateAnimationsNoTransition( e ){ - var i = X_Node_ANIMATIONS.length, - now = X_Timer_now(), - obj, - newX, newY, newA, easing, - c = false; - - for( ; i; ){ - xnode = X_Node_ANIMATIONS[ --i ]; - obj = xnode[ '_anime' ]; - if( obj.destTime <= now ){ - X_Node_Anime_updatePosition( xnode, obj.destX, obj.destY, obj.destA, false ); +var + X_NodeAnime_ease = { + 'quadratic' : { + style: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)', + fn: function (k) { + return k * ( 2 - k ); + } + }, + 'circular' : { + style: 'cubic-bezier(0.1, 0.57, 0.1, 1)', // Not properly "circular" but this looks better, it should be (0.075, 0.82, 0.165, 1) + fn: function (k) { + return Math.sqrt( 1 - ( --k * k ) ); + } + }, + 'back' : { + style: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)', + fn: function (k) { + var b = 4; + return ( k = k - 1 ) * k * ( ( b + 1 ) * k + b ) + 1; + } + }, + 'bounce' : { + style: '', + fn: function (k) { + if ( ( k /= 1 ) < ( 1 / 2.75 ) ) { + return 7.5625 * k * k; + } else if ( k < ( 2 / 2.75 ) ) { + return 7.5625 * ( k -= ( 1.5 / 2.75 ) ) * k + 0.75; + } else if ( k < ( 2.5 / 2.75 ) ) { + return 7.5625 * ( k -= ( 2.25 / 2.75 ) ) * k + 0.9375; + } else { + return 7.5625 * ( k -= ( 2.625 / 2.75 ) ) * k + 0.984375; + } + } + }, + 'elastic' : { + style: '', + fn: function (k) { + var f = 0.22, + e = 0.4; - delete xnode[ '_anime' ]; - X_Node_ANIMATIONS.splice( i, 1 ); - //console.log( obj.destA ); - // filter な 親が解除されないと子要素への filter が反映されない - xnode[ 'asyncDispatch' ]( { type : X_EVENT_ANIME_END, 'gpu' : false } ); - } else { - easing = obj.easing.fn( ( now - obj.startTime ) / obj.duration ); - newX = ( obj.destX - obj.startX ) * easing + obj.startX; - newY = ( obj.destY - obj.startY ) * easing + obj.startY; - newA = ( obj.destA - obj.startA ) * easing + obj.startA; - X_Node_Anime_updatePosition( xnode, newX, newY, newA, false ); - obj.x = newX; - obj.y = newY; - obj.a = newA; - c = true; - }; - }; - - //c && console.log( 'anime... ' + X_Node_updateTimerID ); - - if( X_Node_Anime_reserved = c ){ - if( X_Node_updateTimerID ){ - // scrollbox では X_System X_EVENT_UPDATED は不可。。。 - !e || e.type !== X_EVENT_UPDATED ? - X_System[ 'listen' ]( X_EVENT_UPDATED, X_Node_Anime_updateAnimationsNoTransition ) : - X_Node_Anime_updateTimerID && X_Timer_cancelFrame( X_Node_Anime_updateTimerID ); - X_Node_Anime_updateTimerID = 0; - } else { - X_System[ 'unlisten' ]( X_EVENT_UPDATED, X_Node_Anime_updateAnimationsNoTransition ); - X_Node_Anime_updateTimerID = X_Timer_requestFrame( X_Node_Anime_updateAnimationsNoTransition ); - }; - } else { - X_System[ 'unlisten' ]( X_EVENT_UPDATED, X_Node_Anime_updateAnimationsNoTransition ); - X_Node_Anime_updateTimerID = 0; - }; -}; + if ( k === 0 ) { return 0; } + if ( k == 1 ) { return 1; } + return ( e * Math.pow( 2, - 10 * k ) * Math.sin( ( k - f / 4 ) * ( 2 * Math.PI ) / f ) + 1 ); + } + } + }; diff --git a/0.6.x/js/02_dom/20_XNode.js b/0.6.x/js/02_dom/20_XNode.js index b0c3723..e40f832 100644 --- a/0.6.x/js/02_dom/20_XNode.js +++ b/0.6.x/js/02_dom/20_XNode.js @@ -560,7 +560,8 @@ function X_Node_append( v ){ return X_Node_append.apply( this, X_HtmlParser_parse( v, true ) ); case X_NodeType_XNODE : // 親の xnodes から v を消す - v.parent && v[ 'remove' ](); + if( v.parent === this && xnodes[ xnodes.length - 1 ] === v ) return this; + v[ 'remove' ](); // IE4 でテキストノードの追加、FIXED 済でない場合、親に要素の追加を通知 if( X_UA[ 'IE4' ] && !v[ '_tag' ] && ( ( this[ '_flags' ] & X_NodeFlags_IE4_FIXED ) === 0 ) ) this[ '_flags' ] |= X_NodeFlags_IE4_DIRTY_CHILDREN; break; @@ -780,6 +781,13 @@ function X_Node_remove(){ if( !parent ) return this; + // TODO anime + // stop() -> + if( this[ '_anime' ] && this[ '_anime' ].phase ){ + console.log( 'Animation 中の REMOVE' ); + this[ 'stop' ](); + }; + delete this.parent; parent[ '_xnodes' ].splice( parent[ '_xnodes' ].indexOf( this ), 1 ); @@ -852,7 +860,13 @@ function X_Node_onKill( that ){ }; X_Node_CHASHE[ that[ '_uid' ] ] = null; // array に対して delete X_Node_CHASHE[ uid ]　はまずい! - + +// TODO anime + if( that[ '_anime' ] && that[ '_anime' ].phase ){ + console.log( 'Animation 中の KILL' ); + that[ 'stop' ](); + }; + // remove _xnodes if( X_UA_DOM.IE4 ){ if( elm ){ @@ -882,17 +896,22 @@ function X_Node_onKill( that ){ */ function X_Node_contains( v ){ var elm, type, xnodes, i; + if( !v || !this[ '_tag' ] || this === v ) return false; + // contains ie4+ + /* if( ( elm = this[ '_rawObject' ] || X_UA_DOM.IE4 && X_Node__ie4getRawNode( this ) ) && document.contains && ( type = X_Node_getType( v ) ) && ( type === X_NodeType_RAW_HTML || type === X_NodeType_RAW_TEXT ) ){ return elm.contains( v ); - }; + }; */ //if( document.compareDocumentPosition ){ // //}; + xnodes = this[ '_xnodes' ]; if( !xnodes || !xnodes.length ) return false; + if( this === v[ 'parent' ] ) return true; // fast if( xnodes.indexOf( v ) !== -1 ) return true; // fast for( i = xnodes.length; i; ){ if( xnodes[ --i ][ 'contains' ]( v ) ) return true; @@ -1218,6 +1237,12 @@ function X_Node_call( name /*, opt_args... */ ){ return this.parent ? X_Node_CSS_getCharSize( this ) : 0; case 'inGPU' : return !!( this[ '_flags' ] & ( X_NodeFlags_GPU_NOW | X_NodeFlags_GPU_RELEASE_RESERVED ) ); + case 'canAnimateNow' : + return ( this[ '_flags' ] & X_NodeFlags_IN_TREE ) && X_NodeAnime_detectWaitAnimation( this, true, true ) === 6; + case 'animeState' : + return this[ '_anime' ] ? this[ '_anime' ].phase : 0; + case 'animeProgress' : + return this[ '_anime' ] && this[ '_anime' ].phase === 7 ? this[ '_anime' ].progress : 0; }; X_Node_updateTimerID && X_Node_startUpdate(); @@ -1362,6 +1387,7 @@ function X_Node_startUpdate( time ){ for( ; i; ){ xnodeOrElm = removal[ --i ]; // TODO GPU レイヤーの子の場合、remove をスキップする。 非GPU レイヤーへ apppend される場合、clone する? + // GPU レイヤーを削除する場合、cssText = '' して GPU レイヤーを解除する if( !xnodeOrElm[ 'instanceOf' ] ){ if( X_UA_DOM.IE4 ){ xnodeOrElm.removeAttribute( 'id' ); // ? @@ -1424,14 +1450,14 @@ var X_Node__commitUpdate = // 1. GPU 一切の更新をスキップ if( that[ '_flags' ] & X_NodeFlags_GPU_NOW ){ - //console.log( '更新のskip ' + !!( that[ '_flags' ] & X_Node_BitMask_IS_DIRTY ) ); + console.log( '更新のskip ' + !!( that[ '_flags' ] & X_Node_BitMask_IS_DIRTY ) ); that[ '_flags' ] & X_Node_BitMask_IS_DIRTY && X_Node__updateRawNode( that, elm ); return elm; }; // 2. GPU解放予約 if( that[ '_flags' ] & X_NodeFlags_GPU_RELEASE_RESERVED ){ - // console.log( 'GPU 解放 ' ); + console.log( 'GPU 解放 ' ); //X_Node_updateReservedByReleaseGPU = true; that[ '_flags' ] &= X_Node_BitMask_RESET_GPU; //return elm;// TODO もしかしたらこのタイミングで更新できるかも。 @@ -1439,6 +1465,7 @@ var X_Node__commitUpdate = // 3. GPU予約 -> GPU if( that[ '_flags' ] & X_NodeFlags_GPU_RESERVED ){ + // TODO size 取得のための update の場合、GPU化を待つ that[ '_flags' ] &= X_Node_BitMask_RESET_GPU; that[ '_flags' ] |= X_NodeFlags_GPU_NOW; }; diff --git a/0.6.x/js/05_util/06_XWindow.js b/0.6.x/js/05_util/06_XWindow.js index f3941ee..3fbe53a 100644 --- a/0.6.x/js/05_util/06_XWindow.js +++ b/0.6.x/js/05_util/06_XWindow.js @@ -25,23 +25,13 @@ var X_Window = X[ 'Util' ][ 'Window' ] = X_EventDispatcher[ 'inherits' ]( 'X.Window', /** @lends X.Util.Window.prototype */ - { - - // TODO pair 側に - /** - * closed の監視用タイマーID - * @private - * @type {number} */ - _timerID : 0, - + { 'Constructor' : function( options ){ var url = options[ 'url' ], page = window.open( url || ''/* 'about:blank' */, options[ 'name' ] || '', options[ 'params' ] || '' ), html = options[ 'html' ], doc = X_Script_try( X_Object_find, [ page, 'document' ] ); - - X_Pair_create( this, page ); - + if( !url && html ){ this[ 'write' ]( html ); }; @@ -49,7 +39,10 @@ var X_Window = X[ 'Util' ][ 'Window' ] = X_EventDispatcher[ 'inherits' ]( X_ViewPort[ 'listenOnce' ]( X_EVENT_UNLOAD, this, X_Util_Window_handleEvent ); this[ 'listenOnce' ]( [ X_EVENT_UNLOAD, X_EVENT_KILL_INSTANCE ], X_Util_Window_handleEvent ); - this._timerID = X_Timer_add( options[ 'interval' ] || 500, 0, this, X_Util_Window_onTimer ); + X_Pair_create( this, { + page : page, + timerID : X_Timer_add( options[ 'interval' ] || 500, 0, this, X_Util_Window_onTimer ) + } ); }, /** @@ -61,16 +54,30 @@ var X_Window = X[ 'Util' ][ 'Window' ] = X_EventDispatcher[ 'inherits' ]( * @return {boolean} */ 'closed' : function(){ - return X_Script_try( X_Object_find, [ X_Pair_get( this ), 'closed' ] ); + var pair = X_Pair_get( this ); + + return pair ? X_Script_try( X_Object_find, [ pair.page, 'closed' ] ) : true; }, - + + /** + * 別窓の url を書き換える + * @param {string} url + * @return {Window} チェーンメソッド + */ + 'url' : function( url ){ + var pair = X_Pair_get( this ); + + pair && ( pair.location.href = url ); + }, + /** * 別窓の内容を書き換える * @param {string=} opt_html html文字列 * @return {Window} チェーンメソッド */ 'write' : function( opt_html ){ - var doc = X_Script_try( X_Object_find, [ X_Pair_get( this ), 'document' ] ); + var pair = X_Pair_get( this ), + doc = pair && X_Script_try( X_Object_find, [ pair.page, 'document' ] ); if( doc ){ doc.open(); @@ -81,23 +88,34 @@ var X_Window = X[ 'Util' ][ 'Window' ] = X_EventDispatcher[ 'inherits' ]( }; return this; + }, + + /** + * 別窓の値にアクセスする, X.Object.find 参照 + * @param {string} selector 'navigator>mineTypes>hoge' + * @return {*} + */ + 'find' : function( selector ){ + var pair = X_Pair_get( this ); + + if( pair ) return X_Script_try( X_Object_find, [ pair.page, selector ] ); } - - // TODO url - } ); function X_Util_Window_onTimer( e ){ + var pair = X_Pair_get( this ); + if( this[ 'closed' ]() ){ this[ 'asyncDispatch' ]( X_EVENT_UNLOAD ); - delete this._timerID; + delete pair.timerID; return X_CALLBACK_UN_LISTEN; }; }; function X_Util_Window_handleEvent( e ){ - var page = X_Pair_get( this ); + var pair = X_Pair_get( this ), + page = pair && pair.page; switch( e.type ){ case X_EVENT_UNLOAD : @@ -113,7 +131,7 @@ function X_Util_Window_handleEvent( e ){ }; X_Pair_release( this, page ); }; - this._timerID && X_Timer_remove( this._timerID ); + pair.timerID && X_Timer_remove( pair.timerID ); X_ViewPort[ 'unlisten' ]( X_EVENT_UNLOAD, this, X_Util_Window_handleEvent ); break; }; diff --git a/0.6.x/js/06_net/05_XXHRGadget.js b/0.6.x/js/06_net/05_XXHRGadget.js index b8496cf..6950697 100644 --- a/0.6.x/js/06_net/05_XXHRGadget.js +++ b/0.6.x/js/06_net/05_XXHRGadget.js @@ -1,4 +1,4 @@ -//{+xhrgadget"OpenSocialガジェット通信プロキシ"(Xドメインは元よりXプロトコルな擬似xhr通信を可能にする)[+xhr] +//{+xhrgadget"OpenSocialガジェット通信プロキシ"(クロスドメインは元よりクロスプロトコルな擬似xhr通信を可能にする)[+xhr] /* * gadgets.io.makeRequest diff --git a/0.6.x/js/06_net/10_XOAuth2.js b/0.6.x/js/06_net/10_XOAuth2.js index 063cb4a..b6632be 100644 --- a/0.6.x/js/06_net/10_XOAuth2.js +++ b/0.6.x/js/06_net/10_XOAuth2.js @@ -1,7 +1,7 @@ -//{+oauth2"OAuth2 サービスの定義"(OAuth2外部サービスを定義し、認可プロセス・xhrの署名を自動化します)[+xhr] -var X_NET_OAUTH2_authorizationWindow, - X_NET_OAUTH2_authorizationTimerID; +//{+oauth2"OAuth2 サービスの定義"(OAuth2外部サービスを定義し、認可プロセス・xhrの署名を自動化します)[+xhr,+window] +var X_OAUTH2_authWindow, + X_OAUTH2_authTimerID; /** * イベント @@ -73,7 +73,7 @@ X[ 'OAuth2' ] = X_EventDispatcher[ 'inherits' ]( }; // TODO canUse gadgetProxy - this[ 'listen' ]( [ X_EVENT_KILL_INSTANCE, X_EVENT_SUCCESS, X_EVENT_ERROR, X_EVENT_NEED_AUTH ], X_NET_OAUTH2_handleEvent ); + this[ 'listen' ]( [ X_EVENT_KILL_INSTANCE, X_EVENT_SUCCESS, X_EVENT_ERROR, X_EVENT_NEED_AUTH ], X_OAUTH2_handleEvent ); }, /** @@ -113,7 +113,7 @@ X[ 'OAuth2' ] = X_EventDispatcher[ 'inherits' ]( }; // 二つ以上の popup を作らない - if( X_NET_OAUTH2_authorizationWindow ) return; + if( X_OAUTH2_authWindow ) return; pair = X_Pair_get( this ); @@ -121,25 +121,25 @@ X[ 'OAuth2' ] = X_EventDispatcher[ 'inherits' ]( w = pair[ 'authorizeWindowWidth' ] || 500; h = pair[ 'authorizeWindowHeight' ] || 500; + + X_OAUTH2_authWindow = X_Window( { + 'url' : X_URL_create( pair[ 'authorizeEndpoint' ], + { + 'response_type' : 'code', + 'client_id' : pair[ 'clientID' ], + 'redirect_uri' : pair[ 'redirectURI' ], + 'scope' : ( pair[ 'scopes' ] || [] ).join( ' ' ) + } + ), + 'name' : 'oauthauthorize', + 'params' : 'width=' + w + + ',height=' + h + + ',left=' + ( screen.width - w ) / 2 + + ',top=' + ( screen.height - h ) / 2 + + ',menubar=no,toolbar=no' + } )[ 'listen' ]( X_EVENT_UNLOAD, this, X_OAuth2_detectAuthPopup ); - // TODO X.Util.Window - X_NET_OAUTH2_authorizationWindow = window.open( - X_URL_create( pair[ 'authorizeEndpoint' ], - { - 'response_type' : 'code', - 'client_id' : pair[ 'clientID' ], - 'redirect_uri' : pair[ 'redirectURI' ], - 'scope' : ( pair[ 'scopes' ] || [] ).join( ' ' ) - } - ), - 'oauthauthorize', - 'width=' + w - + ',height=' + h - + ',left=' + ( screen.width - w ) / 2 - + ',top=' + ( screen.height - h ) / 2 - + ',menubar=no,toolbar=no'); - - X_NET_OAUTH2_authorizationTimerID = X_Timer_add( 333, 0, this, X_Net_OAuth2_detectAuthPopup ); + X_OAUTH2_authTimerID = X_Timer_add( 333, 0, this, X_OAuth2_detectAuthPopup ); pair.oauth2State = 1; @@ -162,17 +162,13 @@ X[ 'OAuth2' ] = X_EventDispatcher[ 'inherits' ]( }; // http://kojikoji75.hatenablog.com/entry/2013/12/15/223839 - if( X_NET_OAUTH2_authorizationWindow ){ - if( 9 < X_UA[ 'IEHost' ] ){ - X_NET_OAUTH2_authorizationWindow.close(); - } else { - X_NET_OAUTH2_authorizationWindow.open( 'about:blank', '_self' ).close(); - }; - X_NET_OAUTH2_authorizationWindow = null; + if( X_OAUTH2_authWindow ){ + X_OAUTH2_authWindow[ 'kill' ](); + X_OAUTH2_authWindow = null; }; - X_NET_OAUTH2_authorizationTimerID && X_Timer_remove( X_NET_OAUTH2_authorizationTimerID ); - X_NET_OAUTH2_authorizationTimerID = 0; + X_OAUTH2_authTimerID && X_Timer_remove( X_OAUTH2_authTimerID ); + X_OAUTH2_authTimerID = 0; this[ 'asyncDispatch' ]( X_EVENT_CANCELED ); }, @@ -213,14 +209,14 @@ X[ 'OAuth2' ] = X_EventDispatcher[ 'inherits' ]( 'Content-Type' : 'application/x-www-form-urlencoded' }, 'test' : 'gadget' // canuse - } ).listenOnce( [ X_EVENT_SUCCESS, X_EVENT_ERROR ], this, X_Net_OAuth2_responceHandler ); + } ).listenOnce( [ X_EVENT_SUCCESS, X_EVENT_ERROR ], this, X_OAuth2_responceHandler ); this[ 'asyncDispatch' ]( { type : X_EVENT_PROGRESS, message : 'Start to refresh token.' } ); } } ); -function X_NET_OAUTH2_handleEvent( e ){ +function X_OAUTH2_handleEvent( e ){ var pair = X_Pair_get( this ); switch( e.type ){ @@ -241,41 +237,35 @@ function X_NET_OAUTH2_handleEvent( e ){ }; }; -function X_Net_OAuth2_detectAuthPopup(){ - var closed, search, pair = X_Pair_get( this ); - - if( X_NET_OAUTH2_authorizationWindow.closed ){ - pair.oauth2State = 0; - closed = true; +function X_OAuth2_detectAuthPopup( e ){ + var pair = X_Pair_get( this ), + status, search; + if( X_OAUTH2_authWindow[ 'closed' ]() ){ + status = 0; this[ 'asyncDispatch' ]( X_EVENT_CANCELED ); } else - if( search = X_Script_try( X_Object_find, [ X_NET_OAUTH2_authorizationWindow, 'location>search' ] ) ){ - pair = X_Pair_get( this ); + if( search = X_OAUTH2_authWindow[ 'find' ]( 'location>search' ) ){ + pair = X_Pair_get( this ); pair.code = X_URL_paramToObj( search.slice( 1 ) )[ 'code' ]; - - if( 9 < X_UA[ 'IEHost' ] ){ - X_NET_OAUTH2_authorizationWindow.close(); - } else { - X_NET_OAUTH2_authorizationWindow.open( 'about:blank', '_self' ).close(); - }; - closed = true; - - X_Net_OAuth2_authorizationCode( this, pair ); - - pair.oauth2State = 2; + status = 2; + X_OAuth2_authorizationCode( this, pair ); this[ 'asyncDispatch' ]( { type : X_EVENT_PROGRESS, message : 'Get code success, then authorization code.' } ); }; - if( closed ){ - X_NET_OAUTH2_authorizationWindow = null; - X_NET_OAUTH2_authorizationTimerID = 0; + if( 0 <= status ){ + pair = pair || X_Pair_get( this ); + pair.oauth2State = status; + + X_OAUTH2_authWindow[ 'kill' ](); + X_OAUTH2_authWindow = null; + X_OAUTH2_authTimerID = X_Timer_remove( X_OAUTH2_authTimerID ); return X_CALLBACK_UN_LISTEN; }; }; -function X_Net_OAuth2_authorizationCode( oauth2, pair ){ +function X_OAuth2_authorizationCode( oauth2, pair ){ pair.net = X.Net( { 'xhr' : pair[ 'tokenEndpoint' ], 'postdata' : X_URL_objToParam({ @@ -291,10 +281,10 @@ function X_Net_OAuth2_authorizationCode( oauth2, pair ){ 'Content-Type' : 'application/x-www-form-urlencoded' }, 'test' : 'gadget' - } ).listenOnce( [ X_EVENT_SUCCESS, X_EVENT_ERROR ], oauth2, X_Net_OAuth2_responceHandler ); + } ).listenOnce( [ X_EVENT_SUCCESS, X_EVENT_ERROR ], oauth2, X_OAuth2_responceHandler ); }; -function X_Net_OAuth2_responceHandler( e ){ +function X_OAuth2_responceHandler( e ){ var data = e.response, pair = X_Pair_get( this ), isRefresh = pair.oauth2State === 3; @@ -353,7 +343,7 @@ function X_Net_OAuth2_responceHandler( e ){ X_OAuth2_setAuthMechanism( this, 'param' ); this[ 'asyncDispatch' ]( { type : X_EVENT_PROGRESS, message : 'Refresh access token failed. retry header -> param. ' } ); // retry - X_Net_OAuth2_authorizationCode( this, pair ); + X_OAuth2_authorizationCode( this, pair ); }; break; }; diff --git a/0.6.x/js/07_audio/00_XAudio.js b/0.6.x/js/07_audio/00_XAudio.js index 234f057..21cc83b 100644 --- a/0.6.x/js/07_audio/00_XAudio.js +++ b/0.6.x/js/07_audio/00_XAudio.js @@ -62,7 +62,7 @@ X_TEMP.onSystemReady.push( */ X[ 'Audio' ] = X_EventDispatcher[ 'inherits' ]( 'X.Audio', - X_Class.POOL_OBJECT, + X_Class.NONE, { /** * 音声の url。X.Event.BACKEND_READY で設定される。 diff --git a/0.6.x/js/20_ui/01_XUI_LayoutBase.js b/0.6.x/js/20_ui/01_XUI_LayoutBase.js index 01ac91c..792d509 100644 --- a/0.6.x/js/20_ui/01_XUI_LayoutBase.js +++ b/0.6.x/js/20_ui/01_XUI_LayoutBase.js @@ -17,8 +17,6 @@ XUI_Dirty = { FONT : 3, // フォントサイズが変更された CONTENT : 4 // コンテンツが変更された }, - -XUI_currentRootData, XUI_LayoutBase = X_Class_create( 'X.UI.Layout.Base', 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 c738b38..c182e6a 100644 --- a/0.6.x/js/20_ui/05_XUI_Gesture.js +++ b/0.6.x/js/20_ui/05_XUI_Gesture.js @@ -303,7 +303,7 @@ function XUI_Gesture_handleEvent( e ){ hammerEvent.touches = touches; if( isStart && !hammer.gestureStartEvent ){ - console.log( '=- add -=' ); + //console.log( '=- add -=' ); // already busy with a Hammer.gesture detection on an element hammer.gestureStartEvent = hammerEvent; XUI_rootData[ 'listen' ]( [ XUI_Event._POINTER_MOVE, XUI_Event._POINTER_UP, XUI_Event._POINTER_CANCEL, XUI_Event.POINTER_OUT ], hammer, XUI_Gesture_handleEvent ); @@ -357,13 +357,13 @@ function XUI_Gesture_handleEvent( e ){ // store as previous event event hammer.gestureLastEvent = hammerEvent; activated = hammer.gestureActivated; - console.log( '... ' ); + //console.log( '... ' ); // call Hammer.gesture handlers for( i = 0, l = gestures.length; i < l; ++i ){ gesture = gestures[ i ]; if( activated[ gesture.name ] && !hammer.gestureCanceled[ gesture.name ] ){ - ( console.log( '... ' + i + ' ' + gesture.name ) ); + //( console.log( '... ' + i + ' ' + gesture.name ) ); // if a handler returns false, we stop with the detection ( ret |= ( gesture.handler( hammerEvent, hammer ) || X_CALLBACK_NONE ) ); }; @@ -389,14 +389,14 @@ function XUI_Gesture_handleEvent( e ){ for( i = touches.length; i; ){ uid = touches[ --i ][ 'pointerId' ]; if( XUI_Gesture_CAPTURED[ uid ] === hammer ){ - console.log( 'released. ' + uid ); + //console.log( 'released. ' + uid ); delete XUI_Gesture_CAPTURED[ uid ]; }; }; }; if( isEnd ){ - console.log( '=- clear -=' ); + //console.log( '=- clear -=' ); XUI_rootData[ 'unlisten' ]( [ XUI_Event._POINTER_MOVE, XUI_Event._POINTER_UP, XUI_Event._POINTER_CANCEL, XUI_Event.POINTER_OUT ], hammer, XUI_Gesture_handleEvent ); hammer.previous = { @@ -624,7 +624,7 @@ var XUI_Gesture_LIST = [ // break; //}; ret |= X_CALLBACK_CAPTURE_POINTER; - console.log( '----- drag start ....' + e.type ); + //console.log( '----- drag start ....' + e.type ); hammer.gestureTriggered[ drag.name ] = true; break; }; @@ -653,13 +653,13 @@ var XUI_Gesture_LIST = [ break; case XUI_Event.POINTER_OUT : - console.log( 'cancel!!' ); + //console.log( 'cancel!!' ); case XUI_Event._POINTER_CANCEL : case XUI_Event._POINTER_UP: // trigger dragend if( hammer.gestureTriggered[ drag.name ] ){ ret = XUI_Gesture_trigger( hammer, XUI_Event.DRAG_END, e ) | X_CALLBACK_CAPTURE_POINTER; - console.log( '----- drag end ....' + e.type ); + //console.log( '----- drag end ....' + e.type ); hammer.gestureTriggered[ drag.name ] = false; }; break; @@ -704,7 +704,7 @@ var XUI_Gesture_LIST = [ // do a single tap if( hammer.gestureOptions.tap_always ){ hammer.gestureCurrentName = 'tap'; - console.log( 'tap! ' + e.deltaTime + 'ms ' + e.type ); + //console.log( 'tap! ' + e.deltaTime + 'ms ' + e.type ); return XUI_Gesture_trigger( hammer, XUI_Event.TAP, e ); }; }; diff --git a/0.6.x/js/20_ui/08_Box.js b/0.6.x/js/20_ui/08_Box.js index 49cf1bd..5c0b9d7 100644 --- a/0.6.x/js/20_ui/08_Box.js +++ b/0.6.x/js/20_ui/08_Box.js @@ -233,6 +233,8 @@ var XUI_Box = XUI_AbstractUINode.inherits( }; p3 && data.phase < 3 && data.creationComplete(); }; + + console.log( 'addAt レイアウト 4? ' + this.phase ); 4 <= this.phase && this.rootData.reserveCalc(); }, diff --git a/0.6.x/js/20_ui/15_ScrollBox.js b/0.6.x/js/20_ui/15_ScrollBox.js index 3838363..9a93207 100644 --- a/0.6.x/js/20_ui/15_ScrollBox.js +++ b/0.6.x/js/20_ui/15_ScrollBox.js @@ -9,44 +9,54 @@ var XUI_ScrollBox_current, function XUI_ScrollBox_start( scrollBox ){ // 既存スクロールの停止 - if( scrollBox.hasVScroll ){ + if( XUI_ScrollBox_current && XUI_ScrollBox_current !== scrollBox ){ + XUI_ScrollBox_indicatorV && + XUI_ScrollBox_current[ 'unlisten' ]( [ X_EVENT_CANCELED, XUI_Event.SCROLL_END ], XUI_ScrollBox_indicatorV, XUI_ScrollBox_indicatorHandleEvent ); + + XUI_ScrollBox_indicatorH && + XUI_ScrollBox_current[ 'unlisten' ]( [ X_EVENT_CANCELED, XUI_Event.SCROLL_END ], XUI_ScrollBox_indicatorH, XUI_ScrollBox_indicatorHandleEvent ); + }; + + if( scrollBox && scrollBox.hasVScroll ){ if( !XUI_ScrollBox_indicatorV ){ XUI_ScrollBox_indicatorV = X_Doc_create( 'div' )[ 'className' ]( 'ScrollBox-IndicatorV' ); }; - if( XUI_ScrollBox_current ) - XUI_ScrollBox_current[ 'unlisten' ]( [ X_EVENT_CANCELED, XUI_Event.SCROLL_END ], XUI_ScrollBox_indicatorV, XUI_ScrollBox_indicatorHandleEvent ); - - scrollBox.xnode[ 'append' ]( XUI_ScrollBox_indicatorV ); - XUI_ScrollBox_indicatorV[ 'animate' ]( - { opacity : 0 }, - { opacity : 1 }, - 900, 'circular', 300 - ); - scrollBox - [ 'listenOnce' ]( [ X_EVENT_CANCELED, XUI_Event.SCROLL_END ], XUI_ScrollBox_indicatorV, XUI_ScrollBox_indicatorHandleEvent ); + if( scrollBox.xnode !== XUI_ScrollBox_indicatorV.parent ){ + console.log( '*** Scroll Indicator add ***' ); + scrollBox.xnode[ 'append' ]( XUI_ScrollBox_indicatorV ); + XUI_ScrollBox_indicatorV[ 'animate' ]( + { opacity : 0 }, + { opacity : 1 }, + 900, 'circular', 300 + ); + scrollBox + [ 'listen' ]( [ X_EVENT_CANCELED, XUI_Event.SCROLL_END ], XUI_ScrollBox_indicatorV, XUI_ScrollBox_indicatorHandleEvent ); + }; } else if( XUI_ScrollBox_indicatorV ){ + console.log( '*** Scroll Indicator remove ***' ); XUI_ScrollBox_indicatorV[ 'remove' ](); }; - if( scrollBox.hasHScroll ){ + if( scrollBox && scrollBox.hasHScroll ){ if( !XUI_ScrollBox_indicatorH ){ XUI_ScrollBox_indicatorH = X_Doc_create( 'div' )[ 'className' ]( 'ScrollBox-IndicatorH' ); }; - if( XUI_ScrollBox_current ) - XUI_ScrollBox_current[ 'unlisten' ]( [ X_EVENT_CANCELED, XUI_Event.SCROLL_END ], XUI_ScrollBox_indicatorH, XUI_ScrollBox_indicatorHandleEvent ); - scrollBox.xnode[ 'append' ]( XUI_ScrollBox_indicatorH ); - XUI_ScrollBox_indicatorH[ 'animate' ]( - { opacity : 0 }, - { opacity : 1 }, - 900, 'circular', 300 - ); - scrollBox - [ 'listenOnce' ]( [ X_EVENT_CANCELED, XUI_Event.SCROLL_END ], XUI_ScrollBox_indicatorH, XUI_ScrollBox_indicatorHandleEvent ); + if( scrollBox.xnode !== XUI_ScrollBox_indicatorH.parent ){ + scrollBox.xnode[ 'append' ]( XUI_ScrollBox_indicatorH ); + XUI_ScrollBox_indicatorH[ 'animate' ]( + { opacity : 0 }, + { opacity : 1 }, + 900, 'circular', 300 + ); + scrollBox + [ 'listen' ]( [ X_EVENT_CANCELED, XUI_Event.SCROLL_END ], XUI_ScrollBox_indicatorH, XUI_ScrollBox_indicatorHandleEvent ); + }; } else if( XUI_ScrollBox_indicatorH ){ XUI_ScrollBox_indicatorH[ 'remove' ](); }; + XUI_ScrollBox_current = scrollBox; }; @@ -198,6 +208,10 @@ var XUI_ScrollBox = XUI_ChromeBox.inherits( this[ 'unlisten' ]( XUI_Event.SCROLL_END, XUI_rootData, XUI_rootData.calculate ); this.xnodeSlider[ 'stop' ](); + + XUI_ScrollBox_current === this && XUI_ScrollBox_start( null ); + + this.scrolling = false; }; } @@ -205,7 +219,7 @@ var XUI_ScrollBox = XUI_ChromeBox.inherits( ); function X_UI_ScrollBox_onLayoutBefore( e ){ - if( e[ 'cancelable' ] && this.isInTransition && X_Node_Anime_translateZ ){ + if( e[ 'cancelable' ] && this.isInTransition && X_NodeAnime_translateZ ){ this[ 'listenOnce' ]( XUI_Event.SCROLL_END, XUI_rootData, XUI_rootData.calculate ); return X_CALLBACK_PREVENT_DEFAULT; }; @@ -298,7 +312,7 @@ function X_UI_ScrollBox_translate( that, x, y, opt_time, opt_easing, opt_release XUI_ScrollBox_indicatorH && XUI_ScrollBox_indicatorH[ 'css' ]( 'top' , ( scrollBoxH - that.fontSize * 0.6 | 0 ) + 'px' ); }; - if( that.hasVScroll && XUI_ScrollBox_indicatorV ){ + if( that.hasVScroll && XUI_ScrollBox_indicatorV && XUI_ScrollBox_indicatorV.parent === that.xnode ){ indicatorH = scrollBoxH * scrollBoxH / ( - that.scrollYMax + scrollBoxH ); scrollBoxH -= indicatorH; @@ -317,7 +331,7 @@ function X_UI_ScrollBox_translate( that, x, y, opt_time, opt_easing, opt_release opt_time, opt_easing, opt_release ); }; - if( that.hasHScroll && XUI_ScrollBox_indicatorH ){ + if( that.hasHScroll && XUI_ScrollBox_indicatorH && XUI_ScrollBox_indicatorH.parent === that.xnode ){ indicatorW = scrollBoxW * scrollBoxW / ( - that.scrollXMax + scrollBoxW ); scrollBoxW -= indicatorW; XUI_ScrollBox_indicatorH @@ -393,7 +407,7 @@ function X_UI_ScrollBox_onMove( e ){ }; // gpu の用意 - if( !this.xnodeSlider[ '_anime' ] ){ + if( !this.xnodeSlider[ '_anime' ] || !this.xnodeSlider[ '_anime' ].phase ){ //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 ); diff --git a/0.6.x/js/20_ui/20_Root.js b/0.6.x/js/20_ui/20_Root.js index 5cd2196..5515f8a 100644 --- a/0.6.x/js/20_ui/20_Root.js +++ b/0.6.x/js/20_ui/20_Root.js @@ -208,9 +208,12 @@ var XUI_Root = XUI_Box.inherits( size, font, w, h; if( ( this[ 'dispatch' ]( { type : XUI_Event.LAYOUT_BEFORE, 'cancelable' : cancelable } ) & X_CALLBACK_PREVENT_DEFAULT ) && cancelable ){ + console.log( 'Layout のキャンセル' ); return X_CALLBACK_NONE; }; + console.log( 'レイアウト開始' ); + XUI_mousemoveFix && XUI_mousemoveFixResetScroll(); size = X[ 'ViewPort' ][ 'getSize' ](); @@ -219,9 +222,14 @@ var XUI_Root = XUI_Box.inherits( this.updateLayout(); this.calcReserved = false; - - X_ViewPort[ 'listenOnce' ]( X_EVENT_AFTER_UPDATE, this, XUI_Root_onViewUpdate ); - + + // size を測りながらレイアウトする結果、アップデートがない場合がある + if( X_Node_updateTimerID ){ + X_ViewPort[ 'listenOnce' ]( X_EVENT_AFTER_UPDATE, this, XUI_Root_onViewUpdate ); + } else { + this[ 'asyncDispatch' ]( XUI_Event.LAYOUT_COMPLETE ); + }; + return X_CALLBACK_NONE; }, @@ -240,6 +248,7 @@ function XUI_Root_do1stCalculate(){ }; function XUI_Root_onViewUpdate( e ){ + console.log( 'レイアウト完了' ); this[ 'dispatch' ]( XUI_Event.LAYOUT_COMPLETE ); }; -- 2.11.0