From 99e4c667c30bf89551a3546d2cef55fc13b2c301 Mon Sep 17 00:00:00 2001 From: itozyun Date: Tue, 22 Dec 2015 07:41:54 +0900 Subject: [PATCH] Verison 0.6.203, fix X.Node.Anime. --- 0.6.x/css/xui.css | 3 ++ 0.6.x/index.html | 2 +- 0.6.x/js/02_dom/10_XNodeAnime.js | 63 +++++++++++++++++++++------------------- 0.6.x/js/02_dom/20_XNode.js | 58 ++++++++++++------------------------ 0.6.x/js/20_ui/15_ScrollBox.js | 59 ++++++++++++++++++++++++------------- 5 files changed, 94 insertions(+), 91 deletions(-) diff --git a/0.6.x/css/xui.css b/0.6.x/css/xui.css index 18bdf2c..2a3e44f 100644 --- a/0.6.x/css/xui.css +++ b/0.6.x/css/xui.css @@ -228,3 +228,6 @@ .IE8 * { filter : inherit; } +[ie8opcityFix] * { + filter : inherit; +} diff --git a/0.6.x/index.html b/0.6.x/index.html index a479045..849837e 100644 --- a/0.6.x/index.html +++ b/0.6.x/index.html @@ -2,7 +2,7 @@ -pettanR UIƒVƒXƒeƒ€ +pettanR UIテスト diff --git a/0.6.x/js/02_dom/10_XNodeAnime.js b/0.6.x/js/02_dom/10_XNodeAnime.js index 4613689..3464ffb 100644 --- a/0.6.x/js/02_dom/10_XNodeAnime.js +++ b/0.6.x/js/02_dom/10_XNodeAnime.js @@ -25,19 +25,18 @@ var X_NodeAnime_QUEUE = [], * 5: GPU解除待ち * 6: 開始可能 * 7: アニメーション中 - * TODO node.css( 'opacity' ) の上書き */ var X_NODE_ANIME_RESET = 1, X_NODE_ANIME_STAY_GPU = 2, X_NodeAnime_DEFAULT = { - x : X_NodeAnime_hasTransform ? 0 : NaN, - y : X_NodeAnime_hasTransform ? 0 : NaN, - toX : X_NodeAnime_hasTransform ? 0 : NaN, - toY : X_NodeAnime_hasTransform ? 0 : NaN, - fromX : X_NodeAnime_hasTransform ? 0 : NaN, - fromY : X_NodeAnime_hasTransform ? 0 : NaN, + x : NaN, + y : NaN, + toX : NaN, + toY : NaN, + fromX : NaN, + fromY : NaN, rotate : NaN, fromRotate : NaN, toRotate : NaN, skewX : NaN, fromSkewX : NaN, toSkewX : NaN, skewY : NaN, fromSkewY : NaN, toSkewY : NaN, @@ -45,8 +44,8 @@ var X_NODE_ANIME_RESET = 1, scaleY : 1, fromScaleY : 1, toScaleY : 1, alpha : NaN, scrollX : NaN, fromScrollX : NaN, toScrollX : NaN, - scrollY : NaN, fromScrollY : NaN, toScrollY : NaN, - doScroll : false//, + scrollY : NaN, fromScrollY : NaN, toScrollY : NaN //, + //doScroll : false//, //duration : 0 //phase, lazyRelease, easing, follower, releaseNow, inited, progress doScroll, fallbackKind // fromTime, toTime @@ -107,12 +106,6 @@ function X_Node_animate( obj ){ a = this[ '_css' ] && parseFloat( this[ '_css' ].opacity ); if( 0 <= a ) obj.alpha = a; }; - - if( 0 <= duration && X_Type_isFinite( duration ) ){ - obj.duration = duration; - }; - - obj.easing = X_Type_isFunction( easing ) ? easing : X_NodeAnime_ease[ easing ] || X_NodeAnime_ease[ 'circular' ]; // form : obj.fromX = obj.x = X_NodeAnime_getFinite( from[ 'x' ], obj.x ); @@ -137,19 +130,20 @@ function X_Node_animate( obj ){ obj.toScrollX = X_NodeAnime_getFinite( dest[ 'scrollX' ], obj.scrollX ); obj.toScrollY = X_NodeAnime_getFinite( dest[ 'scrollY' ], obj.scrollY ); - if( obj.toRotate && obj.rotate !== obj.rotate ) obj.rotate = 0; - if( obj.toSkewX && obj.skewX !== obj.skewX ) obj.skewX = 0; - if( obj.toSkewY && obj.skewY !== obj.skewY ) obj.skewY = 0; + if( X_Type_isFinite( obj.toX ) && X_Type_isNaN( obj.x ) ) obj.x = obj.fromX = 0; + if( X_Type_isFinite( obj.toY ) && X_Type_isNaN( obj.y ) ) obj.y = obj.fromY = 0; + + if( obj.toRotate && X_Type_isNaN( obj.rotate ) ) obj.rotate = obj.fromRotate = 0; + if( obj.toSkewX && X_Type_isNaN( obj.skewX ) ) obj.skewX = obj.fromSkewX = 0; + if( obj.toSkewY && X_Type_isNaN( obj.skewY ) ) obj.skewY = obj.fromSkewY = 0; + obj.duration = 0 <= duration && X_Type_isFinite( duration ) ? duration : 0; obj.lazyRelease = 0 <= lazyRelease && X_Type_isFinite( lazyRelease ) ? lazyRelease : 0; - obj.inited = false; - obj.doScroll = 0 <= obj.toScrollX || 0 <= obj.toScrollY; - obj.transform = false; - obj.fallback = 0; - - if( obj.fromX === obj.fromX || obj.fromY === obj.fromY ){ - obj.transform = !!X_NodeAnime_hasTransform; - }; + obj.easing = X_Type_isFunction( easing ) ? easing : X_NodeAnime_ease[ easing ] || X_NodeAnime_ease[ 'circular' ]; + obj.inited = false; + obj.transform = ( X_Type_isFinite( obj.x ) || X_Type_isFinite( obj.y ) || obj.lazyRelease ) && X_NodeAnime_hasTransform; + obj.doScroll = 0 <= obj.toScrollX || 0 <= obj.toScrollY; + obj.fallback = 0; // scale if( obj.toScaleX !== 1 && obj.fromScaleX !== 1 && obj.toScaleY !== 1 && obj.fromScaleY !== 1 ){ @@ -173,7 +167,7 @@ function X_Node_animate( obj ){ }; // rotate, skew - if( obj.toRotate === obj.toRotate || obj.toSkewX === obj.toSkewX || obj.toSkewY === obj.toSkewY ){ + if( X_Type_isFinite( obj.rotate ) || X_Type_isFinite( obj.skewX ) || X_Type_isFinite( obj.skewY ) ){ if( X_NodeAnime_hasTransform ){ obj.transform = true; } else @@ -341,8 +335,8 @@ function X_NodeAnime_detectWaitAnimation( xnode, duration, isTest ){ // -> いない、アニメーションが可能 for( i = 0; _xnode = list[ i ]; ++i ){ if( _xnode === xnode ) break; - - if( 6 <= _xnode[ '_anime' ].phase ){ + obj = _xnode[ '_anime' ]; + if( 6 <= obj.phase ){ if( xnode[ 'contains' ]( _xnode ) || _xnode[ 'contains' ]( xnode ) ){ return isTest ? 3 : _xnode; }; @@ -511,6 +505,8 @@ function X_NodeAnime_updatePosition( xnode, obj, ratio, useGPU ){ scaleX = obj.scaleX = obj.toScaleX; scaleY = obj.scaleY = obj.toScaleY; alpha = obj.alpha = obj.toAlpha; + obj.scrollX = obj.toScrollX; + obj.scrollY = obj.toScrollY; } else { x = obj.x; y = obj.y; @@ -554,7 +550,7 @@ function X_NodeAnime_updatePosition( xnode, obj, ratio, useGPU ){ }; } else if( obj.fallback === 16 ){ - xnode[ 'css' ]( 'dxtransform', [ x || 0, y || 0, rotate || 0, skewX || 0, skewY || 0, scaleX, scaleY ] ); + xnode[ 'css' ]( 'dxtransform', [ x | 0, y | 0, rotate || 0, skewX || 0, skewY || 0, scaleX, scaleY ] ); } else { x === x && xnode[ 'css' ]( 'left', ( x | 0 ) + 'px' ); y === y && xnode[ 'css' ]( 'top', ( y | 0 ) + 'px' ); @@ -572,6 +568,13 @@ function X_NodeAnime_updatePosition( xnode, obj, ratio, useGPU ){ }; }; + if( obj.doScroll && xnode[ '_rawObject' ] ){ + console.log( 'ok ' + ratio ); + xnode[ '_rawObject' ].scrollLeft = obj.scrollX | 0; + xnode[ '_rawObject' ].scrollTop = obj.scrollY | 0; + //X_Node_reserveUpdate(); + }; + alpha === alpha && xnode[ 'css' ]( 'opacity', alpha ); }; diff --git a/0.6.x/js/02_dom/20_XNode.js b/0.6.x/js/02_dom/20_XNode.js index 81c33fa..b0ebdf4 100644 --- a/0.6.x/js/02_dom/20_XNode.js +++ b/0.6.x/js/02_dom/20_XNode.js @@ -1407,6 +1407,9 @@ function X_Node_startUpdate( time ){ removal.length = 0; }; + + X_UA[ 'IE5' ] && ( X_elmBody.style.visibility = 'hidden' ); + if( X_Node_html[ '_flags' ] & X_Node_BitMask_IS_DIRTY ){ X_Node__commitUpdate( X_Node_html, X_Node_html[ '_rawObject' ].parentNode, null, X_Node_html[ '_flags' ], 1, xnodesIEFilterFixAfter = [] ); } else { @@ -1414,6 +1417,8 @@ function X_Node_startUpdate( time ){ X_Node__commitUpdate( X_Node_body, X_Node_body[ '_rawObject' ].parentNode, null, X_Node_body[ '_flags' ], 1, xnodesIEFilterFixAfter = [] ); }; + X_UA[ 'IE5' ] && ( X_elmBody.style.visibility = '' ); + if( X_Node_updateReservedByReleaseGPU ){ X_Node_reserveUpdate(); X_Node_updateReservedByReleaseGPU = false; @@ -1448,13 +1453,13 @@ function X_Node_startUpdate( time ){ */ var X_Node__commitUpdate = X_UA_DOM.W3C ? - ( function( that, parentElement, nextElement, accumulatedFlags, ie8opacity, xnodesIEFilterFixAfter ){ + ( function( that, parentElement, nextElement, accumulatedFlags, ie8AccumulatedOpcity, xnodesIEFilterFixAfter ){ var elm = that[ '_rawObject' ], - created, xnodes, l, next, anime, v; + created, xnodes, l, next, anime, v, currentOpcity; // 1. GPU 一切の更新をスキップ if( that[ '_flags' ] & X_NodeFlags_GPU_NOW ){ - console.log( '更新のskip ' + !!( that[ '_flags' ] & X_Node_BitMask_IS_DIRTY ) ); + console.log( '更新のskip ' + that[ '_className' ] + !!( that[ '_flags' ] & X_Node_BitMask_IS_DIRTY ) ); that[ '_flags' ] & X_Node_BitMask_IS_DIRTY && X_Node__updateRawNode( that, elm ); return elm; }; @@ -1583,12 +1588,13 @@ var X_Node__commitUpdate = }; // ie8 では子要素に opacity が反映されないため、親要素の opacity を積算する - ie8opacity = ie8opacity * ( that[ '_css' ] && 0 <= that[ '_css' ].opacity ? that[ '_css' ].opacity : 1 ); + currentOpcity = that[ '_css' ] && 0 <= that[ '_css' ].opacity && that[ '_css' ].opacity; + ie8AccumulatedOpcity = ie8AccumulatedOpcity * ( currentOpcity || 1 ); // 8. 更新の適用 if( accumulatedFlags & X_Node_BitMask_IS_DIRTY ){ delete that[ '_fontSize' ]; - X_Node__updateRawNode( that, elm, ie8opacity, accumulatedFlags ); + X_Node__updateRawNode( that, elm, currentOpcity, ie8AccumulatedOpcity, accumulatedFlags ); }; // 9. ie5 only @@ -1612,7 +1618,7 @@ var X_Node__commitUpdate = // 10. 子要素の更新。 if( ( xnodes = that[ '_xnodes' ] ) && ( l = xnodes.length ) ) { for( ; l; ){ - next = X_Node__commitUpdate( xnodes[ --l ], elm, next, accumulatedFlags, ie8opacity, xnodesIEFilterFixAfter ); + next = X_Node__commitUpdate( xnodes[ --l ], elm, next, accumulatedFlags, ie8AccumulatedOpcity, xnodesIEFilterFixAfter ); }; }; @@ -1627,26 +1633,6 @@ var X_Node__commitUpdate = }; }; - if( ( anime = that[ '_anime' ] ) && 6 <= anime.phase && anime.doScroll ){ - if( anime.phase === 6 ){ - v = anime.fromScrollX; - if( v === v ){ - elm.scrollLeft = v; - } else { - anime.fromScrollX = elm.scrollLeft; - }; - v = anime.fromScrollY; - if( v === v ){ - elm.scrollTop = v; - } else { - anime.fromScrollY = elm.scrollTop; - }; - } else { - elm.scrollLeft = anime.scrollX; - elm.scrollTop = anime.scrollY; - }; - }; - return elm; }) : X_UA_DOM.IE4 ? @@ -1769,9 +1755,9 @@ var X_Node__commitUpdate = */ var X_Node__updateRawNode = X_UA_DOM.W3C ? - ( function( that, elm, ie8opacity, accumulatedFlags ){ + ( function( that, elm, currentOpcity, ie8AccumulatedOpcity, accumulatedFlags ){ var // flags = that[ '_flags' ], - attrs, rename, k, v, memory, f; + attrs, rename, k, v, f; // textNode if( !that[ '_tag' ] ){ @@ -1847,11 +1833,9 @@ var X_Node__updateRawNode = }; if( accumulatedFlags & X_NodeFlags_IE8_OPACITY_FIX ){ - memory = that[ '_css' ] && that[ '_css' ].opacity; - f = true; - if( 0 <= memory && memory < 1 ){ - //if( !that[ '_css' ] ) that[ '_css' ] = {}; - that[ '_css' ].opacity = ie8opacity; + if( 0 <= currentOpcity ){ + f = true; + that[ '_css' ].opacity = ie8AccumulatedOpcity; if( that[ '_flags' ] & X_NodeFlags_DIRTY_CSS ){ that[ '_flags' ] |= X_NodeFlags_OLD_CSSTEXT; } else @@ -1889,13 +1873,7 @@ var X_Node__updateRawNode = * IE8でfilter:alphaの指定がposition:relative,position:absoluteの子要素に継承されない問題 */ if( f ){ - if( 0 <= memory ){ - that[ '_css' ].opacity = memory; - } else { - //elm.style.filter = 'inherit'; - //delete that[ '_css' ].opacity; - //if( X_Object_isEmpty( that[ '_css' ] ) ) delete that[ '_css' ]; - }; + that[ '_css' ].opacity = currentOpcity; }; that[ '_flags' ] &= X_Node_BitMask_RESET_DIRTY; diff --git a/0.6.x/js/20_ui/15_ScrollBox.js b/0.6.x/js/20_ui/15_ScrollBox.js index 46bc52d..e82a647 100644 --- a/0.6.x/js/20_ui/15_ScrollBox.js +++ b/0.6.x/js/20_ui/15_ScrollBox.js @@ -3,7 +3,8 @@ * ScrollManager * indicatorX, Y は再利用 */ -var XUI_ScrollBox_current, +var XUI_ScrollBox_useCSSP = !X_UA[ 'IE5' ], + XUI_ScrollBox_current, XUI_ScrollBox_indicatorV, XUI_ScrollBox_indicatorH; @@ -65,6 +66,7 @@ function XUI_ScrollBox_start( scrollBox ){ }; function XUI_ScrollBox_indicatorHandleEvent( e ){ + //if( !XUI_ScrollBox_useCSSP ) return; switch( e.type ){ case X_EVENT_CANCELED : case XUI_Event.SCROLL_END : @@ -213,7 +215,7 @@ var XUI_ScrollBox = XUI_ChromeBox.inherits( XUI_rootData[ 'unlisten' ]( XUI_Event.LAYOUT_COMPLETE, this, X_UI_ScrollBox_onLayoutComplete ); this[ 'unlisten' ]( XUI_Event.SCROLL_END, XUI_rootData, XUI_rootData.calculate ); - this.xnodeSlider[ 'stop' ](); + XUI_ScrollBox_useCSSP ? this.xnodeSlider[ 'stop' ]() : this.xnode[ 'stop' ](); XUI_ScrollBox_current === this && XUI_ScrollBox_start( null ); @@ -231,7 +233,7 @@ function X_UI_ScrollBox_onLayoutBefore( e ){ }; this.scrollXRatio = this.scrollX / this.scrollXMax; this.scrollYRatio = this.scrollY / this.scrollYMax; - this.xnodeSlider[ 'stop' ](); + XUI_ScrollBox_useCSSP ? this.xnodeSlider[ 'stop' ]() : this.xnode[ 'stop' ](); this.isInTransition = false; return X_CALLBACK_NONE; }; @@ -301,19 +303,36 @@ function X_UI_ScrollBox_translate( that, x, y, opt_time, opt_easing, opt_release opt_easing = opt_easing === '' ? '' : opt_easing || 'circular'; opt_release = 0 <= opt_release ? opt_release : 300; - that.xnodeSlider[ 'animate' ]({ - 'from' : { - x : that.scrollX, - y : that.scrollY - }, - 'to' : { - x : x, - y : y - }, - 'duration' : opt_time, - 'easing' : opt_easing, - 'lazyRelease' : opt_release - }); + console.log( 'scr ' + y ); + + if( !XUI_ScrollBox_useCSSP ){ + that.xnode[ 'animate' ]({ + 'from' : { + scrollX : -that.scrollX, + scrollY : -that.scrollY + }, + 'to' : { + scrollX : -x, + scrollY : -y + }, + 'duration' : opt_time, + 'easing' : opt_easing + }); + } else { + that.xnodeSlider[ 'animate' ]({ + 'from' : { + x : that.scrollX, + y : that.scrollY + }, + 'to' : { + x : x, + y : y + }, + 'duration' : opt_time, + 'easing' : opt_easing, + 'lazyRelease' : opt_release + }); + }; if( X_UA[ 'IE' ] < 6 ){ XUI_ScrollBox_indicatorV && XUI_ScrollBox_indicatorV[ 'css' ]( 'left', ( scrollBoxW - that.fontSize * 0.6 | 0 ) + 'px' ); @@ -388,8 +407,8 @@ function X_UI_ScrollBox_onStart( e ){ //console.log( '-1-' ); this[ 'dispatch' ]( XUI_Event.SCROLL_END ); // TODO current位置 - this.xnodeSlider[ 'stop' ](); - }; + XUI_ScrollBox_useCSSP ? this.xnodeSlider[ 'stop' ]() : this.xnode[ 'stop' ](); + }; this.startX = this.scrollX; this.startY = this.scrollY; @@ -417,7 +436,7 @@ function X_UI_ScrollBox_onMove( e ){ }; // gpu の用意 - if( !this.xnodeSlider[ '_anime' ] || !this.xnodeSlider[ '_anime' ].phase ){ + if( !XUI_ScrollBox_useCSSP ? ( !this.xnode[ '_anime' ] || !this.xnode[ '_anime' ].phase ) : ( !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 ); @@ -490,7 +509,7 @@ function X_UI_ScrollBox_onMove( e ){ this.directionX = 0 < deltaX ? -1 : deltaX < 0 ? 1 : 0; this.directionY = 0 < deltaY ? -1 : deltaY < 0 ? 1 : 0; - //console.log( 'mov2 x:' + newX + ' y:' + newY ); + console.log( 'mov2 x:' + newX + ' y:' + newY ); X_UI_ScrollBox_translate( this, newX, newY, 0, '', 300 ); if( 300 < timestamp - this.startTime ){ -- 2.11.0