\r
Node._reserveRemoval = [];\r
\r
-if( !document.getElementById && document.all ){\r
+if( X.Dom.DOM_IE4 ){\r
Node.prototype._ie4getRawNode = function(){\r
var elm = this._rawNode;\r
return elm ||\r
if( v._xnodeType !== 1 && v._xnodeType !== 3 ) return this;\r
// 親の xnodes から v を消す\r
if( v.parent ){\r
- //if( document.getElementById ){\r
+ //if( X.Dom.DOM_W3C ){\r
// v.parent._xnodes.splice( v.parent._xnodes.indexOf( v ), 1 );\r
//} else\r
- //if( document.all ){\r
+ //if( X.Dom.DOM_IE4 ){\r
v.remove();\r
//} else {\r
\r
if( v._xnodeType !== 1 && v._xnodeType !== 3 ) return this;\r
// 親の xnodes から v を消す\r
if( v.parent ){\r
- //if( document.getElementById ){\r
+ //if( X.Dom.DOM_W3C ){\r
// v.parent._xnodes.splice( v.parent._xnodes.indexOf( v ), 1 );\r
//} else\r
- //if( document.all ){\r
+ //if( X.Dom.DOM_IE4 ){\r
v.remove();\r
//} else {\r
\r
};\r
\r
Node.prototype._commitUpdate =\r
- document.getElementById ?\r
+ X.Dom.DOM_W3C ?\r
( function( parentElement, nextElement ){\r
var elm = this._rawNode,\r
xnodes, l, i, frg, next, k, v;\r
};\r
return elm;\r
}) :\r
- document.all ? \r
+ X.Dom.DOM_IE4 ? \r
( function( parentElement, prevElement ){\r
var elm = this._rawNode || this._ie4getRawNode(),\r
xnodes, l, i, html, text, prev;\r
(function(){});\r
\r
Node.prototype._updateRawNode =\r
- document.getElementById ?\r
+ X.Dom.DOM_W3C ?\r
( function( elm ){\r
var attrs, rename, k, v;\r
\r
\r
delete this._dirty;\r
}) :\r
- document.all ? \r
+ X.Dom.DOM_IE4 ? \r
( function( elm ){\r
var attrs, rename, k, v;\r
\r
* document.createElement of ie4 is only for OPTION & IMAGE.\r
*/\r
Node.prototype._actualCreate =\r
- document.getElementById ? (function( isChild ){\r
+ X.Dom.DOM_W3C ? (function( isChild ){\r
var elm = this._rawNode,\r
xnodes, frg, i, l;\r
\r
\r
return elm;\r
}) :\r
- document.all ? (function( isChild ){\r
+ X.Dom.DOM_IE4 ? (function( isChild ){\r
var uid = this._uid,\r
html, xnodes, n, i, l;\r
\r
(function(){});\r
\r
Node.prototype._afterActualCreate =\r
- document.getElementById ? (function(){\r
+ X.Dom.DOM_W3C ? (function(){\r
var elm = this._rawNode, xnodes, l, attrs, k, i;\r
\r
this._root = this.parent._root;\r
\r
this._restoreEvent();// イベントの復帰\r
}) :\r
- document.all ? (function(){\r
+ X.Dom.DOM_IE4 ? (function(){\r
var xnodes, i;\r
this._root = this.parent._root;\r
\r
(function(){});\r
\r
Node.prototype._actualRemove =\r
- document.getElementById ?\r
+ X.Dom.DOM_W3C ?\r
( function( isChild ){\r
var xnodes = this._xnodes,\r
elm = this._rawNode,\r
// elm.parentNode.tagName for ie7\r
!isChild && elm.parentNode && elm.parentNode.tagName && elm.parentNode.removeChild( elm );\r
}) :\r
- document.all ?\r
+ X.Dom.DOM_IE4 ?\r
( function( isChild ){\r
var xnodes = this._xnodes,\r
elm = this._rawNode || this._ie4getRawNode(),\r
+++ /dev/null
-/*\r
- * GPU レイヤーを使うとスムースなアニメーションが得られる\r
- * 但し、古めのデバイスでは処理落ちが起こる\r
- * 処理落ちは、最も古い初代 iPod touch (iOS3) では特に顕著に発生するため、テスト機としてちょうどいい\r
- * css の書き方によっても、処理落ちやガタツキに影響するので、デザイナーが気軽に触れるものではない\r
- * \r
- * transform の登場によって、要素の表示位置を変更する方法が、css-p との2択になった。\r
- * 初代 iPod touch では、簡単な css-p すら無視してくれるので、積極的に transform を使っていけ、ということだと思う。\r
- * 但し transform には様々な癖があり、一筋縄ではいかない。\r
- * \r
- * DHTML を扱う専用モジュールを用意して、そこにコードとノウハウを集積する。\r
- * \r
- * GPUレイヤーを使用している場合\r
- * 新しいアニメーション・キューが追加されたときに、現在アニメーションしている要素と親子関係ならば、以前のアニメーションは直ちに停止し、GPUレイヤーを解除。\r
- */\r
-\r
-X.Dom.Anime = (function( window, document, navigator, Math, undefined ){\r
-\r
-var QUEUE_LIST = [],\r
- timerID,\r
- ABS = new Function( 'v', 'return v<0?-v:v' ),\r
- animeEnabled = !X.UA.EInk,\r
- vendor = false,\r
- cssVendor = '',\r
- // X.Dom.listenOnce( X.Dom.Event.DOM_PRE_INIT 以降にアクセス可能\r
- has3d = X.Dom.Style.has3d,\r
- transform = X.Dom.Style.transform,\r
- transformOrigin = X.Dom.Style.transformOrigin,\r
- translateZ = X.Dom.Style.translateZ,\r
- transition = X.Dom.Style.transition;\r
-\r
-/*\r
- * 新規アニメーション要素が現在アニメーションしている要素と親子関係の場合、\r
- * 親子関係のアニメーションを停止して一挙に最後の状態へ\r
- */\r
-function registerQueue( queue ){\r
- var list = QUEUE_LIST,\r
- l = list.length,\r
- xnode = queue.xnode,\r
- q, _xnode;\r
- for( ; l; ){\r
- q = list[ --l ];\r
- _xnode = q.xnode;\r
- _xnode !== xnode && ( _xnode.contains( xnode ) || xnode.contains( _xnode ) ) && q.stop( true );\r
- };\r
- list[ list.length ] = queue;\r
- !timerID && ( timerID = X.Timer.nextFrame( onEnterFrame ) );\r
-};\r
-\r
-function unregisterQueue( queue ){\r
- var i = QUEUE_LIST.indexOf( queue );\r
- if( i === -1 ) return;\r
- if( QUEUE_LIST.length === 1 ){\r
- QUEUE_LIST.length = 0;\r
- timerID && X.Timer.cancelFrame( onEnterFrame );\r
- } else {\r
- QUEUE_LIST.splice( i, 1 );\r
- };\r
-};\r
-\r
-function onEnterFrame(){\r
- var list = QUEUE_LIST,\r
- i = 0,\r
- l = list.length,\r
- t = X.getTime();\r
- for( ; l; ){\r
- list[ --l ].tick( t );\r
- };\r
- list.length && ( timerID = X.Timer.nextFrame( onEnterFrame ) );\r
-};\r
-\r
-var AnimationQueue = function( xnode ){\r
- this.xnode = xnode;\r
-};\r
-\r
-X.Class._override( AnimationQueue.prototype,\r
-{\r
- state : 0, // 0:停止, 1:登録済, 2:アニメ中の親子要素のGPUレイヤー解除待ち, 3:アニメ中;ＧＰＵレイヤーにセット、目標値のセット(transisiton有効), 4:\r
- xnode : null,\r
- startTime : 0,\r
- type : 0,\r
- list : null,\r
- init : function( data, duration, timmingFunction ){\r
- var list, type, prop, data, target, i, l;\r
- if( !( list = this.list ) ) this.list = list = [];\r
- for( type in data ){\r
- for( i = 0, l = list.length; i < l; ++i ){\r
- if( list[ i ][ 0 ] === type ){\r
- prop = list[ i ];\r
- break;\r
- };\r
- };\r
- if( !prop ){\r
- prop = {};\r
- switch( type ){\r
- case 'width' :\r
- prop[ 2 ] = this.xnode.width(); // currentValue\r
- break;\r
- case 'height' :\r
- prop[ 2 ] = this.xnode.height(); // currentValue\r
- break;\r
- case 'x' :\r
- case 'left' :\r
- type = transform ? 'translateX' : 'left';\r
- prop[ 2 ] = this.xnode.x(); // currentValue\r
- break;\r
- case 'y' :\r
- case 'top' :\r
- type = transform ? 'translateY' : 'top';\r
- prop[ 2 ] = this.xnode.y(); // currentValue\r
- break;\r
- };\r
- prop[ 0 ] = type;\r
- };\r
- prop[ 1 ] = data[ type ]; // target value;\r
- prop[ 3 ] = prop[ 1 ] - prop[ 2 ];\r
- };\r
-\r
- this.state === 0 && registerQueue( this );\r
-\r
- this.state = 1;\r
- this.startTime = X.getTime();\r
- this.duration = duration;\r
- if( transition ){\r
- this.timming = 'liner';//timmingFunction;\r
- } else {\r
- this.timming = Liner;\r
- };\r
- \r
- },\r
- stop : function( opt_goEndPosition ){\r
- if( this.xnode.dispatch( { type : X.Dom.Event.ANIME_BEFORE_STOP, target : this.xnode } ) & X.Callback.PREVENT_DEFAULT ){\r
- return;\r
- };\r
- opt_goEndPosition && this.tick( this.startTime + this.duration );\r
- unregisterQueue( this );\r
- this.xnode.dispatch( { type : X.Dom.Event.ANIME_STOP, target : this.xnode } ); \r
- },\r
- tick :\r
- transition ?\r
- (function( time ){\r
- var ratio = ( time - this.startTime ) / this.duration,\r
- list = this.list,\r
- xnode = this.xnode,\r
- css;\r
- if( this.state === 1 ){\r
- this.state = 2;\r
- calculateCSS( css = {}, list );\r
- css[ transformOrigin ] = '0 0';\r
- css[ transition.Property ] = this._transProp;\r
- css[ transition.Delay ] = '0';\r
- css[ transition.Duration ] = this.duration + 'ms';\r
- css[ transition.TimingFunction ] = this.timming;\r
- xnode.css( css );\r
- delete this._transProp; \r
- } else\r
- if( this.state === 2 ){\r
- this.state = 3;\r
- css = {};\r
- css[ transform ] = this._transform + translateZ;\r
- xnode.css( css )\r
- .listenOnce( transition.End, xnode, this.onTransitionEnd )\r
- .dispatch( { type : X.Dom.Event.ANIME_START, ratio : 1, target : xnode } );\r
- this.startTime = time;\r
- } else\r
- if( 1 <= ratio ){\r
- css = {};\r
- css[ transform ] = this._transform; // GPU support off\r
- delete this._transform;\r
- list.length = 0;\r
- xnode.css( css )\r
- .unlisten( transition.End, xnode, this.onTransitionEnd );\r
- } else {\r
- xnode.dispatch( { type : X.Dom.Event.ANIME, ratio : rario, target : xnode } );\r
- };\r
- }) :\r
- (function( time ){\r
- var offset = time - this.startTime,\r
- ratio = offset / this.duration,\r
- list = this.list,\r
- xnode = this.xnode,\r
- css;\r
- if( 1 <= ratio ){\r
- this.state = 0;\r
- calculateCSS( css = {}, list, 1, offset, this.duration );\r
- list.length = 0;\r
- xnode.css( css )\r
- .dispatch( { type : X.Dom.Event.ANIME, ratio : 1, target : xnode } );\r
- xnode.dispatch( { type : X.Dom.Event.ANIME_END, ratio : 1, target : xnode } );\r
- } else {\r
- this.state = 3;\r
- calculateCSS( css = {}, list, ratio, offset, this.duration );\r
- xnode.css( css )\r
- .dispatch( { type : X.Dom.Event.ANIME, ratio : rario, target : xnode } );\r
- };\r
- }),\r
- onTransitionEnd : transition && (function(){\r
- this.dispatch( { type : X.Dom.Event.ANIME, ratio : 1, target : this.xnode } );\r
- return this.dispatch( { type : X.Dom.Event.ANIME_END, ratio : 1, target : this.xnode } );\r
- }),\r
- /*\r
- * transisitonProperty を集める\r
- * trasform を集める\r
- */\r
- calculateCSS :\r
- transition ?\r
- (function( css, list ){\r
- var i = 0,\r
- l = list.length,\r
- prop = [],\r
- data, type, transX, transY, _transX, _transY;\r
- for( ; i < l; ++i ){\r
- data = list[ i ];\r
- type = data[ 0 ];\r
- switch( type ){\r
- case 'translateX' :\r
- transX = data[ 2 ];\r
- _transX = data[ 1 ];\r
- break;\r
- case 'translateY' :\r
- transY = data[ 2 ];\r
- _transY = data[ 1 ];\r
- break;\r
- default :\r
- css[ type ] = data[ 1 ];\r
- prop[ prop.length ] = type;\r
- };\r
- };\r
- if( transX || transY ){\r
- prop[ prop.length ] = cssVendor + 'transform';\r
- if( transX && transY ){\r
- css[ transform ] = cssVendor + 'translate(' + transX + ',' + transY + ')' + translateZ;\r
- this._transform = cssVendor + 'translate(' + _transX + ',' + _transY + ')';\r
- \r
- } else\r
- if( transX ){\r
- css[ transform ] = cssVendor + 'translateX(' + transX + ')' + translateZ;\r
- this._transform = cssVendor + 'translateX(' + _transX + ')';\r
- } else\r
- if( transY ){\r
- css[ transform ] = cssVendor + 'translateY(' + transY + ')' + translateZ;\r
- this._transform = cssVendor + 'translateY(' + _transY + ')';\r
- }; \r
- };\r
- this._transProp = prop.join( ',' );\r
- }) :\r
- transform ?\r
- (function( css, list, ratio, time, duration ){\r
- var i = 0, l = list.length,\r
- easing = this.timming,\r
- data, type, transX, transY;\r
- for( ; i < l; ++i ){\r
- data = list[ i ];\r
- type = data[ 0 ];\r
- switch( type ){\r
- case 'translateX' :\r
- transX = ratio === 1 ? data[ 1 ] : easing( time, data[ 2 ], data[ 3 ], duration );\r
- break;\r
- case 'translateY' :\r
- transY = ratio === 1 ? data[ 1 ] : easing( time, data[ 2 ], data[ 3 ], duration );\r
- break;\r
- default :\r
- css[ type ] = ratio === 1 ? data[ 1 ] : easing( time, data[ 2 ], data[ 3 ], duration );\r
- };\r
- };\r
- if( transX && transY ){\r
- this._transform = cssVendor + 'translate(' + transX + ',' + transY + ')';\r
- css[ transform ] = this._transform + translateZ;\r
- } else\r
- if( transX ){\r
- this._transform = cssVendor + 'translateX(' + transX + ')';\r
- css[ transform ] = this._transform + translateZ;\r
- } else\r
- if( transY ){\r
- this._transform = cssVendor + 'translateY(' + transY + ')';\r
- css[ transform ] = this._transform + translateZ;\r
- };\r
- }) :\r
- (function( css, list, l, ratio, time, duration ){\r
- var data,\r
- easing = this.timming;\r
- for( ; l; ){\r
- data = list[ --l ];\r
- css[ data[ 0 ] ] = ratio === 1 ? data[ 1 ] : easing( time, data[ 2 ], data[ 3 ], duration );\r
- };\r
- })\r
-});\r
-\r
-function Liner( t, b, c, d ){ \r
- return c * t / d + b;\r
-};\r
-\r
-// original :\r
-// https://github.com/arian/cubic-bezier/blob/master/index.js, MIT License\r
-function CubicBezier(x1, y1, x2, y2, t, epsilon){\r
- var x = t, t0 = 0, t1 = 1, t2 = x, d2, i = 0;\r
-\r
- // First try a few iterations of Newton's method -- normally very fast.\r
- for (; i < 8; i++){\r
- x2 = CubicBezier.curveX(x1,x2,t2) - x;\r
- if (ABS(x2) < epsilon) return CubicBezier.curveY(y1, y2, t2);\r
- d2 = CubicBezier.derivativeCurveX( x1, x2, t2);\r
- if (ABS(d2) < 1e-6) break;\r
- t2 = t2 - x2 / d2;\r
- };\r
- if (x < t0) return CubicBezier.curveY(y1, y2, t0);\r
- if (x > t1) return CubicBezier.curveY(y1, y2, t1);\r
- \r
- t2 = x;\r
- \r
- // Fallback to the bisection method for reliability.\r
- while (t0 < t1){\r
- x2 = CubicBezier.curveX(x1,x2,t2);\r
- if (ABS(x2 - x) < epsilon) return CubicBezier.curveY(y1, y2, t2);\r
- if (x > x2) t0 = t2;\r
- else t1 = t2;\r
- t2 = (t1 - t0) * .5 + t0;\r
- };\r
- // Failure\r
- return CubicBezier.curveY(y1, y2, t2);\r
-\r
-};\r
-CubicBezier.curveX = function( x1, x2, t ){\r
- var v = 1 - t;\r
- return 3 * v * v * t * x1 + 3 * v * t * t * x2 + t * t * t;\r
-};\r
-CubicBezier.curveY = function( y1, y2, t ){\r
- var v = 1 - t;\r
- return 3 * v * v * t * y1 + 3 * v * t * t * y2 + t * t * t;\r
-};\r
-CubicBezier.derivativeCurveX = function( x1, x2, t ){\r
- var v = 1 - t;\r
- return 3 * (2 * (t - 1) * t + v * v) * x1 + 3 * (- t * t * t + 2 * v * t) * x2;\r
-};\r
-\r
-\r
-\r
-// export\r
-X.Dom.Node.prototype.anime = function(){\r
- if( !this._anime ) this._anime = new AnimationQueue( this );\r
- this._anime.init.apply( this._anime, arguments );\r
- return this;\r
-};\r
-X.Dom.Node.prototype.stop = function(){\r
- if( !this._anime ) return this;\r
- this._anime.stop.apply( this._anime, arguments );\r
- return this;\r
-};\r
-\r
-return {\r
- X : 1,\r
- Y : 2,\r
- MOVE : 4,\r
- WIDTH : 8,\r
- HEIGHT : 16,\r
- SIZE : 32,\r
- OPACITY : 64\r
-};\r
- \r
-})( window, document, navigator, Math );\r
-\r
-\r
OSDN Git Service
