OSDN -- オープンソース・ソフトウェアの開発とダウンロード
日本語の翻訳状況 translation status for ja
  • R/O
  • HTTP
  • SSH
  • HTTPS
Fork

clientJs: コミット

クライアント側 js 開発用


コミットメタ情報

リビジョンa205577d1e16a34301f1199dcf9c699aa2c37fb9 (tree)
日時2015-12-19 15:57:29
作者itozyun <itozyun@user...>
コミッターitozyun

ログメッセージ

Version 0.6.202, update xnode.animate().

変更サマリ

差分

--- a/0.6.x/css/xui.css
+++ b/0.6.x/css/xui.css
@@ -224,3 +224,7 @@
224224 .IE5x .ScrollBox-IndicatorH {
225225 line-height : 0.5;
226226 }
227+
228+.IE8 * {
229+ filter : inherit;
230+}
--- 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,
3333 X_NodeFlags_GPU_NOW = 2 << 22, // 3:GPU now!
3434 X_NodeFlags_GPU_RELEASE_RESERVED = 2 << 23, // 4:GPU解除予約
3535 X_NodeFlags_GPU_CHILD = 2 << 24,
36-
36+
3737 X_NodeFlags_IE4_HAS_TEXTNODE = X_UA[ 'IE4' ] ? 2 << 21 : 0,
3838 X_NodeFlags_IE4_HAS_ELEMENT = X_UA[ 'IE4' ] ? 2 << 22 : 0,
3939 X_NodeFlags_IE4_DIRTY_CHILDREN = X_UA[ 'IE4' ] ? 2 << 23 : 0,
4040 X_NodeFlags_IE4_FIXED = X_UA[ 'IE4' ] ? 2 << 24 : 0,
4141
4242 X_NodeFlags_IE5_DISPLAY_NONE_FIX = X_UA[ 'IE5' ] && X_UA[ 'ActiveX' ] ? 2 << 24 : 0,
43- X_NodeFlags_IE8_OPACITY_FIX = X_UA[ 'IE8' ] && X_UA[ 'ActiveX' ] ? 2 << 25 : 0,
43+ X_NodeFlags_IE8_OPACITY_FIX = 0,//X_UA[ 'IE8' ] && X_UA[ 'ActiveX' ] ? 2 << 25 : 0,
44+ X_NodeFlags_IE_FILTER_FIX_AFTER = X_UA[ 'ActiveX' ] && 2 << 26,
4445
4546 // http://modernizr.com/downloads/modernizr.js
4647 // Thanks to Erik Dahlstrom
47- X_NodeFlags_IS_SVG = document.createElementNS && document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' )[ 'createSVGRect' ] ? 2 << 26 : 0,
48+ X_NodeFlags_IS_SVG = document.createElementNS && document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' )[ 'createSVGRect' ] ? 2 << 27 : 0,
4849 X_NodeFlags_IS_VML =
4950 ( function(){
5051 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,
6566 document.getElementById( 'vmltest2' ).removeNode( true );
6667 case 1 :
6768 document.getElementById( 'vmltest1' ).removeNode( true );
68- return 2 << 27;
69+ return 2 << 28;
6970 };
7071 return 0;
7172 })(),
72-
73- X_NodeFlags_SYSTEM_NODE = 2 << 28,
7473
7574 X_Node_BITMASK_RESET_STYLE = ( ( 2 << 29 ) - 1 + ( 2 << 29 ) ) ^ (
7675 X_NodeFlags_STYLE_IS_DISPLAY_NONE |
--- 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 ){
277277 };
278278
279279 if( filterFix ){
280- v = X_Node_CSS_objToIEFilterText( that, filterFix, css );
280+ v = X_Node_CSS_objToIEFilterText( that, filterFix /* , css */ );
281281 if( v ){
282- css[ ++n ] = 'filter:' + v;
282+ css[ ++n /* css.length */ ] = 'filter:' + v;
283283 };
284284 skipFilter = skipFilter && v;
285285 } else {
@@ -303,10 +303,11 @@ var
303303 X_Node_CSS_FILTER_FIX_PROPS =
304304 X_UA[ 'ActiveX' ] && X_UA[ 'IE' ] < 9 ?
305305 {
306- 'opacity' : 2,
307- 'boxShadow' : 3,
308- 'textShadow' : 4,
309- 'transform' : 5
306+ 'opacity' : 2,
307+ 'boxShadow' : 3,
308+ 'textShadow' : 4,
309+ 'transform' : 5,
310+ 'dxtransform' : 7 // X.NodeAnime で使用
310311 } :
311312 X_UA[ 'ActiveX' ] && X_UA[ 'IE9' ] ? // == 9
312313 {
@@ -317,14 +318,13 @@ X_Node_CSS_FILTER_FIX_PROPS =
317318 function X_Node_CSS_objToIEFilterText( that, opt_css, opt_cssList ){
318319 var obj = opt_css || that[ '_css' ],
319320 test = X_Node_CSS_FILTER_FIX_PROPS,
320- css = {},
321321 filters = [],
322322 n = -1,
323323 p, id, v, num, ary, params, i, l, dir,
324324 afterUpdate, impossible;
325325
326326 for( p in obj ){
327- if( X_EMPTY_OBJECT[ p ] ) continue;
327+ //if( X_EMPTY_OBJECT[ p ] ) continue;
328328
329329 if( !( id = test[ p ] ) ) continue;
330330 v = obj[ p ];
@@ -403,25 +403,131 @@ function X_Node_CSS_objToIEFilterText( that, opt_css, opt_cssList ){
403403 X_ViewPort[ 'listenOnce' ]( X_EVENT_AFTER_UPDATE, that, X_Node_CSS_onAfterUpdateForIEFilterFix );
404404 break;
405405 };
406- dir = Math.atan2( params[ 1 ] + params[ 3 ], params[ 0 ] + params[ 3 ] ) * 180 / Math.PI + 90;
407- dir += dir < 0 ? 360 : 0;
406+ dir = X_Node_CSS_ieMathRangeFix( Math.atan2( params[ 1 ] + params[ 3 ], params[ 0 ] + params[ 3 ] ) * 180 / Math.PI + 90 );
408407 filters[ ++n ] = 'shadow(color=' + color + ',strength=' + params[ 3 ] + ',direction=' + ( dir | 0 ) + ')';
409408 break;
410409 case 4 : //'textShadow' :
411410 //text-shadow: 5px 5px 2px blue; 水平方向の距離 垂直方向の距離 影のぼかし半径 影の色 none
412411 //glow(Color=yellow,Strength=10);
413- //どうやらCSSのbackgroundプロパティと同時に使えないようです。 s
412+ //どうやらCSSのbackgroundプロパティと同時に使えないようです。
414413 break;
415414 case 6 : //'backgroundImage' :
416415 //
417-
416+ break;
417+
418418 case 5 : // transform scale, matrix
419-
419+ break;
420+ case 7 : // dxtransform
421+ that[ '_flags' ] |= X_NodeFlags_IE_FILTER_FIX_AFTER;
422+ break;
420423 };
421424 };
422425 return filters.join( ' ' );
423426 };
424427
428+
429+ //0 ～ 360の範囲に収める.
430+ function X_Node_CSS_ieMathRangeFix( a ){
431+ a %= 360;
432+ return a < 0 ? 360 + a : a;
433+ };
434+
435+/*
436+ * http://p2b.jp/200912-CSS3-Transform-for-IE8
437+ * http://rtilabs.rti-giken.jp/files/2011_09_16/rotate.html
438+ */
439+ function X_Node_CSS_IETransform( elm, params ){
440+ var PI_180 = Math.PI / 180,
441+
442+ rotate = X_Node_CSS_ieMathRangeFix( params[ 2 ] ),//回転
443+ radian = rotate * PI_180,
444+ cosX = Math.cos( radian ),
445+ sinY = Math.sin( radian ),
446+
447+ skewX = X_Node_CSS_ieMathRangeFix( params[ 3 ] ), //skew
448+ skewY = X_Node_CSS_ieMathRangeFix( params[ 4 ] );
449+
450+ _skX = Math.tan( skewX * PI_180 ),
451+ _skY = Math.tan( skewY * PI_180 ),
452+
453+ scaleX = params[ 5 ], //拡大
454+ scaleY = params[ 6 ],
455+
456+ m11 = cosX * scaleX,
457+ m12 = ( -sinY + _skX ) * scaleX,
458+ m21 = ( sinY + _skY ) * scaleY,
459+ m22 = cosX * scaleY,
460+
461+ //absolute時には軸を補正してあげないとだめだ。
462+ //ブラウザとして軸がずれている。
463+ //計算式元ネタ http://p2b.jp/200912-CSS3-Transform-for-IE8
464+
465+ //offset*系のサイズは回転によって生じたゆがみも考慮されるらしい。
466+
467+ //拡大縮小も同じ.
468+ //this.get(0).style.width や height には拡縮の影響を受けない元の数字が入っている
469+ ow = elm.offsetWidth,
470+ oh = elm.offsetHeight,
471+
472+ absCosX = Math.abs( cosX ),
473+ absSinY = Math.abs( sinY ),
474+
475+ //回転の補正
476+ dx = ( ow - ( ow * absCosX + oh * absSinY ) ) / 2
477+ //skewの補正(rotate しながらskew すると補正がおかしくなります。 これがわからない)
478+ - ow / 2 * _skX
479+ //拡大の補正
480+ - ( ( ow * scaleX - ow ) / 2 | 0 )
481+ // x
482+ + params[ 0 ],
483+ dy = ( oh - ( ow * absSinY + oh * absCosX ) ) / 2
484+ //skewの補正(
485+ - oh / 2 * _skY
486+ //拡大の補正
487+ - ( ( oh * scaleY - oh ) / 2 | 0 )
488+ // y
489+ + params[ 1 ];
490+
491+ //console.log( ow + ' ' + oh )
492+ elm.style.left = dx + 'px';
493+ elm.style.top = dy + 'px';
494+
495+ //フィルターで回転と拡大縮小を加えます。
496+ return 'progid:DXImageTransform.Microsoft.Matrix(' +
497+ // 'Dx=' + dx +
498+ //',Dy=' + dy +
499+ 'M11=' + m11 +
500+ ',M12=' + m12 +
501+ ',M21=' + m21 +
502+ ',M22=' + m22 +
503+ ',FilterType="bilinear",sizingMethod="auto expand")';
504+ };
505+
506+function X_Node_CSS_onAfterUpdateIEFilterFix( that ){
507+ var PI_180 = Math.PI / 180,
508+ test = X_Node_CSS_FILTER_FIX_PROPS,
509+ css = that[ '_css' ],
510+ elm = that[ '_rawObject' ],
511+ filter = elm.style.filter || '',
512+ origin = filter,
513+ p, v, plus;
514+
515+ for( p in css ){
516+ if( !( id = test[ p ] ) ) continue;
517+ plus = 0;
518+ switch( id ){
519+ case 7 : // dxtransform
520+ plus = X_Node_CSS_IETransform( elm, css[ p ] );
521+ break;
522+ default :
523+ continue;
524+ };
525+ if( plus ) filter += ( filter ? ' ' : '' ) + plus;
526+ };
527+ if( filter !== origin ) elm.style.filter = filter;
528+};
529+
530+
425531 function X_Node_CSS_onAfterUpdateForIEFilterFix(){
426532 if( this[ '_flags' ] & X_NodeFlags_IN_TREE ){ // 要素があり、要素がツリーに属している
427533 this[ '_flags' ] |= X_NodeFlags_DIRTY_IE_FILTER;
@@ -675,7 +781,7 @@ function X_Node_cssText( v ){
675781 };
676782
677783 /*
678- * ここでは HTMLElement のチ1ェックは行わない！
784+ * ここでは HTMLElement のチ1ェックは行わない！ <- 行う！
679785 * TODO
680786 * body に css attr がセットされた場合には X_ViewPort_baseFontSize をクリア
681787 * class, id, attr(<font size><basefont>) の変更があった場合は、変更の適用の後、charSize を取得
@@ -689,12 +795,13 @@ X_Node_CSS_getCharSize =
689795 X_Node_updateTimerID && X_Node_startUpdate();
690796 if( that === X_Node_body && X_ViewPort_baseFontSize ) return X_ViewPort_baseFontSize;
691797 if( that[ '_fontSize' ] ) return that[ '_fontSize' ];
692- return that[ '_fontSize' ] = parseFloat( X_Node_CSS_getComputedStyle( that[ '_rawObject' ], null ).fontSize );
798+ return that[ '_fontSize' ] = that[ '_rawObject' ] ? parseFloat( X_Node_CSS_getComputedStyle( that[ '_rawObject' ], null ).fontSize ) : 0;
693799 }) :
694800
695801 5 <= X_UA[ 'IE' ] ?
696802 (function( that ){
697803 var font, vu, v, u, _v;
804+
698805 X_Node_updateTimerID && X_Node_startUpdate();
699806 if( that === X_Node_body && X_ViewPort_baseFontSize ) return X_ViewPort_baseFontSize;
700807 if( that[ '_fontSize' ] ) return that[ '_fontSize' ];
@@ -740,10 +847,11 @@ X_Node_CSS_getCharSize =
740847 X_UA_DOM.IE4 ?
741848 (function( that ){
742849 var font, vu, v, u, _v;
850+
743851 X_Node_updateTimerID && X_Node_startUpdate();
744852 if( that === X_Node_body && X_ViewPort_baseFontSize ) return X_ViewPort_baseFontSize;
745853 if( that[ '_fontSize' ] ) return that[ '_fontSize' ];
746-
854+
747855 if( that[ '_css' ] && ( font = that[ '_css' ].fontSize ) ){
748856 vu = X_Node_CSS__splitValueAndUnit( font );
749857 v = vu[ 0 ];
@@ -755,7 +863,7 @@ X_Node_CSS_getCharSize =
755863 if( _v = X_Node_CSS__UNIT_RATIO[ u ] ) return that[ '_fontSize' ] = v / _v;
756864 };
757865 } else {
758- // 要素を生成して測定!
866+ // TODO 要素を生成して測定! ではなくて elm.style.fontSize が使えそう
759867 ( that[ '_rawObject' ] || X_Node__ie4getRawNode( that ) ).insertAdjacentHTML( 'BeforeEnd', '<div id="ie4charsize" style="position:absolute;top:0;left:0;visivility:hidden;line-height:1;height:1em;">X</div>' );
760868 elm = document.all[ 'ie4charsize' ];
761869 v = elm.offsetHeight;
--- 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 = [],
66 X_NodeAnime_needsDetection = false,
77
88 X_NodeAnime_hasTransform = !!X_Node_CSS_VENDER_PREFIX[ 'transform' ],
9+
10+ X_NodeAnime_hasDXTransform = 5.5 <= X_UA[ 'IE' ] && X_UA[ 'IE' ] < 9 && X_UA[ 'ActiveX' ],
11+
912 /* Opera mobile で translateZ(0) が有効だと XY が 0 0 になる */
1013 /* GPUレイヤーにいる間に要素のコンテンツを変更をすると transitionend が動かなくなるっぽい Mac safari と firefox */
1114 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 = [],
2629 */
2730
2831 var X_NODE_ANIME_RESET = 1,
29- X_NODE_ANIME_STAY_GPU = 2;
32+ X_NODE_ANIME_STAY_GPU = 2,
33+
34+ X_NodeAnime_DEFAULT = {
35+ x : X_NodeAnime_hasTransform ? 0 : NaN,
36+ y : X_NodeAnime_hasTransform ? 0 : NaN,
37+ toX : X_NodeAnime_hasTransform ? 0 : NaN,
38+ toY : X_NodeAnime_hasTransform ? 0 : NaN,
39+ fromX : X_NodeAnime_hasTransform ? 0 : NaN,
40+ fromY : X_NodeAnime_hasTransform ? 0 : NaN,
41+ rotate : NaN, fromRotate : NaN, toRotate : NaN,
42+ skewX : NaN, fromSkewX : NaN, toSkewX : NaN,
43+ skewY : NaN, fromSkewY : NaN, toSkewY : NaN,
44+ scaleX : 1, fromScaleX : 1, toScaleX : 1,
45+ scaleY : 1, fromScaleY : 1, toScaleY : 1,
46+ alpha : NaN,
47+ scrollX : NaN, fromScrollX : NaN, toScrollX : NaN,
48+ scrollY : NaN, fromScrollY : NaN, toScrollY : NaN,
49+ doScroll : false//,
50+ //duration : 0
51+ //phase, lazyRelease, easing, follower, releaseNow, inited, progress doScroll, fallbackKind
52+ // fromTime, toTime
53+ };
3054
3155 /**
32- * GPU サポートの効いたアニメーションの設定 X.Event.ANIME_START, X.Event.ANIME_END, X.Event.GPU_RELEASED
56+ * GPU サポートの効いたアニメーションの設定
57+ * <a href="https://outcloud.blogspot.jp/2015/12/pettanR-Node-Anime.html">ぺったんRフレームワークのアニメーションメソッド</a>
3358 * @alias Node.prototype.animate
34- * @param {object} start { x : 0, y : 0, opacity : 1 }
35- * @param {object} dest { x : 100, y : 100, opacity : 0 }
36- * @param {number=} duartion アニメーション時間 ms
37- * @param {string=} easing 'quadratic', 'circular', 'back', 'bounce', 'elastic'
38- * @param {number=} wait GPU レイヤーの遅延解除 ms
39- * @param {number=} option フォールバックについて
59+ * @param {object} obj
4060 * @return {Node} メソッドチェーン
61+ * @example
62+ * xnode.animate{
63+ * from : {
64+ * x : num,
65+ * y : num,
66+ * opacity : 0.0, //～1.0
67+ * rotate : deg,
68+ * skew : deg,
69+ * skewX : deg,
70+ * skewY : deg,
71+ * scale : num,
72+ * scaleX : num,
73+ * scaleY : num,
74+ * scrollX : num,
75+ * scrollY : num
76+ * },
77+ * to : {}, // from と同じ
78+ * duration : ms,
79+ * lazyRelease : ms,
80+ * easing : 'quadratic', // function, 'circular', 'back', 'bounce', 'elastic'
81+ * fallback : bitFlag // 16:DXTransform, 8:css-p, 4:zoom(s) > 2:fontSize(s) > 1:width&height(vh,s)
82+ * ** tree にいなくてもアニメーションを行いイベントを発生
83+ * ** SVG transfrom
84+ * fallbackWidth, fallbackHeight, transformOrigin( 0.5, 0.5 )
85+ * }
4186 */
42-function X_Node_animate( start, dest, duration, easing, lazyRelease, option ){
43- var list = X_NodeAnime_QUEUE,
44- obj = this[ '_anime' ];
87+function X_Node_animate( obj ){
88+ var list = X_NodeAnime_QUEUE,
89+ from = obj[ 'from' ] || {},
90+ dest = obj[ 'to' ] || {},
91+ duration = obj[ 'duration' ],
92+ lazyRelease = obj[ 'lazyRelease' ],
93+ easing = obj[ 'easing' ],
94+ fallback = obj[ 'fallback' ],
95+ a, sameRate;
96+
97+ obj = this[ '_anime' ];
4598
4699 if( !( this[ '_flags' ] & X_NodeFlags_IN_TREE ) ){
47100 alert( '@animate 要素はツリーに追加されていません!' );
@@ -50,13 +103,9 @@ function X_Node_animate( start, dest, duration, easing, lazyRelease, option ){
50103 };
51104
52105 if( !obj ){
53- this[ '_anime' ] = obj = {
54- x : X_NodeAnime_hasTransform ? 0 : NaN,
55- y : X_NodeAnime_hasTransform ? 0 : NaN,
56- a : 1,
57- duration : 0
58- //phase, lazyRelease, easing, follower, releaseNow
59- };
106+ this[ '_anime' ] = obj = X_Object_copy( X_NodeAnime_DEFAULT );
107+ a = this[ '_css' ] && parseFloat( this[ '_css' ].opacity );
108+ if( 0 <= a ) obj.alpha = a;
60109 };
61110
62111 if( 0 <= duration && X_Type_isFinite( duration ) ){
@@ -66,17 +115,72 @@ function X_Node_animate( start, dest, duration, easing, lazyRelease, option ){
66115 obj.easing = X_Type_isFunction( easing ) ? easing : X_NodeAnime_ease[ easing ] || X_NodeAnime_ease[ 'circular' ];
67116
68117 // form :
69- obj.startX = obj.x = X_NodeAnime_getFinite( start[ 'x' ], obj.x );
70- obj.startY = obj.y = X_NodeAnime_getFinite( start[ 'y' ], obj.y );
71- obj.startA = obj.a = X_NodeAnime_getFinite( start[ 'opacity' ], obj.a );
72-
118+ obj.fromX = obj.x = X_NodeAnime_getFinite( from[ 'x' ], obj.x );
119+ obj.fromY = obj.y = X_NodeAnime_getFinite( from[ 'y' ], obj.y );
120+ obj.fromRotate = obj.rotate = X_NodeAnime_getFinite( from[ 'rotate' ], obj.rotate );
121+ obj.fromSkewX = obj.skewX = X_NodeAnime_getFinite( from[ 'skewX' ], from[ 'skew' ], obj.skewX );
122+ obj.fromSkewY = obj.skewY = X_NodeAnime_getFinite( from[ 'skewY' ], from[ 'skew' ], obj.skewY );
123+ obj.fromScaleX = obj.scaleX = X_NodeAnime_getFinite( from[ 'scaleX' ], from[ 'scale' ], obj.scaleX );
124+ obj.fromScaleY = obj.scaleY = X_NodeAnime_getFinite( from[ 'scaleY' ], from[ 'scale' ], obj.scaleY );
125+ obj.fromAlpha = obj.alpha = X_NodeAnime_getFinite( from[ 'opacity' ], obj.alpha );
126+ obj.fromScrollX = obj.scrollX = X_NodeAnime_getFinite( from[ 'scrollX' ], obj.scrollX );
127+ obj.fromScrollY = obj.scrollY = X_NodeAnime_getFinite( from[ 'scrollY' ], obj.scrollY );
73128 // to :
74- obj.destX = X_NodeAnime_getFinite( dest[ 'x' ], obj.x );
75- obj.destY = X_NodeAnime_getFinite( dest[ 'y' ], obj.y );
76- obj.destA = X_NodeAnime_getFinite( dest[ 'opacity' ], obj.a );
129+ obj.toX = X_NodeAnime_getFinite( dest[ 'x' ], obj.x );
130+ obj.toY = X_NodeAnime_getFinite( dest[ 'y' ], obj.y );
131+ obj.toRotate = X_NodeAnime_getFinite( dest[ 'rotate' ], obj.rotate );
132+ obj.toSkewX = X_NodeAnime_getFinite( dest[ 'skewX' ], dest[ 'skew' ], obj.skewX );
133+ obj.toSkewY = X_NodeAnime_getFinite( dest[ 'skewY' ], dest[ 'skew' ], obj.skewY );
134+ obj.toScaleX = X_NodeAnime_getFinite( dest[ 'scaleX' ], dest[ 'scale' ], obj.scaleX );
135+ obj.toScaleY = X_NodeAnime_getFinite( dest[ 'scaleY' ], dest[ 'scale' ], obj.scaleY );
136+ obj.toAlpha = X_NodeAnime_getFinite( dest[ 'opacity' ], obj.alpha );
137+ obj.toScrollX = X_NodeAnime_getFinite( dest[ 'scrollX' ], obj.scrollX );
138+ obj.toScrollY = X_NodeAnime_getFinite( dest[ 'scrollY' ], obj.scrollY );
139+
140+ if( obj.toRotate && obj.rotate !== obj.rotate ) obj.rotate = 0;
141+ if( obj.toSkewX && obj.skewX !== obj.skewX ) obj.skewX = 0;
142+ if( obj.toSkewY && obj.skewY !== obj.skewY ) obj.skewY = 0;
77143
78144 obj.lazyRelease = 0 <= lazyRelease && X_Type_isFinite( lazyRelease ) ? lazyRelease : 0;
79- obj.inited = false;
145+ obj.inited = false;
146+ obj.doScroll = 0 <= obj.toScrollX || 0 <= obj.toScrollY;
147+ obj.transform = false;
148+ obj.fallback = 0;
149+
150+ if( obj.fromX === obj.fromX || obj.fromY === obj.fromY ){
151+ obj.transform = !!X_NodeAnime_hasTransform;
152+ };
153+
154+ // scale
155+ if( obj.toScaleX !== 1 && obj.fromScaleX !== 1 && obj.toScaleY !== 1 && obj.fromScaleY !== 1 ){
156+ sameRate = obj.fromScaleX === obj.fromScaleY && obj.toScaleX === obj.toScaleY;
157+
158+ if( X_NodeAnime_hasTransform ){
159+ obj.transform = true;
160+ } else
161+ if( X_NodeAnime_hasDXTransform && ( fallback & 16 ) ){ // DX Transform
162+ obj.fallback = 16;
163+ } else
164+ if( ( fallback & 4 ) && sameRate ){ // zoom
165+ obj.fallback = 4;
166+ } else
167+ if( ( fallback & 2 ) && sameRate ){ // fontSize
168+ obj.fallback = 2;
169+ } else
170+ if( fallback & 1 ){ // width & height
171+ obj.fallback = 1;
172+ };
173+ };
174+
175+ // rotate, skew
176+ if( obj.toRotate === obj.toRotate || obj.toSkewX === obj.toSkewX || obj.toSkewY === obj.toSkewY ){
177+ if( X_NodeAnime_hasTransform ){
178+ obj.transform = true;
179+ } else
180+ if( X_NodeAnime_hasDXTransform && ( fallback & 16 ) ){ // DX Transform
181+ obj.fallback = 16;
182+ };
183+ };
80184
81185 if( !obj.duration && 6 <= obj.phase ){
82186 this[ 'stop' ](); // 現在値で停止
@@ -121,9 +225,10 @@ function X_Node_animate( start, dest, duration, easing, lazyRelease, option ){
121225 return this;
122226 };
123227
124-function X_NodeAnime_getFinite( a, b ){
228+function X_NodeAnime_getFinite( a, b, c ){
125229 if( a || a === 0 ) return a;
126230 if( b || b === 0 ) return b;
231+ if( c || c === 0 ) return c;
127232 return NaN;
128233 };
129234
@@ -139,7 +244,7 @@ function X_NodeAnime_getFinite( a, b ){
139244 function X_Node_stop( option ){
140245 var obj = this[ '_anime' ],
141246 list = X_NodeAnime_QUEUE,
142- i, rm, j, xnode, _obj;
247+ rm;
143248
144249 if( !obj || !obj.phase ) return this;
145250
@@ -154,19 +259,25 @@ function X_Node_stop( option ){
154259 case 4 : // 強制停止(GPU転送予約)
155260 case 7 : // アニメーション中
156261 if( option & X_NODE_ANIME_RESET ){
157- obj.startX = obj.startY = obj.destX = obj.destY = obj.x = obj.y = X_NodeAnime_hasTransform ? 0 : NaN;
158- obj.startA = obj.destA = obj.a = 1;
262+ X_Object_override( obj, X_NodeAnime_DEFAULT );
159263 }; // TODO 終了値で停止も,,,
160264
161265 // obj.canceled = true;
162266
163267 if( rm ) break; // 1,2,3,6 の場合ここまで
164268
165- obj.destX = obj.x;
166- obj.destY = obj.y;
167- obj.destA = obj.a;
168-
169- obj.phase = 4; // 強制解除
269+ obj.toX = obj.x;
270+ obj.toY = obj.y;
271+ obj.toRotate = obj.rotate;
272+ obj.toSkewX = obj.skewX;
273+ obj.toSkewY = obj.skewY;
274+ obj.toScaleX = obj.scaleX;
275+ obj.toScaleY = obj.scaleY;
276+ obj.toAlpha = obj.alpha;
277+ obj.toScrollX = obj.scrollX;
278+ obj.toScrollY = obj.scrollY;
279+
280+ obj.phase = 4; // 強制解除
170281 X_NodeAnime_needsDetection = true;
171282
172283 case 5 : // GPU解除待ち
@@ -199,7 +310,7 @@ function X_NodeAnime_stopNow( xnode ){
199310 // この部分 startUpdate へ?
200311 if( flags & ~X_Node_BitMask_RESET_GPU ){
201312 skipUpdate = flags & X_NodeFlags_GPU_RESERVED;
202- ( flags & X_NodeFlags_GPU_RELEASE_RESERVED ) || X_NodeAnime_updatePosition( xnode, obj.x, obj.y, obj.a, false );
313+ ( flags & X_NodeFlags_GPU_RELEASE_RESERVED ) || X_NodeAnime_updatePosition( xnode, obj, 0.5, false );
203314 skipUpdate || ( xnode[ '_rawObject' ].style.cssText = X_Node_CSS_objToCssText( xnode ) );
204315 xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU;
205316 };
@@ -275,21 +386,29 @@ function X_NodeAnime_updateAnimations( e ){
275386
276387 switch( obj.phase ){
277388 case 7 : // アニメーション中
278- if( now < obj.destTime ){
279- easing = obj.progress = obj.easing.fn( ( now - obj.startTime ) / obj.duration );
280- X_NodeAnime_updatePosition( xnode,
281- obj.x = ( obj.destX - obj.startX ) * easing + obj.startX,
282- obj.y = ( obj.destY - obj.startY ) * easing + obj.startY,
283- obj.a = ( obj.destA - obj.startA ) * easing + obj.startA, true );
389+ if( now < obj.toTime ){
390+ obj.progress = ( now - obj.fromTime ) / obj.duration;
391+ easing = obj.easing( obj.progress );
392+ obj.x = ( obj.toX - obj.fromX ) * easing + obj.fromX;
393+ obj.y = ( obj.toY - obj.fromY ) * easing + obj.fromY;
394+ obj.rotate = ( obj.toRotate - obj.fromRotate ) * easing + obj.fromRotate;
395+ obj.skewX = ( obj.toSkewX - obj.fromSkewX ) * easing + obj.fromSkewX;
396+ obj.skewY = ( obj.toSkewY - obj.fromSkewY ) * easing + obj.fromSkewY;
397+ obj.scaleX = ( obj.toScaleX - obj.fromScaleX ) * easing + obj.fromScaleX;
398+ obj.scaleY = ( obj.toScaleY - obj.fromScaleY ) * easing + obj.fromScaleY;
399+ obj.alpha = ( obj.toAlpha - obj.fromAlpha ) * easing + obj.fromAlpha;
400+ obj.scrollX = ( obj.toScrollX - obj.fromScrollX ) * easing + obj.fromScrollX;
401+ obj.scrollY = ( obj.toScrollY - obj.fromScrollY ) * easing + obj.fromScrollY;
402+ X_NodeAnime_updatePosition( xnode, obj, obj.progress, true );
284403 c = true;
285404 break;
286405 };
287406 // アニメーション終了
288407 xnode[ 'asyncDispatch' ]( X_EVENT_ANIME_END );
289408
290- case 4 : // 強制停止(GPU転送予約)
409+ case 4 : // 強制停止(GPU転送予約)または transform や opacity の値のみ設定
291410 lazy = !obj.follower && !obj.releaseNow && obj.lazyRelease;
292- X_NodeAnime_updatePosition( xnode, obj.destX, obj.destY, obj.destA, !!lazy );
411+ X_NodeAnime_updatePosition( xnode, obj, 1, !!lazy );
293412
294413 //if( obj.canceled ){
295414 // xnode[ 'asyncDispatch' ]( X_EVENT_CANCELED );
@@ -299,7 +418,7 @@ function X_NodeAnime_updateAnimations( e ){
299418
300419 if( lazy ){
301420 console.log( 'アニメーション終了(' + obj.phase + ') -> GPU 解除待機 ' + lazy );
302- obj.releaseTime = now + lazy;
421+ obj.toTime = now + lazy;
303422 obj.phase = 5; // GPU解除待ち
304423 c = true;
305424 } else {
@@ -309,19 +428,19 @@ function X_NodeAnime_updateAnimations( e ){
309428 break;
310429
311430 case 6 : // アニメーション開始可能
312- obj.startTime = now;
313- obj.destTime = now + obj.duration;
314- obj.phase = 7; // アニメーション中
315- obj.progress = 0;
431+ obj.fromTime = now;
432+ obj.toTime = now + obj.duration;
433+ obj.phase = 7; // アニメーション中
434+ obj.progress = 0;
316435 xnode[ 'asyncDispatch' ]( X_EVENT_ANIME_START );
317436 c = true;
318437 //obj.canceled = false;
319- ( obj.inited && !X_NodeAnime_translateZ ) || X_NodeAnime_updatePosition( xnode, obj.startX, obj.startY, obj.startA, true );
438+ ( !obj.inited || X_NodeAnime_translateZ ) && X_NodeAnime_updatePosition( xnode, obj, 0, true );
320439 break;
321440
322441 case 5 : // GPU解除待ち
323- if( obj.releaseTime <= now || obj.follower || obj.releaseNow ){
324- X_NodeAnime_translateZ && X_NodeAnime_updatePosition( xnode, obj.destX, obj.destY, obj.destA, false );
442+ if( obj.toTime <= now || obj.follower || obj.releaseNow ){
443+ X_NodeAnime_translateZ && X_NodeAnime_updatePosition( xnode, obj, 1, false );
325444 rm = true;
326445 } else {
327446 c = true;
@@ -330,8 +449,8 @@ function X_NodeAnime_updateAnimations( e ){
330449
331450 default : // 2 or 3
332451 // 待機状態でも親要素が GPU 化していなければ、開始値をセットすることは可能
333- obj.inited || X_NodeAnime_updatePosition( xnode, obj.startX, obj.startY, obj.startA, false );
334- obj.inited = false;
452+ obj.inited || X_NodeAnime_updatePosition( xnode, obj, 0, false );
453+ obj.inited = true;
335454 break;
336455 };
337456
@@ -378,65 +497,124 @@ function X_NodeAnime_sortAnimationNode( xnode1, xnode2 ){
378497 return a ? -1 : 1;
379498 };
380499
381-function X_NodeAnime_updatePosition( xnode, x, y, opacity, useGPU ){
382- //console.log( 'updatePosition x:' + x + ' gpu:' + !!useGPU );
383- if( X_NodeAnime_hasTransform ){
384- xnode[ 'css' ]({
385- transform : 'translate(' + ( x | 0 ) + 'px,' + ( y | 0 ) + 'px)' + ( useGPU ? X_NodeAnime_translateZ : '' ),
386- opacity : opacity
387- });
500+function X_NodeAnime_updatePosition( xnode, obj, ratio, useGPU ){
501+ var str = '',
502+ x, y, rotate, skewX, skewY, scaleX, scaleY, alpha,
503+ scrollX, scrollY;
504+
505+ if( ratio === 1 ){
506+ x = obj.x = obj.toX;
507+ y = obj.y = obj.toY;
508+ rotate = X_Node_CSS_ieMathRangeFix( obj.rotate = obj.toRotate );
509+ skewX = X_Node_CSS_ieMathRangeFix( obj.skewX = obj.toSkewX );
510+ skewY = X_Node_CSS_ieMathRangeFix( obj.skewY = obj.toSkewY );
511+ scaleX = obj.scaleX = obj.toScaleX;
512+ scaleY = obj.scaleY = obj.toScaleY;
513+ alpha = obj.alpha = obj.toAlpha;
388514 } else {
389- x === x && xnode[ 'css' ]( 'left', ( x | 0 ) + 'px' );
390- y === y && xnode[ 'css' ]( 'top', ( y | 0 ) + 'px' );
391- opacity === opacity && xnode[ 'css' ]( 'opacity', opacity );
515+ x = obj.x;
516+ y = obj.y;
517+ rotate = X_Node_CSS_ieMathRangeFix( obj.rotate );
518+ skewX = X_Node_CSS_ieMathRangeFix( obj.skewX );
519+ skewY = X_Node_CSS_ieMathRangeFix( obj.skewY );
520+ scaleX = obj.scaleX;
521+ scaleY = obj.scaleY;
522+ alpha = obj.alpha;
392523 };
393-
394- if( X_NodeAnime_translateZ ){
395- if( useGPU ){
396- if( xnode[ '_flags' ] & X_NodeFlags_GPU_RELEASE_RESERVED ){
397- xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU;
398- xnode[ '_flags' ] |= X_NodeFlags_GPU_NOW;
399- } else
400- if( !( xnode[ '_flags' ] & X_NodeFlags_GPU_NOW ) ){
401- xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU;
402- xnode[ '_flags' ] |= X_NodeFlags_GPU_RESERVED;
403- };
404- } else {
405- if( xnode[ '_flags' ] & X_NodeFlags_GPU_NOW ){
406- xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU;
407- xnode[ '_flags' ] |= X_NodeFlags_GPU_RELEASE_RESERVED;
408- } else
409- if( xnode[ '_flags' ] & X_NodeFlags_GPU_RESERVED ){
410- xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU;
411- };
524+
525+ //console.log( 'updatePosition x:' + x + ' gpu:' + !!useGPU );
526+ if( obj.transform ){
527+ if( x === x || y === y ) str += ' translate(' + ( x | 0 ) + 'px,' + ( y | 0 ) + 'px)';
528+ if( rotate < 0 || 0 < rotate ) str += ' rotate(' + rotate + 'deg)'; // opera は　rad?
529+ if( skewX < 0 || 0 < skewX ) str += ' skewX(' + skewX + 'deg)';
530+ if( skewY < 0 || 0 < skewY ) str += ' skewY(' + skewY + 'deg)';
531+ if( scaleX < 1 || 1 < scaleX ) str += ' scaleX(' + scaleX + ')';
532+ if( scaleY < 1 || 1 < scaleY ) str += ' scaleY(' + scaleY + ')';
533+ xnode[ 'css' ]( 'transform', ( str ? str.substr( 1 ) : '' ) + ( useGPU ? X_NodeAnime_translateZ : '' ) );
534+
535+ if( X_NodeAnime_translateZ ){
536+ if( useGPU ){
537+ if( xnode[ '_flags' ] & X_NodeFlags_GPU_RELEASE_RESERVED ){
538+ xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU;
539+ xnode[ '_flags' ] |= X_NodeFlags_GPU_NOW;
540+ } else
541+ if( !( xnode[ '_flags' ] & X_NodeFlags_GPU_NOW ) ){
542+ xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU;
543+ xnode[ '_flags' ] |= X_NodeFlags_GPU_RESERVED;
544+ };
545+ } else {
546+ if( xnode[ '_flags' ] & X_NodeFlags_GPU_NOW ){
547+ xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU;
548+ xnode[ '_flags' ] |= X_NodeFlags_GPU_RELEASE_RESERVED;
549+ } else
550+ if( xnode[ '_flags' ] & X_NodeFlags_GPU_RESERVED ){
551+ xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU;
552+ };
553+ };
412554 };
555+ } else
556+ if( obj.fallback === 16 ){
557+ xnode[ 'css' ]( 'dxtransform', [ x || 0, y || 0, rotate || 0, skewX || 0, skewY || 0, scaleX, scaleY ] );
558+ } else {
559+ x === x && xnode[ 'css' ]( 'left', ( x | 0 ) + 'px' );
560+ y === y && xnode[ 'css' ]( 'top', ( y | 0 ) + 'px' );
561+
562+ switch( obj.fallback ){
563+ case 4 :
564+ xnode[ 'css' ]( 'zoom', scaleX );
565+ break;
566+ case 2 :
567+ xnode[ 'css' ]( 'fontSize', scaleX + 'em' );
568+ break;
569+ case 1 :
570+
571+ break;
572+ };
413573 };
574+
575+ alpha === alpha && xnode[ 'css' ]( 'opacity', alpha );
414576 };
415577
416578
417579 var
418580 X_NodeAnime_ease = {
419- 'quadratic' : {
581+ 'quadratic' : function (k) {
582+ return k * ( 2 - k );
583+ /*{
420584 style: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
421585 fn: function (k) {
422586 return k * ( 2 - k );
423- }
587+ }*/
424588 },
425- 'circular' : {
426- 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)
589+ 'circular' : function (k) {
590+ return Math.sqrt( 1 - ( --k * k ) );
591+ /*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)
427592 fn: function (k) {
428593 return Math.sqrt( 1 - ( --k * k ) );
429- }
594+ }*/
430595 },
431- 'back' : {
432- style: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
596+ 'back' : function (k) {
597+ return --k * k * ( 5 * k + 4 ) + 1;
598+ /*style: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
433599 fn: function (k) {
434600 var b = 4;
435601 return ( k = k - 1 ) * k * ( ( b + 1 ) * k + b ) + 1;
436- }
602+ }*/
437603 },
438- 'bounce' : {
439- style: '',
604+ 'bounce' : function (k, X) {
605+ X = 7.5625;
606+ if ( k < ( 1 / 2.75 ) ) {
607+ return X * k * k;
608+ } else
609+ if ( k < ( 2 / 2.75 ) ) {
610+ return X * ( k -= ( 1.5 / 2.75 ) ) * k + 0.75;
611+ } else
612+ if ( k < ( 2.5 / 2.75 ) ) {
613+ return X * ( k -= ( 2.25 / 2.75 ) ) * k + 0.9375;
614+ } else {
615+ return X * ( k -= ( 2.625 / 2.75 ) ) * k + 0.984375;
616+ }
617+ /*style: '',
440618 fn: function (k) {
441619 if ( ( k /= 1 ) < ( 1 / 2.75 ) ) {
442620 return 7.5625 * k * k;
@@ -447,10 +625,11 @@ var
447625 } else {
448626 return 7.5625 * ( k -= ( 2.625 / 2.75 ) ) * k + 0.984375;
449627 }
450- }
628+ }*/
451629 },
452- 'elastic' : {
453- style: '',
630+ 'elastic' : function (k) {
631+ return k === 0 ? 0 : k === 1 ? 1 : ( 0.4 * Math.pow( 2, - 10 * k ) * Math.sin( ( k - 0.055 ) * 28.56 ) + 1 );
632+ /*style: '',
454633 fn: function (k) {
455634 var f = 0.22,
456635 e = 0.4;
@@ -459,6 +638,6 @@ var
459638 if ( k == 1 ) { return 1; }
460639
461640 return ( e * Math.pow( 2, - 10 * k ) * Math.sin( ( k - f / 4 ) * ( 2 * Math.PI ) / f ) + 1 );
462- }
641+ } */
463642 }
464643 };
--- 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... */ ){
12231223 case 'treeIsDirty' :
12241224 return !!X_Node_updateTimerID;
12251225 case 'fontSize' :
1226- return this.parent ? X_Node_CSS_getCharSize( this ) : 0;
1226+ return ( this[ '_flags' ] & X_NodeFlags_IN_TREE ) ? X_Node_CSS_getCharSize( this ) : 0;
12271227 case 'inGPU' :
12281228 return !!( this[ '_flags' ] & ( X_NodeFlags_GPU_NOW | X_NodeFlags_GPU_RELEASE_RESERVED ) );
12291229 case 'isGPUChild' :
@@ -1367,7 +1367,7 @@ function X_Node_reserveUpdate(){
13671367 var X_Node_updateReservedByReleaseGPU = false;
13681368
13691369 function X_Node_startUpdate( time ){
1370- var removal, i, xnodeOrElm;
1370+ var removal, i, xnodeOrElm, xnodesIEFilterFixAfter, xnode;
13711371
13721372 if( !X_Node_updateTimerID || X_ViewPort_readyState < X_EVENT_INIT ){
13731373 return;
@@ -1408,10 +1408,10 @@ function X_Node_startUpdate( time ){
14081408 };
14091409
14101410 if( X_Node_html[ '_flags' ] & X_Node_BitMask_IS_DIRTY ){
1411- X_Node__commitUpdate( X_Node_html, X_Node_html[ '_rawObject' ].parentNode, null, X_Node_html[ '_flags' ], 1 );
1411+ X_Node__commitUpdate( X_Node_html, X_Node_html[ '_rawObject' ].parentNode, null, X_Node_html[ '_flags' ], 1, xnodesIEFilterFixAfter = [] );
14121412 } else {
1413- X_Node__commitUpdate( X_Node_head, X_Node_head[ '_rawObject' ].parentNode, null, X_Node_head[ '_flags' ], 1 );
1414- X_Node__commitUpdate( X_Node_body, X_Node_body[ '_rawObject' ].parentNode, null, X_Node_body[ '_flags' ], 1 );
1413+ X_Node__commitUpdate( X_Node_head, X_Node_head[ '_rawObject' ].parentNode, null, X_Node_head[ '_flags' ], 1, xnodesIEFilterFixAfter = [] );
1414+ X_Node__commitUpdate( X_Node_body, X_Node_body[ '_rawObject' ].parentNode, null, X_Node_body[ '_flags' ], 1, xnodesIEFilterFixAfter = [] );
14151415 };
14161416
14171417 if( X_Node_updateReservedByReleaseGPU ){
@@ -1419,12 +1419,16 @@ function X_Node_startUpdate( time ){
14191419 X_Node_updateReservedByReleaseGPU = false;
14201420 };
14211421
1422- if( time ){
1423- // X.Timer 経由でないと発火しない このイベントでサイズを取ると無限ループに
1424- X_System[ '_listeners' ] && X_System[ '_listeners' ][ X_EVENT_UPDATED ] && X_System[ 'dispatch' ]( X_EVENT_UPDATED );
1425- } else {
1426- X_System[ '_listeners' ] && X_System[ '_listeners' ][ X_EVENT_UPDATED ] && X_System[ 'asyncDispatch' ]( X_EVENT_UPDATED );
1422+ if( X_NodeFlags_IE_FILTER_FIX_AFTER && xnodesIEFilterFixAfter.length ){
1423+ for( i = 0; xnode = xnodesIEFilterFixAfter[ i ]; ++i ){
1424+ xnode[ '_flags' ] &= ~X_NodeFlags_IE_FILTER_FIX_AFTER;
1425+ X_Node_CSS_onAfterUpdateIEFilterFix( xnode );
1426+ };
14271427 };
1428+
1429+ // time を視て X.Timer 経由の場合、即座に発火する。
1430+ // width() 等で強制的にツリーを構築している場合、UPDATE イベントのコールバックで要素を変更しサイズを取ると無限ループになる,これを防ぐため asyncDispatch とする
1431+ X_System[ '_listeners' ] && X_System[ '_listeners' ][ X_EVENT_UPDATED ] && X_System[ time ? 'dispatch' : 'asyncDispatch' ]( X_EVENT_UPDATED );
14281432
14291433 X_ViewPort[ '_listeners' ] && X_ViewPort[ '_listeners' ][ X_EVENT_AFTER_UPDATE ] && X_ViewPort[ 'asyncDispatch' ]( X_EVENT_AFTER_UPDATE );
14301434 };
@@ -1444,9 +1448,9 @@ function X_Node_startUpdate( time ){
14441448 */
14451449 var X_Node__commitUpdate =
14461450 X_UA_DOM.W3C ?
1447- ( function( that, parentElement, nextElement, accumulatedFlags, ie8opacity ){
1451+ ( function( that, parentElement, nextElement, accumulatedFlags, ie8opacity, xnodesIEFilterFixAfter ){
14481452 var elm = that[ '_rawObject' ],
1449- created, xnodes, l, next;
1453+ created, xnodes, l, next, anime, v;
14501454
14511455 // 1. GPU 一切の更新をスキップ
14521456 if( that[ '_flags' ] & X_NodeFlags_GPU_NOW ){
@@ -1474,7 +1478,8 @@ var X_Node__commitUpdate =
14741478 if( that[ '_flags' ] & X_NodeFlags_STYLE_IS_DISPLAY_NONE ){
14751479 if( X_Node_displayNoneFixForIE5 ){
14761480 // filter の効いている要素を含む要素は display:none が無視される。
1477- // filter = '' で削除はできるが、再表示時に filter が消える。 -> filter な要素を削除してしまう。
1481+ // filter = '' で削除はできるが、再表示時に filter が消える。 -> filter な要素を削除してしまう。
1482+ // TODO filters[0].enabled = false なんてどう?
14781483 if( elm && elm.parentNode ){
14791484 X_Node__actualRemove( that );
14801485 };
@@ -1600,10 +1605,14 @@ var X_Node__commitUpdate =
16001605 };
16011606 };
16021607
1608+ if( that[ '_flags' ] & X_NodeFlags_IE_FILTER_FIX_AFTER ){
1609+ xnodesIEFilterFixAfter[ xnodesIEFilterFixAfter.length ] = that;
1610+ };
1611+
16031612 // 10. 子要素の更新。
16041613 if( ( xnodes = that[ '_xnodes' ] ) && ( l = xnodes.length ) ) {
16051614 for( ; l; ){
1606- next = X_Node__commitUpdate( xnodes[ --l ], elm, next, accumulatedFlags, ie8opacity );
1615+ next = X_Node__commitUpdate( xnodes[ --l ], elm, next, accumulatedFlags, ie8opacity, xnodesIEFilterFixAfter );
16071616 };
16081617 };
16091618
@@ -1618,6 +1627,26 @@ var X_Node__commitUpdate =
16181627 };
16191628 };
16201629
1630+ if( ( anime = that[ '_anime' ] ) && 6 <= anime.phase && anime.doScroll ){
1631+ if( anime.phase === 6 ){
1632+ v = anime.fromScrollX;
1633+ if( v === v ){
1634+ elm.scrollLeft = v;
1635+ } else {
1636+ anime.fromScrollX = elm.scrollLeft;
1637+ };
1638+ v = anime.fromScrollY;
1639+ if( v === v ){
1640+ elm.scrollTop = v;
1641+ } else {
1642+ anime.fromScrollY = elm.scrollTop;
1643+ };
1644+ } else {
1645+ elm.scrollLeft = anime.scrollX;
1646+ elm.scrollTop = anime.scrollY;
1647+ };
1648+ };
1649+
16211650 return elm;
16221651 }) :
16231652 X_UA_DOM.IE4 ?
@@ -1647,68 +1676,90 @@ var X_Node__commitUpdate =
16471676 prevElement.insertAdjacentHTML( 'AfterEnd', X_Node__actualCreate( that, false ) ) :
16481677 parentElement.insertAdjacentHTML( 'AfterBegin', X_Node__actualCreate( that, false ) );
16491678 X_Node__afterActualCreate( that );
1650- return that[ '_rawObject' ] || X_Node__ie4getRawNode( that );
1651- };
1652-
1653- accumulatedFlags |= that[ '_flags' ];
1654-
1655- xnodes = that[ '_xnodes' ];
1656- l = xnodes ? xnodes.length : 0;
1657- dirty = !!( that[ '_flags' ] & X_NodeFlags_IE4_DIRTY_CHILDREN );
1658-
1659- /*
1660- * HTML の下に TextNode だけ 。MIX_FIXED　でない場合、削除、追加 を親に通知
1661- * HTML の下に HTML だけ
1662- * HTML の下は MIX -> TextNode, html の削除、変更、追加
1663- * HTML の下は MIX_FIXED -> TextNode を <font> に置き換えてあるのでW3C DON 的に触ることができる
1664- */
1665- if( dirty ){
1666- that[ '_flags' ] &= ~X_NodeFlags_IE4_DIRTY_CHILDREN;
1667- for( i = 0; i < l; ++i ){
1668- if( xnodes[ i ][ '_tag' ] ){
1669- that[ '_flags' ] |= X_NodeFlags_IE4_HAS_ELEMENT;
1670- } else {
1671- that[ '_flags' ] |= X_NodeFlags_IE4_HAS_TEXTNODE;
1679+
1680+ elm = that[ '_rawObject' ] || X_Node__ie4getRawNode( that );
1681+ } else {
1682+ accumulatedFlags |= that[ '_flags' ];
1683+
1684+ xnodes = that[ '_xnodes' ];
1685+ l = xnodes ? xnodes.length : 0;
1686+ dirty = !!( that[ '_flags' ] & X_NodeFlags_IE4_DIRTY_CHILDREN );
1687+
1688+ /*
1689+ * HTML の下に TextNode だけ 。MIX_FIXED　でない場合、削除、追加 を親に通知
1690+ * HTML の下に HTML だけ
1691+ * HTML の下は MIX -> TextNode, html の削除、変更、追加
1692+ * HTML の下は MIX_FIXED -> TextNode を <font> に置き換えてあるのでW3C DON 的に触ることができる
1693+ */
1694+ if( dirty ){
1695+ that[ '_flags' ] &= ~X_NodeFlags_IE4_DIRTY_CHILDREN;
1696+ for( i = 0; i < l; ++i ){
1697+ if( xnodes[ i ][ '_tag' ] ){
1698+ that[ '_flags' ] |= X_NodeFlags_IE4_HAS_ELEMENT;
1699+ } else {
1700+ that[ '_flags' ] |= X_NodeFlags_IE4_HAS_TEXTNODE;
1701+ };
1702+ if( that[ '_flags' ] & X_Node_BitMask_IE4_IS_MIX === X_Node_BitMask_IE4_IS_MIX ){
1703+ mix = true;
1704+ break;
1705+ };
16721706 };
1673- if( that[ '_flags' ] & X_Node_BitMask_IE4_IS_MIX === X_Node_BitMask_IE4_IS_MIX ){
1674- mix = true;
1675- break;
1707+ };
1708+
1709+ if( that[ '_flags' ] & X_NodeFlags_IE4_FIXED || that[ '_flags' ] & X_Node_BitMask_IE4_IS_MIX === X_NodeFlags_IE4_HAS_ELEMENT ){
1710+ for( i = 0; i < l; ++i ){
1711+ prev = X_Node__commitUpdate( xnodes[ i ], elm, prev, accumulatedFlags );
1712+ };
1713+ } else
1714+ if( mix ){
1715+ html = [];
1716+ for( i = 0; i < l; ++i ){
1717+ html[ i ] = X_Node__actualCreate( xnodes[ i ], false );
1718+ };
1719+ elm.innerHTML = html.join( '' );
1720+ for( i = 0; i < l; ++i ){
1721+ X_Node__afterActualCreate( xnodes[ i ] );
16761722 };
1723+ that[ '_flags' ] |= X_NodeFlags_IE4_FIXED;
1724+ } else
1725+ if( that[ '_flags' ] & X_NodeFlags_IE4_HAS_TEXTNODE ){
1726+ dirty = dirty || false;
1727+ for( i = 0; i < l; ++i ){
1728+ text = xnodes[ i ];
1729+ if( text[ '_flags' ] & X_Node_BitMask_IS_DIRTY ){
1730+ text[ '_flags' ] &= X_Node_BitMask_RESET_DIRTY;
1731+ dirty = true;
1732+ };
1733+ };
1734+ if( dirty ) elm.innerHTML = that[ 'text' ]();
16771735 };
1736+
1737+ if( accumulatedFlags & X_Node_BitMask_IS_DIRTY ) delete that[ '_fontSize' ];
1738+
1739+ that[ '_flags' ] &= ~X_NodeFlags_DIRTY_POSITION;
1740+ that[ '_flags' ] & X_Node_BitMask_IS_DIRTY && X_Node__updateRawNode( that, elm );
16781741 };
16791742
1680- if( that[ '_flags' ] & X_NodeFlags_IE4_FIXED || that[ '_flags' ] & X_Node_BitMask_IE4_IS_MIX === X_NodeFlags_IE4_HAS_ELEMENT ){
1681- for( i = 0; i < l; ++i ){
1682- prev = X_Node__commitUpdate( xnodes[ i ], elm, prev, accumulatedFlags );
1683- };
1684- } else
1685- if( mix ){
1686- html = [];
1687- for( i = 0; i < l; ++i ){
1688- html[ i ] = X_Node__actualCreate( xnodes[ i ], false );
1689- };
1690- elm.innerHTML = html.join( '' );
1691- for( i = 0; i < l; ++i ){
1692- X_Node__afterActualCreate( xnodes[ i ] );
1693- };
1694- that[ '_flags' ] |= X_NodeFlags_IE4_FIXED;
1695- } else
1696- if( that[ '_flags' ] & X_NodeFlags_IE4_HAS_TEXTNODE ){
1697- dirty = dirty || false;
1698- for( i = 0; i < l; ++i ){
1699- text = xnodes[ i ];
1700- if( text[ '_flags' ] & X_Node_BitMask_IS_DIRTY ){
1701- text[ '_flags' ] &= X_Node_BitMask_RESET_DIRTY;
1702- dirty = true;
1743+ if( ( anime = that[ '_anime' ] ) && 6 <= anime.phase && anime.doScroll ){
1744+ if( anime.phase === 6 ){
1745+ v = anime.fromScrollX;
1746+ if( v === v ){
1747+ elm.scrollLeft = v;
1748+ } else {
1749+ anime.fromScrollX = elm.scrollLeft;
1750+ };
1751+ v = anime.fromScrollY;
1752+ if( v === v ){
1753+ elm.scrollTop = v;
1754+ } else {
1755+ anime.fromScrollY = elm.scrollTop;
17031756 };
1757+ } else {
1758+ elm.scrollLeft = anime.scrollX;
1759+ elm.scrollTop = anime.scrollY;
17041760 };
1705- if( dirty ) elm.innerHTML = that[ 'text' ]();
17061761 };
1707-
1708- if( accumulatedFlags & X_Node_BitMask_IS_DIRTY ) delete that[ '_fontSize' ];
1709-
1710- that[ '_flags' ] &= ~X_NodeFlags_DIRTY_POSITION;
1711- that[ '_flags' ] & X_Node_BitMask_IS_DIRTY && X_Node__updateRawNode( that, elm );
1762+
17121763 return elm;
17131764 }) :
17141765 (function(){});
@@ -1795,11 +1846,11 @@ var X_Node__updateRawNode =
17951846 delete that[ '_newAttrs' ];
17961847 };
17971848
1798-
17991849 if( accumulatedFlags & X_NodeFlags_IE8_OPACITY_FIX ){
18001850 memory = that[ '_css' ] && that[ '_css' ].opacity;
1801- if( f = true ){
1802- if( !that[ '_css' ] ) that[ '_css' ] = {};
1851+ f = true;
1852+ if( 0 <= memory && memory < 1 ){
1853+ //if( !that[ '_css' ] ) that[ '_css' ] = {};
18031854 that[ '_css' ].opacity = ie8opacity;
18041855 if( that[ '_flags' ] & X_NodeFlags_DIRTY_CSS ){
18051856 that[ '_flags' ] |= X_NodeFlags_OLD_CSSTEXT;
@@ -1832,12 +1883,18 @@ var X_Node__updateRawNode =
18321883 };
18331884 };
18341885
1886+ /*
1887+ * http://jsdo.it/esukei/imOL
1888+ * IE8でのfilter:alpha継承
1889+ * IE8でfilter:alphaの指定がposition:relative,position:absoluteの子要素に継承されない問題
1890+ */
18351891 if( f ){
18361892 if( 0 <= memory ){
18371893 that[ '_css' ].opacity = memory;
18381894 } else {
1839- delete that[ '_css' ].opacity;
1840- if( X_Object_isEmpty( that[ '_css' ] ) ) delete that[ '_css' ];
1895+ //elm.style.filter = 'inherit';
1896+ //delete that[ '_css' ].opacity;
1897+ //if( X_Object_isEmpty( that[ '_css' ] ) ) delete that[ '_css' ];
18411898 };
18421899 };
18431900
--- 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 ){
2424 if( scrollBox.xnode !== XUI_ScrollBox_indicatorV.parent ){
2525 console.log( '*** Scroll Indicator add ***' );
2626 scrollBox.xnode[ 'append' ]( XUI_ScrollBox_indicatorV );
27- XUI_ScrollBox_indicatorV[ 'animate' ](
28- { opacity : 0 },
29- { opacity : 0.5 },
30- 900, 'circular', 300
31- );
27+ XUI_ScrollBox_indicatorV[ 'animate' ]({
28+ 'from' : { opacity : 0 },
29+ 'to' : { opacity : 0.5 },
30+ 'duration' : 900,
31+ 'easing' : 'circular',
32+ 'lazyRelease' : 300
33+ });
3234 scrollBox
3335 [ 'listen' ]( [ X_EVENT_CANCELED, XUI_Event.SCROLL_END ], XUI_ScrollBox_indicatorV, XUI_ScrollBox_indicatorHandleEvent );
3436 };
@@ -44,11 +46,13 @@ function XUI_ScrollBox_start( scrollBox ){
4446 };
4547 if( scrollBox.xnode !== XUI_ScrollBox_indicatorH.parent ){
4648 scrollBox.xnode[ 'append' ]( XUI_ScrollBox_indicatorH );
47- XUI_ScrollBox_indicatorH[ 'animate' ](
48- { opacity : 0 },
49- { opacity : 0.5 },
50- 900, 'circular', 300
51- );
49+ XUI_ScrollBox_indicatorH[ 'animate' ]({
50+ 'from' : { opacity : 0 },
51+ 'to' : { opacity : 0.5 },
52+ 'duration' : 900,
53+ 'easing' : 'circular',
54+ 'lazyRelease' : 300
55+ });
5256 scrollBox
5357 [ 'listen' ]( [ X_EVENT_CANCELED, XUI_Event.SCROLL_END ], XUI_ScrollBox_indicatorH, XUI_ScrollBox_indicatorHandleEvent );
5458 };
@@ -65,11 +69,13 @@ function XUI_ScrollBox_indicatorHandleEvent( e ){
6569 case X_EVENT_CANCELED :
6670 case XUI_Event.SCROLL_END :
6771 console.log( '-fadeout-' );
68- this[ 'animate' ](
69- { opacity : 0.5 },
70- { opacity : 0 },
71- 900, 'circular', 300
72- );
72+ this[ 'animate' ]({
73+ 'from' : { opacity : 0.5 },
74+ 'to' : { opacity : 0 },
75+ 'duration' : 900,
76+ 'easing' : 'circular',
77+ 'lazyRelease' : 300
78+ });
7379 break;
7480 };
7581 };
@@ -295,17 +301,19 @@ function X_UI_ScrollBox_translate( that, x, y, opt_time, opt_easing, opt_release
295301 opt_easing = opt_easing === '' ? '' : opt_easing || 'circular';
296302 opt_release = 0 <= opt_release ? opt_release : 300;
297303
298- that.xnodeSlider[ 'animate' ](
299- {
300- x : that.scrollX,
301- y : that.scrollY
302- },
303- {
304- x : x,
305- y : y
306- },
307- opt_time, opt_easing, opt_release
308- );
304+ that.xnodeSlider[ 'animate' ]({
305+ 'from' : {
306+ x : that.scrollX,
307+ y : that.scrollY
308+ },
309+ 'to' : {
310+ x : x,
311+ y : y
312+ },
313+ 'duration' : opt_time,
314+ 'easing' : opt_easing,
315+ 'lazyRelease' : opt_release
316+ });
309317
310318 if( X_UA[ 'IE' ] < 6 ){
311319 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
320328 [ 'css' ]({
321329 height : ( indicatorH | 0 ) + 'px'
322330 })
323- [ 'animate' ](
324- {
325- y : scrollBoxH * that.scrollY / that.scrollYMax
326- },
327- {
328- y : scrollBoxH * y / that.scrollYMax,
329- opacity : 0.5
330- },
331- opt_time, opt_easing, opt_release
332- );
331+ [ 'animate' ]({
332+ 'from' : {
333+ y : scrollBoxH * that.scrollY / that.scrollYMax },
334+ 'to' : {
335+ y : scrollBoxH * y / that.scrollYMax,
336+ opacity : 0.5
337+ },
338+ 'duration' : opt_time,
339+ 'easing' : opt_easing,
340+ 'lazyRelease' : opt_release
341+ });
333342 };
334343 if( that.hasHScroll && XUI_ScrollBox_indicatorH && XUI_ScrollBox_indicatorH.parent === that.xnode ){
335344 indicatorW = scrollBoxW * scrollBoxW / ( - that.scrollXMax + scrollBoxW );
@@ -338,16 +347,17 @@ function X_UI_ScrollBox_translate( that, x, y, opt_time, opt_easing, opt_release
338347 [ 'css' ]({
339348 width : ( indicatorW | 0 ) + 'px'
340349 })
341- [ 'animate' ](
342- {
343- x : scrollBoxW * that.scrollX / that.scrollXMax
344- },
345- {
346- x : scrollBoxW * x / that.scrollXMax,
347- opacity : 0.5
348- },
349- opt_time, opt_easing, opt_release
350- );
350+ [ 'animate' ]({
351+ 'from' : {
352+ x : scrollBoxW * that.scrollX / that.scrollXMax },
353+ 'to' : {
354+ x : scrollBoxW * x / that.scrollXMax,
355+ opacity : 0.5
356+ },
357+ 'duration' : opt_time,
358+ 'easing' : opt_easing,
359+ 'lazyRelease' : opt_release
360+ });
351361 };
352362
353363 that.scrollX = x;
旧リポジトリブラウザで表示