1 var XUI_AbstractUINode = X_EventDispatcher[ 'inherits' ](
\r
2 'X.UI._AbstractUINode',
\r
6 dirty : XUI_Dirty.CLEAN,
\r
15 supportAttrs : XUI_Attr_Support,
\r
16 attrClass : XUI_AttrClass,
\r
18 unverifiedAttrs : null,
\r
21 pointerDisabled : false,
\r
22 hoverClassName : null,
\r
25 reserveEvents : null,
\r
33 scrollWidth : 0, // remove?
\r
34 scrollHeight : 0, // remove?
\r
35 boxWidth : XUI_Attr_AUTO,
\r
37 maxBoxWidth : XUI_Attr_AUTO,
\r
38 boxHeight : XUI_Attr_AUTO,
\r
40 maxBoxHeight : XUI_Attr_AUTO,
\r
45 boxSizingOffsetLR : 0,
\r
46 boxSizingOffsetTB : 0,
\r
47 contentWidth : XUI_Attr_AUTO,
\r
48 minContentWidth : 0,
\r
49 maxContentWidth : XUI_Attr_AUTO,
\r
50 lastContentWidth : -1,
\r
51 contentHeight : XUI_Attr_AUTO,
\r
52 minContentHeight : 0,
\r
53 maxContentHeight : XUI_Attr_AUTO,
\r
54 lastContentHeight : -1,
\r
56 constraintW : false,
\r
57 constraintH : false,
\r
62 percentWidth : false,
\r
63 percentHeight : false,
\r
64 // :hover, :focus, :disabled
\r
66 initialize : function( root, rootData, parent, parentData ){
\r
68 this.rootData = rootData;
\r
69 this.parent = parent;
\r
70 this.parentData = parentData;
\r
71 //this.xnode = X_Doc_create( 'div' );
\r
74 this[ 'dispatch' ]( XUI_Event.INIT );
\r
77 addToParent : function( xnodeParent ){
\r
78 xnodeParent && xnodeParent[ 'append' ]( this.xnode );
\r
81 this[ 'dispatch' ]( XUI_Event.ADDED );
\r
84 creationComplete : function(){
\r
85 var events = this.reserveEvents,
\r
89 this.User[ 'dispatch' ]( XUI_Event.CREATION_COMPLETE );
\r
91 // html 要素が親に追加されるまで控えていたイベントの登録
\r
92 if( events && ( l = events.length ) ){
\r
93 for( i = 0; i < l; ++i ){
\r
94 this.listen.apply( this, events[ i ] );
\r
97 delete this.reserveEvents;
\r
102 * _UINode への setAttr の他、attrClass.prototype への setAttr にも対応する
\r
103 * 親要素が変化した場合、unverifiedAttrs を元に attrObject を再設定.
\r
105 setAttr : function( name, def, v ){
\r
106 var attrs = XUI_attrClassProto || this.attrObject,
\r
107 propID = def.No || def[ 5 ],
\r
108 defaultVal = XUI_attrClassProto ? attrs[ propID ] : this.attrClass.prototype[ propID ], // def[ 0 ],
\r
109 currentVal = attrs ? attrs[ propID ] : defaultVal,
\r
114 length = !!( type & XUI_Attr_Type.LENGTH ),
\r
115 minusLen = !!( type & XUI_Attr_Type.MINUS_LENGTH ),
\r
116 percent = !!( type & XUI_Attr_Type.PERCENT ),
\r
117 minusPct = !!( type & XUI_Attr_Type.MINUS_PERCENT ),
\r
118 numerical = !!( type & XUI_Attr_Type.NUMERICAL ),
\r
119 auto = !!( type & XUI_Attr_Type.AUTO ),
\r
120 color = !!( type & XUI_Attr_Type.COLOR ),
\r
121 url = !!( type & XUI_Attr_Type.URL ),
\r
122 fontName = !!( type & XUI_Attr_Type.FONT_NAME ),
\r
123 flag = !!( type & XUI_Attr_Type.BOOLEAN ),
\r
124 combi = !!( type & XUI_Attr_Type.COMBI ),
\r
125 quartet = !!( type & XUI_Attr_Type.QUARTET ),
\r
126 _v, i, l, nodes, root, roots;
\r
128 if( X_Type_isString( v ) ){
\r
129 //v = v.toLowercase();
\r
130 if( url || fontName ){
\r
133 if( auto && v === 'auto' ){
\r
136 if( list && ( _v = list[ v ] ) ){
\r
138 console.log( v + ' ' + _v );
\r
141 if( ( percent || minusPct ) && v.lastIndexOf( '%' ) !== -1 && isFinite( _v = parseFloat( v ) ) && v === _v + '%' ){
\r
144 if( ( length || minusLen ) && v.lastIndexOf( 'em' ) !== -1 && isFinite( _v = parseFloat( v ) ) && v === _v + 'em' ){
\r
147 if( v.indexOf( ' ' ) !== -1 ){
\r
148 v = v.split( ' ' );
\r
150 if( color && X_Type_isNumber( _v = X_Node_CSS_objToIEFilterText( v ) ) ){
\r
158 if( ( quartet || combi ) && !X_Type_isArray( v ) ){
\r
162 if( X_Type_isNumber( v ) ){
\r
164 ( length && ( 0 <= v ) ) ||
\r
165 ( minusLen && ( v <= 0 ) ) ||
\r
166 ( percent && 0 <= v && v <= 1 ) ||
\r
167 ( minusPct && -1 <= v && v < 0 ) ||
\r
168 ( numerical && 0 <= v ) ||
\r
169 ( auto && v === XUI_Attr_AUTO ) ||
\r
170 ( color && 0 <= v && v <= 0xFFFFFF ) ||
\r
171 ( list && list[ v ] )
\r
179 if( X_Type_isBoolean( v ) && !flag ){
\r
182 if( X_Type_isArray( v ) ){
\r
183 if( v.length <= 4 && quartet ){
\r
184 type &= ~XUI_Attr_Type.QUARTET;
\r
185 switch( v.length ){
\r
187 this.setAttr( false, [ defaultVal, user, dirty, type, list, propID ], v[ 0 ] );
\r
188 this.setAttr( false, [ defaultVal, user, dirty, type, list, ++propID ], v[ 0 ] );
\r
189 this.setAttr( false, [ defaultVal, user, dirty, type, list, ++propID ], v[ 0 ] );
\r
190 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[ 1 ] );
\r
195 this.setAttr( false, [ defaultVal, user, dirty, type, list, ++propID ], v[ 0 ] );
\r
196 this.setAttr( false, [ defaultVal, user, dirty, type, list, ++propID ], v[ 1 ] );
\r
199 this.setAttr( false, [ defaultVal, user, dirty, type, list, propID ], v[ 0 ] );
\r
200 this.setAttr( false, [ defaultVal, user, dirty, type, list, ++propID ], v[ 1 ] );
\r
201 this.setAttr( false, [ defaultVal, user, dirty, type, list, ++propID ], v[ 2 ] );
\r
202 this.setAttr( false, [ defaultVal, user, dirty, type, list, ++propID ], v[ 1 ] );
\r
205 this.setAttr( false, [ defaultVal, user, dirty, type, list, propID ], v[ 0 ] );
\r
206 this.setAttr( false, [ defaultVal, user, dirty, type, list, ++propID ], v[ 1 ] );
\r
207 this.setAttr( false, [ defaultVal, user, dirty, type, list, ++propID ], v[ 2 ] );
\r
208 this.setAttr( false, [ defaultVal, user, dirty, type, list, ++propID ], v[ 3 ] );
\r
212 if( v.length === 2 && combi ){
\r
213 type &= ~XUI_Attr_Type.COMBI;
\r
214 this.setAttr( false, [ defaultVal, user, dirty, type, list, propID ], v[ 0 ] );
\r
215 this.setAttr( false, [ defaultVal, user, dirty, type, list, ++propID ], v[ 1 ] );
\r
221 if( !XUI_attrClassProto && user === XUI_Attr_USER.XNODE && this.xnode ){
\r
222 this.xnode[ 'css' ]( XUI_Attr_Rename[ name ] || name, XUI_AbstractUINode_createCssText( this, name ) );
\r
223 //console.log( ( XUI_Attr_Rename[ name ] || name ) + ' ' + XUI_AbstractUINode_createCssText( this, name ) + ' ' + propID + ' ' + attrs[ propID ] );
\r
228 if( !v && v !== 0 ) v = defaultVal;
\r
230 if( XUI_attrClassProto ){
\r
231 attrs[ propID ] = v;
\r
235 if( currentVal !== v ){
\r
237 case XUI_Attr_Support.left.No :
\r
238 this.constraintW = attrs[ XUI_Attr_Support.right.No ] !== null;
\r
240 case XUI_Attr_Support.right.No :
\r
241 this.constraintW = attrs[ XUI_Attr_Support.left.No ] !== null;
\r
243 case XUI_Attr_Support.top.No :
\r
244 this.constraintH = attrs[ XUI_Attr_Support.bottom.No ] !== null;
\r
246 case XUI_Attr_Support.bottom.No :
\r
247 this.constraintH = attrs[ XUI_Attr_Support.top.No ] !== null;
\r
249 case XUI_Attr_Support.width.No :
\r
250 this.autoWidth = v === XUI_Attr_AUTO;
\r
251 this.percentWidth = X_Type_isString( v );
\r
253 case XUI_Attr_Support.height.No :
\r
254 this.autoHeight = v === XUI_Attr_AUTO;
\r
255 this.percentHeight = X_Type_isString( v );
\r
259 if( defaultVal === v ){
\r
260 if( attrs ) delete attrs[ propID ];
\r
262 if( !attrs ) attrs = this.attrObject = new this.attrClass;
\r
263 attrs[ propID ] = v;
\r
266 if( name && user === XUI_Attr_USER.UINODE ){
\r
270 if( name && user === XUI_Attr_USER.XNODE && this.xnode ){
\r
271 this.xnode[ 'css' ]( XUI_Attr_Rename[ name ] || name, XUI_AbstractUINode_createCssText( this, name ) );
\r
272 //console.log( ( XUI_Attr_Rename[ name ] || name ) + ' ' + XUI_AbstractUINode_createCssText( this, name ) + ' ' + propID + ' ' + attrs[ propID ] );
\r
274 if( this.dirty < dirty ) this.dirty = dirty;
\r
278 getAttr : function( name ){
\r
279 var attrs = this.attrObject || this.attrClass.prototype || XUI_AttrClass,
\r
280 support = this.supportAttrs[ name ],
\r
282 if( !support ) return;
\r
284 if( name.indexOf( 'border' ) === 0 ){
\r
285 name = name.substr( 6 );
\r
286 return [ this.getAttr( 'borderTop' + name ), this.getAttr( 'borderRight' + name ), this.getAttr( 'borderBottom' + name ), this.getAttr( 'borderLeft' + name ) ];
\r
289 type = support[ 3 ];
\r
291 if( type & XUI_Attr_Type.QUARTET ){
\r
292 return [ this.getAttr( name + 'Top' ), this.getAttr( name + 'Right' ), this.getAttr( name + 'Bottom' ), this.getAttr( name + 'Left' ) ];
\r
294 if( type & XUI_Attr_Type.COMBI ) return [ v, data[ ++propID ] ];
\r
296 v = attrs[ support.No ];
\r
297 if( type & XUI_Attr_Type.AUTO && v === XUI_Attr_AUTO ) return 'auto';
\r
299 list = support[ 4 ];
\r
300 if( list ) return list[ v ];
\r
302 if( type & XUI_Attr_Type.COLOR && X_Type_isNumber( v ) ) return v;
\r
303 if( !( type & XUI_Attr_Type.NUMERICAL ) && X_Type_isNumber( v ) ) return v + 'em';
\r
308 getAttrWithUnit : function( prop, unit ){
\r
312 _remove : function(){
\r
313 switch( this.phase ){
\r
320 this.xnode[ 'kill' ]();
\r
323 delete this.rootData;
\r
324 delete this.parent;
\r
325 delete this.parentData;
\r
334 calculate : function( isNeedsDetection, x, y, allowedW, allowedH ){
\r
335 this.preMesure( allowedW, allowedH );
\r
337 this.noWidth = this.boxWidth === XUI_Attr_AUTO;
\r
338 this.noHeight = this.boxHeight === XUI_Attr_AUTO;
\r
340 if( this.noWidth || this.noHeight ){
\r
345 if( !isNeedsDetection ){
\r
352 * X_Node_BoxModel の情報を引きながら top,left,width,height,padding,border の設定
\r
354 updateLayout : function(){
\r
359 [ 'css' ]( 'left', x ? x + 'em' : 0 )
\r
360 [ 'css' ]( 'top', y ? y + 'em' : 0 )
\r
361 [ 'css' ]( 'width', this.noWidth ? 'auto' : this.contentWidth ? this.contentWidth + 'em' : 0 )
\r
362 [ 'css' ]( 'height', this.noHeight ? 'auto' : this.contentHeight ? this.contentHeight + 'em' : 0 )
\r
363 [ 'css' ]( 'padding', XUI_AbstractUINode_createCssText( this, 'padding' ) )
\r
364 [ 'css' ]( 'borderWidth', XUI_AbstractUINode_createCssText( this, 'borderWidth' ) );
\r
368 * 親の サイズを元に自身のサイズを計算していく
\r
370 preMesure : function( allowedW, allowedH ){
\r
371 var attrs = this.attrObject || this.attrClass.prototype || XUI_AttrClass,
\r
372 box = attrs[ XUI_Attr_Support.sizing.No ],
\r
374 boxL, boxT, boxR, boxB,
\r
375 contentW, contentH, boxMinus,
\r
376 paddingT, paddingR, paddingB, paddingL,
\r
377 borderT, borderR, borderB, borderL;
\r
380 // 自身が constraintW の場合 親が AUTO ではない
\r
381 // 自身が constraintW でない場合自身が AUTO はなくかつ親 が AUTO の場合 or 自身は % でない
\r
383 paddingR = XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.padding.No + 1 ], allowedW );
\r
384 paddingL = XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.padding.No + 3 ], allowedW );
\r
385 borderR = XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.borderWidth.No + 1 ], allowedW );
\r
386 borderL = XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.borderWidth.No + 3 ], allowedW );
\r
389 case 3 : // border-box
\r
390 boxMinus -= borderR + borderL;
\r
391 case 2 : // padding-box
\r
392 boxMinus -= paddingR + paddingL;
\r
393 // case 1 : // content-box
\r
395 this.contentL = borderL + paddingL;
\r
396 this.contentR = borderR + paddingR;
\r
398 if( this.constraintW ? allowedW !== XUI_Attr_AUTO : !this.autoWidth && ( allowedW !== XUI_Attr_AUTO || !this.percentWidth ) ){
\r
399 if( this.constraintW ){ // 制約レイアウト
\r
400 contentW = allowedW - ( boxL = XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.left.No ], allowedW ) ) - ( boxR = XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.right.No ], allowedW ) );
\r
402 contentW = XUI_AbstractUINode_calcFinalValue( attrs[ XUI_Attr_Support.width.No ], attrs[ XUI_Attr_Support.minWidth.No ], attrs[ XUI_Attr_Support.maxWidth.No ], allowedW );
\r
404 this.contentWidth = contentW + boxMinus;
\r
405 //this.scrollWidth = this.contentWidth + this.contentL + this.contentR;
\r
406 this.boxWidth = contentW - boxMinus + this.contentL + this.contentR;
\r
407 this.boxSizingOffsetLR = boxMinus;
\r
408 delete this.minContentWidth;
\r
409 delete this.maxContentWidth;
\r
410 delete this.minBoxWidth;
\r
411 delete this.maxBoxWidth;
\r
413 this.minContentWidth = XUI_AbstractUINode_ceil( XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.minWidth.No ], allowedW ) + boxMinus );
\r
414 this.maxContentWidth = XUI_AbstractUINode_ceil( XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.maxWidth.No ], allowedW ) + boxMinus );
\r
415 //this.scrollWidth = this.contentWidth + this.contentL + this.contentR;
\r
416 this.minBoxWidth = this.minContentWidth - boxMinus + this.contentL + this.contentR;
\r
417 this.maxBoxWidth = this.maxContentWidth - boxMinus + this.contentL + this.contentR;
\r
418 //delete this.contentWidth;
\r
419 //delete this.scrollWidth;
\r
420 //delete this.boxWidth;
\r
421 //delete this.boxSizingOffsetLR;
\r
424 paddingT = XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.padding.No + 0 ], allowedH );// paddingTRBL の % 指定は 最大幅に対して TB でも幅に対して
\r
425 paddingB = XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.padding.No + 2 ], allowedH );
\r
426 borderT = XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.borderWidth.No + 0 ], allowedH );
\r
427 borderB = XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.borderWidth.No + 2 ], allowedH );
\r
430 case 3 : // border-box
\r
431 boxMinus -= borderT + borderB;
\r
432 case 2 : // padding-box
\r
433 boxMinus -= paddingT + paddingB;
\r
434 // case 1 : // content-box
\r
436 this.contentT = borderT + paddingT;
\r
437 this.contentB = borderB + paddingB;
\r
440 if( this.constraintH ? allowedH !== XUI_Attr_AUTO : !this.autoHeight && ( allowedH !== XUI_Attr_AUTO || !this.percentHeight ) ){
\r
441 if( this.constraintH ){ // 制約レイアウト
\r
442 contentH = allowedH - ( boxT = XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.top.No ], allowedH ) ) - ( boxB = XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.bottom.No ], allowedH ) );
\r
444 contentH = XUI_AbstractUINode_calcFinalValue( attrs[ XUI_Attr_Support.height.No ], attrs[ XUI_Attr_Support.minHeight.No ], attrs[ XUI_Attr_Support.maxHeight.No ], allowedH );
\r
446 this.contentHeight = contentH + boxMinus;
\r
447 //this.scrollHeight = this.contentHeight + this.contentT + this.contentB;
\r
448 this.boxHeight = contentH - boxMinus + this.contentT + this.contentB; // padding-box の場合 border だけ足される
\r
449 this.boxSizingOffsetTB = boxMinus;
\r
450 delete this.minContentHeight;
\r
451 delete this.maxContentHeight;
\r
452 delete this.minBoxHeight;
\r
453 delete this.maxBoxHeight;
\r
455 this.minContentHeight = XUI_AbstractUINode_ceil( XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.minHeight.No ], allowedH ) + boxMinus );
\r
456 this.maxContentHeight = XUI_AbstractUINode_ceil( XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.maxHeight.No ], allowedH ) + boxMinus );
\r
457 this.minBoxHeight = this.minContentHeight - boxMinus + this.contentT + this.contentB;
\r
458 this.maxBoxHeight = this.maxContentHeight - boxMinus + this.contentT + this.contentB;
\r
460 //delete this.contentHeight;
\r
461 //delete this.scrollHeight;
\r
462 //delete this.boxHeight;
\r
463 //delete this.boxSizingOffsetTB;
\r
466 if( this.parentData && this.parentData.layout.overrideAttrsForChild.left ){
\r
467 if( this.constraintW ){
\r
468 this.boxX = ( boxL || boxL === 0 ) ? boxL : XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.left.No ], allowedW );
\r
470 if( attrs[ XUI_Attr_Support.right.No ] === null ){
\r
471 this.boxX = ( boxL || boxL === 0 ) ? boxL : XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.left.No ], allowedW );
\r
473 this.boxX = alllowW - this.boxWidth - ( ( boxR || boxR === 0 ) ? boxR : XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.right.No ], allowedW ) );
\r
479 if( this.parentData && this.parentData.layout.overrideAttrsForChild.top ){
\r
480 if( this.constraintH ){
\r
481 this.boxY = ( boxT || boxT === 0 ) ? boxT : XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.top.No ], allowedH );
\r
483 if( attrs[ XUI_Attr_Support.bottom.No ] === null ){
\r
484 this.boxY = ( boxT || boxT === 0 ) ? boxT : XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.top.No ], allowedH );
\r
486 this.boxY = allowedH - this.boxHeight - ( ( boxB || boxB === 0 ) ? boxB : XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.bottom.No ], allowedH ) );
\r
494 * 描画・計測を行って、contentSize の決定
\r
496 mesure : function(){
\r
497 var dirty = this.dirty,
\r
498 //sup = X_UA[ 'Gecko' ] || ( X_UA[ 'Safari' ] && X_UA[ 'Windows' ] ) ? .01251 : 0,
\r
501 if( dirty === XUI_Dirty.CLEAN ){
\r
502 if( this.percentWidth || this.percentHeight ){
\r
509 case XUI_Dirty.CONTENT : // コンテンツが変更された
\r
510 case XUI_Dirty.FONT : // フォントサイズが変更された
\r
511 delete this.lastContentWidth;
\r
512 delete this.lastContentHeight;
\r
514 case XUI_Dirty.LAYOUT : // レイアウトの再計算が必要
\r
516 default : // TODO レイアウト崩れに対処 パフォーマンス悪い!
\r
518 w = this.contentWidth;
\r
519 h = this.contentHeight;
\r
520 xnode = this.xnode;
\r
522 /* http://web-designs.seesaa.net/article/188400668.html
\r
523 * min-width の値が max-width の値より大きい場合は、max-width の値は min-width の値に設定される。
\r
526 * 1. contentWidth === AUTO
\r
527 * style を更新して contentWidth の決定
\r
528 * min or max に引っかかったら style 更新
\r
529 * contentHeight === AUTO の場合
\r
531 * contentHeight !== AUTO の場合 scrollHeight のみ更新
\r
532 * 2. contentHeight === AUTO かつ
\r
533 * コンテンツの高さの再取得が必要( contentWidth が最終計測時の contentWidth と一致 かつ フォント・コンテンツに変更無し の場合再取得不要)
\r
534 * style を更新して contentHeight の決定
\r
536 * 3. content のサイズがすでに決定している
\r
540 if( xnode[ '_xnodes' ] && xnode[ '_xnodes' ].length ){
\r
541 if( w === XUI_Attr_AUTO ){
\r
543 w = _w = XUI_AbstractUINode_ceil( xnode[ 'css' ]( 'width', 'auto' )[ 'clientWidth' ]() / X_Node_CSS_getCharSize( xnode ) );
\r
545 if( this.maxContentWidth < w - this.boxSizingOffsetLR ){
\r
546 this.noWidth = false;
\r
547 w = this.maxContentWidth + this.boxSizingOffsetLR;
\r
549 if( w - this.boxSizingOffsetLR < this.minContentWidth ){
\r
550 this.noWidth = false;
\r
551 w = this.minContentWidth + this.boxSizingOffsetLR;
\r
554 if( h === XUI_Attr_AUTO ){
\r
555 w !== _w && xnode[ 'css' ]( 'width', w + 'em' );
\r
556 h = XUI_AbstractUINode_ceil( xnode[ 'css' ]( 'height', 'auto' )[ 'scrollHeight' ]() / X_Node_CSS_getCharSize( xnode ) );
\r
557 w !== _w && xnode[ 'css' ]( 'width', 'auto' );
\r
560 this.lastContentWidth = this.contentWidth = w;
\r
563 if( h === XUI_Attr_AUTO ){
\r
564 if( w !== this.lastContentWidth ){
\r
565 xnode[ 'css' ]( 'width', w + 'em' );
\r
566 this.lastContentWidth = w;
\r
568 // ie8 clientHeight, ff scrollHeight & clientHeight
\r
569 h = XUI_AbstractUINode_ceil( xnode[ 'css' ]( 'height', 'auto' )[ 'scrollHeight' ]() / X_Node_CSS_getCharSize( xnode ) );
\r
571 h = this.lastContentHeight === -1 ?
\r
572 XUI_AbstractUINode_ceil( xnode[ 'css' ]( 'height', 'auto' )[ 'scrollHeight' ]() / X_Node_CSS_getCharSize( xnode ) ) :
\r
573 this.lastContentHeight;
\r
576 if( dirty !== XUI_Dirty.LAYOUT ){
\r
577 this.contentWidth = this.lastContentWidth = w;
\r
578 h = XUI_AbstractUINode_ceil( xnode[ 'css' ]( 'height', 'auto' )[ 'scrollHeight' ]() / X_Node_CSS_getCharSize( xnode ) );
\r
581 if( this.maxContentHeight < h - this.boxSizingOffsetTB ){
\r
582 this.noHeight = false;
\r
583 h = this.maxContentHeight + this.boxSizingOffsetTB;
\r
585 if( h - this.boxSizingOffsetTB < this.minContentHeight ){
\r
586 this.noHeight = false;
\r
587 h = this.minContentHeight + this.boxSizingOffsetTB;
\r
590 this.contentHeight = this.lastContentHeight = h;
\r
593 // コンテンツを持たないため基本のサイズは0
\r
594 if( w === XUI_Attr_AUTO ) this.contentWidth = w = 0 < this.minContentWidth ? this.minContentWidth : 0;
\r
595 if( h === XUI_Attr_AUTO ) this.contentHeight = h = 0 < this.minContentHeight ? this.minContentHeight : 0;
\r
596 this.noWidth = this.noHeight = false;
\r
601 //case XUI_Dirty.PAINT : // 再描画のみ必要
\r
606 * 自身の contentWidth, contentHeight を元に AUTO な width, height を確定していく
\r
608 postMesure : function(){
\r
609 var attrs = this.attrObject || this.attrClass.prototype || XUI_AttrClass,
\r
610 box = attrs[ XUI_Attr_Support.sizing.No ],
\r
611 contentW, contentH,
\r
613 paddingT, paddingR, paddingB, paddingL,
\r
614 borderT, borderR, borderB, borderL,
\r
618 if( this.boxWidth === XUI_Attr_AUTO ){
\r
619 contentW = this.contentWidth;
\r
620 paddingR = XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.padding.No + 1 ], contentW );
\r
621 paddingL = XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.padding.No + 3 ], contentW );
\r
622 borderR = XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.borderWidth.No + 1 ], contentW );
\r
623 borderL = XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.borderWidth.No + 3 ], contentW );
\r
626 case 3 : // border-box
\r
627 contentPlus = borderR + borderL;
\r
628 case 2 : // padding-box
\r
629 contentPlus += paddingR + paddingL;
\r
630 // case 1 : // content-box
\r
633 if( !this.constraintW ){
\r
634 contentW += contentPlus;
\r
635 min = XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.minWidth.No ], contentW );
\r
636 max = XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.maxWidth.No ], contentW );
\r
637 if( contentW < min && contentPlus < min ){
\r
638 this.contentWidth = min - contentPlus;
\r
640 if( max < contentW && contentPlus < max ){
\r
641 this.contentWidth = max - contentPlus;
\r
644 this.contentL = borderL + paddingL;
\r
645 this.contentR = borderR + paddingR;
\r
646 this.boxWidth = this.contentWidth + this.contentL + this.contentR;
\r
649 if( this.boxHeight === XUI_Attr_AUTO ){
\r
650 contentH = this.contentHeight;
\r
651 paddingT = XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.padding.No + 0 ], contentH );// paddingTRBL の % 指定は 最大幅に対して TB でも幅に対して
\r
652 paddingB = XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.padding.No + 2 ], contentH );
\r
653 borderT = XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.borderWidth.No + 0 ], contentH );
\r
654 borderB = XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.borderWidth.No + 2 ], contentH );
\r
657 case 3 : // border-box
\r
658 contentPlus = borderT + borderB;
\r
659 case 2 : // padding-box
\r
660 contentPlus += paddingT + paddingB;
\r
661 // case 1 : // content-box
\r
663 if( !this.constraintH ){
\r
664 contentH += contentPlus;
\r
665 min = XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.minHeight.No ], contentH );
\r
666 max = XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.maxHeight.No ], contentH );
\r
667 if( contentH < min && contentPlus < min ){
\r
668 this.contentHeight = min - contentPlus;
\r
670 if( max < contentH && contentPlus < max ){
\r
671 this.contentHeight = max - contentPlus;
\r
674 this.contentT = borderT + paddingT;
\r
675 this.contentB = borderB + paddingB;
\r
676 this.boxHeight = this.contentHeight + this.contentT + this.contentB;
\r
680 capcher : function( x, y ){
\r
681 if( this.pointerDisabled ) return false;
\r
686 if( 0 <= x && x < this.boxWidth && 0 <= y && y < this.boxHeight ){
\r
687 !this.hovering && ( this.rootData.hoverList[ this.rootData.hoverList.length ] = this );
\r
688 this.rootData.targetNodeData = this;
\r
694 * context を明示しない場合、User が context になる!
\r
696 listen : function( type, arg1, arg2, arg3 ){
\r
697 var root, events, counter, f;
\r
698 if( XUI_Event._START_POINTER <= type && type <= XUI_Event._END_POINTER ){
\r
699 if( this.phase < 3 ){
\r
700 if( !( events = this.reserveEvents ) ) this.reserveEvents = events = [];
\r
701 events[ events.length ] = [ type, arg1, arg2, arg3 ];
\r
704 if( XUI_Event._START_XUI_EVENT < type && type < XUI_Event._END_XUI_EVENT ){
\r
705 if( !this.gesture ){
\r
706 this.gesture = new Hammer( this.rootData, this, type );
\r
708 this.gesture[ 'listen' ]( type );
\r
711 //console.log( type );
\r
712 root = this.rootData;
\r
713 counter = root.eventCounter;
\r
714 if( counter[ type ] ){
\r
717 counter[ type ] = 1;
\r
718 root.xnodeInteractiveLayer[ 'listen' ]( XUI_Event.IdToName[ type ], X_UI_eventRellay );
\r
722 arg1 && arg1.kind ? ( f = arg1 ) : ( f = X_Callback_classifyCallbackArgs( arg1, arg2, arg3 ) );
\r
724 return X_EventDispatcher_listen.call( this, type, this.User, f );
\r
726 if( f.kind === X_Callback_FUNC_ONLY ){
\r
727 return X_EventDispatcher_listen.call( this, type, this.User, f.func, f.supplement );
\r
729 return X_EventDispatcher_listen.apply( this, arguments );
\r
731 unlisten : function( type, arg1, arg2, arg3 ){
\r
732 var root, events, i, ev, counter, f;
\r
733 if( XUI_Event._START_POINTER <= type && type <= XUI_Event._END_POINTER ){
\r
734 if( this.phase < 3 ){
\r
735 if( !( events = this.reserveEvents ) ) return this;
\r
736 for( i = events.length; i; ){
\r
737 ev = events[ --i ];
\r
738 if( ev[ 0 ] === type && ev[ 1 ] === arg1 && ev[ 2 ] === arg2 ){
\r
739 events.split( i, 1 );
\r
746 if( XUI_Event._START_XUI_EVENT < type && type < XUI_Event._END_XUI_EVENT ){
\r
747 this.gesture && this.gesture[ 'unlisten' ]( type );
\r
749 root = this.rootData;
\r
750 counter = root.eventCounter;
\r
751 if( !counter[ type ] ) return this;
\r
753 if( counter[ type ] === 0 ){
\r
754 root.xnodeInteractiveLayer[ 'unlisten' ]( XUI_Event.IdToName[ type ], X_UI_eventRellay );
\r
755 delete counter[ type ];
\r
759 arg1 && arg1.kind ? ( f = arg1 ) : ( f = X_Callback_classifyCallbackArgs( arg1, arg2, arg3 ) );
\r
761 return X_EventDispatcher_unlisten.apply( this, [ type, this.User, f ] );
\r
763 if( f.kind === X_Callback_FUNC_ONLY ){
\r
764 return X_EventDispatcher_unlisten.apply( this, [ type, this.User, f.func, f.supplement ] );
\r
766 return X_EventDispatcher_unlisten.apply( this, arguments );
\r
769 dispatch : function( e ){
\r
770 //console.log( e.type + ' ' + ( this[ '_listeners' ] && this[ '_listeners' ][ e.type ] ) );
\r
771 var xve = XUI_Event,
\r
772 ret = X_EventDispatcher_dispatch.call( this, e ),
\r
773 type = e.type || e;
\r
775 // TODO captureEvent PointerEvent
\r
776 if( ret & X_Callback_CAPTURE_POINTER && !this.hitChildData && XUI_Event._POINTER_MOVE === type ){
\r
777 this.rootData.monopolyNodeData = this;
\r
780 this.rootData.monopolyNodeData = null;
\r
781 if( xve._START_BUBLEUP < type && this.parentData && !( ret & X_Callback_STOP_PROPAGATION ) && !( ret & X_Callback_STOP_NOW ) ) return this.parentData[ 'dispatch' ]( e );
\r
788 function XUI_AbstractUINode_createCssText( that, name ){
\r
789 var attrs = that.attrObject || that.attrClass.prototype || XUI_AttrClass,
\r
790 def = that.supportAttrs[ name ],
\r
792 v = attrs[ def.No ],
\r
795 flag = !!( type & XUI_Attr_Type.BOOLEAN ),
\r
796 combi = !!( type & XUI_Attr_Type.COMBI ),
\r
797 quartet = !!( type & XUI_Attr_Type.QUARTET );
\r
800 if( attrs[ no + 1 ] === attrs[ no + 3 ] ){
\r
801 if( v === attrs[ no + 2 ] ){
\r
802 if( v === attrs[ no + 1 ] ){
\r
803 return XUI_AbstractUINode_createCssValue( v, type, list );
\r
806 XUI_AbstractUINode_createCssValue( v, type, list ),
\r
807 XUI_AbstractUINode_createCssValue( attrs[ no + 1 ], type, list )
\r
811 XUI_AbstractUINode_createCssValue( v, type, list ),
\r
812 XUI_AbstractUINode_createCssValue( attrs[ no + 1 ], type, list ),
\r
813 XUI_AbstractUINode_createCssValue( attrs[ no + 2 ], type, list )
\r
817 XUI_AbstractUINode_createCssValue( v, type, list ),
\r
818 XUI_AbstractUINode_createCssValue( attrs[ no + 1 ], type, list ),
\r
819 XUI_AbstractUINode_createCssValue( attrs[ no + 2 ], type, list ),
\r
820 XUI_AbstractUINode_createCssValue( attrs[ no + 3 ], type, list )
\r
825 XUI_AbstractUINode_createCssValue( v, type, list ),
\r
826 XUI_AbstractUINode_createCssValue( attrs[ no + 1 ], type, list )
\r
830 return v ? list : 'normal'; //
\r
832 return XUI_AbstractUINode_createCssValue( v, type, list );
\r
835 function XUI_AbstractUINode_createCssValue( v, type, list ){
\r
836 var length = !!( type & XUI_Attr_Type.LENGTH ),
\r
837 minusLen = !!( type & XUI_Attr_Type.MINUS_LENGTH ),
\r
838 percent = !!( type & XUI_Attr_Type.PERCENT ),
\r
839 minusPct = !!( type & XUI_Attr_Type.MINUS_PERCENT ),
\r
840 numerical = !!( type & XUI_Attr_Type.NUMERICAL ),
\r
841 auto = !!( type & XUI_Attr_Type.AUTO ),
\r
842 color = !!( type & XUI_Attr_Type.COLOR ),
\r
843 url = !!( type & XUI_Attr_Type.URL ),
\r
844 fontName = !!( type & XUI_Attr_Type.FONT_NAME );
\r
846 if( X_Type_isNumber( v ) ){
\r
847 if( auto && v === XUI_Attr_AUTO ) return 'auto';
\r
848 if( length || minusLen ) return v + 'em';
\r
849 if( numerical ) return v;
\r
850 if( list && list[ v ] ) return list[ v ];
\r
852 if( v < 0x100000 ){
\r
853 v = '00000' + v.toString( 16 );
\r
854 return '#' + v.substr( v.length - 6 );
\r
856 return '#' + v.toString( 16 );
\r
859 if( X_Type_isString( v ) ){
\r
860 if( percent || minusPct || url || fontName ) return v;
\r
864 function XUI_AbstractUINode_calcValue( styleValue, srcValue ){
\r
868 if( X_Type_isString( styleValue ) ){
\r
869 return srcValue * parseFloat( styleValue ) / 100;
\r
871 if( !X_Type_isNumber( styleValue ) ) return 0;
\r
875 function XUI_AbstractUINode_calcFinalValue( styleValue, styleMin, styleMax, srcValue ){
\r
876 var v = XUI_AbstractUINode_calcValue( styleValue, srcValue ),
\r
877 min = XUI_AbstractUINode_calcValue( styleMin, srcValue ),
\r
878 max = XUI_AbstractUINode_calcValue( styleMax, srcValue );
\r
879 return v <= min ? min : max <= v ? max : v;
\r
881 function XUI_AbstractUINode_ceil( v ){
\r
883 return ( v * 10 + 0.999 | 0 ) / 10;
\r
885 return ( -v * 10 + 0.999 | 0 ) / -10;
\r
888 X.UI.AbstractUINode = X_Class_create(
\r
892 parent : function(){
\r
893 return X_Pair_get( this ).parent;
\r
896 return X_Pair_get( this ).root;
\r
900 * unverifiedAttrs に全ての指定を控える
\r
901 * サポートされていない場合は無視される.親のレイアウトによって変わる
\r
903 attr : function( nameOrObject, valueOrUnit ){
\r
904 var p = X_Pair_get( this ),
\r
905 layout, k, def, attrs, v;
\r
906 if( nameOrObject && X_Type_isObject( nameOrObject ) ){
\r
908 layout = p.parentData && p.parentData.layout.overrideAttrsForChild; // root には parent がない
\r
909 for( k in nameOrObject ){
\r
910 if( X_EMPTY_OBJECT[ k ] ) continue;
\r
911 // 親のレイアウトマネージャの許可しない
\r
912 if( layout && !layout[ k ] ){
\r
915 if( def = p.supportAttrs[ k ] ){
\r
916 p.setAttr( k, def, nameOrObject[ k ] );
\r
920 if( X_Type_isString( nameOrObject ) ){
\r
921 if( valueOrUnit !== undefined ){
\r
922 if( 'em,%'.indexOf( valueOrUnit ) === -1 ){
\r
924 p.setAttr( nameOrObject, valueOrUnit );
\r
926 // getter with unit
\r
927 return p.getAttrWithUnit( nameOrObject, valueOrUnit );
\r
931 if( attrs = ( p.attrObject || p.attrClass.prototype || XUI_AttrClass ) ){
\r
932 def = p.supportAttrs[ nameOrObject ];
\r
933 return def && attrs[ def.No ];
\r
940 listen : function( type, arg1, arg2, arg3 ){
\r
941 X_Pair_get( this )[ 'listen' ]( type, arg1, arg2, arg3 );
\r
944 listenOnce : function( type, arg1, arg2, arg3 ){
\r
945 X_Pair_get( this )[ 'listenOnce' ]( type, arg1, arg2, arg3 );
\r
948 listening : function( type, arg1, arg2, arg3 ){
\r
949 return X_Pair_get( this )[ 'listening' ]( type, arg1, arg2, arg3 );
\r
951 unlisten : function( type, arg1, arg2, arg3 ){
\r
952 X_Pair_get( this )[ 'unlisten' ]( type, arg1, arg2, arg3 );
\r
955 dispatch : function( e ){
\r
956 return X_Pair_get( this )[ 'dispatch' ]( e );
\r
959 nextNode : function(){
\r
962 prevNode : function(){
\r
965 nodeIndex : function( v ){
\r
966 var data = X_Pair_get( this );
\r
967 if( typeof v === 'number' ){
\r
968 // data.nodeIndex( v );
\r
971 return data.parentData ? data.parentData.nodes.indexOf( data ) : 0;
\r
973 displayIndex : function(){
\r
977 // dirty の場合、rootData.calculate
\r
978 return X_Pair_get( this ).boxX;
\r
981 // dirty の場合、rootData.calculate
\r
982 return X_Pair_get( this ).boxY;
\r
984 getAbsoluteX : function(){
\r
985 // dirty の場合、rootData.calculate
\r
986 return X_Pair_get( this ).absoluteX;
\r
988 getAbsoluteY: function(){
\r
989 // dirty の場合、rootData.calculate
\r
990 return X_Pair_get( this ).absoluteY;
\r
992 getWidth : function(){
\r
993 // dirty の場合、rootData.calculate
\r
994 return X_Pair_get( this ).boxWidth;
\r
996 getHeight : function(){
\r
997 // dirty の場合、rootData.calculate
\r
998 return X_Pair_get( this ).boxHeight;
\r