From a205577d1e16a34301f1199dcf9c699aa2c37fb9 Mon Sep 17 00:00:00 2001 From: itozyun Date: Sat, 19 Dec 2015 15:57:29 +0900 Subject: [PATCH] Version 0.6.202, update xnode.animate(). --- 0.6.x/css/xui.css | 4 + 0.6.x/js/02_dom/02_XNodeFlags.js | 11 +- 0.6.x/js/02_dom/06_XNodeCSS.js | 142 +++++++++++++-- 0.6.x/js/02_dom/10_XNodeAnime.js | 373 +++++++++++++++++++++++++++++---------- 0.6.x/js/02_dom/20_XNode.js | 203 +++++++++++++-------- 0.6.x/js/20_ui/15_ScrollBox.js | 102 ++++++----- 6 files changed, 596 insertions(+), 239 deletions(-) diff --git a/0.6.x/css/xui.css b/0.6.x/css/xui.css index 6f91c92..18bdf2c 100644 --- a/0.6.x/css/xui.css +++ b/0.6.x/css/xui.css @@ -224,3 +224,7 @@ .IE5x .ScrollBox-IndicatorH { line-height : 0.5; } + +.IE8 * { + filter : inherit; +} diff --git a/0.6.x/js/02_dom/02_XNodeFlags.js b/0.6.x/js/02_dom/02_XNodeFlags.js index 166e14b..77ef0e2 100644 --- a/0.6.x/js/02_dom/02_XNodeFlags.js +++ b/0.6.x/js/02_dom/02_XNodeFlags.js @@ -33,18 +33,19 @@ var X_NodeFlags_DESTROYED = 0x0, X_NodeFlags_GPU_NOW = 2 << 22, // 3:GPU now! X_NodeFlags_GPU_RELEASE_RESERVED = 2 << 23, // 4:GPU解除予約 X_NodeFlags_GPU_CHILD = 2 << 24, - + X_NodeFlags_IE4_HAS_TEXTNODE = X_UA[ 'IE4' ] ? 2 << 21 : 0, X_NodeFlags_IE4_HAS_ELEMENT = X_UA[ 'IE4' ] ? 2 << 22 : 0, X_NodeFlags_IE4_DIRTY_CHILDREN = X_UA[ 'IE4' ] ? 2 << 23 : 0, X_NodeFlags_IE4_FIXED = X_UA[ 'IE4' ] ? 2 << 24 : 0, X_NodeFlags_IE5_DISPLAY_NONE_FIX = X_UA[ 'IE5' ] && X_UA[ 'ActiveX' ] ? 2 << 24 : 0, - X_NodeFlags_IE8_OPACITY_FIX = X_UA[ 'IE8' ] && X_UA[ 'ActiveX' ] ? 2 << 25 : 0, + X_NodeFlags_IE8_OPACITY_FIX = 0,//X_UA[ 'IE8' ] && X_UA[ 'ActiveX' ] ? 2 << 25 : 0, + X_NodeFlags_IE_FILTER_FIX_AFTER = X_UA[ 'ActiveX' ] && 2 << 26, // http://modernizr.com/downloads/modernizr.js // Thanks to Erik Dahlstrom - X_NodeFlags_IS_SVG = document.createElementNS && document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' )[ 'createSVGRect' ] ? 2 << 26 : 0, + X_NodeFlags_IS_SVG = document.createElementNS && document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' )[ 'createSVGRect' ] ? 2 << 27 : 0, X_NodeFlags_IS_VML = ( function(){ if( !X_UA[ 'ActiveX' ] || X_UA[ 'IE' ] < 5 || 9 < X_UA[ 'IE' ] /* || X_UA[ 'ieExeComError' ] */ ) return 0; // standalone の除外 -> X_UA[ 'ieExeComError' ] @@ -65,12 +66,10 @@ var X_NodeFlags_DESTROYED = 0x0, document.getElementById( 'vmltest2' ).removeNode( true ); case 1 : document.getElementById( 'vmltest1' ).removeNode( true ); - return 2 << 27; + return 2 << 28; }; return 0; })(), - - X_NodeFlags_SYSTEM_NODE = 2 << 28, X_Node_BITMASK_RESET_STYLE = ( ( 2 << 29 ) - 1 + ( 2 << 29 ) ) ^ ( X_NodeFlags_STYLE_IS_DISPLAY_NONE | diff --git a/0.6.x/js/02_dom/06_XNodeCSS.js b/0.6.x/js/02_dom/06_XNodeCSS.js index 9bcfdfd..2463840 100644 --- a/0.6.x/js/02_dom/06_XNodeCSS.js +++ b/0.6.x/js/02_dom/06_XNodeCSS.js @@ -277,9 +277,9 @@ function X_Node_CSS_objToCssText( that, skipFilter ){ }; if( filterFix ){ - v = X_Node_CSS_objToIEFilterText( that, filterFix, css ); + v = X_Node_CSS_objToIEFilterText( that, filterFix /* , css */ ); if( v ){ - css[ ++n ] = 'filter:' + v; + css[ ++n /* css.length */ ] = 'filter:' + v; }; skipFilter = skipFilter && v; } else { @@ -303,10 +303,11 @@ var X_Node_CSS_FILTER_FIX_PROPS = X_UA[ 'ActiveX' ] && X_UA[ 'IE' ] < 9 ? { - 'opacity' : 2, - 'boxShadow' : 3, - 'textShadow' : 4, - 'transform' : 5 + 'opacity' : 2, + 'boxShadow' : 3, + 'textShadow' : 4, + 'transform' : 5, + 'dxtransform' : 7 // X.NodeAnime で使用 } : X_UA[ 'ActiveX' ] && X_UA[ 'IE9' ] ? // == 9 { @@ -317,14 +318,13 @@ X_Node_CSS_FILTER_FIX_PROPS = function X_Node_CSS_objToIEFilterText( that, opt_css, opt_cssList ){ var obj = opt_css || that[ '_css' ], test = X_Node_CSS_FILTER_FIX_PROPS, - css = {}, filters = [], n = -1, p, id, v, num, ary, params, i, l, dir, afterUpdate, impossible; for( p in obj ){ - if( X_EMPTY_OBJECT[ p ] ) continue; + //if( X_EMPTY_OBJECT[ p ] ) continue; if( !( id = test[ p ] ) ) continue; v = obj[ p ]; @@ -403,25 +403,131 @@ function X_Node_CSS_objToIEFilterText( that, opt_css, opt_cssList ){ X_ViewPort[ 'listenOnce' ]( X_EVENT_AFTER_UPDATE, that, X_Node_CSS_onAfterUpdateForIEFilterFix ); break; }; - dir = Math.atan2( params[ 1 ] + params[ 3 ], params[ 0 ] + params[ 3 ] ) * 180 / Math.PI + 90; - dir += dir < 0 ? 360 : 0; + dir = X_Node_CSS_ieMathRangeFix( Math.atan2( params[ 1 ] + params[ 3 ], params[ 0 ] + params[ 3 ] ) * 180 / Math.PI + 90 ); filters[ ++n ] = 'shadow(color=' + color + ',strength=' + params[ 3 ] + ',direction=' + ( dir | 0 ) + ')'; break; case 4 : //'textShadow' : //text-shadow: 5px 5px 2px blue; 水平方向の距離 垂直方向の距離 影のぼかし半径 影の色 none //glow(Color=yellow,Strength=10); - //どうやらCSSのbackgroundプロパティと同時に使えないようです。 s + //どうやらCSSのbackgroundプロパティと同時に使えないようです。 break; case 6 : //'backgroundImage' : // - + break; + case 5 : // transform scale, matrix - + break; + case 7 : // dxtransform + that[ '_flags' ] |= X_NodeFlags_IE_FILTER_FIX_AFTER; + break; }; }; return filters.join( ' ' ); }; + + //0 ～ 360の範囲に収める. + function X_Node_CSS_ieMathRangeFix( a ){ + a %= 360; + return a < 0 ? 360 + a : a; + }; + +/* + * http://p2b.jp/200912-CSS3-Transform-for-IE8 + * http://rtilabs.rti-giken.jp/files/2011_09_16/rotate.html + */ + function X_Node_CSS_IETransform( elm, params ){ + var PI_180 = Math.PI / 180, + + rotate = X_Node_CSS_ieMathRangeFix( params[ 2 ] ),//回転 + radian = rotate * PI_180, + cosX = Math.cos( radian ), + sinY = Math.sin( radian ), + + skewX = X_Node_CSS_ieMathRangeFix( params[ 3 ] ), //skew + skewY = X_Node_CSS_ieMathRangeFix( params[ 4 ] ); + + _skX = Math.tan( skewX * PI_180 ), + _skY = Math.tan( skewY * PI_180 ), + + scaleX = params[ 5 ], //拡大 + scaleY = params[ 6 ], + + m11 = cosX * scaleX, + m12 = ( -sinY + _skX ) * scaleX, + m21 = ( sinY + _skY ) * scaleY, + m22 = cosX * scaleY, + + //absolute時には軸を補正してあげないとだめだ。 + //ブラウザとして軸がずれている。 + //計算式元ネタ http://p2b.jp/200912-CSS3-Transform-for-IE8 + + //offset*系のサイズは回転によって生じたゆがみも考慮されるらしい。 + + //拡大縮小も同じ. + //this.get(0).style.width や height には拡縮の影響を受けない元の数字が入っている + ow = elm.offsetWidth, + oh = elm.offsetHeight, + + absCosX = Math.abs( cosX ), + absSinY = Math.abs( sinY ), + + //回転の補正 + dx = ( ow - ( ow * absCosX + oh * absSinY ) ) / 2 + //skewの補正(rotate しながらskew すると補正がおかしくなります。 これがわからない) + - ow / 2 * _skX + //拡大の補正 + - ( ( ow * scaleX - ow ) / 2 | 0 ) + // x + + params[ 0 ], + dy = ( oh - ( ow * absSinY + oh * absCosX ) ) / 2 + //skewの補正( + - oh / 2 * _skY + //拡大の補正 + - ( ( oh * scaleY - oh ) / 2 | 0 ) + // y + + params[ 1 ]; + + //console.log( ow + ' ' + oh ) + elm.style.left = dx + 'px'; + elm.style.top = dy + 'px'; + + //フィルターで回転と拡大縮小を加えます。 + return 'progid:DXImageTransform.Microsoft.Matrix(' + + // 'Dx=' + dx + + //',Dy=' + dy + + 'M11=' + m11 + + ',M12=' + m12 + + ',M21=' + m21 + + ',M22=' + m22 + + ',FilterType="bilinear",sizingMethod="auto expand")'; + }; + +function X_Node_CSS_onAfterUpdateIEFilterFix( that ){ + var PI_180 = Math.PI / 180, + test = X_Node_CSS_FILTER_FIX_PROPS, + css = that[ '_css' ], + elm = that[ '_rawObject' ], + filter = elm.style.filter || '', + origin = filter, + p, v, plus; + + for( p in css ){ + if( !( id = test[ p ] ) ) continue; + plus = 0; + switch( id ){ + case 7 : // dxtransform + plus = X_Node_CSS_IETransform( elm, css[ p ] ); + break; + default : + continue; + }; + if( plus ) filter += ( filter ? ' ' : '' ) + plus; + }; + if( filter !== origin ) elm.style.filter = filter; +}; + + function X_Node_CSS_onAfterUpdateForIEFilterFix(){ if( this[ '_flags' ] & X_NodeFlags_IN_TREE ){ // 要素があり、要素がツリーに属している this[ '_flags' ] |= X_NodeFlags_DIRTY_IE_FILTER; @@ -675,7 +781,7 @@ function X_Node_cssText( v ){ }; /* - * ここでは HTMLElement のチ1ェックは行わない！ + * ここでは HTMLElement のチ1ェックは行わない！ <- 行う！ * TODO * body に css attr がセットされた場合には X_ViewPort_baseFontSize をクリア * class, id, attr() の変更があった場合は、変更の適用の後、charSize を取得 @@ -689,12 +795,13 @@ X_Node_CSS_getCharSize = X_Node_updateTimerID && X_Node_startUpdate(); if( that === X_Node_body && X_ViewPort_baseFontSize ) return X_ViewPort_baseFontSize; if( that[ '_fontSize' ] ) return that[ '_fontSize' ]; - return that[ '_fontSize' ] = parseFloat( X_Node_CSS_getComputedStyle( that[ '_rawObject' ], null ).fontSize ); + return that[ '_fontSize' ] = that[ '_rawObject' ] ? parseFloat( X_Node_CSS_getComputedStyle( that[ '_rawObject' ], null ).fontSize ) : 0; }) : 5 <= X_UA[ 'IE' ] ? (function( that ){ var font, vu, v, u, _v; + X_Node_updateTimerID && X_Node_startUpdate(); if( that === X_Node_body && X_ViewPort_baseFontSize ) return X_ViewPort_baseFontSize; if( that[ '_fontSize' ] ) return that[ '_fontSize' ]; @@ -740,10 +847,11 @@ X_Node_CSS_getCharSize = X_UA_DOM.IE4 ? (function( that ){ var font, vu, v, u, _v; + X_Node_updateTimerID && X_Node_startUpdate(); if( that === X_Node_body && X_ViewPort_baseFontSize ) return X_ViewPort_baseFontSize; if( that[ '_fontSize' ] ) return that[ '_fontSize' ]; - + if( that[ '_css' ] && ( font = that[ '_css' ].fontSize ) ){ vu = X_Node_CSS__splitValueAndUnit( font ); v = vu[ 0 ]; @@ -755,7 +863,7 @@ X_Node_CSS_getCharSize = if( _v = X_Node_CSS__UNIT_RATIO[ u ] ) return that[ '_fontSize' ] = v / _v; }; } else { - // 要素を生成して測定! + // TODO 要素を生成して測定! ではなくて elm.style.fontSize が使えそう ( that[ '_rawObject' ] || X_Node__ie4getRawNode( that ) ).insertAdjacentHTML( 'BeforeEnd', '
X
' ); elm = document.all[ 'ie4charsize' ]; v = elm.offsetHeight; diff --git a/0.6.x/js/02_dom/10_XNodeAnime.js b/0.6.x/js/02_dom/10_XNodeAnime.js index 5404814..4613689 100644 --- a/0.6.x/js/02_dom/10_XNodeAnime.js +++ b/0.6.x/js/02_dom/10_XNodeAnime.js @@ -6,6 +6,9 @@ var X_NodeAnime_QUEUE = [], X_NodeAnime_needsDetection = false, X_NodeAnime_hasTransform = !!X_Node_CSS_VENDER_PREFIX[ 'transform' ], + + X_NodeAnime_hasDXTransform = 5.5 <= X_UA[ 'IE' ] && X_UA[ 'IE' ] < 9 && X_UA[ 'ActiveX' ], + /* Opera mobile で translateZ(0) が有効だと XY が 0 0 になる */ /* GPUレイヤーにいる間に要素のコンテンツを変更をすると transitionend が動かなくなるっぽい Mac safari と firefox */ X_NodeAnime_translateZ = X_Node_CSS_VENDER_PREFIX[ 'perspective' ] && !X_UA[ 'OperaMobile' ] && !X_UA[ 'OperaTablet' ] ? ' translateZ(0)' : '', @@ -26,22 +29,72 @@ var X_NodeAnime_QUEUE = [], */ var X_NODE_ANIME_RESET = 1, - X_NODE_ANIME_STAY_GPU = 2; + 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, + rotate : NaN, fromRotate : NaN, toRotate : NaN, + skewX : NaN, fromSkewX : NaN, toSkewX : NaN, + skewY : NaN, fromSkewY : NaN, toSkewY : NaN, + scaleX : 1, fromScaleX : 1, toScaleX : 1, + scaleY : 1, fromScaleY : 1, toScaleY : 1, + alpha : NaN, + scrollX : NaN, fromScrollX : NaN, toScrollX : NaN, + scrollY : NaN, fromScrollY : NaN, toScrollY : NaN, + doScroll : false//, + //duration : 0 + //phase, lazyRelease, easing, follower, releaseNow, inited, progress doScroll, fallbackKind + // fromTime, toTime + }; /** - * GPU サポートの効いたアニメーションの設定 X.Event.ANIME_START, X.Event.ANIME_END, X.Event.GPU_RELEASED + * GPU サポートの効いたアニメーションの設定 + * ぺったんRフレームワークのアニメーションメソッド * @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 フォールバックについて + * @param {object} obj * @return {Node} メソッドチェーン + * @example + * xnode.animate{ + * from : { + * x : num, + * y : num, + * opacity : 0.0, //～1.0 + * rotate : deg, + * skew : deg, + * skewX : deg, + * skewY : deg, + * scale : num, + * scaleX : num, + * scaleY : num, + * scrollX : num, + * scrollY : num + * }, + * to : {}, // from と同じ + * duration : ms, + * lazyRelease : ms, + * easing : 'quadratic', // function, 'circular', 'back', 'bounce', 'elastic' + * fallback : bitFlag // 16:DXTransform, 8:css-p, 4:zoom(s) > 2:fontSize(s) > 1:width&height(vh,s) + * ** tree にいなくてもアニメーションを行いイベントを発生 + * ** SVG transfrom + * fallbackWidth, fallbackHeight, transformOrigin( 0.5, 0.5 ) + * } */ -function X_Node_animate( start, dest, duration, easing, lazyRelease, option ){ - var list = X_NodeAnime_QUEUE, - obj = this[ '_anime' ]; +function X_Node_animate( obj ){ + var list = X_NodeAnime_QUEUE, + from = obj[ 'from' ] || {}, + dest = obj[ 'to' ] || {}, + duration = obj[ 'duration' ], + lazyRelease = obj[ 'lazyRelease' ], + easing = obj[ 'easing' ], + fallback = obj[ 'fallback' ], + a, sameRate; + + obj = this[ '_anime' ]; if( !( this[ '_flags' ] & X_NodeFlags_IN_TREE ) ){ alert( '@animate 要素はツリーに追加されていません!' ); @@ -50,13 +103,9 @@ function X_Node_animate( start, dest, duration, easing, lazyRelease, option ){ }; if( !obj ){ - this[ '_anime' ] = obj = { - x : X_NodeAnime_hasTransform ? 0 : NaN, - y : X_NodeAnime_hasTransform ? 0 : NaN, - a : 1, - duration : 0 - //phase, lazyRelease, easing, follower, releaseNow - }; + this[ '_anime' ] = obj = X_Object_copy( X_NodeAnime_DEFAULT ); + a = this[ '_css' ] && parseFloat( this[ '_css' ].opacity ); + if( 0 <= a ) obj.alpha = a; }; if( 0 <= duration && X_Type_isFinite( duration ) ){ @@ -66,17 +115,72 @@ function X_Node_animate( start, dest, duration, easing, lazyRelease, option ){ 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 ); - + obj.fromX = obj.x = X_NodeAnime_getFinite( from[ 'x' ], obj.x ); + obj.fromY = obj.y = X_NodeAnime_getFinite( from[ 'y' ], obj.y ); + obj.fromRotate = obj.rotate = X_NodeAnime_getFinite( from[ 'rotate' ], obj.rotate ); + obj.fromSkewX = obj.skewX = X_NodeAnime_getFinite( from[ 'skewX' ], from[ 'skew' ], obj.skewX ); + obj.fromSkewY = obj.skewY = X_NodeAnime_getFinite( from[ 'skewY' ], from[ 'skew' ], obj.skewY ); + obj.fromScaleX = obj.scaleX = X_NodeAnime_getFinite( from[ 'scaleX' ], from[ 'scale' ], obj.scaleX ); + obj.fromScaleY = obj.scaleY = X_NodeAnime_getFinite( from[ 'scaleY' ], from[ 'scale' ], obj.scaleY ); + obj.fromAlpha = obj.alpha = X_NodeAnime_getFinite( from[ 'opacity' ], obj.alpha ); + obj.fromScrollX = obj.scrollX = X_NodeAnime_getFinite( from[ 'scrollX' ], obj.scrollX ); + obj.fromScrollY = obj.scrollY = X_NodeAnime_getFinite( from[ 'scrollY' ], obj.scrollY ); // to : - obj.destX = X_NodeAnime_getFinite( dest[ 'x' ], obj.x ); - obj.destY = X_NodeAnime_getFinite( dest[ 'y' ], obj.y ); - obj.destA = X_NodeAnime_getFinite( dest[ 'opacity' ], obj.a ); + obj.toX = X_NodeAnime_getFinite( dest[ 'x' ], obj.x ); + obj.toY = X_NodeAnime_getFinite( dest[ 'y' ], obj.y ); + obj.toRotate = X_NodeAnime_getFinite( dest[ 'rotate' ], obj.rotate ); + obj.toSkewX = X_NodeAnime_getFinite( dest[ 'skewX' ], dest[ 'skew' ], obj.skewX ); + obj.toSkewY = X_NodeAnime_getFinite( dest[ 'skewY' ], dest[ 'skew' ], obj.skewY ); + obj.toScaleX = X_NodeAnime_getFinite( dest[ 'scaleX' ], dest[ 'scale' ], obj.scaleX ); + obj.toScaleY = X_NodeAnime_getFinite( dest[ 'scaleY' ], dest[ 'scale' ], obj.scaleY ); + obj.toAlpha = X_NodeAnime_getFinite( dest[ 'opacity' ], obj.alpha ); + 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; obj.lazyRelease = 0 <= lazyRelease && X_Type_isFinite( lazyRelease ) ? lazyRelease : 0; - obj.inited = false; + 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; + }; + + // scale + if( obj.toScaleX !== 1 && obj.fromScaleX !== 1 && obj.toScaleY !== 1 && obj.fromScaleY !== 1 ){ + sameRate = obj.fromScaleX === obj.fromScaleY && obj.toScaleX === obj.toScaleY; + + if( X_NodeAnime_hasTransform ){ + obj.transform = true; + } else + if( X_NodeAnime_hasDXTransform && ( fallback & 16 ) ){ // DX Transform + obj.fallback = 16; + } else + if( ( fallback & 4 ) && sameRate ){ // zoom + obj.fallback = 4; + } else + if( ( fallback & 2 ) && sameRate ){ // fontSize + obj.fallback = 2; + } else + if( fallback & 1 ){ // width & height + obj.fallback = 1; + }; + }; + + // rotate, skew + if( obj.toRotate === obj.toRotate || obj.toSkewX === obj.toSkewX || obj.toSkewY === obj.toSkewY ){ + if( X_NodeAnime_hasTransform ){ + obj.transform = true; + } else + if( X_NodeAnime_hasDXTransform && ( fallback & 16 ) ){ // DX Transform + obj.fallback = 16; + }; + }; if( !obj.duration && 6 <= obj.phase ){ this[ 'stop' ](); // 現在値で停止 @@ -121,9 +225,10 @@ function X_Node_animate( start, dest, duration, easing, lazyRelease, option ){ return this; }; -function X_NodeAnime_getFinite( a, b ){ +function X_NodeAnime_getFinite( a, b, c ){ if( a || a === 0 ) return a; if( b || b === 0 ) return b; + if( c || c === 0 ) return c; return NaN; }; @@ -139,7 +244,7 @@ function X_NodeAnime_getFinite( a, b ){ function X_Node_stop( option ){ var obj = this[ '_anime' ], list = X_NodeAnime_QUEUE, - i, rm, j, xnode, _obj; + rm; if( !obj || !obj.phase ) return this; @@ -154,19 +259,25 @@ function X_Node_stop( option ){ case 4 : // 強制停止(GPU転送予約) case 7 : // アニメーション中 if( option & X_NODE_ANIME_RESET ){ - obj.startX = obj.startY = obj.destX = obj.destY = obj.x = obj.y = X_NodeAnime_hasTransform ? 0 : NaN; - obj.startA = obj.destA = obj.a = 1; + X_Object_override( obj, X_NodeAnime_DEFAULT ); }; // TODO 終了値で停止も,,, // obj.canceled = true; if( rm ) break; // 1,2,3,6 の場合ここまで - obj.destX = obj.x; - obj.destY = obj.y; - obj.destA = obj.a; - - obj.phase = 4; // 強制解除 + obj.toX = obj.x; + obj.toY = obj.y; + obj.toRotate = obj.rotate; + obj.toSkewX = obj.skewX; + obj.toSkewY = obj.skewY; + obj.toScaleX = obj.scaleX; + obj.toScaleY = obj.scaleY; + obj.toAlpha = obj.alpha; + obj.toScrollX = obj.scrollX; + obj.toScrollY = obj.scrollY; + + obj.phase = 4; // 強制解除 X_NodeAnime_needsDetection = true; case 5 : // GPU解除待ち @@ -199,7 +310,7 @@ function X_NodeAnime_stopNow( xnode ){ // この部分 startUpdate へ? if( flags & ~X_Node_BitMask_RESET_GPU ){ skipUpdate = flags & X_NodeFlags_GPU_RESERVED; - ( flags & X_NodeFlags_GPU_RELEASE_RESERVED ) || X_NodeAnime_updatePosition( xnode, obj.x, obj.y, obj.a, false ); + ( flags & X_NodeFlags_GPU_RELEASE_RESERVED ) || X_NodeAnime_updatePosition( xnode, obj, 0.5, false ); skipUpdate || ( xnode[ '_rawObject' ].style.cssText = X_Node_CSS_objToCssText( xnode ) ); xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU; }; @@ -275,21 +386,29 @@ function X_NodeAnime_updateAnimations( e ){ 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, - obj.y = ( obj.destY - obj.startY ) * easing + obj.startY, - obj.a = ( obj.destA - obj.startA ) * easing + obj.startA, true ); + if( now < obj.toTime ){ + obj.progress = ( now - obj.fromTime ) / obj.duration; + easing = obj.easing( obj.progress ); + obj.x = ( obj.toX - obj.fromX ) * easing + obj.fromX; + obj.y = ( obj.toY - obj.fromY ) * easing + obj.fromY; + obj.rotate = ( obj.toRotate - obj.fromRotate ) * easing + obj.fromRotate; + obj.skewX = ( obj.toSkewX - obj.fromSkewX ) * easing + obj.fromSkewX; + obj.skewY = ( obj.toSkewY - obj.fromSkewY ) * easing + obj.fromSkewY; + obj.scaleX = ( obj.toScaleX - obj.fromScaleX ) * easing + obj.fromScaleX; + obj.scaleY = ( obj.toScaleY - obj.fromScaleY ) * easing + obj.fromScaleY; + obj.alpha = ( obj.toAlpha - obj.fromAlpha ) * easing + obj.fromAlpha; + obj.scrollX = ( obj.toScrollX - obj.fromScrollX ) * easing + obj.fromScrollX; + obj.scrollY = ( obj.toScrollY - obj.fromScrollY ) * easing + obj.fromScrollY; + X_NodeAnime_updatePosition( xnode, obj, obj.progress, true ); c = true; break; }; // アニメーション終了 xnode[ 'asyncDispatch' ]( X_EVENT_ANIME_END ); - case 4 : // 強制停止(GPU転送予約) + case 4 : // 強制停止(GPU転送予約)または transform や opacity の値のみ設定 lazy = !obj.follower && !obj.releaseNow && obj.lazyRelease; - X_NodeAnime_updatePosition( xnode, obj.destX, obj.destY, obj.destA, !!lazy ); + X_NodeAnime_updatePosition( xnode, obj, 1, !!lazy ); //if( obj.canceled ){ // xnode[ 'asyncDispatch' ]( X_EVENT_CANCELED ); @@ -299,7 +418,7 @@ function X_NodeAnime_updateAnimations( e ){ if( lazy ){ console.log( 'アニメーション終了(' + obj.phase + ') -> GPU 解除待機 ' + lazy ); - obj.releaseTime = now + lazy; + obj.toTime = now + lazy; obj.phase = 5; // GPU解除待ち c = true; } else { @@ -309,19 +428,19 @@ function X_NodeAnime_updateAnimations( e ){ break; case 6 : // アニメーション開始可能 - obj.startTime = now; - obj.destTime = now + obj.duration; - obj.phase = 7; // アニメーション中 - obj.progress = 0; + obj.fromTime = now; + obj.toTime = now + obj.duration; + obj.phase = 7; // アニメーション中 + obj.progress = 0; xnode[ 'asyncDispatch' ]( X_EVENT_ANIME_START ); c = true; //obj.canceled = false; - ( obj.inited && !X_NodeAnime_translateZ ) || X_NodeAnime_updatePosition( xnode, obj.startX, obj.startY, obj.startA, true ); + ( !obj.inited || X_NodeAnime_translateZ ) && X_NodeAnime_updatePosition( xnode, obj, 0, 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 ); + if( obj.toTime <= now || obj.follower || obj.releaseNow ){ + X_NodeAnime_translateZ && X_NodeAnime_updatePosition( xnode, obj, 1, false ); rm = true; } else { c = true; @@ -330,8 +449,8 @@ function X_NodeAnime_updateAnimations( e ){ default : // 2 or 3 // 待機状態でも親要素が GPU 化していなければ、開始値をセットすることは可能 - obj.inited || X_NodeAnime_updatePosition( xnode, obj.startX, obj.startY, obj.startA, false ); - obj.inited = false; + obj.inited || X_NodeAnime_updatePosition( xnode, obj, 0, false ); + obj.inited = true; break; }; @@ -378,65 +497,124 @@ function X_NodeAnime_sortAnimationNode( xnode1, xnode2 ){ return a ? -1 : 1; }; -function X_NodeAnime_updatePosition( xnode, x, y, opacity, useGPU ){ - //console.log( 'updatePosition x:' + x + ' gpu:' + !!useGPU ); - if( X_NodeAnime_hasTransform ){ - xnode[ 'css' ]({ - transform : 'translate(' + ( x | 0 ) + 'px,' + ( y | 0 ) + 'px)' + ( useGPU ? X_NodeAnime_translateZ : '' ), - opacity : opacity - }); +function X_NodeAnime_updatePosition( xnode, obj, ratio, useGPU ){ + var str = '', + x, y, rotate, skewX, skewY, scaleX, scaleY, alpha, + scrollX, scrollY; + + if( ratio === 1 ){ + x = obj.x = obj.toX; + y = obj.y = obj.toY; + rotate = X_Node_CSS_ieMathRangeFix( obj.rotate = obj.toRotate ); + skewX = X_Node_CSS_ieMathRangeFix( obj.skewX = obj.toSkewX ); + skewY = X_Node_CSS_ieMathRangeFix( obj.skewY = obj.toSkewY ); + scaleX = obj.scaleX = obj.toScaleX; + scaleY = obj.scaleY = obj.toScaleY; + alpha = obj.alpha = obj.toAlpha; } else { - x === x && xnode[ 'css' ]( 'left', ( x | 0 ) + 'px' ); - y === y && xnode[ 'css' ]( 'top', ( y | 0 ) + 'px' ); - opacity === opacity && xnode[ 'css' ]( 'opacity', opacity ); + x = obj.x; + y = obj.y; + rotate = X_Node_CSS_ieMathRangeFix( obj.rotate ); + skewX = X_Node_CSS_ieMathRangeFix( obj.skewX ); + skewY = X_Node_CSS_ieMathRangeFix( obj.skewY ); + scaleX = obj.scaleX; + scaleY = obj.scaleY; + alpha = obj.alpha; }; - - if( X_NodeAnime_translateZ ){ - if( useGPU ){ - if( xnode[ '_flags' ] & X_NodeFlags_GPU_RELEASE_RESERVED ){ - xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU; - xnode[ '_flags' ] |= X_NodeFlags_GPU_NOW; - } else - if( !( xnode[ '_flags' ] & X_NodeFlags_GPU_NOW ) ){ - xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU; - xnode[ '_flags' ] |= X_NodeFlags_GPU_RESERVED; - }; - } else { - if( xnode[ '_flags' ] & X_NodeFlags_GPU_NOW ){ - xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU; - xnode[ '_flags' ] |= X_NodeFlags_GPU_RELEASE_RESERVED; - } else - if( xnode[ '_flags' ] & X_NodeFlags_GPU_RESERVED ){ - xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU; - }; + + //console.log( 'updatePosition x:' + x + ' gpu:' + !!useGPU ); + if( obj.transform ){ + if( x === x || y === y ) str += ' translate(' + ( x | 0 ) + 'px,' + ( y | 0 ) + 'px)'; + if( rotate < 0 || 0 < rotate ) str += ' rotate(' + rotate + 'deg)'; // opera は　rad? + if( skewX < 0 || 0 < skewX ) str += ' skewX(' + skewX + 'deg)'; + if( skewY < 0 || 0 < skewY ) str += ' skewY(' + skewY + 'deg)'; + if( scaleX < 1 || 1 < scaleX ) str += ' scaleX(' + scaleX + ')'; + if( scaleY < 1 || 1 < scaleY ) str += ' scaleY(' + scaleY + ')'; + xnode[ 'css' ]( 'transform', ( str ? str.substr( 1 ) : '' ) + ( useGPU ? X_NodeAnime_translateZ : '' ) ); + + if( X_NodeAnime_translateZ ){ + if( useGPU ){ + if( xnode[ '_flags' ] & X_NodeFlags_GPU_RELEASE_RESERVED ){ + xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU; + xnode[ '_flags' ] |= X_NodeFlags_GPU_NOW; + } else + if( !( xnode[ '_flags' ] & X_NodeFlags_GPU_NOW ) ){ + xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU; + xnode[ '_flags' ] |= X_NodeFlags_GPU_RESERVED; + }; + } else { + if( xnode[ '_flags' ] & X_NodeFlags_GPU_NOW ){ + xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU; + xnode[ '_flags' ] |= X_NodeFlags_GPU_RELEASE_RESERVED; + } else + if( xnode[ '_flags' ] & X_NodeFlags_GPU_RESERVED ){ + xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU; + }; + }; }; + } else + if( obj.fallback === 16 ){ + 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' ); + + switch( obj.fallback ){ + case 4 : + xnode[ 'css' ]( 'zoom', scaleX ); + break; + case 2 : + xnode[ 'css' ]( 'fontSize', scaleX + 'em' ); + break; + case 1 : + + break; + }; }; + + alpha === alpha && xnode[ 'css' ]( 'opacity', alpha ); }; var X_NodeAnime_ease = { - 'quadratic' : { + 'quadratic' : function (k) { + return k * ( 2 - k ); + /*{ 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) + 'circular' : function (k) { + return Math.sqrt( 1 - ( --k * k ) ); + /*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)', + 'back' : function (k) { + return --k * k * ( 5 * k + 4 ) + 1; + /*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: '', + 'bounce' : function (k, X) { + X = 7.5625; + if ( k < ( 1 / 2.75 ) ) { + return X * k * k; + } else + if ( k < ( 2 / 2.75 ) ) { + return X * ( k -= ( 1.5 / 2.75 ) ) * k + 0.75; + } else + if ( k < ( 2.5 / 2.75 ) ) { + return X * ( k -= ( 2.25 / 2.75 ) ) * k + 0.9375; + } else { + return X * ( k -= ( 2.625 / 2.75 ) ) * k + 0.984375; + } + /*style: '', fn: function (k) { if ( ( k /= 1 ) < ( 1 / 2.75 ) ) { return 7.5625 * k * k; @@ -447,10 +625,11 @@ var } else { return 7.5625 * ( k -= ( 2.625 / 2.75 ) ) * k + 0.984375; } - } + }*/ }, - 'elastic' : { - style: '', + 'elastic' : function (k) { + return k === 0 ? 0 : k === 1 ? 1 : ( 0.4 * Math.pow( 2, - 10 * k ) * Math.sin( ( k - 0.055 ) * 28.56 ) + 1 ); + /*style: '', fn: function (k) { var f = 0.22, e = 0.4; @@ -459,6 +638,6 @@ var 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 1656421..81c33fa 100644 --- a/0.6.x/js/02_dom/20_XNode.js +++ b/0.6.x/js/02_dom/20_XNode.js @@ -1223,7 +1223,7 @@ function X_Node_call( name /*, opt_args... */ ){ case 'treeIsDirty' : return !!X_Node_updateTimerID; case 'fontSize' : - return this.parent ? X_Node_CSS_getCharSize( this ) : 0; + return ( this[ '_flags' ] & X_NodeFlags_IN_TREE ) ? X_Node_CSS_getCharSize( this ) : 0; case 'inGPU' : return !!( this[ '_flags' ] & ( X_NodeFlags_GPU_NOW | X_NodeFlags_GPU_RELEASE_RESERVED ) ); case 'isGPUChild' : @@ -1367,7 +1367,7 @@ function X_Node_reserveUpdate(){ var X_Node_updateReservedByReleaseGPU = false; function X_Node_startUpdate( time ){ - var removal, i, xnodeOrElm; + var removal, i, xnodeOrElm, xnodesIEFilterFixAfter, xnode; if( !X_Node_updateTimerID || X_ViewPort_readyState < X_EVENT_INIT ){ return; @@ -1408,10 +1408,10 @@ function X_Node_startUpdate( time ){ }; 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 ); + X_Node__commitUpdate( X_Node_html, X_Node_html[ '_rawObject' ].parentNode, null, X_Node_html[ '_flags' ], 1, xnodesIEFilterFixAfter = [] ); } else { - X_Node__commitUpdate( X_Node_head, X_Node_head[ '_rawObject' ].parentNode, null, X_Node_head[ '_flags' ], 1 ); - X_Node__commitUpdate( X_Node_body, X_Node_body[ '_rawObject' ].parentNode, null, X_Node_body[ '_flags' ], 1 ); + X_Node__commitUpdate( X_Node_head, X_Node_head[ '_rawObject' ].parentNode, null, X_Node_head[ '_flags' ], 1, xnodesIEFilterFixAfter = [] ); + X_Node__commitUpdate( X_Node_body, X_Node_body[ '_rawObject' ].parentNode, null, X_Node_body[ '_flags' ], 1, xnodesIEFilterFixAfter = [] ); }; if( X_Node_updateReservedByReleaseGPU ){ @@ -1419,12 +1419,16 @@ function X_Node_startUpdate( time ){ X_Node_updateReservedByReleaseGPU = false; }; - if( time ){ - // X.Timer 経由でないと発火しない このイベントでサイズを取ると無限ループに - X_System[ '_listeners' ] && X_System[ '_listeners' ][ X_EVENT_UPDATED ] && X_System[ 'dispatch' ]( X_EVENT_UPDATED ); - } else { - X_System[ '_listeners' ] && X_System[ '_listeners' ][ X_EVENT_UPDATED ] && X_System[ 'asyncDispatch' ]( X_EVENT_UPDATED ); + if( X_NodeFlags_IE_FILTER_FIX_AFTER && xnodesIEFilterFixAfter.length ){ + for( i = 0; xnode = xnodesIEFilterFixAfter[ i ]; ++i ){ + xnode[ '_flags' ] &= ~X_NodeFlags_IE_FILTER_FIX_AFTER; + X_Node_CSS_onAfterUpdateIEFilterFix( xnode ); + }; }; + + // time を視て X.Timer 経由の場合、即座に発火する。 + // width() 等で強制的にツリーを構築している場合、UPDATE イベントのコールバックで要素を変更しサイズを取ると無限ループになる,これを防ぐため asyncDispatch とする + X_System[ '_listeners' ] && X_System[ '_listeners' ][ X_EVENT_UPDATED ] && X_System[ time ? 'dispatch' : 'asyncDispatch' ]( X_EVENT_UPDATED ); X_ViewPort[ '_listeners' ] && X_ViewPort[ '_listeners' ][ X_EVENT_AFTER_UPDATE ] && X_ViewPort[ 'asyncDispatch' ]( X_EVENT_AFTER_UPDATE ); }; @@ -1444,9 +1448,9 @@ function X_Node_startUpdate( time ){ */ var X_Node__commitUpdate = X_UA_DOM.W3C ? - ( function( that, parentElement, nextElement, accumulatedFlags, ie8opacity ){ + ( function( that, parentElement, nextElement, accumulatedFlags, ie8opacity, xnodesIEFilterFixAfter ){ var elm = that[ '_rawObject' ], - created, xnodes, l, next; + created, xnodes, l, next, anime, v; // 1. GPU 一切の更新をスキップ if( that[ '_flags' ] & X_NodeFlags_GPU_NOW ){ @@ -1474,7 +1478,8 @@ var X_Node__commitUpdate = if( that[ '_flags' ] & X_NodeFlags_STYLE_IS_DISPLAY_NONE ){ if( X_Node_displayNoneFixForIE5 ){ // filter の効いている要素を含む要素は display:none が無視される。 - // filter = '' で削除はできるが、再表示時に filter が消える。 -> filter な要素を削除してしまう。 + // filter = '' で削除はできるが、再表示時に filter が消える。 -> filter な要素を削除してしまう。 + // TODO filters[0].enabled = false なんてどう? if( elm && elm.parentNode ){ X_Node__actualRemove( that ); }; @@ -1600,10 +1605,14 @@ var X_Node__commitUpdate = }; }; + if( that[ '_flags' ] & X_NodeFlags_IE_FILTER_FIX_AFTER ){ + xnodesIEFilterFixAfter[ xnodesIEFilterFixAfter.length ] = that; + }; + // 10. 子要素の更新。 if( ( xnodes = that[ '_xnodes' ] ) && ( l = xnodes.length ) ) { for( ; l; ){ - next = X_Node__commitUpdate( xnodes[ --l ], elm, next, accumulatedFlags, ie8opacity ); + next = X_Node__commitUpdate( xnodes[ --l ], elm, next, accumulatedFlags, ie8opacity, xnodesIEFilterFixAfter ); }; }; @@ -1618,6 +1627,26 @@ 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 ? @@ -1647,68 +1676,90 @@ var X_Node__commitUpdate = prevElement.insertAdjacentHTML( 'AfterEnd', X_Node__actualCreate( that, false ) ) : parentElement.insertAdjacentHTML( 'AfterBegin', X_Node__actualCreate( that, false ) ); X_Node__afterActualCreate( that ); - return that[ '_rawObject' ] || X_Node__ie4getRawNode( that ); - }; - - accumulatedFlags |= that[ '_flags' ]; - - xnodes = that[ '_xnodes' ]; - l = xnodes ? xnodes.length : 0; - dirty = !!( that[ '_flags' ] & X_NodeFlags_IE4_DIRTY_CHILDREN ); - - /* - * HTML の下に TextNode だけ 。MIX_FIXED　でない場合、削除、追加 を親に通知 - * HTML の下に HTML だけ - * HTML の下は MIX -> TextNode, html の削除、変更、追加 - * HTML の下は MIX_FIXED -> TextNode を に置き換えてあるのでW3C DON 的に触ることができる - */ - if( dirty ){ - that[ '_flags' ] &= ~X_NodeFlags_IE4_DIRTY_CHILDREN; - for( i = 0; i < l; ++i ){ - if( xnodes[ i ][ '_tag' ] ){ - that[ '_flags' ] |= X_NodeFlags_IE4_HAS_ELEMENT; - } else { - that[ '_flags' ] |= X_NodeFlags_IE4_HAS_TEXTNODE; + + elm = that[ '_rawObject' ] || X_Node__ie4getRawNode( that ); + } else { + accumulatedFlags |= that[ '_flags' ]; + + xnodes = that[ '_xnodes' ]; + l = xnodes ? xnodes.length : 0; + dirty = !!( that[ '_flags' ] & X_NodeFlags_IE4_DIRTY_CHILDREN ); + + /* + * HTML の下に TextNode だけ 。MIX_FIXED　でない場合、削除、追加 を親に通知 + * HTML の下に HTML だけ + * HTML の下は MIX -> TextNode, html の削除、変更、追加 + * HTML の下は MIX_FIXED -> TextNode を に置き換えてあるのでW3C DON 的に触ることができる + */ + if( dirty ){ + that[ '_flags' ] &= ~X_NodeFlags_IE4_DIRTY_CHILDREN; + for( i = 0; i < l; ++i ){ + if( xnodes[ i ][ '_tag' ] ){ + that[ '_flags' ] |= X_NodeFlags_IE4_HAS_ELEMENT; + } else { + that[ '_flags' ] |= X_NodeFlags_IE4_HAS_TEXTNODE; + }; + if( that[ '_flags' ] & X_Node_BitMask_IE4_IS_MIX === X_Node_BitMask_IE4_IS_MIX ){ + mix = true; + break; + }; }; - if( that[ '_flags' ] & X_Node_BitMask_IE4_IS_MIX === X_Node_BitMask_IE4_IS_MIX ){ - mix = true; - break; + }; + + if( that[ '_flags' ] & X_NodeFlags_IE4_FIXED || that[ '_flags' ] & X_Node_BitMask_IE4_IS_MIX === X_NodeFlags_IE4_HAS_ELEMENT ){ + for( i = 0; i < l; ++i ){ + prev = X_Node__commitUpdate( xnodes[ i ], elm, prev, accumulatedFlags ); + }; + } else + if( mix ){ + html = []; + for( i = 0; i < l; ++i ){ + html[ i ] = X_Node__actualCreate( xnodes[ i ], false ); + }; + elm.innerHTML = html.join( '' ); + for( i = 0; i < l; ++i ){ + X_Node__afterActualCreate( xnodes[ i ] ); }; + that[ '_flags' ] |= X_NodeFlags_IE4_FIXED; + } else + if( that[ '_flags' ] & X_NodeFlags_IE4_HAS_TEXTNODE ){ + dirty = dirty || false; + for( i = 0; i < l; ++i ){ + text = xnodes[ i ]; + if( text[ '_flags' ] & X_Node_BitMask_IS_DIRTY ){ + text[ '_flags' ] &= X_Node_BitMask_RESET_DIRTY; + dirty = true; + }; + }; + if( dirty ) elm.innerHTML = that[ 'text' ](); }; + + if( accumulatedFlags & X_Node_BitMask_IS_DIRTY ) delete that[ '_fontSize' ]; + + that[ '_flags' ] &= ~X_NodeFlags_DIRTY_POSITION; + that[ '_flags' ] & X_Node_BitMask_IS_DIRTY && X_Node__updateRawNode( that, elm ); }; - if( that[ '_flags' ] & X_NodeFlags_IE4_FIXED || that[ '_flags' ] & X_Node_BitMask_IE4_IS_MIX === X_NodeFlags_IE4_HAS_ELEMENT ){ - for( i = 0; i < l; ++i ){ - prev = X_Node__commitUpdate( xnodes[ i ], elm, prev, accumulatedFlags ); - }; - } else - if( mix ){ - html = []; - for( i = 0; i < l; ++i ){ - html[ i ] = X_Node__actualCreate( xnodes[ i ], false ); - }; - elm.innerHTML = html.join( '' ); - for( i = 0; i < l; ++i ){ - X_Node__afterActualCreate( xnodes[ i ] ); - }; - that[ '_flags' ] |= X_NodeFlags_IE4_FIXED; - } else - if( that[ '_flags' ] & X_NodeFlags_IE4_HAS_TEXTNODE ){ - dirty = dirty || false; - for( i = 0; i < l; ++i ){ - text = xnodes[ i ]; - if( text[ '_flags' ] & X_Node_BitMask_IS_DIRTY ){ - text[ '_flags' ] &= X_Node_BitMask_RESET_DIRTY; - dirty = true; + 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; }; - if( dirty ) elm.innerHTML = that[ 'text' ](); }; - - if( accumulatedFlags & X_Node_BitMask_IS_DIRTY ) delete that[ '_fontSize' ]; - - that[ '_flags' ] &= ~X_NodeFlags_DIRTY_POSITION; - that[ '_flags' ] & X_Node_BitMask_IS_DIRTY && X_Node__updateRawNode( that, elm ); + return elm; }) : (function(){}); @@ -1795,11 +1846,11 @@ var X_Node__updateRawNode = delete that[ '_newAttrs' ]; }; - if( accumulatedFlags & X_NodeFlags_IE8_OPACITY_FIX ){ memory = that[ '_css' ] && that[ '_css' ].opacity; - if( f = true ){ - if( !that[ '_css' ] ) that[ '_css' ] = {}; + f = true; + if( 0 <= memory && memory < 1 ){ + //if( !that[ '_css' ] ) that[ '_css' ] = {}; that[ '_css' ].opacity = ie8opacity; if( that[ '_flags' ] & X_NodeFlags_DIRTY_CSS ){ that[ '_flags' ] |= X_NodeFlags_OLD_CSSTEXT; @@ -1832,12 +1883,18 @@ var X_Node__updateRawNode = }; }; + /* + * http://jsdo.it/esukei/imOL + * IE8でのfilter:alpha継承 + * IE8でfilter:alphaの指定がposition:relative,position:absoluteの子要素に継承されない問題 + */ if( f ){ if( 0 <= memory ){ that[ '_css' ].opacity = memory; } else { - delete that[ '_css' ].opacity; - if( X_Object_isEmpty( that[ '_css' ] ) ) delete that[ '_css' ]; + //elm.style.filter = 'inherit'; + //delete that[ '_css' ].opacity; + //if( X_Object_isEmpty( that[ '_css' ] ) ) delete that[ '_css' ]; }; }; diff --git a/0.6.x/js/20_ui/15_ScrollBox.js b/0.6.x/js/20_ui/15_ScrollBox.js index fd8946b..46bc52d 100644 --- a/0.6.x/js/20_ui/15_ScrollBox.js +++ b/0.6.x/js/20_ui/15_ScrollBox.js @@ -24,11 +24,13 @@ function XUI_ScrollBox_start( scrollBox ){ 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 : 0.5 }, - 900, 'circular', 300 - ); + XUI_ScrollBox_indicatorV[ 'animate' ]({ + 'from' : { opacity : 0 }, + 'to' : { opacity : 0.5 }, + 'duration' : 900, + 'easing' : 'circular', + 'lazyRelease' : 300 + }); scrollBox [ 'listen' ]( [ X_EVENT_CANCELED, XUI_Event.SCROLL_END ], XUI_ScrollBox_indicatorV, XUI_ScrollBox_indicatorHandleEvent ); }; @@ -44,11 +46,13 @@ function XUI_ScrollBox_start( scrollBox ){ }; if( scrollBox.xnode !== XUI_ScrollBox_indicatorH.parent ){ scrollBox.xnode[ 'append' ]( XUI_ScrollBox_indicatorH ); - XUI_ScrollBox_indicatorH[ 'animate' ]( - { opacity : 0 }, - { opacity : 0.5 }, - 900, 'circular', 300 - ); + XUI_ScrollBox_indicatorH[ 'animate' ]({ + 'from' : { opacity : 0 }, + 'to' : { opacity : 0.5 }, + 'duration' : 900, + 'easing' : 'circular', + 'lazyRelease' : 300 + }); scrollBox [ 'listen' ]( [ X_EVENT_CANCELED, XUI_Event.SCROLL_END ], XUI_ScrollBox_indicatorH, XUI_ScrollBox_indicatorHandleEvent ); }; @@ -65,11 +69,13 @@ function XUI_ScrollBox_indicatorHandleEvent( e ){ case X_EVENT_CANCELED : case XUI_Event.SCROLL_END : console.log( '-fadeout-' ); - this[ 'animate' ]( - { opacity : 0.5 }, - { opacity : 0 }, - 900, 'circular', 300 - ); + this[ 'animate' ]({ + 'from' : { opacity : 0.5 }, + 'to' : { opacity : 0 }, + 'duration' : 900, + 'easing' : 'circular', + 'lazyRelease' : 300 + }); break; }; }; @@ -295,17 +301,19 @@ 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' ]( - { - x : that.scrollX, - y : that.scrollY - }, - { - x : x, - y : y - }, - opt_time, opt_easing, opt_release - ); + 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' ); @@ -320,16 +328,17 @@ function X_UI_ScrollBox_translate( that, x, y, opt_time, opt_easing, opt_release [ 'css' ]({ height : ( indicatorH | 0 ) + 'px' }) - [ 'animate' ]( - { - y : scrollBoxH * that.scrollY / that.scrollYMax - }, - { - y : scrollBoxH * y / that.scrollYMax, - opacity : 0.5 - }, - opt_time, opt_easing, opt_release - ); + [ 'animate' ]({ + 'from' : { + y : scrollBoxH * that.scrollY / that.scrollYMax }, + 'to' : { + y : scrollBoxH * y / that.scrollYMax, + opacity : 0.5 + }, + 'duration' : opt_time, + 'easing' : opt_easing, + 'lazyRelease' : opt_release + }); }; if( that.hasHScroll && XUI_ScrollBox_indicatorH && XUI_ScrollBox_indicatorH.parent === that.xnode ){ indicatorW = scrollBoxW * scrollBoxW / ( - that.scrollXMax + scrollBoxW ); @@ -338,16 +347,17 @@ function X_UI_ScrollBox_translate( that, x, y, opt_time, opt_easing, opt_release [ 'css' ]({ width : ( indicatorW | 0 ) + 'px' }) - [ 'animate' ]( - { - x : scrollBoxW * that.scrollX / that.scrollXMax - }, - { - x : scrollBoxW * x / that.scrollXMax, - opacity : 0.5 - }, - opt_time, opt_easing, opt_release - ); + [ 'animate' ]({ + 'from' : { + x : scrollBoxW * that.scrollX / that.scrollXMax }, + 'to' : { + x : scrollBoxW * x / that.scrollXMax, + opacity : 0.5 + }, + 'duration' : opt_time, + 'easing' : opt_easing, + 'lazyRelease' : opt_release + }); }; that.scrollX = x; -- 2.11.0