.IE8 * {\r
filter : inherit;\r
}\r
+[ie8opcityFix] * {\r
+ filter : inherit;\r
+}\r
<html lang="ja" class="js-disabled notranslate" xmlns:v="urn:schemas-microsoft-com:vml">\r
<head>\r
<meta charset="utf-8">\r
-<title>pettanR UI\83V\83X\83e\83\80</title>\r
+<title>pettanR UIテスト</title>\r
<meta name="msapplication-tap-highlight" content="no">\r
<meta name="HandheldFriendly" content="true">\r
<meta name="mobileoptimized" content="0">\r
* 5: GPU解除待ち\r
* 6: 開始可能\r
* 7: アニメーション中\r
- * TODO node.css( 'opacity' ) の上書き\r
*/\r
\r
var X_NODE_ANIME_RESET = 1,\r
X_NODE_ANIME_STAY_GPU = 2,\r
\r
X_NodeAnime_DEFAULT = {\r
- x : X_NodeAnime_hasTransform ? 0 : NaN,\r
- y : X_NodeAnime_hasTransform ? 0 : NaN,\r
- toX : X_NodeAnime_hasTransform ? 0 : NaN,\r
- toY : X_NodeAnime_hasTransform ? 0 : NaN,\r
- fromX : X_NodeAnime_hasTransform ? 0 : NaN,\r
- fromY : X_NodeAnime_hasTransform ? 0 : NaN,\r
+ x : NaN,\r
+ y : NaN,\r
+ toX : NaN,\r
+ toY : NaN,\r
+ fromX : NaN,\r
+ fromY : NaN,\r
rotate : NaN, fromRotate : NaN, toRotate : NaN,\r
skewX : NaN, fromSkewX : NaN, toSkewX : NaN,\r
skewY : NaN, fromSkewY : NaN, toSkewY : NaN,\r
scaleY : 1, fromScaleY : 1, toScaleY : 1,\r
alpha : NaN,\r
scrollX : NaN, fromScrollX : NaN, toScrollX : NaN,\r
- scrollY : NaN, fromScrollY : NaN, toScrollY : NaN,\r
- doScroll : false//,\r
+ scrollY : NaN, fromScrollY : NaN, toScrollY : NaN //,\r
+ //doScroll : false//,\r
//duration : 0\r
//phase, lazyRelease, easing, follower, releaseNow, inited, progress doScroll, fallbackKind\r
// fromTime, toTime\r
a = this[ '_css' ] && parseFloat( this[ '_css' ].opacity );\r
if( 0 <= a ) obj.alpha = a;\r
};\r
- \r
- if( 0 <= duration && X_Type_isFinite( duration ) ){\r
- obj.duration = duration;\r
- };\r
-\r
- obj.easing = X_Type_isFunction( easing ) ? easing : X_NodeAnime_ease[ easing ] || X_NodeAnime_ease[ 'circular' ];\r
\r
// form :\r
obj.fromX = obj.x = X_NodeAnime_getFinite( from[ 'x' ], obj.x );\r
obj.toScrollX = X_NodeAnime_getFinite( dest[ 'scrollX' ], obj.scrollX );\r
obj.toScrollY = X_NodeAnime_getFinite( dest[ 'scrollY' ], obj.scrollY );\r
\r
- if( obj.toRotate && obj.rotate !== obj.rotate ) obj.rotate = 0;\r
- if( obj.toSkewX && obj.skewX !== obj.skewX ) obj.skewX = 0;\r
- if( obj.toSkewY && obj.skewY !== obj.skewY ) obj.skewY = 0;\r
+ if( X_Type_isFinite( obj.toX ) && X_Type_isNaN( obj.x ) ) obj.x = obj.fromX = 0;\r
+ if( X_Type_isFinite( obj.toY ) && X_Type_isNaN( obj.y ) ) obj.y = obj.fromY = 0;\r
+ \r
+ if( obj.toRotate && X_Type_isNaN( obj.rotate ) ) obj.rotate = obj.fromRotate = 0;\r
+ if( obj.toSkewX && X_Type_isNaN( obj.skewX ) ) obj.skewX = obj.fromSkewX = 0;\r
+ if( obj.toSkewY && X_Type_isNaN( obj.skewY ) ) obj.skewY = obj.fromSkewY = 0;\r
\r
+ obj.duration = 0 <= duration && X_Type_isFinite( duration ) ? duration : 0;\r
obj.lazyRelease = 0 <= lazyRelease && X_Type_isFinite( lazyRelease ) ? lazyRelease : 0;\r
- obj.inited = false;\r
- obj.doScroll = 0 <= obj.toScrollX || 0 <= obj.toScrollY;\r
- obj.transform = false;\r
- obj.fallback = 0;\r
- \r
- if( obj.fromX === obj.fromX || obj.fromY === obj.fromY ){\r
- obj.transform = !!X_NodeAnime_hasTransform;\r
- };\r
+ obj.easing = X_Type_isFunction( easing ) ? easing : X_NodeAnime_ease[ easing ] || X_NodeAnime_ease[ 'circular' ];\r
+ obj.inited = false;\r
+ obj.transform = ( X_Type_isFinite( obj.x ) || X_Type_isFinite( obj.y ) || obj.lazyRelease ) && X_NodeAnime_hasTransform;\r
+ obj.doScroll = 0 <= obj.toScrollX || 0 <= obj.toScrollY;\r
+ obj.fallback = 0;\r
\r
// scale\r
if( obj.toScaleX !== 1 && obj.fromScaleX !== 1 && obj.toScaleY !== 1 && obj.fromScaleY !== 1 ){\r
};\r
\r
// rotate, skew\r
- if( obj.toRotate === obj.toRotate || obj.toSkewX === obj.toSkewX || obj.toSkewY === obj.toSkewY ){\r
+ if( X_Type_isFinite( obj.rotate ) || X_Type_isFinite( obj.skewX ) || X_Type_isFinite( obj.skewY ) ){\r
if( X_NodeAnime_hasTransform ){\r
obj.transform = true;\r
} else\r
// -> いない、アニメーションが可能\r
for( i = 0; _xnode = list[ i ]; ++i ){\r
if( _xnode === xnode ) break;\r
-\r
- if( 6 <= _xnode[ '_anime' ].phase ){\r
+ obj = _xnode[ '_anime' ];\r
+ if( 6 <= obj.phase ){\r
if( xnode[ 'contains' ]( _xnode ) || _xnode[ 'contains' ]( xnode ) ){\r
return isTest ? 3 : _xnode;\r
};\r
scaleX = obj.scaleX = obj.toScaleX;\r
scaleY = obj.scaleY = obj.toScaleY;\r
alpha = obj.alpha = obj.toAlpha;\r
+ obj.scrollX = obj.toScrollX;\r
+ obj.scrollY = obj.toScrollY;\r
} else {\r
x = obj.x;\r
y = obj.y;\r
}; \r
} else\r
if( obj.fallback === 16 ){\r
- xnode[ 'css' ]( 'dxtransform', [ x || 0, y || 0, rotate || 0, skewX || 0, skewY || 0, scaleX, scaleY ] );\r
+ xnode[ 'css' ]( 'dxtransform', [ x | 0, y | 0, rotate || 0, skewX || 0, skewY || 0, scaleX, scaleY ] );\r
} else {\r
x === x && xnode[ 'css' ]( 'left', ( x | 0 ) + 'px' );\r
y === y && xnode[ 'css' ]( 'top', ( y | 0 ) + 'px' );\r
};\r
};\r
\r
+ if( obj.doScroll && xnode[ '_rawObject' ] ){\r
+ console.log( 'ok ' + ratio );\r
+ xnode[ '_rawObject' ].scrollLeft = obj.scrollX | 0;\r
+ xnode[ '_rawObject' ].scrollTop = obj.scrollY | 0;\r
+ //X_Node_reserveUpdate();\r
+ };\r
+ \r
alpha === alpha && xnode[ 'css' ]( 'opacity', alpha );\r
};\r
\r
removal.length = 0;
};
+
+ X_UA[ 'IE5' ] && ( X_elmBody.style.visibility = 'hidden' );
+
if( X_Node_html[ '_flags' ] & X_Node_BitMask_IS_DIRTY ){
X_Node__commitUpdate( X_Node_html, X_Node_html[ '_rawObject' ].parentNode, null, X_Node_html[ '_flags' ], 1, xnodesIEFilterFixAfter = [] );
} else {
X_Node__commitUpdate( X_Node_body, X_Node_body[ '_rawObject' ].parentNode, null, X_Node_body[ '_flags' ], 1, xnodesIEFilterFixAfter = [] );
};
+ X_UA[ 'IE5' ] && ( X_elmBody.style.visibility = '' );
+
if( X_Node_updateReservedByReleaseGPU ){
X_Node_reserveUpdate();
X_Node_updateReservedByReleaseGPU = false;
*/
var X_Node__commitUpdate =
X_UA_DOM.W3C ?
- ( function( that, parentElement, nextElement, accumulatedFlags, ie8opacity, xnodesIEFilterFixAfter ){
+ ( function( that, parentElement, nextElement, accumulatedFlags, ie8AccumulatedOpcity, xnodesIEFilterFixAfter ){
var elm = that[ '_rawObject' ],
- created, xnodes, l, next, anime, v;
+ created, xnodes, l, next, anime, v, currentOpcity;
// 1. GPU 一切の更新をスキップ
if( that[ '_flags' ] & X_NodeFlags_GPU_NOW ){
- console.log( '更新のskip ' + !!( that[ '_flags' ] & X_Node_BitMask_IS_DIRTY ) );
+ console.log( '更新のskip ' + that[ '_className' ] + !!( that[ '_flags' ] & X_Node_BitMask_IS_DIRTY ) );
that[ '_flags' ] & X_Node_BitMask_IS_DIRTY && X_Node__updateRawNode( that, elm );
return elm;
};
};
// ie8 では子要素に opacity が反映されないため、親要素の opacity を積算する
- ie8opacity = ie8opacity * ( that[ '_css' ] && 0 <= that[ '_css' ].opacity ? that[ '_css' ].opacity : 1 );
+ currentOpcity = that[ '_css' ] && 0 <= that[ '_css' ].opacity && that[ '_css' ].opacity;
+ ie8AccumulatedOpcity = ie8AccumulatedOpcity * ( currentOpcity || 1 );
// 8. 更新の適用
if( accumulatedFlags & X_Node_BitMask_IS_DIRTY ){
delete that[ '_fontSize' ];
- X_Node__updateRawNode( that, elm, ie8opacity, accumulatedFlags );
+ X_Node__updateRawNode( that, elm, currentOpcity, ie8AccumulatedOpcity, accumulatedFlags );
};
// 9. ie5 only
// 10. 子要素の更新。
if( ( xnodes = that[ '_xnodes' ] ) && ( l = xnodes.length ) ) {
for( ; l; ){
- next = X_Node__commitUpdate( xnodes[ --l ], elm, next, accumulatedFlags, ie8opacity, xnodesIEFilterFixAfter );
+ next = X_Node__commitUpdate( xnodes[ --l ], elm, next, accumulatedFlags, ie8AccumulatedOpcity, xnodesIEFilterFixAfter );
};
};
};
};
- 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 ?
*/
var X_Node__updateRawNode =
X_UA_DOM.W3C ?
- ( function( that, elm, ie8opacity, accumulatedFlags ){
+ ( function( that, elm, currentOpcity, ie8AccumulatedOpcity, accumulatedFlags ){
var // flags = that[ '_flags' ],
- attrs, rename, k, v, memory, f;
+ attrs, rename, k, v, f;
// textNode
if( !that[ '_tag' ] ){
};
if( accumulatedFlags & X_NodeFlags_IE8_OPACITY_FIX ){
- memory = that[ '_css' ] && that[ '_css' ].opacity;
- f = true;
- if( 0 <= memory && memory < 1 ){
- //if( !that[ '_css' ] ) that[ '_css' ] = {};
- that[ '_css' ].opacity = ie8opacity;
+ if( 0 <= currentOpcity ){
+ f = true;
+ that[ '_css' ].opacity = ie8AccumulatedOpcity;
if( that[ '_flags' ] & X_NodeFlags_DIRTY_CSS ){
that[ '_flags' ] |= X_NodeFlags_OLD_CSSTEXT;
} else
* IE8でfilter:alphaの指定がposition:relative,position:absoluteの子要素に継承されない問題
*/
if( f ){
- if( 0 <= memory ){
- that[ '_css' ].opacity = memory;
- } else {
- //elm.style.filter = 'inherit';
- //delete that[ '_css' ].opacity;
- //if( X_Object_isEmpty( that[ '_css' ] ) ) delete that[ '_css' ];
- };
+ that[ '_css' ].opacity = currentOpcity;
};
that[ '_flags' ] &= X_Node_BitMask_RESET_DIRTY;
* ScrollManager\r
* indicatorX, Y は再利用\r
*/\r
-var XUI_ScrollBox_current,\r
+var XUI_ScrollBox_useCSSP = !X_UA[ 'IE5' ],\r
+ XUI_ScrollBox_current,\r
XUI_ScrollBox_indicatorV,\r
XUI_ScrollBox_indicatorH;\r
\r
};\r
\r
function XUI_ScrollBox_indicatorHandleEvent( e ){\r
+ //if( !XUI_ScrollBox_useCSSP ) return;\r
switch( e.type ){\r
case X_EVENT_CANCELED :\r
case XUI_Event.SCROLL_END :\r
XUI_rootData[ 'unlisten' ]( XUI_Event.LAYOUT_COMPLETE, this, X_UI_ScrollBox_onLayoutComplete );\r
this[ 'unlisten' ]( XUI_Event.SCROLL_END, XUI_rootData, XUI_rootData.calculate );\r
\r
- this.xnodeSlider[ 'stop' ]();\r
+ XUI_ScrollBox_useCSSP ? this.xnodeSlider[ 'stop' ]() : this.xnode[ 'stop' ]();\r
\r
XUI_ScrollBox_current === this && XUI_ScrollBox_start( null );\r
\r
};\r
this.scrollXRatio = this.scrollX / this.scrollXMax;\r
this.scrollYRatio = this.scrollY / this.scrollYMax;\r
- this.xnodeSlider[ 'stop' ]();\r
+ XUI_ScrollBox_useCSSP ? this.xnodeSlider[ 'stop' ]() : this.xnode[ 'stop' ]();\r
this.isInTransition = false;\r
return X_CALLBACK_NONE;\r
};\r
opt_easing = opt_easing === '' ? '' : opt_easing || 'circular';\r
opt_release = 0 <= opt_release ? opt_release : 300;\r
\r
- that.xnodeSlider[ 'animate' ]({\r
- 'from' : {\r
- x : that.scrollX,\r
- y : that.scrollY\r
- },\r
- 'to' : {\r
- x : x,\r
- y : y\r
- },\r
- 'duration' : opt_time,\r
- 'easing' : opt_easing,\r
- 'lazyRelease' : opt_release\r
- });\r
+ console.log( 'scr ' + y );\r
+ \r
+ if( !XUI_ScrollBox_useCSSP ){\r
+ that.xnode[ 'animate' ]({\r
+ 'from' : {\r
+ scrollX : -that.scrollX,\r
+ scrollY : -that.scrollY\r
+ },\r
+ 'to' : {\r
+ scrollX : -x,\r
+ scrollY : -y\r
+ },\r
+ 'duration' : opt_time,\r
+ 'easing' : opt_easing\r
+ }); \r
+ } else {\r
+ that.xnodeSlider[ 'animate' ]({\r
+ 'from' : {\r
+ x : that.scrollX,\r
+ y : that.scrollY\r
+ },\r
+ 'to' : {\r
+ x : x,\r
+ y : y\r
+ },\r
+ 'duration' : opt_time,\r
+ 'easing' : opt_easing,\r
+ 'lazyRelease' : opt_release\r
+ }); \r
+ };\r
\r
if( X_UA[ 'IE' ] < 6 ){\r
XUI_ScrollBox_indicatorV && XUI_ScrollBox_indicatorV[ 'css' ]( 'left', ( scrollBoxW - that.fontSize * 0.6 | 0 ) + 'px' );\r
//console.log( '-1-' );\r
this[ 'dispatch' ]( XUI_Event.SCROLL_END );\r
// TODO current位置\r
- this.xnodeSlider[ 'stop' ]();\r
- }; \r
+ XUI_ScrollBox_useCSSP ? this.xnodeSlider[ 'stop' ]() : this.xnode[ 'stop' ]();\r
+ };\r
\r
this.startX = this.scrollX;\r
this.startY = this.scrollY;\r
};\r
\r
// gpu の用意\r
- if( !this.xnodeSlider[ '_anime' ] || !this.xnodeSlider[ '_anime' ].phase ){\r
+ if( !XUI_ScrollBox_useCSSP ? ( !this.xnode[ '_anime' ] || !this.xnode[ '_anime' ].phase ) : ( !this.xnodeSlider[ '_anime' ] || !this.xnodeSlider[ '_anime' ].phase ) ){\r
//console.log( 'gpuレイヤーの用意 ' + e.pageY );\r
//console.log( 'mov1 x:' + this.scrollX + ' y:' + this.scrollY );\r
X_UI_ScrollBox_translate( this, this.scrollX, this.scrollY, 0, '', 300 );\r
this.directionX = 0 < deltaX ? -1 : deltaX < 0 ? 1 : 0;\r
this.directionY = 0 < deltaY ? -1 : deltaY < 0 ? 1 : 0;\r
\r
- //console.log( 'mov2 x:' + newX + ' y:' + newY );\r
+ console.log( 'mov2 x:' + newX + ' y:' + newY );\r
X_UI_ScrollBox_translate( this, newX, newY, 0, '', 300 );\r
\r
if( 300 < timestamp - this.startTime ){\r
OSDN Git Service
