1 var _AbstractUINode = X.EventDispatcher.inherits(
\r
3 X.Class.ABSTRACT | X.Class.PRIVATE_DATA,
\r
6 dirty : X.UI.Dirty.CLEAN,
\r
15 supportAttrs : X.UI.Attr.Support,
\r
16 attrClass : X.UI.AttrClass,
\r
18 unverifiedAttrs : null,
\r
21 pointerDisabled : false,
\r
22 hoverClassName : null,
\r
25 reserveEvents : null,
\r
42 boxWidth : X.UI.Attr.AUTO,
\r
44 maxBoxWidth : X.UI.Attr.AUTO,
\r
45 boxHeight : X.UI.Attr.AUTO,
\r
47 maxBoxHeight : X.UI.Attr.AUTO,
\r
52 boxSizingOffsetLR : 0,
\r
53 boxSizingOffsetTB : 0,
\r
54 contentWidth : X.UI.Attr.AUTO,
\r
55 minContentWidth : 0,
\r
56 maxContentWidth : X.UI.Attr.AUTO,
\r
57 lastContentWidth : -1,
\r
58 contentHeight : X.UI.Attr.AUTO,
\r
59 minContentHeight : 0,
\r
60 maxContentHeight : X.UI.Attr.AUTO,
\r
61 lastContentHeight : -1,
\r
63 constraintW : false,
\r
64 constraintH : false,
\r
67 percentWidth : false,
\r
68 percentHeight : false,
\r
69 // :hover, :focus, :disabled
\r
71 initialize : function( root, rootData, parent, parentData ){
\r
72 var events = this.reserveEvents,
\r
76 this.rootData = rootData;
\r
77 this.hoverList = rootData.hoverList;
\r
78 this.parent = parent;
\r
79 this.parentData = parentData;
\r
80 //this.xnode = X.Dom.Node.create( 'div' );
\r
83 this.dispatch( { type : X.UI.Event.INIT } );
\r
85 // html 要素が親に追加されるまで控えていたイベントの登録
\r
86 if( events && ( l = events.length ) ){
\r
87 for( i = 0; i < l; ++i ){
\r
88 this.listen.apply( this, events[ i ] );
\r
91 delete this.reserveEvents;
\r
95 addToParent : function( parentElement ){
\r
96 parentElement && parentElement.append( this.xnode );
\r
99 this.dispatch( { type : X.UI.Event.ADDED } );
\r
102 creationComplete : function(){
\r
104 this.User.dispatch( { type : X.UI.Event.CREATION_COMPLETE } );
\r
108 * _UINode への setAttr の他、attrClass.prototype への setAttr にも対応する
\r
109 * 親要素が変化した場合、unverifiedAttrs を元に attrObject を再設定.
\r
111 setAttr : function( name, def, v ){
\r
112 var attrs = X.UI.attrClassProto || this.attrObject,
\r
113 propID = def.No || def[ 5 ],
\r
114 defaultVal = X.UI.attrClassProto ? attrs[ propID ] : this.attrClass.prototype[ propID ], // def[ 0 ],
\r
115 currentVal = attrs ? attrs[ propID ] : defaultVal,
\r
120 length = !!( type & X.UI.Attr.Type.LENGTH ),
\r
121 minusLen = !!( type & X.UI.Attr.Type.MINUS_LENGTH ),
\r
122 percent = !!( type & X.UI.Attr.Type.PERCENT ),
\r
123 minusPct = !!( type & X.UI.Attr.Type.MINUS_PERCENT ),
\r
124 numerical = !!( type & X.UI.Attr.Type.NUMERICAL ),
\r
125 auto = !!( type & X.UI.Attr.Type.AUTO ),
\r
126 color = !!( type & X.UI.Attr.Type.COLOR ),
\r
127 url = !!( type & X.UI.Attr.Type.URL ),
\r
128 fontName = !!( type & X.UI.Attr.Type.FONT_NAME ),
\r
129 flag = !!( type & X.UI.Attr.Type.BOOLEAN ),
\r
130 combi = !!( type & X.UI.Attr.Type.COMBI ),
\r
131 quartet = !!( type & X.UI.Attr.Type.QUARTET ),
\r
132 _v, i, l, nodes, root, roots;
\r
134 if( X.Type.isString( v ) ){
\r
135 //v = v.toLowercase();
\r
136 if( url || fontName ){
\r
139 if( auto && v === 'auto' ){
\r
140 v = X.UI.Attr.AUTO;
\r
142 if( list && ( _v = list[ v ] ) ){
\r
146 if( ( percent || minusPct ) && v.lastIndexOf( '%' ) !== -1 && isFinite( _v = parseFloat( v ) ) && v === _v + '%' ){
\r
149 if( ( length || minusLen ) && v.lastIndexOf( 'em' ) !== -1 && isFinite( _v = parseFloat( v ) ) && v === _v + 'em' ){
\r
152 if( v.indexOf( ' ' ) !== -1 ){
\r
153 v = v.split( ' ' );
\r
155 if( color && X.Type.isNumber( _v = X.Dom.Style.parseColor( v ) ) ){
\r
163 if( ( quartet || combi ) && !X.Type.isArray( v ) ){
\r
167 if( X.Type.isNumber( v ) ){
\r
169 ( length && ( 0 <= v ) ) ||
\r
170 ( minusLen && ( v <= 0 ) ) ||
\r
171 ( percent && 0 <= v && v <= 1 ) ||
\r
172 ( minusPct && -1 <= v && v < 0 ) ||
\r
173 ( numerical && 0 <= v ) ||
\r
174 ( auto && v === X.UI.Attr.AUTO ) ||
\r
175 ( color && 0 <= v && v <= 0xFFFFFF ) ||
\r
176 ( list && list[ v ] )
\r
184 if( X.Type.isBoolean( v ) && !flag ){
\r
187 if( X.Type.isArray( v ) ){
\r
188 if( v.length <= 4 && quartet ){
\r
189 type &= ~X.UI.Attr.Type.QUARTET;
\r
190 switch( v.length ){
\r
192 this.setAttr( false, [ defaultVal, user, dirty, type, list, propID ], v[ 0 ] );
\r
193 this.setAttr( false, [ defaultVal, user, dirty, type, list, ++propID ], v[ 0 ] );
\r
194 this.setAttr( false, [ defaultVal, user, dirty, type, list, ++propID ], v[ 0 ] );
\r
195 this.setAttr( false, [ defaultVal, user, dirty, type, list, ++propID ], v[ 0 ] );
\r
198 this.setAttr( false, [ defaultVal, user, dirty, type, list, propID ], v[ 0 ] );
\r
199 this.setAttr( false, [ defaultVal, user, dirty, type, list, ++propID ], v[ 1 ] );
\r
200 this.setAttr( false, [ defaultVal, user, dirty, type, list, ++propID ], v[ 0 ] );
\r
201 this.setAttr( false, [ defaultVal, user, dirty, type, list, ++propID ], v[ 1 ] );
\r
204 this.setAttr( false, [ defaultVal, user, dirty, type, list, propID ], v[ 0 ] );
\r
205 this.setAttr( false, [ defaultVal, user, dirty, type, list, ++propID ], v[ 1 ] );
\r
206 this.setAttr( false, [ defaultVal, user, dirty, type, list, ++propID ], v[ 2 ] );
\r
207 this.setAttr( false, [ defaultVal, user, dirty, type, list, ++propID ], v[ 1 ] );
\r
210 this.setAttr( false, [ defaultVal, user, dirty, type, list, propID ], v[ 0 ] );
\r
211 this.setAttr( false, [ defaultVal, user, dirty, type, list, ++propID ], v[ 1 ] );
\r
212 this.setAttr( false, [ defaultVal, user, dirty, type, list, ++propID ], v[ 2 ] );
\r
213 this.setAttr( false, [ defaultVal, user, dirty, type, list, ++propID ], v[ 3 ] );
\r
217 if( v.length === 2 && combi ){
\r
218 type &= ~X.UI.Attr.Type.COMBI;
\r
219 this.setAttr( false, [ defaultVal, user, dirty, type, list, propID ], v[ 0 ] );
\r
220 this.setAttr( false, [ defaultVal, user, dirty, type, list, ++propID ], v[ 1 ] );
\r
226 if( !X.UI.attrClassProto && user === X.UI.Attr.USER.XNODE && this.xnode ){
\r
227 this.xnode.css( X.UI.Attr.Rename[ name ] || name, this._createCssText( name ) );
\r
228 //console.log( ( X.UI.Attr.Rename[ name ] || name ) + ' ' + this._createCssText( name ) + ' ' + propID + ' ' + attrs[ propID ] );
\r
233 if( !v && v !== 0 ) v = defaultVal;
\r
235 if( X.UI.attrClassProto ){
\r
236 attrs[ propID ] = v;
\r
240 if( currentVal !== v ){
\r
242 case X.UI.Attr.Support.left.No :
\r
243 this.constraintW = attrs[ X.UI.Attr.Support.right.No ] !== null;
\r
245 case X.UI.Attr.Support.right.No :
\r
246 this.constraintW = attrs[ X.UI.Attr.Support.left.No ] !== null;
\r
248 case X.UI.Attr.Support.top.No :
\r
249 this.constraintH = attrs[ X.UI.Attr.Support.bottom.No ] !== null;
\r
251 case X.UI.Attr.Support.bottom.No :
\r
252 this.constraintH = attrs[ X.UI.Attr.Support.top.No ] !== null;
\r
254 case X.UI.Attr.Support.width.No :
\r
255 this.autoWidth = v === X.UI.Attr.AUTO;
\r
256 this.percentWidth = X.Type.isString( v );
\r
258 case X.UI.Attr.Support.height.No :
\r
259 this.autoHeight = v === X.UI.Attr.AUTO;
\r
260 this.percentHeight = X.Type.isString( v );
\r
264 if( defaultVal === v ){
\r
265 if( attrs ) delete attrs[ propID ];
\r
267 if( !attrs ) attrs = this.attrObject = new this.attrClass;
\r
268 attrs[ propID ] = v;
\r
271 if( name && user === X.UI.Attr.USER.XNODE && this.xnode ){
\r
272 this.xnode.css( X.UI.Attr.Rename[ name ] || name, this._createCssText( name ) );
\r
273 //console.log( ( X.UI.Attr.Rename[ name ] || name ) + ' ' + this._createCssText( name ) + ' ' + propID + ' ' + attrs[ propID ] );
\r
275 if( this.dirty < dirty ) this.dirty = dirty;
\r
279 _createCssText : function( name ){
\r
280 var attrs = this.attrObject || this.attrClass.prototype || X.UI.AttrClass,
\r
281 def = this.supportAttrs[ name ],
\r
283 v = attrs[ def.No ],
\r
286 flag = !!( type & X.UI.Attr.Type.BOOLEAN ),
\r
287 combi = !!( type & X.UI.Attr.Type.COMBI ),
\r
288 quartet = !!( type & X.UI.Attr.Type.QUARTET );
\r
291 if( attrs[ no + 1 ] === attrs[ no + 3 ] ){
\r
292 if( v === attrs[ no + 2 ] ){
\r
293 if( v === attrs[ no + 1 ] ){
\r
294 return this._createCssValue( v, type, list );
\r
297 this._createCssValue( v, type, list ),
\r
298 this._createCssValue( attrs[ no + 1 ], type, list )
\r
302 this._createCssValue( v, type, list ),
\r
303 this._createCssValue( attrs[ no + 1 ], type, list ),
\r
304 this._createCssValue( attrs[ no + 2 ], type, list )
\r
308 this._createCssValue( v, type, list ),
\r
309 this._createCssValue( attrs[ no + 1 ], type, list ),
\r
310 this._createCssValue( attrs[ no + 2 ], type, list ),
\r
311 this._createCssValue( attrs[ no + 3 ], type, list )
\r
316 this._createCssValue( v, type, list ),
\r
317 this._createCssValue( attrs[ no + 1 ], type, list )
\r
321 return v ? list : 'normal'; //
\r
323 return this._createCssValue( v, type, list );
\r
326 _createCssValue : function( v, type, list ){
\r
327 var length = !!( type & X.UI.Attr.Type.LENGTH ),
\r
328 minusLen = !!( type & X.UI.Attr.Type.MINUS_LENGTH ),
\r
329 percent = !!( type & X.UI.Attr.Type.PERCENT ),
\r
330 minusPct = !!( type & X.UI.Attr.Type.MINUS_PERCENT ),
\r
331 numerical = !!( type & X.UI.Attr.Type.NUMERICAL ),
\r
332 auto = !!( type & X.UI.Attr.Type.AUTO ),
\r
333 color = !!( type & X.UI.Attr.Type.COLOR ),
\r
334 url = !!( type & X.UI.Attr.Type.URL ),
\r
335 fontName = !!( type & X.UI.Attr.Type.FONT_NAME );
\r
337 if( X.Type.isNumber( v ) ){
\r
338 if( auto && v === X.UI.Attr.AUTO ) return 'auto';
\r
339 if( length || minusLen ) return v + 'em';
\r
340 if( numerical ) return v;
\r
341 if( list && list[ v ] ) return list[ v ];
\r
343 if( v < 0x100000 ){
\r
344 v = '00000' + v.toString( 16 );
\r
345 return '#' + v.substr( v.length - 6 );
\r
347 return '#' + v.toString( 16 );
\r
350 if( X.Type.isString( v ) ){
\r
351 if( percent || minusPct || url || fontName ) return v;
\r
355 getAttr : function( name ){
\r
356 var attrs = this.attrObject || this.attrClass.prototype || X.UI.AttrClass,
\r
357 support = this.supportAttrs[ name ],
\r
359 if( !support ) return;
\r
361 if( name.indexOf( 'border' ) === 0 ){
\r
362 name = name.substr( 6 );
\r
363 return [ this.getAttr( 'borderTop' + name ), this.getAttr( 'borderRight' + name ), this.getAttr( 'borderBottom' + name ), this.getAttr( 'borderLeft' + name ) ];
\r
366 type = support[ 3 ];
\r
368 if( type & X.UI.Attr.Type.QUARTET ){
\r
369 return [ this.getAttr( name + 'Top' ), this.getAttr( name + 'Right' ), this.getAttr( name + 'Bottom' ), this.getAttr( name + 'Left' ) ];
\r
371 if( type & X.UI.Attr.Type.COMBI ) return [ v, data[ ++propID ] ];
\r
373 v = attrs[ support.No ];
\r
374 if( type & X.UI.Attr.Type.AUTO && v === X.UI.Attr.AUTO ) return 'auto';
\r
376 list = support[ 4 ];
\r
377 if( list ) return list[ v ];
\r
379 if( type & X.UI.Attr.Type.COLOR && X.Type.isNumber( v ) ) return v;
\r
380 if( !( type & X.UI.Attr.Type.NUMERICAL ) && X.Type.isNumber( v ) ) return v + 'em';
\r
385 getAttrWithUnit : function( prop, unit ){
\r
389 _remove : function(){
\r
390 switch( this.phase ){
\r
397 this.xnode.destroy();
\r
400 delete this.rootData;
\r
401 delete this.parent;
\r
402 delete this.parentData;
\r
411 calculate : function( isNeedsDetection, x, y, allowedW, allowedH ){
\r
412 this.preMesure( allowedW, allowedH );
\r
414 if( this.boxWidth === X.UI.Attr.AUTO || this.boxHeight === X.UI.Attr.AUTO ){
\r
419 !isNeedsDetection && this.updateLayout( x, y );
\r
423 * X.Dom.BoxModel の情報を引きながら top,left,width,height,padding,border の設定
\r
425 updateLayout : function( x, y ){
\r
429 .css( 'left', x ? x + 'em' : 0 )
\r
430 .css( 'top', y ? y + 'em' : 0 )
\r
431 .css( 'width', this.contentWidth ? _AbstractUINode.ceil( this.contentWidth ) + 'em' : 0 )
\r
432 .css( 'height', this.contentHeight ? _AbstractUINode.ceil( this.contentHeight ) + 'em' : 0 )
\r
433 .css( 'padding', this._createCssText( 'padding' ) )
\r
434 .css( 'borderWidth', this._createCssText( 'borderWidth' ) );
\r
438 * 親の サイズを元に自身のサイズを計算していく
\r
440 preMesure : function( allowedW, allowedH ){
\r
441 var attrs = this.attrObject || this.attrClass.prototype || X.UI.AttrClass,
\r
442 calc = _AbstractUINode.calcValue,
\r
443 box = attrs[ X.UI.Attr.Support.sizing.No ],
\r
445 boxL, boxT, boxR, boxB,
\r
446 contentW, contentH, boxMinus,
\r
447 paddingT, paddingR, paddingB, paddingL,
\r
448 borderT, borderR, borderB, borderL;
\r
451 // 自身が constraintW の場合 親が AUTO ではない
\r
452 // 自身が constraintW でない場合自身が AUTO はなくかつ親 が AUTO の場合 or 自身は % でない
\r
454 paddingR = calc( attrs[ X.UI.Attr.Support.padding.No + 1 ], allowedW );
\r
455 paddingL = calc( attrs[ X.UI.Attr.Support.padding.No + 3 ], allowedW );
\r
456 borderR = calc( attrs[ X.UI.Attr.Support.borderWidth.No + 1 ], allowedW );
\r
457 borderL = calc( attrs[ X.UI.Attr.Support.borderWidth.No + 3 ], allowedW );
\r
460 case 3 : // border-box
\r
461 boxMinus -= borderR + borderL;
\r
462 case 2 : // padding-box
\r
463 boxMinus -= paddingR + paddingL;
\r
464 // case 1 : // content-box
\r
466 this.contentL = borderL + paddingL;
\r
467 this.contentR = borderR + paddingR;
\r
469 if( this.constraintW ? allowedW !== X.UI.Attr.AUTO : !this.autoWidth && ( allowedW !== X.UI.Attr.AUTO || !this.percentWidth ) ){
\r
470 if( this.constraintW ){ // 制約レイアウト
\r
471 contentW = allowedW - ( boxL = calc( attrs[ X.UI.Attr.Support.left.No ], allowedW ) ) - ( boxR = calc( attrs[ X.UI.Attr.Support.right.No ], allowedW ) );
\r
473 contentW = _AbstractUINode.finalValue( attrs[ X.UI.Attr.Support.width.No ], attrs[ X.UI.Attr.Support.minWidth.No ], attrs[ X.UI.Attr.Support.maxWidth.No ], allowedW );
\r
475 this.contentWidth = contentW + boxMinus;
\r
476 this.scrollWidth = this.contentWidth + this.contentL + this.contentR;
\r
477 this.boxWidth = contentW - boxMinus + this.contentL + this.contentR;
\r
478 this.boxSizingOffsetLR = boxMinus;
\r
479 delete this.minContentWidth;
\r
480 delete this.maxContentWidth;
\r
481 delete this.minBoxWidth;
\r
482 delete this.maxBoxWidth;
\r
484 this.minContentWidth = calc( attrs[ X.UI.Attr.Support.minWidth.No ], allowedW ) + boxMinus;
\r
485 this.maxContentWidth = calc( attrs[ X.UI.Attr.Support.maxWidth.No ], allowedW ) + boxMinus;
\r
486 this.scrollWidth = this.contentWidth + this.contentL + this.contentR;
\r
487 this.minBoxWidth = this.minContentWidth - boxMinus + this.contentL + this.contentR;
\r
488 this.maxBoxWidth = this.maxContentWidth - boxMinus + this.contentL + this.contentR;
\r
489 //delete this.contentWidth;
\r
490 //delete this.scrollWidth;
\r
491 //delete this.boxWidth;
\r
492 //delete this.boxSizingOffsetLR;
\r
495 paddingT = calc( attrs[ X.UI.Attr.Support.padding.No + 0 ], allowedH );// paddingTRBL の % 指定は 最大幅に対して TB でも幅に対して
\r
496 paddingB = calc( attrs[ X.UI.Attr.Support.padding.No + 2 ], allowedH );
\r
497 borderT = calc( attrs[ X.UI.Attr.Support.borderWidth.No + 0 ], allowedH );
\r
498 borderB = calc( attrs[ X.UI.Attr.Support.borderWidth.No + 2 ], allowedH );
\r
501 case 3 : // border-box
\r
502 boxMinus -= borderT + borderB;
\r
503 case 2 : // padding-box
\r
504 boxMinus -= paddingT + paddingB;
\r
505 // case 1 : // content-box
\r
507 this.contentT = borderT + paddingT;
\r
508 this.contentB = borderB + paddingB;
\r
511 if( this.constraintH ? allowedH !== X.UI.Attr.AUTO : !this.autoHeight && ( allowedH !== X.UI.Attr.AUTO || !this.percentHeight ) ){
\r
512 if( this.constraintH ){ // 制約レイアウト
\r
513 contentH = allowedH - ( boxT = calc( attrs[ X.UI.Attr.Support.top.No ], allowedH ) ) - ( boxB = calc( attrs[ X.UI.Attr.Support.bottom.No ], allowedH ) );
\r
515 contentH = _AbstractUINode.finalValue( attrs[ X.UI.Attr.Support.height.No ], attrs[ X.UI.Attr.Support.minHeight.No ], attrs[ X.UI.Attr.Support.maxHeight.No ], allowedH );
\r
517 this.contentHeight = contentH + boxMinus;
\r
518 this.scrollHeight = this.contentHeight + this.contentT + this.contentB;
\r
519 this.boxHeight = contentH - boxMinus + this.contentT + this.contentB; // padding-box の場合 border だけ足される
\r
520 this.boxSizingOffsetTB = boxMinus;
\r
521 delete this.minContentHeight;
\r
522 delete this.maxContentHeight;
\r
523 delete this.minBoxHeight;
\r
524 delete this.maxBoxHeight;
\r
526 this.minContentHeight = calc( attrs[ X.UI.Attr.Support.minHeight.No ], allowedH ) + boxMinus;
\r
527 this.maxContentHeight = calc( attrs[ X.UI.Attr.Support.maxHeight.No ], allowedH ) + boxMinus;
\r
528 this.minBoxHeight = this.minContentHeight - boxMinus + this.contentT + this.contentB;
\r
529 this.maxBoxHeight = this.maxContentHeight - boxMinus + this.contentT + this.contentB;
\r
531 //delete this.contentHeight;
\r
532 //delete this.scrollHeight;
\r
533 //delete this.boxHeight;
\r
534 //delete this.boxSizingOffsetTB;
\r
537 if( this.parentData && this.parentData.layout.overrideAttrsForChild.left ){
\r
538 if( this.constraintW ){
\r
539 this.boxX = ( boxL || boxL === 0 ) ? boxL : calc( attrs[ X.UI.Attr.Support.left.No ], allowedW );
\r
541 if( attrs[ X.UI.Attr.Support.right.No ] === null ){
\r
542 this.boxX = ( boxL || boxL === 0 ) ? boxL : calc( attrs[ X.UI.Attr.Support.left.No ], allowedW );
\r
544 this.boxX = alllowW - this.boxWidth - ( ( boxR || boxR === 0 ) ? boxR : calc( attrs[ X.UI.Attr.Support.right.No ], allowedW ) );
\r
550 if( this.parentData && this.parentData.layout.overrideAttrsForChild.top ){
\r
551 if( this.constraintH ){
\r
552 this.boxY = ( boxT || boxT === 0 ) ? boxT : calc( attrs[ X.UI.Attr.Support.top.No ], allowedH );
\r
554 if( attrs[ X.UI.Attr.Support.bottom.No ] === null ){
\r
555 this.boxY = ( boxT || boxT === 0 ) ? boxT : calc( attrs[ X.UI.Attr.Support.top.No ], allowedH );
\r
557 this.boxY = allowedH - this.boxHeight - ( ( boxB || boxB === 0 ) ? boxB : calc( attrs[ X.UI.Attr.Support.bottom.No ], allowedH ) );
\r
565 * 描画・計測を行って、contentSize, scrollSize の決定
\r
567 mesure : function(){
\r
568 var dirty = this.dirty,
\r
571 if( dirty === X.UI.Dirty.CLEAN ){
\r
572 if( this.percentWidth || this.percentHeight ){
\r
579 case X.UI.Dirty.CONTENT : // コンテンツが変更された
\r
580 case X.UI.Dirty.FONT : // フォントサイズが変更された
\r
581 delete this.lastContentWidth;
\r
582 delete this.lastContentHeight;
\r
584 case X.UI.Dirty.LAYOUT : // レイアウトの再計算が必要
\r
586 default : // TODO レイアウト崩れに対処 パフォーマンス悪い!
\r
588 w = this.contentWidth;
\r
589 h = this.contentHeight;
\r
590 xnode = this.xnode;
\r
592 /* http://web-designs.seesaa.net/article/188400668.html
\r
593 * min-width の値が max-width の値より大きい場合は、max-width の値は min-width の値に設定される。
\r
596 * 1. contentWidth === AUTO
\r
597 * style を更新して contentWidth の決定
\r
598 * min or max に引っかかったら style 更新
\r
599 * contentHeight === AUTO の場合
\r
601 * contentHeight !== AUTO の場合 scrollHeight のみ更新
\r
602 * 2. contentHeight === AUTO かつ
\r
603 * コンテンツの高さの再取得が必要( contentWidth が最終計測時の contentWidth と一致 かつ フォント・コンテンツに変更無し の場合再取得不要)
\r
604 * style を更新して contentHeight の決定
\r
606 * 3. content のサイズがすでに決定している
\r
610 if( xnode._xnodes && xnode._xnodes.length ){
\r
611 if( w === X.UI.Attr.AUTO ){
\r
612 w = this.contentWidth = xnode.css( 'width', 'auto' ).width() / xnode._getCharSize();
\r
613 console.log( xnode.width() + ' ' + xnode._getCharSize() + ' > ' + w );
\r
615 this.scrollWidth = w + this.contentL + this.contentR;
\r
616 if( this.maxContentWidth < w - this.boxSizingOffsetLR ) this.contentWidth = this.maxContentWidth + this.boxSizingOffsetLR;
\r
617 if( w - this.boxSizingOffsetLR < this.minContentWidth ) this.contentWidth = this.minContentWidth + this.boxSizingOffsetLR;
\r
618 this.lastContentWidth = this.contentWidth;
\r
620 w !== this.contentWidth && xnode.css( 'width', _AbstractUINode.ceil( this.contentWidth ) + 'em' );
\r
622 if( h === X.UI.Attr.AUTO ){
\r
623 this.contentHeight = h = xnode.css( 'height', 'auto' ).scrollHeight() / xnode._getCharSize(); // scrollHeight() ??
\r
624 this.scrollHeight = h + this.contentT + this.contentB;
\r
625 if( this.maxContentHeight < h - this.boxSizingOffsetTB ) this.contentHeight = this.maxContentHeight + this.boxSizingOffsetTB;
\r
626 if( h - this.boxSizingOffsetTB < this.minContentHeight ) this.contentHeight = this.minContentHeight + this.boxSizingOffsetTB;
\r
628 this.scrollHeight = h + this.contentT + this.contentB;
\r
631 this.lastContentHeight = h;
\r
633 if( h === X.UI.Attr.AUTO ){
\r
634 if( w !== this.lastContentWidth ){
\r
635 xnode.css( 'width', _AbstractUINode.ceil( w ) + 'em' );
\r
637 this.lastContentWidth = w;
\r
638 this.contentHeight = h = xnode.css( 'height', 'auto' ).scrollHeight() / xnode._getCharSize();
\r
639 this.scrollWidth = w + this.contentL + this.contentR;
\r
640 this.scrollHeight = h + this.contentT + this.contentB;
\r
641 if( this.maxContentHeight < h - this.boxSizingOffsetTB ) this.contentHeight = this.maxContentHeight + this.boxSizingOffsetTB;
\r
642 if( h - this.boxSizingOffsetTB < this.minContentHeight ) this.contentHeight = this.minContentHeight + this.boxSizingOffsetTB;
\r
644 this.contentHeight = this.lastContentHeight = h =
\r
645 this.lastContentHeight === -1 ? xnode.css( 'height', 'auto' ).scrollHeight() / xnode._getCharSize() : this.lastContentHeight;
\r
646 this.scrollWidth = w + this.contentL + this.contentR;
\r
647 this.scrollHeight = h + this.contentT + this.contentB;
\r
650 if( dirty !== X.UI.Dirty.LAYOUT ){
\r
651 this.contentWidth = this.lastContentWidth = w; //xnode.width();
\r
652 this.contentHeight = this.lastContentHeight = xnode.css( 'height', 'auto' ).scrollHeight() / xnode._getCharSize();
\r
653 this.scrollWidth = this.contentWidth + this.contentL + this.contentR;
\r
654 this.scrollHeight = this.contentHeight + this.contentT + this.contentB;
\r
656 this.scrollWidth = w + this.contentL + this.contentR;
\r
657 this.scrollHeight = h + this.contentT + this.contentB;
\r
660 // コンテンツを持たないため基本のサイズは0
\r
661 if( w === X.UI.Attr.AUTO ) this.contentWidth = w = 0 < this.minContentWidth ? this.minContentWidth : 0;
\r
662 if( h === X.UI.Attr.AUTO ) this.contentHeight = h = 0 < this.minContentHeight ? this.minContentHeight : 0;
\r
663 this.scrollWidth = w + this.contentL + this.contentR;
\r
664 this.scrollHeight = h + this.contentT + this.contentB;
\r
669 //case X.UI.Dirty.PAINT : // 再描画のみ必要
\r
674 * 自身の contentWidth, contentHeight を元に AUTO な width, height を確定していく
\r
676 postMesure : function(){
\r
677 var attrs = this.attrObject || this.attrClass.prototype || X.UI.AttrClass,
\r
678 calc = _AbstractUINode.calcValue,
\r
679 box = attrs[ X.UI.Attr.Support.sizing.No ],
\r
680 contentW, contentH,
\r
682 paddingT, paddingR, paddingB, paddingL,
\r
683 borderT, borderR, borderB, borderL,
\r
687 if( this.boxWidth === X.UI.Attr.AUTO ){
\r
688 contentW = this.contentWidth;
\r
689 paddingR = calc( attrs[ X.UI.Attr.Support.padding.No + 1 ], contentW );
\r
690 paddingL = calc( attrs[ X.UI.Attr.Support.padding.No + 3 ], contentW );
\r
691 borderR = calc( attrs[ X.UI.Attr.Support.borderWidth.No + 1 ], contentW );
\r
692 borderL = calc( attrs[ X.UI.Attr.Support.borderWidth.No + 3 ], contentW );
\r
695 case 3 : // border-box
\r
696 contentPlus = borderR + borderL;
\r
697 case 2 : // padding-box
\r
698 contentPlus += paddingR + paddingL;
\r
699 // case 1 : // content-box
\r
702 if( !this.constraintW ){
\r
703 contentW += contentPlus;
\r
704 min = calc( attrs[ X.UI.Attr.Support.minWidth.No ], contentW );
\r
705 max = calc( attrs[ X.UI.Attr.Support.maxWidth.No ], contentW );
\r
706 if( contentW < min && contentPlus < min ){
\r
707 this.contentWidth = min - contentPlus;
\r
709 if( max < contentW && contentPlus < max ){
\r
710 this.contentWidth = max - contentPlus;
\r
713 this.contentL = borderL + paddingL;
\r
714 this.contentR = borderR + paddingR;
\r
715 this.boxWidth = this.contentWidth + this.contentL + this.contentR;
\r
718 if( this.boxHeight === X.UI.Attr.AUTO ){
\r
719 contentH = this.contentHeight;
\r
720 paddingT = calc( attrs[ X.UI.Attr.Support.padding.No + 0 ], contentH );// paddingTRBL の % 指定は 最大幅に対して TB でも幅に対して
\r
721 paddingB = calc( attrs[ X.UI.Attr.Support.padding.No + 2 ], contentH );
\r
722 borderT = calc( attrs[ X.UI.Attr.Support.borderWidth.No + 0 ], contentH );
\r
723 borderB = calc( attrs[ X.UI.Attr.Support.borderWidth.No + 2 ], contentH );
\r
726 case 3 : // border-box
\r
727 contentPlus = borderT + borderB;
\r
728 case 2 : // padding-box
\r
729 contentPlus += paddingT + paddingB;
\r
730 // case 1 : // content-box
\r
732 if( !this.constraintH ){
\r
733 contentH += contentPlus;
\r
734 min = calc( attrs[ X.UI.Attr.Support.minHeight.No ], contentH );
\r
735 max = calc( attrs[ X.UI.Attr.Support.maxHeight.No ], contentH );
\r
736 if( contentH < min && contentPlus < min ){
\r
737 this.contentHeight = min - contentPlus;
\r
739 if( max < contentH && contentPlus < max ){
\r
740 this.contentHeight = max - contentPlus;
\r
743 this.contentT = borderT + paddingT;
\r
744 this.contentB = borderB + paddingB;
\r
745 this.boxHeight = this.contentHeight + this.contentT + this.contentB;
\r
749 capcher : function( x, y ){
\r
750 if( this.pointerDisabled ) return false;
\r
755 if( 0 <= x && x < this.boxWidth && 0 <= y && y < this.boxHeight ){
\r
756 !this.hovering && ( this.hoverList[ this.hoverList.length ] = this );
\r
757 this.rootData.targetNodeData = this;
\r
763 listen : function( type, arg1, arg2, arg3 ){
\r
764 var root, events, counter;
\r
765 if( X.UI.Event._START_POINTER <= type && type <= X.UI.Event._END_POINTER ){
\r
766 if( this.phase < 3 ){
\r
767 if( !( events = this.reserveEvents ) ) this.reserveEvents = events = [];
\r
768 events[ events.length ] = [ type, arg1, arg2, arg3 ];
\r
771 if( X.UI.Event._START_XUI_EVENT < type && type < X.UI.Event._END_XUI_EVENT ){
\r
772 if( !this.gesture ){
\r
773 this.gesture = new X.UI.Gesture( this.root, this, type );
\r
775 this.gesture.listen( type );
\r
778 root = this.rootData;
\r
779 counter = root.eventCounter;
\r
780 if( counter[ type ] ){
\r
783 counter[ type ] = 1;
\r
784 root.xnodeInteractiveLayer.listen( X.UI.Event.IdToName[ type ], eventRellay );
\r
788 if( typeof arg1 === 'function' ){
\r
789 return X.EventDispatcher.prototype.listen.apply( this, [ type, this.User, arg1, arg2 ] );
\r
791 return X.EventDispatcher.prototype.listen.apply( this, [ type, arg1 || this.User, arg2 || arg1, arg3 || arg2 ] );
\r
793 unlisten : function( type, arg1, arg2, arg3 ){
\r
794 var root, events, i, ev, counter;
\r
795 if( X.UI.Event._START_POINTER <= type && type <= X.UI.Event._END_POINTER ){
\r
796 if( this.phase < 3 ){
\r
797 if( !( events = this.reserveEvents ) ) return this;
\r
798 for( i = events.length; i; ){
\r
799 ev = events[ --i ];
\r
800 if( ev[ 0 ] === type && ev[ 1 ] === arg1 && ev[ 2 ] === arg2 ){
\r
801 events.split( i, 1 );
\r
808 if( X.UI.Event._START_XUI_EVENT < type && type < X.UI.Event._END_XUI_EVENT ){
\r
809 this.gesture && this.gesture.unlisten( type );
\r
811 root = this.rootData;
\r
812 counter = root.eventCounter;
\r
813 if( !counter[ type ] ) return this;
\r
815 if( counter[ type ] === 0 ){
\r
816 root.xnodeInteractiveLayer.unlisten( X.UI.Event.IdToName[ type ], eventRellay );
\r
817 delete counter[ type ];
\r
821 if( typeof arg1 === 'function' ){
\r
822 return X.EventDispatcher.prototype.unlisten.apply( this, [ type, this.User, arg1, arg2 ] );
\r
824 return X.EventDispatcher.prototype.unlisten.apply( this, [ type, arg1 || this.User, arg2 || arg1, arg3 || arg2 ] );
\r
827 dispatch : function( e ){
\r
828 var xve = X.UI.Event,
\r
829 ret = X.EventDispatcher.prototype.dispatch.call( this, e ),
\r
831 if( ret & X.Callback.MONOPOLY && !this.hitChildData && ( xve._POINTER_MOVE === type || xve._MOUSE_MOVE === type || xve.FILE_DRAG === type ) ){
\r
832 this.rootData.monopolyNodeData = this;
\r
835 this.rootData.monopolyNodeData = null;
\r
836 if( xve._START_BUBLEUP < type && this.parentData && ret & X.Callback.STOP_PROPAGATION === 0 && ret & X.Callback.STOP_NOW === 0 ) return this.parentData.dispatch( e );
\r
843 _AbstractUINode.calcValue = function( styleValue, srcValue ){
\r
847 if( X.Type.isString( styleValue ) ){
\r
848 return srcValue * parseFloat( styleValue ) / 100;
\r
850 if( !X.Type.isNumber( styleValue ) ) return 0;
\r
854 _AbstractUINode.finalValue = function( styleValue, styleMin, styleMax, srcValue ){
\r
855 var calc = _AbstractUINode.calcValue,
\r
856 v = calc( styleValue, srcValue ),
\r
857 min = calc( styleMin, srcValue ),
\r
858 max = calc( styleMax, srcValue );
\r
859 return v <= min ? min : max <= v ? max : v;
\r
861 _AbstractUINode.ceil = function( v ){
\r
863 return ( v * 10 + 0.999 | 0 ) / 10;
\r
865 return ( -v * 10 + 0.999 | 0 ) / -10;
\r
868 var AbstractUINode = X.Class.create(
\r
870 X.Class.ABSTRACT | X.Class.SUPER_ACCESS,
\r
872 parent : function(){
\r
873 return X.Class._getPrivate( this ).parent;
\r
876 return X.Class._getPrivate( this ).root;
\r
880 * unverifiedAttrs に全ての指定を控える
\r
881 * サポートされていない場合は無視される.親のレイアウトによって変わる
\r
883 attr : function( nameOrObject, valueOrUnit ){
\r
884 var p = X.Class._getPrivate( this ),
\r
885 layout, k, def, attrs, v;
\r
886 if( nameOrObject && X.Type.isObject( nameOrObject ) ){
\r
888 layout = p.parentData && p.parentData.layout.overrideAttrsForChild; // root には parent がない
\r
889 for( k in nameOrObject ){
\r
890 // 親のレイアウトマネージャの許可しない
\r
891 if( layout && !layout[ k ] ){
\r
894 if( def = p.supportAttrs[ k ] ){
\r
895 p.setAttr( k, def, nameOrObject[ k ] );
\r
899 if( X.Type.isString( nameOrObject ) ){
\r
900 if( valueOrUnit !== undefined ){
\r
901 if( 'em,%'.indexOf( valueOrUnit ) === -1 ){
\r
903 p.setAttr( nameOrObject, valueOrUnit );
\r
905 // getter with unit
\r
906 return p.getAttrWithUnit( nameOrObject, valueOrUnit );
\r
910 if( attrs = ( p.attrObject || p.attrClass.prototype || X.UI.AttrClass ) ){
\r
911 def = p.supportAttrs[ nameOrObject ];
\r
912 return def && attrs[ def.No ];
\r
919 listen : function( type, arg1, arg2, arg3 ){
\r
920 X.Class._getPrivate( this ).listen( type, arg1, arg2, arg3 );
\r
923 listenOnce : function( type, arg1, arg2, arg3 ){
\r
924 X.Class._getPrivate( this ).listenOnce( type, arg1, arg2, arg3 );
\r
927 unlisten : function( type, arg1, arg2, arg3 ){
\r
928 X.Class._getPrivate( this ).unlisten( type, arg1, arg2, arg3 );
\r
931 dispatch : function( e ){
\r
932 return X.Class._getPrivate( this ).dispatch( e );
\r
935 getNextNode : function(){
\r
938 getPrevNode : function(){
\r
941 nodeIndex : function( v ){
\r
942 var data = X.Class._getPrivate( this );
\r
943 if( typeof v === 'number' ){
\r
944 // data.nodeIndex( v );
\r
947 return data.parentData ? data.parentData.nodes.indexOf( data ) : 0;
\r
949 displayIndex : function(){
\r
953 // dirty の場合、rootData.calculate
\r
954 return X.Class._getPrivate( this ).x;
\r
957 // dirty の場合、rootData.calculate
\r
958 return X.Class._getPrivate( this ).y;
\r
960 getAbsoluteX : function(){
\r
961 // dirty の場合、rootData.calculate
\r
962 return X.Class._getPrivate( this ).absoluteX;
\r
964 getAbsoluteY: function(){
\r
965 // dirty の場合、rootData.calculate
\r
966 return X.Class._getPrivate( this ).absoluteY;
\r
968 getWidth : function(){
\r
969 // dirty の場合、rootData.calculate
\r
970 return X.Class._getPrivate( this ).boxWidth;
\r
972 getHeight : function(){
\r
973 // dirty の場合、rootData.calculate
\r
974 return X.Class._getPrivate( this ).boxHeight;
\r
976 scrollTo : function( x, y ){
\r
977 X.Class._getPrivate( this ).scrollTo( x, y );
\r
979 getScrollX : function( v ){
\r
980 // dirty の場合、rootData.calculate
\r
981 return X.Class._getPrivate( this ).scrollX( v );
\r
983 getScrollY : function( v ){
\r
984 // dirty の場合、rootData.calculate
\r
985 return X.Class._getPrivate( this ).scrollY( v );
\r
987 disabled : function( v ){
\r
988 return X.Class._getPrivate( this ).disabled( v );
\r
990 cursor : function( v ){
\r
991 return X.Class._getPrivate( this ).cursor( v );
\r