'_AbstractUINode',\r
X.Class.ABSTRACT | X.Class.PRIVATE_DATA,\r
{\r
- phase : 0,\r
- root : null,\r
- rootData : null,\r
- parent : null,\r
- parentData : null,\r
- rawElement : null,\r
- rawStyle : null,\r
+ phase : 0,\r
+ dirty : X.UI.Dirty.CLEAN,\r
\r
- //events : null, // X.EventDispatcher で設定される\r
- reserveEvents : null,\r
- gesture : null,\r
- //elmScroll : null,\r
- //elmScroller : null,\r
- //elmScrollbar : null,\r
- \r
- style : null,\r
- styleData : null,\r
- forChrome : false, // メッキ\r
+ root : null,\r
+ rootData : null,\r
+ hoverList : null,\r
+ parent : null,\r
+ parentData : null,\r
+ xnode : null,\r
\r
- x : 0,\r
- y : 0,\r
- w : 0,\r
- h : 0,\r
- t : 0, // top\r
- l : 0, // left\r
- b : 0, // bottom\r
- r : 0, // right\r
- absoluteX : 0,\r
- absoluteY : 0,\r
- //_scrollX : 0,\r
- //_scrollY : 0,\r
- scrollingX : 0,\r
- scrollingY : 0,\r
- _cursor : '',\r
- hitChildData : null,\r
- hitSelf : false,\r
- _disabled : false,\r
- _childDisabled : false,\r
- through : false,\r
- clip : false,\r
- hover : false,\r
- hoverStyleName : null,\r
- isHover : false,\r
- scroll : false,\r
- dragdrop : false,\r
- tooltip : null,\r
+ supportAttrs : X.UI.Attr.Support,\r
+ attrClass : X.UI.AttrClass,\r
+ attrObject : null,\r
+ unverifiedAttrs : null,\r
+ \r
+ role : null,\r
+ pointerDisabled : false,\r
+ hoverClassName : null,\r
+ hovering : false,\r
\r
- _content : null,\r
- updateContent : false,\r
+ reserveEvents : null,\r
+ gesture : null,\r
+\r
+ absoluteX : 0,\r
+ absoluteY : 0,\r
\r
- boxWidth : 0,\r
- boxHeight : 0,\r
+ boxX : 0,\r
+ boxY : 0,\r
+ scrollWidth : 0,\r
+ scrollHeight : 0, \r
+ boxWidth : X.UI.Attr.AUTO,\r
+ minBoxWidth : 0,\r
+ maxBoxWidth : X.UI.Attr.AUTO, \r
+ boxHeight : X.UI.Attr.AUTO,\r
+ minBoxHeight : 0,\r
+ maxBoxHeight : X.UI.Attr.AUTO,\r
contentL : 0,\r
contentT : 0,\r
contentR : 0,\r
contentB : 0,\r
boxSizingOffsetLR : 0,\r
boxSizingOffsetTB : 0, \r
- contentWidth : 0,\r
+ contentWidth : X.UI.Attr.AUTO,\r
minContentWidth : 0,\r
- maxContentWidth : AUTO,\r
+ maxContentWidth : X.UI.Attr.AUTO,\r
lastContentWidth : -1,\r
- contentHeight : 0,\r
+ contentHeight : X.UI.Attr.AUTO,\r
minContentHeight : 0,\r
- maxContentHeight : AUTO,\r
+ maxContentHeight : X.UI.Attr.AUTO,\r
+ lastContentHeight : -1,\r
\r
+ constraintW : false,\r
+ constraintH : false,\r
+ autoWidth : false,\r
+ autoHeight : false,\r
+ percentWidth : false,\r
+ percentHeight : false,\r
// :hover, :focus, :disabled\r
\r
initialize : function( root, rootData, parent, parentData ){\r
this.rootData = rootData;\r
this.parent = parent;\r
this.parentData = parentData;\r
- this.rawElement = X.Dom.Node.create( 'div' );\r
- \r
- this.styleData.initialize();\r
+ //this.xnode = X.Dom.Node.create( 'div' );\r
+ this.phase = 1;\r
\r
- this.phase = 1;\r
this.dispatch( { type : X.UI.Event.INIT } );\r
},\r
\r
addToParent : function( parentElement ){\r
- //parentElement && parentElement.appendChild( this.rawElement );\r
- parentElement && parentElement.append( this.rawElement );\r
+ parentElement && parentElement.append( this.xnode );\r
\r
this.phase = 2;\r
this.dispatch( { type : X.UI.Event.ADDED } );\r
},\r
-\r
- /* Rellay\r
- afterAddition : function(){\r
- this.styleData.afterAddition();\r
- \r
- this.phase = 3;\r
- this.dispatch( { type : X.UI.Event.CREATION_COMPLETE } );\r
- }, */\r
\r
creationComplete : function(){\r
- if( this.phase < 3 ) return;\r
- \r
- var nodes = this.nodes,\r
- events = this.reserveEvents,\r
+ var events = this.reserveEvents,\r
l, i;\r
- if( nodes ){\r
- for( i = 0, l = nodes.length; i < l; ++i ){\r
- nodes[ i ].creationComplete();\r
- };\r
- };\r
- this.mesure();\r
\r
- // this.scroll === true && ScrollBarManager.register( this );\r
+ this.phase = 3;\r
+ this.User.dispatch( { type : X.UI.Event.CREATION_COMPLETE } );\r
\r
// html 要素が親に追加されるまで控えていたイベントの登録\r
if( events && ( l = events.length ) ){\r
};\r
events.length = 0;\r
delete this.reserveEvents;\r
- };\r
+ }; \r
},\r
\r
- mesure : function(){\r
- var elm = this.rawElement,\r
- x, y, w, h, parent;\r
- if( elm ){\r
- w = elm.width();//w = elm.offsetWidth;\r
- h = elm.height();//h = elm.offsetHeight;\r
- x = elm.x();//x = elm.offsetLeft;\r
- y = elm.y();//y = elm.offsetTop; \r
- if( this.x !== x || this.y !== y || this.w !== w || this.h !== h ){\r
- this.x = x;\r
- this.y = y;\r
- this.w = w;\r
- this.h = h;\r
- ( parent = this.parentData ) && this.updateAbsoluteXY( parent.absoluteX, parent.absoluteY );\r
- }; \r
- };\r
- this.updateRectangle();\r
- },\r
+ /*\r
+ * _UINode への setAttr の他、attrClass.prototype への setAttr にも対応する\r
+ * 親要素が変化した場合、unverifiedAttrs を元に attrObject を再設定．\r
+ */\r
+ setAttr : function( name, def, v ){\r
+ var attrs = X.UI.attrClassProto || this.attrObject,\r
+ propID = def.No || def[ 5 ],\r
+ defaultVal = X.UI.attrClassProto ? attrs[ propID ] : this.attrClass.prototype[ propID ], // def[ 0 ],\r
+ currentVal = attrs ? attrs[ propID ] : defaultVal,\r
+ dirty = def[ 1 ],\r
+ user = def[ 2 ],\r
+ type = def[ 3 ],\r
+ list = def[ 4 ],\r
+ length = !!( type & X.UI.Attr.Type.LENGTH ),\r
+ minusLen = !!( type & X.UI.Attr.Type.MINUS_LENGTH ),\r
+ percent = !!( type & X.UI.Attr.Type.PERCENT ),\r
+ minusPct = !!( type & X.UI.Attr.Type.MINUS_PERCENT ),\r
+ numerical = !!( type & X.UI.Attr.Type.NUMERICAL ),\r
+ auto = !!( type & X.UI.Attr.Type.AUTO ),\r
+ color = !!( type & X.UI.Attr.Type.COLOR ),\r
+ url = !!( type & X.UI.Attr.Type.URL ),\r
+ fontName = !!( type & X.UI.Attr.Type.FONT_NAME ),\r
+ flag = !!( type & X.UI.Attr.Type.BOOLEAN ),\r
+ combi = !!( type & X.UI.Attr.Type.COMBI ),\r
+ quartet = !!( type & X.UI.Attr.Type.QUARTET ),\r
+ _v, i, l, nodes, root, roots;\r
\r
- updateAbsoluteXY : function( x, y /* , scrollX, scrollY */ ){\r
- var nodes = this.nodes, i;\r
- this.absoluteX = x = this.x + x;\r
- this.absoluteY = y = this.y + y;\r
- if( !nodes ) return;\r
- for( i = nodes.length; i; ){\r
- nodes[ --i ].updateAbsoluteXY( x, y );\r
+ if( X.Type.isString( v ) ){\r
+ //v = v.toLowercase();\r
+ if( url || fontName ){\r
+ // good\r
+ } else\r
+ if( auto && v === 'auto' ){\r
+ v = X.UI.Attr.AUTO;\r
+ } else\r
+ if( list && ( _v = list[ v ] ) ){\r
+ // good\r
+ v = _v;\r
+ } else\r
+ if( ( percent || minusPct ) && v.lastIndexOf( '%' ) !== -1 && isFinite( _v = parseFloat( v ) ) && v === _v + '%' ){\r
+ // good\r
+ } else\r
+ if( ( length || minusLen ) && v.lastIndexOf( 'em' ) !== -1 && isFinite( _v = parseFloat( v ) ) && v === _v + 'em' ){\r
+ v = _v;\r
+ } else \r
+ if( v.indexOf( ' ' ) !== -1 ){\r
+ v = v.split( ' ' );\r
+ } else\r
+ if( color && X.Type.isNumber( _v = X.Dom.Style.parseColor( v ) ) ){\r
+ v = _v;\r
+ } else {\r
+ // bad\r
+ return;\r
+ };\r
};\r
- },\r
- \r
- updateRectangle : function(){\r
- var w = this.w, h = this.h, x = this.x, y = this.y,\r
- l = x, t = y, r = x + w, b = y + h,\r
- nodes = this.nodes, i, node;\r
+ \r
+ if( ( quartet || combi ) && !X.Type.isArray( v ) ){\r
+ v = [ v ];\r
+ };\r
+ \r
+ if( X.Type.isNumber( v ) ){\r
+ if( \r
+ ( length && ( 0 <= v ) ) ||\r
+ ( minusLen && ( v <= 0 ) ) ||\r
+ ( percent && 0 <= v && v <= 1 ) ||\r
+ ( minusPct && -1 <= v && v < 0 ) ||\r
+ ( numerical && 0 <= v ) ||\r
+ ( auto && v === X.UI.Attr.AUTO ) ||\r
+ ( color && 0 <= v && v <= 0xFFFFFF ) ||\r
+ ( list && list[ v ] )\r
+ ){\r
+ // good\r
+ } else {\r
+ // bad\r
+ return;\r
+ };\r
+ } else\r
+ if( X.Type.isBoolean( v ) && !flag ){\r
+ return;\r
+ } else\r
+ if( X.Type.isArray( v ) ){\r
+ if( v.length <= 4 && quartet ){\r
+ type &= ~X.UI.Attr.Type.QUARTET;\r
+ switch( v.length ){\r
+ case 1 :\r
+ this.setAttr( false, [ defaultVal, user, dirty, type, list, propID ], v[ 0 ] );\r
+ this.setAttr( false, [ defaultVal, user, dirty, type, list, ++propID ], v[ 0 ] );\r
+ this.setAttr( false, [ defaultVal, user, dirty, type, list, ++propID ], v[ 0 ] );\r
+ this.setAttr( false, [ defaultVal, user, dirty, type, list, ++propID ], v[ 0 ] );\r
+ break;\r
+ case 2 :\r
+ this.setAttr( false, [ defaultVal, user, dirty, type, list, propID ], v[ 0 ] );\r
+ this.setAttr( false, [ defaultVal, user, dirty, type, list, ++propID ], v[ 1 ] );\r
+ this.setAttr( false, [ defaultVal, user, dirty, type, list, ++propID ], v[ 0 ] );\r
+ this.setAttr( false, [ defaultVal, user, dirty, type, list, ++propID ], v[ 1 ] );\r
+ break;\r
+ case 3 :\r
+ this.setAttr( false, [ defaultVal, user, dirty, type, list, propID ], v[ 0 ] );\r
+ this.setAttr( false, [ defaultVal, user, dirty, type, list, ++propID ], v[ 1 ] );\r
+ this.setAttr( false, [ defaultVal, user, dirty, type, list, ++propID ], v[ 2 ] );\r
+ this.setAttr( false, [ defaultVal, user, dirty, type, list, ++propID ], v[ 1 ] );\r
+ break;\r
+ case 4 :\r
+ this.setAttr( false, [ defaultVal, user, dirty, type, list, propID ], v[ 0 ] );\r
+ this.setAttr( false, [ defaultVal, user, dirty, type, list, ++propID ], v[ 1 ] );\r
+ this.setAttr( false, [ defaultVal, user, dirty, type, list, ++propID ], v[ 2 ] );\r
+ this.setAttr( false, [ defaultVal, user, dirty, type, list, ++propID ], v[ 3 ] );\r
+ break;\r
+ }; \r
+ } else\r
+ if( v.length === 2 && combi ){\r
+ type &= ~X.UI.Attr.Type.COMBI;\r
+ this.setAttr( false, [ defaultVal, user, dirty, type, list, propID ], v[ 0 ] );\r
+ this.setAttr( false, [ defaultVal, user, dirty, type, list, ++propID ], v[ 1 ] );\r
+ } else {\r
+ // bad\r
+ return;\r
+ };\r
+\r
+ if( !X.UI.attrClassProto && user === X.UI.Attr.USER.XNODE && this.xnode ){\r
+ this.xnode.css( X.UI.Attr.Rename[ name ] || name, this._createCssText( name ) );\r
+ //console.log( ( X.UI.Attr.Rename[ name ] || name ) + ' ' + this._createCssText( name ) + ' ' + propID + ' ' + attrs[ propID ] );\r
+ };\r
+ return;\r
+ };\r
+\r
+ if( !v && v !== 0 ) v = defaultVal;\r
+ \r
+ if( X.UI.attrClassProto ){\r
+ attrs[ propID ] = v;\r
+ return; \r
+ }; \r
+\r
+ if( currentVal !== v ){\r
+ switch( propID ){\r
+ case X.UI.Attr.Support.left.No :\r
+ this.constraintW = attrs[ X.UI.Attr.Support.right.No ] !== null;\r
+ break;\r
+ case X.UI.Attr.Support.right.No :\r
+ this.constraintW = attrs[ X.UI.Attr.Support.left.No ] !== null;\r
+ break;\r
+ case X.UI.Attr.Support.top.No :\r
+ this.constraintH = attrs[ X.UI.Attr.Support.bottom.No ] !== null;\r
+ break;\r
+ case X.UI.Attr.Support.bottom.No :\r
+ this.constraintH = attrs[ X.UI.Attr.Support.top.No ] !== null;\r
+ break;\r
+ case X.UI.Attr.Support.width.No :\r
+ this.autoWidth = v === X.UI.Attr.AUTO;\r
+ this.percentWidth = X.Type.isString( v );\r
+ break;\r
+ case X.UI.Attr.Support.height.No :\r
+ this.autoHeight = v === X.UI.Attr.AUTO;\r
+ this.percentHeight = X.Type.isString( v );\r
+ break;\r
+ };\r
\r
- if( nodes && this.clip === false ){\r
- for( i = nodes.length; i; ){\r
- node = nodes[ --i ];\r
- if( node.l + x < l ) l = x + node.l;\r
- if( node.t + y < t ) t = y + node.t;\r
- if( r < node.r + x ) r = x + node.r;\r
- if( b < node.b + y ) b = y + node.b;\r
+ if( defaultVal === v ){\r
+ if( attrs ) delete attrs[ propID ];\r
+ } else {\r
+ if( !attrs ) attrs = this.attrObject = new this.attrClass;\r
+ attrs[ propID ] = v;\r
};\r
+ \r
+ if( name && user === X.UI.Attr.USER.XNODE && this.xnode ){\r
+ this.xnode.css( X.UI.Attr.Rename[ name ] || name, this._createCssText( name ) );\r
+ //console.log( ( X.UI.Attr.Rename[ name ] || name ) + ' ' + this._createCssText( name ) + ' ' + propID + ' ' + attrs[ propID ] );\r
+ } else\r
+ if( this.dirty < dirty ) this.dirty = dirty; \r
};\r
- // update\r
- if( b !== this.b || r !== this.r || t !== this.t || l !== this.l ){\r
- this.l = l;\r
- this.t = t;\r
- this.r = r;\r
- this.b = b;\r
- this.parentData && this.parentData.clip === false && this.parentData.updateRectangle();\r
+ },\r
+\r
+ _createCssText : function( name ){\r
+ var attrs = this.attrObject || this.attrClass.prototype || X.UI.AttrClass,\r
+ def = this.supportAttrs[ name ],\r
+ no = def.No,\r
+ v = attrs[ def.No ],\r
+ type = def[ 3 ],\r
+ list = def[ 4 ],\r
+ flag = !!( type & X.UI.Attr.Type.BOOLEAN ),\r
+ combi = !!( type & X.UI.Attr.Type.COMBI ),\r
+ quartet = !!( type & X.UI.Attr.Type.QUARTET );\r
+\r
+ if( quartet ){\r
+ if( attrs[ no + 1 ] === attrs[ no + 3 ] ){\r
+ if( v === attrs[ no + 2 ] ){\r
+ if( v === attrs[ no + 1 ] ){\r
+ return this._createCssValue( v, type, list );\r
+ };\r
+ return [\r
+ this._createCssValue( v, type, list ),\r
+ this._createCssValue( attrs[ no + 1 ], type, list )\r
+ ].join( ' ' );\r
+ };\r
+ return [\r
+ this._createCssValue( v, type, list ),\r
+ this._createCssValue( attrs[ no + 1 ], type, list ),\r
+ this._createCssValue( attrs[ no + 2 ], type, list )\r
+ ].join( ' ' );\r
+ };\r
+ return [\r
+ this._createCssValue( v, type, list ),\r
+ this._createCssValue( attrs[ no + 1 ], type, list ),\r
+ this._createCssValue( attrs[ no + 2 ], type, list ),\r
+ this._createCssValue( attrs[ no + 3 ], type, list )\r
+ ].join( ' ' );\r
+ } else\r
+ if( combi ){\r
+ return [\r
+ this._createCssValue( v, type, list ),\r
+ this._createCssValue( attrs[ no + 1 ], type, list )\r
+ ].join( ' ' );\r
+ } else\r
+ if( flag ){\r
+ return v ? list : 'normal'; // \r
};\r
+ return this._createCssValue( v, type, list );\r
},\r
- \r
- capcher : function( x, y ){\r
- var nodes, child, _x, _y, hit, i;\r
- if( this._disabled === true ) return false;\r
- delete this.hitChildData;\r
- x -= this.x;\r
- y -= this.y;\r
- // この部分 Box に移動\r
- if( nodes = this.nodes ){\r
- _x = x - this.scrollingX;\r
- _y = y - this.scrollingY;\r
- for( i = nodes.length; i; ){\r
- child = nodes[ --i ];\r
- if( child._disabled === false && child.l <= _x && _x < child.r && child.t <= _y && _y < child.b && child.capcher( _x, _y ) === true ){\r
- this.hitChildData = child;\r
- break;\r
+\r
+ _createCssValue : function( v, type, list ){\r
+ var length = !!( type & X.UI.Attr.Type.LENGTH ),\r
+ minusLen = !!( type & X.UI.Attr.Type.MINUS_LENGTH ),\r
+ percent = !!( type & X.UI.Attr.Type.PERCENT ),\r
+ minusPct = !!( type & X.UI.Attr.Type.MINUS_PERCENT ),\r
+ numerical = !!( type & X.UI.Attr.Type.NUMERICAL ),\r
+ auto = !!( type & X.UI.Attr.Type.AUTO ),\r
+ color = !!( type & X.UI.Attr.Type.COLOR ),\r
+ url = !!( type & X.UI.Attr.Type.URL ),\r
+ fontName = !!( type & X.UI.Attr.Type.FONT_NAME );\r
+ \r
+ if( X.Type.isNumber( v ) ){\r
+ if( auto && v === X.UI.Attr.AUTO ) return 'auto';\r
+ if( length || minusLen ) return v + 'em';\r
+ if( numerical ) return v;\r
+ if( list && list[ v ] ) return list[ v ];\r
+ if( color ){\r
+ if( v < 0x100000 ){\r
+ v = '00000' + v.toString( 16 );\r
+ return '#' + v.substr( v.length - 6 );\r
};\r
+ return '#' + v.toString( 16 );\r
};\r
};\r
- if( this.through === true ){\r
- this.hitChildData && this.hitSelf === false && this.rootData.hoverList.push( this );\r
- return !!this.hitChildData;\r
+ if( X.Type.isString( v ) ){\r
+ if( percent || minusPct || url || fontName ) return v;\r
};\r
- hit = 0 <= x && x < this.w && 0 <= y && y < this.h;\r
- ( this.hitChildData || hit ) && this.hitSelf === false && this.rootData.hoverList.push( this );\r
- if( hit === true && this.hitChildData === null ) this.rootData.targetNodeData = this;\r
- return hit || !!this.hitChildData;\r
+ },\r
+\r
+ getAttr : function( name ){\r
+ var attrs = this.attrObject || this.attrClass.prototype || X.UI.AttrClass,\r
+ support = this.supportAttrs[ name ],\r
+ v, type, list;\r
+ if( !support ) return;\r
+ \r
+ if( name.indexOf( 'border' ) === 0 ){\r
+ name = name.substr( 6 );\r
+ return [ this.getAttr( 'borderTop' + name ), this.getAttr( 'borderRight' + name ), this.getAttr( 'borderBottom' + name ), this.getAttr( 'borderLeft' + name ) ];\r
+ };\r
+ \r
+ type = support[ 3 ];\r
+ // Unit\r
+ if( type & X.UI.Attr.Type.QUARTET ){\r
+ return [ this.getAttr( name + 'Top' ), this.getAttr( name + 'Right' ), this.getAttr( name + 'Bottom' ), this.getAttr( name + 'Left' ) ];\r
+ };\r
+ if( type & X.UI.Attr.Type.COMBI ) return [ v, data[ ++propID ] ];\r
+ \r
+ v = attrs[ support.No ]; \r
+ if( type & X.UI.Attr.Type.AUTO && v === X.UI.Attr.AUTO ) return 'auto'; \r
+ \r
+ list = support[ 4 ];\r
+ if( list ) return list[ v ];\r
+ \r
+ if( type & X.UI.Attr.Type.COLOR && X.Type.isNumber( v ) ) return v;\r
+ if( !( type & X.UI.Attr.Type.NUMERICAL ) && X.Type.isNumber( v ) ) return v + 'em';\r
+ return v;\r
},\r
\r
+ // em, px, %\r
+ getAttrWithUnit : function( prop, unit ){\r
+ \r
+ },\r
+\r
_remove : function(){\r
switch( this.phase ){\r
case 4:\r
case 3:\r
- //this.styleData.afterAddition();\r
+\r
case 2:\r
- //this.rawElement.parentNode.removeChild( this.rawElement );\r
- this.rawElement.remove();\r
+ \r
case 1:\r
- //this.styleData.initialize();\r
+ this.xnode.destroy();\r
+ \r
delete this.root;\r
delete this.rootData;\r
delete this.parent;\r
delete this.parentData;\r
- delete this.rawElement;\r
+ delete this.xnode;\r
+ \r
+ delete this.phase;\r
};\r
- delete this.phase;\r
+ \r
},\r
//killed\r
- \r
- \r
- content : function( v ){\r
- if( Type.isString( v ) === true ){\r
- if( !this.rawText || this.rawText.data !== v ){\r
- this._content = v;\r
- this.updateContent = true;\r
- };\r
- return this.User;\r
- } else\r
- if( v === null ){\r
- if( this._content !== v && this.rawText ){\r
- this.updateContent = true;\r
- };\r
- delete this._content;\r
- return this.User;\r
+\r
+ calculate : function( isNeedsDetection, x, y, allowedW, allowedH ){\r
+ this.preMesure( allowedW, allowedH );\r
+ \r
+ if( this.boxWidth === X.UI.Attr.AUTO || this.boxHeight === X.UI.Attr.AUTO ){\r
+ this.mesure();\r
+ this.postMesure();\r
};\r
- if( this._content || this._content === null ) return this._content;\r
- if( this.rawText ) return this.rawText.data;\r
- return null;\r
+ \r
+ !isNeedsDetection && this.updateLayout( x, y );\r
+ },\r
+ \r
+ /**\r
+ * X.Dom.BoxModel の情報を引きながら top,left,width,height,padding,border の設定\r
+ */\r
+ updateLayout : function( x, y ){\r
+ this.boxX = x;\r
+ this.boxY = y;\r
+ this.xnode\r
+ .css( 'left', x ? x + 'em' : 0 )\r
+ .css( 'top', y ? y + 'em' : 0 )\r
+ .css( 'width', this.contentWidth ? _AbstractUINode.ceil( this.contentWidth ) + 'em' : 0 )\r
+ .css( 'height', this.contentHeight ? _AbstractUINode.ceil( this.contentHeight ) + 'em' : 0 )\r
+ .css( 'padding', this._createCssText( 'padding' ) )\r
+ .css( 'borderWidth', this._createCssText( 'borderWidth' ) );\r
},\r
-\r
-\r
\r
/*\r
* 親の サイズを元に自身のサイズを計算していく\r
*/\r
- preMesure : function( allowW, allowH ){\r
- var style = this.styleData,\r
- styles, calc, box, min, max,\r
+ preMesure : function( allowedW, allowedH ){\r
+ var attrs = this.attrObject || this.attrClass.prototype || X.UI.AttrClass,\r
+ calc = _AbstractUINode.calcValue,\r
+ box = attrs[ X.UI.Attr.Support.sizing.No ],\r
+ min, max,\r
+ boxL, boxT, boxR, boxB,\r
contentW, contentH, boxMinus,\r
paddingT, paddingR, paddingB, paddingL,\r
borderT, borderR, borderB, borderL;\r
-\r
- if( style ){\r
- styles = style.data;\r
- calc = _AbstractUINode.calcValue;\r
- box = styles[ X.Css.AttrNo.sizing ];\r
- \r
- // Width が確定するパターン\r
- // 自身が constraintW の場合 親が AUTO ではない\r
- // 自身が constraintW でない場合自身が AUTO はなくかつ親 が AUTO の場合 or 自身は % でない\r
- if( style.constraintW ? allowW !== AUTO : !style.autoWidth && ( allowW !== AUTO || !style.percentWidth ) ){\r
- if( style.constraintW ){ // 制約レイアウト\r
- contentW = allowW - calc( styles[ X.Css.AttrNo.left ], allowW ) - calc( styles[ X.Css.AttrNo.right ], allowW );\r
- } else {\r
- contentW = _AbstractUINode.finalValue( styles[ X.Css.AttrNo.width ], styles[ X.Css.AttrNo.minWidth ], styles[ X.Css.AttrNo.maxWidth ], allowW ); \r
- };\r
- paddingR = calc( styles[ X.Css.AttrNo.padding + 1 ], allowW );\r
- paddingL = calc( styles[ X.Css.AttrNo.padding + 3 ], allowW );\r
- borderR = styles[ X.Css.AttrNo.border + 1 ];\r
- borderL = styles[ X.Css.AttrNo.border + 3 ];\r
- boxMinus = 0;\r
- switch( box ){\r
- case 2 : // border-box\r
- boxMinus -= borderR + borderL;\r
- case 1 : // padding-box\r
- boxMinus -= paddingR + paddingL;\r
- // case 0 : // content-box\r
- };\r
- this.contentL = borderL + paddingL;\r
- this.contentR = borderR + paddingR; \r
- this.contentWidth = contentW + boxMinus;\r
- this.boxWidth = contentW - boxMinus + this.contentL + this.contentR;\r
- this.boxSizingOffsetLR = boxMinus;\r
- } else {\r
- this.boxWidth = this.contentWidth = AUTO;\r
- min = styles[ X.Css.AttrNo.minWidth ];\r
- max = styles[ X.Css.AttrNo.maxWidth ];\r
- this.minContentWidth = 1 <= min ? min : 0;\r
- this.maxContentWidth = 1 <= max ? max : AUTO;\r
- delete this.boxSizingOffsetLR;\r
- };\r
- \r
- // Height\r
- if( style.constraintH ? allowH !== AUTO : !style.autoHeight && ( allowH !== AUTO || !style.percentHeight ) ){\r
- if( style.constraintH ){ // 制約レイアウト\r
- contentH = allowH - calc( styles[ X.Css.AttrNo.top ], allowH ) - calc( styles[ X.Css.AttrNo.bottom ], allowH );\r
- } else {\r
- contentH = _AbstractUINode.finalValue( styles[ X.Css.AttrNo.height ], styles[ X.Css.AttrNo.minHeight ], styles[ X.Css.AttrNo.maxHeight ], allowH );\r
- };\r
- paddingT = calc( styles[ X.Css.AttrNo.padding + 0 ], allowH );// paddingTRBL の % 指定は 最大幅に対して TB でも幅に対して\r
- paddingB = calc( styles[ X.Css.AttrNo.padding + 2 ], allowH );\r
- borderT = styles[ X.Css.AttrNo.border + 0 ];\r
- borderB = styles[ X.Css.AttrNo.border + 2 ];\r
- this.boxHeight = contentH;\r
- boxMinus = 0;\r
- switch( box ){\r
- case 2 : // border-box\r
- boxMinus -= borderT + borderB;\r
- case 1 : // padding-box\r
- boxMinus -= paddingT + paddingB;\r
- // case 0 : // content-box\r
- }; \r
- this.contentT = borderT + paddingT;\r
- this.conetntB = borderB + paddingB; \r
- this.contentHeight = contentH + boxMinus;\r
- this.boxHeight = contentH - boxMinus + this.contentT + this.conetntB; // padding-box の場合 border だけ足される\r
- this.boxSizingOffsetTB = boxMinus;\r
+ \r
+ // Width が確定するパターン\r
+ // 自身が constraintW の場合 親が AUTO ではない\r
+ // 自身が constraintW でない場合自身が AUTO はなくかつ親 が AUTO の場合 or 自身は % でない\r
+ \r
+ paddingR = calc( attrs[ X.UI.Attr.Support.padding.No + 1 ], allowedW );\r
+ paddingL = calc( attrs[ X.UI.Attr.Support.padding.No + 3 ], allowedW );\r
+ borderR = calc( attrs[ X.UI.Attr.Support.borderWidth.No + 1 ], allowedW );\r
+ borderL = calc( attrs[ X.UI.Attr.Support.borderWidth.No + 3 ], allowedW );\r
+ boxMinus = 0;\r
+ switch( box ){\r
+ case 3 : // border-box\r
+ boxMinus -= borderR + borderL;\r
+ case 2 : // padding-box\r
+ boxMinus -= paddingR + paddingL;\r
+ // case 1 : // content-box\r
+ };\r
+ this.contentL = borderL + paddingL;\r
+ this.contentR = borderR + paddingR;\r
+ \r
+ if( this.constraintW ? allowedW !== X.UI.Attr.AUTO : !this.autoWidth && ( allowedW !== X.UI.Attr.AUTO || !this.percentWidth ) ){\r
+ if( this.constraintW ){ // 制約レイアウト\r
+ contentW = allowedW - ( boxL = calc( attrs[ X.UI.Attr.Support.left.No ], allowedW ) ) - ( boxR = calc( attrs[ X.UI.Attr.Support.right.No ], allowedW ) );\r
} else {\r
- this.boxHeight = this.contentHeight = AUTO;\r
- min = styles[ X.Css.AttrNo.minHeight ];\r
- max = styles[ X.Css.AttrNo.maxHeight ];\r
- this.minContentHeight = 1 <= min ? min : 0;\r
- this.maxContentHeight = 1 <= max ? max : AUTO;\r
- delete this.boxSizingOffsetTB;\r
+ 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
};\r
- } else {\r
- this.boxWidth = this.contentWidth = allowW;\r
- this.boxHeight = this.contentHeight = allowH;\r
+ this.contentWidth = contentW + boxMinus;\r
+ this.scrollWidth = this.contentWidth + this.contentL + this.contentR;\r
+ this.boxWidth = contentW - boxMinus + this.contentL + this.contentR;\r
+ this.boxSizingOffsetLR = boxMinus;\r
delete this.minContentWidth;\r
delete this.maxContentWidth;\r
+ delete this.minBoxWidth;\r
+ delete this.maxBoxWidth;\r
+ } else { \r
+ this.minContentWidth = calc( attrs[ X.UI.Attr.Support.minWidth.No ], allowedW ) + boxMinus;\r
+ this.maxContentWidth = calc( attrs[ X.UI.Attr.Support.maxWidth.No ], allowedW ) + boxMinus;\r
+ this.scrollWidth = this.contentWidth + this.contentL + this.contentR;\r
+ this.minBoxWidth = this.minContentWidth - boxMinus + this.contentL + this.contentR;\r
+ this.maxBoxWidth = this.maxContentWidth - boxMinus + this.contentL + this.contentR;\r
+ //delete this.contentWidth;\r
+ //delete this.scrollWidth;\r
+ //delete this.boxWidth;\r
+ //delete this.boxSizingOffsetLR;\r
+ };\r
+ \r
+ paddingT = calc( attrs[ X.UI.Attr.Support.padding.No + 0 ], allowedH );// paddingTRBL の % 指定は 最大幅に対して TB でも幅に対して\r
+ paddingB = calc( attrs[ X.UI.Attr.Support.padding.No + 2 ], allowedH );\r
+ borderT = calc( attrs[ X.UI.Attr.Support.borderWidth.No + 0 ], allowedH );\r
+ borderB = calc( attrs[ X.UI.Attr.Support.borderWidth.No + 2 ], allowedH );\r
+ boxMinus = 0;\r
+ switch( box ){\r
+ case 3 : // border-box\r
+ boxMinus -= borderT + borderB;\r
+ case 2 : // padding-box\r
+ boxMinus -= paddingT + paddingB;\r
+ // case 1 : // content-box\r
+ };\r
+ this.contentT = borderT + paddingT;\r
+ this.contentB = borderB + paddingB;\r
+ \r
+ // Height\r
+ if( this.constraintH ? allowedH !== X.UI.Attr.AUTO : !this.autoHeight && ( allowedH !== X.UI.Attr.AUTO || !this.percentHeight ) ){\r
+ if( this.constraintH ){ // 制約レイアウト\r
+ contentH = allowedH - ( boxT = calc( attrs[ X.UI.Attr.Support.top.No ], allowedH ) ) - ( boxB = calc( attrs[ X.UI.Attr.Support.bottom.No ], allowedH ) );\r
+ } else {\r
+ 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
+ }; \r
+ this.contentHeight = contentH + boxMinus;\r
+ this.scrollHeight = this.contentHeight + this.contentT + this.contentB;\r
+ this.boxHeight = contentH - boxMinus + this.contentT + this.contentB; // padding-box の場合 border だけ足される\r
+ this.boxSizingOffsetTB = boxMinus;\r
delete this.minContentHeight;\r
delete this.maxContentHeight;\r
- delete this.contentL;\r
- delete this.contentT;\r
- delete this.contentR;\r
- delete this.contentB;\r
+ delete this.minBoxHeight;\r
+ delete this.maxBoxHeight;\r
+ } else {\r
+ this.minContentHeight = calc( attrs[ X.UI.Attr.Support.minHeight.No ], allowedH ) + boxMinus;\r
+ this.maxContentHeight = calc( attrs[ X.UI.Attr.Support.maxHeight.No ], allowedH ) + boxMinus; \r
+ this.minBoxHeight = this.minContentHeight - boxMinus + this.contentT + this.contentB;\r
+ this.maxBoxHeight = this.maxContentHeight - boxMinus + this.contentT + this.contentB;\r
+ \r
+ //delete this.contentHeight;\r
+ //delete this.scrollHeight;\r
+ //delete this.boxHeight;\r
+ //delete this.boxSizingOffsetTB;\r
+ };\r
+ \r
+ if( this.parentData && this.parentData.layout.overrideAttrsForChild.left ){\r
+ if( this.constraintW ){\r
+ this.boxX = ( boxL || boxL === 0 ) ? boxL : calc( attrs[ X.UI.Attr.Support.left.No ], allowedW );\r
+ } else\r
+ if( attrs[ X.UI.Attr.Support.right.No ] === null ){\r
+ this.boxX = ( boxL || boxL === 0 ) ? boxL : calc( attrs[ X.UI.Attr.Support.left.No ], allowedW );\r
+ } else {\r
+ this.boxX = alllowW - this.boxWidth - ( ( boxR || boxR === 0 ) ? boxR : calc( attrs[ X.UI.Attr.Support.right.No ], allowedW ) );\r
+ };\r
+ } else {\r
+ delete this.boxX;\r
+ };\r
+ \r
+ if( this.parentData && this.parentData.layout.overrideAttrsForChild.top ){\r
+ if( this.constraintH ){\r
+ this.boxY = ( boxT || boxT === 0 ) ? boxT : calc( attrs[ X.UI.Attr.Support.top.No ], allowedH );\r
+ } else\r
+ if( attrs[ X.UI.Attr.Support.bottom.No ] === null ){\r
+ this.boxY = ( boxT || boxT === 0 ) ? boxT : calc( attrs[ X.UI.Attr.Support.top.No ], allowedH );\r
+ } else {\r
+ this.boxY = allowedH - this.boxHeight - ( ( boxB || boxB === 0 ) ? boxB : calc( attrs[ X.UI.Attr.Support.bottom.No ], allowedH ) );\r
+ };\r
+ } else {\r
+ delete this.boxY;\r
};\r
},\r
\r
/**\r
- * 要素の追加・削除\r
- * 1. ペイントがある // 予約のみ\r
- * 2. コンテンツがある // 予約のみ *\r
- * 3. コンテンツを削除 // 予約のみ\r
- * 4. 要素を削除 // 予約のみ\r
- * \r
- * コンテンツの再計算\r
- * 0. 要素追加して css セット\r
- * 1. コンテンツの変更\r
- * 2. font 指定の変更\r
- * 3. contentWidth の変更 （コンテンツの高さの再計算） 前回の contentWidth の保持\r
- * \r
- * contentSize, scrollSize の決定\r
+ * 描画・計測を行って、contentSize, scrollSize の決定\r
*/\r
- _mesure : function( dirty ){\r
- var content = this._content,\r
- root = this.rootData,\r
- style = this.styleData,\r
- w = this.contentWidth,\r
- h = this.contentHeight;\r
- switch( this.updateContent === true ? X.Css.Dirty.CONTENT : dirty ){\r
+ mesure : function(){\r
+ var dirty = this.dirty,\r
+ w, h, xnode;\r
+ \r
+ if( dirty === X.UI.Dirty.CLEAN ){\r
+ if( this.percentWidth || this.percentHeight ){\r
+ \r
+ };\r
+ };\r
+ \r
+ switch( dirty ){\r
+ \r
+ case X.UI.Dirty.CONTENT : // コンテンツが変更された\r
+ case X.UI.Dirty.FONT : // フォントサイズが変更された\r
+ delete this.lastContentWidth;\r
+ delete this.lastContentHeight;\r
+ \r
+ case X.UI.Dirty.LAYOUT : // レイアウトの再計算が必要\r
+ \r
+ default : // TODO レイアウト崩れに対処 パフォーマンス悪い！\r
\r
- case X.Css.Dirty.CONTENT : // コンテンツが変更された\r
- case X.Css.Dirty.FONT : // フォントサイズが変更された\r
- this.hasTextNode && Node.root._startUpdate();\r
- this.lastContentWidth = -1;\r
- case X.Css.Dirty.REFLOW : // レイアウトの再計算が必要\r
+ w = this.contentWidth;\r
+ h = this.contentHeight;\r
+ xnode = this.xnode;\r
+ \r
/* http://web-designs.seesaa.net/article/188400668.html\r
* min-width の値が max-width の値より大きい場合は、max-width の値は min-width の値に設定される。\r
* \r
* 3. content のサイズがすでに決定している\r
* コンテンツの高さの再取得が必要\r
* 必要でない\r
- */ \r
- if( this.hasTextNode ){\r
- elm = this.rawElement;\r
- if( w === AUTO ){\r
- w = this.contentWidth = elm.width();\r
+ */\r
+ if( xnode._xnodes && xnode._xnodes.length ){\r
+ if( w === X.UI.Attr.AUTO ){\r
+ w = this.contentWidth = xnode.css( 'width', 'auto' ).width() / xnode._getCharSize();\r
+ console.log( xnode.width() + ' ' + xnode._getCharSize() + ' > ' + w );\r
+ \r
this.scrollWidth = w + this.contentL + this.contentR;\r
if( this.maxContentWidth < w - this.boxSizingOffsetLR ) this.contentWidth = this.maxContentWidth + this.boxSizingOffsetLR;\r
if( w - this.boxSizingOffsetLR < this.minContentWidth ) this.contentWidth = this.minContentWidth + this.boxSizingOffsetLR;\r
this.lastContentWidth = this.contentWidth;\r
\r
- w !== this.contentWidth && elm.css( 'width', this.contentWidth + 'px' );\r
+ w !== this.contentWidth && xnode.css( 'width', _AbstractUINode.ceil( this.contentWidth ) + 'em' );\r
\r
- if( h === AUTO ){\r
- this.conetntHeight = h = elm.height();\r
+ if( h === X.UI.Attr.AUTO ){\r
+ this.contentHeight = h = xnode.css( 'height', 'auto' ).scrollHeight() / xnode._getCharSize(); // scrollHeight() ??\r
this.scrollHeight = h + this.contentT + this.contentB;\r
if( this.maxContentHeight < h - this.boxSizingOffsetTB ) this.contentHeight = this.maxContentHeight + this.boxSizingOffsetTB;\r
if( h - this.boxSizingOffsetTB < this.minContentHeight ) this.contentHeight = this.minContentHeight + this.boxSizingOffsetTB;\r
} else {\r
- this.scrollHeight = elm.height() + this.contentT + this.contentB;\r
+ this.scrollHeight = h + this.contentT + this.contentB;\r
};\r
+ \r
+ this.lastContentHeight = h;\r
} else\r
- if( h === AUTO ){\r
+ if( h === X.UI.Attr.AUTO ){\r
if( w !== this.lastContentWidth ){\r
- elm.css( 'width', w + 'px' );\r
+ xnode.css( 'width', _AbstractUINode.ceil( w ) + 'em' );\r
+ \r
this.lastContentWidth = w;\r
- this.conetntHeight = h = elm.height();\r
+ this.contentHeight = h = xnode.css( 'height', 'auto' ).scrollHeight() / xnode._getCharSize();\r
this.scrollWidth = w + this.contentL + this.contentR;\r
this.scrollHeight = h + this.contentT + this.contentB;\r
if( this.maxContentHeight < h - this.boxSizingOffsetTB ) this.contentHeight = this.maxContentHeight + this.boxSizingOffsetTB;\r
if( h - this.boxSizingOffsetTB < this.minContentHeight ) this.contentHeight = this.minContentHeight + this.boxSizingOffsetTB; \r
} else {\r
- this.scrollWidth = w + this.contentL + this.contentR;\r
- this.scrollHeight = h + this.contentT + this.contentB;\r
- //root.paintReserve( this );\r
+ this.contentHeight = this.lastContentHeight = h =\r
+ this.lastContentHeight === -1 ? xnode.css( 'height', 'auto' ).scrollHeight() / xnode._getCharSize() : this.lastContentHeight;\r
+ this.scrollWidth = w + this.contentL + this.contentR;\r
+ this.scrollHeight = h + this.contentT + this.contentB;\r
};\r
} else\r
- if( dirty !== X.Css.Dirty.REFLOW ){\r
- this.contentWidth = elm.width();\r
- this.contentHeight = elm.height();\r
+ if( dirty !== X.UI.Dirty.LAYOUT ){\r
+ this.contentWidth = this.lastContentWidth = w; //xnode.width();\r
+ this.contentHeight = this.lastContentHeight = xnode.css( 'height', 'auto' ).scrollHeight() / xnode._getCharSize();\r
this.scrollWidth = this.contentWidth + this.contentL + this.contentR;\r
this.scrollHeight = this.contentHeight + this.contentT + this.contentB;\r
} else {\r
- //root.paintReserve( this );\r
this.scrollWidth = w + this.contentL + this.contentR;\r
this.scrollHeight = h + this.contentT + this.contentB;\r
}; \r
} else {\r
// コンテンツを持たないため基本のサイズは0\r
- if( w === AUTO ) this.contentWidth = w = 0 < this.minContentWidth ? this.minContentWidth : 0;\r
- if( h === AUTO ) this.contentHeight = h = 0 < this.minContentHeight ? this.minContentHeight : 0;\r
+ if( w === X.UI.Attr.AUTO ) this.contentWidth = w = 0 < this.minContentWidth ? this.minContentWidth : 0;\r
+ if( h === X.UI.Attr.AUTO ) this.contentHeight = h = 0 < this.minContentHeight ? this.minContentHeight : 0;\r
this.scrollWidth = w + this.contentL + this.contentR;\r
this.scrollHeight = h + this.contentT + this.contentB;\r
- //root.paintReserve( this );\r
};\r
+ \r
+ delete this.dirty;\r
break; \r
- case X.Css.Dirty.PAINT : // 再描画のみ必要\r
- root.paintReserve( this );\r
- break; \r
+ //case X.UI.Dirty.PAINT : // 再描画のみ必要\r
+ // break;\r
};\r
},\r
/**\r
- * 自身のコンテンツサイズを元に AUTO な width, height を確定していく\r
+ * 自身の contentWidth, contentHeight を元に AUTO な width, height を確定していく\r
*/\r
postMesure : function(){\r
- var style = this.styleData,\r
- styles, calc, box,\r
+ var attrs = this.attrObject || this.attrClass.prototype || X.UI.AttrClass,\r
+ calc = _AbstractUINode.calcValue,\r
+ box = attrs[ X.UI.Attr.Support.sizing.No ],\r
contentW, contentH,\r
contentPlus,\r
paddingT, paddingR, paddingB, paddingL,\r
borderT, borderR, borderB, borderL,\r
min, max;\r
- if( style ){\r
- styles = style.data;\r
- calc = _AbstractUINode.advancedCalcValue;\r
+ \r
+ // Width\r
+ if( this.boxWidth === X.UI.Attr.AUTO ){\r
contentW = this.contentWidth;\r
- box = styles[ X.Css.AttrNo.sizing ];\r
+ paddingR = calc( attrs[ X.UI.Attr.Support.padding.No + 1 ], contentW ); \r
+ paddingL = calc( attrs[ X.UI.Attr.Support.padding.No + 3 ], contentW ); \r
+ borderR = calc( attrs[ X.UI.Attr.Support.borderWidth.No + 1 ], contentW );\r
+ borderL = calc( attrs[ X.UI.Attr.Support.borderWidth.No + 3 ], contentW );\r
+ contentPlus = 0;\r
+ switch( box ){\r
+ case 3 : // border-box\r
+ contentPlus = borderR + borderL;\r
+ case 2 : // padding-box\r
+ contentPlus += paddingR + paddingL;\r
+ // case 1 : // content-box\r
+ };\r
\r
- // Width\r
- if( this.boxWidth === AUTO ){\r
- paddingR = calc( styles[ X.Css.AttrNo.padding + 1 ], contentW ); \r
- paddingL = calc( styles[ X.Css.AttrNo.padding + 3 ], contentW ); \r
- borderR = styles[ X.Css.AttrNo.border + 1 ]; \r
- borderL = styles[ X.Css.AttrNo.border + 3 ];\r
- contentPlus = 0;\r
- switch( box ){\r
- case 2 : // border-box\r
- contentPlus = borderR + borderL;\r
- case 1 : // padding-box\r
- contentPlus += paddingR + paddingL;\r
- // case 0 : // content-box\r
- };\r
- \r
- if( !style.constraintW ){\r
- contentW += contentPlus;\r
- min = styles[ X.Css.AttrNo.minWidth ];\r
- max = styles[ X.Css.AttrNo.maxWidth ];\r
- if( contentW < min && contentPlus < min ){\r
- this.contentWidth = min - contentPlus;\r
- } else\r
- if( max < contentW && contentPlus < max ){\r
- this.contentWidth = max - contentPlus;\r
- };\r
+ if( !this.constraintW ){\r
+ contentW += contentPlus;\r
+ min = calc( attrs[ X.UI.Attr.Support.minWidth.No ], contentW );\r
+ max = calc( attrs[ X.UI.Attr.Support.maxWidth.No ], contentW );\r
+ if( contentW < min && contentPlus < min ){\r
+ this.contentWidth = min - contentPlus;\r
+ } else\r
+ if( max < contentW && contentPlus < max ){\r
+ this.contentWidth = max - contentPlus;\r
};\r
- this.contentL = borderL + paddingL;\r
- this.contentR = borderR + paddingR;\r
- this.boxWidth = this.contentWidth + this.contentL + this.contentR;\r
};\r
- // Height\r
- if( this.boxHeight === AUTO ){\r
- contentH = this.contentHeight;\r
- paddingT = calc( styles[ X.Css.AttrNo.padding + 0 ], contentH );// paddingTRBL の % 指定は 最大幅に対して TB でも幅に対して\r
- paddingB = calc( styles[ X.Css.AttrNo.padding + 2 ], contentH );\r
- borderT = styles[ X.Css.AttrNo.border + 0 ];\r
- borderB = styles[ X.Css.AttrNo.border + 2 ];\r
- contentPlus = 0;\r
- switch( box ){\r
- case 2 : // border-box\r
- contentPlus = borderT + borderB;\r
- case 1 : // padding-box\r
- contentPlus += paddingT + paddingB;\r
- // case 0 : // content-box\r
- };\r
- if( !style.constraintH ){\r
- contentH += contentPlus;\r
- min = styles[ X.Css.AttrNo.minHeight ];\r
- max = styles[ X.Css.AttrNo.maxHeight ];\r
- if( contentH < min && contentPlus < min ){\r
- this.contentHeight = min - contentPlus;\r
- } else\r
- if( max < contentH && contentPlus < max ){\r
- this.contentHeight = max - contentPlus;\r
- };\r
+ this.contentL = borderL + paddingL;\r
+ this.contentR = borderR + paddingR;\r
+ this.boxWidth = this.contentWidth + this.contentL + this.contentR;\r
+ };\r
+ // Height\r
+ if( this.boxHeight === X.UI.Attr.AUTO ){\r
+ contentH = this.contentHeight;\r
+ paddingT = calc( attrs[ X.UI.Attr.Support.padding.No + 0 ], contentH );// paddingTRBL の % 指定は 最大幅に対して TB でも幅に対して\r
+ paddingB = calc( attrs[ X.UI.Attr.Support.padding.No + 2 ], contentH );\r
+ borderT = calc( attrs[ X.UI.Attr.Support.borderWidth.No + 0 ], contentH );\r
+ borderB = calc( attrs[ X.UI.Attr.Support.borderWidth.No + 2 ], contentH );\r
+ contentPlus = 0;\r
+ switch( box ){\r
+ case 3 : // border-box\r
+ contentPlus = borderT + borderB;\r
+ case 2 : // padding-box\r
+ contentPlus += paddingT + paddingB;\r
+ // case 1 : // content-box\r
+ };\r
+ if( !this.constraintH ){\r
+ contentH += contentPlus;\r
+ min = calc( attrs[ X.UI.Attr.Support.minHeight.No ], contentH );\r
+ max = calc( attrs[ X.UI.Attr.Support.maxHeight.No ], contentH );\r
+ if( contentH < min && contentPlus < min ){\r
+ this.contentHeight = min - contentPlus;\r
+ } else\r
+ if( max < contentH && contentPlus < max ){\r
+ this.contentHeight = max - contentPlus;\r
};\r
- this.contentT = borderT + paddingT;\r
- this.contentB = borderB + paddingB;\r
- this.boxHeight = this.contentHeight + this.contentT + this.contentB;\r
- }; \r
- } else {\r
- this.boxWidth = this.contentWidth;\r
- this.boxHeight = this.contentHeight;\r
- delete this.minContentWidth;\r
- delete this.maxContentWidth;\r
- delete this.minContentHeight;\r
- delete this.maxContentHeight;\r
- delete this.contentL;\r
- delete this.contentT;\r
- delete this.contentR;\r
- delete this.contentB;\r
+ };\r
+ this.contentT = borderT + paddingT;\r
+ this.contentB = borderB + paddingB;\r
+ this.boxHeight = this.contentHeight + this.contentT + this.contentB;\r
+ };\r
+ },\r
+\r
+ capcher : function( x, y ){\r
+ if( this.pointerDisabled ) return false;\r
+ \r
+ x -= this.boxX;\r
+ y -= this.boxY;\r
+\r
+ if( 0 <= x && x < this.boxWidth && 0 <= y && y < this.boxHeight ){\r
+ \r
+ !this.hovering && ( this.rootData.hoverList[ this.rootData.hoverList.length ] = this );\r
+ this.rootData.targetNodeData = this;\r
+ return true;\r
};\r
},\r
\r
+ \r
listen : function( type, arg1, arg2, arg3 ){\r
var root, events, counter;\r
if( X.UI.Event._START_POINTER <= type && type <= X.UI.Event._END_POINTER ){\r
this.gesture.listen( type );\r
};\r
} else {\r
+ console.log( type )\r
root = this.rootData;\r
counter = root.eventCounter;\r
if( counter[ type ] ){\r
++counter[ type ];\r
} else {\r
counter[ type ] = 1; \r
- root.elmMouseCatch.listen( X.UI.Event.IdToName[ type ], eventRellay );\r
+ root.xnodeInteractiveLayer.listen( X.UI.Event.IdToName[ type ], eventRellay );\r
};\r
};\r
};\r
if( !counter[ type ] ) return this;\r
--counter[ type ];\r
if( counter[ type ] === 0 ){\r
- X.Dom.Event.remove( root.elmMouseCatch, X.UI.Event.IdToName[ type ], eventRellay );\r
+ root.xnodeInteractiveLayer.unlisten( X.UI.Event.IdToName[ type ], eventRellay );\r
delete counter[ type ];\r
};\r
};\r
}\r
);\r
\r
+_AbstractUINode.calcValue = function( styleValue, srcValue ){\r
+ /*\r
+ * String の場合は必ず %\r
+ */ \r
+ if( X.Type.isString( styleValue ) ){\r
+ return srcValue * parseFloat( styleValue ) / 100;\r
+ };\r
+ if( !X.Type.isNumber( styleValue ) ) return 0;\r
+ return styleValue;\r
+};\r
+\r
_AbstractUINode.finalValue = function( styleValue, styleMin, styleMax, srcValue ){\r
var calc = _AbstractUINode.calcValue,\r
v = calc( styleValue, srcValue ),\r
- min = calc( styleMin, srcValue ),\r
- max = calc( styleMax, srcValue );\r
- if( v < min ) return min;\r
- if( max < v ) return max;\r
- return v;\r
-};\r
-_AbstractUINode.calcValue = function( styleValue, srcValue ){\r
- switch( styleValue ){\r
- case 0 :\r
- return 0;\r
- case AUTO :\r
- return AUTO;\r
- case FULL :\r
- return srcValue; // 100%\r
- };\r
- if( 1 <= styleValue ) return styleValue; // legth\r
- if( -1 < styleValue ) return FLOOR( srcValue * styleValue ); // % \r
- return styleValue; // - length\r
+ min = calc( styleMin, srcValue ),\r
+ max = calc( styleMax, srcValue );\r
+ return v <= min ? min : max <= v ? max : v;\r
};\r
-_AbstractUINode.advancedCalcValue = function( styleValue, srcValue ){\r
- switch( styleValue ){\r
- case 0 :\r
- return 0;\r
- case AUTO :\r
- return srcValue;\r
- case FULL :\r
- //throw new Error( 'advancedCalcValue FULL' ); \r
- // return ; // 100%\r
+_AbstractUINode.ceil = function( v ){\r
+ if( 0 <= v ){\r
+ return ( v * 10 + 0.999 | 0 ) / 10;\r
};\r
- if( 1 <= styleValue ) return styleValue; \r
- if( -1 < styleValue ) return FLOOR( ( srcValue / ( 1 - styleValue ) ) * styleValue ); // % \r
- return styleValue; // - length\r
+ return ( -v * 10 + 0.999 | 0 ) / -10;\r
};\r
\r
-\r
var AbstractUINode = X.Class.create(\r
'AbstractUINode',\r
X.Class.ABSTRACT | X.Class.SUPER_ACCESS,\r
{\r
- style : null,\r
parent : function(){\r
return X.Class._getPrivate( this ).parent;\r
},\r
root : function(){\r
return X.Class._getPrivate( this ).root;\r
},\r
+ \r
+ /*\r
+ * unverifiedAttrs に全ての指定を控える\r
+ * サポートされていない場合は無視される．親のレイアウトによって変わる\r
+ */\r
+ attr : function( nameOrObject, valueOrUnit ){\r
+ var p = X.Class._getPrivate( this ),\r
+ layout, k, def, attrs, v;\r
+ if( nameOrObject && X.Type.isObject( nameOrObject ) ){\r
+ // setter\r
+ layout = p.parentData && p.parentData.layout.overrideAttrsForChild; // root には parent がない\r
+ for( k in nameOrObject ){\r
+ // 親のレイアウトマネージャの許可しない\r
+ if( layout && !layout[ k ] ){\r
+ continue;\r
+ };\r
+ if( def = p.supportAttrs[ k ] ){\r
+ p.setAttr( k, def, nameOrObject[ k ] );\r
+ };\r
+ };\r
+ } else\r
+ if( X.Type.isString( nameOrObject ) ){\r
+ if( valueOrUnit !== undefined ){\r
+ if( 'em,%'.indexOf( valueOrUnit ) === -1 ){\r
+ // setter\r
+ p.setAttr( nameOrObject, valueOrUnit );\r
+ } else {\r
+ // getter with unit\r
+ return p.getAttrWithUnit( nameOrObject, valueOrUnit );\r
+ };\r
+ };\r
+ // getter\r
+ if( attrs = ( p.attrObject || p.attrClass.prototype || X.UI.AttrClass ) ){\r
+ def = p.supportAttrs[ nameOrObject ];\r
+ return def && attrs[ def.No ];\r
+ };\r
+ return v;\r
+ };\r
+ return this;\r
+ },\r
+ \r
listen : function( type, arg1, arg2, arg3 ){\r
X.Class._getPrivate( this ).listen( type, arg1, arg2, arg3 );\r
return this;\r
X.Class._getPrivate( this ).unlisten( type, arg1, arg2, arg3 );\r
return this;\r
},\r
+ dispatch : function( e ){\r
+ return X.Class._getPrivate( this ).dispatch( e );\r
+ },\r
+ \r
getNextNode : function(){\r
\r
},\r
getPrevNode : function(){\r
\r
},\r
- dispatch : function( e ){\r
- return X.Class._getPrivate( this ).dispatch( e );\r
- },\r
nodeIndex : function( v ){\r
var data = X.Class._getPrivate( this );\r
if( typeof v === 'number' ){\r
displayIndex : function(){\r
\r
},\r
- // ちゃんとやれば不要！\r
- mesure : function(){\r
- var data = X.Class._getPrivate( this );\r
- data.mesure();\r
- 4 <= data.phase && data.rootData.reserveCalc();\r
- return this;\r
- },\r
getX : function(){\r
// dirty の場合、rootData.calculate\r
- return X.Class._getPrivate( this ).x;\r
+ return X.Class._getPrivate( this ).boxX;\r
},\r
getY : function(){\r
// dirty の場合、rootData.calculate\r
- return X.Class._getPrivate( this ).y;\r
+ return X.Class._getPrivate( this ).boxY;\r
},\r
getAbsoluteX : function(){\r
// dirty の場合、rootData.calculate\r
},\r
getWidth : function(){\r
// dirty の場合、rootData.calculate\r
- return X.Class._getPrivate( this ).w;\r
+ return X.Class._getPrivate( this ).boxWidth;\r
},\r
getHeight : function(){\r
// dirty の場合、rootData.calculate\r
- return X.Class._getPrivate( this ).h;\r
+ return X.Class._getPrivate( this ).boxHeight;\r
},\r
scrollTo : function( x, y ){\r
X.Class._getPrivate( this ).scrollTo( x, y );\r
return X.Class._getPrivate( this ).cursor( v );\r
}\r
}\r
-);
\ No newline at end of file
+);\r
+\r
OSDN Git Service
