3 var DOM = ( function( window, document ){
\r
10 function correctNodes( node ){
\r
12 if( node && node.parentNode ){
\r
13 while( node.lastChild ) correctNodes( node.lastChild );
\r
14 node.parentNode.removeChild( node );
\r
15 if( node.nodeType === 1 ){
\r
16 switch( node.tagName ){
\r
18 DIV_LIST.push( node );
\r
21 SPAN_LIST.push( node );
\r
25 node.removeAttribute( 'className' );
\r
26 node.removeAttribute( 'style' );
\r
27 node.removeAttribute( 'id' );
\r
29 if( node.nodeType === 3 ){
\r
31 TEXT_LIST.push( node );
\r
37 createDiv : function(){
\r
38 return 0 < DIV_LIST.length ? DIV_LIST.shift() : document.createElement( 'div' );
\r
40 createSpan : function(){
\r
43 createText : function(){
\r
46 getTextSize : function( elm, content ){
\r
47 var span = DOM.createSpan(),
\r
48 text = DOM.createText(),
\r
50 elm.appendChild( span );
\r
51 span.style.cssText = 'visibility:hidden;position:absolute;';
\r
52 span.appendChild( text );
\r
53 text.data = content;
\r
54 w = span.offsetWidth;
\r
55 h = span.offsetHeight;
\r
56 DOM.correctNodes( span );
\r
59 getTextHeight : function( elm, w, content ){
\r
60 var div = DOM.createSpan(),
\r
61 text = DOM.createText(),
\r
63 elm.appendChild( div );
\r
64 div.style.cssText = 'visibility:hidden;position:absolute;width:' + w + 'px;';
\r
65 div.appendChild( text );
\r
66 text.data = content;
\r
67 w = div.offsetWidth;
\r
68 h = div.offsetHeight;
\r
69 DOM.correctNodes( div );
\r
72 correctNodes : function( node ){
\r
74 if( node && node.parentNode ){
\r
75 while( node.lastChild ) DOM.correctNodes( node.lastChild );
\r
76 node.parentNode.removeChild( node );
\r
77 if( node.nodeType === 1 ){
\r
78 switch( node.tagName ){
\r
80 DIV_LIST.push( node );
\r
83 SPAN_LIST.push( node );
\r
87 node.removeAttribute( 'className' );
\r
88 node.removeAttribute( 'style' );
\r
89 node.removeAttribute( 'id' );
\r
91 if( node.nodeType === 3 ){
\r
93 TEXT_LIST.push( node );
\r
98 })( window, document );
\r
100 var XBrowserStyle = ( function(){
\r
105 UNITS = 'px,cm,mm,in,pt,pc,em,%'.split( ',' ),
\r
106 CLIP_SEPARATOR = UA.isIE === true && UA.ieVersion < 8 ? ' ' : ',';
\r
108 var SPECIAL = ( function(){
\r
110 if( UA.isIE === true && UA.ieVersion < 9 ){
\r
111 if( UA.ACTIVEX === true ){
\r
112 // special.opacity = 'ActiveXOpacity';
\r
113 special.setFilters = function( style ){
\r
114 var filters = ( style.filter || '' ).split( ') ' ),
\r
116 i = filters.length,
\r
117 filter, names, props, prop, j, l, key, v;
\r
119 filter = filters[ --i ].split( ' ' ).join( '' ).split( '(' );
\r
120 if( filter.length !== 2 ) continue;
\r
121 names = filter[ 0 ].split( '.' ); // progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=120,strength=9)
\r
122 props = filter[ 1 ].split( ',' ); //
\r
124 for( j = 0, l = props.length; j < l; ++j ){
\r
125 prop = props[ j ].split( '=' );
\r
126 key = prop[ 0 ].toLowerCase();
\r
128 filter[ key ] = v; //v.charAt( 0 ) === '#' ? v : parseInt( v );
\r
130 data[ names[ names.length - 1 ] ] = filter;
\r
133 style.filter = data;
\r
134 style.opacity = data.alpha && data.alpha.opacity ? data.alpha.opacity / 100 : 1;
\r
136 special.hasLayout = function( elm ){
\r
137 return elm.currentStyle.hasLayout;
\r
140 special.opacity = null;
\r
143 var style = document.documentElement.style;
\r
144 special.opacity = style.opacity !== undefined ? 'opacity' :
\r
145 style.MozOpacity !== undefined ? 'MozOpacity' :
\r
146 style.KhtmlOpacity !== undefined ? 'KhtmlOpacity' :
\r
147 style[ '-khtml-opacity' ] !== undefined ? 'KhtmlOpacity' : null;
\r
149 // if( style.backgroundPositionX === undefined ){
\r
150 special.setBackgroundPositionXY = function( style ){
\r
151 var bgp = ( style.backgroundPosition || '' ).split( ' ' );
\r
152 style.backgroundPositionX = bgp[ 0 ] || 0;
\r
153 style.backgroundPositionY = bgp[ 1 ] || 0;
\r
156 if( style.clipTop === undefined && style[ 'clip-top' ] === undefined ){
\r
157 special.setClipTopRightBottomLeft = function( style ){
\r
158 var clip = style.clip;
\r
159 if( !cliop || clip.indexOf( 'rect(' ) === -1 ){
\r
161 style.clipRight = 0;
\r
162 style.clipBottom = 0;
\r
163 style.clipLeft = 0;
\r
166 clip = clip.split( '(' )[ 1 ].split( ')' )[ 0 ].split( clip.indexOf( ',' ) !== -1 ? ',' : ' ' );
\r
167 ret.clipTop = clip[ 0 ];
\r
168 ret.clipRight = clip[ 1 ];
\r
169 ret.clipBottom = clip[ 2 ];
\r
170 ret.clipLeft = clip[ 3 ];
\r
177 function cssToObject( css ){
\r
178 var ret = {}, i, nv, n, v,
\r
179 parse = Util.parse,
\r
180 isNumber = Type.isNumber,
\r
181 camelize = Util.camelize;
\r
182 if( Type.isString( css ) === true ){
\r
183 css = css.split( SEMICORON );
\r
184 for( i = css.length; i; ){
\r
185 nv = css[ --i ].split( CORON ); // filter の場合, progid: がくる
\r
187 if( isNumber( parse( n ) ) === true ) continue;
\r
188 v = nv.join( EMPTY );
\r
189 while( v.charAt( 0 ) === ' ' ) v = v.substr( 1 );
\r
190 ret[ camelize( n ) ] = parse( v );
\r
194 if( Type.isNumber( parse( n ) ) === false ) ret[ n ] = parse( css[ n ] );
\r
198 if( SPECIAL.setFilters ){
\r
199 SPECIAL.setFilters( ret );
\r
201 ret.opacity = SPECIAL.opacity !== null ? ret[ SPECIAL.opacity ] : 1;
\r
204 SPECIAL.setBackgroundPositionXY && SPECIAL.setBackgroundPositionXY( ret );
\r
205 SPECIAL.setClipTopRightBottomLeft && SPECIAL.setClipTopRightBottomLeft( ret );
\r
210 var COLOR = ( function(){
\r
211 var ret = {}, v, name,
\r
217 'FFFF00', 'YELLOW',
\r
220 'FF00FF', 'MAGENTA',
\r
221 'FF00FF', 'FUCHSIA',
\r
224 '800080', 'PURPLE',
\r
225 '800000', 'MAROON',
\r
230 'C0C0C0', 'SILVER',
\r
231 '696969', 'DIMGRAY',
\r
232 '708090', 'SLATEGRAY',
\r
233 'A9A9A9', 'DARKGRAY',
\r
234 'DCDCDC', 'GAINSBORO',
\r
235 '191970', 'MIDNIGHTBLUE',
\r
236 '6A5ACD', 'SLATEBLUE',
\r
237 '0000CD', 'MEDIUMBLUE',
\r
238 '4169E1', 'ROYALBLUE',
\r
239 '1E90FF', 'DODGERBLUE',
\r
240 '87CEEB', 'SKYBLUE',
\r
241 '4682B4', 'STEELBLUE',
\r
242 'ADD8E6', 'LIGHTBLUE',
\r
243 'AFEEEE', 'PALETURQUOISE',
\r
244 '40E0D0', 'TURQUOISE',
\r
245 'E0FFFF', 'LIGHTCYAN',
\r
246 '7FFFD4', 'AQUAMARINE',
\r
247 '006400', 'DARKGREEN',
\r
248 '2E8B57', 'SEAGREEN',
\r
249 '90EE90', 'LIGHTGREEN',
\r
250 '7FFF00', 'CHARTREUSE',
\r
251 'ADFF2F', 'GREENYELLOW',
\r
252 '32CD32', 'LIMEGREEN',
\r
253 '9ACD32', 'YELLOWGREEN',
\r
254 '6B8E23', 'OLIVEDRAB',
\r
255 'BCB76B', 'DARKKHAKI',
\r
256 'EEE8AA', 'PALEGOLDENROD',
\r
257 'FFFFE0', 'LIGHTYELLOW',
\r
259 'DAA520', 'GOLDENROD',
\r
260 'B8860B', 'DARKGOLDENROD',
\r
261 'BC8F8F', 'ROSYBROWN',
\r
262 'CD5C5C', 'INDIANRED',
\r
263 '8B4513', 'SADDLEBROWN',
\r
264 'A0522D', 'SIENNA',
\r
266 'DEB887', 'BURLYWOOD',
\r
269 'F4A460', 'SANDYBROWN',
\r
271 'D2691E', 'CHOCOLATE',
\r
272 'B22222', 'FIREBRICK',
\r
274 'FA8072', 'SALMON',
\r
275 'FFA500', 'ORANGE',
\r
277 'FF6347', 'TOMATO',
\r
278 'FF69B4', 'HOTPINK',
\r
280 'FF1493', 'DEEPPINK',
\r
281 'DB7093', 'PALEVIOLETRED',
\r
282 'EE82EE', 'VIOLET',
\r
284 'DA70D6', 'ORCHILD',
\r
285 '9400D3', 'DARKVIOLET',
\r
286 '8A2BE2', 'BLUEVIOLET',
\r
287 '9370DB', 'MEDIUMPURPLE',
\r
288 'D8BFD8', 'THISTLE',
\r
289 'E6E6FA', 'LAVENDER',
\r
290 'FFE4E1', 'MISTYROSE',
\r
292 'FFFACD', 'LEMONCHIFFON'
\r
294 for( i = list.length; i; ){
\r
296 name = list[ --i ];
\r
297 ret[ name ] = parseInt( v, 16 );
\r
302 var PARAMS = ( function(){
\r
304 register( ret.percent = {},
\r
305 'marginBottom,marginLeft,marginRight,marginTop,paddingBottom,paddingLeft,paddingRight,paddingTop,fontSize,textIndent'
\r
307 register( ret.offset = {},
\r
308 'height,width,bottom,left,right,top'
\r
310 register( ret.size = {},
\r
311 'borderBottomWidth,borderLeftWidth,borderRightWidth,borderTopWidth,letterSpacing'
\r
313 register( ret.color = {},
\r
314 'backgroundColor,borderBottomColor,borderLeftColor,borderRightColor,borderTopColor,color'
\r
316 register( ret.region = {},
\r
317 'margin,padding,borderWidth,borderColor'
\r
319 register( ret.special = {},
\r
320 'clip,backgroundPosition,opacity,lineHeight,zIndex'
\r
322 register( ret.unit = {}, 'px,cm,mm,in,pt,pc,em,%' );
\r
324 register( ret.margin = {}, 'marginBottom,marginLeft,marginRight,marginTop,paddingBottom' );
\r
325 register( ret.padding = {}, 'paddingBottom,paddingLeft,paddingRight,paddingTop' );
\r
326 register( ret.borderWidth = {}, 'borderBottomWidth,borderLeftWidth,borderRightWidth,borderTopWidth' );
\r
327 register( ret.borderColor = {}, 'borderBottomColor,borderLeftColor,borderRightColor,borderTopColor' );
\r
329 function register( obj, params ){
\r
330 params = params.split( ',' );
\r
331 for( var i=params.length; i; ) obj[ params[ --i ] ] = true;
\r
339 var Property = Class.create(
\r
343 Constructor : function( name, value, unit, pxPerEm ){
\r
345 this.value = value;
\r
347 this.pxPerEm = pxPerEm; // XXpx = 1em;
\r
351 pxPerEm : 12, // 1em === ??px
\r
353 equal : function( prop ){
\r
354 if( this.unit === prop.unit ){
\r
355 return this.value === prop.value;
\r
357 return Math.abs( this.toPx() - prop.toPx() ) < 1;
\r
359 convert: function( prop ){
\r
360 var u = prop.unit, v;
\r
361 if( this.unit === u ) return;
\r
362 this.value = v = this.toPx();
\r
365 this.value = u === 'em' ? v / this.pxPerEm : Util.pxTo( v, u );
\r
368 setValue: function( v ){
\r
371 getValue: function(){
\r
374 getOffset: function( prop ){
\r
375 return prop.value - this.value;
\r
377 getUnit: function(){
\r
380 getValueText: function(){
\r
381 return this.value === 0 ? '0' : this.value + this.unit;
\r
384 var v = this.value, u = this.unit;
\r
385 if( u === px ) return v;
\r
386 if( u === 'em' ) return v * this.pxPerEm;
\r
387 if( u === '' && this.name === 'lineHeight' ) return v * this.pxPerEm;
\r
388 return Util.toPx( v, u );
\r
390 isValid: function( t ){
\r
395 z = u !== '' ? true : v === 0;
\r
396 if( PARAMS.percent[ n ] === true ) return z;
\r
397 if( PARAMS.offset[ n ] === true ) return z;
\r
398 if( PARAMS.size[ n ] === true ) return z && u !== '%';
\r
399 if( PARAMS.special[ n ] === true ){
\r
400 if( n === 'lineHeight' ) return true;
\r
401 if( n === 'opacity' ) return 0 <= v && v <= 1 && u === '';
\r
402 if( n === 'zIndex' ) return u === '';
\r
410 * backgroundPosition, clip
\r
412 var PropertyGroup = Class.create(
\r
416 Constructor : function( name ){
\r
419 for( var i = 1, l = arguments.length; i<l; ++i ){
\r
420 this.props.push( arguments[ i ] );
\r
424 equal : function( prop ){
\r
425 var ps = this.props, i = ps.length;
\r
428 if( ps[ i ].equal( prop[ i ] ) === false ) return false;
\r
432 convert : function( prop ){
\r
433 var ps = this.props, i = ps.length;
\r
436 ps[ i ].convert( prop[ i ] );
\r
439 setValue : function( ary ){
\r
440 var ps = this.props, i = 0, l = ps.length;
\r
442 ps[ i ].setValue( ary[ i ] );
\r
445 getValue : function(){
\r
446 var ret = [], ps = this.props, i = 0, l = ps.length;
\r
448 ret.push( ps[ i ].getValue() );
\r
452 getOffset : function( prop ){
\r
459 ret.push( ps[ i ].getOffset( _ps[ i ] ) );
\r
463 getUnit : function(){
\r
464 var ret = [], ps = this.props, i = 0, l = ps.length;
\r
466 ret.push( ps[ i ].getUnit() );
\r
470 getValueText : function(){
\r
471 var ret = [], ps = this.props, i = 0, l = ps.length;
\r
473 ret.push( ps[ i ].getValueText() );
\r
475 if( this.name === 'clip' ){
\r
476 return 'rect(' + ret.join( CLIP_SEPARATOR ) + ')';
\r
478 return ret.join( ' ' );
\r
480 onKill : function(){
\r
481 var ps = this.props, i = ps.length;
\r
486 isValid : function( t ){
\r
488 var ps = t.props, i = ps.length;
\r
490 if( ps[ --i ].isValid() === false ) return false;
\r
498 * margin, padding, borderWidth, borderColor
\r
500 var FrexibleProperty = PropertyGroup.inherits(
\r
501 'FrexibleProperty',
\r
502 Class.POOL_OBJECT, {
\r
503 Constructor : function( name ){
\r
506 for( var i = 1, l = arguments.length; i<l; ++i ){
\r
507 this.props.push( arguments[ i ] );
\r
509 // top, bottom, left, right, topbottom, leftright, all
\r
514 var ColorProperty = Class.create(
\r
516 Class.POOL_OBJECT, {
\r
517 Constructor : function( name, r, g, b, pct ){
\r
525 equal : function( prop ){
\r
526 if( this.pct === prop.pct ){
\r
527 return this.r === prop.r && this.g === prop.g && this.b === prop.b;
\r
529 var rgb = this._toPct(),
\r
530 _rgb = prop._toPct(),
\r
534 if( Math.abs( rgb[ i ] - _rgb[ i ] ) > 1 ) return false;
\r
538 convert : function( prop ){
\r
539 var u = prop.pct, x;
\r
540 if( this.pct === u ) return;
\r
541 x = u === true ? 100 / 255 : 2.55;
\r
547 setValue : function( rgb ){
\r
552 getValue : function(){
\r
553 return [ this.r, this.g, this.b ];
\r
555 getOffset : function( prop ){
\r
556 return [ prop.r - this.r, prop.g - this.g, prop.b - this.b ];
\r
558 getUnit : function(){
\r
559 return this.pct === true ? '%' : '';
\r
561 getValueText : function(){
\r
562 if( this.pct === true ){
\r
563 return [ 'rgb(', this.r, '%,', this.g, '%,', this.b, '%)' ].join( '' );
\r
565 var round = Math.round;
\r
566 //return [ 'rgb(', round( this.r ), ',', round( this.g ), ',', round( this.b ), ')' ].join( '' );
\r
568 var rgb = '00000' + ( ( round( this.r ) << 16 ) + ( round( this.g ) << 8 ) + round( this.b ) ).toString( 16 );
\r
569 return '#' + rgb.substr( rgb.length - 6 );
\r
571 _toPct : function(){
\r
572 if( this.pct === true ) return [ this.r, this.g, this.b ];
\r
573 return [ this.r / 2.55, this.g / 2.55, this.b / 2.55 ];
\r
575 isValid : function( t ){
\r
576 var isFinite = window.isFinite;
\r
577 if( !isFinite( this.r ) || !isFinite( this.g ) || !isFinite( this.b ) ) return false;
\r
578 if( 0 > this.r || 0 > this.g || 0 > this.b ) return false;
\r
579 if( this.pct === true ) return this.r <= 100 && this.g <= 100 && this.b <= 100;
\r
580 return this.r <= 255 && this.g <= 255 && this.b <= 255;
\r
585 var isString = Type.isString,
\r
586 isNumber = Type.isNumber;
\r
587 var REG_UINIT = /.*\d(\w{1,2})?/,
\r
590 REG_XXXXXX = /^#[\da-fA-F]{6}?/,
\r
591 REG_XXX = /^#[\da-fA-F]{3}?/;
\r
593 var WrappedStyle = Class.create(
\r
597 Constructor : function( style ){
\r
598 this.style = style;
\r
599 var fontsize = this.get( 'fontSize' );
\r
600 this.pxPerEm = fontsize.toPx();
\r
603 get: function( p ){
\r
604 if( PARAMS.special[ p ] === true || PARAMS.region[ p ] === true ){
\r
605 if( p === 'clip' ) return this.getClip();
\r
606 if( p === 'margin' ) return this.getMarginPaddingBorder( p, '' );
\r
607 if( p === 'padding' ) return this.getMarginPaddingBorder( p, '' );
\r
608 if( p === 'borderWidth' ) return this.getMarginPaddingBorder( 'border', 'Width' );
\r
609 if( p === 'borderColor' ) return this.getBorderColor( 'borderColor' );
\r
610 if( p === 'backgroundPosition' ) return this.getBackgroundPosition( p );
\r
611 // opacity, zindex, lineHeight
\r
612 return new Property( p, this.getValue( x ), this.getUnit( x ), this.pxPerEm );
\r
614 var x = this.style[ p ], e, v, u;
\r
615 if( PARAMS.offset[ p ] === true ){
\r
616 return new Property( p, this.getValue( x ), this.getUnit( x, p ), this.pxPerEm );
\r
619 if( p === 'width' ) v = e.offsetWidth;
\r
620 if( p === 'height' ) v = e.offsetHeight;
\r
621 if( p === 'top' ) v = e.offsetTop;
\r
622 if( p === 'bottom' ) v = e.offsetBottom;
\r
623 if( p === 'left' ) v = e.offsetLeft;
\r
624 if( p === 'right' ) v = e.offsetRight;
\r
625 u = this.getUnit( x, p );
\r
626 // alert( p + this.pxTo( v, u ) + u )
\r
627 return new Property( p, this.pxTo( v, u ), u, this.pxPerEm ); */
\r
629 if( p === 'fontSize' ){ // xx-small 等
\r
630 v = Util.absoluteFontSizeToPx( x );
\r
632 return new Property( p, v, px, this.pxPerEm );
\r
635 if( PARAMS.percent[ p ] === true ){
\r
636 // alert( p + ' , ' + x + ' , ' + this.getUnit( x, p ) )
\r
637 return new Property( p, this.getValue( x ), this.getUnit( x, p ), this.pxPerEm );
\r
639 if( PARAMS.size[ p ] === true ){
\r
640 return new Property( p, this.getValue( x ), this.getUnit( x, p ), this.pxPerEm );
\r
642 if( PARAMS.color[ p ] === true ){
\r
643 return this.getColor( x, p );
\r
646 pxTo: function( px, unit ){
\r
647 if( unit === 'em' ) return px / this.pxPerEm;
\r
648 return Util.pxTo( px, unit );
\r
650 getValue: function( x ){
\r
651 return isString( x ) === true ? parseInt( x ) :
\r
652 isNumber( x ) === true ? x : 0;
\r
654 getUnit: function( x, p ){
\r
656 if( isString( x ) === true ){
\r
657 u = x.replace( REG_UINIT, $1 );
\r
658 if( p === 'lineHeight' ) return u;
\r
659 if( PARAMS.unit[ u ] !== true ) return px;
\r
664 getColor: function( x, p ){
\r
665 var rgb = COLOR[ x.toUpperCase() ],
\r
670 if( isNumber( rgb ) === true ){
\r
671 r = ( rgb & 0xff0000 ) >> 16;
\r
672 g = ( rgb & 0xff00 ) >> 8;
\r
673 b = ( rgb & 0xff );
\r
675 if( x.match( REG_XXXXXX ) ){
\r
676 r = parseInt( x.charAt( 1 ) + x.charAt( 2 ), 16 );
\r
677 g = parseInt( x.charAt( 3 ) + x.charAt( 4 ), 16 );
\r
678 b = parseInt( x.charAt( 5 ) + x.charAt( 6 ), 16 );
\r
679 //alert( x + ' g: ' + g )
\r
681 if( x.match( REG_XXX ) ){
\r
682 r = parseInt( x.charAt( 1 ) + x.charAt( 1 ), 16 );
\r
683 g = parseInt( x.charAt( 2 ) + x.charAt( 2 ), 16 );
\r
684 b = parseInt( x.charAt( 3 ) + x.charAt( 3 ), 16 );
\r
686 if( x.indexOf( 'rgb(' ) === 0 ){
\r
687 rgb = x.substr( 4 ).split( ',' );
\r
688 r = parseFloat( rgb[ 0 ] );
\r
689 g = parseFloat( rgb[ 1 ] );
\r
690 b = parseFloat( rgb[ 2 ] );
\r
691 if( x.indexOf( '%' ) !== -1 ) pct = true;
\r
697 return new ColorProperty( p, r, g, b, pct );
\r
699 getClip: function( name ){
\r
700 // rect(...) クリップします。<top>, <bottom> は上端からの、 <right>, <left> は左端からのオフセットで指定します。Internet Explorer 4~7 では、カンマの代わりにスペースで区切る必要があります。
\r
701 // position:absolute または position:fixed を適用した要素に対してのみ有効です。
\r
702 var top = this.get( name + 'Top' ),
\r
703 right = this.get( name + 'Right' ),
\r
704 bottom = this.get( name + 'Bottom' ),
\r
705 left = this.get( name + 'Left' ),
\r
706 ret = new PropertyGroup( name, top, right, bottom, left),
\r
708 if( ret.isValid() === true ) return ret;
\r
710 all = this.style[ name ].split( '(' )[ 1 ].split( ')' )[ 0 ].split( CLIP_SEPARATOR );
\r
711 return new PropertyGroup( name,
\r
712 new Property( name + 'Top', all[ 0 ], px, this.pxPerEm ),
\r
713 new Property( name + 'Right', all[ 1 ], px, this.pxPerEm ),
\r
714 new Property( name + 'Bottom', all[ 2 ], px, this.pxPerEm ),
\r
715 new Property( name + 'Left', all[ 3 ], px, this.pxPerEm )
\r
718 getBackgroundPosition: function( name ){
\r
719 var x = this.get( name + 'X' ),
\r
720 y = this.get( name + 'Y' ),
\r
721 ret = new PropertyGroup( name, x, y ),
\r
723 if( ret.isValid() === true ) return ret;
\r
725 xy = this.style[ name ].split( ' ' );
\r
726 return new PropertyGroup( name,
\r
727 new Property( name + 'X', this.getValue( xy[ 0 ] ), this.getUnit( xy[ 0 ] ), this.pxPerEm ),
\r
728 new Property( name + 'Y', this.getValue( xy[ 1 ] ), this.getUnit( xy[ 1 ] ), this.pxPerEm )
\r
731 getMarginPaddingBorder: function( name, width ){
\r
732 var props = [ name + 'Top' + width,
\r
733 name + 'Right' + width,
\r
734 name + 'Bottom' + width,
\r
735 name + 'Left' + width ],
\r
736 top = this.get( props[ 0 ] ),
\r
737 right = this.get( props[ 1 ] ),
\r
738 bottom = this.get( props[ 2 ] ),
\r
739 left = this.get( props[ 3 ] ),
\r
740 ret = new FrexibleProperty( name, top, right, bottom, left ),
\r
741 klass, pxPerEm, getValue, getUnit,
\r
742 all, _0, _1, _2, _3, v, u;
\r
743 if( ret.isValid() === true ) return ret;
\r
746 pxPerEm = this.pxPerEm;
\r
747 getValue = this.getValue;
\r
748 getUnit = this.getUnit;
\r
749 all = this.style[ name + width ].split( ' ' );
\r
754 v = getValue( _0 );
\r
756 switch( all.length ){
\r
758 top = new klass( props[ 0 ], v, u, pxPerEm );
\r
759 right = new klass( props[ 1 ], v, u, pxPerEm );
\r
760 bottom = new klass( props[ 2 ], v, u, pxPerEm );
\r
761 left = new klass( props[ 3 ], v, u, pxPerEm );
\r
764 top = new klass( props[ 0 ], v, u, pxPerEm );
\r
765 bottom = new klass( props[ 2 ], v, u, pxPerEm );
\r
766 v = getValue( _1 );
\r
768 right = new klass( props[ 1 ], v, u, pxPerEm );
\r
769 left = new klass( props[ 3 ], v, u, pxPerEm );
\r
772 top = new klass( props[ 0 ], v, u, pxPerEm );
\r
773 v = getValue( _1 );
\r
775 right = new klass( props[ 1 ], v, u, pxPerEm );
\r
776 left = new klass( props[ 3 ], v, u, pxPerEm );
\r
777 bottom = new klass( props[ 2 ], getValue( _2 ), getUnit( _2 ), pxPerEm );
\r
780 top = new klass( props[ 0 ], v, u, pxPerEm );
\r
781 right = new klass( props[ 1 ], getValue( _1 ), getUnit( _1 ), pxPerEm );
\r
782 bottom = new klass( props[ 2 ], getValue( _2 ), getUnit( _2 ), pxPerEm );
\r
783 left = new klass( props[ 3 ], getValue( _3 ), getUnit( _3 ), pxPerEm );
\r
786 return new FrexibleProperty( name, top, right, bottom, left );
\r
788 getBorderColor: function( name ){
\r
789 var props = 'borderTopColor,borderRightColor,borderBottomColor,borderLeftColor'.split( ',' ),
\r
790 top = this.get( props[ 0 ] ),
\r
791 right = this.get( props[ 1 ] ),
\r
792 bottom = this.get( props[ 2 ] ),
\r
793 left = this.get( props[ 3 ] ),
\r
794 ret = new FrexibleProperty( name, top, right, bottom, left ),
\r
795 all, _0, _1, getColor;
\r
796 if( ret.isValid() === true ) return ret;
\r
798 getColor = this.getColor;
\r
799 all = this.style[ name ].split( ' ' );
\r
802 switch( all.length ){
\r
804 top = getColor( _0, props[ 0 ] );
\r
805 right = getColor( _0, props[ 1 ] );
\r
806 bottom = getColor( _0, props[ 2 ] );
\r
807 left = getColor( _0, props[ 3 ] );
\r
810 top = getColor( _0, props[ 0 ] );
\r
811 right = getColor( _1, props[ 1 ] );
\r
812 bottom = getColor( _0, props[ 2 ] );
\r
813 left = getColor( _1, props[ 3 ] );
\r
816 top = getColor( _0, props[ 0 ] );
\r
817 right = getColor( _1, props[ 1 ] );
\r
818 bottom = getColor( all[ 2 ], props[ 2 ] );
\r
819 left = getColor( _1, props[ 3 ] );
\r
822 top = getColor( _0, props[ 0 ] );
\r
823 right = getColor( _1, props[ 1 ] );
\r
824 bottom = getColor( all[ 2 ], props[ 2 ] );
\r
825 left = getColor( all[ 3 ], props[ 3 ] );
\r
828 return new FrexibleProperty( name, top, right, bottom, left );
\r
832 function camelizeHash( obj ){
\r
833 var p, _p, came = Util.camelize;
\r
836 if( _p === p ) continue;
\r
837 obj[ _p ] = obj[ _p ] || obj[ p ];
\r
842 create: function( css ){
\r
843 return new WrappedStyle( camelizeHash( p ) );
\r
848 var XDocument = ( function( window, document ){
\r
850 var getIndex = Util.getIndex;
\r
851 var ROOT_LIST = [];
\r
852 var DEF_ATTRS = {};
\r
853 var AUTO = Number.POSITIVE_INFINITY;
\r
854 var FULL = DEF_ATTRS; // something unigue value;
\r
855 var FLOOR = Math.floor;
\r
857 DEF_ATTRS.LENGTH = 1;
\r
858 DEF_ATTRS.PERCENT = 2;
\r
859 DEF_ATTRS.COLOR = 4;
\r
860 DEF_ATTRS.U_DECIMAL = 8;
\r
861 DEF_ATTRS.NUMERICAL = 16;
\r
862 DEF_ATTRS.BOOLEAN = 32;
\r
863 DEF_ATTRS.QUARTET = 64;
\r
864 DEF_ATTRS.URL = 128;
\r
865 DEF_ATTRS.FONT_NAME = 256;
\r
866 DEF_ATTRS.LIST = 512;
\r
867 DEF_ATTRS.AUTO = 1024;
\r
868 DEF_ATTRS.COMBI = 2048;
\r
869 DEF_ATTRS.BORDER_STYLE = 'none,hidden,dotted,dashed,solid,double,groove,ridge,inset,outset'.split(',');
\r
870 DEF_ATTRS.POSITION_X = 'left,center,right'.split(',');
\r
871 DEF_ATTRS.POSITION_Y = 'top,center,bottom'.split(',');
\r
872 DEF_ATTRS.ALIGN = 'left,center,right,justify'.split(',');
\r
873 DEF_ATTRS.TEXT_DECORATION = 'none,underline,overline,line-through,blink'.split(',');
\r
874 DEF_ATTRS.TEXT_TRANSFORM = 'none,capitalize,lowercase,uppercase'.split(',');
\r
875 DEF_ATTRS.WIDTH_HEIGHT = 'auto'.split(',');
\r
876 DEF_ATTRS.BOX_SIZING = 'content-box,padding-box,border-box,margin-box'.split(',');
\r
877 DEF_ATTRS.PAINT = 1; // 再描画のみ必要
\r
878 DEF_ATTRS.REFLOW = 2; // レイアウトの再計算が必要
\r
879 DEF_ATTRS.FONT = 3; // フォントサイズが変更された
\r
880 DEF_ATTRS.CONTENT_UPDATE = 4; // コンテンツが変更された
\r
882 DEF_ATTRS.borderWidth = [ DEF_ATTRS.REFLOW, 0, DEF_ATTRS.QUARTET | DEF_ATTRS.LENGTH ]; // em [ top, right, bottom, left ]
\r
883 DEF_ATTRS.borderColor = [ DEF_ATTRS.PAINT, 4, DEF_ATTRS.QUARTET | DEF_ATTRS.DEF_COLOR ]; // color [ top, right, bottom, left ]
\r
884 DEF_ATTRS.borderStyle = [ DEF_ATTRS.PAINT, 8, DEF_ATTRS.QUARTET | DEF_ATTRS.LIST, DEF_ATTRS.BORDER_STYLE ]; // string [ top, right, bottom, left ]
\r
885 DEF_ATTRS.cornerRadius = [ DEF_ATTRS.PAINT, 12, DEF_ATTRS.QUARTET | DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT ]; // em, px [ top, right, bottom, left ]
\r
886 DEF_ATTRS.bgColor = [ DEF_ATTRS.PAINT, 16, DEF_ATTRS.COLOR ]; // color
\r
887 DEF_ATTRS.bgAlpha = [ DEF_ATTRS.PAINT, 17, DEF_ATTRS.U_DECIMAL ]; // 0 - 1
\r
888 DEF_ATTRS.bgImgUrl = [ DEF_ATTRS.PAINT, 18, DEF_ATTRS.URL ]; // url
\r
889 DEF_ATTRS.bgImgRepeatX = [ DEF_ATTRS.PAINT, 19, DEF_ATTRS.BOOLEAN ]; // true / false
\r
890 DEF_ATTRS.bgImgRepeatY = [ DEF_ATTRS.PAINT, 20, DEF_ATTRS.BOOLEAN ]; // true / false
\r
891 DEF_ATTRS.bgImgPositionX = [ DEF_ATTRS.PAINT, 21, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT | DEF_ATTRS.LIST, DEF_ATTRS.POSITION_X ]; // em %, px, string
\r
892 DEF_ATTRS.bgImgPositionY = [ DEF_ATTRS.PAINT, 22, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT | DEF_ATTRS.LIST, DEF_ATTRS.POSITION_Y ]; // em %, px, string
\r
893 DEF_ATTRS.shadowColor = [ DEF_ATTRS.PAINT, 23, DEF_ATTRS.COLOR ]; // color
\r
894 DEF_ATTRS.shadowAlpha = [ DEF_ATTRS.PAINT, 24, DEF_ATTRS.U_DECIMAL ]; // 0 - 1
\r
895 DEF_ATTRS.shadowOffsetX = [ DEF_ATTRS.PAINT, 25, DEF_ATTRS.LENGTH ]; // em
\r
896 DEF_ATTRS.shadowOffsetY = [ DEF_ATTRS.PAINT, 26, DEF_ATTRS.LENGTH ]; // em
\r
897 DEF_ATTRS.shadowBlur = [ DEF_ATTRS.PAINT, 27, DEF_ATTRS.LENGTH ]; // em
\r
898 DEF_ATTRS.shadowSpread = [ DEF_ATTRS.PAINT, 28, DEF_ATTRS.LENGTH ]; // em
\r
899 DEF_ATTRS.shadowInset = [ DEF_ATTRS.PAINT, 29, DEF_ATTRS.BOOLEAN ]; // true / false
\r
901 DEF_ATTRS.color = [ DEF_ATTRS.PAINT, 30, DEF_ATTRS.COLOR ]; // color
\r
902 DEF_ATTRS.fontFamily = [ DEF_ATTRS.FONT, 31, DEF_ATTRS.FONT_NAME ]; // string
\r
903 DEF_ATTRS.fontSize = [ DEF_ATTRS.FONT, 32, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT ]; // em, %
\r
904 DEF_ATTRS.bold = [ DEF_ATTRS.FONT, 33, DEF_ATTRS.BOOLEAN ]; // true / false
\r
905 DEF_ATTRS.italic = [ DEF_ATTRS.FONT, 34, DEF_ATTRS.BOOLEAN ]; // true / false
\r
906 DEF_ATTRS.lineHeight = [ DEF_ATTRS.FONT, 35, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT | DEF_ATTRS.NUMERICAL ]; // em, %,
\r
907 DEF_ATTRS.letterSpacing = [ DEF_ATTRS.FONT, 36, DEF_ATTRS.LENGTH ]; // em
\r
908 DEF_ATTRS.wordSpacing = [ DEF_ATTRS.FONT, 37, DEF_ATTRS.LENGTH ];
\r
909 DEF_ATTRS.align = [ DEF_ATTRS.FONT, 38, DEF_ATTRS.LIST, DEF_ATTRS.ALIGN ];
\r
910 DEF_ATTRS.decoration = [ DEF_ATTRS.PAINT, 39, DEF_ATTRS.LIST, DEF_ATTRS.TEXT_DECORATION ];
\r
911 DEF_ATTRS.transform = [ DEF_ATTRS.FONT, 40, DEF_ATTRS.LIST, DEF_ATTRS.TEXT_TRANSFORM ];
\r
912 DEF_ATTRS.textShadowColor = [ DEF_ATTRS.PAINT, 41, DEF_ATTRS.COLOR ];
\r
913 DEF_ATTRS.textShadowOffsetX = [ DEF_ATTRS.PAINT, 42, DEF_ATTRS.LENGTH ];
\r
914 DEF_ATTRS.textShadowOffsetY = [ DEF_ATTRS.PAINT, 43, DEF_ATTRS.LENGTH ];
\r
915 DEF_ATTRS.shadowBlur = [ DEF_ATTRS.PAINT, 44, DEF_ATTRS.LENGTH ];
\r
917 DEF_ATTRS.width = [ DEF_ATTRS.REFLOW, 45, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT, DEF_ATTRS.WIDTH_HEIGHT ];
\r
918 DEF_ATTRS.minWidth = [ DEF_ATTRS.REFLOW, 46, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT ];
\r
919 DEF_ATTRS.maxWidth = [ DEF_ATTRS.REFLOW, 47, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT ];
\r
920 DEF_ATTRS.height = [ DEF_ATTRS.REFLOW, 48, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT, DEF_ATTRS.WIDTH_HEIGHT ];
\r
921 DEF_ATTRS.minHeight = [ DEF_ATTRS.REFLOW, 49, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT ];
\r
922 DEF_ATTRS.maxHeight = [ DEF_ATTRS.REFLOW, 50, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT ];
\r
923 DEF_ATTRS.padding = [ DEF_ATTRS.REFLOW, 51, DEF_ATTRS.QUARTET | DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT ];
\r
924 DEF_ATTRS.margin = [ DEF_ATTRS.REFLOW, 55, DEF_ATTRS.QUARTET | DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT ];
\r
925 DEF_ATTRS.sizing = [ DEF_ATTRS.REFLOW, 59, DEF_ATTRS.LIST, DEF_ATTRS.BOX_SIZING ];
\r
926 DEF_ATTRS.pageBox = [ DEF_ATTRS.REFLOW, 60, DEF_ATTRS.BOOLEAN ]; // true / false
\r
927 DEF_ATTRS.x = DEF_ATTRS.left = [ DEF_ATTRS.REFLOW, 61, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT ];
\r
928 DEF_ATTRS.y = DEF_ATTRS.top = [ DEF_ATTRS.REFLOW, 62, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT ];
\r
929 DEF_ATTRS.bottom = [ DEF_ATTRS.REFLOW, 63, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT ];
\r
930 DEF_ATTRS.right = [ DEF_ATTRS.REFLOW, 64, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT ];
\r
932 var ATTRS = ( function(){
\r
937 if( Type.isArray( obj[ p ] ) === true ){
\r
938 ret[ p ] = obj[ p ][ 1 ];
\r
946 * redraw 再描画はパラメータ変更後に setTimeout で
\r
947 * reflow 再計算は値が get された場合 invalidate が サイズだったら
\r
948 * または再描画前に invalidate がサイズなフラグが足っていたら
\r
951 var BasicLayoutManager = Class.create(
\r
952 'BasicLayoutManager',
\r
955 Constructor : function(){
\r
958 redraw : function( nodeData ){
\r
959 var root = nodeData.__root;
\r
960 root.dirty === DEF_ATTRS.REFLOW && this.reflow( root );
\r
964 reflow : function( nodeData, allowW, allowH ){
\r
965 nodeData.preMesure( allowW, allowH );
\r
967 var children = nodeData.children,
\r
968 contentW = nodeData.contentWidth,
\r
969 contentH = nodeData.contentHeight,
\r
970 autoW = contentW === AUTO,
\r
971 autoH = contentH === AUTO,
\r
972 auto, calc, childW, childH, child, i, style, data,
\r
975 auto = autoW && autoH;
\r
978 calc = BasicLayoutManager.calcValue;
\r
979 for( i = children.length; i; ){
\r
980 child = children[ --i ];
\r
981 style = child.__style;
\r
984 t = calc( data[ ATTRS.top ], contentH );
\r
985 r = calc( data[ ATTRS.right ], contentW );
\r
986 b = calc( data[ ATTRS.bottom ], contentH );
\r
987 l = calc( data[ ATTRS.left ], contentW );
\r
991 if( child instanceof LayoutBoxPrivate ){
\r
992 child.layoutManager.reflow( child, contentW - r - l, contentH - t - b );
\r
994 child.preMesure( contentW - r - l, contentH - t - b );
\r
996 child.postMesure();
\r
998 if( !auto ) continue;
\r
999 if( autoW && childW < child.boxWidth + r + l ) childW = child.boxWidth + r + l;
\r
1000 if( autoH && childH < child.boxHeight + t + b ) childH = child.boxHeight + t + b;
\r
1002 if( autoW ) nodeData.contentWidth = childW;
\r
1003 if( autoH ) nodeData.contentHeight = childH;
\r
1005 ( autoW || autoH ) && nodeData.postMesure();
\r
1007 delete nodeData.dirty;
\r
1011 BasicLayoutManager.finalValue = function( styleValue, styleMin, styleMax, srcValue ){
\r
1012 var calc = BasicLayoutManager.calcValue,
\r
1013 v = calc( styleValue, srcValue ),
\r
1014 min = calc( styleMin, srcValue ),
\r
1015 max = calc( styleMax, srcValue );
\r
1016 if( v < min ) return min;
\r
1017 if( max < v ) return max;
\r
1020 BasicLayoutManager.calcValue = function( styleValue, srcValue ){
\r
1021 switch( styleValue ){
\r
1027 return srcValue; // 100%
\r
1029 if( 1 <= styleValue ) return styleValue; // legth
\r
1030 if( -1 < styleValue ) return FLOOR( srcValue * styleValue ); // %
\r
1032 return styleValue; // - length
\r
1034 BasicLayoutManager.advancedCalcValue = function( styleValue, srcValue ){
\r
1035 switch( styleValue ){
\r
1041 throw new Error( 'advancedCalcValue FULL' );
\r
1042 // return ; // 100%
\r
1044 if( 1 <= styleValue ) return styleValue;
\r
1045 if( -1 < styleValue ) return FLOOR( ( srcValue / ( 1 - styleValue ) ) * styleValue ); // %
\r
1047 return styleValue; // - length
\r
1050 var NodeStylePrivate = Class.create(
\r
1051 Class.PRIVATE_DATA | Class.POOL_OBJECT,
\r
1053 fontCssText : null,
\r
1054 colorCssText : null,
\r
1055 layoutCssText : null,
\r
1056 Constructor : function(){
\r
1060 register : function( node ){
\r
1061 var root = node.__root,
\r
1062 roots = this.rootList,
\r
1063 nodes = this.nodeList;
\r
1065 this.rootList = [ root ];
\r
1067 if( getIndex( roots, root ) === -1 ) roots[ roots.length ] = root;
\r
1070 this.nodeList = [ node ];
\r
1073 if( getIndex( nodes, node ) === -1 ) nodes[ nodes.length ] = node;
\r
1075 unRegister : function( node ){
\r
1076 var nodes = this.nodeList,
\r
1077 i = getIndex( nodes, node ),
\r
1078 root = node._root,
\r
1079 roots = this.rootList,
\r
1080 j = getIndex( roots, root );
\r
1081 if( i !== -1 && nodes.splice( i, 1 ) && nodes.length === 0 ) delete this.nodeList;
\r
1082 if( j !== -1 && roots.splice( j, 1 ) && roots.length === 0 ) delete this.rootList;
\r
1084 clone : function(){
\r
1085 var styleClass = Class.getClass( this.User ),
\r
1086 dataClass = Class.getClass( this );
\r
1089 * opt_unit は getter のみ
\r
1091 attr : function( prop, v, opt_unit ){
\r
1092 var update = prop[ 0 ],
\r
1093 propID = prop[ 1 ],
\r
1096 length = !!( type & DEF_ATTRS.LENGTH ),
\r
1097 percent = !!( type & DEF_ATTRS.PERCENT ),
\r
1098 color = !!( type & DEF_ATTRS.COLOR ),
\r
1099 uDecimal = !!( type & DEF_ATTRS.U_DECIMAL ),
\r
1100 numerical = !!( type & DEF_ATTRS.NUMERICAL ),
\r
1101 flag = !!( type & DEF_ATTRS.BOOLEAN ),
\r
1102 quartet = !!( type & DEF_ATTRS.QUARTET ),
\r
1103 url = !!( type & DEF_ATTRS.URL ),
\r
1104 fontName = !!( type & DEF_ATTRS.FONT_NAME ),
\r
1105 //list = !!( type & DEF_ATTRS.LIST ),
\r
1106 combi = !!( type & DEF_ATTRS.COMBI ),
\r
1109 i, l, nodes, root;
\r
1113 if( v !== undefined ){
\r
1114 if( Type.isNumber( v ) === true ){
\r
1115 if( numerical === false ){
\r
1116 if( uDecimal === false || v < 0 || 1 < v ) throw new Error( '' );
\r
1119 if( Type.isBoolean( v ) === true ){
\r
1120 if( flag === false ) throw new Error( '' );
\r
1122 if( Type.isString( v ) === true ){
\r
1123 if( url === false && fontName === false ){
\r
1124 if( v.indexOf( ' ' ) !== -1 ){
\r
1125 v = v.split( ' ' );
\r
1127 if( length === false && percent === false && color === false ) throw new Error( '' );
\r
1131 if( Type.isArray( v ) === true ){
\r
1132 if( v.length <= 4 && quartet === true ){
\r
1133 type ^= DEF_ATTRS.QUARTET;
\r
1135 if( v.length === 2 && combi === true ){
\r
1136 type ^= DEF_ATTRS.COMBI;
\r
1138 throw new Error( '' );
\r
1140 switch( v.length ){
\r
1142 this.attr( [ propID , type, list ], v[ 0 ] );
\r
1143 this.attr( [ ++propID, type, list ], v[ 0 ] );
\r
1144 this.attr( [ ++propID, type, list ], v[ 0 ] );
\r
1145 this.attr( [ ++propID, type, list ], v[ 0 ] );
\r
1148 this.attr( [ propID , type, list ], v[ 0 ] );
\r
1149 this.attr( [ ++propID, type, list ], v[ 1 ] );
\r
1150 this.attr( [ ++propID, type, list ], v[ 0 ] );
\r
1151 this.attr( [ ++propID, type, list ], v[ 1 ] );
\r
1154 this.attr( [ propID , type, list ], v[ 0 ] );
\r
1155 this.attr( [ ++propID, type, list ], v[ 1 ] );
\r
1156 this.attr( [ ++propID, type, list ], v[ 2 ] );
\r
1157 this.attr( [ ++propID, type, list ], v[ 1 ] );
\r
1160 this.attr( [ propID , type, list ], v[ 0 ] );
\r
1161 this.attr( [ ++propID, type, list ], v[ 1 ] );
\r
1162 this.attr( [ ++propID, type, list ], v[ 2 ] );
\r
1163 this.attr( [ ++propID, type, list ], v[ 3 ] );
\r
1170 case DEF_ATTRS.REFLOW :
\r
1171 delete this.layoutCssText;
\r
1173 case DEF_ATTRS.PAINT :
\r
1174 delete this.colorCssText;
\r
1176 case DEF_ATTRS.FONT :
\r
1177 delete this.fontCssText;
\r
1180 if( this.dirty < update ){
\r
1181 this.dirty = update;
\r
1182 roots = this.rootList;
\r
1183 for( i = 0, l = roots.length; i < l; ++i ){
\r
1184 root = roots[ i ];
\r
1185 if( root.dirty < update ) root.dirty = update;
\r
1189 if( list ) _v = Util.getIndex( list, v );
\r
1190 data[ propID ] = _v !== -1 ? _v : v;
\r
1193 case DEF_ATTRS.left :
\r
1194 case DEF_ATTRS.right :
\r
1195 this.ltrtWidth = data[ DEF_ATTRS.left[ 0 ] ] === undefined && data[ DEF_ATTRS.right[ 0 ] ] === undefined;
\r
1197 case DEF_ATTRS.top :
\r
1198 case DEF_ATTRS.bottom :
\r
1199 this.tpbtHeight = data[ DEF_ATTRS.top[ 0 ] ] === undefined && data[ DEF_ATTRS.bottom[ 0 ] ] === undefined;
\r
1201 case DEF_ATTRS.width :
\r
1202 this.autoWidth = v === AUTO;
\r
1203 this.prctWidth = v === FULL || v < 1;
\r
1205 case DEF_ATTRS.height :
\r
1206 this.autoHeight = v === AUTO;
\r
1207 this.prctHeight = v === FULL || v < 1;
\r
1212 v = data[ propID ];
\r
1214 if( quartet === true ) return [ v, data[ ++propID ], data[ ++propID ], data[ ++propID ] ];
\r
1215 if( combi === true ) return [ v, data[ ++propID ] ];
\r
1216 if( list && Type.isNumber( v ) === true ) return list[ v ];
\r
1219 cssText : function(){
\r
1220 if( this.fontCssText === null ) this.fontCssText = this.createFontCssText();
\r
1221 if( this.layoutCssText === null ) this.layoutCssText = this.createLayoutCssText();
\r
1222 if( this.colorCssText === null ) this.colorCssText = this.createColorCssText();
\r
1223 return [ this.fontCssText, this.colorCssText, this.layoutCssText ].join( ';' );
\r
1225 createFontCssText : function(){
\r
1226 var data = this.data,
\r
1229 if( v = data[ ATTRS.fontFamily ] ) css[ 0 ] = 'font-family:' + v;
\r
1230 if( v = data[ ATTRS.fontSize ] ) css[ css.length - 1 ] = 'font-size:' + v;
\r
1231 if( v = data[ ATTRS.bold ] ) css[ css.length - 1 ] = 'font-weight:bold';
\r
1232 if( v = data[ ATTRS.bold ] ) css[ css.length - 1 ] = 'font-style:italic';
\r
1233 if( v = data[ ATTRS.lineHeight ] ) css[ css.length - 1 ] = 'line-height:' + v;
\r
1234 if( v = data[ ATTRS.letterSpacing ] ) css[ css.length - 1 ] = 'letter-spacing:' + v;
\r
1235 if( v = data[ ATTRS.wordSpacing ] ) css[ css.length - 1 ] = 'word-spacing:' + v;
\r
1236 if( v = data[ ATTRS.align ] ) css[ css.length - 1 ] = 'text-align:' + DEF_ATTRS.ALIGN[ v ];
\r
1237 if( v = data[ ATTRS.transform ] ) css[ css.length - 1 ] = 'text-transform:' + DEF_ATTRS.TEXT_TRANSFORM[ v ];
\r
1238 return css.join( ',' );
\r
1240 createColorCssText : function(){
\r
1241 var data = this.data,
\r
1244 if( v = data[ ATTRS.borderColor ] ) css[ 0 ] = 'border-color:' + v;
\r
1245 if( v = data[ ATTRS.borderStyle + 0 ] ) css[ css.length - 1 ] = 'border-top-style:' + DEF_ATTRS.BORDER_STYLE[ v ];
\r
1246 if( v = data[ ATTRS.borderStyle + 1 ] ) css[ css.length - 1 ] = 'border-right-style:' + DEF_ATTRS.BORDER_STYLE[ v ];
\r
1247 if( v = data[ ATTRS.borderStyle + 2 ] ) css[ css.length - 1 ] = 'border-bottom-style:' + DEF_ATTRS.BORDER_STYLE[ v ];
\r
1248 if( v = data[ ATTRS.borderStyle + 3 ] ) css[ css.length - 1 ] = 'border-left-style:' + DEF_ATTRS.BORDER_STYLE[ v ];
\r
1249 if( v = data[ ATTRS.cornerRadius + 0 ] ) css[ css.length - 1 ] = 'corner-radius-top:' + v;
\r
1250 if( v = data[ ATTRS.cornerRadius + 1 ] ) css[ css.length - 1 ] = 'corner-radius-right:' + v;
\r
1251 if( v = data[ ATTRS.cornerRadius + 2 ] ) css[ css.length - 1 ] = 'border-radius-bottom:' + v;
\r
1252 if( v = data[ ATTRS.cornerRadius + 3 ] ) css[ css.length - 1 ] = 'border-radius-left:' + v;
\r
1253 if( v = data[ ATTRS.bgColor ] ) css[ css.length - 1 ] = 'background-color:' + v;
\r
1255 if( v = data[ ATTRS.bgImgUrl ] ) css[ css.length - 1 ] = 'background-image:url(' + v + ')';
\r
1256 x = data[ ATTRS.bgImgRepeatX ];
\r
1257 y = data[ ATTRS.bgImgRepeatY ];
\r
1259 css[ css.length - 1 ] = 'background-repeat:repeat';
\r
1262 css[ css.length - 1 ] = 'background-repeat:repeat-x';
\r
1265 css[ css.length - 1 ] = 'background-repeat:repeat-y';
\r
1267 x = data[ ATTRS.bgImgPositionX ];
\r
1268 y = data[ ATTRS.bgImgPositionY ];
\r
1270 css[ css.length - 1 ] = 'background-position:' + x + ' ' + y;
\r
1273 css[ css.length - 1 ] = 'background-position:' + x + ' 0';
\r
1276 css[ css.length - 1 ] = 'background-position:0 ' + y;
\r
1278 if( v = data[ ATTRS.color ] ) css[ css.length - 1 ] = 'color:' + v;
\r
1279 if( v = data[ ATTRS.decoration ] ) css[ css.length - 1 ] = 'text-decoration:' + DEF_ATTRS.TEXT_DECORATION[ v ];
\r
1280 x = data[ ATTRS.textShadowOffsetX ];
\r
1281 y = data[ ATTRS.textShadowOffsetY ];
\r
1282 b = data[ ATTRS.textShadowBlur ];
\r
1283 c = data[ ATTRS.textShadowColor ];
\r
1284 if( c || x || y || b ){
\r
1285 css[ css.length - 1 ] = 'text-shadow:' + x + ' ' + y + ' ' + b + ' ' + c;
\r
1288 ATTRS.shadowColor = [ DEF_ATTRS.PAINT, 23, DEF_ATTRS.COLOR ]; // color
\r
1289 ATTRS.shadowAlpha = [ DEF_ATTRS.PAINT, 24, DEF_ATTRS.U_DECIMAL ]; // 0 - 1
\r
1290 ATTRS.shadowOffsetX = [ DEF_ATTRS.PAINT, 25, DEF_ATTRS.LENGTH ]; // em
\r
1291 ATTRS.shadowOffsetY = [ DEF_ATTRS.PAINT, 26, DEF_ATTRS.LENGTH ]; // em
\r
1292 ATTRS.shadowBlur = [ DEF_ATTRS.PAINT, 27, DEF_ATTRS.LENGTH ]; // em
\r
1293 ATTRS.shadowSpread = [ DEF_ATTRS.PAINT, 28, DEF_ATTRS.LENGTH ]; // em
\r
1294 ATTRS.shadowInset = [ DEF_ATTRS.PAINT, 29, DEF_ATTRS.BOOLEAN ]; // true / false
\r
1297 createBoxShadowCssText : function(){
\r
1300 createBGAlphaCssText : function(){
\r
1303 createTextShadowCssText : function(){
\r
1306 createLayoutCssText : function(){
\r
1312 var NodeStyle = Class.create(
\r
1314 Class.POOL_OBJECT,
\r
1317 Constructor : function(){
\r
1318 NodeStyle.newPrivateData( this );
\r
1320 borderWidth : function( v ){
\r
1321 return NodeStyle.getPrivateData( this ).attr( DEF_ATTRS.borderWidth, v );
\r
1323 borderColor : function(){
\r
1324 return NodeStyle.getPrivateData( this ).attr( DEF_ATTRS.borderColor, v );
\r
1326 borderStyle : function(){
\r
1327 return NodeStyle.getPrivateData( this ).attr( DEF_ATTRS.borderStyle, v );
\r
1329 cornerRadius : function(){
\r
1330 return NodeStyle.getPrivateData( this ).attr( DEF_ATTRS.cornerRadius, v );
\r
1332 bgColor : function(){
\r
1333 return NodeStyle.getPrivateData( this ).attr( DEF_ATTRS.bgColor, v );
\r
1335 bgAlpha : function(){
\r
1336 return NodeStyle.getPrivateData( this ).attr( DEF_ATTRS.bgAlpha, v );
\r
1338 bgImgUrl : function(){
\r
1339 return NodeStyle.getPrivateData( this ).attr( DEF_ATTRS.bgImgUrl, v );
\r
1341 bgImgRepeatX : function(){
\r
1342 return NodeStyle.getPrivateData( this ).attr( DEF_ATTRS.bgImgRepeatX, v );
\r
1344 bgImgRepeatY : function(){
\r
1345 return NodeStyle.getPrivateData( this ).attr( DEF_ATTRS.bgImgRepeatY, v );
\r
1347 bgImgPositionX : function(){
\r
1348 return NodeStyle.getPrivateData( this ).attr( DEF_ATTRS.bgImgPositionX, v );
\r
1350 bgImgPositionY : function(){
\r
1351 return NodeStyle.getPrivateData( this ).attr( DEF_ATTRS.bgImgPositionY, v );
\r
1353 shadowColor : function(){
\r
1354 return NodeStyle.getPrivateData( this ).attr( DEF_ATTRS.shadowColor, v );
\r
1356 shadowAlpha : function(){
\r
1357 return NodeStyle.getPrivateData( this ).attr( DEF_ATTRS.shadowAlpha, v );
\r
1359 shadowOffsetX : function(){
\r
1360 return NodeStyle.getPrivateData( this ).attr( DEF_ATTRS.shadowOffsetX, v );
\r
1362 shadowOffsetY : function(){
\r
1363 return NodeStyle.getPrivateData( this ).attr( DEF_ATTRS.shadowOffsetY, v );
\r
1365 shadowBlur : function(){
\r
1366 return NodeStyle.getPrivateData( this ).attr( DEF_ATTRS.shadowBlur, v );
\r
1368 shadowSpread : function(){
\r
1369 return NodeStyle.getPrivateData( this ).attr( DEF_ATTRS.shadowSpread, v );
\r
1371 shadowInset : function(){
\r
1372 return NodeStyle.getPrivateData( this ).attr( DEF_ATTRS.shadowInset, v );
\r
1374 color : function( v ){
\r
1375 return TypoStyle.getPrivateData( this ).attr( DEF_ATTRS.color, v );
\r
1377 fontFamily : function( v ){
\r
1378 return TypoStyle.getPrivateData( this ).attr( DEF_ATTRS.fontFamily, v );
\r
1380 fontSize : function( v ){
\r
1381 return TypoStyle.getPrivateData( this ).attr( DEF_ATTRS.fontSize, v );
\r
1383 bold : function( v ){
\r
1384 return TypoStyle.getPrivateData( this ).attr( DEF_ATTRS.bold, v );
\r
1386 italic : function( v ){
\r
1387 return TypoStyle.getPrivateData( this ).attr( DEF_ATTRS.italic, v );
\r
1389 lineHeight : function( v ){
\r
1390 return TypoStyle.getPrivateData( this ).attr( DEF_ATTRS.lineHeight, v );
\r
1392 letterSpacing : function( v ){
\r
1393 return TypoStyle.getPrivateData( this ).attr( DEF_ATTRS.letterSpacing, v );
\r
1395 wordSpacing : function( v ){
\r
1396 return TypoStyle.getPrivateData( this ).attr( DEF_ATTRS.wordSpacing, v );
\r
1398 align : function( v ){
\r
1399 return TypoStyle.getPrivateData( this ).attr( DEF_ATTRS.align, v );
\r
1401 decoration : function( v ){
\r
1402 return TypoStyle.getPrivateData( this ).attr( DEF_ATTRS.decoration, v );
\r
1404 transform : function( v ){
\r
1405 return TypoStyle.getPrivateData( this ).attr( DEF_ATTRS.transform, v );
\r
1407 textShadowColor : function( v ){
\r
1408 return TypoStyle.getPrivateData( this ).attr( DEF_ATTRS.textShadowColor, v );
\r
1410 textShadowOffsetX : function( v ){
\r
1411 return TypoStyle.getPrivateData( this ).attr( DEF_ATTRS.textShadowOffsetX, v );
\r
1413 textShadowOffsetY : function( v ){
\r
1414 return TypoStyle.getPrivateData( this ).attr( DEF_ATTRS.textShadowOffsetY, v );
\r
1416 shadowBlur : function( v ){
\r
1417 return TypoStyle.getPrivateData( this ).attr( DEF_ATTRS.shadowBlur, v );
\r
1419 cssText : function(){
\r
1420 return TypoStyle.getPrivateData( this ).cssText();
\r
1425 var NodePrivate = Class.create(
\r
1427 Class.PRIVATE_DATA | Class.POOL_OBJECT,
\r
1452 boxSizingOffsetLR : 0,
\r
1453 boxSizingOffsetTB : 0,
\r
1455 minContentWidth : 0,
\r
1456 maxContentWidth : AUTO,
\r
1457 contentHeight : 0,
\r
1458 minContentHeight : 0,
\r
1459 maxContentHeight : AUTO,
\r
1460 Constructor : function( __root, __parent ){
\r
1461 this.__root = __root;
\r
1462 if( __parent ) this.__parent = __parent;
\r
1464 style : function( v ){
\r
1465 if( v instanceof NodeStyle ){
\r
1466 if( v !== this._style ){
\r
1467 this.__style && this.__style.unRegister( this );
\r
1469 this.__style = StylePrivate.getPrivateData( v );
\r
1470 this.__style.register( this );
\r
1475 this.__style && this.__style.unRegister( this );
\r
1476 delete this._style;
\r
1477 delete this.__style;
\r
1480 return this._style;
\r
1482 content : function( v ){
\r
1483 if( Type.isString( v ) === true ){
\r
1484 if( !this.textNode || ( this.textNode && this.textNode.data !== v ) ){
\r
1485 this._content = v;
\r
1486 this.updateContent = true;
\r
1491 if( this._content !== v && this.textNode ){
\r
1492 this._content = v;
\r
1493 this.updateContent = true;
\r
1497 if( this._content ) return this._content;
\r
1498 if( this._content === null ) return null;
\r
1499 if( this.textNode ) return this.textNode.data;
\r
1504 * 1. ペイントがある // 予約のみ
\r
1505 * 2. コンテンツがある // 予約のみ *
\r
1506 * 3. コンテンツを削除 // 予約のみ
\r
1507 * 4. 要素を削除 // 予約のみ
\r
1510 * 0. 要素追加して css セット
\r
1513 * 3. contentWidth の変更 (コンテンツの高さの再計算) 前回の contentWidth の保持
\r
1515 * contentSize, scrollSize の決定
\r
1517 musure : function( dirty ){
\r
1518 var content = this._content,
\r
1519 root = this.__root,
\r
1520 style = this.__style,
\r
1521 w = this.contentWidth,
\r
1522 h = this.contentHeight;
\r
1523 switch( this.updateContent === true ? DEF_ATTRS.CONTENT_UPDATE : dirty ){
\r
1524 case DEF_ATTRS.CONTENT_UPDATE : // コンテンツが変更された
\r
1526 this.lastContentWidth = -1;
\r
1527 case DEF_ATTRS.FONT : // フォントサイズが変更された
\r
1528 case DEF_ATTRS.REFLOW : // レイアウトの再計算が必要
\r
1529 /* http://web-designs.seesaa.net/article/188400668.html
\r
1530 * min-width の値が max-width の値より大きい場合は、max-width の値は min-width の値に設定される。
\r
1533 * 1. contentWidth === AUTO
\r
1534 * style を更新して contentWidth の決定
\r
1535 * min or max に引っかかったら style 更新
\r
1536 * contentHeight === AUTO の場合
\r
1538 * contentHeight !== AUTO の場合 scrollHeight のみ更新
\r
1539 * 2. contentHeight === AUTO かつ
\r
1540 * コンテンツの高さの再取得が必要( contentWidth が最終計測時の contentWidth と一致 かつ フォント・コンテンツに変更無し の場合再取得不要)
\r
1541 * style を更新して contentHeight の決定
\r
1543 * 3. content のサイズがすでに決定している
\r
1547 if( this.textNode ){
\r
1549 this.commitStyle();
\r
1550 w = this.contentWidth = this.textNode.offsetWidth;
\r
1551 this.scrollWidth = w + this.contentL + this.contentR;
\r
1552 if( this.maxContentWidth < w - this.boxSizingOffsetLR ) this.contentWidth = this.maxContentWidth + this.boxSizingOffsetLR;
\r
1553 if( w - this.boxSizingOffsetLR < this.minContentWidth ) this.contentWidth = this.minContentWidth + this.boxSizingOffsetLR;
\r
1554 this.lastContentWidth = this.contentWidth;
\r
1556 w !== this.contentWidth && this.commitStyle();
\r
1559 h = this.conetntHeight = this.textNode.offsetHeight;
\r
1560 this.scrollHeight = h + this.contentT + this.contentB;
\r
1561 if( this.maxContentHeight < h - this.boxSizingOffsetTB ) this.contentHeight = this.maxContentHeight + this.boxSizingOffsetTB;
\r
1562 if( h - this.boxSizingOffsetTB < this.minContentHeight ) this.contentHeight = this.minContentHeight + this.boxSizingOffsetTB;
\r
1564 this.scrollHeight = this.textNode.offsetHeight + this.contentT + this.contentB;
\r
1568 if( w !== this.lastContentWidth || dirty !== DEF_ATTRS.REFLOW ){
\r
1569 this.commitStyle();
\r
1570 this.lastContentWidth = w;
\r
1571 h = this.conetntHeight = this.textNode.offsetHeight;
\r
1572 this.scrollWidth = w + this.contentL + this.contentR;
\r
1573 this.scrollHeight = h + this.contentT + this.contentB;
\r
1574 if( this.maxContentHeight < h - this.boxSizingOffsetTB ) this.contentHeight = this.maxContentHeight + this.boxSizingOffsetTB;
\r
1575 if( h - this.boxSizingOffsetTB < this.minContentHeight ) this.contentHeight = this.minContentHeight + this.boxSizingOffsetTB;
\r
1577 this.scrollWidth = w + this.contentL + this.contentR;
\r
1578 this.scrollHeight = h + this.contentT + this.contentB;
\r
1579 root.paintReserve( this );
\r
1582 if( dirty !== DEF_ATTRS.REFLOW ){
\r
1583 this.commitStyle();
\r
1584 this.scrollWidth = this.textNode.offsetWidth + this.contentL + this.contentR;
\r
1585 this.scrollHeight = this.textNode.offsetHeight + this.contentT + this.contentB;
\r
1587 root.paintReserve( this );
\r
1588 this.scrollWidth = w + this.contentL + this.contentR;
\r
1589 this.scrollHeight = h + this.contentT + this.contentB;
\r
1593 if( w === AUTO ) this.contentWidth = w = 0 < this.minContentWidth ? this.minContentWidth : 0;
\r
1594 if( h === AUTO ) this.contentHeight = h = 0 < this.minContentHeight ? this.minContentHeight : 0;
\r
1595 this.scrollWidth = w + this.contentL + this.contentR;
\r
1596 this.scrollHeight = h + this.contentT + this.contentB;
\r
1597 root.paintReserve( this );
\r
1600 case DEF_ATTRS.PAINT : // 再描画のみ必要
\r
1601 root.paintReserve( this );
\r
1605 paint : function( dirty ){
\r
1606 var content = this._content,
\r
1607 style = this.__style;
\r
1608 if( this.updateContent === true || ( style && style.hasPaint === true ) ){
\r
1609 if( !this.elmWrap ){
\r
1610 this.elmWrap = DOM.createDiv();
\r
1611 this.__parent.addDisplayElement( this );
\r
1613 dirty !== 0 && this.commitStyle();
\r
1614 if( this.updateContent === true ){
\r
1615 if( content !== null ){
\r
1616 if( !this.textNode ){
\r
1617 this.textNode = DOM.cerateText();
\r
1618 this.elmWrap.appendChild( this.textNode );
\r
1620 this.textNode.data = content;
\r
1622 if( this.textNode ){
\r
1623 DOM.correct( this.textNode );
\r
1624 delete this.textNode;
\r
1625 delete this.contentWidth;
\r
1626 delete this.conetntHeight;
\r
1627 delete this.scrollWidth;
\r
1628 delete this.scrollHeight;
\r
1632 if( this.elmWrap && content === null && ( !style || style.hasPaint === false ) ){
\r
1633 this.__parent.removeDisplayElement( this );
\r
1634 DOM.correct( this.elmWrap );
\r
1635 delete this.contentWidth;
\r
1636 delete this.conetntHeight;
\r
1639 commitStyle : function(){
\r
1641 if( this.elmWrap ){
\r
1642 css = this.__style ? this.__style.cssText( this ) : '';
\r
1643 if( this.contentWidth !== AUTO ) css += 'width:' + this.contentWidth + 'px';
\r
1644 if( this.contentHeight !== AUTO ) css += 'height:' + this.contentHeight + 'px';
\r
1645 this.elmWrap.style.cssText = css;
\r
1649 * 親の サイズを元に自身のサイズを計算していく
\r
1651 preMesure : function( allowW, allowH ){
\r
1652 var style = this.__style,
\r
1653 styles, calc, box, min, max,
\r
1654 contentW, contentH, allowSize, boxMinus,
\r
1655 paddingT, paddingR, paddingB, paddingL,
\r
1656 borderT, borderR, borderB, borderL,
\r
1657 marginT, marginR, marginB, marginL;
\r
1660 styles = style.data;
\r
1661 calc = BasicLayoutManager.calcValue;
\r
1662 box = styles[ ATTRS.sizing ];
\r
1665 // 自身が ltrtWidth の場合 親が AUTO ではない
\r
1666 // 自身が ltrtWidth でない場合自身が AUTO はなくかつ親 が AUTO の場合自身は % でない
\r
1667 if( style.ltrtWidth ? allowW !== AUTO : !style.autoWidth && ( allowW !== AUTO || !style.prctWidth ) ){
\r
1668 if( style.ltrtWidth ){
\r
1669 contentW = allowW; // - calc( styles[ ATTRS.left ], allowW ) - calc( styles[ ATTRS.right ], allowW );
\r
1671 contentW = BasicLayoutManager.finalValue( styles[ ATTRS.width ], styles[ ATTRS.minWidth ], styles[ ATTRS.maxWidth ], allowW );
\r
1673 paddingR = calc( styles[ ATTRS.padding + 1 ], allowW );
\r
1674 paddingL = calc( styles[ ATTRS.padding + 3 ], allowW );
\r
1675 borderR = styles[ ATTRS.border + 1 ];
\r
1676 borderL = styles[ ATTRS.margin + 3 ];
\r
1677 marginR = calc( styles[ ATTRS.margin + 1 ], allowW );
\r
1678 marginL = calc( styles[ ATTRS.margin + 3 ], allowW );
\r
1679 this.boxWidth = contentW;
\r
1682 case 3 : // margin-box
\r
1683 boxMinus = - marginR - marginL;
\r
1684 case 2 : // border-box
\r
1685 boxMinus -= borderR + borderL;
\r
1686 case 1 : // padding-box
\r
1687 boxMinus -= paddingR + paddingL;
\r
1688 // case 0 : // content-box
\r
1690 this.contentL = marginL + borderL + paddingL;
\r
1691 this.contentR = marginR + borderR + paddingR;
\r
1692 this.contentWidth = contentW + boxMinus;
\r
1693 this.boxSizingOffsetLR = boxMinus;
\r
1695 this.boxWidth = this.contentWidth = AUTO;
\r
1696 min = styles[ ATTRS.minWidth ];
\r
1697 max = styles[ ATTRS.maxWidth ];
\r
1698 this.minContentWidth = 1 <= min ? min : 0;
\r
1699 this.maxContentWidth = 1 <= max ? max : AUTO;
\r
1700 delete this.boxSizingOffsetLR;
\r
1704 if( style.tpbtHeight ? allowH !== AUTO : !style.autoHeight && ( allowH !== AUTO || !style.prctHeight ) ){
\r
1705 if( style.tpbtHeight ){
\r
1706 contentH = allowH; // - calc( styles[ ATTRS.top ], allowH ) - calc( styles[ ATTRS.bottom ], allowH );
\r
1708 contentH = BasicLayoutManager.finalValue( styles[ ATTRS.height ], styles[ ATTRS.minHeight ], styles[ ATTRS.maxHeight ], allowH );
\r
1710 allowSize = styles[ ATTRS.pageBox ] === true ? allowH : allowW;
\r
1711 paddingT = calc( styles[ ATTRS.padding + 0 ], allowSize );// paddingTRBL の % 指定は 最大幅に対して TB でも幅に対して
\r
1712 paddingB = calc( styles[ ATTRS.padding + 2 ], allowSize );
\r
1713 borderT = styles[ ATTRS.border + 0 ];
\r
1714 borderB = styles[ ATTRS.border + 2 ];
\r
1715 marginT = calc( styles[ ATTRS.margin + 0 ], allowSize );// marginTRBL の % 指定は 最大幅に対して TB でも幅に対して
\r
1716 marginB = calc( styles[ ATTRS.margin + 2 ], allowSize );
\r
1717 this.boxHeight = contentH;
\r
1720 case 3 : // margin-box
\r
1721 boxMinus = - marginT - marginR;
\r
1722 case 2 : // border-box
\r
1723 boxMinus -= borderT + borderR;
\r
1724 case 1 : // padding-box
\r
1725 boxMinus -= paddingT + paddingR;
\r
1726 // case 0 : // content-box
\r
1728 this.contentT = marginT + borderT + paddingT;
\r
1729 this.conetntB = marginB + borderB + paddingB;
\r
1730 this.contentHeight = contentH + boxMinus;
\r
1731 this.boxSizingOffsetTB = boxMinus;
\r
1733 this.boxHeight = this.contentHeight = AUTO;
\r
1734 min = styles[ ATTRS.minHeight ];
\r
1735 max = styles[ ATTRS.maxHeight ];
\r
1736 this.minContentHeight = 1 <= min ? min : 0;
\r
1737 this.maxContentHeight = 1 <= max ? max : AUTO;
\r
1738 delete this.boxSizingOffsetTB;
\r
1741 this.boxWidth = this.contentWidth = allowW;
\r
1742 this.boxHeight = this.contentHeight = allowH;
\r
1743 delete this.minContentHeight;
\r
1744 delete this.maxContentHeight;
\r
1745 delete this.contentL;
\r
1746 delete this.contentT;
\r
1747 delete this.contentR;
\r
1748 delete this.contentB;
\r
1752 * 自身のコンテンツサイズを元に AUTO な width, height を確定していく
\r
1754 postMesure : function(){
\r
1755 var style = this.__style,
\r
1756 styles, calc, box,
\r
1757 contentW, contentH, w, h
\r
1758 contentSize, contentPlus;
\r
1760 styles = style.data;
\r
1761 calc = BasicLayoutManager.advancedCalcValue;
\r
1762 contentW = this.contentWidth;
\r
1763 box = styles[ ATTRS.sizing ];
\r
1766 if( this.boxWidth === AUTO ){
\r
1767 paddingR = calc( styles[ ATTRS.padding + 1 ], contentW );
\r
1768 paddingL = calc( styles[ ATTRS.padding + 3 ], contentW );
\r
1769 borderR = styles[ ATTRS.border + 1 ];
\r
1770 borderL = styles[ ATTRS.border + 3 ];
\r
1771 marginR = calc( styles[ ATTRS.margin + 1 ], contentW );
\r
1772 marginL = calc( styles[ ATTRS.margin + 3 ], contentW );
\r
1775 case 3 : // margin-box
\r
1776 contentPlus = ( marginR + marginL );
\r
1777 case 2 : // border-box
\r
1778 contentPlus += ( borderR + borderL );
\r
1779 case 1 : // padding-box
\r
1780 contentPlus += ( paddingR + paddingL );
\r
1781 // case 0 : // content-box
\r
1783 this.contentWidth = contentW;
\r
1784 contentW += contentPlus;
\r
1785 if( !style.ltrtWidth ){
\r
1786 min = styles[ ATTRS.minWidth ];
\r
1787 max = styles[ ATTRS.maxWidth ];
\r
1788 if( contentW < min && 1 <= min && contentPlus < min ){
\r
1789 this.contentWidth = min - contentPlus;
\r
1791 if( max < contentW && 1 <= max && contentPlus < max ){
\r
1792 this.contentWidth = max - contentPlus;
\r
1795 this.contentL = marginL + borderL + paddingL;
\r
1796 this.contentR = marginR + borderR + paddingR;
\r
1797 this.boxWidth = this.contentWidth + this.contentL + this.contentR;
\r
1800 if( this.boxHeight === AUTO ){
\r
1801 contentH = this.contentHeight;
\r
1802 contentSize = styles[ ATTRS.pageBox ] === true ? contentH : contentW;
\r
1803 paddingT = calc( styles[ ATTRS.padding + 0 ], contentSize );// paddingTRBL の % 指定は 最大幅に対して TB でも幅に対して
\r
1804 paddingB = calc( styles[ ATTRS.padding + 2 ], contentSize );
\r
1805 borderT = styles[ ATTRS.border + 0 ];
\r
1806 borderB = styles[ ATTRS.border + 2 ];
\r
1807 marginT = calc( styles[ ATTRS.margin + 0 ], contentSize );// marginTRBL の % 指定は 最大幅に対して TB でも幅に対して
\r
1808 marginB = calc( styles[ ATTRS.margin + 2 ], contentSize );
\r
1811 case 3 : // margin-box
\r
1812 contentPlus = ( marginT + marginB );
\r
1813 case 2 : // border-box
\r
1814 contentPlus += ( borderT + borderB );
\r
1815 case 1 : // padding-box
\r
1816 contentPlus += ( paddingT + paddingB );
\r
1817 // case 0 : // content-box
\r
1819 this.contentHeight = contentH;
\r
1820 contentH += contentPlus;
\r
1821 if( !style.tpbtHeight ){
\r
1822 min = styles[ ATTRS.minHeight ];
\r
1823 max = styles[ ATTRS.maxHeight ];
\r
1824 if( contentH < min && 1 <= min && contentPlus < min ){
\r
1825 this.contentHeight = min - contentPlus;
\r
1827 if( max < contentH && 1 <= max && contentPlus < max ){
\r
1828 this.contentHeight = max - contentPlus;
\r
1831 this.contentT = marginT + borderT + paddingT;
\r
1832 this.contentB = marginB + borderB + paddingB;
\r
1833 this.boxHeight = this.contentHeight + this.contentT + this.contentB;
\r
1836 this.boxWidth = this.contentWidth;
\r
1837 this.boxHeight = this.contentHeight;
\r
1838 delete this.minContentHeight;
\r
1839 delete this.maxContentHeight;
\r
1840 delete this.contentL;
\r
1841 delete this.contentT;
\r
1842 delete this.contentR;
\r
1843 delete this.contentB;
\r
1846 addDisplayElement : function( nodeData ){
\r
1849 removeDisplayElement : function( nodeData ){
\r
1851 DOM.correct( nodeData.elmWrap );
\r
1852 delete nodeData.elmWrap;
\r
1853 delete nodeData.textNode;
\r
1854 delete nodeData.contentWidth;
\r
1855 delete nodeData.conetntHeight;
\r
1856 delete nodeData.currentWidth;
\r
1857 delete nodeData.currentHeight;
\r
1861 var Node = Class.create(
\r
1863 Class.POOL_OBJECT,
\r
1866 Constructor : function( root, parent ){
\r
1867 Node.newPrivateData( this, LayoutBox.getPrivateData( root ), parent ? LayoutBox.getPrivateData( parent ) : undefined, this );
\r
1869 content : function( v ){
\r
1870 return Node.getPrivateData( this ).content( v );
\r
1872 style : function( v ){
\r
1873 return Node.getPrivateData( this ).paint( v );
\r
1875 remove : function(){
\r
1876 Node.getPrivateData( this ).remove();
\r
1878 nodeIndex : function( v ){
\r
1879 return Node.getPrivateData( this ).nodeIndex( v );
\r
1881 displayIndex : function(){
\r
1884 disabled : function( v ){
\r
1885 return Node.getPrivateData( this ).disabled( v );
\r
1887 cursor : function( v ){
\r
1888 return Node.getPrivateData( this ).cursor( v );
\r
1890 getX : function(){
\r
1893 getY : function(){
\r
1896 getWidth : function(){
\r
1899 getHeight : function(){
\r
1902 getAbsolutePositionX : function(){
\r
1903 return Node.getPrivateData( this ).getAbsolutePositionX();
\r
1905 getAbsolutePositionY : function(){
\r
1906 return Node.getPrivateData( this ).getAbsolutePositionY();
\r
1908 scrollTo : function( x, y ){
\r
1909 Node.getPrivateData( this ).scrollTo( x, y );
\r
1911 scrollX : function( v ){
\r
1912 return Node.getPrivateData( this ).scrollX( v );
\r
1914 scrollY : function( v ){
\r
1915 return Node.getPrivateData( this ).scrollY( v );
\r
1917 addEventListener : function( type, handler, opt_thisObject ){
\r
1918 Node.getPrivateData( this ).addEventListener( type, handler, opt_thisObject );
\r
1920 removeEventListener : function( type, handler ){
\r
1921 Node.getPrivateData( this ).removeEventListener( type, handler );
\r
1926 var LayoutBoxPrivate = NodePrivate.inherits(
\r
1927 'LayoutBoxPrivate',
\r
1928 Class.POOL_OBJECT | Class.SUPER_ACCESS,
\r
1930 Constructor : function( layoutManager, _root, _parent ){
\r
1931 this.layoutManager = layoutManager;
\r
1932 this._root = _root;
\r
1933 this.paintList = [];
\r
1934 if( _parent ) this._parent = _parent;
\r
1936 mesure : function(){
\r
1937 this.layoutManager.reflow( this );
\r
1939 paintReserve : function( nodeData ){
\r
1940 var list = this.paintList;
\r
1941 if( Util.getIndex( list, nodeData ) === -1 ) list[ list.length - 1 ] = nodeData;
\r
1943 paintRelease : function( nodeData ){
\r
1944 var list = this.paintList,
\r
1945 i = Util.getIndex( list, nodeData );
\r
1946 i === -1 && list.splice( i, 1 );
\r
1948 paint : function(){
\r
1949 var list = this.paintList, i = list.length;
\r
1951 list[ --i ].paint();
\r
1957 var LayoutBox = Node.inherits(
\r
1959 Class.POOL_OBJECT,
\r
1962 Constructor : function( layoutManager, root, parent ){
\r
1963 LayoutBox.newPrivateData( this, layoutManager, LayoutBox.getPrivateData( root ), parent ? LayoutBox.getPrivateData( parent ) : undefined );
\r
1965 layoutManager : function( v ){
\r
1968 createLayoutBox : function(){
\r
1971 createContentBox : function(){
\r
1977 var RootNode = Node.inherits(
\r
1979 Class.POOL_OBJECT,
\r
1982 Constructor : function(){
\r
1983 RootNode.newPrivateData( this, BasicLayoutManager );
\r
1988 })( window, document );