• R/O
  • HTTP
  • SSH
  • HTTPS

clientJs: コミット

クライアント側 js 開発用


コミットメタ情報

リビジョン99e4c667c30bf89551a3546d2cef55fc13b2c301 (tree)
日時2015-12-22 07:41:54
作者itozyun <itozyun@user...>
コミッターitozyun

ログメッセージ

Verison 0.6.203, fix X.Node.Anime.

変更サマリ

差分

--- a/0.6.x/css/xui.css
+++ b/0.6.x/css/xui.css
@@ -228,3 +228,6 @@
228228 .IE8 * {
229229 filter : inherit;
230230 }
231+[ie8opcityFix] * {
232+ filter : inherit;
233+}
--- a/0.6.x/index.html
+++ b/0.6.x/index.html
@@ -2,7 +2,7 @@
22 <html lang="ja" class="js-disabled notranslate" xmlns:v="urn:schemas-microsoft-com:vml">
33 <head>
44 <meta charset="utf-8">
5-<title>pettanR UIシステム</title>
5+<title>pettanR UI繝?せ繝?/title>
66 <meta name="msapplication-tap-highlight" content="no">
77 <meta name="HandheldFriendly" content="true">
88 <meta name="mobileoptimized" content="0">
--- 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 = [],
2525 * 5: GPU解除待ち
2626 * 6: 開始可能
2727 * 7: アニメーション中
28- * TODO node.css( 'opacity' ) の上書き
2928 */
3029
3130 var X_NODE_ANIME_RESET = 1,
3231 X_NODE_ANIME_STAY_GPU = 2,
3332
3433 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,
34+ x : NaN,
35+ y : NaN,
36+ toX : NaN,
37+ toY : NaN,
38+ fromX : NaN,
39+ fromY : NaN,
4140 rotate : NaN, fromRotate : NaN, toRotate : NaN,
4241 skewX : NaN, fromSkewX : NaN, toSkewX : NaN,
4342 skewY : NaN, fromSkewY : NaN, toSkewY : NaN,
@@ -45,8 +44,8 @@ var X_NODE_ANIME_RESET = 1,
4544 scaleY : 1, fromScaleY : 1, toScaleY : 1,
4645 alpha : NaN,
4746 scrollX : NaN, fromScrollX : NaN, toScrollX : NaN,
48- scrollY : NaN, fromScrollY : NaN, toScrollY : NaN,
49- doScroll : false//,
47+ scrollY : NaN, fromScrollY : NaN, toScrollY : NaN //,
48+ //doScroll : false//,
5049 //duration : 0
5150 //phase, lazyRelease, easing, follower, releaseNow, inited, progress doScroll, fallbackKind
5251 // fromTime, toTime
@@ -107,12 +106,6 @@ function X_Node_animate( obj ){
107106 a = this[ '_css' ] && parseFloat( this[ '_css' ].opacity );
108107 if( 0 <= a ) obj.alpha = a;
109108 };
110-
111- if( 0 <= duration && X_Type_isFinite( duration ) ){
112- obj.duration = duration;
113- };
114-
115- obj.easing = X_Type_isFunction( easing ) ? easing : X_NodeAnime_ease[ easing ] || X_NodeAnime_ease[ 'circular' ];
116109
117110 // form :
118111 obj.fromX = obj.x = X_NodeAnime_getFinite( from[ 'x' ], obj.x );
@@ -137,19 +130,20 @@ function X_Node_animate( obj ){
137130 obj.toScrollX = X_NodeAnime_getFinite( dest[ 'scrollX' ], obj.scrollX );
138131 obj.toScrollY = X_NodeAnime_getFinite( dest[ 'scrollY' ], obj.scrollY );
139132
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;
133+ if( X_Type_isFinite( obj.toX ) && X_Type_isNaN( obj.x ) ) obj.x = obj.fromX = 0;
134+ if( X_Type_isFinite( obj.toY ) && X_Type_isNaN( obj.y ) ) obj.y = obj.fromY = 0;
135+
136+ if( obj.toRotate && X_Type_isNaN( obj.rotate ) ) obj.rotate = obj.fromRotate = 0;
137+ if( obj.toSkewX && X_Type_isNaN( obj.skewX ) ) obj.skewX = obj.fromSkewX = 0;
138+ if( obj.toSkewY && X_Type_isNaN( obj.skewY ) ) obj.skewY = obj.fromSkewY = 0;
143139
140+ obj.duration = 0 <= duration && X_Type_isFinite( duration ) ? duration : 0;
144141 obj.lazyRelease = 0 <= lazyRelease && X_Type_isFinite( lazyRelease ) ? lazyRelease : 0;
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- };
142+ obj.easing = X_Type_isFunction( easing ) ? easing : X_NodeAnime_ease[ easing ] || X_NodeAnime_ease[ 'circular' ];
143+ obj.inited = false;
144+ obj.transform = ( X_Type_isFinite( obj.x ) || X_Type_isFinite( obj.y ) || obj.lazyRelease ) && X_NodeAnime_hasTransform;
145+ obj.doScroll = 0 <= obj.toScrollX || 0 <= obj.toScrollY;
146+ obj.fallback = 0;
153147
154148 // scale
155149 if( obj.toScaleX !== 1 && obj.fromScaleX !== 1 && obj.toScaleY !== 1 && obj.fromScaleY !== 1 ){
@@ -173,7 +167,7 @@ function X_Node_animate( obj ){
173167 };
174168
175169 // rotate, skew
176- if( obj.toRotate === obj.toRotate || obj.toSkewX === obj.toSkewX || obj.toSkewY === obj.toSkewY ){
170+ if( X_Type_isFinite( obj.rotate ) || X_Type_isFinite( obj.skewX ) || X_Type_isFinite( obj.skewY ) ){
177171 if( X_NodeAnime_hasTransform ){
178172 obj.transform = true;
179173 } else
@@ -341,8 +335,8 @@ function X_NodeAnime_detectWaitAnimation( xnode, duration, isTest ){
341335 // -> いない、アニメーションが可能
342336 for( i = 0; _xnode = list[ i ]; ++i ){
343337 if( _xnode === xnode ) break;
344-
345- if( 6 <= _xnode[ '_anime' ].phase ){
338+ obj = _xnode[ '_anime' ];
339+ if( 6 <= obj.phase ){
346340 if( xnode[ 'contains' ]( _xnode ) || _xnode[ 'contains' ]( xnode ) ){
347341 return isTest ? 3 : _xnode;
348342 };
@@ -511,6 +505,8 @@ function X_NodeAnime_updatePosition( xnode, obj, ratio, useGPU ){
511505 scaleX = obj.scaleX = obj.toScaleX;
512506 scaleY = obj.scaleY = obj.toScaleY;
513507 alpha = obj.alpha = obj.toAlpha;
508+ obj.scrollX = obj.toScrollX;
509+ obj.scrollY = obj.toScrollY;
514510 } else {
515511 x = obj.x;
516512 y = obj.y;
@@ -554,7 +550,7 @@ function X_NodeAnime_updatePosition( xnode, obj, ratio, useGPU ){
554550 };
555551 } else
556552 if( obj.fallback === 16 ){
557- xnode[ 'css' ]( 'dxtransform', [ x || 0, y || 0, rotate || 0, skewX || 0, skewY || 0, scaleX, scaleY ] );
553+ xnode[ 'css' ]( 'dxtransform', [ x | 0, y | 0, rotate || 0, skewX || 0, skewY || 0, scaleX, scaleY ] );
558554 } else {
559555 x === x && xnode[ 'css' ]( 'left', ( x | 0 ) + 'px' );
560556 y === y && xnode[ 'css' ]( 'top', ( y | 0 ) + 'px' );
@@ -572,6 +568,13 @@ function X_NodeAnime_updatePosition( xnode, obj, ratio, useGPU ){
572568 };
573569 };
574570
571+ if( obj.doScroll && xnode[ '_rawObject' ] ){
572+ console.log( 'ok ' + ratio );
573+ xnode[ '_rawObject' ].scrollLeft = obj.scrollX | 0;
574+ xnode[ '_rawObject' ].scrollTop = obj.scrollY | 0;
575+ //X_Node_reserveUpdate();
576+ };
577+
575578 alpha === alpha && xnode[ 'css' ]( 'opacity', alpha );
576579 };
577580
--- 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 ){
14071407 removal.length = 0;
14081408 };
14091409
1410+
1411+ X_UA[ 'IE5' ] && ( X_elmBody.style.visibility = 'hidden' );
1412+
14101413 if( X_Node_html[ '_flags' ] & X_Node_BitMask_IS_DIRTY ){
14111414 X_Node__commitUpdate( X_Node_html, X_Node_html[ '_rawObject' ].parentNode, null, X_Node_html[ '_flags' ], 1, xnodesIEFilterFixAfter = [] );
14121415 } else {
@@ -1414,6 +1417,8 @@ function X_Node_startUpdate( time ){
14141417 X_Node__commitUpdate( X_Node_body, X_Node_body[ '_rawObject' ].parentNode, null, X_Node_body[ '_flags' ], 1, xnodesIEFilterFixAfter = [] );
14151418 };
14161419
1420+ X_UA[ 'IE5' ] && ( X_elmBody.style.visibility = '' );
1421+
14171422 if( X_Node_updateReservedByReleaseGPU ){
14181423 X_Node_reserveUpdate();
14191424 X_Node_updateReservedByReleaseGPU = false;
@@ -1448,13 +1453,13 @@ function X_Node_startUpdate( time ){
14481453 */
14491454 var X_Node__commitUpdate =
14501455 X_UA_DOM.W3C ?
1451- ( function( that, parentElement, nextElement, accumulatedFlags, ie8opacity, xnodesIEFilterFixAfter ){
1456+ ( function( that, parentElement, nextElement, accumulatedFlags, ie8AccumulatedOpcity, xnodesIEFilterFixAfter ){
14521457 var elm = that[ '_rawObject' ],
1453- created, xnodes, l, next, anime, v;
1458+ created, xnodes, l, next, anime, v, currentOpcity;
14541459
14551460 // 1. GPU 一切の更新をスキップ
14561461 if( that[ '_flags' ] & X_NodeFlags_GPU_NOW ){
1457- console.log( '更新のskip ' + !!( that[ '_flags' ] & X_Node_BitMask_IS_DIRTY ) );
1462+ console.log( '更新のskip ' + that[ '_className' ] + !!( that[ '_flags' ] & X_Node_BitMask_IS_DIRTY ) );
14581463 that[ '_flags' ] & X_Node_BitMask_IS_DIRTY && X_Node__updateRawNode( that, elm );
14591464 return elm;
14601465 };
@@ -1583,12 +1588,13 @@ var X_Node__commitUpdate =
15831588 };
15841589
15851590 // ie8 では子要素に opacity が反映されないため、親要素の opacity を積算する
1586- ie8opacity = ie8opacity * ( that[ '_css' ] && 0 <= that[ '_css' ].opacity ? that[ '_css' ].opacity : 1 );
1591+ currentOpcity = that[ '_css' ] && 0 <= that[ '_css' ].opacity && that[ '_css' ].opacity;
1592+ ie8AccumulatedOpcity = ie8AccumulatedOpcity * ( currentOpcity || 1 );
15871593
15881594 // 8. 更新の適用
15891595 if( accumulatedFlags & X_Node_BitMask_IS_DIRTY ){
15901596 delete that[ '_fontSize' ];
1591- X_Node__updateRawNode( that, elm, ie8opacity, accumulatedFlags );
1597+ X_Node__updateRawNode( that, elm, currentOpcity, ie8AccumulatedOpcity, accumulatedFlags );
15921598 };
15931599
15941600 // 9. ie5 only
@@ -1612,7 +1618,7 @@ var X_Node__commitUpdate =
16121618 // 10. 子要素の更新。
16131619 if( ( xnodes = that[ '_xnodes' ] ) && ( l = xnodes.length ) ) {
16141620 for( ; l; ){
1615- next = X_Node__commitUpdate( xnodes[ --l ], elm, next, accumulatedFlags, ie8opacity, xnodesIEFilterFixAfter );
1621+ next = X_Node__commitUpdate( xnodes[ --l ], elm, next, accumulatedFlags, ie8AccumulatedOpcity, xnodesIEFilterFixAfter );
16161622 };
16171623 };
16181624
@@ -1627,26 +1633,6 @@ var X_Node__commitUpdate =
16271633 };
16281634 };
16291635
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-
16501636 return elm;
16511637 }) :
16521638 X_UA_DOM.IE4 ?
@@ -1769,9 +1755,9 @@ var X_Node__commitUpdate =
17691755 */
17701756 var X_Node__updateRawNode =
17711757 X_UA_DOM.W3C ?
1772- ( function( that, elm, ie8opacity, accumulatedFlags ){
1758+ ( function( that, elm, currentOpcity, ie8AccumulatedOpcity, accumulatedFlags ){
17731759 var // flags = that[ '_flags' ],
1774- attrs, rename, k, v, memory, f;
1760+ attrs, rename, k, v, f;
17751761
17761762 // textNode
17771763 if( !that[ '_tag' ] ){
@@ -1847,11 +1833,9 @@ var X_Node__updateRawNode =
18471833 };
18481834
18491835 if( accumulatedFlags & X_NodeFlags_IE8_OPACITY_FIX ){
1850- memory = that[ '_css' ] && that[ '_css' ].opacity;
1851- f = true;
1852- if( 0 <= memory && memory < 1 ){
1853- //if( !that[ '_css' ] ) that[ '_css' ] = {};
1854- that[ '_css' ].opacity = ie8opacity;
1836+ if( 0 <= currentOpcity ){
1837+ f = true;
1838+ that[ '_css' ].opacity = ie8AccumulatedOpcity;
18551839 if( that[ '_flags' ] & X_NodeFlags_DIRTY_CSS ){
18561840 that[ '_flags' ] |= X_NodeFlags_OLD_CSSTEXT;
18571841 } else
@@ -1889,13 +1873,7 @@ var X_Node__updateRawNode =
18891873 * IE8でfilter:alphaの指定がposition:relative,position:absoluteの子要素に継承されない問題
18901874 */
18911875 if( f ){
1892- if( 0 <= memory ){
1893- that[ '_css' ].opacity = memory;
1894- } else {
1895- //elm.style.filter = 'inherit';
1896- //delete that[ '_css' ].opacity;
1897- //if( X_Object_isEmpty( that[ '_css' ] ) ) delete that[ '_css' ];
1898- };
1876+ that[ '_css' ].opacity = currentOpcity;
18991877 };
19001878
19011879 that[ '_flags' ] &= X_Node_BitMask_RESET_DIRTY;
--- a/0.6.x/js/20_ui/15_ScrollBox.js
+++ b/0.6.x/js/20_ui/15_ScrollBox.js
@@ -3,7 +3,8 @@
33 * ScrollManager
44 * indicatorX, Y は再利用
55 */
6-var XUI_ScrollBox_current,
6+var XUI_ScrollBox_useCSSP = !X_UA[ 'IE5' ],
7+ XUI_ScrollBox_current,
78 XUI_ScrollBox_indicatorV,
89 XUI_ScrollBox_indicatorH;
910
@@ -65,6 +66,7 @@ function XUI_ScrollBox_start( scrollBox ){
6566 };
6667
6768 function XUI_ScrollBox_indicatorHandleEvent( e ){
69+ //if( !XUI_ScrollBox_useCSSP ) return;
6870 switch( e.type ){
6971 case X_EVENT_CANCELED :
7072 case XUI_Event.SCROLL_END :
@@ -213,7 +215,7 @@ var XUI_ScrollBox = XUI_ChromeBox.inherits(
213215 XUI_rootData[ 'unlisten' ]( XUI_Event.LAYOUT_COMPLETE, this, X_UI_ScrollBox_onLayoutComplete );
214216 this[ 'unlisten' ]( XUI_Event.SCROLL_END, XUI_rootData, XUI_rootData.calculate );
215217
216- this.xnodeSlider[ 'stop' ]();
218+ XUI_ScrollBox_useCSSP ? this.xnodeSlider[ 'stop' ]() : this.xnode[ 'stop' ]();
217219
218220 XUI_ScrollBox_current === this && XUI_ScrollBox_start( null );
219221
@@ -231,7 +233,7 @@ function X_UI_ScrollBox_onLayoutBefore( e ){
231233 };
232234 this.scrollXRatio = this.scrollX / this.scrollXMax;
233235 this.scrollYRatio = this.scrollY / this.scrollYMax;
234- this.xnodeSlider[ 'stop' ]();
236+ XUI_ScrollBox_useCSSP ? this.xnodeSlider[ 'stop' ]() : this.xnode[ 'stop' ]();
235237 this.isInTransition = false;
236238 return X_CALLBACK_NONE;
237239 };
@@ -301,19 +303,36 @@ function X_UI_ScrollBox_translate( that, x, y, opt_time, opt_easing, opt_release
301303 opt_easing = opt_easing === '' ? '' : opt_easing || 'circular';
302304 opt_release = 0 <= opt_release ? opt_release : 300;
303305
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- });
306+ console.log( 'scr ' + y );
307+
308+ if( !XUI_ScrollBox_useCSSP ){
309+ that.xnode[ 'animate' ]({
310+ 'from' : {
311+ scrollX : -that.scrollX,
312+ scrollY : -that.scrollY
313+ },
314+ 'to' : {
315+ scrollX : -x,
316+ scrollY : -y
317+ },
318+ 'duration' : opt_time,
319+ 'easing' : opt_easing
320+ });
321+ } else {
322+ that.xnodeSlider[ 'animate' ]({
323+ 'from' : {
324+ x : that.scrollX,
325+ y : that.scrollY
326+ },
327+ 'to' : {
328+ x : x,
329+ y : y
330+ },
331+ 'duration' : opt_time,
332+ 'easing' : opt_easing,
333+ 'lazyRelease' : opt_release
334+ });
335+ };
317336
318337 if( X_UA[ 'IE' ] < 6 ){
319338 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 ){
388407 //console.log( '-1-' );
389408 this[ 'dispatch' ]( XUI_Event.SCROLL_END );
390409 // TODO current位置
391- this.xnodeSlider[ 'stop' ]();
392- };
410+ XUI_ScrollBox_useCSSP ? this.xnodeSlider[ 'stop' ]() : this.xnode[ 'stop' ]();
411+ };
393412
394413 this.startX = this.scrollX;
395414 this.startY = this.scrollY;
@@ -417,7 +436,7 @@ function X_UI_ScrollBox_onMove( e ){
417436 };
418437
419438 // gpu の用意
420- if( !this.xnodeSlider[ '_anime' ] || !this.xnodeSlider[ '_anime' ].phase ){
439+ if( !XUI_ScrollBox_useCSSP ? ( !this.xnode[ '_anime' ] || !this.xnode[ '_anime' ].phase ) : ( !this.xnodeSlider[ '_anime' ] || !this.xnodeSlider[ '_anime' ].phase ) ){
421440 //console.log( 'gpuレイヤーの用意 ' + e.pageY );
422441 //console.log( 'mov1 x:' + this.scrollX + ' y:' + this.scrollY );
423442 X_UI_ScrollBox_translate( this, this.scrollX, this.scrollY, 0, '', 300 );
@@ -490,7 +509,7 @@ function X_UI_ScrollBox_onMove( e ){
490509 this.directionX = 0 < deltaX ? -1 : deltaX < 0 ? 1 : 0;
491510 this.directionY = 0 < deltaY ? -1 : deltaY < 0 ? 1 : 0;
492511
493- //console.log( 'mov2 x:' + newX + ' y:' + newY );
512+ console.log( 'mov2 x:' + newX + ' y:' + newY );
494513 X_UI_ScrollBox_translate( this, newX, newY, 0, '', 300 );
495514
496515 if( 300 < timestamp - this.startTime ){
旧リポジトリブラウザで表示