--- /dev/null
+var BoxModel;\r
+\r
+var DOM = ( function( window, document ){\r
+ var DIV_LIST = [],\r
+ SPAN_LIST = [],\r
+ TEXT_LIST = [];\r
+ \r
+ var elmTextSize;\r
+ \r
+ function correctNodes( node ){\r
+ var child;\r
+ if( node && node.parentNode ){\r
+ while( node.lastChild ) correctNodes( node.lastChild );\r
+ node.parentNode.removeChild( node );\r
+ if( node.nodeType === 1 ){\r
+ switch( node.tagName ){\r
+ case 'DIV':\r
+ DIV_LIST.push( node );\r
+ break;\r
+ case 'SPAN':\r
+ SPAN_LIST.push( node );\r
+ break;\r
+ \r
+ };\r
+ node.removeAttribute( 'className' );\r
+ node.removeAttribute( 'style' );\r
+ node.removeAttribute( 'id' );\r
+ } else\r
+ if( node.nodeType === 3 ){\r
+ node.data = '';\r
+ TEXT_LIST.push( node );\r
+ };\r
+ };\r
+ };\r
+ \r
+ return {\r
+ createDiv : function(){\r
+ return 0 < DIV_LIST.length ? DIV_LIST.shift() : document.createElement( 'div' );\r
+ },\r
+ createSpan : function(){\r
+ \r
+ },\r
+ createText : function(){\r
+ \r
+ },\r
+ getTextSize : function( elm, content ){\r
+ var span = DOM.createSpan(),\r
+ text = DOM.createText(),\r
+ w, h;\r
+ elm.appendChild( span );\r
+ span.style.cssText = 'visibility:hidden;position:absolute;';\r
+ span.appendChild( text );\r
+ text.data = content;\r
+ w = span.offsetWidth;\r
+ h = span.offsetHeight;\r
+ DOM.correctNodes( span );\r
+ return [ w, h ];\r
+ },\r
+ getTextHeight : function( elm, w, content ){\r
+ var div = DOM.createSpan(),\r
+ text = DOM.createText(),\r
+ w, h;\r
+ elm.appendChild( div );\r
+ div.style.cssText = 'visibility:hidden;position:absolute;width:' + w + 'px;';\r
+ div.appendChild( text );\r
+ text.data = content;\r
+ w = div.offsetWidth;\r
+ h = div.offsetHeight;\r
+ DOM.correctNodes( div );\r
+ return h;\r
+ },\r
+ correctNodes : function( node ){\r
+ var child;\r
+ if( node && node.parentNode ){\r
+ while( node.lastChild ) DOM.correctNodes( node.lastChild );\r
+ node.parentNode.removeChild( node );\r
+ if( node.nodeType === 1 ){\r
+ switch( node.tagName ){\r
+ case 'DIV':\r
+ DIV_LIST.push( node );\r
+ break;\r
+ case 'SPAN':\r
+ SPAN_LIST.push( node );\r
+ break;\r
+ \r
+ };\r
+ node.removeAttribute( 'className' );\r
+ node.removeAttribute( 'style' );\r
+ node.removeAttribute( 'id' );\r
+ } else\r
+ if( node.nodeType === 3 ){\r
+ node.data = '';\r
+ TEXT_LIST.push( node );\r
+ };\r
+ };\r
+ }\r
+ }\r
+})( window, document );\r
+\r
+var XBrowserStyle = ( function(){\r
+ var EMPTY = '',\r
+ CORON = ':',\r
+ SEMICORON = ';',\r
+ SPACE = ' ',\r
+ UNITS = 'px,cm,mm,in,pt,pc,em,%'.split( ',' ),\r
+ CLIP_SEPARATOR = UA.isIE === true && UA.ieVersion < 8 ? ' ' : ',';\r
+\r
+ var SPECIAL = ( function(){\r
+ var special = {};\r
+ if( UA.isIE === true && UA.ieVersion < 9 ){\r
+ if( UA.ACTIVEX === true ){\r
+ // special.opacity = 'ActiveXOpacity';\r
+ special.setFilters = function( style ){\r
+ var filters = ( style.filter || '' ).split( ') ' ),\r
+ data = {},\r
+ i = filters.length,\r
+ filter, names, props, prop, j, l, key, v;\r
+ for( ; i; ){\r
+ filter = filters[ --i ].split( ' ' ).join( '' ).split( '(' );\r
+ if( filter.length !== 2 ) continue;\r
+ names = filter[ 0 ].split( '.' ); // progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=120,strength=9)\r
+ props = filter[ 1 ].split( ',' ); // \r
+ filter = {};\r
+ for( j = 0, l = props.length; j < l; ++j ){\r
+ prop = props[ j ].split( '=' );\r
+ key = prop[ 0 ].toLowerCase();\r
+ v = prop[ 1 ];\r
+ filter[ key ] = v; //v.charAt( 0 ) === '#' ? v : parseInt( v );\r
+ };\r
+ data[ names[ names.length - 1 ] ] = filter;\r
+ };\r
+ \r
+ style.filter = data;\r
+ style.opacity = data.alpha && data.alpha.opacity ? data.alpha.opacity / 100 : 1;\r
+ };\r
+ special.hasLayout = function( elm ){\r
+ return elm.currentStyle.hasLayout;\r
+ };\r
+ } else {\r
+ special.opacity = null;\r
+ };\r
+ } else {\r
+ var style = document.documentElement.style;\r
+ special.opacity = style.opacity !== undefined ? 'opacity' : \r
+ style.MozOpacity !== undefined ? 'MozOpacity' :\r
+ style.KhtmlOpacity !== undefined ? 'KhtmlOpacity' :\r
+ style[ '-khtml-opacity' ] !== undefined ? 'KhtmlOpacity' : null;\r
+\r
+ // if( style.backgroundPositionX === undefined ){\r
+ special.setBackgroundPositionXY = function( style ){\r
+ var bgp = ( style.backgroundPosition || '' ).split( ' ' );\r
+ style.backgroundPositionX = bgp[ 0 ] || 0;\r
+ style.backgroundPositionY = bgp[ 1 ] || 0;\r
+ };\r
+ // };\r
+ if( style.clipTop === undefined && style[ 'clip-top' ] === undefined ){\r
+ special.setClipTopRightBottomLeft = function( style ){\r
+ var clip = style.clip;\r
+ if( !cliop || clip.indexOf( 'rect(' ) === -1 ){\r
+ style.clipTop = 0;\r
+ style.clipRight = 0;\r
+ style.clipBottom = 0;\r
+ style.clipLeft = 0;\r
+ return;\r
+ };\r
+ clip = clip.split( '(' )[ 1 ].split( ')' )[ 0 ].split( clip.indexOf( ',' ) !== -1 ? ',' : ' ' );\r
+ ret.clipTop = clip[ 0 ];\r
+ ret.clipRight = clip[ 1 ];\r
+ ret.clipBottom = clip[ 2 ];\r
+ ret.clipLeft = clip[ 3 ];\r
+ };\r
+ };\r
+ };\r
+ return special;\r
+ })();\r
+ \r
+ function cssToObject( css ){\r
+ var ret = {}, i, nv, n, v,\r
+ parse = Util.parse,\r
+ isNumber = Type.isNumber,\r
+ camelize = Util.camelize;\r
+ if( Type.isString( css ) === true ){\r
+ css = css.split( SEMICORON );\r
+ for( i = css.length; i; ){\r
+ nv = css[ --i ].split( CORON ); // filter の場合, progid: がくる\r
+ n = nv.shift();\r
+ if( isNumber( parse( n ) ) === true ) continue;\r
+ v = nv.join( EMPTY );\r
+ while( v.charAt( 0 ) === ' ' ) v = v.substr( 1 );\r
+ ret[ camelize( n ) ] = parse( v );\r
+ };\r
+ } else {\r
+ for( n in css ){\r
+ if( Type.isNumber( parse( n ) ) === false ) ret[ n ] = parse( css[ n ] );\r
+ };\r
+ };\r
+\r
+ if( SPECIAL.setFilters ){\r
+ SPECIAL.setFilters( ret );\r
+ } else {\r
+ ret.opacity = SPECIAL.opacity !== null ? ret[ SPECIAL.opacity ] : 1;\r
+ };\r
+ \r
+ SPECIAL.setBackgroundPositionXY && SPECIAL.setBackgroundPositionXY( ret );\r
+ SPECIAL.setClipTopRightBottomLeft && SPECIAL.setClipTopRightBottomLeft( ret );\r
+ \r
+ return ret;\r
+ };\r
+\r
+ var COLOR = ( function(){\r
+ var ret = {}, v, name,\r
+ list = [\r
+ '0', 'BLACK',\r
+ 'FF0000', 'RED',\r
+ '00FF00', 'LIME',\r
+ '0000FF', 'BLUE',\r
+ 'FFFF00', 'YELLOW',\r
+ '00FFFF', 'AQUA',\r
+ '00FFFF', 'CYAN',\r
+ 'FF00FF', 'MAGENTA',\r
+ 'FF00FF', 'FUCHSIA',\r
+ 'FFFFFF', 'WHITE',\r
+ '008000', 'GREEN',\r
+ '800080', 'PURPLE',\r
+ '800000', 'MAROON',\r
+ '000080', 'NAVY',\r
+ '808000', 'OLIVE',\r
+ '008080', 'TEAL',\r
+ '808080', 'GRAY',\r
+ 'C0C0C0', 'SILVER',\r
+ '696969', 'DIMGRAY',\r
+ '708090', 'SLATEGRAY',\r
+ 'A9A9A9', 'DARKGRAY',\r
+ 'DCDCDC', 'GAINSBORO',\r
+ '191970', 'MIDNIGHTBLUE',\r
+ '6A5ACD', 'SLATEBLUE',\r
+ '0000CD', 'MEDIUMBLUE',\r
+ '4169E1', 'ROYALBLUE',\r
+ '1E90FF', 'DODGERBLUE',\r
+ '87CEEB', 'SKYBLUE',\r
+ '4682B4', 'STEELBLUE',\r
+ 'ADD8E6', 'LIGHTBLUE',\r
+ 'AFEEEE', 'PALETURQUOISE',\r
+ '40E0D0', 'TURQUOISE',\r
+ 'E0FFFF', 'LIGHTCYAN',\r
+ '7FFFD4', 'AQUAMARINE',\r
+ '006400', 'DARKGREEN',\r
+ '2E8B57', 'SEAGREEN',\r
+ '90EE90', 'LIGHTGREEN',\r
+ '7FFF00', 'CHARTREUSE',\r
+ 'ADFF2F', 'GREENYELLOW',\r
+ '32CD32', 'LIMEGREEN',\r
+ '9ACD32', 'YELLOWGREEN',\r
+ '6B8E23', 'OLIVEDRAB',\r
+ 'BCB76B', 'DARKKHAKI',\r
+ 'EEE8AA', 'PALEGOLDENROD',\r
+ 'FFFFE0', 'LIGHTYELLOW',\r
+ 'FFD700', 'GOLD',\r
+ 'DAA520', 'GOLDENROD',\r
+ 'B8860B', 'DARKGOLDENROD',\r
+ 'BC8F8F', 'ROSYBROWN',\r
+ 'CD5C5C', 'INDIANRED',\r
+ '8B4513', 'SADDLEBROWN',\r
+ 'A0522D', 'SIENNA',\r
+ 'CD853F', 'PERU',\r
+ 'DEB887', 'BURLYWOOD',\r
+ 'F5F5DC', 'BEIGE',\r
+ 'F5DEB3', 'WHEAT',\r
+ 'F4A460', 'SANDYBROWN',\r
+ 'D2B48C', 'TAN',\r
+ 'D2691E', 'CHOCOLATE',\r
+ 'B22222', 'FIREBRICK',\r
+ 'A52A2A', 'BROWN',\r
+ 'FA8072', 'SALMON',\r
+ 'FFA500', 'ORANGE',\r
+ 'FF7F50', 'CORAL',\r
+ 'FF6347', 'TOMATO',\r
+ 'FF69B4', 'HOTPINK',\r
+ 'FFC0CB', 'PINK',\r
+ 'FF1493', 'DEEPPINK',\r
+ 'DB7093', 'PALEVIOLETRED',\r
+ 'EE82EE', 'VIOLET',\r
+ 'DDA0DD', 'PLUM',\r
+ 'DA70D6', 'ORCHILD',\r
+ '9400D3', 'DARKVIOLET',\r
+ '8A2BE2', 'BLUEVIOLET',\r
+ '9370DB', 'MEDIUMPURPLE',\r
+ 'D8BFD8', 'THISTLE',\r
+ 'E6E6FA', 'LAVENDER',\r
+ 'FFE4E1', 'MISTYROSE',\r
+ 'FFFFF0', 'IVORY',\r
+ 'FFFACD', 'LEMONCHIFFON'\r
+ ];\r
+ for( i = list.length; i; ){\r
+ v = list[ --i ];\r
+ name = list[ --i ];\r
+ ret[ name ] = parseInt( v, 16 );\r
+ };\r
+ return ret;\r
+ })();\r
+ \r
+ var PARAMS = ( function(){\r
+ var ret = {};\r
+ register( ret.percent = {},\r
+ 'marginBottom,marginLeft,marginRight,marginTop,paddingBottom,paddingLeft,paddingRight,paddingTop,fontSize,textIndent'\r
+ );\r
+ register( ret.offset = {},\r
+ 'height,width,bottom,left,right,top'\r
+ ); \r
+ register( ret.size = {},\r
+ 'borderBottomWidth,borderLeftWidth,borderRightWidth,borderTopWidth,letterSpacing'\r
+ );\r
+ register( ret.color = {},\r
+ 'backgroundColor,borderBottomColor,borderLeftColor,borderRightColor,borderTopColor,color'\r
+ );\r
+ register( ret.region = {},\r
+ 'margin,padding,borderWidth,borderColor'\r
+ ); \r
+ register( ret.special = {},\r
+ 'clip,backgroundPosition,opacity,lineHeight,zIndex'\r
+ );\r
+ register( ret.unit = {}, 'px,cm,mm,in,pt,pc,em,%' );\r
+ \r
+ register( ret.margin = {}, 'marginBottom,marginLeft,marginRight,marginTop,paddingBottom' );\r
+ register( ret.padding = {}, 'paddingBottom,paddingLeft,paddingRight,paddingTop' );\r
+ register( ret.borderWidth = {}, 'borderBottomWidth,borderLeftWidth,borderRightWidth,borderTopWidth' );\r
+ register( ret.borderColor = {}, 'borderBottomColor,borderLeftColor,borderRightColor,borderTopColor' );\r
+ \r
+ function register( obj, params ){\r
+ params = params.split( ',' );\r
+ for( var i=params.length; i; ) obj[ params[ --i ] ] = true;\r
+ };\r
+ return ret;\r
+ })();\r
+ \r
+ /*\r
+ * \r
+ */\r
+ var Property = Class.create(\r
+ 'Property',\r
+ Class.POOL_OBJECT,\r
+ {\r
+ Constructor : function( name, value, unit, pxPerEm ){\r
+ this.name = name;\r
+ this.value = value;\r
+ this.unit = unit;\r
+ this.pxPerEm = pxPerEm; // XXpx = 1em;\r
+ },\r
+ name : '',\r
+ value : 0,\r
+ pxPerEm : 12, // 1em === ??px\r
+ unit : '',\r
+ equal : function( prop ){\r
+ if( this.unit === prop.unit ){\r
+ return this.value === prop.value;\r
+ };\r
+ return Math.abs( this.toPx() - prop.toPx() ) < 1;\r
+ },\r
+ convert: function( prop ){\r
+ var u = prop.unit, v;\r
+ if( this.unit === u ) return;\r
+ this.value = v = this.toPx();\r
+ this.unit = u;\r
+ if( u !== px ){\r
+ this.value = u === 'em' ? v / this.pxPerEm : Util.pxTo( v, u );\r
+ };\r
+ },\r
+ setValue: function( v ){\r
+ this.value = v;\r
+ },\r
+ getValue: function(){\r
+ return this.value;\r
+ },\r
+ getOffset: function( prop ){\r
+ return prop.value - this.value;\r
+ },\r
+ getUnit: function(){\r
+ return this.unit;\r
+ },\r
+ getValueText: function(){\r
+ return this.value === 0 ? '0' : this.value + this.unit;\r
+ },\r
+ toPx: function(){\r
+ var v = this.value, u = this.unit;\r
+ if( u === px ) return v;\r
+ if( u === 'em' ) return v * this.pxPerEm;\r
+ if( u === '' && this.name === 'lineHeight' ) return v * this.pxPerEm;\r
+ return Util.toPx( v, u );\r
+ },\r
+ isValid: function( t ){\r
+ t = t || this;\r
+ var n = t.name,\r
+ v = t.value,\r
+ u = t.unit,\r
+ z = u !== '' ? true : v === 0;\r
+ if( PARAMS.percent[ n ] === true ) return z;\r
+ if( PARAMS.offset[ n ] === true ) return z;\r
+ if( PARAMS.size[ n ] === true ) return z && u !== '%';\r
+ if( PARAMS.special[ n ] === true ){\r
+ if( n === 'lineHeight' ) return true;\r
+ if( n === 'opacity' ) return 0 <= v && v <= 1 && u === '';\r
+ if( n === 'zIndex' ) return u === '';\r
+ };\r
+ return false;\r
+ }\r
+ }\r
+ );\r
+ \r
+ /**\r
+ * backgroundPosition, clip\r
+ */\r
+ var PropertyGroup = Class.create(\r
+ 'PropertyGroup',\r
+ Class.POOL_OBJECT,\r
+ {\r
+ Constructor : function( name ){\r
+ this.name = name;\r
+ this.props = [];\r
+ for( var i = 1, l = arguments.length; i<l; ++i ){\r
+ this.props.push( arguments[ i ] );\r
+ };\r
+ },\r
+ name : '',\r
+ equal : function( prop ){\r
+ var ps = this.props, i = ps.length;\r
+ for( ; i; ){\r
+ --i;\r
+ if( ps[ i ].equal( prop[ i ] ) === false ) return false;\r
+ };\r
+ return true;\r
+ },\r
+ convert : function( prop ){\r
+ var ps = this.props, i = ps.length;\r
+ for( ; i; ){\r
+ --i;\r
+ ps[ i ].convert( prop[ i ] );\r
+ };\r
+ },\r
+ setValue : function( ary ){\r
+ var ps = this.props, i = 0, l = ps.length;\r
+ for( ; i<l; ++i ){\r
+ ps[ i ].setValue( ary[ i ] );\r
+ };\r
+ },\r
+ getValue : function(){\r
+ var ret = [], ps = this.props, i = 0, l = ps.length;\r
+ for( ; i<l; ++i ){\r
+ ret.push( ps[ i ].getValue() );\r
+ };\r
+ return ret;\r
+ },\r
+ getOffset : function( prop ){\r
+ var ret = [],\r
+ ps = this.props,\r
+ _ps = prop.props,\r
+ i = 0,\r
+ l = ps.length;\r
+ for( ; i<l; ++i ){\r
+ ret.push( ps[ i ].getOffset( _ps[ i ] ) );\r
+ };\r
+ return ret;\r
+ },\r
+ getUnit : function(){\r
+ var ret = [], ps = this.props, i = 0, l = ps.length;\r
+ for( ; i<l; ++i ){\r
+ ret.push( ps[ i ].getUnit() );\r
+ };\r
+ return ret;\r
+ },\r
+ getValueText : function(){\r
+ var ret = [], ps = this.props, i = 0, l = ps.length;\r
+ for( ; i<l; ++i ){\r
+ ret.push( ps[ i ].getValueText() );\r
+ }; \r
+ if( this.name === 'clip' ){\r
+ return 'rect(' + ret.join( CLIP_SEPARATOR ) + ')';\r
+ };\r
+ return ret.join( ' ' );\r
+ },\r
+ onKill : function(){\r
+ var ps = this.props, i = ps.length;\r
+ for( ; i; ){\r
+ ps[ --i ].kill();\r
+ };\r
+ },\r
+ isValid : function( t ){\r
+ t = t || this;\r
+ var ps = t.props, i = ps.length;\r
+ for( ; i; ){\r
+ if( ps[ --i ].isValid() === false ) return false;\r
+ };\r
+ return true;\r
+ }\r
+ }\r
+ );\r
+ \r
+ /**\r
+ * margin, padding, borderWidth, borderColor\r
+ */\r
+ var FrexibleProperty = PropertyGroup.inherits(\r
+ 'FrexibleProperty',\r
+ Class.POOL_OBJECT, {\r
+ Constructor : function( name ){\r
+ this.name = name;\r
+ this.props = [];\r
+ for( var i = 1, l = arguments.length; i<l; ++i ){\r
+ this.props.push( arguments[ i ] );\r
+ };\r
+ // top, bottom, left, right, topbottom, leftright, all \r
+ }\r
+ }\r
+ );\r
+\r
+ var ColorProperty = Class.create(\r
+ 'ColorProperty',\r
+ Class.POOL_OBJECT, {\r
+ Constructor : function( name, r, g, b, pct ){\r
+ this.name = name;\r
+ this.r = r;\r
+ this.g = g;\r
+ this.b = b;\r
+ this.pct = pct;\r
+ },\r
+ name : '',\r
+ equal : function( prop ){\r
+ if( this.pct === prop.pct ){\r
+ return this.r === prop.r && this.g === prop.g && this.b === prop.b;\r
+ };\r
+ var rgb = this._toPct(),\r
+ _rgb = prop._toPct(),\r
+ i = rgb.length;\r
+ for( ; i; ){\r
+ --i;\r
+ if( Math.abs( rgb[ i ] - _rgb[ i ] ) > 1 ) return false;\r
+ };\r
+ return true;\r
+ },\r
+ convert : function( prop ){\r
+ var u = prop.pct, x;\r
+ if( this.pct === u ) return;\r
+ x = u === true ? 100 / 255 : 2.55;\r
+ this.r *= x;\r
+ this.g *= x;\r
+ this.b *= x;\r
+ this.pct = u;\r
+ },\r
+ setValue : function( rgb ){\r
+ this.r = rgb[ 0 ];\r
+ this.g = rgb[ 1 ];\r
+ this.b = rgb[ 2 ];\r
+ },\r
+ getValue : function(){\r
+ return [ this.r, this.g, this.b ];\r
+ },\r
+ getOffset : function( prop ){\r
+ return [ prop.r - this.r, prop.g - this.g, prop.b - this.b ];\r
+ },\r
+ getUnit : function(){\r
+ return this.pct === true ? '%' : '';\r
+ },\r
+ getValueText : function(){\r
+ if( this.pct === true ){\r
+ return [ 'rgb(', this.r, '%,', this.g, '%,', this.b, '%)' ].join( '' );\r
+ };\r
+ var round = Math.round;\r
+ //return [ 'rgb(', round( this.r ), ',', round( this.g ), ',', round( this.b ), ')' ].join( '' );\r
+ \r
+ var rgb = '00000' + ( ( round( this.r ) << 16 ) + ( round( this.g ) << 8 ) + round( this.b ) ).toString( 16 );\r
+ return '#' + rgb.substr( rgb.length - 6 );\r
+ },\r
+ _toPct : function(){\r
+ if( this.pct === true ) return [ this.r, this.g, this.b ];\r
+ return [ this.r / 2.55, this.g / 2.55, this.b / 2.55 ];\r
+ },\r
+ isValid : function( t ){\r
+ var isFinite = window.isFinite;\r
+ if( !isFinite( this.r ) || !isFinite( this.g ) || !isFinite( this.b ) ) return false;\r
+ if( 0 > this.r || 0 > this.g || 0 > this.b ) return false;\r
+ if( this.pct === true ) return this.r <= 100 && this.g <= 100 && this.b <= 100;\r
+ return this.r <= 255 && this.g <= 255 && this.b <= 255;\r
+ }\r
+ }\r
+ );\r
+ \r
+ var isString = Type.isString,\r
+ isNumber = Type.isNumber;\r
+ var REG_UINIT = /.*\d(\w{1,2})?/,\r
+ $1 = '$1',\r
+ px = 'px',\r
+ REG_XXXXXX = /^#[\da-fA-F]{6}?/,\r
+ REG_XXX = /^#[\da-fA-F]{3}?/;\r
+ \r
+ var WrappedStyle = Class.create(\r
+ 'WrappedStyle',\r
+ Class.POOL_OBJECT,\r
+ {\r
+ Constructor : function( style ){\r
+ this.style = style;\r
+ var fontsize = this.get( 'fontSize' );\r
+ this.pxPerEm = fontsize.toPx();\r
+ fonstsize.kill();\r
+ },\r
+ get: function( p ){\r
+ if( PARAMS.special[ p ] === true || PARAMS.region[ p ] === true ){\r
+ if( p === 'clip' ) return this.getClip();\r
+ if( p === 'margin' ) return this.getMarginPaddingBorder( p, '' );\r
+ if( p === 'padding' ) return this.getMarginPaddingBorder( p, '' );\r
+ if( p === 'borderWidth' ) return this.getMarginPaddingBorder( 'border', 'Width' );\r
+ if( p === 'borderColor' ) return this.getBorderColor( 'borderColor' );\r
+ if( p === 'backgroundPosition' ) return this.getBackgroundPosition( p );\r
+ // opacity, zindex, lineHeight\r
+ return new Property( p, this.getValue( x ), this.getUnit( x ), this.pxPerEm );\r
+ };\r
+ var x = this.style[ p ], e, v, u;\r
+ if( PARAMS.offset[ p ] === true ){\r
+ return new Property( p, this.getValue( x ), this.getUnit( x, p ), this.pxPerEm );\r
+ /*\r
+ e = this.elm;\r
+ if( p === 'width' ) v = e.offsetWidth;\r
+ if( p === 'height' ) v = e.offsetHeight;\r
+ if( p === 'top' ) v = e.offsetTop;\r
+ if( p === 'bottom' ) v = e.offsetBottom;\r
+ if( p === 'left' ) v = e.offsetLeft;\r
+ if( p === 'right' ) v = e.offsetRight;\r
+ u = this.getUnit( x, p );\r
+ // alert( p + this.pxTo( v, u ) + u )\r
+ return new Property( p, this.pxTo( v, u ), u, this.pxPerEm ); */\r
+ };\r
+ if( p === 'fontSize' ){ // xx-small 等\r
+ v = Util.absoluteFontSizeToPx( x );\r
+ if( v !== 0 ){\r
+ return new Property( p, v, px, this.pxPerEm );\r
+ };\r
+ }; \r
+ if( PARAMS.percent[ p ] === true ){\r
+ // alert( p + ' , ' + x + ' , ' + this.getUnit( x, p ) )\r
+ return new Property( p, this.getValue( x ), this.getUnit( x, p ), this.pxPerEm );\r
+ };\r
+ if( PARAMS.size[ p ] === true ){\r
+ return new Property( p, this.getValue( x ), this.getUnit( x, p ), this.pxPerEm );\r
+ };\r
+ if( PARAMS.color[ p ] === true ){\r
+ return this.getColor( x, p );\r
+ };\r
+ },\r
+ pxTo: function( px, unit ){\r
+ if( unit === 'em' ) return px / this.pxPerEm;\r
+ return Util.pxTo( px, unit );\r
+ },\r
+ getValue: function( x ){\r
+ return isString( x ) === true ? parseInt( x ) :\r
+ isNumber( x ) === true ? x : 0;\r
+ },\r
+ getUnit: function( x, p ){\r
+ var u;\r
+ if( isString( x ) === true ){\r
+ u = x.replace( REG_UINIT, $1 );\r
+ if( p === 'lineHeight' ) return u;\r
+ if( PARAMS.unit[ u ] !== true ) return px;\r
+ return u;\r
+ };\r
+ return px;\r
+ },\r
+ getColor: function( x, p ){\r
+ var rgb = COLOR[ x.toUpperCase() ],\r
+ pct = false,\r
+ r = 0,\r
+ g = 0,\r
+ b = 0;\r
+ if( isNumber( rgb ) === true ){\r
+ r = ( rgb & 0xff0000 ) >> 16;\r
+ g = ( rgb & 0xff00 ) >> 8;\r
+ b = ( rgb & 0xff );\r
+ } else\r
+ if( x.match( REG_XXXXXX ) ){\r
+ r = parseInt( x.charAt( 1 ) + x.charAt( 2 ), 16 );\r
+ g = parseInt( x.charAt( 3 ) + x.charAt( 4 ), 16 );\r
+ b = parseInt( x.charAt( 5 ) + x.charAt( 6 ), 16 );\r
+ //alert( x + ' g: ' + g )\r
+ } else \r
+ if( x.match( REG_XXX ) ){\r
+ r = parseInt( x.charAt( 1 ) + x.charAt( 1 ), 16 );\r
+ g = parseInt( x.charAt( 2 ) + x.charAt( 2 ), 16 );\r
+ b = parseInt( x.charAt( 3 ) + x.charAt( 3 ), 16 );\r
+ } else\r
+ if( x.indexOf( 'rgb(' ) === 0 ){\r
+ rgb = x.substr( 4 ).split( ',' );\r
+ r = parseFloat( rgb[ 0 ] );\r
+ g = parseFloat( rgb[ 1 ] );\r
+ b = parseFloat( rgb[ 2 ] );\r
+ if( x.indexOf( '%' ) !== -1 ) pct = true;\r
+ } else {\r
+ r = 255;\r
+ g = 255;\r
+ b = 255;\r
+ };\r
+ return new ColorProperty( p, r, g, b, pct );\r
+ },\r
+ getClip: function( name ){\r
+ // rect(...) クリップします。<top>, <bottom> は上端からの、 <right>, <left> は左端からのオフセットで指定します。Internet Explorer 4～7 では、カンマの代わりにスペースで区切る必要があります。\r
+ // position:absolute または position:fixed を適用した要素に対してのみ有効です。\r
+ var top = this.get( name + 'Top' ),\r
+ right = this.get( name + 'Right' ),\r
+ bottom = this.get( name + 'Bottom' ),\r
+ left = this.get( name + 'Left' ),\r
+ ret = new PropertyGroup( name, top, right, bottom, left),\r
+ all;\r
+ if( ret.isValid() === true ) return ret;\r
+ ret.kill();\r
+ all = this.style[ name ].split( '(' )[ 1 ].split( ')' )[ 0 ].split( CLIP_SEPARATOR );\r
+ return new PropertyGroup( name,\r
+ new Property( name + 'Top', all[ 0 ], px, this.pxPerEm ),\r
+ new Property( name + 'Right', all[ 1 ], px, this.pxPerEm ),\r
+ new Property( name + 'Bottom', all[ 2 ], px, this.pxPerEm ),\r
+ new Property( name + 'Left', all[ 3 ], px, this.pxPerEm )\r
+ );\r
+ },\r
+ getBackgroundPosition: function( name ){\r
+ var x = this.get( name + 'X' ),\r
+ y = this.get( name + 'Y' ),\r
+ ret = new PropertyGroup( name, x, y ),\r
+ xy;\r
+ if( ret.isValid() === true ) return ret;\r
+ ret.kill();\r
+ xy = this.style[ name ].split( ' ' );\r
+ return new PropertyGroup( name,\r
+ new Property( name + 'X', this.getValue( xy[ 0 ] ), this.getUnit( xy[ 0 ] ), this.pxPerEm ),\r
+ new Property( name + 'Y', this.getValue( xy[ 1 ] ), this.getUnit( xy[ 1 ] ), this.pxPerEm )\r
+ );\r
+ },\r
+ getMarginPaddingBorder: function( name, width ){\r
+ var props = [ name + 'Top' + width,\r
+ name + 'Right' + width,\r
+ name + 'Bottom' + width,\r
+ name + 'Left' + width ],\r
+ top = this.get( props[ 0 ] ),\r
+ right = this.get( props[ 1 ] ),\r
+ bottom = this.get( props[ 2 ] ),\r
+ left = this.get( props[ 3 ] ),\r
+ ret = new FrexibleProperty( name, top, right, bottom, left ),\r
+ klass, pxPerEm, getValue, getUnit,\r
+ all, _0, _1, _2, _3, v, u;\r
+ if( ret.isValid() === true ) return ret;\r
+ ret.kill();\r
+ klass = Property;\r
+ pxPerEm = this.pxPerEm;\r
+ getValue = this.getValue;\r
+ getUnit = this.getUnit;\r
+ all = this.style[ name + width ].split( ' ' );\r
+ _0 = all[ 0 ];\r
+ _1 = all[ 1 ];\r
+ _2 = all[ 2 ];\r
+ _3 = all[ 3 ];\r
+ v = getValue( _0 );\r
+ u = getUnit( _0 );\r
+ switch( all.length ){\r
+ case 1 :\r
+ top = new klass( props[ 0 ], v, u, pxPerEm );\r
+ right = new klass( props[ 1 ], v, u, pxPerEm );\r
+ bottom = new klass( props[ 2 ], v, u, pxPerEm );\r
+ left = new klass( props[ 3 ], v, u, pxPerEm );\r
+ break;\r
+ case 2 :\r
+ top = new klass( props[ 0 ], v, u, pxPerEm );\r
+ bottom = new klass( props[ 2 ], v, u, pxPerEm );\r
+ v = getValue( _1 );\r
+ u = getUnit( _1 );\r
+ right = new klass( props[ 1 ], v, u, pxPerEm );\r
+ left = new klass( props[ 3 ], v, u, pxPerEm );\r
+ break;\r
+ case 3 :\r
+ top = new klass( props[ 0 ], v, u, pxPerEm );\r
+ v = getValue( _1 );\r
+ u = getUnit( _1 );\r
+ right = new klass( props[ 1 ], v, u, pxPerEm );\r
+ left = new klass( props[ 3 ], v, u, pxPerEm );\r
+ bottom = new klass( props[ 2 ], getValue( _2 ), getUnit( _2 ), pxPerEm );\r
+ break;\r
+ case 4 :\r
+ top = new klass( props[ 0 ], v, u, pxPerEm );\r
+ right = new klass( props[ 1 ], getValue( _1 ), getUnit( _1 ), pxPerEm );\r
+ bottom = new klass( props[ 2 ], getValue( _2 ), getUnit( _2 ), pxPerEm );\r
+ left = new klass( props[ 3 ], getValue( _3 ), getUnit( _3 ), pxPerEm );\r
+ break;\r
+ };\r
+ return new FrexibleProperty( name, top, right, bottom, left );\r
+ },\r
+ getBorderColor: function( name ){\r
+ var props = 'borderTopColor,borderRightColor,borderBottomColor,borderLeftColor'.split( ',' ),\r
+ top = this.get( props[ 0 ] ),\r
+ right = this.get( props[ 1 ] ),\r
+ bottom = this.get( props[ 2 ] ),\r
+ left = this.get( props[ 3 ] ),\r
+ ret = new FrexibleProperty( name, top, right, bottom, left ),\r
+ all, _0, _1, getColor;\r
+ if( ret.isValid() === true ) return ret;\r
+ ret.kill();\r
+ getColor = this.getColor;\r
+ all = this.style[ name ].split( ' ' );\r
+ _0 = all[ 0 ];\r
+ _1 = all[ 1 ];\r
+ switch( all.length ){\r
+ case 1 :\r
+ top = getColor( _0, props[ 0 ] );\r
+ right = getColor( _0, props[ 1 ] );\r
+ bottom = getColor( _0, props[ 2 ] );\r
+ left = getColor( _0, props[ 3 ] );\r
+ break;\r
+ case 2 :\r
+ top = getColor( _0, props[ 0 ] );\r
+ right = getColor( _1, props[ 1 ] );\r
+ bottom = getColor( _0, props[ 2 ] );\r
+ left = getColor( _1, props[ 3 ] );\r
+ break;\r
+ case 3 :\r
+ top = getColor( _0, props[ 0 ] );\r
+ right = getColor( _1, props[ 1 ] );\r
+ bottom = getColor( all[ 2 ], props[ 2 ] );\r
+ left = getColor( _1, props[ 3 ] );\r
+ break;\r
+ case 4 :\r
+ top = getColor( _0, props[ 0 ] );\r
+ right = getColor( _1, props[ 1 ] );\r
+ bottom = getColor( all[ 2 ], props[ 2 ] );\r
+ left = getColor( all[ 3 ], props[ 3 ] );\r
+ break;\r
+ };\r
+ return new FrexibleProperty( name, top, right, bottom, left );\r
+ }\r
+ }\r
+ );\r
+ function camelizeHash( obj ){\r
+ var p, _p, came = Util.camelize;\r
+ for( p in obj ){\r
+ _p = came( p );\r
+ if( _p === p ) continue;\r
+ obj[ _p ] = obj[ _p ] || obj[ p ];\r
+ delete obj[ p ];\r
+ };\r
+ }; \r
+ return {\r
+ create: function( css ){\r
+ return new WrappedStyle( camelizeHash( p ) );\r
+ }\r
+ };\r
+})();\r
+\r
+var XDocument = ( function( window, document ){\r
+ \r
+ var getIndex = Util.getIndex;\r
+ var ROOT_LIST = [];\r
+ var DEF_ATTRS = {};\r
+ var AUTO = Number.POSITIVE_INFINITY;\r
+ var FULL = DEF_ATTRS; // something unigue value;\r
+ var FLOOR = Math.floor;\r
+ \r
+ DEF_ATTRS.LENGTH = 1;\r
+ DEF_ATTRS.PERCENT = 2;\r
+ DEF_ATTRS.COLOR = 4;\r
+ DEF_ATTRS.U_DECIMAL = 8;\r
+ DEF_ATTRS.NUMERICAL = 16;\r
+ DEF_ATTRS.BOOLEAN = 32;\r
+ DEF_ATTRS.QUARTET = 64;\r
+ DEF_ATTRS.URL = 128;\r
+ DEF_ATTRS.FONT_NAME = 256;\r
+ DEF_ATTRS.LIST = 512;\r
+ DEF_ATTRS.AUTO = 1024;\r
+ DEF_ATTRS.COMBI = 2048;\r
+ DEF_ATTRS.BORDER_STYLE = 'none,hidden,dotted,dashed,solid,double,groove,ridge,inset,outset'.split(',');\r
+ DEF_ATTRS.POSITION_X = 'left,center,right'.split(',');\r
+ DEF_ATTRS.POSITION_Y = 'top,center,bottom'.split(',');\r
+ DEF_ATTRS.ALIGN = 'left,center,right,justify'.split(',');\r
+ DEF_ATTRS.TEXT_DECORATION = 'none,underline,overline,line-through,blink'.split(',');\r
+ DEF_ATTRS.TEXT_TRANSFORM = 'none,capitalize,lowercase,uppercase'.split(',');\r
+ DEF_ATTRS.WIDTH_HEIGHT = 'auto'.split(',');\r
+ DEF_ATTRS.BOX_SIZING = 'content-box,padding-box,border-box,margin-box'.split(',');\r
+ DEF_ATTRS.PAINT = 1; // 再描画のみ必要\r
+ DEF_ATTRS.REFLOW = 2; // レイアウトの再計算が必要\r
+ DEF_ATTRS.FONT = 3; // フォントサイズが変更された\r
+ DEF_ATTRS.CONTENT_UPDATE = 4; // コンテンツが変更された\r
+ \r
+ DEF_ATTRS.borderWidth = [ DEF_ATTRS.REFLOW, 0, DEF_ATTRS.QUARTET | DEF_ATTRS.LENGTH ]; // em [ top, right, bottom, left ]\r
+ DEF_ATTRS.borderColor = [ DEF_ATTRS.PAINT, 4, DEF_ATTRS.QUARTET | DEF_ATTRS.DEF_COLOR ]; // color [ top, right, bottom, left ]\r
+ DEF_ATTRS.borderStyle = [ DEF_ATTRS.PAINT, 8, DEF_ATTRS.QUARTET | DEF_ATTRS.LIST, DEF_ATTRS.BORDER_STYLE ]; // string [ top, right, bottom, left ]\r
+ DEF_ATTRS.cornerRadius = [ DEF_ATTRS.PAINT, 12, DEF_ATTRS.QUARTET | DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT ]; // em, px [ top, right, bottom, left ]\r
+ DEF_ATTRS.bgColor = [ DEF_ATTRS.PAINT, 16, DEF_ATTRS.COLOR ]; // color\r
+ DEF_ATTRS.bgAlpha = [ DEF_ATTRS.PAINT, 17, DEF_ATTRS.U_DECIMAL ]; // 0 - 1\r
+ DEF_ATTRS.bgImgUrl = [ DEF_ATTRS.PAINT, 18, DEF_ATTRS.URL ]; // url\r
+ DEF_ATTRS.bgImgRepeatX = [ DEF_ATTRS.PAINT, 19, DEF_ATTRS.BOOLEAN ]; // true / false\r
+ DEF_ATTRS.bgImgRepeatY = [ DEF_ATTRS.PAINT, 20, DEF_ATTRS.BOOLEAN ]; // true / false\r
+ DEF_ATTRS.bgImgPositionX = [ DEF_ATTRS.PAINT, 21, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT | DEF_ATTRS.LIST, DEF_ATTRS.POSITION_X ]; // em %, px, string\r
+ DEF_ATTRS.bgImgPositionY = [ DEF_ATTRS.PAINT, 22, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT | DEF_ATTRS.LIST, DEF_ATTRS.POSITION_Y ]; // em %, px, string\r
+ DEF_ATTRS.shadowColor = [ DEF_ATTRS.PAINT, 23, DEF_ATTRS.COLOR ]; // color\r
+ DEF_ATTRS.shadowAlpha = [ DEF_ATTRS.PAINT, 24, DEF_ATTRS.U_DECIMAL ]; // 0 - 1\r
+ DEF_ATTRS.shadowOffsetX = [ DEF_ATTRS.PAINT, 25, DEF_ATTRS.LENGTH ]; // em\r
+ DEF_ATTRS.shadowOffsetY = [ DEF_ATTRS.PAINT, 26, DEF_ATTRS.LENGTH ]; // em\r
+ DEF_ATTRS.shadowBlur = [ DEF_ATTRS.PAINT, 27, DEF_ATTRS.LENGTH ]; // em\r
+ DEF_ATTRS.shadowSpread = [ DEF_ATTRS.PAINT, 28, DEF_ATTRS.LENGTH ]; // em\r
+ DEF_ATTRS.shadowInset = [ DEF_ATTRS.PAINT, 29, DEF_ATTRS.BOOLEAN ]; // true / false\r
+ \r
+ DEF_ATTRS.color = [ DEF_ATTRS.PAINT, 30, DEF_ATTRS.COLOR ]; // color\r
+ DEF_ATTRS.fontFamily = [ DEF_ATTRS.FONT, 31, DEF_ATTRS.FONT_NAME ]; // string\r
+ DEF_ATTRS.fontSize = [ DEF_ATTRS.FONT, 32, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT ]; // em, %\r
+ DEF_ATTRS.bold = [ DEF_ATTRS.FONT, 33, DEF_ATTRS.BOOLEAN ]; // true / false\r
+ DEF_ATTRS.italic = [ DEF_ATTRS.FONT, 34, DEF_ATTRS.BOOLEAN ]; // true / false\r
+ DEF_ATTRS.lineHeight = [ DEF_ATTRS.FONT, 35, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT | DEF_ATTRS.NUMERICAL ]; // em, %, \r
+ DEF_ATTRS.letterSpacing = [ DEF_ATTRS.FONT, 36, DEF_ATTRS.LENGTH ]; // em\r
+ DEF_ATTRS.wordSpacing = [ DEF_ATTRS.FONT, 37, DEF_ATTRS.LENGTH ];\r
+ DEF_ATTRS.align = [ DEF_ATTRS.FONT, 38, DEF_ATTRS.LIST, DEF_ATTRS.ALIGN ];\r
+ DEF_ATTRS.decoration = [ DEF_ATTRS.PAINT, 39, DEF_ATTRS.LIST, DEF_ATTRS.TEXT_DECORATION ];\r
+ DEF_ATTRS.transform = [ DEF_ATTRS.FONT, 40, DEF_ATTRS.LIST, DEF_ATTRS.TEXT_TRANSFORM ];\r
+ DEF_ATTRS.textShadowColor = [ DEF_ATTRS.PAINT, 41, DEF_ATTRS.COLOR ];\r
+ DEF_ATTRS.textShadowOffsetX = [ DEF_ATTRS.PAINT, 42, DEF_ATTRS.LENGTH ];\r
+ DEF_ATTRS.textShadowOffsetY = [ DEF_ATTRS.PAINT, 43, DEF_ATTRS.LENGTH ];\r
+ DEF_ATTRS.shadowBlur = [ DEF_ATTRS.PAINT, 44, DEF_ATTRS.LENGTH ];\r
+ \r
+ DEF_ATTRS.width = [ DEF_ATTRS.REFLOW, 45, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT, DEF_ATTRS.WIDTH_HEIGHT ];\r
+ DEF_ATTRS.minWidth = [ DEF_ATTRS.REFLOW, 46, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT ];\r
+ DEF_ATTRS.maxWidth = [ DEF_ATTRS.REFLOW, 47, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT ];\r
+ DEF_ATTRS.height = [ DEF_ATTRS.REFLOW, 48, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT, DEF_ATTRS.WIDTH_HEIGHT ];\r
+ DEF_ATTRS.minHeight = [ DEF_ATTRS.REFLOW, 49, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT ];\r
+ DEF_ATTRS.maxHeight = [ DEF_ATTRS.REFLOW, 50, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT ];\r
+ DEF_ATTRS.padding = [ DEF_ATTRS.REFLOW, 51, DEF_ATTRS.QUARTET | DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT ];\r
+ DEF_ATTRS.margin = [ DEF_ATTRS.REFLOW, 55, DEF_ATTRS.QUARTET | DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT ];\r
+ DEF_ATTRS.sizing = [ DEF_ATTRS.REFLOW, 59, DEF_ATTRS.LIST, DEF_ATTRS.BOX_SIZING ];\r
+ DEF_ATTRS.pageBox = [ DEF_ATTRS.REFLOW, 60, DEF_ATTRS.BOOLEAN ]; // true / false\r
+ DEF_ATTRS.x = DEF_ATTRS.left = [ DEF_ATTRS.REFLOW, 61, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT ];\r
+ DEF_ATTRS.y = DEF_ATTRS.top = [ DEF_ATTRS.REFLOW, 62, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT ];\r
+ DEF_ATTRS.bottom = [ DEF_ATTRS.REFLOW, 63, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT ];\r
+ DEF_ATTRS.right = [ DEF_ATTRS.REFLOW, 64, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT ];\r
+ \r
+ var ATTRS = ( function(){\r
+ var ret = {},\r
+ obj = DEF_ATTRS,\r
+ p;\r
+ for( p in obj ){\r
+ if( Type.isArray( obj[ p ] ) === true ){\r
+ ret[ p ] = obj[ p ][ 1 ];\r
+ };\r
+ };\r
+ return ret;\r
+ })();\r
+ \r
+ /**\r
+ * 再計算と再描画\r
+ * redraw 再描画はパラメータ変更後に setTimeout で\r
+ * reflow 再計算は値が get された場合 invalidate が サイズだったら\r
+ * または再描画前に invalidate がサイズなフラグが足っていたら \r
+ */\r
+ \r
+ var BasicLayoutManager = Class.create(\r
+ 'BasicLayoutManager',\r
+ Class.POOL_OBJECT,\r
+ {\r
+ Constructor : function(){\r
+ \r
+ },\r
+ redraw : function( nodeData ){\r
+ var root = nodeData.__root;\r
+ root.dirty === DEF_ATTRS.REFLOW && this.reflow( root );\r
+ \r
+ // draw\r
+ },\r
+ reflow : function( nodeData, allowW, allowH ){\r
+ nodeData.preMesure( allowW, allowH );\r
+ \r
+ var children = nodeData.children, \r
+ contentW = nodeData.contentWidth,\r
+ contentH = nodeData.contentHeight,\r
+ autoW = contentW === AUTO,\r
+ autoH = contentH === AUTO,\r
+ auto, calc, childW, childH, child, i, style, data,\r
+ t, r, b, l; \r
+ if( children ){\r
+ auto = autoW && autoH;\r
+ childW = 0;\r
+ childH = 0;\r
+ calc = BasicLayoutManager.calcValue; \r
+ for( i = children.length; i; ){\r
+ child = children[ --i ];\r
+ style = child.__style;\r
+ if( style ){\r
+ data = style.data;\r
+ t = calc( data[ ATTRS.top ], contentH );\r
+ r = calc( data[ ATTRS.right ], contentW );\r
+ b = calc( data[ ATTRS.bottom ], contentH );\r
+ l = calc( data[ ATTRS.left ], contentW );\r
+ } else {\r
+ t = r = b = l = 0;\r
+ };\r
+ if( child instanceof LayoutBoxPrivate ){\r
+ child.layoutManager.reflow( child, contentW - r - l, contentH - t - b );\r
+ } else {\r
+ child.preMesure( contentW - r - l, contentH - t - b );\r
+ child.mesure();\r
+ child.postMesure();\r
+ };\r
+ if( !auto ) continue;\r
+ if( autoW && childW < child.boxWidth + r + l ) childW = child.boxWidth + r + l;\r
+ if( autoH && childH < child.boxHeight + t + b ) childH = child.boxHeight + t + b; \r
+ };\r
+ if( autoW ) nodeData.contentWidth = childW;\r
+ if( autoH ) nodeData.contentHeight = childH;\r
+ };\r
+ ( autoW || autoH ) && nodeData.postMesure();\r
+ \r
+ delete nodeData.dirty;\r
+ }\r
+ }\r
+ );\r
+ BasicLayoutManager.finalValue = function( styleValue, styleMin, styleMax, srcValue ){\r
+ var calc = BasicLayoutManager.calcValue,\r
+ v = calc( styleValue, srcValue ),\r
+ min = calc( styleMin, srcValue ),\r
+ max = calc( styleMax, srcValue );\r
+ if( v < min ) return min;\r
+ if( max < v ) return max;\r
+ return v;\r
+ };\r
+ BasicLayoutManager.calcValue = function( styleValue, srcValue ){\r
+ switch( styleValue ){\r
+ case 0 :\r
+ return 0;\r
+ case AUTO :\r
+ return AUTO;\r
+ case FULL :\r
+ return srcValue; // 100%\r
+ default :\r
+ if( 1 <= styleValue ) return styleValue; // legth\r
+ if( -1 < styleValue ) return FLOOR( srcValue * styleValue ); // %\r
+ };\r
+ return styleValue; // - length\r
+ };\r
+ BasicLayoutManager.advancedCalcValue = function( styleValue, srcValue ){\r
+ switch( styleValue ){\r
+ case 0 :\r
+ return 0;\r
+ case AUTO :\r
+ return srcValue;\r
+ case FULL :\r
+ throw new Error( 'advancedCalcValue FULL' ); \r
+ // return ; // 100%\r
+ default :\r
+ if( 1 <= styleValue ) return styleValue; \r
+ if( -1 < styleValue ) return FLOOR( ( srcValue / ( 1 - styleValue ) ) * styleValue ); // %\r
+ };\r
+ return styleValue; // - length\r
+ };\r
+ \r
+ var NodeStylePrivate = Class.create(\r
+ Class.PRIVATE_DATA | Class.POOL_OBJECT,\r
+ {\r
+ fontCssText : null,\r
+ colorCssText : null,\r
+ layoutCssText : null,\r
+ Constructor : function(){\r
+ this.data = [];\r
+ this.dirty = 0;\r
+ },\r
+ register : function( node ){\r
+ var root = node.__root,\r
+ roots = this.rootList,\r
+ nodes = this.nodeList;\r
+ if( !roots ){\r
+ this.rootList = [ root ];\r
+ } else\r
+ if( getIndex( roots, root ) === -1 ) roots[ roots.length ] = root;\r
+ \r
+ if( !nodes ){\r
+ this.nodeList = [ node ];\r
+ return;\r
+ };\r
+ if( getIndex( nodes, node ) === -1 ) nodes[ nodes.length ] = node;\r
+ },\r
+ unRegister : function( node ){\r
+ var nodes = this.nodeList,\r
+ i = getIndex( nodes, node ),\r
+ root = node._root,\r
+ roots = this.rootList,\r
+ j = getIndex( roots, root );\r
+ if( i !== -1 && nodes.splice( i, 1 ) && nodes.length === 0 ) delete this.nodeList;\r
+ if( j !== -1 && roots.splice( j, 1 ) && roots.length === 0 ) delete this.rootList;\r
+ },\r
+ clone : function(){\r
+ var styleClass = Class.getClass( this.User ),\r
+ dataClass = Class.getClass( this );\r
+ },\r
+ /*\r
+ * opt_unit は getter のみ\r
+ */\r
+ attr : function( prop, v, opt_unit ){\r
+ var update = prop[ 0 ],\r
+ propID = prop[ 1 ],\r
+ type = prop[ 2 ],\r
+ list = prop[ 3 ],\r
+ length = !!( type & DEF_ATTRS.LENGTH ),\r
+ percent = !!( type & DEF_ATTRS.PERCENT ),\r
+ color = !!( type & DEF_ATTRS.COLOR ),\r
+ uDecimal = !!( type & DEF_ATTRS.U_DECIMAL ),\r
+ numerical = !!( type & DEF_ATTRS.NUMERICAL ),\r
+ flag = !!( type & DEF_ATTRS.BOOLEAN ),\r
+ quartet = !!( type & DEF_ATTRS.QUARTET ),\r
+ url = !!( type & DEF_ATTRS.URL ),\r
+ fontName = !!( type & DEF_ATTRS.FONT_NAME ),\r
+ //list = !!( type & DEF_ATTRS.LIST ),\r
+ combi = !!( type & DEF_ATTRS.COMBI ),\r
+ data = this.data,\r
+ _v = -1,\r
+ i, l, nodes, root;\r
+ /*\r
+ * Setter\r
+ */\r
+ if( v !== undefined ){\r
+ if( Type.isNumber( v ) === true ){\r
+ if( numerical === false ){\r
+ if( uDecimal === false || v < 0 || 1 < v ) throw new Error( '' );\r
+ };\r
+ } else\r
+ if( Type.isBoolean( v ) === true ){\r
+ if( flag === false ) throw new Error( '' );\r
+ } else\r
+ if( Type.isString( v ) === true ){\r
+ if( url === false && fontName === false ){\r
+ if( v.indexOf( ' ' ) !== -1 ){\r
+ v = v.split( ' ' );\r
+ } else {\r
+ if( length === false && percent === false && color === false ) throw new Error( '' );\r
+ };\r
+ };\r
+ }; \r
+ if( Type.isArray( v ) === true ){\r
+ if( v.length <= 4 && quartet === true ){\r
+ type ^= DEF_ATTRS.QUARTET;\r
+ } else\r
+ if( v.length === 2 && combi === true ){\r
+ type ^= DEF_ATTRS.COMBI;\r
+ } else {\r
+ throw new Error( '' );\r
+ };\r
+ switch( v.length ){\r
+ case 1 :\r
+ this.attr( [ propID , type, list ], v[ 0 ] );\r
+ this.attr( [ ++propID, type, list ], v[ 0 ] );\r
+ this.attr( [ ++propID, type, list ], v[ 0 ] );\r
+ this.attr( [ ++propID, type, list ], v[ 0 ] );\r
+ break;\r
+ case 2 :\r
+ this.attr( [ propID , type, list ], v[ 0 ] );\r
+ this.attr( [ ++propID, type, list ], v[ 1 ] );\r
+ this.attr( [ ++propID, type, list ], v[ 0 ] );\r
+ this.attr( [ ++propID, type, list ], v[ 1 ] );\r
+ break;\r
+ case 3 :\r
+ this.attr( [ propID , type, list ], v[ 0 ] );\r
+ this.attr( [ ++propID, type, list ], v[ 1 ] );\r
+ this.attr( [ ++propID, type, list ], v[ 2 ] );\r
+ this.attr( [ ++propID, type, list ], v[ 1 ] );\r
+ break;\r
+ case 4 :\r
+ this.attr( [ propID , type, list ], v[ 0 ] );\r
+ this.attr( [ ++propID, type, list ], v[ 1 ] );\r
+ this.attr( [ ++propID, type, list ], v[ 2 ] );\r
+ this.attr( [ ++propID, type, list ], v[ 3 ] );\r
+ break;\r
+ default :\r
+ };\r
+ return this.User;\r
+ };\r
+ switch( update ){\r
+ case DEF_ATTRS.REFLOW :\r
+ delete this.layoutCssText;\r
+ break;\r
+ case DEF_ATTRS.PAINT :\r
+ delete this.colorCssText;\r
+ break;\r
+ case DEF_ATTRS.FONT :\r
+ delete this.fontCssText;\r
+ };\r
+\r
+ if( this.dirty < update ){\r
+ this.dirty = update;\r
+ roots = this.rootList;\r
+ for( i = 0, l = roots.length; i < l; ++i ){\r
+ root = roots[ i ];\r
+ if( root.dirty < update ) root.dirty = update;\r
+ };\r
+ };\r
+ \r
+ if( list ) _v = Util.getIndex( list, v );\r
+ data[ propID ] = _v !== -1 ? _v : v;\r
+ \r
+ switch( prop ){\r
+ case DEF_ATTRS.left :\r
+ case DEF_ATTRS.right :\r
+ this.ltrtWidth = data[ DEF_ATTRS.left[ 0 ] ] === undefined && data[ DEF_ATTRS.right[ 0 ] ] === undefined;\r
+ break;\r
+ case DEF_ATTRS.top :\r
+ case DEF_ATTRS.bottom :\r
+ this.tpbtHeight = data[ DEF_ATTRS.top[ 0 ] ] === undefined && data[ DEF_ATTRS.bottom[ 0 ] ] === undefined;\r
+ break;\r
+ case DEF_ATTRS.width :\r
+ this.autoWidth = v === AUTO;\r
+ this.prctWidth = v === FULL || v < 1;\r
+ break;\r
+ case DEF_ATTRS.height :\r
+ this.autoHeight = v === AUTO;\r
+ this.prctHeight = v === FULL || v < 1;\r
+ break;\r
+ }; \r
+ return this.User;\r
+ };\r
+ v = data[ propID ];\r
+ // Unit\r
+ if( quartet === true ) return [ v, data[ ++propID ], data[ ++propID ], data[ ++propID ] ];\r
+ if( combi === true ) return [ v, data[ ++propID ] ];\r
+ if( list && Type.isNumber( v ) === true ) return list[ v ];\r
+ return v;\r
+ },\r
+ cssText : function(){\r
+ if( this.fontCssText === null ) this.fontCssText = this.createFontCssText();\r
+ if( this.layoutCssText === null ) this.layoutCssText = this.createLayoutCssText();\r
+ if( this.colorCssText === null ) this.colorCssText = this.createColorCssText();\r
+ return [ this.fontCssText, this.colorCssText, this.layoutCssText ].join( ';' );\r
+ },\r
+ createFontCssText : function(){\r
+ var data = this.data,\r
+ css = [],\r
+ v;\r
+ if( v = data[ ATTRS.fontFamily ] ) css[ 0 ] = 'font-family:' + v;\r
+ if( v = data[ ATTRS.fontSize ] ) css[ css.length - 1 ] = 'font-size:' + v;\r
+ if( v = data[ ATTRS.bold ] ) css[ css.length - 1 ] = 'font-weight:bold';\r
+ if( v = data[ ATTRS.bold ] ) css[ css.length - 1 ] = 'font-style:italic';\r
+ if( v = data[ ATTRS.lineHeight ] ) css[ css.length - 1 ] = 'line-height:' + v;\r
+ if( v = data[ ATTRS.letterSpacing ] ) css[ css.length - 1 ] = 'letter-spacing:' + v;\r
+ if( v = data[ ATTRS.wordSpacing ] ) css[ css.length - 1 ] = 'word-spacing:' + v;\r
+ if( v = data[ ATTRS.align ] ) css[ css.length - 1 ] = 'text-align:' + DEF_ATTRS.ALIGN[ v ];\r
+ if( v = data[ ATTRS.transform ] ) css[ css.length - 1 ] = 'text-transform:' + DEF_ATTRS.TEXT_TRANSFORM[ v ];\r
+ return css.join( ',' );\r
+ },\r
+ createColorCssText : function(){\r
+ var data = this.data,\r
+ css = [],\r
+ v, x, y, c, b;\r
+ if( v = data[ ATTRS.borderColor ] ) css[ 0 ] = 'border-color:' + v;\r
+ if( v = data[ ATTRS.borderStyle + 0 ] ) css[ css.length - 1 ] = 'border-top-style:' + DEF_ATTRS.BORDER_STYLE[ v ];\r
+ if( v = data[ ATTRS.borderStyle + 1 ] ) css[ css.length - 1 ] = 'border-right-style:' + DEF_ATTRS.BORDER_STYLE[ v ];\r
+ if( v = data[ ATTRS.borderStyle + 2 ] ) css[ css.length - 1 ] = 'border-bottom-style:' + DEF_ATTRS.BORDER_STYLE[ v ];\r
+ if( v = data[ ATTRS.borderStyle + 3 ] ) css[ css.length - 1 ] = 'border-left-style:' + DEF_ATTRS.BORDER_STYLE[ v ];\r
+ if( v = data[ ATTRS.cornerRadius + 0 ] ) css[ css.length - 1 ] = 'corner-radius-top:' + v;\r
+ if( v = data[ ATTRS.cornerRadius + 1 ] ) css[ css.length - 1 ] = 'corner-radius-right:' + v;\r
+ if( v = data[ ATTRS.cornerRadius + 2 ] ) css[ css.length - 1 ] = 'border-radius-bottom:' + v;\r
+ if( v = data[ ATTRS.cornerRadius + 3 ] ) css[ css.length - 1 ] = 'border-radius-left:' + v;\r
+ if( v = data[ ATTRS.bgColor ] ) css[ css.length - 1 ] = 'background-color:' + v;\r
+ // ATTRS.bgAlpha\r
+ if( v = data[ ATTRS.bgImgUrl ] ) css[ css.length - 1 ] = 'background-image:url(' + v + ')';\r
+ x = data[ ATTRS.bgImgRepeatX ];\r
+ y = data[ ATTRS.bgImgRepeatY ];\r
+ if( x && y ){\r
+ css[ css.length - 1 ] = 'background-repeat:repeat';\r
+ } else\r
+ if( x ){\r
+ css[ css.length - 1 ] = 'background-repeat:repeat-x';\r
+ } else \r
+ if( y ){\r
+ css[ css.length - 1 ] = 'background-repeat:repeat-y';\r
+ };\r
+ x = data[ ATTRS.bgImgPositionX ];\r
+ y = data[ ATTRS.bgImgPositionY ];\r
+ if( x && y ){\r
+ css[ css.length - 1 ] = 'background-position:' + x + ' ' + y;\r
+ } else\r
+ if( x ){\r
+ css[ css.length - 1 ] = 'background-position:' + x + ' 0';\r
+ } else \r
+ if( y ){\r
+ css[ css.length - 1 ] = 'background-position:0 ' + y;\r
+ };\r
+ if( v = data[ ATTRS.color ] ) css[ css.length - 1 ] = 'color:' + v;\r
+ if( v = data[ ATTRS.decoration ] ) css[ css.length - 1 ] = 'text-decoration:' + DEF_ATTRS.TEXT_DECORATION[ v ];\r
+ x = data[ ATTRS.textShadowOffsetX ];\r
+ y = data[ ATTRS.textShadowOffsetY ];\r
+ b = data[ ATTRS.textShadowBlur ];\r
+ c = data[ ATTRS.textShadowColor ];\r
+ if( c || x || y || b ){\r
+ css[ css.length - 1 ] = 'text-shadow:' + x + ' ' + y + ' ' + b + ' ' + c;\r
+ };\r
+ /*\r
+ ATTRS.shadowColor = [ DEF_ATTRS.PAINT, 23, DEF_ATTRS.COLOR ]; // color\r
+ ATTRS.shadowAlpha = [ DEF_ATTRS.PAINT, 24, DEF_ATTRS.U_DECIMAL ]; // 0 - 1\r
+ ATTRS.shadowOffsetX = [ DEF_ATTRS.PAINT, 25, DEF_ATTRS.LENGTH ]; // em\r
+ ATTRS.shadowOffsetY = [ DEF_ATTRS.PAINT, 26, DEF_ATTRS.LENGTH ]; // em\r
+ ATTRS.shadowBlur = [ DEF_ATTRS.PAINT, 27, DEF_ATTRS.LENGTH ]; // em\r
+ ATTRS.shadowSpread = [ DEF_ATTRS.PAINT, 28, DEF_ATTRS.LENGTH ]; // em\r
+ ATTRS.shadowInset = [ DEF_ATTRS.PAINT, 29, DEF_ATTRS.BOOLEAN ]; // true / false\r
+ */\r
+ },\r
+ createBoxShadowCssText : function(){\r
+ \r
+ },\r
+ createBGAlphaCssText : function(){\r
+ \r
+ },\r
+ createTextShadowCssText : function(){\r
+ \r
+ },\r
+ createLayoutCssText : function(){\r
+ \r
+ }\r
+ }\r
+ );\r
+ \r
+ var NodeStyle = Class.create(\r
+ 'NodeStyle',\r
+ Class.POOL_OBJECT,\r
+ NodeStylePrivate,\r
+ {\r
+ Constructor : function(){\r
+ NodeStyle.newPrivateData( this );\r
+ },\r
+ borderWidth : function( v ){\r
+ return NodeStyle.getPrivateData( this ).attr( DEF_ATTRS.borderWidth, v );\r
+ },\r
+ borderColor : function(){\r
+ return NodeStyle.getPrivateData( this ).attr( DEF_ATTRS.borderColor, v );\r
+ },\r
+ borderStyle : function(){\r
+ return NodeStyle.getPrivateData( this ).attr( DEF_ATTRS.borderStyle, v );\r
+ },\r
+ cornerRadius : function(){\r
+ return NodeStyle.getPrivateData( this ).attr( DEF_ATTRS.cornerRadius, v );\r
+ },\r
+ bgColor : function(){\r
+ return NodeStyle.getPrivateData( this ).attr( DEF_ATTRS.bgColor, v );\r
+ },\r
+ bgAlpha : function(){\r
+ return NodeStyle.getPrivateData( this ).attr( DEF_ATTRS.bgAlpha, v );\r
+ },\r
+ bgImgUrl : function(){\r
+ return NodeStyle.getPrivateData( this ).attr( DEF_ATTRS.bgImgUrl, v );\r
+ },\r
+ bgImgRepeatX : function(){\r
+ return NodeStyle.getPrivateData( this ).attr( DEF_ATTRS.bgImgRepeatX, v );\r
+ },\r
+ bgImgRepeatY : function(){\r
+ return NodeStyle.getPrivateData( this ).attr( DEF_ATTRS.bgImgRepeatY, v );\r
+ },\r
+ bgImgPositionX : function(){\r
+ return NodeStyle.getPrivateData( this ).attr( DEF_ATTRS.bgImgPositionX, v );\r
+ },\r
+ bgImgPositionY : function(){\r
+ return NodeStyle.getPrivateData( this ).attr( DEF_ATTRS.bgImgPositionY, v );\r
+ },\r
+ shadowColor : function(){\r
+ return NodeStyle.getPrivateData( this ).attr( DEF_ATTRS.shadowColor, v );\r
+ },\r
+ shadowAlpha : function(){\r
+ return NodeStyle.getPrivateData( this ).attr( DEF_ATTRS.shadowAlpha, v );\r
+ },\r
+ shadowOffsetX : function(){\r
+ return NodeStyle.getPrivateData( this ).attr( DEF_ATTRS.shadowOffsetX, v );\r
+ },\r
+ shadowOffsetY : function(){\r
+ return NodeStyle.getPrivateData( this ).attr( DEF_ATTRS.shadowOffsetY, v );\r
+ },\r
+ shadowBlur : function(){\r
+ return NodeStyle.getPrivateData( this ).attr( DEF_ATTRS.shadowBlur, v );\r
+ },\r
+ shadowSpread : function(){\r
+ return NodeStyle.getPrivateData( this ).attr( DEF_ATTRS.shadowSpread, v );\r
+ },\r
+ shadowInset : function(){\r
+ return NodeStyle.getPrivateData( this ).attr( DEF_ATTRS.shadowInset, v );\r
+ },\r
+ color : function( v ){\r
+ return TypoStyle.getPrivateData( this ).attr( DEF_ATTRS.color, v );\r
+ },\r
+ fontFamily : function( v ){\r
+ return TypoStyle.getPrivateData( this ).attr( DEF_ATTRS.fontFamily, v );\r
+ },\r
+ fontSize : function( v ){\r
+ return TypoStyle.getPrivateData( this ).attr( DEF_ATTRS.fontSize, v );\r
+ },\r
+ bold : function( v ){\r
+ return TypoStyle.getPrivateData( this ).attr( DEF_ATTRS.bold, v );\r
+ },\r
+ italic : function( v ){\r
+ return TypoStyle.getPrivateData( this ).attr( DEF_ATTRS.italic, v );\r
+ },\r
+ lineHeight : function( v ){\r
+ return TypoStyle.getPrivateData( this ).attr( DEF_ATTRS.lineHeight, v );\r
+ },\r
+ letterSpacing : function( v ){\r
+ return TypoStyle.getPrivateData( this ).attr( DEF_ATTRS.letterSpacing, v );\r
+ },\r
+ wordSpacing : function( v ){\r
+ return TypoStyle.getPrivateData( this ).attr( DEF_ATTRS.wordSpacing, v );\r
+ },\r
+ align : function( v ){\r
+ return TypoStyle.getPrivateData( this ).attr( DEF_ATTRS.align, v );\r
+ },\r
+ decoration : function( v ){\r
+ return TypoStyle.getPrivateData( this ).attr( DEF_ATTRS.decoration, v );\r
+ },\r
+ transform : function( v ){\r
+ return TypoStyle.getPrivateData( this ).attr( DEF_ATTRS.transform, v );\r
+ },\r
+ textShadowColor : function( v ){\r
+ return TypoStyle.getPrivateData( this ).attr( DEF_ATTRS.textShadowColor, v );\r
+ },\r
+ textShadowOffsetX : function( v ){\r
+ return TypoStyle.getPrivateData( this ).attr( DEF_ATTRS.textShadowOffsetX, v );\r
+ },\r
+ textShadowOffsetY : function( v ){\r
+ return TypoStyle.getPrivateData( this ).attr( DEF_ATTRS.textShadowOffsetY, v );\r
+ },\r
+ shadowBlur : function( v ){\r
+ return TypoStyle.getPrivateData( this ).attr( DEF_ATTRS.shadowBlur, v );\r
+ },\r
+ cssText : function(){\r
+ return TypoStyle.getPrivateData( this ).cssText();\r
+ }\r
+ }\r
+ );\r
+\r
+ var NodePrivate = Class.create(\r
+ 'NodePrivate',\r
+ Class.PRIVATE_DATA | Class.POOL_OBJECT,\r
+ {\r
+ elmWrap : null,\r
+ elmExtend : null,\r
+ textNode : null,\r
+ boxX : 0,\r
+ boxY : 0,\r
+ boxWidth : 0,\r
+ boxHeight : 0,\r
+ contentL : 0,\r
+ contentT : 0,\r
+ contentR : 0,\r
+ contentB : 0,\r
+ borderL : 0,\r
+ borderT : 0,\r
+ borderR : 0,\r
+ borderB : 0,\r
+ paddingL : 0,\r
+ paddingT : 0,\r
+ paddingR : 0,\r
+ paddingB : 0,\r
+ marginL : 0,\r
+ marginT : 0,\r
+ marginR : 0,\r
+ marginB : 0,\r
+ boxSizingOffsetLR : 0,\r
+ boxSizingOffsetTB : 0, \r
+ contentWidth : 0,\r
+ minContentWidth : 0,\r
+ maxContentWidth : AUTO,\r
+ contentHeight : 0,\r
+ minContentHeight : 0,\r
+ maxContentHeight : AUTO,\r
+ Constructor : function( __root, __parent ){\r
+ this.__root = __root;\r
+ if( __parent ) this.__parent = __parent;\r
+ },\r
+ style : function( v ){\r
+ if( v instanceof NodeStyle ){\r
+ this.__style && this.__style.unRegister( this );\r
+ this._style = v;\r
+ this.__style = StylePrivate.getPrivateData( v ); \r
+ this.__style.register( this );\r
+ return this.User;\r
+ } else\r
+ if( v === null ){\r
+ this.__style && this.__style.unRegister( this );\r
+ delete this._style;\r
+ delete this.__style;\r
+ return this.User;\r
+ };\r
+ return this._style;\r
+ },\r
+ content : function( v ){\r
+ if( Type.isString( v ) === true ){\r
+ if( !this.textNode || ( this.textNode && this.textNode.data !== v ) ){\r
+ this._content = v;\r
+ this.updateContent = true;\r
+ };\r
+ return this.User;\r
+ } else\r
+ if( v === null ){\r
+ if( this._content !== v && this.textNode ){\r
+ this._content = v;\r
+ this.updateContent = true;\r
+ };\r
+ return this.User;\r
+ };\r
+ if( this._content ) return this._content;\r
+ if( this._content === null ) return null;\r
+ if( this.textNode ) return this.textNode.data;\r
+ return null;\r
+ },\r
+ /**\r
+ * 要素の追加・削除\r
+ * 1. ペイントがある // 予約のみ\r
+ * 2. コンテンツがある // 予約のみ *\r
+ * 3. コンテンツを削除 // 予約のみ\r
+ * 4. 要素を削除 // 予約のみ\r
+ * \r
+ * コンテンツの再計算\r
+ * 0. 要素追加して css セット\r
+ * 1. コンテンツの変更\r
+ * 2. font 指定の変更\r
+ * 3. contentWidth の変更 （コンテンツの高さの再計算） 前回の contentWidth の保持\r
+ * \r
+ * contentSize, scrollSize の決定\r
+ */\r
+ musure : function( dirty ){\r
+ var content = this._content,\r
+ root = this.__root,\r
+ style = this.__style,\r
+ w = this.contentWidth,\r
+ h = this.contentHeight;\r
+ switch( this.updateContent === true ? DEF_ATTRS.CONTENT_UPDATE : dirty ){\r
+ case DEF_ATTRS.CONTENT_UPDATE : // コンテンツが変更された\r
+ this.paint( 0 );\r
+ this.lastContentWidth = -1;\r
+ case DEF_ATTRS.FONT : // フォントサイズが変更された\r
+ case DEF_ATTRS.REFLOW : // レイアウトの再計算が必要\r
+ /* http://web-designs.seesaa.net/article/188400668.html\r
+ * min-width の値が max-width の値より大きい場合は、max-width の値は min-width の値に設定される。\r
+ * \r
+ * テキストノードがあり\r
+ * 1. contentWidth === AUTO\r
+ * style を更新して contentWidth の決定\r
+ * min or max に引っかかったら style 更新\r
+ * contentHeight === AUTO の場合\r
+ * textHeight の決定\r
+ * contentHeight !== AUTO の場合 scrollHeight のみ更新\r
+ * 2. contentHeight === AUTO かつ \r
+ * コンテンツの高さの再取得が必要( contentWidth が最終計測時の contentWidth と一致 かつ フォント・コンテンツに変更無し の場合再取得不要)\r
+ * style を更新して contentHeight の決定\r
+ * 必要でない\r
+ * 3. content のサイズがすでに決定している\r
+ * コンテンツの高さの再取得が必要\r
+ * 必要でない\r
+ */ \r
+ if( this.textNode ){\r
+ if( w === AUTO ){\r
+ this.commitStyle();\r
+ w = this.contentWidth = this.textNode.offsetWidth;\r
+ this.scrollWidth = w + this.contentL + this.contentR;\r
+ if( this.maxContentWidth < w - this.boxSizingOffsetLR ) this.contentWidth = this.maxContentWidth + this.boxSizingOffsetLR;\r
+ if( w - this.boxSizingOffsetLR < this.minContentWidth ) this.contentWidth = this.minContentWidth + this.boxSizingOffsetLR;\r
+ this.lastContentWidth = this.contentWidth;\r
+ \r
+ w !== this.contentWidth && this.commitStyle();\r
+ \r
+ if( h === AUTO ){\r
+ h = this.conetntHeight = this.textNode.offsetHeight;\r
+ this.scrollHeight = h + this.contentT + this.contentB;\r
+ if( this.maxContentHeight < h - this.boxSizingOffsetTB ) this.contentHeight = this.maxContentHeight + this.boxSizingOffsetTB;\r
+ if( h - this.boxSizingOffsetTB < this.minContentHeight ) this.contentHeight = this.minContentHeight + this.boxSizingOffsetTB;\r
+ } else {\r
+ this.scrollHeight = this.textNode.offsetHeight + this.contentT + this.contentB;\r
+ };\r
+ } else\r
+ if( h === AUTO ){\r
+ if( w !== this.lastContentWidth || dirty !== DEF_ATTRS.REFLOW ){\r
+ this.commitStyle();\r
+ this.lastContentWidth = w;\r
+ h = this.conetntHeight = this.textNode.offsetHeight;\r
+ this.scrollWidth = w + this.contentL + this.contentR;\r
+ this.scrollHeight = h + this.contentT + this.contentB;\r
+ if( this.maxContentHeight < h - this.boxSizingOffsetTB ) this.contentHeight = this.maxContentHeight + this.boxSizingOffsetTB;\r
+ if( h - this.boxSizingOffsetTB < this.minContentHeight ) this.contentHeight = this.minContentHeight + this.boxSizingOffsetTB; \r
+ } else {\r
+ this.scrollWidth = w + this.contentL + this.contentR;\r
+ this.scrollHeight = h + this.contentT + this.contentB;\r
+ root.paintReserve( this );\r
+ };\r
+ } else {\r
+ if( dirty !== DEF_ATTRS.REFLOW ){\r
+ this.commitStyle();\r
+ this.scrollWidth = this.textNode.offsetWidth + this.contentL + this.contentR;\r
+ this.scrollHeight = this.textNode.offsetHeight + this.contentT + this.contentB;\r
+ } else {\r
+ root.paintReserve( this );\r
+ this.scrollWidth = w + this.contentL + this.contentR;\r
+ this.scrollHeight = h + this.contentT + this.contentB;\r
+ };\r
+ }; \r
+ } else {\r
+ if( w === AUTO ) this.contentWidth = w = 0 < this.minContentWidth ? this.minContentWidth : 0;\r
+ if( h === AUTO ) this.contentHeight = h = 0 < this.minContentHeight ? this.minContentHeight : 0;\r
+ this.scrollWidth = w + this.contentL + this.contentR;\r
+ this.scrollHeight = h + this.contentT + this.contentB;\r
+ root.paintReserve( this ); \r
+ };\r
+ break; \r
+ case DEF_ATTRS.PAINT : // 再描画のみ必要\r
+ root.paintReserve( this );\r
+ break; \r
+ };\r
+ },\r
+ paint : function( dirty ){\r
+ var content = this._content,\r
+ style = this.__style; \r
+ if( this.updateContent === true || ( style && style.hasPaint === true ) ){\r
+ if( !this.elmWrap ){\r
+ this.elmWrap = DOM.createDiv();\r
+ this.__parent.addDisplayElement( this );\r
+ };\r
+ dirty !== 0 && this.commitStyle(); \r
+ if( this.updateContent === true ){\r
+ if( content !== null ){\r
+ if( !this.textNode ){\r
+ this.textNode = DOM.cerateText();\r
+ this.elmWrap.appendChild( this.textNode );\r
+ };\r
+ this.textNode.data = content; \r
+ } else\r
+ if( this.textNode ){\r
+ DOM.correct( this.textNode );\r
+ delete this.textNode;\r
+ delete this.contentWidth;\r
+ delete this.conetntHeight;\r
+ delete this.scrollWidth; \r
+ delete this.scrollHeight;\r
+ }; \r
+ };\r
+ } else\r
+ if( this.elmWrap && content === null && ( !style || style.hasPaint === false ) ){\r
+ this.__parent.removeDisplayElement( this );\r
+ DOM.correct( this.elmWrap );\r
+ delete this.contentWidth;\r
+ delete this.conetntHeight;\r
+ };\r
+ },\r
+ commitStyle : function(){\r
+ var css;\r
+ if( this.elmWrap ){\r
+ css = this.__style ? this.__style.cssText( this ) : '';\r
+ if( this.contentWidth !== AUTO ) css += 'width:' + this.contentWidth + 'px';\r
+ if( this.contentHeight !== AUTO ) css += 'height:' + this.contentHeight + 'px';\r
+ this.elmWrap.style.cssText = css;\r
+ };\r
+ },\r
+ /*\r
+ * 親の サイズを元に自身のサイズを計算していく\r
+ */\r
+ preMesure : function( allowW, allowH ){\r
+ var style = this.__style,\r
+ styles, calc, box, min, max,\r
+ contentW, contentH, allowSize, boxMinus,\r
+ paddingT, paddingR, paddingB, paddingL,\r
+ borderT, borderR, borderB, borderL,\r
+ marginT, marginR, marginB, marginL;\r
+\r
+ if( style ){\r
+ styles = style.data;\r
+ calc = BasicLayoutManager.calcValue;\r
+ box = styles[ ATTRS.sizing ];\r
+ \r
+ // Width\r
+ // 自身が ltrtWidth の場合 親が AUTO ではない\r
+ // 自身が ltrtWidth でない場合自身が AUTO はなくかつ親 が AUTO の場合自身は % でない\r
+ if( style.ltrtWidth ? allowW !== AUTO : !style.autoWidth && ( allowW !== AUTO || !style.prctWidth ) ){\r
+ if( style.ltrtWidth ){\r
+ contentW = allowW; // - calc( styles[ ATTRS.left ], allowW ) - calc( styles[ ATTRS.right ], allowW );\r
+ } else {\r
+ contentW = BasicLayoutManager.finalValue( styles[ ATTRS.width ], styles[ ATTRS.minWidth ], styles[ ATTRS.maxWidth ], allowW ); \r
+ };\r
+ paddingR = calc( styles[ ATTRS.padding + 1 ], allowW );\r
+ paddingL = calc( styles[ ATTRS.padding + 3 ], allowW );\r
+ borderR = styles[ ATTRS.border + 1 ];\r
+ borderL = styles[ ATTRS.margin + 3 ];\r
+ marginR = calc( styles[ ATTRS.margin + 1 ], allowW );\r
+ marginL = calc( styles[ ATTRS.margin + 3 ], allowW );\r
+ this.boxWidth = contentW;\r
+ boxMinus = 0;\r
+ switch( box ){\r
+ case 3 : // margin-box\r
+ boxMinus = - marginR - marginL;\r
+ case 2 : // border-box\r
+ boxMinus -= borderR + borderL;\r
+ case 1 : // padding-box\r
+ boxMinus -= paddingR + paddingL;\r
+ // case 0 : // content-box\r
+ };\r
+ this.contentL = marginL + borderL + paddingL;\r
+ this.contentR = marginR + borderR + paddingR; \r
+ this.contentWidth = contentW + boxMinus;\r
+ this.boxSizingOffsetLR = boxMinus;\r
+ } else {\r
+ this.boxWidth = this.contentWidth = AUTO;\r
+ min = styles[ ATTRS.minWidth ];\r
+ max = styles[ ATTRS.maxWidth ];\r
+ this.minContentWidth = 1 <= min ? min : 0;\r
+ this.maxContentWidth = 1 <= max ? max : AUTO;\r
+ delete this.boxSizingOffsetLR;\r
+ };\r
+ \r
+ // Height\r
+ if( style.tpbtHeight ? allowH !== AUTO : !style.autoHeight && ( allowH !== AUTO || !style.prctHeight ) ){ \r
+ if( style.tpbtHeight ){\r
+ contentH = allowH; // - calc( styles[ ATTRS.top ], allowH ) - calc( styles[ ATTRS.bottom ], allowH );\r
+ } else {\r
+ contentH = BasicLayoutManager.finalValue( styles[ ATTRS.height ], styles[ ATTRS.minHeight ], styles[ ATTRS.maxHeight ], allowH );\r
+ };\r
+ allowSize = styles[ ATTRS.pageBox ] === true ? allowH : allowW;\r
+ paddingT = calc( styles[ ATTRS.padding + 0 ], allowSize );// paddingTRBL の % 指定は 最大幅に対して TB でも幅に対して\r
+ paddingB = calc( styles[ ATTRS.padding + 2 ], allowSize );\r
+ borderT = styles[ ATTRS.border + 0 ];\r
+ borderB = styles[ ATTRS.border + 2 ];\r
+ marginT = calc( styles[ ATTRS.margin + 0 ], allowSize );// marginTRBL の % 指定は 最大幅に対して TB でも幅に対して\r
+ marginB = calc( styles[ ATTRS.margin + 2 ], allowSize );\r
+ this.boxHeight = contentH;\r
+ boxMinus = 0;\r
+ switch( box ){\r
+ case 3 : // margin-box\r
+ boxMinus = - marginT - marginR;\r
+ case 2 : // border-box\r
+ boxMinus -= borderT + borderR;\r
+ case 1 : // padding-box\r
+ boxMinus -= paddingT + paddingR;\r
+ // case 0 : // content-box\r
+ }; \r
+ this.contentT = marginT + borderT + paddingT;\r
+ this.conetntB = marginB + borderB + paddingB; \r
+ this.contentHeight = contentH + boxMinus;\r
+ this.boxSizingOffsetTB = boxMinus;\r
+ } else {\r
+ this.boxHeight = this.contentHeight = AUTO;\r
+ min = styles[ ATTRS.minHeight ];\r
+ max = styles[ ATTRS.maxHeight ];\r
+ this.minContentHeight = 1 <= min ? min : 0;\r
+ this.maxContentHeight = 1 <= max ? max : AUTO;\r
+ delete this.boxSizingOffsetTB;\r
+ };\r
+ } else {\r
+ this.boxWidth = this.contentWidth = allowW;\r
+ this.boxHeight = this.contentHeight = allowH;\r
+ delete this.minContentHeight;\r
+ delete this.maxContentHeight;\r
+ delete this.contentL;\r
+ delete this.contentT;\r
+ delete this.contentR;\r
+ delete this.contentB;\r
+ };\r
+ },\r
+ /**\r
+ * 自身のコンテンツサイズを元に AUTO な width, height を確定していく\r
+ */\r
+ postMesure : function(){\r
+ var style = this.__style,\r
+ styles, calc, box,\r
+ contentW, contentH, w, h\r
+ contentSize, contentPlus;\r
+ if( style ){\r
+ styles = style.data;\r
+ calc = BasicLayoutManager.advancedCalcValue;\r
+ contentW = this.contentWidth;\r
+ box = styles[ ATTRS.sizing ];\r
+ \r
+ // Width\r
+ if( this.boxWidth === AUTO ){\r
+ paddingR = calc( styles[ ATTRS.padding + 1 ], contentW ); \r
+ paddingL = calc( styles[ ATTRS.padding + 3 ], contentW ); \r
+ borderR = styles[ ATTRS.border + 1 ]; \r
+ borderL = styles[ ATTRS.border + 3 ]; \r
+ marginR = calc( styles[ ATTRS.margin + 1 ], contentW );\r
+ marginL = calc( styles[ ATTRS.margin + 3 ], contentW );\r
+ contentPlus = 0;\r
+ switch( box ){\r
+ case 3 : // margin-box\r
+ contentPlus = ( marginR + marginL );\r
+ case 2 : // border-box\r
+ contentPlus += ( borderR + borderL );\r
+ case 1 : // padding-box\r
+ contentPlus += ( paddingR + paddingL );\r
+ // case 0 : // content-box\r
+ };\r
+ this.contentWidth = contentW;\r
+ contentW += contentPlus;\r
+ if( !style.ltrtWidth ){\r
+ min = styles[ ATTRS.minWidth ];\r
+ max = styles[ ATTRS.maxWidth ];\r
+ if( contentW < min && 1 <= min && contentPlus < min ){\r
+ this.contentWidth = min - contentPlus;\r
+ } else\r
+ if( max < contentW && 1 <= max && contentPlus < max ){\r
+ this.contentWidth = max - contentPlus;\r
+ };\r
+ };\r
+ this.contentL = marginL + borderL + paddingL;\r
+ this.contentR = marginR + borderR + paddingR;\r
+ this.boxWidth = this.contentWidth + this.contentL + this.contentR;\r
+ };\r
+ // Height\r
+ if( this.boxHeight === AUTO ){\r
+ contentH = this.contentHeight;\r
+ contentSize = styles[ ATTRS.pageBox ] === true ? contentH : contentW;\r
+ paddingT = calc( styles[ ATTRS.padding + 0 ], contentSize );// paddingTRBL の % 指定は 最大幅に対して TB でも幅に対して\r
+ paddingB = calc( styles[ ATTRS.padding + 2 ], contentSize );\r
+ borderT = styles[ ATTRS.border + 0 ];\r
+ borderB = styles[ ATTRS.border + 2 ];\r
+ marginT = calc( styles[ ATTRS.margin + 0 ], contentSize );// marginTRBL の % 指定は 最大幅に対して TB でも幅に対して\r
+ marginB = calc( styles[ ATTRS.margin + 2 ], contentSize );\r
+ contentPlus = 0;\r
+ switch( box ){\r
+ case 3 : // margin-box\r
+ contentPlus = ( marginT + marginB );\r
+ case 2 : // border-box\r
+ contentPlus += ( borderT + borderB );\r
+ case 1 : // padding-box\r
+ contentPlus += ( paddingT + paddingB );\r
+ // case 0 : // content-box\r
+ };\r
+ this.contentHeight = contentH;\r
+ contentH += contentPlus;\r
+ if( !style.tpbtHeight ){\r
+ min = styles[ ATTRS.minHeight ];\r
+ max = styles[ ATTRS.maxHeight ];\r
+ if( contentH < min && 1 <= min && contentPlus < min ){\r
+ this.contentHeight = min - contentPlus;\r
+ } else\r
+ if( max < contentH && 1 <= max && contentPlus < max ){\r
+ this.contentHeight = max - contentPlus;\r
+ };\r
+ };\r
+ this.contentT = marginT + borderT + paddingT;\r
+ this.contentB = marginB + borderB + paddingB; \r
+ this.boxHeight = this.contentHeight + this.contentT + this.contentB;\r
+ }; \r
+ } else {\r
+ this.boxWidth = this.contentWidth;\r
+ this.boxHeight = this.contentHeight;\r
+ delete this.minContentHeight;\r
+ delete this.maxContentHeight;\r
+ delete this.contentL;\r
+ delete this.contentT;\r
+ delete this.contentR;\r
+ delete this.contentB;\r
+ };\r
+ },\r
+ addDisplayElement : function( nodeData ){\r
+ // 描画更新リストに追加\r
+ },\r
+ removeDisplayElement : function( nodeData ){\r
+ // 描画更新リストに追加\r
+ DOM.correct( nodeData.elmWrap );\r
+ delete nodeData.elmWrap;\r
+ delete nodeData.textNode;\r
+ delete nodeData.contentWidth;\r
+ delete nodeData.conetntHeight;\r
+ delete nodeData.currentWidth;\r
+ delete nodeData.currentHeight; \r
+ }\r
+ }\r
+ );\r
+ var Node = Class.create(\r
+ 'Node',\r
+ Class.POOL_OBJECT,\r
+ NodePrivate,\r
+ {\r
+ Constructor : function( root, parent ){\r
+ Node.newPrivateData( this, LayoutBox.getPrivateData( root ), parent ? LayoutBox.getPrivateData( parent ) : undefined, this );\r
+ },\r
+ content : function( v ){\r
+ return Node.getPrivateData( this ).content( v );\r
+ },\r
+ style : function( v ){\r
+ return Node.getPrivateData( this ).paint( v );\r
+ },\r
+ remove : function(){\r
+ Node.getPrivateData( this ).remove();\r
+ },\r
+ nodeIndex : function( v ){\r
+ return Node.getPrivateData( this ).nodeIndex( v );\r
+ },\r
+ displayIndex : function(){\r
+ \r
+ },\r
+ disabled : function( v ){\r
+ return Node.getPrivateData( this ).disabled( v );\r
+ },\r
+ cursor : function( v ){\r
+ return Node.getPrivateData( this ).cursor( v );\r
+ },\r
+ getX : function(){\r
+ \r
+ },\r
+ getY : function(){\r
+ \r
+ },\r
+ getWidth : function(){\r
+ \r
+ },\r
+ getHeight : function(){\r
+ \r
+ },\r
+ getAbsolutePositionX : function(){\r
+ return Node.getPrivateData( this ).getAbsolutePositionX();\r
+ },\r
+ getAbsolutePositionY : function(){\r
+ return Node.getPrivateData( this ).getAbsolutePositionY();\r
+ },\r
+ scrollTo : function( x, y ){\r
+ Node.getPrivateData( this ).scrollTo( x, y );\r
+ },\r
+ scrollX : function( v ){\r
+ return Node.getPrivateData( this ).scrollX( v );\r
+ },\r
+ scrollY : function( v ){\r
+ return Node.getPrivateData( this ).scrollY( v );\r
+ },\r
+ addEventListener : function( type, handler, opt_thisObject ){\r
+ Node.getPrivateData( this ).addEventListener( type, handler, opt_thisObject );\r
+ },\r
+ removeEventListener : function( type, handler ){\r
+ Node.getPrivateData( this ).removeEventListener( type, handler );\r
+ }\r
+ }\r
+ );\r
+ \r
+ var LayoutBoxPrivate = NodePrivate.inherits(\r
+ 'LayoutBoxPrivate',\r
+ Class.POOL_OBJECT | Class.SUPER_ACCESS,\r
+ {\r
+ Constructor : function( layoutManager, _root, _parent ){\r
+ this.layoutManager = layoutManager;\r
+ this._root = _root;\r
+ this.paintList = [];\r
+ if( _parent ) this._parent = _parent;\r
+ },\r
+ mesure : function(){\r
+ this.layoutManager.reflow( this );\r
+ },\r
+ paintReserve : function( nodeData ){\r
+ var list = this.paintList;\r
+ if( Util.getIndex( list, nodeData ) === -1 ) list[ list.length - 1 ] = nodeData;\r
+ },\r
+ paintRelease : function( nodeData ){\r
+ var list = this.paintList,\r
+ i = Util.getIndex( list, nodeData );\r
+ i === -1 && list.splice( i, 1 );\r
+ },\r
+ paint : function(){\r
+ var list = this.paintList, i = list.length;\r
+ for( ; i; ){\r
+ list[ --i ].paint();\r
+ };\r
+ }\r
+ }\r
+ );\r
+ \r
+ var LayoutBox = Node.inherits(\r
+ 'LayoutBox',\r
+ Class.POOL_OBJECT,\r
+ LayoutBoxPrivate,\r
+ {\r
+ Constructor : function( layoutManager, root, parent ){\r
+ LayoutBox.newPrivateData( this, layoutManager, LayoutBox.getPrivateData( root ), parent ? LayoutBox.getPrivateData( parent ) : undefined );\r
+ },\r
+ layoutManager : function( v ){\r
+ \r
+ },\r
+ createLayoutBox : function(){\r
+ \r
+ },\r
+ createContentBox : function(){\r
+ \r
+ }\r
+ }\r
+ );\r
+ \r
+ var RootNode = Node.inherits(\r
+ 'RootNode',\r
+ Class.POOL_OBJECT,\r
+ LayoutBoxPrivate,\r
+ {\r
+ Constructor : function(){\r
+ RootNode.newPrivateData( this, BasicLayoutManager );\r
+ }\r
+ }\r
+ );\r
+ \r
+})( window, document );
\ No newline at end of file
OSDN Git Service
