<script type="text/javascript" src="js/dom/10_XDom.js"></script>\r
<script type="text/javascript" src="js/dom/11_XDomNode.js"></script>\r
<script type="text/javascript" src="js/dom/12_XDomEvent.js"></script>\r
- <script type="text/javascript" src="js/dom/13_XDomStyle.js"></script>\r
+ <script type="text/javascript" src="js/dom/13_XDomBoxModel.js"></script>\r
<script type="text/javascript" src="js/dom/14_XDomAttr.js"></script>\r
- <!-- <script type="text/javascript" src="js/dom/15_XDomAnime.js"></script> -->\r
- <script type="text/javascript" src="js/dom/16_XDomNodeList.js"></script>\r
- <script type="text/javascript" src="js/dom/17_XDomQuery.js"></script>\r
- <script type="text/javascript" src="js/dom/18_XDomParser.js"></script>\r
+ <script type="text/javascript" src="js/dom/15_XDomStyle.js"></script>\r
+ <!-- <script type="text/javascript" src="js/dom/16_XDomAnime.js"></script> -->\r
+ <script type="text/javascript" src="js/dom/17_XDomNodeList.js"></script>\r
+ <script type="text/javascript" src="js/dom/18_XDomQuery.js"></script>\r
+ <script type="text/javascript" src="js/dom/19_XDomParser.js"></script>\r
\r
\r
<script type="text/javascript" src="js/ui/00_XUI.js"></script>\r
\r
/*\r
* JavaScript 1.6, Array.indexOfを下位互換実装する\r
+ * original\r
* http://www.inazumatv.com/contents/archives/7965\r
*/\r
\r
-Array.prototype.indexOf || (Array.prototype.indexOf = function (searchElement /*, fromIndex */ ) {\r
- if( this == null ){\r
- //throw new TypeError();\r
- };\r
- var t = Object(this);\r
- var len = t.length >>> 0;\r
- if (len === 0) return -1;\r
+Array.prototype.indexOf || (Array.prototype.indexOf = function( searchElement, fromIndex ){\r
+ var l = this.length >>> 0,\r
+ i = 0;\r
+ if( l === 0 ) return -1;\r
\r
- var n = 0;\r
- if (arguments.length > 1) {\r
- n = Number(arguments[1]);\r
- if (n != n) { // shortcut for verifying if it's NaN\r
- n = 0;\r
- } else if (n != 0 && n != Infinity && n != -Infinity) {\r
- n = (n > 0 || -1) * Math.floor(Math.abs(n));\r
- }\r
- }\r
- if (n >= len) {\r
- return -1;\r
- }\r
- var k = n >= 0 ? n : Math.max(len - Math.abs(n), 0);\r
- for (; k < len; k++) {\r
- if (t[k] === searchElement) {\r
- return k;\r
- }\r
- }\r
+ if( fromIndex ){\r
+ i = fromIndex || 0;\r
+ i = i === -Infinity ? 0 : Math.floor( i < 0 ? -i : i );\r
+ if( l <= i ) return -1;\r
+ };\r
+\r
+ for( i = 0 <= i ? i : 0 < l + i ? l + i : 0; i < l; ++i ){\r
+ if( this[ i ] === searchElement ) return i;\r
+ };\r
return -1;\r
});\r
\r
return uid;\r
},\r
once : function( time, args1, args2, args3 ){\r
- X.Timer.add( time, 1, args1, args2, args3 );\r
+ return X.Timer.add( time, 1, args1, args2, args3 );\r
},\r
remove : function( uid ){\r
- var queue,\r
- list = TICKET_LIST,\r
+ var list = TICKET_LIST,\r
i = list.length,\r
l = i,\r
- f;\r
+ f, q;\r
for( ; i; ){\r
- if( ( queue = list[ --i ] )[ INDEX_UID ] === uid ){\r
+ if( ( q = list[ --i ] )[ INDEX_UID ] === uid ){\r
list.splice( i, 1 );\r
- f = queue[ INDEX_CALLBACK ];\r
+ f = q[ INDEX_CALLBACK ];\r
f.kill && f.kill();\r
- ( /* queue[ INDEX_COUNT ] <= next || */ l === 1 ) && update();\r
- queue.length = 0;\r
+ ( /* q[ INDEX_COUNT ] <= next || */ l === 1 ) && update();\r
+ q.length = 0;\r
break;\r
};\r
};\r
- }\r
+ },\r
\r
// string only ie4-\r
- ,_loop : X.UA.IE && X.UA.IE < 5 && (function(){\r
- var _loop = loop;\r
+ _loop : X.UA.IE && X.UA.IE < 5 && (function( r ){\r
loop = 'X.Timer._loop()';\r
- return _loop;\r
- })()\r
+ return r;\r
+ })( loop ),\r
\r
- ,requestFrame : function( args1, args2, args3 ){\r
+ requestFrame : function( args1, args2, args3 ){\r
var i = REQUEST_FRAME_LIST.length,\r
f;\r
i === 0 && ( requestID = ( enterFrame ? enterFrame( onEnterFrame ) : X.Timer.add( 16, 1, onEnterFrame ) ) );\r
},\r
cancelFrame : function( uid ){\r
var list = REQUEST_FRAME_LIST,\r
- i = list.length,\r
- l = i,\r
+ l = list.length,\r
+ i = l,\r
f;\r
for( ; i; ){\r
if( ( f = list[ --i ] ).uid < uid ) break;\r
list.splice( i, 1 );\r
delete f.uid;\r
f.kill && f.kill();\r
- l === 1 && cancelFrame ? cancelFrame( requestID ) : X.Timer.remove( requestID );\r
- break; \r
+ l === 1 && ( cancelFrame ? cancelFrame( requestID ) : X.Timer.remove( requestID ) );\r
+ break;\r
};\r
};\r
}\r
+/**\r
+ * use X.Callback\r
+ */\r
+\r
X.EventDispatcher =\r
X.Class.create(\r
'EventDispatcher',\r
_listeners : null,\r
_dispatching : 0, // dispatch 中の unlisten で使用\r
_unlistens : null, // dispatch 中の unlisten で使用\r
- _needsIndex : false,\r
+ _needsIndex : false, // listening で index を返す\r
listen : function( type, arg1, arg2, arg3 ){\r
var list = this._listeners,\r
f;\r
if( this.listening( type, arg1, arg2, arg3 ) ) return this;\r
if( !list ) list = this._listeners = {};\r
if( !( list = list[ type ] ) ) list = this._listeners[ type ] = [];\r
- list[ list.length ] = f = X.Callback.create( arg1, arg2, arg3 );\r
+ list[ list.length ] = f =\r
+ ( arg1 && !arg2 ) ?\r
+ arg1 :\r
+ X.Callback.create( arg1, arg2, arg3 );\r
f.once = X.EventDispatcher._once;\r
return this;\r
},\r
this._unlistens[ this._unlistens.length ] = f;\r
} else {\r
delete f.once;\r
- f.kill && f.kill();\r
+ f.kill === X.Callback._kill && f.kill();\r
list.splice( i, 1 );\r
if( !list.length ){\r
delete this._listeners[ type ];\r
* _dispatching では その深さを保存する\r
* _dispatching が 0 のときに unlistens を削除する\r
* \r
+ * dispatch( 250, e );\r
+ * とすると、タイマー後に dispatch する。\r
*/\r
- dispatch : function( e ){\r
+ dispatch : function( e, e1 ){\r
// dispatch 中の listen は？\r
var list = this._listeners,\r
ret = X.Callback.NONE,\r
if( this._unlistens.length && this._unlistens.indexOf( f ) !== -1 ){\r
continue;\r
};\r
- \r
- r = f( e );\r
+\r
+ r = typeof f === 'function' ? f( e ) : f.handleEvent( e );\r
\r
if( f.once === true || r & X.Callback.UN_LISTEN ){\r
this._unlistens[ this._unlistens.length ] = f;\r
};\r
\r
return ret;\r
+ },\r
+ \r
+ asyncDispatch : function( delay, e ){\r
+ return X.Timer.once( delay, this, this.dispatch, [ e ] );\r
}\r
- }//, onKillCallback( instance )\r
+ }\r
);\r
\r
X.EventDispatcher._once = false;\r
{\r
ready : false,\r
active : true,\r
+ _root : null,\r
+ \r
getPointerPosition : function(){\r
\r
},\r
delete X.Dom._init;\r
X.Dom.ready = true;\r
\r
- /* if( X.UA.IE ) */ X.Dom._view = ( document.compatMode !== "CSS1Compat" ? document.body : document.documentElement );\r
+ /* if( X.UA.IE ) */ X.Dom._root = ( document.compatMode !== "CSS1Compat" ? document.body : document.documentElement );\r
size = X.Dom.getSize();\r
\r
- X.Timer.once( 0, X.Dom, X.Dom.dispatch, [ { type : X.Dom.Event.DOM_PRE_INIT, w : size[ 0 ], h : size[ 1 ] } ] );\r
-\r
+ X.Dom.asyncDispatch( 0, { type : X.Dom.Event.DOM_PRE_INIT, w : size[ 0 ], h : size[ 1 ] } );\r
\r
X.Dom.listenOnce( X.Dom.Event.DOM_PRE_INIT, function(){\r
var size = X.Dom.getSize();\r
- X.Timer.once( 0, X.Dom, X.Dom.dispatch, [ { type : X.Dom.Event.DOM_INIT, w : size[ 0 ], h : size[ 1 ] } ] );\r
+ X.Dom.asyncDispatch( 0, { type : X.Dom.Event.DOM_INIT, w : size[ 0 ], h : size[ 1 ] } );\r
} );\r
\r
- \r
X.Dom.listenOnce( X.Dom.Event.DOM_INIT, function(){\r
var size = X.Dom.getSize();\r
\r
X.Timer.add( 100, resize ) :\r
X.Dom.Node._window.listen( 'resize', resize ); \r
\r
- X.Timer.once( 0, X.Dom, X.Dom.dispatch, [ { type : X.Dom.Event.XDOM_READY, w : size[ 0 ], h : size[ 1 ] } ] );\r
+ X.Dom.asyncDispatch( 0, { type : X.Dom.Event.XDOM_READY, w : size[ 0 ], h : size[ 1 ] } );\r
} );\r
\r
return X.Callback.UN_LISTEN;\r
},\r
- // _view : null, for ie\r
+\r
getSize :\r
X.UA.IE ?\r
- new Function( 'return [ X.Dom._view.clientWidth, X.Dom._view.clientHeight ]' ) :\r
+ new Function( 'return [ X.Dom._root.clientWidth, X.Dom._root.clientHeight ]' ) :\r
new Function( 'return [ window.innerWidth, window.innerHeight ]' ),\r
getScrollPosition :\r
window.pageXOffset !== undefined ?\r
new Function( 'return [window.pageXOffset,window.pageYOffset]' ) :\r
window.scrollLeft !== undefined ?\r
new Function( 'return [window.scrollLeft,window.scrollTop]') :\r
- new Function( 'return [X.Dom._view.scrollLeft,X.Dom._view.scrollTop]' ),\r
+ new Function( 'return [X.Dom._root.scrollLeft,X.Dom._root.scrollTop]' ),\r
getDocumentSize : function(){\r
// Opera は互換モードでは document.body.scrollHeight、標準モードでは document.documentElement.scrollHeight でページの高さが取れる。と思ってたんだけど、例外があった。\r
// http://orera.g.hatena.ne.jp/edvakf/20100515/1273908051\r
return [\r
- X.Dom._view.scrollWidth || X.Dom._view.offsetWidth,\r
- X.Dom._view.scrollHeight || X.Dom._view.offsetHeight\r
+ X.Dom._root.scrollWidth || X.Dom._root.offsetWidth,\r
+ X.Dom._root.scrollHeight || X.Dom._root.offsetHeight\r
];\r
}\r
}\r
ATTR : 16 // _getCharSize, width, height, x, y\r
};\r
\r
-// width, height は css or attr に数値があり、overflow:hidden または 子がない場合にその値を返す\r
+X.Dom.getAbsolutePath = function( path ){\r
+ var url;\r
+ //path = path.split( '?' )[ 0 ].split( '#' )[ 0 ];\r
+ if( path.indexOf( 'http' ) === 0 ) return path;\r
+ if( path.indexOf( '//' ) === 0 ) return location.protocol + path;\r
+ if( path.charAt( 0 ) === '/' ) return location.protocol + '//' + location.host + path;\r
+ url = location.href.split( '?' )[ 0 ].split( '#' )[ 0 ].split( '/' );\r
+ --url.length;\r
+ // ../\r
+ return url.join( '/' ) + '/' + path;\r
+};\r
+\r
+// width, height は css or attr に数値があり Block 要素であり、overflow:hidden または 子がない場合にその値を返す\r
\r
// X.Timer.once( .. onload );\r
_styleText : '',\r
\r
Constructor : function( v ){\r
- var xnodes, xnode, parent, uid = Node._chashe.length;\r
+ var css, xnodes, xnode, parent, uid = Node._chashe.length;\r
\r
if( Node._newByTag ){\r
Node._newByTag = false;\r
this._tag = v;\r
this._xnodeType = 1;\r
arguments[ 1 ] && this.attr( arguments[ 1 ] );\r
- arguments[ 2 ] && this.css( arguments[ 2 ] );\r
+ css = arguments[ 2 ];\r
+ this[ X.Type.isString( css ) ? 'cssText' : 'css' ]( css );\r
} else\r
if( Node._newByText ){\r
Node._newByText = false;\r
return Node.none;\r
case Node.IS_WINDOW :\r
case Node.IS_DOCUMENT :\r
+ case Node.IS_IMAGE :\r
this._rawNode = v;\r
this._xnodeType = 2;\r
break;\r
Node.IS_XNODE_LIST = 7;\r
Node.IS_WINDOW = 8;\r
Node.IS_DOCUMENT = 9;\r
+Node.IS_IMAGE = 10;\r
\r
Node._getType = function( v ){\r
if( v === '' ) return Node.IS_STRING;\r
if( !v ) return 0;\r
if( v === window ) return Node.IS_WINDOW;\r
if( v === document ) return Node.IS_DOCUMENT;\r
+ if( v.constructor === window.Image ) return Node.IS_IMAGE;\r
if( v.constructor === Node ) return Node.IS_XNODE;\r
if( v.constructor === X.Dom.NodeList ) return Node.IS_XNODE_LIST;\r
if( v.tagName ) return Node.IS_RAW_HTML;\r
return frg;\r
};\r
};\r
+ \r
+/*\r
+ * http://d.hatena.ne.jp/uupaa/20080718/1216362040\r
+ * DOM Rangeが使える環境(Firefox2+,Opera9+,Safari3+)なら、innerHTMLいらずで、ガーって書けます。\r
+ * return document.createRange().createContextualFragment("<div style='background-color: blue; height: 100px; width: 100px;'><select><option></option></select></div>");\r
+ */\r
+ \r
return node;\r
}) :\r
document.all ? (function( skipRemove, skipContainsDirty ){\r
elm.appendChild( document.createElement( tag ) );\r
xnode = new Node( elm.lastChild );\r
opt_attrs && xnode.attr( opt_attrs );\r
- opt_css && xnode.css( opt_css );\r
+ opt_css && xnode[ X.Type.isString( opt_css ) ? 'cssText' : 'css' ]( opt_css );\r
} else\r
if( document.all ){\r
Node._newByTag = true;\r
};\r
children.length = 0;\r
};\r
+ this._xnodeType === 1 && this.unlisten(); // イベントの退避\r
if( elm ){\r
- this._xnodeType === 1 && this.unlisten(); // イベントの退避\r
+ this._xnodeType === 1 && ( elm.innerHTML = '' );\r
// stop()\r
// remove() empty()\r
- elm.innerHTML = '';\r
+ \r
document.removeChild && this.parent._rawNode.removeChild( elm );\r
};\r
delete Node._chashe[ this._uid ];\r
return this._text;\r
};\r
\r
-/* --------------------------------------\r
- * Width, Height\r
- * overflow:hidden かつ width か height が設定されていたら、再描画しないでその値を返す\r
- */\r
-Node.prototype.width = function(){\r
- var elm;\r
- if( !this.parent ) return 0;\r
- if( document.getElementById ){\r
- // this.css( X.Dom.Style.Unit.px, 'width' );\r
- return ( elm = this._rawNode ) ? elm.offsetWidth : 0;\r
- } else\r
- if( document.all ){\r
- if( !( elm = this._ie4getRawNode() ) ) return 0;\r
- Node.root._ie4reserved === true && Node.root._ie4startUpdate();\r
- return elm.offsetWidth;\r
- } else {\r
- \r
- };\r
-};\r
-\r
-Node.prototype.height = function(){\r
- var elm;\r
- if( !this.parent ) return 0;\r
- if( document.getElementById ){\r
- // this.css( X.Dom.Style.Unit.px, 'height' );\r
- return ( elm = this._rawNode ) ? elm.offsetHeight : 0;\r
- } else\r
- if( document.all ){\r
- if( !( elm = this._ie4getRawNode() ) ) return 0;\r
- Node.root._ie4reserved === true && Node.root._ie4startUpdate();\r
- return elm.offsetHeight; \r
- } else {\r
- \r
- };\r
-};\r
-\r
-/* --------------------------------------\r
- * x, y\r
- * position:absolute かつ x か y が設定されていたら、再描画しないでその値を返す\r
- */\r
-Node.prototype.x = function(){\r
- var elm;\r
- if( !this.parent ) return 0;\r
- if( document.getElementById ){\r
- // this.css( X.Dom.Style.Unit.px, 'left' );\r
- // this.css( X.Dom.Style.Unit.px, 'transisitonX' );\r
- return ( elm = this._rawNode ) ? elm.offsetLeft : 0;\r
- } else\r
- if( document.all ){\r
- if( !( elm = this._ie4getRawNode() ) ) return 0;\r
- Node.root._ie4reserved === true && Node.root._ie4startUpdate();\r
- return elm.offsetLeft; \r
- } else {\r
- \r
- };\r
-};\r
-\r
-Node.prototype.y = function(){\r
- var elm;\r
- if( !this.parent ) return 0;\r
- if( document.getElementById ){\r
- // this.css( X.Dom.Style.Unit.px, 'top' );\r
- // this.css( X.Dom.Style.Unit.px, 'transisitonY' );\r
- return ( elm = this._rawNode ) ? elm.offsetTop : 0;\r
- } else\r
- if( document.all ){\r
- if( !( elm = this._ie4getRawNode() ) ) return 0;\r
- Node.root._ie4reserved === true && Node.root._ie4startUpdate();\r
- return elm.offsetTop; \r
- } else {\r
- \r
- };\r
-};\r
-\r
//})( window, document );\r
\r
\r
this.clientY = e.clientY;
//this.screenX = e.screenX;
//this.screenY = e.screenY;
- this.pageX = e.clientX + document.body.scrollLeft;
- this.pageY = e.clientY + document.body.scrollTop;
+
+ if( X.Dom._root ){ // uuu...
+ this.pageX = e.clientX + X.Dom._root.scrollLeft;
+ this.pageY = e.clientY + X.Dom._root.scrollTop;
+ };
if( X.UA.IE && 5 <= X.UA.IE ){
this.offsetX = e.offsetX;
};
};
-X.Dom.Event.DOM_PRE_INIT = 0;
-X.Dom.Event.DOM_INIT = 1;
-X.Dom.Event.XDOM_READY = 2;
-X.Dom.Event.VIEW_ACTIVATE = 3;
-X.Dom.Event.VIEW_DEACTIVATE = 4;
-X.Dom.Event.VIEW_RESIZED = 5;
-X.Dom.Event.COMMIT_UPDATE = 6;
-X.Dom.Event.ANIME_BEFORE_START = 7;
-X.Dom.Event.ANIME_START = 8;
-X.Dom.Event.ANIME = 9;
-X.Dom.Event.ANIME_END = 10;
-X.Dom.Event.ANIME_BEFORE_STOP = 11; // xnode.stop() のみ、指定時間による停止では呼ばれない
-X.Dom.Event.ANIME_STOP = 12;
-X.Dom.Event._LAST_EVENT = 12; // ここに書いてあるイベントの最後の値 X.Dom.Event.ANIME_STOP と同じ値
+X.Dom.Event.DOM_PRE_INIT = 0;
+X.Dom.Event.DOM_INIT = 1;
+X.Dom.Event.XDOM_READY = 2;
+X.Dom.Event.VIEW_ACTIVATE = 3;
+X.Dom.Event.VIEW_DEACTIVATE = 4;
+X.Dom.Event.VIEW_RESIZED = 5;
+// before_commit_update
+X.Dom.Event.COMMIT_UPDATE = 6;
+// hash_change
+// before_unload
+// X.Dom.Event.LOAD_BEFORE_STOP = 7;
+X.Dom.Event.LOAD_ASSET_COMPLETE = 7;
+X.Dom.Event.LOAD_ASSET_ERROR = 8;
+X.Dom.Event.ANIME_BEFORE_START = 9;
+X.Dom.Event.ANIME_START = 10;
+X.Dom.Event.ANIME = 11;
+X.Dom.Event.ANIME_END = 12;
+X.Dom.Event.ANIME_BEFORE_STOP = 13; // xnode.stop() のみ、指定時間による停止では呼ばれない
+X.Dom.Event.ANIME_STOP = 14;
+X.Dom.Event._LAST_EVENT = 14; // ここに書いてあるイベントの最後の値 X.Dom.Event.ANIME_STOP と同じ値
-X.Dom.Event._chashe = [ {}, {}, null, {} ]; // window, document, documentElement, body
-X.Dom.Event._chashe2 = [];
X.Dom.Node.prototype.listen = function( type, arg2, arg3, arg4 /* [ listener || ( context + function ) || function ][ arguments ] */ ){
var elm;
--- /dev/null
+X.Dom.BoxModel = {
+ CONTENT_BOX : 1,
+ PADDING_BOX : 2,
+ BORDER_BOX : 3,
+ MARGIN_BOX : 4,
+
+ defaultBoxModel : 0,
+ boxSizingEnabled : false
+};
+
+X.Dom.listenOnce( X.Dom.Event.DOM_INIT, function(){
+
+ var elm = Node._systemNode._rawNode;
+ elm.style.cssText = 'width:10px;padding:1px;border:2px solid #0;margin:4px;';
+
+ X.Dom.BoxModel.defaultBoxModel = elm.offsetWidth === 10 ?
+ X.Dom.BoxModel.BORDER_BOX :
+ X.Dom.BoxModel.CONTENT_BOX;
+
+ if( X.Dom.BoxModel.defaultBoxModel === X.Dom.BoxModel.CONTENT_BOX ){
+ elm.style.cssText += 'box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing: border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;';
+
+ X.Dom.BoxModel.boxSizingEnabled = elm.offsetWidth === 10;
+ };
+
+
+ // padding
+ // border
+ // margin
+ // top
+
+
+});
+
+/* --------------------------------------
+ * Width, Height
+ * overflow:hidden かつ width か height が設定されていたら、再描画しないでその値を返す
+ */
+Node.prototype.width = function(){
+ var elm;
+ if( !this.parent ) return 0;
+ if( document.getElementById ){
+ // this.css( X.Dom.Style.Unit.px, 'width' );
+ return ( elm = this._rawNode ) ? elm.offsetWidth : 0;
+ } else
+ if( document.all ){
+ if( !( elm = this._ie4getRawNode() ) ) return 0;
+ Node.root._ie4reserved === true && Node.root._ie4startUpdate();
+ return elm.offsetWidth;
+ } else {
+
+ };
+};
+
+Node.prototype.height = function(){
+ var elm;
+ if( !this.parent ) return 0;
+ if( document.getElementById ){
+ // this.css( X.Dom.Style.Unit.px, 'height' );
+ return ( elm = this._rawNode ) ? elm.offsetHeight : 0;
+ } else
+ if( document.all ){
+ if( !( elm = this._ie4getRawNode() ) ) return 0;
+ Node.root._ie4reserved === true && Node.root._ie4startUpdate();
+ return elm.offsetHeight;
+ } else {
+
+ };
+};
+
+/* --------------------------------------
+ * x, y
+ * position:absolute かつ x か y が設定されていたら、再描画しないでその値を返す。
+ * position:absolute の指定で自動で top,left を補う必要あり？
+ * 親要素 border 外側からの値。 IE, Firefox, Safari, Chrome の offsetLeft/Topでは、border 内側なので補正する。
+ * transformX, Y は加える？ アニメーション中は？
+ */
+// X.Dom.Style.transform,
+Node.prototype.x = function(){
+ var elm;
+ if( !this.parent ) return 0;
+ if( document.getElementById ){
+ // this.css( X.Dom.Style.Unit.px, 'left' );
+ // this.css( X.Dom.Style.Unit.px, 'translateX' );
+ return ( elm = this._rawNode ) ? elm.offsetLeft : 0;
+ } else
+ if( document.all ){
+ if( !( elm = this._ie4getRawNode() ) ) return 0;
+ Node.root._ie4reserved === true && Node.root._ie4startUpdate();
+ return elm.offsetLeft;
+ } else {
+
+ };
+};
+
+Node.prototype.y = function(){
+ var elm;
+ if( !this.parent ) return 0;
+ if( document.getElementById ){
+ // this.css( X.Dom.Style.Unit.px, 'top' );
+ // this.css( X.Dom.Style.Unit.px, 'transisitonY' );
+ return ( elm = this._rawNode ) ? elm.offsetTop : 0;
+ } else
+ if( document.all ){
+ if( !( elm = this._ie4getRawNode() ) ) return 0;
+ Node.root._ie4reserved === true && Node.root._ie4startUpdate();
+ return elm.offsetTop;
+ } else {
+
+ };
+};
\ No newline at end of file
+++ /dev/null
-
-
-/*
- * style 値の変更は、enterFrame 後にまとめて適用
- * width(), height(), x(), y() 1em の取得時にも適用
- * css3 の ie用 fix は X.UI レベルで行う
- *
- * use X.Dom.Event
- */
-X.Dom.Style = {
-
- Type : {
- LENGTH : 1,
- PERCENT : 2,
- COLOR : 2 < 2,
- U_DECIMAL : 2 < 3,
- NUMERICAL : 2 < 4,
- BOOLEAN : 2 < 5,
- QUARTET : 2 < 6,
- URL : 2 < 7,
- FONT_NAME : 2 < 8,
- TIME : 2 < 9,
- CONTENT : 2 < 10,
- LIST : 2 < 11,
- AUTO : 2 < 12,
- COMBI : 2 < 13
- },
-
- SPECIAL_VALUES : {
- AUTO : Number.POSITIVE_INFINITY,
- FULL : X.Dom // something unigue value; 100%
- },
-
- PropNo : {},
-
- UNIT : {
- 'px' : 0,
- 'em' : 1,
- 'cm' : 2,
- 'mm' : 3,
- 'in' : 4,
- '%' : 5,
- 'pct' : 5,
- 'ms' : 6,
- 's' : 7,
- '#' : 8,
- 'rgb' : 9,
- 'rgba' : 10
- },
-
- /* font-size -> fontSize */
- _DICTIONARY_CAMELIZE : {},
-
- camelize : function( cssProp ){
- var me = X.Dom.Style,
- parts, l, i, camelized;
-
- if( camelized = me._DICTIONARY_CAMELIZE[ cssProp ] ) return camelized;
- parts = cssProp.split( ' ' ).join( '' ).split( '-' );
- l = parts.length;
- if( l === 1 ) return parts[ 0 ];
-
- camelized = cssProp.charAt(0) === '-'
- ? parts[ 0 ].charAt( 0 ).toUpperCase() + parts[ 0 ].substring( 1 )
- : parts[ 0 ];
-
- for( i = 1; i < l; ++i ){
- camelized += parts[ i ].charAt( 0 ).toUpperCase() + parts[ i ].substring( 1 );
- };
- return me._DICTIONARY_CAMELIZE[ cssProp ] = camelized;
- },
-
- /* fontSize -> font-size */
- /*
- REG_LARGE : /[A-Z]/g,
- uncamelize: function( str ){
- return str.split( ' ' ).join( '' ).replace( X.Dom.Style.REG_LARGE, '-$&' ).toLowerCase();
- }, */
-
- CHAR_CODE_A : 'A'.charCodeAt( 0 ),
-
- _DICTIONARY_UNCAMELIZE : {},
-
- uncamelize : function( str ){
- var me = X.Dom.Style,
- A = me.CHAR_CODE_A,
- Z = A + 25,
- uncamelized, l, chr, code;
- str = str.split( ' ' ).join( '' );
- if( uncamelized = me._DICTIONARY_UNCAMELIZE[ str ] ) return uncamelized;
- uncamelized = '';
- for( i = 0, l = str.length; i < l; ++i ){
- chr = str.charAt( i );
- code = chr.charCodeAt( 0 );
- uncamelized += ( A <= code && code <= Z ) ? '-' + chr : chr;
- };
- return me._DICTIONARY_UNCAMELIZE[ str ] = uncamelized.toLowerCase();
- },
-
- objToCssText : function( obj ){
- var css = [],
- me = X.Dom.Style,
- uncamelize = me.uncamelize,
- VENDER_PREFIX = me.VENDER_PREFIX,
- FIX_PROP = me.SPECIAL_FIX_PROP,
- SPECIAL_FIX = me.SPECIAL_FIX,
- p, name, sp;
- for( p in obj ){
- name = uncamelize( p );
- if( FIX_PROP[ name ] ){
- sp = 1;
- } else {
- css[ css.length ] = [ VENDER_PREFIX[ name ] || name, obj[ p ] ].join( ':' );
- };
- };
- sp && ( css[ css.length ] = SPECIAL_FIX( obj ) );
- return css.join( ';' );
- },
-
- _UNIT_RATIO : null,
- _FONT_SIZE_RATIO : null,
-
- absoluteFontSizeToPx : function( fontsize ){
- return X.Dom.Style._FONT_SIZE_RATIO[ fontsize ] || 0;
- }
-
- // https://developer.mozilla.org/en-US/docs/Web/CSS/transform
- // Firefox 3.5, ie9, Opera 10.5, Safari 3.1, Chrome
- // 3D support Firefox 10, ie10, Safari 4.0, Chrome 12.0
- // transform : void 0,
-
- // https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Using_CSS_transitions
- // Chrome 1.0, Firefox 4.0, ie10, Opera 10.5, Safari 3.2
- // Android 2.1, Firefox Android 4.0, Opera Mobile 10, Safari Mobile 3.2
- // transition : void 0
-};
-
-X.Dom.Style.Option = {
- BORDER_STYLE : 'none,hidden,dotted,dashed,solid,double,groove,ridge,inset,outset'.split(','),
- POSITION_X : 'left,center,right'.split(','),
- POSITION_Y : 'top,center,bottom'.split(','),
- ALIGN : 'left,center,right,justify'.split(','),
- TEXT_DECORATION : 'none,underline,overline,line-through,blink'.split(','),
- TEXT_TRANSFORM : 'none,capitalize,lowercase,uppercase'.split(','),
- WIDTH_HEIGHT : [ 'auto' ],
- BOX_SIZING : 'content-box,padding-box,border-box'.split(',') // ,margin-box
-};
-X.Dom.Style.Props = {
- borderWidth : [ X.Dom.Dirty.REFLOW, 0, X.Dom.Style.Type.QUARTET | X.Dom.Style.Type.LENGTH ], // em [ top, right, bottom, left ]
- borderColor : [ X.Dom.Dirty.PAINT, 4, X.Dom.Style.Type.QUARTET | X.Dom.Style.Type.COLOR ], // color [ top, right, bottom, left ]
- borderStyle : [ X.Dom.Dirty.PAINT, 8, X.Dom.Style.Type.QUARTET | X.Dom.Style.Type.LIST, X.Dom.Style.Option.BORDER_STYLE ], // string [ top, right, bottom, left ]
- cornerRadius : [ X.Dom.Dirty.PAINT, 12, X.Dom.Style.Type.QUARTET | X.Dom.Style.Type.LENGTH | X.Dom.Style.Type.PERCENT ], // em, px [ top, right, bottom, left ]
- bgColor : [ X.Dom.Dirty.PAINT, 16, X.Dom.Style.Type.COLOR ], // color
- bgAlpha : [ X.Dom.Dirty.PAINT, 17, X.Dom.Style.Type.U_DECIMAL ], // 0 - 1
- bgImgUrl : [ X.Dom.Dirty.PAINT, 18, X.Dom.Style.Type.URL ], // url
- bgImgRepeatX : [ X.Dom.Dirty.PAINT, 19, X.Dom.Style.Type.BOOLEAN ], // true / false
- bgImgRepeatY : [ X.Dom.Dirty.PAINT, 20, X.Dom.Style.Type.BOOLEAN ], // true / false
- bgImgPositionX : [ X.Dom.Dirty.PAINT, 21, X.Dom.Style.Type.LENGTH | X.Dom.Style.Type.PERCENT | X.Dom.Style.Type.LIST, X.Dom.Style.Option.POSITION_X ], // em %, px, string
- bgImgPositionY : [ X.Dom.Dirty.PAINT, 22, X.Dom.Style.Type.LENGTH | X.Dom.Style.Type.PERCENT | X.Dom.Style.Type.LIST, X.Dom.Style.Option.POSITION_Y ], // em %, px, string
- shadowColor : [ X.Dom.Dirty.PAINT, 23, X.Dom.Style.Type.COLOR ], // color
- shadowAlpha : [ X.Dom.Dirty.PAINT, 24, X.Dom.Style.Type.U_DECIMAL ], // 0 - 1
- shadowOffsetX : [ X.Dom.Dirty.PAINT, 25, X.Dom.Style.Type.LENGTH ], // em
- shadowOffsetY : [ X.Dom.Dirty.PAINT, 26, X.Dom.Style.Type.LENGTH ], // em
- shadowBlur : [ X.Dom.Dirty.PAINT, 27, X.Dom.Style.Type.LENGTH ], // em
- shadowSpread : [ X.Dom.Dirty.PAINT, 28, X.Dom.Style.Type.LENGTH ], // em
- shadowInset : [ X.Dom.Dirty.PAINT, 29, X.Dom.Style.Type.BOOLEAN ], // true / false
-
- color : [ X.Dom.Dirty.PAINT, 30, X.Dom.Style.Type.COLOR ], // color
- fontFamily : [ X.Dom.Dirty.FONT, 31, X.Dom.Style.Type.FONT_NAME ], // string
- fontSize : [ X.Dom.Dirty.FONT, 32, X.Dom.Style.Type.LENGTH | X.Dom.Style.Type.PERCENT ], // em, %
- bold : [ X.Dom.Dirty.FONT, 33, X.Dom.Style.Type.BOOLEAN ], // true / false
- italic : [ X.Dom.Dirty.FONT, 34, X.Dom.Style.Type.BOOLEAN ], // true / false
- lineHeight : [ X.Dom.Dirty.FONT, 35, X.Dom.Style.Type.LENGTH | X.Dom.Style.Type.PERCENT | X.Dom.Style.Type.NUMERICAL ], // em, %,
- letterSpacing : [ X.Dom.Dirty.FONT, 36, X.Dom.Style.Type.LENGTH ], // em
- wordSpacing : [ X.Dom.Dirty.FONT, 37, X.Dom.Style.Type.LENGTH ],
- align : [ X.Dom.Dirty.FONT, 38, X.Dom.Style.Type.LIST, X.Dom.Style.Type.ALIGN ],
- decoration : [ X.Dom.Dirty.PAINT, 39, X.Dom.Style.Type.LIST, X.Dom.Style.Type.TEXT_DECORATION ],
- transform : [ X.Dom.Dirty.FONT, 40, X.Dom.Style.Type.LIST, X.Dom.Style.Type.TEXT_TRANSFORM ],
- textShadowColor : [ X.Dom.Dirty.PAINT, 41, X.Dom.Style.Type.COLOR ],
- textShadowOffsetX : [ X.Dom.Dirty.PAINT, 42, X.Dom.Style.Type.LENGTH ],
- textShadowOffsetY : [ X.Dom.Dirty.PAINT, 43, X.Dom.Style.Type.LENGTH ],
- shadowBlur : [ X.Dom.Dirty.PAINT, 44, X.Dom.Style.Type.LENGTH ],
-
- width : [ X.Dom.Dirty.REFLOW, 45, X.Dom.Style.Type.LENGTH | X.Dom.Style.Type.PERCENT, X.Dom.Style.Option.WIDTH_HEIGHT ],
- minWidth : [ X.Dom.Dirty.REFLOW, 46, X.Dom.Style.Type.LENGTH | X.Dom.Style.Type.PERCENT ],
- maxWidth : [ X.Dom.Dirty.REFLOW, 47, X.Dom.Style.Type.LENGTH | X.Dom.Style.Type.PERCENT ],
- height : [ X.Dom.Dirty.REFLOW, 48, X.Dom.Style.Type.LENGTH | X.Dom.Style.Type.PERCENT, X.Dom.Style.Option.WIDTH_HEIGHT ],
- minHeight : [ X.Dom.Dirty.REFLOW, 49, X.Dom.Style.Type.LENGTH | X.Dom.Style.Type.PERCENT ],
- maxHeight : [ X.Dom.Dirty.REFLOW, 50, X.Dom.Style.Type.LENGTH | X.Dom.Style.Type.PERCENT ],
- padding : [ X.Dom.Dirty.REFLOW, 51, X.Dom.Style.Type.QUARTET | X.Dom.Style.Type.LENGTH | X.Dom.Style.Type.PERCENT ],
- margin : [ X.Dom.Dirty.REFLOW, 55, X.Dom.Style.Type.QUARTET | X.Dom.Style.Type.LENGTH | X.Dom.Style.Type.PERCENT ],
- sizing : [ X.Dom.Dirty.REFLOW, 59, X.Dom.Style.Type.LIST, X.Dom.Style.Option.BOX_SIZING ],
- pageBox : [ X.Dom.Dirty.REFLOW, 60, X.Dom.Style.Type.BOOLEAN ], // true / false
- left : [ X.Dom.Dirty.REFLOW, 61, X.Dom.Style.Type.LENGTH | X.Dom.Style.Type.PERCENT ],
- top : [ X.Dom.Dirty.REFLOW, 62, X.Dom.Style.Type.LENGTH | X.Dom.Style.Type.PERCENT ],
- bottom : [ X.Dom.Dirty.REFLOW, 63, X.Dom.Style.Type.LENGTH | X.Dom.Style.Type.PERCENT ],
- right : [ X.Dom.Dirty.REFLOW, 64, X.Dom.Style.Type.LENGTH | X.Dom.Style.Type.PERCENT ]
-};
-
-X.Dom.Style.SPECIAL_FIX =
- // ~IE8
- X.UA.IE && X.UA.IE < 9 ?
- (function( obj ){
- var test = X.Dom.Style.SPECIAL_FIX_PROP,
- filters = [], p, id, v;
- for( p in obj ){
- if( !( id = test[ p ] ) ) continue;
- v = obj[ p ];
- switch( id ){
- case 1 : //'filter' :
- filters[ filters.length ] = v;
- break;
- case 2 : //'opacity' :
- filters[ filters.length ] = 'aplha(opacity=' + v +')';
- break;
- case 3 : //'boxShadow' :
- // box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4) inset;
- // スペース区切りで、水平方向の距離 垂直方向の距離 ぼかし距離 広がり距離 影の色 insetキーワードを指定する。 ぼかし距離 広がり距離 影の色 insetキーワードは省略可
- // shadow(color=#cccccc, strength=10, direction=135);
- parseValue( 'boxShadow', v, 'px' );
- dir = Math.atan2( ary[1], ary[0] ) * 180 / Math.PI + 90;
- dir += dir < 0 ? 360 : 0;
- break;
- case 4 : //'textShadow' :
- //text-shadow: 5px 5px 2px blue; 水平方向の距離 垂直方向の距離 影のぼかし半径 影の色 none
- //glow(Color=yellow,Strength=10);
- //どうやらCSSのbackgroundプロパティと同時に使えないようです。
- break;
- case 5 : //'backgroundImage' :
- //
- };
- };
- if( filters ) return filters.join( ' ' );
- }) :
- // IE9
- X.UA.IE && 9 <= X.UA.IE && X.UA.IE < 10 ?
- (function( obj ){
- var test = X.Dom.Style.SPECIAL_FIX_PROP,
- filters = [], p, id, v;
- for( p in obj ){
- if( !( id = test[ p ] ) ) continue;
- v = obj[ p ];
- switch( id ){
- case 1 : //'filter' :
- filters[ filters.length ] = v;
- break;
- };
- };
- if( filters ) return filters.join( ' ' );
- }) :
- (function( obj ){
- var test = X.Dom.Style.SPECIAL_FIX_PROP,
- ret = [], p, id, v;
- for( p in obj ){
- if( !( id = test[ p ] ) ) continue;
- v = obj[ p ];
- switch( id ){
- case 1 : //'backgroundPositionX' :
- bgpX = v;
- break;
- case 2 : //'backgroundPositionY' :
- bgpY = v;
- break;
- case 3 : //'backgroundPositionX' :
- clipT = v;
- break;
- case 4 : //'backgroundPositionX' :
- clipB = v;
- break;
- case 5 : //'backgroundPositionX' :
- clipL = v;
- break;
- case 6 : //'backgroundPositionX' :
- clipR = v;
- break;
- };
- };
- if( bgpX || bgpY ) ret[ ret.length ] = 'background-position:';
- if( clipT || clipB || clipL || clipR ){
- ret[ ret.length ] = 'clip:rect(';
- };
- return ret.join( ';' );
- });
-
-
-
-
-// export
-// name getter
-// unitID, name 単位指定のプロパティ取得 geter
-// obj setter
-// name, value setter
-X.Dom.Node.prototype.css = function( nameOrObj /* orUnitID, valuOrUnitOrName */ ){
- var XDomStyle = X.Dom.Style,
- args = arguments,
- css = this._css,
- p, valOrUnit, name, v, node, camelize;
- if( this._xnodeType !== 1 ) return this;
- // setter
- if( X.Type.isObject( nameOrObj ) ){
- if( !css ) css = this._css = {};
- camelize = XDomStyle.camelize;
- for( p in nameOrObj ){
- css[ camelize( p ) ] = nameOrObj[ p ];
- };
- this._cssText = XDomStyle.objToCssText( this._css );
- if( node = this._ie4getRawNode ? this._ie4getRawNode() : this._rawNode ){
- if( this._cssText ){
- node.style.cssText = this._cssText;
- this._styleText = ' style="' + this._cssText + '"';
- } else {
- node.removeAttribute( 'style' );
- delete this._cssText;
- delete this._styleText;
- };
- };
- return this;
- } else
- if( 1 < args.length && !XDomStyle.UNIT[ nameOrObj ] ){
- if( !css ) css = this._css = {};
- name = XDomStyle.camelize( nameOrObj );
- v = args[ 1 ];
- node = this._ie4getRawNode ? this._ie4getRawNode() : this._rawNode;
- if( css[ name ] === v ) return this;
- if( !v && v !== 0 ){
- delete css[ name ];
- if( node ){
- node.style[ name ] = ''; // val
- };
- this._cssText = XDomStyle.objToCssText( css );
- if( !this._cssText ){
- delete this._cssText;
- delete this._styleText;
- node && node.removeAttribute( 'style' );
- };
- return this;
- };
- if( node ){
- node.style[ name ] = v; // val
- };
- if( !css[ name ] ){
- this._cssText = [ this._cssText, this._cssText ? ';' : '', XDomStyle.uncamelize( nameOrObj ), ':', v ].join( '' );
- css[ name ] = v;
- } else {
- css[ name ] = v;
- this._cssText = XDomStyle.objToCssText( css );
- };
- this._styleText = ' style="' + this._cssText + '"';
- return this;
- };
- // getter
- if( !css ) return;
- if( 1 < args.length && XDomStyle.UNIT[ nameOrObj ] ){ // unit
- // To do
- return XDomStyle.getValue( this, args[ 1 ], name );
- };
- // 集計 border, padding, margin, backgroundPosition, clip
- // border で正確なデータを返せない時は、null を返す
- return css[ XDomStyle.camelize( nameOrObj ) ];
-};
-
-X.Dom.Node.prototype.cssText = function( v ){
- var camelize, obj, i, l, attr, name;
- if( X.Type.isString( v ) ){
- camelize = X.Dom.Style.camelize;
- obj = {};
- v = v.split( ';' );
- delete this._css;
- for( i = 0, l = v.length; i < l; ++i ){
- attr = v[ i ].split( ':' );
- name = camelize( attr[ 0 ] );
- name && ( obj[ name ] = attr[ 1 ] || true );
- };
- return this.css( obj );
- };
- return this._cssText;
-};
-
-X.Dom.Node.prototype._getCharSize =
- document.defaultView && document.defaultView.getComputedStyle ?
- (function(){
- document.defaultView.getComputedStyle( this._rawNode, null );
- }) :
- X.UA.IE && 5 <= X.UA.IE ?
- (function(){
- //this._rawNode.currentStyle;
- }) :
- document.removeChild ?
- (function(){
-
- }) :
- (function(){
-
- });
-
-X.Dom.listenOnce( X.Dom.Event.DOM_PRE_INIT, function(){
- var testStyle = X.Dom._view;
-
- X.Dom.Style.VENDER_PREFIX = (function(){
- var ret = {},
- vendors = ',webkit,Webkit,Moz,moz,ms,Ms,O,o,khtml,Khtml'.split( ',' ),
- searches =
- 'opacity,boxSizing,' +
- 'transform,transformOrigin,perspective,' +
- 'transisiton,transitionDelay,transitionProperty,transitionDuration,transitionTimingFunction,' +
- 'userSelect,touchAction,touchCallout,contentZooming,userDrag,tapHighlightColor'.split( ',' ),
- vendor, i, search, prop;
-
- function findVenderPrefix( prop ){
- var v, i = vendors.length;
- vendor = null;
- for( ; i; ){
- v = vendors[ --i ];
- if( testStyle[ v + prop ] !== undefined ){
- vendor = v;
- return v + prop;
- };
- };
- };
-
- for( i = searches.length; i; ){
- search = searches[ --i ];
- prop = findVenderPrefix( search );
- if( search === 'transform' ) ret.transVender = vendor;
- if( prop ) ret[ search ] = prop;
- };
- return ret;
- })();
-
- X.Dom.Style.SPECIAL_FIX_PROP =
- // ~IE8
- X.UA.IE && X.UA.IE < 9 ?
- {
- filter : 1,
- opacity : 2//, uinode ChromeNode で行う
- //boxShadow : 3,
- //textShadow : 4,
- //backgroundImage : 5
- } :
- // IE9
- X.UA.IE && 9 <= X.UA.IE && X.UA.IE < 10 ?
- {
- filter : 1//,
- //textShadow : 1
- } :
- {
- backgroundPositionX : testStyle.backgroundPositionX === undefined ? 3 : 0,
- backgroundPosiitonY : testStyle.backgroundPositionX === undefined ? 3 : 0,
- clipTop : testStyle.clipTop === undefined && testStyle[ 'clip-top' ] === undefined ? 3 : 0,
- clipBottom : testStyle.clipTop === undefined && testStyle[ 'clip-top' ] === undefined ? 4 : 0,
- clipLeft : testStyle.clipTop === undefined && testStyle[ 'clip-top' ] === undefined ? 5 : 0,
- clipRight : testStyle.clipTop === undefined && testStyle[ 'clip-top' ] === undefined ? 6 : 0
- };
-} );
-
-X.Dom.listenOnce( X.Dom.Event.DOM_INIT, function(){
- var xnode = Node._systemNode,
- output = X.Dom.Style._UNIT_RATIO = {},
- list = 'em,cm,mm,in,pt,pc'.split( ',' ),
- unit,size, base, i;
-
- for( i = list.length; i; ){
- unit = list[ --i ];
- output[ unit ] = xnode.css( 'width', 100 + unit ).width() / 100;
- };
-
- output = X.Dom.Style._FONT_SIZE_RATIO = {},
- list = 'xx-large,x-large,large,larger,medium,small,smaller,x-small,xx-small'.split( ',' );
- base = xnode.css( 'lineHeight', 1 ).text( 'X' ).height();
-
- for( i = list.length; i; ){
- size = list[ --i ];
- output[ size ] = xnode.css( 'fontSize', size ).height() / base;
- };
-
- xnode.empty().cssText( '' );
-} );
\ No newline at end of file
--- /dev/null
+
+
+/*
+ * style 値の変更は、enterFrame 後にまとめて適用
+ * width(), height(), x(), y() 1em の取得時にも適用
+ * css3 の ie用 fix は X.UI レベルで行う
+ *
+ * use X.Dom.Event
+ */
+X.Dom.Style = {
+
+ Type : {
+ LENGTH : 1,
+ PERCENT : 2,
+ COLOR : 2 < 2,
+ U_DECIMAL : 2 < 3,
+ NUMERICAL : 2 < 4,
+ BOOLEAN : 2 < 5,
+ QUARTET : 2 < 6,
+ URL : 2 < 7,
+ FONT_NAME : 2 < 8,
+ TIME : 2 < 9,
+ CONTENT : 2 < 10,
+ LIST : 2 < 11,
+ AUTO : 2 < 12,
+ COMBI : 2 < 13
+ },
+
+ SPECIAL_VALUES : {
+ AUTO : Number.POSITIVE_INFINITY,
+ FULL : X.Dom // something unigue value; 100%
+ },
+
+ PropNo : {},
+
+ UNIT : {
+ // '' : 0,
+ 'px' : 0,
+ 'em' : 1,
+ 'cm' : 2,
+ 'mm' : 3,
+ 'in' : 4,
+ '%' : 5,
+ 'pct' : 5,
+ 'ms' : 6,
+ 's' : 7,
+ '#' : 8,
+ 'rgb' : 9,
+ 'rgba' : 10
+ },
+
+ /* font-size -> fontSize */
+ _DICTIONARY_CAMELIZE : {},
+
+ camelize : function( cssProp ){
+ var me = X.Dom.Style,
+ parts, l, i, camelized;
+
+ if( camelized = me._DICTIONARY_CAMELIZE[ cssProp ] ) return camelized;
+ parts = cssProp.split( ' ' ).join( '' ).split( '-' );
+ l = parts.length;
+ if( l === 1 ) return parts[ 0 ];
+
+ camelized = cssProp.charAt(0) === '-'
+ ? parts[ 0 ].charAt( 0 ).toUpperCase() + parts[ 0 ].substring( 1 )
+ : parts[ 0 ];
+
+ for( i = 1; i < l; ++i ){
+ camelized += parts[ i ].charAt( 0 ).toUpperCase() + parts[ i ].substring( 1 );
+ };
+ return me._DICTIONARY_CAMELIZE[ cssProp ] = camelized;
+ },
+
+ /* fontSize -> font-size */
+ /*
+ REG_LARGE : /[A-Z]/g,
+ uncamelize: function( str ){
+ return str.split( ' ' ).join( '' ).replace( X.Dom.Style.REG_LARGE, '-$&' ).toLowerCase();
+ }, */
+
+ CHAR_CODE_A : 'A'.charCodeAt( 0 ),
+
+ _DICTIONARY_UNCAMELIZE : {},
+
+ uncamelize : function( str ){
+ var me = X.Dom.Style,
+ A = me.CHAR_CODE_A,
+ Z = A + 25,
+ uncamelized, l, chr, code;
+ str = str.split( ' ' ).join( '' );
+ if( uncamelized = me._DICTIONARY_UNCAMELIZE[ str ] ) return uncamelized;
+ uncamelized = '';
+ for( i = 0, l = str.length; i < l; ++i ){
+ chr = str.charAt( i );
+ code = chr.charCodeAt( 0 );
+ uncamelized += ( A <= code && code <= Z ) ? '-' + chr : chr;
+ };
+ return me._DICTIONARY_UNCAMELIZE[ str ] = uncamelized.toLowerCase();
+ },
+
+ objToCssText : function( obj ){
+ var css = [],
+ me = X.Dom.Style,
+ uncamelize = me.uncamelize,
+ VENDER_PREFIX = me.VENDER_PREFIX,
+ FIX_PROP = me.SPECIAL_FIX_PROP,
+ SPECIAL_FIX = me.SPECIAL_FIX,
+ p, name, sp;
+ for( p in obj ){
+ name = uncamelize( p );
+ if( FIX_PROP[ name ] ){
+ sp = 1;
+ } else {
+ css[ css.length ] = [ VENDER_PREFIX[ name ] || name, obj[ p ] ].join( ':' );
+ };
+ };
+ sp && ( css[ css.length ] = SPECIAL_FIX( obj ) );
+ return css.join( ';' );
+ },
+
+ _UNIT_RATIO : null,
+ _FONT_SIZE_RATIO : null,
+
+ // https://developer.mozilla.org/en-US/docs/Web/CSS/transform
+ // Firefox 3.5, ie9, Opera 10.5, Safari 3.1, Chrome
+ // 3D support Firefox 10, ie10, Safari 4.0, Chrome 12.0
+ // transform : void 0,
+
+ // https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Using_CSS_transitions
+ // Chrome 1.0, Firefox 4.0, ie10, Opera 10.5, Safari 3.2
+ // Android 2.1, Firefox Android 4.0, Opera Mobile 10, Safari Mobile 3.2
+ // transition : void 0
+
+ // ブラウザ毎の getComputedStyle の戻り値 http://d.hatena.ne.jp/uupaa/20080928/1222543331
+
+ COLOR : {
+ BLACK : 0x0,
+ RED : 0xFF0000,
+ LIME : 0x00FF00,
+ BLUE : 0x0000FF,
+ YELLOW : 0xFFFF00,
+ AQUA : 0x00FFFF,
+ CYAN : 0x00FFFF,
+ MAGENTA : 0xFF00FF,
+ FUCHSIA : 0xFF00FF,
+ WHITE : 0xFFFFFF,
+ GREEN : 0x008000,
+ PURPLE : 0x800080,
+ MAROON : 0x800000,
+ NAVY : 0x000080,
+ OLIVE : 0x808000,
+ TEAL : 0x008080,
+ GRAY : 0x808080,
+ SILVER : 0xC0C0C0,
+ DIMGRAY : 0x696969,
+ SLATEGRAY : 0x708090,
+ DARKGRAY : 0xA9A9A9,
+ GAINSBORO : 0xDCDCDC,
+ MIDNIGHTBLUE : 0x191970,
+ SLATEBLUE : 0x6A5ACD,
+ MEDIUMBLUE : 0x0000CD,
+ ROYALBLUE : 0x4169E1,
+ DODGERBLUE : 0x1E90FF,
+ SKYBLUE : 0x87CEEB,
+ STEELBLUE : 0x4682B4,
+ LIGHTBLUE : 0xADD8E6,
+ PALETURQUOISE : 0xAFEEEE,
+ TURQUOISE : 0x40E0D0,
+ LIGHTCYAN : 0xE0FFFF,
+ AQUAMARINE : 0x7FFFD4,
+ DARKGREEN : 0x006400,
+ SEAGREEN : 0x2E8B57,
+ LIGHTGREEN : 0x90EE90,
+ CHARTREUSE : 0x7FFF00,
+ GREENYELLOW : 0xADFF2F,
+ LIMEGREEN : 0x32CD32,
+ YELLOWGREEN : 0x9ACD32,
+ OLIVEDRAB : 0x6B8E23,
+ DARKKHAKI : 0xBCB76B,
+ PALEGOLDENROD : 0xEEE8AA,
+ LIGHTYELLOW : 0xFFFFE0,
+ GOLD : 0xFFD700,
+ GOLDENROD : 0xDAA520,
+ DARKGOLDENROD : 0xB8860B,
+ ROSYBROWN : 0xBC8F8F,
+ INDIANRED : 0xCD5C5C,
+ SADDLEBROWN : 0x8B4513,
+ SIENNA : 0xA0522D,
+ PERU : 0xCD853F,
+ BURLYWOOD : 0xDEB887,
+ BEIGE : 0xF5F5DC,
+ WHEAT : 0xF5DEB3,
+ SANDYBROWN : 0xF4A460,
+ TAN : 0xD2B48C,
+ CHOCOLATE : 0xD2691E,
+ FIREBRICK : 0xB22222,
+ BROWN : 0xA52A2A,
+ SALMON : 0xFA8072,
+ ORANGE : 0xFFA500,
+ CORAL : 0xFF7F50,
+ TOMATO : 0xFF6347,
+ HOTPINK : 0xFF69B4,
+ PINK : 0xFFC0CB,
+ DEEPPINK : 0xFF1493,
+ PALEVIOLETRED : 0xDB7093,
+ VIOLET : 0xEE82EE,
+ PLUM : 0xDDA0DD,
+ ORCHILD : 0xDA70D6,
+ DARKVIOLET : 0x9400D3,
+ BLUEVIOLET : 0x8A2BE2,
+ MEDIUMPURPLE : 0x9370DB,
+ THISTLE : 0xD8BFD8,
+ LAVENDER : 0xE6E6FA,
+ MISTYROSE : 0xFFE4E1,
+ IVORY : 0xFFFFF0,
+ LEMONCHIFFON : 0xFFFACD
+ },
+
+ PARAMS : ( function(){
+ var ret = {};
+ register( ret.percent = {},
+ 'marginBottom,marginLeft,marginRight,marginTop,paddingBottom,paddingLeft,paddingRight,paddingTop,fontSize,textIndent'
+ );
+ register( ret.offset = {},
+ 'height,width,bottom,left,right,top'
+ );
+ register( ret.size = {},
+ 'borderBottomWidth,borderLeftWidth,borderRightWidth,borderTopWidth,letterSpacing,wordSpacing'
+ );
+ register( ret.color = {},
+ 'backgroundColor,borderBottomColor,borderLeftColor,borderRightColor,borderTopColor,color'
+ );
+ register( ret.region = {},
+ 'margin,padding,borderWidth,borderColor'
+ );
+ register( ret.special = {},
+ 'clip,backgroundPosition,backgroundPositionX,backgroundPositionY,opacity,lineHeight,zIndex'
+ );
+ register( ret.unit = {}, 'px,cm,mm,in,pt,pc,em,%' );
+
+ register( ret.margin = {}, 'marginBottom,marginLeft,marginRight,marginTop,paddingBottom' );
+ register( ret.padding = {}, 'paddingBottom,paddingLeft,paddingRight,paddingTop' );
+ register( ret.borderWidth = {}, 'borderBottomWidth,borderLeftWidth,borderRightWidth,borderTopWidth' );
+ register( ret.borderColor = {}, 'borderBottomColor,borderLeftColor,borderRightColor,borderTopColor' );
+
+ function register( obj, params ){
+ params = params.split( ',' );
+ for( var i = params.length; i; ) obj[ params[ --i ] ] = true;
+ };
+ return ret;
+ })(),
+
+ _CLIP_SEPARATOR : X.UA.IE && X.UA.IE < 8 ? ' ' : ',',
+
+ /*
+ *
+ */
+ Property : X.Class.create(
+ 'Property',
+ X.Class.POOL_OBJECT,
+ {
+ Constructor : function( name, value, unit, xnode ){
+ this.name = name;
+ this.value = value;
+ this.unit = unit;
+ this.xnode = xnode;
+ },
+ name : '',
+ value : 0,
+ unit : '',
+ xnode : null,
+ equal : function( prop ){
+ if( this.unit === prop.unit ){
+ return this.value === prop.value;
+ };
+ return Math.abs( this.toPx() - prop.toPx() ) < 1;
+ },
+ convert: function( prop ){
+ var u = prop.unit, v;
+ if( this.unit === u ) return;
+ this.value = v = this.toPx();
+ this.unit = u;
+ // %
+ // bgpX, bgpY の場合 X.Dom.Image.getActualDimension( backgroundImage url を使用 )
+ if( u !== 'px' ){
+ this.value =
+ u === 'em' ?
+ v / this.xnode._getCharSize() :
+ v / ( X.Dom.Style._UNIT_RATIO[ u ] || 1 );
+ };
+ },
+ setValue: function( v ){
+ this.value = v;
+ },
+ getValue: function(){
+ return this.value;
+ },
+ getOffset: function( prop ){
+ return prop.value - this.value;
+ },
+ getUnit: function(){
+ return this.unit;
+ },
+ getValueText: function(){
+ return this.value === 0 ? '0' : this.value + this.unit;
+ },
+ toPx: function(){
+ var v = this.value, u = this.unit;
+ return
+ u === 'px' ?
+ v :
+ ( u === 'em' || ( u === '' && this.name === 'lineHeight' ) ) ?
+ v * this.xnode._getCharSize() :
+ // u === '%'
+ v / ( X.Dom.Style._UNIT_RATIO[ u ] || 1 );
+ },
+ isValid: function(){
+ var p = X.Dom.Style.PARAMS,
+ n = this.name,
+ v = this.value,
+ u = this.unit,
+ z = u !== '' ? true : v === 0;
+ if( p.percent[ n ] === true ) return z;
+ if( p.offset[ n ] === true ) return z;
+ if( p.size[ n ] === true ) return z && u !== '%';
+ if( p.special[ n ] === true ){
+ if( n === 'lineHeight' ) return true;
+ if( n === 'opacity' ) return 0 <= v && v <= 1 && u === '';
+ if( n === 'zIndex' ) return u === '';
+ };
+ return false;
+ }
+ }
+ ),
+
+ /**
+ * backgroundPosition, clip
+ */
+ PropertyGroup : X.Class.create(
+ 'PropertyGroup',
+ X.Class.POOL_OBJECT,
+ {
+ Constructor : function( name ){
+ this.name = name;
+ this.props = [];
+ for( var i = 1, l = arguments.length; i<l; ++i ){
+ this.props[ this.props.length ] = arguments[ i ];
+ };
+ },
+ name : '',
+ equal : function( prop ){
+ var ps = this.props, i = ps.length;
+ for( ; i; ){
+ --i;
+ if( ps[ i ].equal( prop[ i ] ) === false ) return false;
+ };
+ return true;
+ },
+ convert : function( prop ){
+ var ps = this.props, i = ps.length;
+ for( ; i; ){
+ --i;
+ ps[ i ].convert( prop[ i ] );
+ };
+ },
+ setValue : function( ary ){
+ var ps = this.props, i = 0, l = ps.length;
+ for( ; i<l; ++i ){
+ ps[ i ].setValue( ary[ i ] );
+ };
+ },
+ getValue : function(){
+ var ret = [], ps = this.props, i = 0, l = ps.length;
+ for( ; i<l; ++i ){
+ ret[ ret.length ] = ps[ i ].getValue();
+ };
+ return ret;
+ },
+ getOffset : function( prop ){
+ var ret = [],
+ ps = this.props,
+ _ps = prop.props,
+ i = 0,
+ l = ps.length;
+ for( ; i<l; ++i ){
+ ret[ ret.length ] = ps[ i ].getOffset( _ps[ i ] );
+ };
+ return ret;
+ },
+ getUnit : function(){
+ var ret = [], ps = this.props, i = 0, l = ps.length;
+ for( ; i<l; ++i ){
+ ret[ ret.length ] = ps[ i ].getUnit();
+ };
+ return ret;
+ },
+ getValueText : function(){
+ var ret = [], ps = this.props, i = 0, l = ps.length;
+ for( ; i<l; ++i ){
+ ret[ ret.length ] = ps[ i ].getValueText();
+ };
+ if( this.name === 'clip' ){
+ return 'rect(' + ret.join( X.Dom.Style._CLIP_SEPARATOR ) + ')';
+ };
+ return ret.join( ' ' );
+ },
+ onKill : function(){
+ var ps = this.props, i = ps.length;
+ for( ; i; ){
+ ps[ --i ].kill();
+ };
+ },
+ isValid : function( t ){
+ t = t || this;
+ var ps = t.props, i = ps.length;
+ for( ; i; ){
+ if( ps[ --i ].isValid() === false ) return false;
+ };
+ return true;
+ }
+ }
+ ),
+
+ /*
+ * http://css-eblog.com/ie-css-problems/rgba-pe.html
+ * ie67 では rgb() は background-color で反応しない、、、
+ */
+
+ ColorProperty : X.Class.create(
+ 'ColorProperty',
+ X.Class.POOL_OBJECT, {
+ Constructor : function( name, x ){
+ var pct = false,
+ r = 0,
+ g = 0,
+ b = 0,
+ a = 1,
+ rgb;
+ if( X.Type.isNumber( rgb = x ) || X.Type.isNumber( rgb = X.Dom.Style.COLOR[ x.toUpperCase() ] ) ){
+ r = ( rgb & 0xff0000 ) >> 16;
+ g = ( rgb & 0xff00 ) >> 8;
+ b = ( rgb & 0xff );
+ } else
+ if( x.charAt( 0 ) === '#' ){
+ if( x.length === 7 ){
+ r = parseInt( x.charAt( 1 ) + x.charAt( 2 ), 16 );
+ g = parseInt( x.charAt( 3 ) + x.charAt( 4 ), 16 );
+ b = parseInt( x.charAt( 5 ) + x.charAt( 6 ), 16 );
+ } else
+ if( x.length === 4 ){
+ r = parseInt( x.charAt( 1 ) + x.charAt( 1 ), 16 );
+ g = parseInt( x.charAt( 2 ) + x.charAt( 2 ), 16 );
+ b = parseInt( x.charAt( 3 ) + x.charAt( 3 ), 16 );
+ } else
+ if( x.length === 2 ){
+ r = parseInt( x.charAt( 1 ) + x.charAt( 1 ), 16 );
+ g = parseInt( x.charAt( 1 ) + x.charAt( 1 ), 16 );
+ b = parseInt( x.charAt( 1 ) + x.charAt( 1 ), 16 );
+ };
+ } else
+ if( x.indexOf( 'rgb(' ) === 0 ){
+ rgb = x.substr( 4 ).split( ',' );
+ r = parseFloat( rgb[ 0 ] );
+ g = parseFloat( rgb[ 1 ] );
+ b = parseFloat( rgb[ 2 ] );
+ if( x.indexOf( '%' ) !== -1 ) pct = true;
+ } else
+ if( x.indexOf( 'rgba(' ) === 0 ){
+ rgb = x.substr( 5 ).split( ',' );
+ r = parseFloat( rgb[ 0 ] );
+ g = parseFloat( rgb[ 1 ] );
+ b = parseFloat( rgb[ 2 ] );
+ a = parseFloat( rgb[ 3 ] );
+ if( x.indexOf( '%' ) !== -1 ) pct = true;
+ } else {
+ r = 255;
+ g = 255;
+ b = 255;
+ };
+
+ this.name = name;
+ this.r = r;
+ this.g = g;
+ this.b = b;
+ this.a = a;
+ this.pct = pct;
+ },
+ name : '',
+ r : 0,
+ g : 0,
+ b : 0,
+ a : 0,
+ pct : false,
+ equal : function( prop ){
+ if( this.pct === prop.pct ){
+ return this.r === prop.r && this.g === prop.g && this.b === prop.b;
+ };
+ var rgb = this._toPct(),
+ _rgb = prop._toPct(),
+ i = rgb.length;
+ for( ; i; ){
+ --i;
+ if( Math.abs( rgb[ i ] - _rgb[ i ] ) > 1 ) return false;
+ };
+ return true;
+ },
+ convert : function( prop ){
+ var u = prop.pct, x;
+ if( this.pct === u ) return;
+ x = u === true ? 100 / 255 : 2.55;
+ this.r *= x;
+ this.g *= x;
+ this.b *= x;
+ this.pct = u;
+ },
+ setValue : function( rgb ){
+ this.r = rgb[ 0 ];
+ this.g = rgb[ 1 ];
+ this.b = rgb[ 2 ];
+ },
+ getValue : function(){
+ return [ this.r, this.g, this.b ];
+ },
+ getOffset : function( prop ){
+ return [ prop.r - this.r, prop.g - this.g, prop.b - this.b ];
+ },
+ getUnit : function(){
+ return this.pct === true ? '%' : '';
+ },
+ getValueText : function(){
+ if( this.pct === true ){
+ return [ 'rgb(', this.r, '%,', this.g, '%,', this.b, '%)' ].join( '' );
+ };
+ var round = Math.round;
+
+ var rgb = '00000' + ( ( round( this.r ) << 16 ) + ( round( this.g ) << 8 ) + round( this.b ) ).toString( 16 );
+ return '#' + rgb.substr( rgb.length - 6 );
+ },
+ _toPct : function(){
+ if( this.pct === true ) return [ this.r, this.g, this.b ];
+ return [ this.r / 2.55, this.g / 2.55, this.b / 2.55 ];
+ },
+ isValid : function( t ){
+ var isFinite = window.isFinite;
+ if( !isFinite( this.r ) || !isFinite( this.g ) || !isFinite( this.b ) ) return false;
+ if( 0 > this.r || 0 > this.g || 0 > this.b ) return false;
+ if( this.pct === true ) return this.r <= 100 && this.g <= 100 && this.b <= 100;
+ return this.r <= 255 && this.g <= 255 && this.b <= 255;
+ }
+ }
+ ),
+
+ _getProperty : function( xnode, css, unit, p ){
+
+ var XDomStyle = X.Dom.Style,
+ me = XDomStyle._getProperty,
+ PARAMS = XDomStyle.PARAMS,
+ PropertyGroup = XDomStyle.PropertyGroup,
+ Property = XDomStyle.Property,
+ ColorProperty = XDomStyle.ColorProperty,
+ name, width;
+
+ if( PARAMS.special[ p ] === true || PARAMS.region[ p ] === true ){
+ switch( p ){
+ case 'clip' :
+ // rect(...) クリップします。<top>, <bottom> は上端からの、 <right>, <left> は左端からのオフセットで指定します。Internet Explorer 4～7 では、カンマの代わりにスペースで区切る必要があります。
+ // position:absolute または position:fixed を適用した要素に対してのみ有効です。
+ var top = me( p + 'Top' ),
+ right = me( p + 'Right' ),
+ bottom = me( p + 'Bottom' ),
+ left = me( p + 'Left' ),
+ ret = new PropertyGroup( p, top, right, bottom, left ),
+ all;
+ if( ret.isValid() === true ) return ret;
+ ret.kill();
+ all = css[ p ].split( '(' )[ 1 ].split( ')' )[ 0 ].split( XDomStyle._CLIP_SEPARATOR );
+ return
+ new PropertyGroup(
+ p,
+ new Property( p + 'Top', all[ 0 ], 'px', xnode ),
+ new Property( p + 'Right', all[ 1 ], 'px', xnode ),
+ new Property( p + 'Bottom', all[ 2 ], 'px', xnode ),
+ new Property( p + 'Left', all[ 3 ], 'px', xnode )
+ );
+
+ case 'margin' :
+ case 'padding' :
+ name = p;
+ width = '';
+ case 'borderWidth' :
+ var props = '$1Top$2,$1Right$2,$1Bottom$2,$1Left$2'.split( '$1' ).join( name || 'border' ).split( '$2' ).join( width || 'Width' ).split( ',' ),
+ top = me( props[ 0 ] ),
+ right = me( props[ 1 ] ),
+ bottom = me( props[ 2 ] ),
+ left = me( props[ 3 ] ),
+ ret = new PropertyGroup( p, top, right, bottom, left ),
+ all, _0, _1, _2, _3, vu, v, u;
+ if( ret.isValid() === true ) return ret;
+ ret.kill();
+ all = css[ p ].split( ' ' );
+ _0 = all[ 0 ];
+ _1 = all[ 1 ];
+ _2 = all[ 2 ];
+ _3 = all[ 3 ];
+ vu = XDomStyle._Util._splitValueAndUnit( _0 );
+ v = vu[ 0 ];
+ u = vu[ 1 ];
+ switch( all.length ){
+ case 1 :
+ top = new Property( props[ 0 ], v, u, xnode );
+ right = new Property( props[ 1 ], v, u, xnode );
+ bottom = new Property( props[ 2 ], v, u, xnode );
+ left = new Property( props[ 3 ], v, u, xnode );
+ break;
+ case 2 :
+ top = new Property( props[ 0 ], v, u, xnode );
+ bottom = new Property( props[ 2 ], v, u, xnode );
+ vu = XDomStyle._Util._splitValueAndUnit( _1 );
+ v = vu[ 0 ];
+ u = vu[ 1 ];
+ right = new Property( props[ 1 ], v, u, xnode );
+ left = new Property( props[ 3 ], v, u, xnode );
+ break;
+ case 3 :
+ top = new Property( props[ 0 ], v, u, xnode );
+ vu = XDomStyle._Util._splitValueAndUnit( _1 );
+ v = vu[ 0 ];
+ u = vu[ 1 ];
+ right = new Property( props[ 1 ], v, u, xnode );
+ left = new Property( props[ 3 ], v, u, xnode );
+ vu = XDomStyle._Util._splitValueAndUnit( _2 );
+ v = vu[ 0 ];
+ u = vu[ 1 ];
+ bottom = new Property( props[ 2 ], v, u, xnode );
+ break;
+ case 4 :
+ top = new Property( props[ 0 ], v, u, xnode );
+ vu = XDomStyle._Util._splitValueAndUnit( _1 );
+ v = vu[ 0 ];
+ u = vu[ 1 ];
+ right = new Property( props[ 1 ], v, u, xnode );
+ vu = XDomStyle._Util._splitValueAndUnit( _2 );
+ v = vu[ 0 ];
+ u = vu[ 1 ];
+ bottom = new Property( props[ 2 ], v,u, xnode );
+ vu = XDomStyle._Util._splitValueAndUnit( _3 );
+ v = vu[ 0 ];
+ u = vu[ 1 ];
+ left = new Property( props[ 3 ], v, u, xnode );
+ break;
+ };
+ return new PropertyGroup( p, top, right, bottom, left );
+
+ case 'borderColor' :
+ var props = 'borderTopColor,borderRightColor,borderBottomColor,borderLeftColor'.split( ',' ),
+ top = me( props[ 0 ] ),
+ right = me( props[ 1 ] ),
+ bottom = me( props[ 2 ] ),
+ left = me( props[ 3 ] ),
+ ret = new PropertyGroup( p, top, right, bottom, left ),
+ all, _0, _1;
+ if( ret.isValid() === true ) return ret;
+ ret.kill();
+ all = css[ p ].split( ' ' );
+ _0 = all[ 0 ];
+ _1 = all[ 1 ];
+ switch( all.length ){
+ case 1 :
+ top = new ColorProperty( props[ 0 ], _0 );
+ right = new ColorProperty( props[ 1 ], _0 );
+ bottom = new ColorProperty( props[ 2 ], _0 );
+ left = new ColorProperty( props[ 3 ], _0 );
+ break;
+ case 2 :
+ top = new ColorProperty( props[ 0 ], _0 );
+ right = new ColorProperty( props[ 1 ], _1 );
+ bottom = new ColorProperty( props[ 2 ], _0 );
+ left = new ColorProperty( props[ 3 ], _1 );
+ break;
+ case 3 :
+ top = new ColorProperty( props[ 0 ], _0 );
+ right = new ColorProperty( props[ 1 ], _1 );
+ bottom = new ColorProperty( props[ 2 ], all[ 2 ] );
+ left = new ColorProperty( props[ 3 ], _1 );
+ break;
+ case 4 :
+ top = new ColorProperty( props[ 0 ], _0 );
+ right = new ColorProperty( props[ 1 ], _1 );
+ bottom = new ColorProperty( props[ 2 ], all[ 2 ] );
+ left = new ColorProperty( props[ 3 ], all[ 3 ] );
+ break;
+ };
+ return new PropertyGroup( p, top, right, bottom, left );
+
+ case 'backgroundPosition' :
+ var x = me( p + 'X' ),
+ y = me( p + 'Y' ),
+ ret = new PropertyGroup( p, x, y ),
+ xy;
+ if( ret.isValid() === true ) return ret;
+ ret.kill();
+ xy = css[ p ].split( ' ' );
+ x = XDomStyle._Util._splitValueAndUnit( xy[ 0 ] );
+ y = XDomStyle._Util._splitValueAndUnit( xy[ 1 ] );
+ return
+ new PropertyGroup(
+ p,
+ new Property( p + 'X', x[ 0 ], x[ 1 ], xnode ),
+ new Property( p + 'Y', y[ 0 ], y[ 1 ], xnode )
+ );
+ };
+ // opacity, zindex, lineHeight
+ vu = XDomStyle._Util._splitValueAndUnit( css[ p ] );
+ return new Property( p, vu[ 0 ], vu[ 1 ], xnode );
+ };
+ var x = css[ p ], e, v, u;
+ /*
+ if( PARAMS.offset[ p ] === true ){
+ return new Property( p, vu[ 0 ], vu[ 1 ], xnode );
+
+ e = this.elm;
+ if( p === 'width' ) v = e.offsetWidth;
+ if( p === 'height' ) v = e.offsetHeight;
+ if( p === 'top' ) v = e.offsetTop;
+ if( p === 'bottom' ) v = e.offsetBottom;
+ if( p === 'left' ) v = e.offsetLeft;
+ if( p === 'right' ) v = e.offsetRight;
+ u = _getUnit( x, p );
+ // alert( p + XDomStyle._Util.pxTo( v, u ) + u )
+ return new Property( p, XDomStyle._Util.pxTo( v, u ), u, xnode );
+ }; */
+ if( p === 'fontSize' && ( v = XDomStyle._FONT_SIZE_RATIO[ x ] ) ){ // xx-small 等
+ return new Property( p, v, 'px', xnode );
+ };
+ if( PARAMS.offset[ p ] || PARAMS.percent[ p ] || PARAMS.size[ p ] ){
+ vu = XDomStyle._Util._splitValueAndUnit( x );
+ return new Property( p, vu[ 0 ], vu[ 1 ], xnode );
+ };
+
+ if( PARAMS.color[ p ] ) return new ColorProperty( p, x );
+ },
+
+ _Util : {
+ /*
+ getValue: function( x ){
+ return X.Type.isString( x ) ? parseInt( x ) :
+ X.Type.isNumber( x ) ? x : 0;
+ },
+ getUnit: function( x, p ){
+
+
+ var REG_UINIT = /.*\d(\w{1,2})?/,
+ $1 = '$1',
+
+
+ var u;
+ if( X.Type.isString( x ) === true ){
+ u = x.replace( REG_UINIT, $1 );
+ if( p === 'lineHeight' ) return u;
+ if( PARAMS.unit[ u ] !== true ) return 'px';
+ return u;
+ };
+ return 'px';
+ }, */
+ _splitValueAndUnit : function( v ){
+ var num, _num, i, u;
+ if( X.Type.isNumber( v ) ) return [ v || 0, '' ];
+ if( isNaN( num = parseInt( v ) ) ) return [ 0, '' ];
+ _num = '' + num;
+ i = v.indexOf( _num ) + _num.length;
+ u = v.substr( i );
+ return [ num, X.Dom.Style.UNIT[ u ] ? u : 'px' ];
+ }
+ }
+};
+
+X.Dom.Style._GET_VALUE_WITH_UNIT = {
+ borderWidth : X.Dom.Style.Type.QUARTET | X.Dom.Style.Type.LENGTH,
+ //borderStyle : X.Dom.Style.Type.QUARTET,
+ borderRadius : X.Dom.Style.Type.QUARTET | X.Dom.Style.Type.LENGTH,
+ margin : X.Dom.Style.Type.QUARTET | X.Dom.Style.Type.LENGTH | X.Dom.Style.Type.PERCENT,
+ padding : X.Dom.Style.Type.QUARTET | X.Dom.Style.Type.LENGTH | X.Dom.Style.Type.PERCENT,
+ clip : X.Dom.Style.Type.QUARTET | X.Dom.Style.Type.LENGTH | X.Dom.Style.Type.PERCENT,
+
+ backgroundColor : X.Dom.Style.Type.COLOR,
+ backgroundPosition : X.Dom.Style.Type.COMBI,
+
+ // boxShadow
+
+ fontSize : X.Dom.Style.Type.LENGTH,
+ lineHeight : X.Dom.Style.Type.LENGTH | X.Dom.Style.Type.PERCENT | X.Dom.Style.Type.NUMERICAL,
+ textIndent : X.Dom.Style.Type.LENGTH,
+ letterSpacing : X.Dom.Style.Type.LENGTH,
+ wordSpacing : X.Dom.Style.Type.LENGTH,
+ /*
+ textShadowColor : X.Dom.Style.Type.COLOR,
+ textShadowOffsetX : X.Dom.Style.Type.LENGTH,
+ textShadowOffsetY : X.Dom.Style.Type.LENGTH,
+ textShadowBlur : X.Dom.Style.Type.LENGTH, */
+
+ width : X.Dom.Style.Type.LENGTH | X.Dom.Style.Type.PERCENT,
+ height : X.Dom.Style.Type.LENGTH | X.Dom.Style.Type.PERCENT,
+
+ left : X.Dom.Style.Type.LENGTH | X.Dom.Style.Type.PERCENT,
+ top : X.Dom.Style.Type.LENGTH | X.Dom.Style.Type.PERCENT,
+ bottom : X.Dom.Style.Type.LENGTH | X.Dom.Style.Type.PERCENT,
+ right : X.Dom.Style.Type.LENGTH | X.Dom.Style.Type.PERCENT,
+
+ // table
+ borderSpacing : X.Dom.Style.Type.LENGTH
+};
+
+
+X.Dom.Style.SPECIAL_FIX =
+ // ~IE8
+ X.UA.IE && X.UA.IE < 9 ?
+ (function( obj ){
+ var test = X.Dom.Style.SPECIAL_FIX_PROP,
+ filters = [], p, id, v;
+ for( p in obj ){
+ if( !( id = test[ p ] ) ) continue;
+ v = obj[ p ];
+ switch( id ){
+ case 1 : //'filter' :
+ filters[ filters.length ] = v;
+ break;
+ case 2 : //'opacity' :
+ filters[ filters.length ] = 'aplha(opacity=' + v +')';
+ break;
+ case 3 : //'boxShadow' :
+ // box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4) inset;
+ // スペース区切りで、水平方向の距離 垂直方向の距離 ぼかし距離 広がり距離 影の色 insetキーワードを指定する。 ぼかし距離 広がり距離 影の色 insetキーワードは省略可
+ // shadow(color=#cccccc, strength=10, direction=135);
+ parseValue( 'boxShadow', v, 'px' );
+ dir = Math.atan2( ary[1], ary[0] ) * 180 / Math.PI + 90;
+ dir += dir < 0 ? 360 : 0;
+ break;
+ case 4 : //'textShadow' :
+ //text-shadow: 5px 5px 2px blue; 水平方向の距離 垂直方向の距離 影のぼかし半径 影の色 none
+ //glow(Color=yellow,Strength=10);
+ //どうやらCSSのbackgroundプロパティと同時に使えないようです。
+ break;
+ case 5 : //'backgroundImage' :
+ //
+ };
+ };
+ if( filters ) return filters.join( ' ' );
+ }) :
+ // IE9 textShadow に filter を使用
+ X.UA.IE && 9 <= X.UA.IE && X.UA.IE < 10 ?
+ (function( obj ){
+ var test = X.Dom.Style.SPECIAL_FIX_PROP,
+ filters = [], p, id, v;
+ for( p in obj ){
+ if( !( id = test[ p ] ) ) continue;
+ v = obj[ p ];
+ switch( id ){
+ case 1 : //'filter' :
+ filters[ filters.length ] = v;
+ break;
+ };
+ };
+ if( filters ) return filters.join( ' ' );
+ }) :
+ (function( obj ){
+ var test = X.Dom.Style.SPECIAL_FIX_PROP,
+ ret = [], p, id, v;
+ for( p in obj ){
+ if( !( id = test[ p ] ) ) continue;
+ v = obj[ p ];
+ switch( id ){
+ case 1 : //'backgroundPositionX' :
+ bgpX = v;
+ break;
+ case 2 : //'backgroundPositionY' :
+ bgpY = v;
+ break;
+ case 3 : //'backgroundPositionX' :
+ clipT = v;
+ break;
+ case 4 : //'backgroundPositionX' :
+ clipB = v;
+ break;
+ case 5 : //'backgroundPositionX' :
+ clipL = v;
+ break;
+ case 6 : //'backgroundPositionX' :
+ clipR = v;
+ break;
+ };
+ };
+ if( bgpX || bgpY ) ret[ ret.length ] = 'background-position:';
+ if( clipT || clipB || clipL || clipR ){
+ ret[ ret.length ] = 'clip:rect(';
+ };
+ return ret.join( ';' );
+ });
+
+
+
+
+// export
+// name getter
+// unitID, name 単位指定のプロパティ取得 geter
+// obj setter
+// name, value setter
+X.Dom.Node.prototype.css = function( nameOrObj /* orUnitID, valuOrUnitOrName */ ){
+ var XDomStyle = X.Dom.Style,
+ args = arguments,
+ css = this._css,
+ p, valOrUnit, name, v, node, camelize, unit;
+ if( this._xnodeType !== 1 ) return this;
+// setter:object
+ if( X.Type.isObject( nameOrObj ) ){
+ if( !css ) css = this._css = {};
+ camelize = XDomStyle.camelize;
+ for( p in nameOrObj ){
+ css[ camelize( p ) ] = nameOrObj[ p ];
+ };
+ this._cssText = XDomStyle.objToCssText( this._css );
+ if( node = this._ie4getRawNode ? this._ie4getRawNode() : this._rawNode ){
+ if( this._cssText ){
+ node.style.cssText = this._cssText;
+ this._styleText = ' style="' + this._cssText + '"';
+ } else {
+ node.removeAttribute( 'style' );
+ delete this._cssText;
+ delete this._styleText;
+ };
+ };
+ return this;
+ } else
+ if( 1 < args.length ){
+ if( !( unit = XDomStyle.UNIT[ nameOrObj ] ) ){
+// setter name, value
+ if( !css ) css = this._css = {};
+ name = XDomStyle.camelize( nameOrObj );
+ v = args[ 1 ];
+ node = this._ie4getRawNode ? this._ie4getRawNode() : this._rawNode;
+ if( css[ name ] === v ) return this;
+ if( !v && v !== 0 ){
+ delete css[ name ];
+ if( node ){
+ node.style[ name ] = ''; // val
+ };
+ this._cssText = XDomStyle.objToCssText( css );
+ if( !this._cssText ){
+ delete this._cssText;
+ delete this._styleText;
+ node && node.removeAttribute( 'style' );
+ };
+ return this;
+ };
+ if( node ){
+ node.style[ name ] = v; // val
+ };
+ if( !css[ name ] ){
+ this._cssText = [ this._cssText, this._cssText ? ';' : '', XDomStyle.uncamelize( nameOrObj ), ':', v ].join( '' );
+ css[ name ] = v;
+ } else {
+ css[ name ] = v;
+ this._cssText = XDomStyle.objToCssText( css );
+ };
+ this._styleText = ' style="' + this._cssText + '"';
+ return this;
+ };
+// getter unit
+// unit 付の値取得は fontSize と 画像サイズが確定していないと正確に取れない。内部のみにする？
+ if( !css ) return;
+ if( !X.Dom.Style._GET_VALUE_WITH_UNIT[ name = XDomStyle.camelize( args[ 1 ] ) ] ) return null;
+ p = XDomStyle._getProperty( this, css, unit, name );
+ v = p.pxTo( unit );
+ p.kill();
+ return v;
+ };
+// getter
+ if( !css ) return;
+ // 集計 border, padding, margin, backgroundPosition, clip
+ // border で正確なデータを返せない時は、null を返す
+ return css[ XDomStyle.camelize( nameOrObj ) ];
+};
+
+X.Dom.Node.prototype.cssText = function( v ){
+ var camelize, obj, i, l, attr, name;
+ if( X.Type.isString( v ) ){
+ camelize = X.Dom.Style.camelize;
+ obj = {};
+ v = v.split( ';' );
+ delete this._css;
+ for( i = 0, l = v.length; i < l; ++i ){
+ attr = v[ i ].split( ':' );
+ name = camelize( attr[ 0 ] );
+ name && ( obj[ name ] = attr[ 1 ] || true );
+ };
+ return this.css( obj );
+ };
+ return this._cssText;
+};
+
+/*
+ * ここでは HTMLElement かのチャックは行わない！
+ */
+X.Dom.Node.prototype._getCharSize =
+ window.getComputedStyle ?
+ (function(){
+ return parseInt( getComputedStyle( this._rawNode, null ).fontSize );
+ }) :
+ document.defaultView && document.defaultView.getComputedStyle ?
+ (function(){
+ return parseInt( document.defaultView.getComputedStyle( this._rawNode, null ).fontSize );
+ }) :
+ X.UA.IE && 5 <= X.UA.IE ?
+ (function(){
+ var font = this._rawNode.currentStyle.fontSize,
+ vu = X.Dom.Style._Util._splitValueAndUnit( font ),
+ v = vu[ 0 ],
+ u = vu[ 1 ];
+ switch( u ){
+ case 'px' :
+ return v;
+ case 'em' :
+ // body まで辿ってしまった場合は？
+ return this.parent._getCharSize() * v;
+ case '%' :
+ // body まで辿ってしまった場合は？
+ return this.parent._getCharSize() * v / 100;
+ };
+ return v === 0 ?
+ ( X.Dom.Style._FONT_SIZE_RATIO[ font ] || 0 ) :
+ v / ( X.Dom.Style._UNIT_RATIO[ u ] || 1 );
+ // appendChild
+ // removeChild
+ }) :
+ document.removeChild ?
+ (function(){
+ var elm = document.createElement( 'span' ),
+ v;
+ elm.style.cssText = 'display:block;position:absolute;top:0;left:0;visivility:hidden;line-height:1;height:1em;';
+ elm.innerHTML = 'X';
+ this._rawNode.appendChild( elm );
+ v = elm.offsetHeight;
+ this._rawNode.removeChild( elm );
+ return v;
+ }) :
+ X.UA.IE ?
+ (function(){
+ var elm = this._rawNode, v;
+ elm.insertAdjacentHTML( 'BeforeEnd', '<span style="visivility:hidden;line-height:1;">X</span>' );
+ elm = elm.children[ elm.children.length - 1 ];
+ v = elm.offsetHeight;
+ elm.outerHTML = '';
+ return v;
+ }) :
+ (function(){
+ });
+
+
+X.Dom.listenOnce( X.Dom.Event.DOM_PRE_INIT, function(){
+ var testStyle = X.Dom._root;
+
+ X.Dom.Style.VENDER_PREFIX = (function(){
+ var ret = {},
+ vendors = 'webkit,Webkit,Moz,moz,ms,Ms,O,o,khtml,Khtml'.split( ',' ),
+ searches =
+ 'opacity,boxSizing,' +
+ 'transform,transformOrigin,perspective,' +
+ 'transisiton,transitionDelay,transitionProperty,transitionDuration,transitionTimingFunction,' +
+ 'userSelect,touchAction,touchCallout,contentZooming,userDrag,tapHighlightColor'.split( ',' ),
+ vendor, i, search, prop;
+ //
+ vendors.unshift( '' );
+
+ function findVenderPrefix( prop ){
+ var v, i = vendors.length;
+ vendor = null;
+ for( ; i; ){
+ v = vendors[ --i ];
+ if( testStyle[ v + prop ] !== undefined ){
+ vendor = v;
+ return v + prop;
+ };
+ };
+ };
+
+ for( i = searches.length; i; ){
+ search = searches[ --i ];
+ prop = findVenderPrefix( search );
+ if( search === 'transform' ) ret.transVender = vendor;
+ if( prop ) ret[ search ] = prop;
+ };
+ return ret;
+ })();
+
+ X.Dom.Style.SPECIAL_FIX_PROP =
+ // ~IE8
+ X.UA.IE && X.UA.IE < 9 ?
+ {
+ filter : 1,
+ opacity : 2//, uinode ChromeNode で行う
+ //boxShadow : 3,
+ //textShadow : 4,
+ //backgroundImage : 5
+ } :
+ // IE9
+ X.UA.IE && 9 <= X.UA.IE && X.UA.IE < 10 ?
+ {
+ filter : 1//,
+ //textShadow : 1
+ } :
+ {
+ backgroundPositionX : testStyle.backgroundPositionX === undefined ? 3 : 0,
+ backgroundPosiitonY : testStyle.backgroundPositionX === undefined ? 3 : 0,
+ clipTop : testStyle.clipTop === undefined && testStyle[ 'clip-top' ] === undefined ? 3 : 0,
+ clipBottom : testStyle.clipTop === undefined && testStyle[ 'clip-top' ] === undefined ? 4 : 0,
+ clipLeft : testStyle.clipTop === undefined && testStyle[ 'clip-top' ] === undefined ? 5 : 0,
+ clipRight : testStyle.clipTop === undefined && testStyle[ 'clip-top' ] === undefined ? 6 : 0
+ };
+} );
+
+X.Dom.listenOnce( X.Dom.Event.DOM_INIT, function(){
+ var xnode = Node._systemNode,
+ output = X.Dom.Style._UNIT_RATIO = {},
+ list = 'em,cm,mm,in,pt,pc'.split( ',' ),
+ unit,size, base, i;
+
+ for( i = list.length; i; ){
+ unit = list[ --i ];
+ output[ unit ] = xnode.css( 'width', 100 + unit ).width() / 100;
+ };
+
+ output = X.Dom.Style._FONT_SIZE_RATIO = {},
+ list = 'xx-large,x-large,large,larger,medium,small,smaller,x-small,xx-small'.split( ',' );
+ base = xnode.css( 'lineHeight', 1 ).text( 'X' ).height();
+
+ for( i = list.length; i; ){
+ size = list[ --i ];
+ output[ size ] = xnode.css( 'fontSize', size ).height() / base;
+ };
+
+ xnode.empty().cssText( '' );
+} );
\ No newline at end of file
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
return false;
};
+/*
+ * body が存在したら要素を作成、style も指定
+ * 背景画像を読み終える onload で活動開始
+ */
+
var _PageRoot = _AbstractDisplayContainer.inherits(
'_PageRoot',
X.Class.FINAL | X.Class.PRIVATE_DATA | X.Class.SUPER_ACCESS,
OSDN Git Service
