overflow : hidden;\r
}\r
\r
-#xui div {\r
+.PageRoot div {\r
/* 要素は絶対配置される */\r
position : absolute;\r
top : 0;\r
margin : 0;\r
/* ブラウザのレイアウト機能による auto なサイズ指定は行わない */\r
overflow : hidden;\r
-/* border-box がデフォルト */\r
+/* border-box がデフォルト \r
box-sizing : border-box;\r
-o-box-sizing : border-box;\r
-ms-box-sizing : border-box;\r
-moz-box-sizing : border-box;\r
-khtml-box-sizing : border-box;\r
- -webkit-box-sizing : border-box;\r
+ -webkit-box-sizing : border-box;*/\r
/* browser bug fix */\r
-moz-opacity : 0.99;\r
zoom : 1;\r
<html lang="ja" class="js-disabled">\r
<head>\r
<meta charset="utf-8">\r
-<title>X</title>\r
+<title>New X.UI</title>\r
<meta name="HandheldFriendly" content="true">\r
<meta name="mobileoptimized" content="0">\r
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">\r
<meta name="apple-mobile-web-app-capable">\r
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,maximum-scale=1">\r
<link rel="stylesheet" type="text/css" media="all" href="css/ju.css">\r
-<link rel="stylesheet" type="text/css" media="all" href="css/tree.css">\r
\r
<script type="text/javascript" src="js/core/00_builtin.js"></script>\r
<script type="text/javascript" src="js/core/00_X.js"></script>\r
<script type="text/javascript" src="js/dom/18_XDomQuery.js"></script>\r
<script type="text/javascript" src="js/dom/19_XDomParser.js"></script>\r
<script type="text/javascript" src="js/dom/20_XDomImage.js"></script>\r
-<!-- <script type="text/javascript" src="js/dom/22_XDomBuilder.js"></script> -->\r
+<!--<script type="text/javascript" src="js/dom/22_XDomBuilder.js"></script>-->\r
\r
<script type="text/javascript" src="js/ui/00_XUI.js"></script>\r
+<script type="text/javascript" src="js/ui/02_XUI_Attr.js"></script>\r
<script type="text/javascript" src="js/ui/04_XUI_Event.js"></script>\r
-\r
<script type="text/javascript" src="js/ui/05_XUI_Gesture.js"></script>\r
<script type="text/javascript" src="js/ui/06_AbstractUINode.js"></script>\r
-<script type="text/javascript" src="js/ui/07_LayoutManagerBase.js"></script>\r
<script type="text/javascript" src="js/ui/08_Box.js"></script>\r
-<script type="text/javascript" src="js/ui/09_UINodeStyle.js"></script>\r
<script type="text/javascript" src="js/ui/11_VBox.js"></script>\r
<script type="text/javascript" src="js/ui/12_HBox.js"></script>\r
<script type="text/javascript" src="js/ui/13_TileBox.js"></script>\r
<script type="text/javascript" src="js/ui/14_ChromeBox.js"></script>\r
-<!--<script type="text/javascript" src="js/ui/15_ScrollBox.js"></script>-->\r
-<script type="text/javascript" src="js/ui/16_PageRoot.js"></script>\r
+<script type="text/javascript" src="js/ui/15_ScrollBox.js"></script>\r
<script type="text/javascript" src="js/ui/17_Text.js"></script>\r
+<script type="text/javascript" src="js/ui/20_PageRoot.js"></script>\r
+\r
+<script type="text/javascript" src="js/main.js"></script>\r
\r
</head>\r
<body></body>\r
+++ /dev/null
-/*\r
- * + checkActiveX\r
- * + fetch core lib x_ie6.js || x._gecko36.js\r
- * + ResponsiveImage\r
- */\r
-\r
-var options = {\r
- outputID : 'bootstrap-output',\r
- \r
- responsiveCSS : [\r
- ]\r
-};\r
-\r
-;(function( window, document, options, undefined ){\r
-\r
-var emptyFunction = new Function();\r
-\r
-// この script は head の中に書かれているか？\r
-var inHead = (function(){\r
- var ss = document.getElementsByTagName ? document.getElementsByTagName( 'script' ) :\r
- document.all ? document.all.tags( 'script' ) : null,\r
- self = ss ? ss[ ss.length - 1 ] : null,\r
- parent = self ? ( self.parentNode || self.parentElement ) : null;\r
- if( parent && parent.tagName.toUpperCase() === 'HEAD' ) return true;\r
- return false;\r
-})();\r
-\r
-// body にアクセス可能にする\r
-var body = document.body;\r
-if( !body ){\r
- document.write('<body>');\r
- body = document.body;\r
-};\r
-\r
-\r
-var UA = (function(){\r
- var acme = {};\r
- var n = navigator;\r
- var dua = n.userAgent;\r
- var dav = n.appVersion;\r
- var tv = parseFloat(dav);\r
- acme.isOpera = (dua.indexOf("Opera") >= 0) ? tv: undefined;\r
- acme.isKhtml = (dav.indexOf("Konqueror") >= 0) ? tv : undefined;\r
- acme.isWebKit = parseFloat(dua.split("WebKit\/")[1]) || undefined;\r
- acme.isChrome = parseFloat(dua.split("Chrome\/")[1]) || undefined;\r
- acme.isGecko = (dua.indexOf("Gecko\/") >= 0) ? parseFloat(dua.split("rv:")[1].replace( /^(\d*\.\d*)\.(\d*)/, '$1$2' )) : undefined;\r
- var index = Math.max(dav.indexOf("WebKit"), dav.indexOf("Safari"), 0);\r
- if(index && !acme.isChrome){\r
- acme.isSafari = parseFloat(dav.split("Version/")[1]);\r
- if(!acme.isSafari || parseFloat(dav.substr(index + 7)) <= 419.3){\r
- acme.isSafari = 2;\r
- };\r
- };\r
- if(document.all && !acme.isOpera){\r
- acme.isIE = parseFloat(dav.split("MSIE ")[1]) || undefined;\r
- };\r
- \r
- return acme;\r
-})();\r
-\r
-\r
-// load CoreLib\r
-(function(){\r
- var test = new Function( 'return !!( window.X && X.$ )' ),\r
- libs = [\r
- 'js/builtin.js',\r
- 'js/xua.js',\r
- 'js/xtype.js',\r
- 'js/xcallback.js',\r
- 'js/xtimer.js',\r
- 'js/xviewport.js',\r
- 'js/xdom.js',\r
- 'js/xdomevent.js',\r
- 'js/xquery.js'\r
- ],\r
- src, script,\r
- root = inHead ?\r
- ( document.getElementsByTagName ? document.getElementsByTagName('head')[0] :\r
- document.all ? document.all.tags( 'HEAD' )[0] : document.head )\r
- : document.body,\r
- timerID = window.setInterval( function(){\r
- if( test() === true ){\r
- window.clearInterval( timerID );\r
- onLibReady();\r
- test = onLibReady = null;\r
- };\r
- }, 0 );\r
- \r
- while( libs.length ){\r
- src = libs.shift();\r
- if( document.getElementById ){\r
- script = document.createElement( 'script' );\r
- root.appendChild( script );\r
- script.src = src;\r
- } else\r
- if( document.all ){\r
- root.insertAdjacentHTML( 'BeforeEnd', '<script src="' + src + '">' );\r
- };\r
- };\r
- libs = src = script = null;\r
- \r
- \r
- var onLibReady = function(){\r
- X.Dom.Event.add( window, 'load', ResponsiveImage.onPageLoad );\r
- //();\r
- }; \r
-})();\r
-\r
-\r
-/*\r
- * http://code.google.com/p/css3-mediaqueries-js/source/browse/trunk/css3-mediaqueries_src.js\r
- */\r
-var nativeSupport = function () {\r
- // check support for media queries\r
- var id = 'css3-mediaqueries-test';\r
- var el = document.createElement('div');\r
- el.id = id;\r
- var style = cssHelper.addStyle('@media all and (width) { #' + id + ' { width: 1px !important; } }', false);\r
- // false means don't parse this temp style\r
- body.appendChild(el);\r
- var ret = el.offsetWidth === 1;\r
- style.parentNode.removeChild(style);\r
- el.parentNode.removeChild(el);\r
- nativeSupport = new Function('return ' + ret);\r
- return ret;\r
-};\r
-\r
-\r
-\r
-\r
-var ResponsiveImage = {\r
- images : [],\r
- attrs : [],\r
- timerID : -1,\r
- _onload : false,\r
- detect : function(){\r
- var regW = /.*width=['"]?([0-9]+)['"]?.*/,\r
- regH = /.*height=['"]?([0-9]+)['"]?.*/,\r
- images = document.images,\r
- saved = ResponsiveImage.images,\r
- attrs = ResponsiveImage.attrs,\r
- i = 0,\r
- l = images.length,\r
- img, w, h, html;\r
- for( ; i < l; ++i ){\r
- img = images[ i ];\r
- if( saved.indexOf( img ) === -1 ){\r
- html = img.outerHTML; // for IE8\r
- w = html ? html.replace( regW, '$1' ) : img.getAttribute( 'width' );\r
- h = html ? html.replace( regH, '$1' ) : img.getAttribute( 'height' );\r
- if( !isFinite( w ) || !isFinite( h ) || !isFinite( w / h ) ){\r
- continue;\r
- };\r
- saved[ saved.length ] = img;\r
- attrs[ saved.length - 1 ] = {\r
- src : img.src, // get Absolute\r
- lowsrc : img.lowsrc,\r
- getSrc : ResponsiveImage._getResponsiveSrc,\r
- width : w,\r
- height : h,\r
- ratio : h / w\r
- };\r
- img.src = img.lowsrc = '';\r
- };\r
- };\r
- if( ResponsiveImage._onload === true ){\r
- window.clearInterval( ResponsiveImage.timerID );\r
- delete ResponsiveImage.timerID;\r
- delete ResponsiveImage.detect;\r
- delete ResponsiveImage._onload;\r
- \r
- ResponsiveImage.onResize();\r
- X.Dom.add( ResponsiveImage.onResize );\r
- };\r
- },\r
- start : function(){\r
- ResponsiveImage.timerID = window.setInterval( ResponsiveImage.detect, 0 );\r
- delete ResponsiveImage.start;\r
- },\r
- onPageLoad : function(){\r
- ResponsiveImage._onload = true;\r
- delete ResponsiveImage.onPageLoad;\r
- },\r
- onResize : function( e ){\r
- var saved = ResponsiveImage.images,\r
- attrs = ResponsiveImage.attrs,\r
- id = 'img-area-size',\r
- i = 0,\r
- l = saved.length,\r
- $, img, attr, div, w;\r
- for( ; i < l; ++i ){\r
- img = saved[ i ];\r
- attr = attrs[ i ];\r
- X.$( img ).before( '<div id="' + id + '"></div>' );\r
- div = X.Dom.getElementById( id );\r
- w = div.offsetWidth;\r
- if( attr.width < w ) w = attr.width;\r
- img.style.width = w + 'px';\r
- img.style.height = attr.ratio * w + 'px';\r
- img.src = attr.getSrc( attr.src, w );\r
- X.$( div ).remove();\r
- };\r
- },\r
- _getResponsiveSrc : function( src, width ){\r
- var attr = this,\r
- src = attr.src,\r
- url = document.location.href;\r
- if( ( url.indexOf( 'file:' ) === 0 || url.indexOf( '://localhost' ) ) && src.indexOf( 'http' ) !== 0 ){\r
- attr.getSrc = ResponsiveImage._getSrcLocal;\r
- } else\r
- if( src.indexOf( 'bp.bp.blogspot.com/' ) ){\r
- attr.getSrc = ResponsiveImage._getSrcBlogger;\r
- } else\r
- if( src.indexOf( '.googleusercontent.com/' ) ){\r
- attr.getSrc = ResponsiveImage._getSrcPicasa;\r
- } else {\r
- attr.getSrc = ResponsiveImage._getSrcSenchaIO;\r
- };\r
- return attr.getSrc( src, width );\r
- },\r
- _getSrcLocal : function( src, width ){\r
- return src;\r
- },\r
- _getSrcBlogger : function( src, width ){\r
- return src;\r
- },\r
- _getSrcPicasa : function( src, width ){\r
- return src;\r
- },\r
- _getSrcFlicker : function( src, width ){\r
- return src;\r
- },\r
- _getSrcSenchaIO : function( src, width ){\r
- return src;\r
- }\r
-};\r
-ResponsiveImage.start();\r
-\r
-\r
-\r
-var BICFixed = false;\r
-// bonus: hotfix for IE6 SP1 (bug KB823727)\r
-try {\r
- document.execCommand("BackgroundImageCache", false, true);\r
- BICFixed = true;\r
-}catch(e){};\r
-\r
-})( window, document, options );
\ No newline at end of file
klass.superClassOf = X.Class._superClassOf;\r
klass.subClassOf = X.Class._subClassOf;\r
\r
- if( X.UA.Safari && X.UA.Safari < 2 ){ // Webkit で判定、Gecko もこちら\r
- // Safari では、prototype の差し替えができない, 1.3 で確認\r
- // あとから super class にプロパティを足しても、sub に伝播しない、、、\r
- //traits && X.Class._override( klass.prototype, traits, false );\r
- //X.Class._override( X.Class._override( klass.prototype, CommonProps, false ), props, true );\r
- // F = new Function; F.prototype = traits; traits.constructor = klass; klass.prototype = new F;\r
+ if( X.UA.Safari && X.UA.Safari < 3 ){ // TODO Gecko もこちらへ\r
X.Class._override( X.Class._override( traits || klass.prototype, props, true ), CommonProps, false );\r
if( traits ) klass.prototype.__proto__ = traits;\r
} else {\r
list[ list.length ] = f =\r
( arg1 && !arg2 ) ?\r
arg1 :\r
- X.Callback.create( arg1, arg2, arg3 );\r
+ X.Callback.create( arg1, arg2, arg3 ); // TODO create しないで、arg1～arg3 を保持\r
f.once = X.EventDispatcher._once;\r
return this;\r
},\r
--- /dev/null
+\r
+PageRoot(\r
+ VBox({\r
+ width : '30%',\r
+ height : 10,\r
+ left : '10%',\r
+ top : 12,\r
+ bgColor : 0xcccccc\r
+ }),\r
+ VBox({\r
+ width : '50%',\r
+ height : 10,\r
+ left : '30%',\r
+ bottom : 12,\r
+ bgColor : 0x999999\r
+ }),\r
+ VBox(\r
+ {\r
+ width : '50%',\r
+ left : '49%',\r
+ top : 5,\r
+ bottom : 5,\r
+ bgColor : 0x666666,\r
+ borderColor : 0x111111,\r
+ borderWidth : [ 0.5, 1, 5 ],\r
+ borderStyle : 'solid dotted',\r
+ sizing : 'border'\r
+ },\r
+ Text( 'Hello,world' )\r
+ )\r
+);
\ No newline at end of file
-X.UI = X.UI || {};\r
-\r
-X.UI.State = {\r
- DEFAULT : 0,\r
- HOVER : 1,\r
- FOCUSED : 2,\r
- DISABLED : 4,\r
- CHECKED : 8,\r
- FIRST_CHILD : 16,\r
- LAST_CHILD : 32\r
-};\r
-\r
-X.Css = {};\r
-\r
-X.Css.Type = {\r
- LENGTH : 1,\r
- PERCENT : 2,\r
- COLOR : 4,\r
- U_DECIMAL : 8,\r
- NUMERICAL : 16,\r
- BOOLEAN : 32,\r
- QUARTET : 64,\r
- URL : 128,\r
- FONT_NAME : 256,\r
- LIST : 512,\r
- AUTO : 1024,\r
- COMBI : 2048\r
-};\r
-\r
-var AUTO = Number.POSITIVE_INFINITY;\r
-var FULL = X.Css; // something unigue value;\r
-var FLOOR = Math.floor;\r
-\r
/*\r
+ * init_only,\r
+ * always,\r
+ * \r
* uinode によって指定可能な css は異なる\r
* + 直接 xnode.css() に渡す値\r
* + uinode 内で加工してから xnode.css() に渡す値\r
* x, y, gap, childW, childH など\r
*/\r
\r
-X.Css.Option = {\r
- BORDER_STYLE : 'none,hidden,dotted,dashed,solid,double,groove,ridge,inset,outset'.split(','),\r
- POSITION_X : 'left,center,right'.split(','),\r
- POSITION_Y : 'top,center,bottom'.split(','),\r
- ALIGN : 'left,center,right,justify'.split(','),\r
- TEXT_DECORATION : 'none,underline,overline,line-through,blink'.split(','),\r
- TEXT_TRANSFORM : 'none,capitalize,lowercase,uppercase'.split(','),\r
- WIDTH_HEIGHT : [ 'auto' ],\r
- BOX_SIZING : 'content-box,padding-box,border-box'.split(',') // ,margin-box\r
-};\r
-\r
-X.Css.Dirty = {\r
- CLEAN : 0,\r
- PAINT : 1, // 再描画のみ必要\r
- REFLOW : 2, // レイアウト（ボックスサイズ)の再計算が必要\r
- FONT : 3, // フォントサイズが変更された\r
- CONTENT_UPDATE : 4 // コンテンツが変更された\r
-};\r
-\r
-X.Css.Attr = {\r
- borderWidth : [ X.Css.Dirty.REFLOW, 0, X.Css.Type.QUARTET | X.Css.Type.LENGTH ], // em [ top, right, bottom, left ]\r
- borderColor : [ X.Css.Dirty.PAINT, 4, X.Css.Type.QUARTET | X.Css.Type.COLOR ], // color [ top, right, bottom, left ]\r
- borderStyle : [ X.Css.Dirty.PAINT, 8, X.Css.Type.QUARTET | X.Css.Type.LIST, X.Css.Option.BORDER_STYLE ], // string [ top, right, bottom, left ]\r
- cornerRadius : [ X.Css.Dirty.PAINT, 12, X.Css.Type.QUARTET | X.Css.Type.LENGTH | X.Css.Type.PERCENT ], // em, px [ top, right, bottom, left ]\r
- bgColor : [ X.Css.Dirty.PAINT, 16, X.Css.Type.COLOR ], // color\r
- bgAlpha : [ X.Css.Dirty.PAINT, 17, X.Css.Type.U_DECIMAL ], // 0 - 1\r
- bgImgUrl : [ X.Css.Dirty.PAINT, 18, X.Css.Type.URL ], // url\r
- bgImgRepeatX : [ X.Css.Dirty.PAINT, 19, X.Css.Type.BOOLEAN ], // true / false\r
- bgImgRepeatY : [ X.Css.Dirty.PAINT, 20, X.Css.Type.BOOLEAN ], // true / false\r
- bgImgPositionX : [ X.Css.Dirty.PAINT, 21, X.Css.Type.LENGTH | X.Css.Type.PERCENT | X.Css.Type.LIST, X.Css.Option.POSITION_X ], // em %, px, string\r
- bgImgPositionY : [ X.Css.Dirty.PAINT, 22, X.Css.Type.LENGTH | X.Css.Type.PERCENT | X.Css.Type.LIST, X.Css.Option.POSITION_Y ], // em %, px, string\r
- shadowColor : [ X.Css.Dirty.PAINT, 23, X.Css.Type.COLOR ], // color\r
- shadowAlpha : [ X.Css.Dirty.PAINT, 24, X.Css.Type.U_DECIMAL ], // 0 - 1\r
- shadowOffsetX : [ X.Css.Dirty.PAINT, 25, X.Css.Type.LENGTH ], // em\r
- shadowOffsetY : [ X.Css.Dirty.PAINT, 26, X.Css.Type.LENGTH ], // em\r
- shadowBlur : [ X.Css.Dirty.PAINT, 27, X.Css.Type.LENGTH ], // em\r
- shadowSpread : [ X.Css.Dirty.PAINT, 28, X.Css.Type.LENGTH ], // em\r
- shadowInset : [ X.Css.Dirty.PAINT, 29, X.Css.Type.BOOLEAN ], // true / false\r
+X.UI = {\r
+ State : {\r
+ DEFAULT : 0,\r
+ HOVER : 1,\r
+ FOCUSED : 2,\r
+ DISABLED : 4,\r
+ CHECKED : 8,\r
+ FIRST_CHILD : 16,\r
+ LAST_CHILD : 32\r
+ },\r
\r
- color : [ X.Css.Dirty.PAINT, 30, X.Css.Type.COLOR ], // color\r
- fontFamily : [ X.Css.Dirty.FONT, 31, X.Css.Type.FONT_NAME ], // string\r
- fontSize : [ X.Css.Dirty.FONT, 32, X.Css.Type.LENGTH | X.Css.Type.PERCENT ], // em, %\r
- bold : [ X.Css.Dirty.FONT, 33, X.Css.Type.BOOLEAN ], // true / false\r
- italic : [ X.Css.Dirty.FONT, 34, X.Css.Type.BOOLEAN ], // true / false\r
- lineHeight : [ X.Css.Dirty.FONT, 35, X.Css.Type.LENGTH | X.Css.Type.PERCENT | X.Css.Type.NUMERICAL ], // em, %, \r
- letterSpacing : [ X.Css.Dirty.FONT, 36, X.Css.Type.LENGTH ], // em\r
- wordSpacing : [ X.Css.Dirty.FONT, 37, X.Css.Type.LENGTH ],\r
- align : [ X.Css.Dirty.FONT, 38, X.Css.Type.LIST, X.Css.Type.ALIGN ],\r
- decoration : [ X.Css.Dirty.PAINT, 39, X.Css.Type.LIST, X.Css.Type.TEXT_DECORATION ],\r
- transform : [ X.Css.Dirty.FONT, 40, X.Css.Type.LIST, X.Css.Type.TEXT_TRANSFORM ],\r
- textShadowColor : [ X.Css.Dirty.PAINT, 41, X.Css.Type.COLOR ],\r
- textShadowOffsetX : [ X.Css.Dirty.PAINT, 42, X.Css.Type.LENGTH ],\r
- textShadowOffsetY : [ X.Css.Dirty.PAINT, 43, X.Css.Type.LENGTH ],\r
- shadowBlur : [ X.Css.Dirty.PAINT, 44, X.Css.Type.LENGTH ],\r
+ Dirty : {\r
+ CLEAN : 0,\r
+ PAINT : 1, // 再描画のみ必要\r
+ LAYOUT : 2, // レイアウト（ボックスサイズ)の再計算が必要\r
+ FONT : 3, // フォントサイズが変更された\r
+ CONTENT : 4 // コンテンツが変更された\r
+ },\r
\r
- width : [ X.Css.Dirty.REFLOW, 45, X.Css.Type.LENGTH | X.Css.Type.PERCENT, X.Css.Option.WIDTH_HEIGHT ],\r
- minWidth : [ X.Css.Dirty.REFLOW, 46, X.Css.Type.LENGTH | X.Css.Type.PERCENT ],\r
- maxWidth : [ X.Css.Dirty.REFLOW, 47, X.Css.Type.LENGTH | X.Css.Type.PERCENT ],\r
- height : [ X.Css.Dirty.REFLOW, 48, X.Css.Type.LENGTH | X.Css.Type.PERCENT, X.Css.Option.WIDTH_HEIGHT ],\r
- minHeight : [ X.Css.Dirty.REFLOW, 49, X.Css.Type.LENGTH | X.Css.Type.PERCENT ],\r
- maxHeight : [ X.Css.Dirty.REFLOW, 50, X.Css.Type.LENGTH | X.Css.Type.PERCENT ],\r
- padding : [ X.Css.Dirty.REFLOW, 51, X.Css.Type.QUARTET | X.Css.Type.LENGTH | X.Css.Type.PERCENT ],\r
- margin : [ X.Css.Dirty.REFLOW, 55, X.Css.Type.QUARTET | X.Css.Type.LENGTH | X.Css.Type.PERCENT ],\r
- sizing : [ X.Css.Dirty.REFLOW, 59, X.Css.Type.LIST, X.Css.Option.BOX_SIZING ],\r
- pageBox : [ X.Css.Dirty.REFLOW, 60, X.Css.Type.BOOLEAN ], // true / false\r
- left : [ X.Css.Dirty.REFLOW, 61, X.Css.Type.LENGTH | X.Css.Type.PERCENT ],\r
- top : [ X.Css.Dirty.REFLOW, 62, X.Css.Type.LENGTH | X.Css.Type.PERCENT ],\r
- bottom : [ X.Css.Dirty.REFLOW, 63, X.Css.Type.LENGTH | X.Css.Type.PERCENT ],\r
- right : [ X.Css.Dirty.REFLOW, 64, X.Css.Type.LENGTH | X.Css.Type.PERCENT ]\r
+ Util : {\r
+ createChecker : function( str ){\r
+ var ret = {},\r
+ ary = str.split( ',' ),\r
+ l = ary.length,\r
+ i = 0, v;\r
+ for( ; i < l; ){\r
+ v = ary[ i ];\r
+ ret[ v ] = ++i;\r
+ ret[ i ] = v;\r
+ };\r
+ return ret;\r
+ }\r
+ },\r
+ \r
+ currentRootData : null,\r
+ \r
+ Layout : {\r
+ Base : X.Class.create(\r
+ 'X.UI.Layout.Base',\r
+ {\r
+ overrideAttrsForSelf : null,\r
+ overrideAttrsForChild : null,\r
+ calculate : X.emptyFunction //function( data, isNeedsDetection, x, y, w, h )\r
+ }\r
+ ),\r
+ create : function( props ){\r
+ return X.Class._override( new X.UI.Layout.Base, props, true );\r
+ }\r
+ }\r
};\r
\r
-X.Css.Attr.x = X.Css.Attr.left;\r
-X.Css.Attr.y = X.Css.Attr.top;\r
-\r
-X.Css.AttrNo = ( function(){\r
- var ret = {},\r
- obj = X.Css.Attr,\r
- max = 0,\r
- p, no;\r
- for( p in obj ){\r
- ret[ p ] = no = obj[ p ][ 1 ];\r
- if( max < no ) max = no;\r
- };\r
- ret.max = max;\r
- return ret;\r
-})();
\ No newline at end of file
--- /dev/null
+X.UI.Attr = {\r
+ AUTO : Number.POSITIVE_INFINITY,\r
+ FLOOR : new Function( 'v', 'return 0 <= v ? v | 0 : -( -v | 0 )' ),\r
+ \r
+ USER : {\r
+ XNODE : 0,\r
+ UINODE : 1,\r
+ LAYOUT : 2\r
+ },\r
+ \r
+ Type : {\r
+ LIST : 0,\r
+ LENGTH : 1, // '1.5em'\r
+ MINUS_LENGTH : 2,\r
+ PERCENT : 4, // '90%', 0.0 ~ 1.0 こういう指定はできない！\r
+ MINUS_PERCENT : 8,\r
+ NUMERICAL : 16, // 1.1 (lineHeight only)\r
+ AUTO : 32, // 'auto'\r
+ COLOR : 64, // 0x000000 ~ 0xFFFFFF, RED, #000000 ~ #FFFFFF, #000 ~ #FFF\r
+ URL : 128,\r
+ STRING : 128,\r
+ FONT_NAME : 256,\r
+ BOOLEAN : 512,\r
+ COMBI : 1024,\r
+ QUARTET : 2048,\r
+ DEFAULT_ONLY : 4096,\r
+ INIT_ONLY : 8192\r
+ },\r
+ \r
+ Option : {\r
+ BORDER_STYLE : X.UI.Util.createChecker( 'none,hidden,dotted,dashed,solid,double,groove,ridge,inset,outset' ),\r
+ ALIGN : X.UI.Util.createChecker( 'left,center,right,justify' ),\r
+ TEXT_DECORATION : X.UI.Util.createChecker( 'none,underline,overline,line-through,blink' ),\r
+ TEXT_TRANSFORM : X.UI.Util.createChecker( 'none,capitalize,lowercase,uppercase' ),\r
+ BOX_SIZING : X.UI.Util.createChecker( 'content,padding,border' ), // ,margin-box\r
+ CURSOR : X.UI.Util.createChecker( 'pointer,wait' )\r
+ },\r
+ \r
+ createAttrDef : function( base, defs ){\r
+ var F = base ? X.cloneObject( base ) : {},\r
+ z = base ? base._last : 0,\r
+ n = 1,\r
+ p, def;\r
+ \r
+ // 属性定義の上書き\r
+ for( p in defs ){\r
+ if( p === '_last' ) continue;\r
+ if( !X.Type.isArray( def = defs[ p ] ) ) continue;\r
+ F[ p ] = def;\r
+ if( !base || !X.Type.isArray( base[ p ] ) ){\r
+ def.No = z += n;\r
+ // add\r
+ n = def[ 3 ] & X.UI.Attr.Type.QUARTET ? 4 :\r
+ def[ 3 ] & X.UI.Attr.Type.COMBI ? 2 : 1;\r
+ } else {\r
+ def.No = base[ p ].No;\r
+ };\r
+ };\r
+ F._last = z;\r
+ return F;\r
+ },\r
+ \r
+ CSS3 : {\r
+ opacity : true,\r
+ bgColorAlpha : true,\r
+ bgGradient : true,\r
+ bgGradientAplha : true,\r
+ cournerRadius : true,\r
+ boxShadowBlur : true,\r
+ boxShadowAlpha : true,\r
+ glowBlur : true,\r
+ glowAlpha : true,\r
+ textShadowBlur : true,\r
+ textShadowAlpha : true\r
+ },\r
+ \r
+ Rename : {\r
+ bgColor : 'background-color',\r
+ fontColor : 'color',\r
+ fontBold : 'fontWeight',\r
+ fontItalic : 'fontStyle',\r
+ fontSmallCaps : 'fontVariant'\r
+ }\r
+};\r
+\r
+/*\r
+ * 0: 初期値 : undefined は不可！\r
+ * 1: dirty\r
+ * 2: この attr を処理する人\r
+ * 3: 受け付けるデータ型\r
+ * 4: 選択方式の場合、その候補\r
+ */\r
+X.UI.Attr.Support = X.UI.Attr.createAttrDef( false,\r
+{\r
+ className : [ null, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.DEFAULT_ONLY | X.UI.Attr.Type.STRING ],\r
+ pointerHoverClass : [ null, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.DEFAULT_ONLY | X.UI.Attr.Type.STRING ],\r
+ pointerDownClass : [ null, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.DEFAULT_ONLY | X.UI.Attr.Type.STRING ],\r
+ invalidLayoutColor: [ null, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.DEFAULT_ONLY | X.UI.Attr.Type.COLOR ],\r
+ \r
+ role : [ 0, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.INIT_ONLY | X.UI.Attr.Type.LIST, 'none,chrome' ],\r
+ selectable : [ false, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.INIT_ONLY | X.UI.Attr.Type.BOOLEAN ],\r
+ \r
+ visible : [ true, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.BOOLEAN ],\r
+ pointerEnabled : [ false, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.BOOLEAN ],\r
+ pointerChildren : [ true, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.BOOLEAN ],\r
+ cursor : [ null, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.LIST, X.UI.Attr.Option.CURSOR ],\r
+ tooltip : [ null, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.STRING ],\r
+ \r
+ borderWidth : [ 0, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.QUARTET | X.UI.Attr.Type.LENGTH | X.UI.Attr.Type.PERCENT ], // em [ top, right, bottom, left ]\r
+ padding : [ 0, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.QUARTET | X.UI.Attr.Type.LENGTH | X.UI.Attr.Type.PERCENT ],\r
+ \r
+ width : [ X.UI.Attr.AUTO, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH | X.UI.Attr.Type.PERCENT | X.UI.Attr.Type.AUTO ],\r
+ minWidth : [ 0, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH | X.UI.Attr.Type.PERCENT ],\r
+ maxWidth : [ X.UI.Attr.AUTO, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH | X.UI.Attr.Type.PERCENT | X.UI.Attr.Type.AUTO ],\r
+ height : [ X.UI.Attr.AUTO, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH | X.UI.Attr.Type.PERCENT | X.UI.Attr.Type.AUTO ],\r
+ minHeight : [ 0, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH | X.UI.Attr.Type.PERCENT ],\r
+ maxHeight : [ X.UI.Attr.AUTO, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH | X.UI.Attr.Type.PERCENT | X.UI.Attr.Type.AUTO ],\r
+ sizing : [ 0, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LIST, X.UI.Attr.Option.BOX_SIZING ],\r
+ left : [ null, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH | X.UI.Attr.Type.PERCENT | X.UI.Attr.Type.MINUS_LENGTH | X.UI.Attr.Type.MINUS_PERCENT ],\r
+ top : [ null, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH | X.UI.Attr.Type.PERCENT | X.UI.Attr.Type.MINUS_LENGTH | X.UI.Attr.Type.MINUS_PERCENT ],\r
+ bottom : [ null, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH | X.UI.Attr.Type.PERCENT | X.UI.Attr.Type.MINUS_LENGTH | X.UI.Attr.Type.MINUS_PERCENT ],\r
+ right : [ null, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH | X.UI.Attr.Type.PERCENT | X.UI.Attr.Type.MINUS_LENGTH | X.UI.Attr.Type.MINUS_PERCENT ], \r
+\r
+ borderColor : [ 0x0, X.UI.Dirty.PAINT, X.UI.Attr.USER.XNODE, X.UI.Attr.Type.QUARTET | X.UI.Attr.Type.COLOR ], // color [ top, right, bottom, left ]\r
+ borderStyle : [ 0, X.UI.Dirty.PAINT, X.UI.Attr.USER.XNODE, X.UI.Attr.Type.QUARTET | X.UI.Attr.Type.LIST, X.UI.Attr.Option.BORDER_STYLE ], // string [ top, right, bottom, left ]\r
+ bgColor : [ 0xFFFFFF, X.UI.Dirty.PAINT, X.UI.Attr.USER.XNODE, X.UI.Attr.Type.COLOR ], // color\r
+\r
+ fontColor : [ 0x0, X.UI.Dirty.PAINT, X.UI.Attr.USER.XNODE, X.UI.Attr.Type.COLOR ],\r
+ fontFamily : [ null, X.UI.Dirty.FONT, X.UI.Attr.USER.XNODE, X.UI.Attr.Type.FONT_NAME ],\r
+ fontSize : [ 1, X.UI.Dirty.FONT, X.UI.Attr.USER.XNODE, X.UI.Attr.Type.LENGTH | X.UI.Attr.Type.PERCENT ],\r
+ fontBold : [ false, X.UI.Dirty.FONT, X.UI.Attr.USER.XNODE, X.UI.Attr.Type.BOOLEAN, 'bold' ],\r
+ fontItalic : [ false, X.UI.Dirty.FONT, X.UI.Attr.USER.XNODE, X.UI.Attr.Type.BOOLEAN, 'italic' ],\r
+ fontSmallCaps : [ false, X.UI.Dirty.FONT, X.UI.Attr.USER.XNODE, X.UI.Attr.Type.BOOLEAN, 'small-caps' ],\r
+ lineHeight : [ 1, X.UI.Dirty.FONT, X.UI.Attr.USER.XNODE, X.UI.Attr.Type.NUMERICAL ], // percent\r
+ letterSpacing : [ 0, X.UI.Dirty.FONT, X.UI.Attr.USER.XNODE, X.UI.Attr.Type.LENGTH ],\r
+ wordSpacing : [ 0, X.UI.Dirty.FONT, X.UI.Attr.USER.XNODE, X.UI.Attr.Type.LENGTH ],\r
+ textAlign : [ 0, X.UI.Dirty.FONT, X.UI.Attr.USER.XNODE, X.UI.Attr.Type.LIST, X.UI.Attr.Option.ALIGN ],\r
+ textDecoration : [ 0, X.UI.Dirty.FONT, X.UI.Attr.USER.XNODE, X.UI.Attr.Type.LIST, X.UI.Attr.Option.TEXT_DECORATION ],\r
+ textTransform : [ 0, X.UI.Dirty.FONT, X.UI.Attr.USER.XNODE, X.UI.Attr.Type.LIST, X.UI.Attr.Option.TEXT_TRANSFORM ]\r
+}\r
+);\r
+\r
+/*\r
+ * 共通する attr 指定を prototype に設定しながら拡張できる、属性データ保持クラス\r
+ */\r
+\r
+X.UI.attrClassProto = null;\r
+\r
+X.UI.AttrClass = function( opt_supports, opt_attrs ){\r
+ var klass, proto, p, support;\r
+ if( opt_supports && opt_attrs ){\r
+ // クラス拡張\r
+ klass = new Function( 'a,b', 'var f=arguments.callee;if(a||b)return f._(a,b)' );\r
+ klass._ = X.UI.AttrClass;\r
+ klass.prototype = proto = new ( this._ === X.UI.AttrClass ? this : X.UI.AttrClass )();\r
+ proto.constructor = klass;\r
+ \r
+ // 属性プリセット\r
+ for( p in opt_supports ){\r
+ if( p === '_last' ) continue;\r
+ support = opt_supports[ p ];\r
+ proto[ support.No ] = support[ 0 ];\r
+ if( support[ 3 ] & X.UI.Attr.Type.QUARTET ){\r
+ proto[ support.No + 1 ] = support[ 0 ];\r
+ proto[ support.No + 2 ] = support[ 0 ];\r
+ proto[ support.No + 3 ] = support[ 0 ];\r
+ } else\r
+ if( support[ 3 ] & X.UI.Attr.Type.COMBI ){\r
+ proto[ support.No + 1 ] = support[ 0 ];\r
+ };\r
+ };\r
+ \r
+ // setAttr に書き換え\r
+ X.UI.attrClassProto = proto;\r
+ for( p in opt_attrs ){\r
+ _AbstractUINode.prototype.setAttr( p, opt_supports[ p ], opt_attrs[ p ] );\r
+ };\r
+ X.UI.attrClassProto = null;\r
+ return klass;\r
+ };\r
+};\r
+\r
+(function(){\r
+ var proto = X.UI.AttrClass.prototype,\r
+ supports = X.UI.Attr.Support,\r
+ support, p;\r
+ \r
+ for( p in supports ){\r
+ if( p === '_last' ) continue;\r
+ support = supports[ p ];\r
+ proto[ support.No ] = support[ 0 ];\r
+ if( support[ 3 ] & X.UI.Attr.Type.QUARTET ){\r
+ proto[ support.No + 1 ] = support[ 0 ];\r
+ proto[ support.No + 2 ] = support[ 0 ];\r
+ proto[ support.No + 3 ] = support[ 0 ];\r
+ } else\r
+ if( support[ 3 ] & X.UI.Attr.Type.COMBI ){\r
+ proto[ support.No + 1 ] = support[ 0 ];\r
+ };\r
+ };\r
+})();\r
+\r
_MOUSE_MOVE : ++X.UI.i,\r
_MOUSE_CANCEL : ++X.UI.i,\r
\r
- SELECT : ++X.UI.i, // click or tap or enterkey\r
- \r
FILE_DRAG : ++X.UI.i,\r
FILE_DRAG_START : ++X.UI.i,\r
FILE_DRAG_END : ++X.UI.i,\r
KEY_DOWN : ++X.UI.i,\r
KEY_UP : ++X.UI.i,\r
KEY_HOLD : ++X.UI.i,\r
+ KEY_CANCEL : ++X.UI.i,\r
\r
SCROLL_BEFORE_START : ++X.UI.i, // cancelable\r
SCROLL_START : ++X.UI.i,\r
ANIME_BEFORE_STOP : ++X.UI.i, // before cancel\r
ANIME_STOP : ++X.UI.i,\r
\r
+ PAGE_BEFORE_SHOW : ++X.UI.i,\r
+ PAGE_SHOW : ++X.UI.i,\r
+ PAGE_AFTER_SHOW : ++X.UI.i,\r
+ PAGE_BEFORE_HIDE : ++X.UI.i,\r
+ PAGE_HIDE : ++X.UI.i,\r
+ PAGE_AFTER_HIDE : ++X.UI.i,\r
+\r
+ // X.UI.Form\r
CHANGE : ++X.UI.i,\r
SUBMIT : ++X.UI.i,\r
+ SELECT : ++X.UI.i, // click or tap or enterkey\r
\r
IdToName : {},\r
NameToID : {}\r
'_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
+ root : null,\r
+ rootData : null,\r
+ hoverList : null,\r
+ parent : null,\r
+ parentData : null,\r
+ xnode : null,\r
+\r
+ supportAttrs : X.UI.Attr.Support,\r
+ attrClass : X.UI.AttrClass,\r
+ attrObject : null,\r
+ unverifiedAttrs : null,\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
+ role : null,\r
+ pointerDisabled : false,\r
+ hoverClassName : null,\r
+ hovering : false,\r
+ \r
+ reserveEvents : null,\r
+ gesture : 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
+ x : 0,\r
+ y : 0,\r
\r
- _content : null,\r
- updateContent : false,\r
+ t : 0, // top\r
+ l : 0, // left\r
+ b : 0, // bottom\r
+ r : 0, // right\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
\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
+ var events = this.reserveEvents,\r
+ l, i; \r
+ \r
this.root = root;\r
this.rootData = rootData;\r
+ this.hoverList = rootData.hoverList;\r
this.parent = parent;\r
this.parentData = parentData;\r
- this.rawElement = X.Dom.Node.create( 'div' );\r
+ //this.xnode = X.Dom.Node.create( 'div' );\r
+ this.phase = 1;\r
\r
- this.styleData.initialize();\r
- \r
- this.phase = 1;\r
this.dispatch( { type : X.UI.Event.INIT } );\r
+ \r
+ // html 要素が親に追加されるまで控えていたイベントの登録\r
+ if( events && ( l = events.length ) ){\r
+ for( i = 0; i < l; ++i ){\r
+ this.listen.apply( this, events[ i ] );\r
+ };\r
+ events.length = 0;\r
+ delete this.reserveEvents;\r
+ }; \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
- l, i;\r
- if( nodes ){\r
- for( i = 0, l = nodes.length; i < l; ++i ){\r
- nodes[ i ].creationComplete();\r
+ this.phase = 3;\r
+ this.User.dispatch( { type : X.UI.Event.CREATION_COMPLETE } );\r
+ },\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
+ 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
- this.mesure();\r
\r
- // this.scroll === true && ScrollBarManager.register( this );\r
+ if( ( quartet || combi ) && !X.Type.isArray( v ) ){\r
+ v = [ v ];\r
+ };\r
\r
- // html 要素が親に追加されるまで控えていたイベントの登録\r
- if( events && ( l = events.length ) ){\r
- for( i = 0; i < l; ++i ){\r
- this.listen.apply( this, events[ i ] );\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
- events.length = 0;\r
- delete this.reserveEvents;\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
- \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
+ 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( 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
- this.updateRectangle();\r
},\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
+\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
- 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( 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
+\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
+ return '#' + v.toString( 16 );\r
};\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
+ if( X.Type.isString( v ) ){\r
+ if( percent || minusPct || url || fontName ) return v;\r
};\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
- };\r
+\r
+ getAttr : function( name ){\r
+ var attrs = this.attrObject || this.attrClass.prototype || X.UI.AttrClass,\r
+ support = this.supportAttrs[ name ],\r
+ v;\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
- if( this.through === true ){\r
- this.hitChildData && this.hitSelf === false && this.rootData.hoverList.push( this );\r
- return !!this.hitChildData;\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
- 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
+ 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
+ this.xnode.destroy();\r
case 1:\r
- //this.styleData.initialize();\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, allowW, allowH ){\r
+ this.preMesure( allowW, allowH );\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
+ x += this.boxX;\r
+ y += this.boxY;\r
+ this.xnode\r
+ .css( 'left', x ? x + 'em' : 0 )\r
+ .css( 'top', y ? y + 'em' : 0 )\r
+ .css( 'width', this.contentWidth ? this.contentWidth + 'em' : 0 )\r
+ .css( 'height', this.contentHeight ? 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
+ 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 ], allowW );\r
+ paddingL = calc( attrs[ X.UI.Attr.Support.padding.No + 3 ], allowW );\r
+ borderR = calc( attrs[ X.UI.Attr.Support.borderWidth.No + 1 ], allowW );\r
+ borderL = calc( attrs[ X.UI.Attr.Support.borderWidth.No + 3 ], allowW );\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 ? allowW !== X.UI.Attr.AUTO : !this.autoWidth && ( allowW !== X.UI.Attr.AUTO || !this.percentWidth ) ){\r
+ if( this.constraintW ){ // 制約レイアウト\r
+ contentW = allowW - ( boxL = calc( attrs[ X.UI.Attr.Support.left.No ], allowW ) ) - ( boxR = calc( attrs[ X.UI.Attr.Support.right.No ], allowW ) );\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 ], allowW ); \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 ], allowW ) + boxMinus;\r
+ this.maxContentWidth = calc( attrs[ X.UI.Attr.Support.maxWidth.No ], allowW ) + 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 ], allowH );// paddingTRBL の % 指定は 最大幅に対して TB でも幅に対して\r
+ paddingB = calc( attrs[ X.UI.Attr.Support.padding.No + 2 ], allowH );\r
+ borderT = calc( attrs[ X.UI.Attr.Support.borderWidth.No + 0 ], allowH );\r
+ borderB = calc( attrs[ X.UI.Attr.Support.borderWidth.No + 2 ], allowH );\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.conetntB = borderB + paddingB;\r
+ \r
+ // Height\r
+ if( this.constraintH ? allowH !== X.UI.Attr.AUTO : !this.autoHeight && ( allowH !== X.UI.Attr.AUTO || !this.percentHeight ) ){\r
+ if( this.constraintH ){ // 制約レイアウト\r
+ contentH = allowH - ( boxT = calc( attrs[ X.UI.Attr.Support.top.No ], allowH ) ) - ( boxB = calc( attrs[ X.UI.Attr.Support.bottom.No ], allowH ) );\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 ], allowH );\r
+ }; \r
+ this.contentHeight = contentH + boxMinus;\r
+ this.scrollHeight = this.contentHeight + this.contentT + this.contentB;\r
+ this.boxHeight = contentH - boxMinus + this.contentT + this.conetntB; // 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 ], allowH ) + boxMinus;\r
+ this.maxContentHeight = calc( attrs[ X.UI.Attr.Support.maxHeight.No ], allowH ) + boxMinus; \r
+ this.minBoxHeight = this.minContentHeight - boxMinus + this.contentT + this.conetntB;\r
+ this.maxBoxHeight = this.maxContentHeight - boxMinus + this.contentT + this.conetntB;\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 ], allowW );\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 ], allowW );\r
+ } else {\r
+ this.boxX = alllowW - this.boxWidth - ( ( boxR || boxR === 0 ) ? boxR : calc( attrs[ X.UI.Attr.Support.right.No ], allowW ) );\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 ], allowH );\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 ], allowH );\r
+ } else {\r
+ this.boxY = allowH - this.boxHeight - ( ( boxB || boxB === 0 ) ? boxB : calc( attrs[ X.UI.Attr.Support.bottom.No ], allowH ) );\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
+ switch( dirty ){\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
+ case X.UI.Dirty.CONTENT : // コンテンツが変更された\r
+ case X.UI.Dirty.FONT : // フォントサイズが変更された\r
+ delete this.lastContentWidth;\r
+ case X.UI.Dirty.LAYOUT : // レイアウトの再計算が必要\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.width() / xnode._getCharSize();\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', this.contentWidth + 'em' );\r
\r
- if( h === AUTO ){\r
- this.conetntHeight = h = elm.height();\r
+ if( h === X.UI.Attr.AUTO ){\r
+ this.conetntHeight = h = xnode.height() / xnode._getCharSize();\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 = xnode.height() / xnode._getCharSize() + this.contentT + this.contentB;\r
};\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', w + 'em' );\r
this.lastContentWidth = w;\r
- this.conetntHeight = h = elm.height();\r
+ this.conetntHeight = h = xnode.height() / 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
} else {\r
this.scrollWidth = w + this.contentL + this.contentR;\r
this.scrollHeight = h + this.contentT + this.contentB;\r
- //root.paintReserve( this );\r
};\r
} else\r
- if( dirty !== 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 = xnode.height() / 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
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
+ 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
- \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
- };\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.x;\r
+ y -= this.y;\r
+\r
+ if( 0 <= x && x < this.boxWidth && 0 <= y && y < this.boxHeight ){\r
+ !this.hovering && ( this.hoverList[ this.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
}\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
+ * String の場合は必ず %\r
+ */ \r
+ if( X.Type.isString( styleValue ) ){\r
+ return srcValue * parseFloat( styleValue ) / 100;\r
};\r
- if( 1 <= styleValue ) return styleValue; // legth\r
- if( -1 < styleValue ) return FLOOR( srcValue * styleValue ); // % \r
- return styleValue; // - length\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
- };\r
- if( 1 <= styleValue ) return styleValue; \r
- if( -1 < styleValue ) return FLOOR( ( srcValue / ( 1 - styleValue ) ) * styleValue ); // % \r
- return styleValue; // - length\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
+ return v <= min ? min : max <= v ? max : v;\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
},\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
+++ /dev/null
-var LayoutManagerBase = X.Class.create(
- 'LayoutManagerBase',
- {
- allowForSelf : null,
- allowForChild : null,
- define : function( src ){
- return X.Class._override( this, src, true );
- },
-
-
- reflow : function( nodeData, allowW, allowH ){
- nodeData.preMesure( allowW, allowH );
-
- var children = nodeData.children,
- contentW = nodeData.contentWidth,
- contentH = nodeData.contentHeight,
- autoW = contentW === AUTO,
- autoH = contentH === AUTO,
- auto, calc, childW, childH, child, i, style, data,
- t, r, b, l;
- if( children ){
- auto = autoW && autoH;
- childW = 0;
- childH = 0;
- calc = BasicLayoutManager.calcValue;
- for( i = children.length; i; ){
- child = children[ --i ];
- style = child.__style;
- if( style ){
- data = style.data;
- t = calc( data[ X.Css.AttrNo.top ], contentH );
- r = calc( data[ X.Css.AttrNo.right ], contentW );
- b = calc( data[ X.Css.AttrNo.bottom ], contentH );
- l = calc( data[ X.Css.AttrNo.left ], contentW );
- } else {
- t = r = b = l = 0;
- };
- if( child.instanceOf( LayoutBoxPrivate ) ){
- child.layoutManager.reflow( child, contentW - r - l, contentH - t - b );
- } else {
- child.preMesure( contentW - r - l, contentH - t - b );
- child.mesure();
- child.postMesure();
- };
- if( !auto ) continue;
- if( autoW && childW < child.boxWidth + r + l ) childW = child.boxWidth + r + l;
- if( autoH && childH < child.boxHeight + t + b ) childH = child.boxHeight + t + b;
- };
- if( autoW ) nodeData.contentWidth = childW;
- if( autoH ) nodeData.contentHeight = childH;
- };
- ( autoW || autoH ) && nodeData.postMesure();
-
- delete nodeData.dirty;
- },
- redraw : function( nodeData ){
- var root = nodeData.rootData;
- root.dirty === X.Css.Dirty.REFLOW && this.reflow( root );
-
- // draw
- }
- }
-);
\r
+X.UI.Layout.Canvas = X.UI.Layout.create( {\r
+ name : 'CanvasLayout',\r
+ \r
+ overrideAttrsForSelf : {\r
+ selectable : false,\r
+ role : [ 0, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.INIT_ONLY | X.UI.Attr.Type.LIST, 'none,chrome,container' ],\r
+ \r
+ width : [ '100%', X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH | X.UI.Attr.Type.PERCENT ],\r
+ maxWidth : [ X.UI.Attr.AUTO, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH | X.UI.Attr.Type.PERCENT ],\r
+ height : [ 0, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH | X.UI.Attr.Type.PERCENT ],\r
+ maxHeight : [ X.UI.Attr.AUTO, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH | X.UI.Attr.Type.PERCENT ]\r
+ },\r
+ \r
+ overrideAttrsForChild : {\r
+ left : true,\r
+ top : true,\r
+ bottom : true,\r
+ right : true\r
+ },\r
+ \r
+ calculate : function( data, isNeedsDetection, x, y, w, h ){\r
+ var uinodes, l, _x, _y, _w, _h, node;\r
+\r
+ data.preMesure( w, h );\r
+ \r
+ if( isNeedsDetection && ( data.boxWidth === X.UI.Attr.AUTO || data.boxHeight === X.UI.Attr.AUTO ) ) return;\r
+ \r
+ _x = data.contentL;\r
+ _y = data.contentT;\r
+ _w = data.contentWidth;\r
+ _h = data.contentHeight;\r
+\r
+ if( ( uinodes = data.uinodes ) && ( l = uinodes.length ) ){\r
+ for( i = 0; i < l; ++i ){\r
+ node = uinodes[ i ];\r
+ node.calculate( false, _x, _y, _w, _h ); \r
+ };\r
+ } else\r
+ if( data.contentHeight === X.UI.Attr.AUTO ){\r
+ data.contentHeight = data.minContentHeight !== X.UI.Attr.AUTO ? data.minContentHeight : 0;\r
+ };\r
+ \r
+ data.postMesure();\r
+ data.updateLayout( x, y );\r
+ }\r
+});\r
+\r
+\r
var _Box = _AbstractUINode.inherits(\r
'_Box',\r
- X.Class.PRIVATE_DATA,\r
+ X.Class.PRIVATE_DATA | X.Class.SUPER_ACCESS, // 現状 super 指定がないとconstructor未定擬時に親のconstructor が使われない\r
{\r
- layout : null,\r
- nodes : null,\r
- forContainer : false,\r
- tmpCss : null,\r
+ layout : null,\r
+ uinodes : null,\r
+ xnodes : null,\r
+ \r
+ hitChildData : null,\r
+ pointerChildren : true,\r
+ through : false,\r
+\r
Constructor : function( layout, args ){\r
+ var i = 0,\r
+ l = args.length,\r
+ j = -1,\r
+ uinodes, arg, _data, attrs, support;\r
+ \r
if( !this.User.instanceOf( Box ) ){\r
//throw new Error( 'Box を継承したインスタンスだけが _Box のオーナーになれます' );\r
- };\r
- var i = 0,\r
- l = args.length,\r
- nodes = [],\r
- arg, _data;\r
+ }; \r
+ \r
+ this.xnode = X.Dom.Node.create( 'div' );\r
+ \r
+ // すでに定義されていればそちらを採用\r
+ // supportAttrs や attrClass が、layout を元に上書きされているため\r
+ this.layout = this.layout || layout;\r
+ \r
for( ; i < l; ++i ){\r
arg = args[ i ];\r
if( arg.instanceOf && arg.instanceOf( AbstractUINode ) ){\r
_data = X.Class._getPrivate( arg );\r
- nodes[ nodes.length ] = _data;\r
+ if( !uinodes ) this.uinodes = uinodes = [];\r
+ uinodes[ ++j ] = _data;\r
if( _data.parent ){\r
//throw new Error( 'インスタンスはすでに親に追加されています ' + arg );\r
};\r
} else\r
- if( arg.instanceOf && arg.instanceOf( LayoutManagerBase ) ){\r
- layout = arg;\r
+ if( arg.instanceOf && arg.instanceOf( X.UI.Layout.Base ) ){\r
+ //this.layout = arg;\r
} else\r
- if( X.Type.isObject( arg ) === true ){\r
- this.tmpCss = arg;\r
+ if( X.Type.isObject( arg ) ){\r
+ if( attrs ){\r
+ attrs = X.Class._override( attrs, arg );\r
+ } else {\r
+ attrs = arg;\r
+ };\r
} else {\r
//throw new Error( 'AbstractUINode を継承したインスタンスを渡してください ' + arg );\r
};\r
};\r
- this.layout = layout;\r
- this.nodes = nodes;\r
+ \r
+ for( p in attrs ){\r
+ ( support = this.supportAttrs[ p ] ) && this.setAttr( p, support, attrs[ p ] );\r
+ };\r
},\r
/* Rellay */\r
initialize : function( root, rootData, parent, parentData ){\r
- var nodes = this.nodes,\r
- i = nodes.length;\r
+ var uinodes = this.uinodes,\r
+ i = uinodes && uinodes.length;\r
this.root = root;\r
this.rootData = rootData;\r
+ this.hoverList = rootData.hoverList;\r
this.parent = parent;\r
this.parentData = parentData;\r
- this.rawElement = X.Dom.Node.create( 'div' );\r
+ //this.xnode = X.Dom.Node.create( 'div' );\r
\r
- for( ; i; ){\r
- nodes[ --i ].initialize( root, rootData, this.User, this );\r
+ if( i ){\r
+ for( ; i; ){\r
+ uinodes[ --i ].initialize( root, rootData, this.User, this );\r
+ }; \r
};\r
\r
- this.styleData.initialize();\r
- \r
this.phase = 1;\r
this.User.dispatch( { type : X.UI.Event.INIT } );\r
},\r
\r
- addToParent : function( parentElement ){\r
- var nodes = this.nodes,\r
- l = nodes.length,\r
- i = 0;\r
+ addToParent : function( parentXNode ){\r
+ var uinodes = this.uinodes,\r
+ l = uinodes && uinodes.length,\r
+ i;\r
\r
- parentElement && parentElement.append( this.rawElement );\r
+ parentXNode && parentXNode.append( this.xnode );\r
\r
- for( ; i < l; ++i ){\r
- nodes[ i ].addToParent( this.rawElement );\r
+ if( l ){\r
+ for( i = 0; i < l; ++i ){\r
+ uinodes[ i ].addToParent( this.xnode );\r
+ };\r
};\r
\r
this.phase = 2;\r
},\r
\r
/* Rellay */\r
- afterAddition : function(){\r
- var nodes = this.nodes,\r
- i = nodes.length;\r
- for( ; i; ){\r
- nodes[ --i ].afterAddition();\r
+ creationComplete : function(){\r
+ var uinodes = this.uinodes,\r
+ i = uinodes && uinodes.length;\r
+ if( i ){\r
+ for( ; i; ){\r
+ uinodes[ --i ].creationComplete();\r
+ }; \r
};\r
- this.styleData.afterAddition();\r
\r
this.phase = 3;\r
this.User.dispatch( { type : X.UI.Event.CREATION_COMPLETE } );\r
},\r
\r
- calculate : function( x, y, w, h ){\r
- this.layout.calculate( this, x, y, w, h ); \r
+ calculate : function( isNeedsDetection, x, y, w, h ){\r
+ this.layout.calculate( this, isNeedsDetection, x, y, w, h ); \r
this.phase = 4;\r
},\r
\r
- commitUpdate : function(){\r
- \r
+ capcher : function( x, y ){\r
+ var uinodes, child, _x, _y, hit, i;\r
+ if( this.pointerDisabled ) return false;\r
+ delete this.hitChildData;\r
+ x -= this.x;\r
+ y -= this.y;\r
+ if( this.pointerChildren && ( uinodes = this.uinodes ) ){\r
+ _x = x - this.scrollingX;\r
+ _y = y - this.scrollingY;\r
+ for( i = uinodes.length; i; ){\r
+ child = uinodes[ --i ];\r
+ if( !child.pointerDisabled && child.l <= _x && _x < child.r && child.t <= _y && _y < child.b && child.capcher( _x, _y ) ){\r
+ this.hitChildData = child;\r
+ break;\r
+ };\r
+ };\r
+ };\r
+ if( this.through ){\r
+ this.hitChildData && !this.hovering && ( this.hoverList[ this.hoverList.length ] = this );\r
+ return !!this.hitChildData;\r
+ };\r
+ hit = 0 <= x && x < this.w && 0 <= y && y < this.h;\r
+ ( this.hitChildData || hit ) && !this.hovering && ( this.hoverList[ this.hoverList.length ] = this );\r
+ if( hit && this.hitChildData === null ) this.rootData.targetNodeData = this;\r
+ return hit || !!this.hitChildData;\r
},\r
\r
- addAt : function( index, _nodes ){\r
+ addAt : function( index, _uinodes ){\r
//console.log( '# AddAt ' + this.phase )\r
- var nodes = this.nodes,\r
- num = nodes.length,\r
- p1 = 1 <= this.phase,\r
- p2 = 2 <= this.phase,\r
- p3 = 3 <= this.phase,\r
+ var uinodes = this.uinodes,\r
+ num = uinodes.length,\r
+ p1 = 1 <= this.phase,\r
+ p2 = 2 <= this.phase,\r
+ p3 = 3 <= this.phase,\r
+ i = 0,\r
_p1, _p2,\r
- i = 0, l, data;\r
+ l, data;\r
\r
//console.log( '### AddAt ' + this.phase )\r
- for( l = _nodes.length; i < l; ++i ){\r
- data = X.Class._getPrivate( _nodes[ i ] );\r
+ for( l = _uinodes.length; i < l; ++i ){\r
+ data = X.Class._getPrivate( _uinodes[ i ] );\r
_p1 = p1 && data.phase < 1;\r
_p2 = p2 && data.phase < 2;\r
_p1 && data.initialize( this.root, this.rootData, this.User, this );\r
if( index <= num ){\r
- // _p2 && this.rawElement.insertBefore( data.rawElement, nodes[ index + i ].rawElement );\r
- _p2 && nodes[ index + i ].rawElement.before( data.rawElement );\r
- _p2 && data.addToParent( null );\r
- nodes.splice( index + i, 0, data );\r
+ // _p2 && this.xnode.insertBefore( data.xnode, uinodes[ index + i ].xnode );\r
+ _p2 && uinodes[ index + i ].xnode.before( data.xnode );\r
+ _p2 && data.addToParent( this.xnode );\r
+ uinodes.splice( index + i, 0, data );\r
} else {\r
- _p2 && data.addToParent( this.rawElement );\r
- nodes[ nodes.length ] = data; \r
+ _p2 && data.addToParent( this.xnode );\r
+ uinodes[ uinodes.length ] = data; \r
};\r
- p3 && data.phase < 3 && data.afterAddition();\r
+ //p3 && data.phase < 3 && data.afterAddition();\r
p3 && data.phase < 4 && data.creationComplete();\r
};\r
4 <= this.phase && this.rootData.reserveCalc();\r
},\r
\r
- remove : function( _nodes ){\r
+ remove : function( _uinodes ){\r
//console.log( '# AddAt ' + this.phase )\r
- var nodes = this.nodes,\r
- i = _nodes.length,\r
- n, node;\r
+ var uinodes = this.uinodes,\r
+ i = _uinodes.length,\r
+ n, data;\r
\r
//console.log( '### AddAt ' + this.phase )\r
for( ; i; ){\r
- node = X.Class._getPrivate( _nodes[ --i ] );\r
- if( ( n = nodes.indexOf( node ) ) !== -1 ){\r
- nodes.splice( n, 1 );\r
- node._remove();\r
+ data = X.Class._getPrivate( _uinodes[ --i ] );\r
+ if( ( n = uinodes.indexOf( data ) ) !== -1 ){\r
+ uinodes.splice( n, 1 );\r
+ data._remove();\r
};\r
};\r
4 <= this.phase && this.rootData.reserveCalc();\r
},\r
\r
removeAt : function( from, length ){\r
- var nodes = this.nodes,\r
- i = nodes.length,\r
- to = from + ( X.Type.isNumber( length ) && 1 <= length ? length : 1 ),\r
+ var uinodes = this.uinodes,\r
+ i = uinodes.length,\r
+ to = from + ( X.Type.isNumber( length ) && 1 <= length ? length : 1 ),\r
node;\r
for( ; i; ){\r
- node = nodes[ --i ];\r
+ node = uinodes[ --i ];\r
if( from <= i && i < to ){\r
- nodes.splice( i, 1 );\r
+ uinodes.splice( i, 1 );\r
node._remove();\r
};\r
};\r
},\r
\r
_remove : function(){\r
- var nodes = this.nodes,\r
- i = nodes.length;\r
- for( ; i; ){ nodes[ --i ]._remove(); };\r
+ var uinodes = this.uinodes,\r
+ i = uinodes.length;\r
+ for( ; i; ){ uinodes[ --i ]._remove(); };\r
\r
switch( this.phase ){\r
case 4:\r
case 3:\r
- //this.styleData.afterAddition();\r
case 2:\r
- //this.styleData.initialize();\r
- this.rawElement.remove();\r
+ this.xnode.remove();\r
case 1:\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
}\r
);\r
\r
-var BasicLayoutManager = ( new LayoutManagerBase() ).define( {\r
- allowForSelf : {\r
- childW : false,\r
- childH : false,\r
- gapX : false,\r
- gapY : false,\r
- padding : false\r
- },\r
- allowForChild : {\r
- x : true,\r
- y : true,\r
- w : true,\r
- h : true\r
- },\r
- calculate : function( data, x, y, w, h ){\r
- var nodes = data.nodes,\r
- i = 0, l = nodes.length, node;\r
- for( ; i < l; ++i ){\r
- node = nodes[ i ];\r
- if( node.instanceOf( _Box ) ){\r
- node.calculate( x, y, w, h );\r
- } else {\r
- //node.styleData.layout( x, y, w, h );\r
- };\r
- };\r
- data.styleData.layout( x, y, w, h );\r
- }\r
-});\r
-\r
var Box = AbstractUINode.inherits(\r
'Box',\r
X.Class.SUPER_ACCESS,\r
_Box,\r
{\r
Constructor : function(){\r
- this.style = DisplayNodeStyle( this, X.Class._newPrivate( this, BasicLayoutManager, arguments ) );\r
- this.style.addName( 'Box' );\r
+ X.Class._newPrivate( this, X.UI.Layout.Canvas, arguments );\r
},\r
\r
add : function( node /* , node, node ... */ ){\r
return this;\r
},\r
getNodesByClass : function( klass ){\r
- var ret = [],\r
- nodes = X.Class._getPrivate( this ).nodes,\r
+ var ret = [],\r
+ uinodes = X.Class._getPrivate( this ).uinodes,\r
i, l, node;\r
- if( !nodes || nodes.length === 0 ) return ret;\r
- for( i = 0, l = nodes.length; i < l; ++i ){\r
- node = nodes[ i ].User;\r
+ if( !uinodes || uinodes.length === 0 ) return ret;\r
+ for( i = 0, l = uinodes.length; i < l; ++i ){\r
+ node = uinodes[ i ].User;\r
if( node.instanceOf( klass ) ) ret[ ret.length ] = node;\r
};\r
return ret;\r
return this.getNodeAt( 0 );\r
},\r
getLastChild : function(){\r
- var nodes = X.Class._getPrivate( this ).nodes;\r
- return nodes && nodes.length && nodes[ nodes.length - 1 ].User || null;\r
- },\r
- getNodeByUID : function( uid ){\r
+ var uinodes = X.Class._getPrivate( this ).uinodes;\r
+ return uinodes && uinodes.length && uinodes[ uinodes.length - 1 ].User || null;\r
},\r
getNodeAt : function( index ){\r
if( index < 0 ) return null;\r
- var nodes = X.Class._getPrivate( this ).nodes;\r
- return nodes && nodes[ index ].User || null;\r
+ var uinodes = X.Class._getPrivate( this ).uinodes;\r
+ return uinodes && uinodes[ index ].User || null;\r
},\r
numNodes : function(){\r
- var nodes = X.Class._getPrivate( this ).nodes;\r
- return nodes && nodes.length || 0;\r
+ var uinodes = X.Class._getPrivate( this ).uinodes;\r
+ return uinodes && uinodes.length || 0;\r
}\r
}\r
);\r
\r
+/*\r
+ * layout が設定されている Box のサブクラスに対して、layout を指定できない.\r
+ * \r
+ */\r
+Box.presets = function(){\r
+ var args = arguments,\r
+ i = 0,\r
+ l = args.length, \r
+ shadow = X.Class._getClassDef( this ).privateClass,\r
+ layout = shadow.prototype.layout,\r
+ arg, attrs, supports, klass, klassDef, privateKlass, boxName;\r
+ \r
+ for( ; i < l; ++i ){\r
+ arg = args[ i ];\r
+ if( !arg ) continue;\r
+ // レイアウトの preset ができるのは layout が未定義な Box だけ\r
+ if( !shadow.prototype.layout && arg.instanceOf && arg.instanceOf( X.UI.Layout.Base ) ){\r
+ layout = arg;\r
+ } else\r
+ if( ( klassDef = X.Class._getClassDef( arg ) ) && klassDef.isPrivate ){\r
+ privateKlass = arg;\r
+ layout = privateKlass.prototype.layout;\r
+ } else\r
+ if( X.Type.isObject( arg ) ){\r
+ if( attrs ){\r
+ X.Class._override( attrs, arg, true );\r
+ } else {\r
+ attrs = arg;\r
+ };\r
+ } else\r
+ if( X.Type.isString( arg ) ){\r
+ boxName = arg;\r
+ };\r
+ };\r
+ \r
+ if( privateKlass ){\r
+ supports = X.UI.Attr.createAttrDef( privateKlass.prototype.supportAttrs, layout.overrideAttrsForSelf );\r
+ \r
+ klass = this.inherits( privateKlass );\r
+ privateKlass.prototype.supportAttrs = supports,\r
+ privateKlass.prototype.attrClass = privateKlass.prototype.attrClass( supports, attrs );\r
+ } else {\r
+ supports = X.UI.Attr.createAttrDef( shadow.prototype.supportAttrs, layout.overrideAttrsForSelf );\r
+ \r
+ klass = this.inherits(\r
+ boxName,\r
+ shadow.inherits(\r
+ {\r
+ layout : layout,\r
+ supportAttrs : supports,\r
+ attrClass : shadow.prototype.attrClass( supports, attrs )\r
+ }\r
+ )\r
+ ); \r
+ };\r
\r
+ klass.presets = this.presets || Box.presets;\r
+ \r
+ return klass;\r
+};\r
+++ /dev/null
-
-
-var _DisplayNodeStyle = X.Class.create(
- '_DisplayNodeStyle',
- X.Class.PRIVATE_DATA,
- {
- Constructor : function( node, nodeData ){
- this.node= node;
- this.nodeData= nodeData;
-
- nodeData.style= this.User;
- nodeData.styleData= this;
-
- this._cssObj= {};
-
- if( nodeData.tmpCss ){
- if( nodeData.tmpCss.role === 'container' ) nodeData.forContainer = true;
- if( nodeData.tmpCss.role === 'chrome' ) nodeData.forChrome = true;
- };
- },
- initialize : function(){
- if( this.nodeData.layout ){
- this.allow = this.nodeData.layout.allowForSelf; // これに加えて親の allowForChild を合成
- } else
- if( this.nodeData.parentData.layout ){
- this.allow = this.nodeData.parentData.layout.allowForChild;
- } else {
- this.allow = void 0;
- };
-
- if( this.nodeData.tmpCss ){
- this.css( this.nodeData.tmpCss );
- delete this.nodeData.tmpCss;
- };
- },
-
- afterAddition : function(){
- var elm = this.nodeData.rawElement;
- if( elm ){
- if( this._name ){
- elm.className( this._name );
- // dirty flag
- };
- if( this._cssText ){
- elm.cssText( this._cssText );
- };
- };
- },
-
- name : function( v ){
- var sp = ' ', sp2 = ' ', elm;
- if( this._name !== v ){
- if( !v ){
- delete this._name;
- v = '';
- } else {
- // cleanup
- while( v.indexOf( sp2 ) !== -1 ){ v = v.split( sp2 ).join( sp ); };
- while( 0 < v.length && v.charAt( 0 ) === sp ){ v = v.substr( 1 ); };
- while( 0 < v.length && v.lastIndexOf( sp ) === 0 ){ --v.length; };
-
- if( !v.length ){
- delete this._name;
- v = '';
- } else {
- this._name = v;
- };
- };
- if( elm = this.nodeData.rawElement ){
- //elm.className = v;
- elm.className( v );
- };
- };
- return this.User;
- },
- addName : function( _names ){
- var sp = ' ',
- names, _name, i;
- if( !this._name || !this._name.length ) return this.name( _names );
- _names = _names.split( sp );
- for( i = _names.length; i; ){
- if( ( _name = _names[ --i ] ) !== '' && this.hasName( _name ) === false ){
- if( !names ) names = this._name.split( sp );
- names[ names.length ] = _name;
- };
- };
- return this.name( names.join( sp ) );
- },
- removeName : function( _names ){
- var sp = ' ',
- names = this._name,
- i, index;
- if( !names || !names.length ) return this.User;
- names = names.split( sp );
- _names = _names.split( sp );
- for( i = _names.length; i; ){
- ( index = names.indexOf( _names[ --i ] ) ) !== -1 && names.splice( index, 1 );
- };
- return this.name( names.join( sp ) );
- },
- hasName : function( _names ){
- var names = this._name, i;
- if( !names || !names.length ) return false;
- names = names.split( ' ' );
- _names = _names.split( ' ' );
- for( i = _names.length; i; ){
- if( names.indexOf( _names[ --i ] ) === -1 ) return false;
- };
- return true;
- },
- cssText : function( v ){
- var elm, style;
- if( this._cssText !== v ){
- this._cssText = v;
- //if( style = this.nodeData.rawStyle ){
- // style.cssText = v;
- //};
- if( elm = this.nodeData.rawElement ) elm.cssText( v );
- };
- },
- css : function( v ){
- var css = this._cssObj,
- allow = this.allow,
- TRANS = {
- x : 'left',
- y : 'top'
- },
- REMOVE = {
- role : 0
- }, p;
- for( p in v ){
- if( REMOVE[ p ] === 0 ) continue;
-
- switch( p = TRANS[ p ] || p ){
- case 'name' :
- this.addName( v[ p ] );
- continue;
- case 'hoverStyleName' :
- this.nodeData.hoverStyleName = v[ p ];
- this.nodeData.hover = !!( v[ p ] && v[ p ].length );
- continue;
- case 'left' :
- if( allow.x === false ) continue;
- break;
- case 'top' :
- if( allow.y === false ) continue;
- break;
- case 'width' :
- if( allow.w === false ) continue;
- break;
- case 'height' :
- if( allow.h === false ) continue;
- break;
- case 'gapX' :
- if( allow.gapX === false ) continue;
- break;
- case 'gapY' :
- if( allow.gapY === false ) continue;
- break;
- case 'padding' :
- if( allow.padding === false ) continue;
- break;
- };
- css[ p ] = v[ p ];
- };
- this.cssText( X.Dom.Style.objToCssText( css ) );
- },
- layout : function( x, y, w, h ){
- var isFinite = X.Type.isFinite,
- isString = X.Type.isString,
- obj = this._cssObj,
- data = this.nodeData,
- elm = data.rawElement,
- parent;
-
- if( elm ){
- // width
- if( isFinite( w ) === true ){
- elm.css( 'width', w + 'px' );
- obj.width = w;
- } else
- if( isString( w ) === true ){
- obj.width = w;
- elm.css( 'width', w );
- w = elm.width();
- };
- // height
- if( isFinite( h ) === true ){
- elm.css( 'height', h + 'px' );
- obj.height = h;
- } else
- if( isString( h ) === true ){
- obj.height = h;
- elm.css( 'height', h );
- h = elm.height();
- };
-
- // x
- if( isFinite( x ) === true ){
- elm.css( 'left', x + 'px' );
- obj.left = x;
- } else
- if( isString( x ) === true ){
- obj.left = x;
- elm.css( 'left', x );
- x = elm.x();
- };
-
- // y
- if( isFinite( y ) === true ){
- elm.css( 'top', y + 'px' );
- obj.top = y;
- } else
- if( isString( y ) === true ){
- obj.top = y;
- elm.css( 'top', y );
- y = elm.y();
- };
- };
- x = isFinite( x ) === true ? x : data.x;
- y = isFinite( y ) === true ? y : data.y;
- w = isFinite( w ) === true ? w : data.w;
- h = isFinite( h ) === true ? h : data.h;
- if( data.x !== x || data.y !== y ){
- data.x = x;
- data.y = y;
- ( parent = data.parentData ) && data.updateAbsoluteXY( parent.absoluteX, parent.absoluteY );
- if( data.w === w && data.h === h ){
- data.updateRectangle();
- 4 <= data.phase && data.rootData.reserveCalc();
- return;
- };
- };
- if( data.w !== w || data.h !== h ){
- data.w = w;
- data.h = h;
- data.updateRectangle();
- 4 <= data.phase && data.rootData.reserveCalc();
- };
-
- // ScrollBarManager.update( this );
- },
-
- /*
- * opt_unit は getter のみ
- */
- attr : function( prop, v, opt_unit ){
- var update = prop[ 0 ],
- propID = prop[ 1 ],
- type = prop[ 2 ],
- list = prop[ 3 ],
- length = !!( type & X.Css.Type.LENGTH ),
- percent = !!( type & X.Css.Type.PERCENT ),
- color = !!( type & X.Css.Type.COLOR ),
- uDecimal = !!( type & X.Css.Type.U_DECIMAL ),
- numerical = !!( type & X.Css.Type.NUMERICAL ),
- flag = !!( type & X.Css.Type.BOOLEAN ),
- quartet = !!( type & X.Css.Type.QUARTET ),
- url = !!( type & X.Css.Type.URL ),
- fontName = !!( type & X.Css.Type.FONT_NAME ),
- //list = !!( type & X.Css.Type.LIST ),
- combi = !!( type & X.Css.Type.COMBI ),
- data = this.data,
- _v = -1,
- i, l, nodes, root, roots;
- /*
- * Setter
- */
- if( v !== undefined ){
- if( Type.isNumber( v ) === true ){
- if( numerical === false ){
- if( uDecimal === false || v < 0 || 1 < v ){} //throw new Error( '' );
- };
- } else
- if( Type.isBoolean( v ) === true ){
- if( flag === false ){} //throw new Error( '' );
- } else
- if( Type.isString( v ) === true ){
- if( url === false && fontName === false ){
- if( v.indexOf( ' ' ) !== -1 ){
- v = v.split( ' ' );
- } else {
- if( length === false && percent === false && color === false ){} //throw new Error( '' );
- };
- };
- };
- if( Type.isArray( v ) === true ){
- if( v.length <= 4 && quartet === true ){
- type ^= X.Css.Type.QUARTET;
- } else
- if( v.length === 2 && combi === true ){
- type ^= X.Css.Type.COMBI;
- } else {
- //throw new Error( '' );
- };
- switch( v.length ){
- case 1 :
- this.attr( [ propID , type, list ], v[ 0 ] );
- this.attr( [ ++propID, type, list ], v[ 0 ] );
- this.attr( [ ++propID, type, list ], v[ 0 ] );
- this.attr( [ ++propID, type, list ], v[ 0 ] );
- break;
- case 2 :
- this.attr( [ propID , type, list ], v[ 0 ] );
- this.attr( [ ++propID, type, list ], v[ 1 ] );
- this.attr( [ ++propID, type, list ], v[ 0 ] );
- this.attr( [ ++propID, type, list ], v[ 1 ] );
- break;
- case 3 :
- this.attr( [ propID , type, list ], v[ 0 ] );
- this.attr( [ ++propID, type, list ], v[ 1 ] );
- this.attr( [ ++propID, type, list ], v[ 2 ] );
- this.attr( [ ++propID, type, list ], v[ 1 ] );
- break;
- case 4 :
- this.attr( [ propID , type, list ], v[ 0 ] );
- this.attr( [ ++propID, type, list ], v[ 1 ] );
- this.attr( [ ++propID, type, list ], v[ 2 ] );
- this.attr( [ ++propID, type, list ], v[ 3 ] );
- break;
- default :
- };
- return this.User;
- };
- switch( update ){
- case X.Css.Dirty.REFLOW :
- delete this.layoutCssText;
- break;
- case X.Css.Dirty.PAINT :
- delete this.colorCssText;
- break;
- case X.Css.Dirty.FONT :
- delete this.fontCssText;
- };
-
- if( this.dirty < update ){
- this.dirty = update;
- roots = this.rootList;
- for( i = 0, l = roots.length; i < l; ++i ){
- root = roots[ i ];
- if( root.dirty < update ) root.dirty = update;
- };
- };
-
- if( list ) _v = list.indexOf( v );
- data[ propID ] = _v !== -1 ? _v : v;
-
- switch( propID ){
- case X.Css.AttrNo.left :
- case X.Css.AttrNo.right :
- this.constraintW = Type.isNumber( data[ X.Css.AttrNo.left ] ) || Type.isNumber( data[ X.Css.AttrNo.right ] );
- break;
- case X.Css.AttrNo.top :
- case X.Css.AttrNo.bottom :
- this.constraintH = Type.isNumber( data[ X.Css.AttrNo.top ] ) || Type.isNumber( data[ X.Css.AttrNo.bottom ] );
- break;
- case X.Css.AttrNo.width :
- this.autoWidth = v === AUTO;
- this.percentWidth = v === FULL || v < 1;
- break;
- case X.Css.AttrNo.height :
- this.autoHeight = v === AUTO;
- this.percentHeight = v === FULL || v < 1;
- break;
- };
- return this.User;
- };
- /*
- * Getter
- */
- v = data[ propID ];
- // Unit
- if( quartet === true ) return [ v, data[ ++propID ], data[ ++propID ], data[ ++propID ] ];
- if( combi === true ) return [ v, data[ ++propID ] ];
- if( list && Type.isNumber( v ) === true ) return list[ v ];
- return v;
- },
- __cssText : function(){
- if( this.fontCssText === null ) this.fontCssText = this.createFontCssText();
- if( this.layoutCssText === null ) this.layoutCssText = this.createLayoutCssText();
- if( this.colorCssText === null ) this.colorCssText = this.createColorCssText();
- return [ this.fontCssText, this.colorCssText, this.layoutCssText ].join( ';' );
- },
- createFontCssText : function(){
- var data = this.data,
- css = [],
- v;
- if( v = data[ X.Css.AttrNo.fontFamily ] ) css[ 0 ] = 'font-family:' + v;
- if( v = data[ X.Css.AttrNo.fontSize ] ) css[ css.length ] = 'font-size:' + v;
- if( v = data[ X.Css.AttrNo.bold ] ) css[ css.length ] = 'font-weight:bold';
- if( v = data[ X.Css.AttrNo.italic ] ) css[ css.length ] = 'font-style:italic';
- if( v = data[ X.Css.AttrNo.lineHeight ] ) css[ css.length ] = 'line-height:' + v;
- if( v = data[ X.Css.AttrNo.letterSpacing ] ) css[ css.length ] = 'letter-spacing:' + v;
- if( v = data[ X.Css.AttrNo.wordSpacing ] ) css[ css.length ] = 'word-spacing:' + v;
- if( v = data[ X.Css.AttrNo.align ] ) css[ css.length ] = 'text-align:' + X.Css.Option.ALIGN[ v ];
- if( v = data[ X.Css.AttrNo.transform ] ) css[ css.length ] = 'text-transform:' + X.Css.Option.TEXT_TRANSFORM[ v ];
- return css.join( ';' );
- },
- createLayoutCssText : function(){
-
- },
- createColorCssText : function(){
- var data = this.data,
- css = [],
- v, x, y, c, b;
- if( v = data[ X.Css.AttrNo.borderColor ] ) css[ 0 ] = 'border-color:' + v;
- if( v = data[ X.Css.AttrNo.borderStyle + 0 ] ) css[ css.length ] = 'border-top-style:' + X.Css.Option.BORDER_STYLE[ v ];
- if( v = data[ X.Css.AttrNo.borderStyle + 1 ] ) css[ css.length ] = 'border-right-style:' + X.Css.Option.BORDER_STYLE[ v ];
- if( v = data[ X.Css.AttrNo.borderStyle + 2 ] ) css[ css.length ] = 'border-bottom-style:' + X.Css.Option.BORDER_STYLE[ v ];
- if( v = data[ X.Css.AttrNo.borderStyle + 3 ] ) css[ css.length ] = 'border-left-style:' + X.Css.Option.BORDER_STYLE[ v ];
- if( v = data[ X.Css.AttrNo.cornerRadius + 0 ] ) css[ css.length ] = 'corner-radius-top:' + v;
- if( v = data[ X.Css.AttrNo.cornerRadius + 1 ] ) css[ css.length ] = 'corner-radius-right:' + v;
- if( v = data[ X.Css.AttrNo.cornerRadius + 2 ] ) css[ css.length ] = 'border-radius-bottom:' + v;
- if( v = data[ X.Css.AttrNo.cornerRadius + 3 ] ) css[ css.length ] = 'border-radius-left:' + v;
- if( v = data[ X.Css.AttrNo.bgColor ] ) css[ css.length ] = 'background-color:' + v;
- // X.Css.AttrNo.bgAlpha
- if( v = data[ X.Css.AttrNo.bgImgUrl ] ) css[ css.length ] = 'background-image:url(' + v + ')';
- x = data[ X.Css.AttrNo.bgImgRepeatX ];
- y = data[ X.Css.AttrNo.bgImgRepeatY ];
- if( x && y ){
- css[ css.length ] = 'background-repeat:repeat';
- } else
- if( x ){
- css[ css.length ] = 'background-repeat:repeat-x';
- } else
- if( y ){
- css[ css.length ] = 'background-repeat:repeat-y';
- };
- x = data[ X.Css.AttrNo.bgImgPositionX ];
- y = data[ X.Css.AttrNo.bgImgPositionY ];
- if( x && y ){
- css[ css.length ] = 'background-position:' + x + ' ' + y;
- } else
- if( x ){
- css[ css.length ] = 'background-position:' + x + ' 0';
- } else
- if( y ){
- css[ css.length ] = 'background-position:0 ' + y;
- };
- if( v = data[ X.Css.AttrNo.color ] ) css[ css.length ] = 'color:' + v;
- if( v = data[ X.Css.AttrNo.decoration ] ) css[ css.length ] = 'text-decoration:' + X.Css.Option.TEXT_DECORATION[ v ];
- x = data[ X.Css.AttrNo.textShadowOffsetX ];
- y = data[ X.Css.AttrNo.textShadowOffsetY ];
- b = data[ X.Css.AttrNo.textShadowBlur ];
- c = data[ X.Css.AttrNo.textShadowColor ];
- if( c || x || y || b ){
- css[ css.length ] = 'text-shadow:' + x + ' ' + y + ' ' + b + ' ' + c;
- };
- /*
- X.Css.AttrNo.shadowColor = [ X.Css.Dirty.PAINT, 23, X.Css.Type.COLOR ]; // color
- X.Css.AttrNo.shadowAlpha = [ X.Css.Dirty.PAINT, 24, X.Css.Type.U_DECIMAL ]; // 0 - 1
- X.Css.AttrNo.shadowOffsetX = [ X.Css.Dirty.PAINT, 25, X.Css.Type.LENGTH ]; // em
- X.Css.AttrNo.shadowOffsetY = [ X.Css.Dirty.PAINT, 26, X.Css.Type.LENGTH ]; // em
- X.Css.AttrNo.shadowBlur = [ X.Css.Dirty.PAINT, 27, X.Css.Type.LENGTH ]; // em
- X.Css.AttrNo.shadowSpread = [ X.Css.Dirty.PAINT, 28, X.Css.Type.LENGTH ]; // em
- X.Css.AttrNo.shadowInset = [ X.Css.Dirty.PAINT, 29, X.Css.Type.BOOLEAN ]; // true / false
- */
- return css.join( ';' );
- },
- node : null,
- nodeData : null,
- _name : '',
- allow : null,
- _cssText : null,
- _cssObj : null
- }
-);
-
-var DisplayNodeStyle = X.Class.create(
- 'DisplayNodeStyle',
- X.Class.FINAL,
- _DisplayNodeStyle,
- {
- Constructor : function( node, nodeData ){
- X.Class._newPrivate( this, node, nodeData );
- },
- addName : function( names ){
- return X.Class._getPrivate( this ).addName( names );
- },
- removeName : function( names ){
- return X.Class._getPrivate( this ).removeName( names );
- },
- hasName : function( names ){
- return X.Class._getPrivate( this ).hasName( names );
- },
- cssText : function( v ){
- var data = X.Class._getPrivate( this );
- if( v ){
- data.cssText( v );
- return this;
- };
- return data._cssText;
- },
- css : function( v ){
- var data = X.Class._getPrivate( this );
- if( v ){
- data.css( v );
- return this;
- };
- // return data._css;
- },
-
- borderWidth : function( v ){
- return X.Class._getPrivate( this ).attr( X.Css.Attr.borderWidth, v );
- },
- borderColor : function( v ){
- return X.Class._getPrivate( this ).attr( X.Css.Attr.borderColor, v );
- },
- borderStyle : function( v ){
- return X.Class._getPrivate( this ).attr( X.Css.Attr.borderStyle, v );
- },
- cornerRadius : function( v ){
- return X.Class._getPrivate( this ).attr( X.Css.Attr.cornerRadius, v );
- },
- bgColor : function( v ){
- return X.Class._getPrivate( this ).attr( X.Css.Attr.bgColor, v );
- },
- bgAlpha : function( v ){
- return X.Class._getPrivate( this ).attr( X.Css.Attr.bgAlpha, v );
- },
- bgImgUrl : function( v ){
- return X.Class._getPrivate( this ).attr( X.Css.Attr.bgImgUrl, v );
- },
- bgImgRepeatX : function( v ){
- return X.Class._getPrivate( this ).attr( X.Css.Attr.bgImgRepeatX, v );
- },
- bgImgRepeatY : function( v ){
- return X.Class._getPrivate( this ).attr( X.Css.Attr.bgImgRepeatY, v );
- },
- bgImgPositionX : function( v ){
- return X.Class._getPrivate( this ).attr( X.Css.Attr.bgImgPositionX, v );
- },
- bgImgPositionY : function( v ){
- return X.Class._getPrivate( this ).attr( X.Css.Attr.bgImgPositionY, v );
- },
- shadowColor : function( v ){
- return X.Class._getPrivate( this ).attr( X.Css.Attr.shadowColor, v );
- },
- shadowAlpha : function( v ){
- return X.Class._getPrivate( this ).attr( X.Css.Attr.shadowAlpha, v );
- },
- shadowOffsetX : function( v ){
- return X.Class._getPrivate( this ).attr( X.Css.Attr.shadowOffsetX, v );
- },
- shadowOffsetY : function( v ){
- return X.Class._getPrivate( this ).attr( X.Css.Attr.shadowOffsetY, v );
- },
- shadowBlur : function( v ){
- return X.Class._getPrivate( this ).attr( X.Css.Attr.shadowBlur, v );
- },
- shadowSpread : function(){
- return X.Class._getPrivate( this ).attr( X.Css.Attr.shadowSpread, v );
- },
- shadowInset : function(){
- return X.Class._getPrivate( this ).attr( X.Css.Attr.shadowInset, v );
- },
- color : function( v ){
- return X.Class._getPrivate( this ).attr( X.Css.Attr.color, v );
- },
- fontFamily : function( v ){
- return X.Class._getPrivate( this ).attr( X.Css.Attr.fontFamily, v );
- },
- fontSize : function( v ){
- return X.Class._getPrivate( this ).attr( X.Css.Attr.fontSize, v );
- },
- bold : function( v ){
- return X.Class._getPrivate( this ).attr( X.Css.Attr.bold, v );
- },
- italic : function( v ){
- return X.Class._getPrivate( this ).attr( X.Css.Attr.italic, v );
- },
- lineHeight : function( v ){
- return X.Class._getPrivate( this ).attr( X.Css.Attr.lineHeight, v );
- },
- letterSpacing : function( v ){
- return X.Class._getPrivate( this ).attr( X.Css.Attr.letterSpacing, v );
- },
- wordSpacing : function( v ){
- return X.Class._getPrivate( this ).attr( X.Css.Attr.wordSpacing, v );
- },
- align : function( v ){
- return X.Class._getPrivate( this ).attr( X.Css.Attr.align, v );
- },
- decoration : function( v ){
- return X.Class._getPrivate( this ).attr( X.Css.Attr.decoration, v );
- },
- transform : function( v ){
- return X.Class._getPrivate( this ).attr( X.Css.Attr.transform, v );
- },
- textShadowColor : function( v ){
- return X.Class._getPrivate( this ).attr( X.Css.Attr.textShadowColor, v );
- },
- textShadowOffsetX : function( v ){
- return X.Class._getPrivate( this ).attr( X.Css.Attr.textShadowOffsetX, v );
- },
- textShadowOffsetY : function( v ){
- return X.Class._getPrivate( this ).attr( X.Css.Attr.textShadowOffsetY, v );
- },
- shadowBlur : function( v ){
- return X.Class._getPrivate( this ).attr( X.Css.Attr.shadowBlur, v );
- }
- }
-);
-var VerticalLayoutManager = ( new LayoutManagerBase() ).define( {\r
+X.UI.Layout.Vertical = X.UI.Layout.create( {\r
+ \r
name : 'VerticalLayout',\r
- allowForSelf : {\r
- childX : false,\r
- childY : false,\r
- childW : false,\r
- childH : true,\r
- gapX : false,\r
- gapY : true,\r
- padding : true\r
+ \r
+ overrideAttrsForSelf : {\r
+ selectable : false,\r
+ role : [ 0, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.INIT_ONLY | X.UI.Attr.Type.LIST, 'none,chrome,container' ],\r
+ childWidth : [ X.UI.Attr.AUTO, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH | X.UI.Attr.Type.PERCENT | X.UI.Attr.Type.AUTO ],\r
+ childHeight : [ X.UI.Attr.AUTO, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH | X.UI.Attr.Type.PERCENT | X.UI.Attr.Type.AUTO ],\r
+ gapY : [ 0, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH ]\r
},\r
- allowForChild : {\r
- x : false,\r
- y : false,\r
- w : true,\r
- h : true\r
+ \r
+ overrideAttrsForChild : {\r
+ left : true,\r
+ right : true,\r
+ top : false,\r
+ bottom : false\r
},\r
- calculate : function( data, x, y, w, h ){\r
- var nodes = data.nodes,\r
- styleData = data.styleData,\r
- cssObj = styleData._cssObj,\r
- //childW = cssObj.childW,\r
- childH = cssObj.childH,\r
- gapX = cssObj.gapX || 0,\r
- gapY = cssObj.gapY || 0,\r
- padding = cssObj.padding || 0,\r
- _x = padding,\r
- _y = padding,\r
- i = 0, l = nodes.length, node;\r
+ \r
+ calculate : function( data, isNeedsDetection, x, y, w, h ){\r
+ var attrs = data.attrObject || data.attrClass.prototype,\r
+ uinodes = data.uinodes,\r
+ l = uinodes && uinodes.length, \r
+ childW, childH, gapY,\r
+ i, _x, _y, _w, node;\r
\r
- if( childH || childH === 0 ){\r
- for( ; i < l; ++i ){\r
- node = nodes[ i ];\r
- if( node.instanceOf( _Box ) ){\r
- node.calculate( 0, _y, w - x, childH );\r
- } else {\r
- node.styleData.layout( 0, _y, w - x, childH );\r
- };\r
- _y += childH + gapY;\r
+ data.preMesure( w, h );\r
+ \r
+ contentW = data.contentWidth;\r
+ contentH = data.contentHeight;\r
+ autoW = contentW === X.UI.Attr.AUTO;\r
+ autoH = contentH === X.UI.Attr.AUTO;\r
+ detectionPhase = autoW || autoH;\r
+ gapY = _AbstractUINode.calcValue( attrs[ data.supportAttrs.gapY.No ], contentH );\r
+ childW = _AbstractUINode.calcValue( attrs[ data.supportAttrs.childWidth.No ], contentW );\r
+ childH = _AbstractUINode.calcValue( attrs[ data.supportAttrs.childHeight.No ], contentH );\r
+ _x = data.contentL;\r
+ _y = data.contentT;\r
+\r
+ if( l ){\r
+ _w = 0;\r
+ for( i = 0; i < l; ++i ){\r
+ node = uinodes[ i ];\r
+ node.calculate( detectionPhase, _x, _y, contentW, childH );\r
+ _y += node.boxHeight + gapY;\r
+ // 概算のみ\r
+ if( autoW ){\r
+ w = node.boxWidth !== X.UI.Attr.AUTO ?\r
+ node.boxWidth :\r
+ node.minBoxWidth !== X.UI.Attr.AUTO ?\r
+ node.minBoxWidth : 0;\r
+ if( _w < w ) _w = w; \r
+ }; \r
};\r
+ _y -= gapY;\r
} else {\r
- for( ; i < l; ++i ){\r
- node = nodes[ i ];\r
- if( node.instanceOf( _Box ) ){\r
- node.calculate( 0, _y, w - x );\r
- } else {\r
- node.styleData.layout( 0, _y, w - x );\r
- };\r
- //_y += node.rawElement.offsetHeight + gapY;\r
- _y += node.rawElement.height() + gapY;\r
- };\r
+ _y = data.minContentHeight !== X.UI.Attr.AUTO ? data.minContentHeight : 0;\r
};\r
- data.styleData.layout( x, y, w, _y + gapY + padding );\r
+\r
+ if( detectionPhase ){\r
+ if( autoW ) data.contentWidth = _w;\r
+ if( autoH ) data.conetntHeight = _y;\r
+ data.postMesure();\r
+ } else {\r
+ //data.postMesure();\r
+ };\r
+ \r
+ !isNeedsDetection && data.updateLayout( x, y );\r
}\r
});\r
\r
-/*\r
-var VBox = function(){\r
- var arg = arguments;\r
- arg[ arg.length ] = VerticalLayoutManager;\r
- ++arg.length;\r
- return Box.apply( null, arg );\r
-}; */\r
-\r
-\r
-var VBox = Box.inherits(\r
+var VBox = Box.presets(\r
+ X.UI.Layout.Vertical,\r
'VBox',\r
- X.Class.SUPER_ACCESS,\r
{\r
- Constructor : function(){\r
- this.style = DisplayNodeStyle( this, X.Class._newPrivate( this, VerticalLayoutManager, arguments ) );\r
- this.style.addName( 'VBox' );\r
- }\r
+ gapY : '0.2em',\r
+ childWidth : '100%'\r
}\r
-);
\ No newline at end of file
+);\r
-var HorizontalLayoutManager = ( new LayoutManagerBase() ).define( {\r
- allowForSelf : {\r
- childX : false,\r
- childY : false,\r
- childW : true,\r
- childH : true,\r
- gapX : true,\r
- gapY : false,\r
- padding : true\r
+X.UI.Layout.Horizontal = X.UI.Layout.create( { \r
+ name : 'HorizontalLayout',\r
+ \r
+ overrideAttrsForSelf : {\r
+ selectable : false,\r
+ role : [ 0, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.INIT_ONLY | X.UI.Attr.Type.LIST, 'none,chrome,container' ],\r
+ childWidth : [ X.UI.Attr.AUTO, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH | X.UI.Attr.Type.PERCENT | X.UI.Attr.Type.AUTO ],\r
+ childHeight : [ X.UI.Attr.AUTO, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH | X.UI.Attr.Type.PERCENT | X.UI.Attr.Type.AUTO ],\r
+ gapX : [ 0, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH ]\r
},\r
- allowForChild : {\r
- x : false,\r
- y : false,\r
- w : true,\r
- h : true\r
+ \r
+ overrideAttrsForChild : {\r
+ left : false,\r
+ right : false,\r
+ top : true,\r
+ bottom : true\r
},\r
- calculate : function( data, x, y, w, h ){\r
- var nodes = data.nodes,\r
- styleData = data.styleData,\r
- cssObj = styleData._cssObj,\r
- childW = cssObj.childW,\r
- childH = cssObj.childH,\r
- gapX = cssObj.gapX || 0,\r
- gapY = cssObj.gapY || 0,\r
- padding = cssObj.padding || 0,\r
- _x = padding,\r
- _y = padding,\r
- i = 0, l = nodes.length, node;\r
+ \r
+ calculate : function( data, isNeedsDetection, x, y, w, h ){\r
+ var attrs = data.attrObject || data.attrClass.prototype,\r
+ uinodes = data.uinodes,\r
+ l = uinodes && uinodes.length, \r
+ childW, childH, gapX,\r
+ i, _x, _y, _h, node;\r
\r
- if( childW || childW === 0 ){\r
- for( ; i < l; ++i ){\r
- node = nodes[ i ];\r
- if( node.instanceOf( _Box ) ){\r
- node.calculate( _x, NaN, childW, childH );\r
- } else {\r
- node.styleData.layout( _x, NaN, childW, childH );\r
+ data.preMesure( w, h );\r
+ \r
+ contentW = data.contentWidth;\r
+ contentH = data.contentHeight;\r
+ autoW = contentW === X.UI.Attr.AUTO;\r
+ autoH = contentH === X.UI.Attr.AUTO;\r
+ detectionPhase = autoW || autoH;\r
+ _x = data.contentL;\r
+ _y = data.contentT;\r
+ childW = _AbstractUINode.calcValue( attrs[ data.supportAttrs.childWidth.No ], contentW );\r
+ childH = _AbstractUINode.calcValue( attrs[ data.supportAttrs.childHeight.No ], contentH );\r
+ gapX = _AbstractUINode.calcValue( attrs[ data.supportAttrs.gapX.No ], contentW );\r
+\r
+ if( l ){\r
+ _h = 0;\r
+ for( i = 0; i < l; ++i ){\r
+ node = uinodes[ i ];\r
+ node.calculate( detectionPhase, _x, _y, childW, childH );\r
+ _x += node.boxWidth + gapX;\r
+ if( autoH ){\r
+ h = node.boxHeight !== X.UI.Attr.AUTO ?\r
+ node.boxHeight :\r
+ node.minBoxHeight !== X.UI.Attr.AUTO ?\r
+ node.minBoxHeight : 0;\r
+ if( _h < h ) _h = h; \r
};\r
- _x += childW + gapX;\r
};\r
+ _x -= gapX;\r
} else {\r
- for( ; i < l; ++i ){\r
- node = nodes[ i ];\r
- if( node.instanceOf( _Box ) ){\r
- node.calculate( _x, NaN, NaN, childH );\r
- } else {\r
- node.styleData.layout( _x, NaN, NaN, childH );\r
- };\r
- //_x += node.rawElement.offsetWidth + gapX;\r
- _x += node.rawElement.width() + gapX;\r
- };\r
+ _h = data.minContentHeight !== X.UI.Attr.AUTO ? data.minContentHeight : 0;\r
+ };\r
+\r
+ if( detectionPhase ){\r
+ if( autoW ) data.contentWidth = _x;\r
+ if( autoH ) data.conetntHeight = _h;\r
+ data.postMesure();\r
+ } else {\r
+ //data.postMesure();\r
};\r
- data.styleData.layout( x, y, w, h );\r
+ \r
+ !isNeedsDetection && data.updateLayout( x, y );\r
}\r
});\r
\r
-/*\r
-var HBox = function(){\r
- var arg = arguments;\r
- arg[ arg.length ] = HorizontalLayoutManager;\r
- ++arg.length;\r
- return Box.apply( null, arg );\r
-}; */\r
-\r
-\r
-var HBox = Box.inherits(\r
+var HBox = Box.presets(\r
+ X.UI.Layout.Horizontal,\r
'HBox',\r
- X.Class.SUPER_ACCESS,\r
{\r
- Constructor : function(){\r
- this.style = DisplayNodeStyle( this, X.Class._newPrivate( this, HorizontalLayoutManager, arguments ) );\r
- this.style.addName( 'HBox' );\r
- }\r
+ gapX : '0.2em'\r
}\r
-);
\ No newline at end of file
+);\r
-var TileLayoutManager = ( new LayoutManagerBase() ).define( {\r
- allowForSelf : {\r
- childW : true,\r
- childH : true,\r
- gapX : true,\r
- gapY : true,\r
- padding : true\r
+X.UI.Layout.Tile = X.UI.Layout.create( { \r
+ name : 'TileLayout',\r
+ \r
+ overrideAttrsForSelf : {\r
+ selectable : false,\r
+ role : [ 0, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.INIT_ONLY | X.UI.Attr.Type.LIST, 'none,chrome,container' ],\r
+ childWidth : [ '8em', X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH | X.UI.Attr.Type.PERCENT ],\r
+ childHeight : [ '8em', X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH | X.UI.Attr.Type.PERCENT ],\r
+ gapX : [ 0, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH ],\r
+ gapY : [ 0, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH ],\r
+ hCenter : [ true, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.BOOLEAN ],\r
+ vCenter : [ true, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.BOOLEAN ]\r
},\r
- allowForChild : {\r
- x : false,\r
- y : false,\r
- w : false,\r
- h : false\r
+ \r
+ overrideAttrsForChild : {\r
+ left : false,\r
+ right : false,\r
+ top : false,\r
+ bottom : false,\r
+ width : false,\r
+ height : false\r
},\r
- calculate : function( data, x, y, w, h ){\r
- var nodes = data.nodes,\r
- styleData = data.styleData,\r
- cssObj = styleData._cssObj,\r
- childW = cssObj.childW,\r
- childH = cssObj.childH,\r
- gapX = cssObj.gapX,\r
- gapY = cssObj.gapY,\r
- padding = cssObj.padding,\r
- _x = padding,\r
- _y = padding,\r
- i = 0, l = nodes.length, node;\r
- if( l === 0 ){\r
- styleData.layout( x, y, w, 0 );\r
- return;\r
- };\r
- for( ; i < l; ++i ){\r
- node = nodes[ i ];\r
- if( node.instanceOf( _Box ) ){\r
- node.calculate( _x, _y, childW, childH );\r
- } else {\r
- node.styleData.layout( _x, _y, childW, childH );\r
- };\r
- _x += childW + gapX;\r
- if( w < _x ){\r
- _y += childH + gapY;\r
+ \r
+ calculate : function( data, isNeedsDetection, x, y, w, h ){\r
+ var attrs = data.attrObject || data.attrClass.prototype,\r
+ gapX, gapY, childW, childH,\r
+ uinodes, l, i, node,\r
+ _x, _y, _w, _h, numH, numV, n, startX, __x, __y;\r
+\r
+ data.preMesure( w, h );\r
+ \r
+ if( isNeedsDetection && ( data.boxWidth === X.UI.Attr.AUTO || data.boxHeight === X.UI.Attr.AUTO ) ) return;\r
+ \r
+ if( ( uinodes = data.uinodes ) && ( l = uinodes.length ) ){\r
+ _x = data.contentL;\r
+ _y = data.contentT;\r
+ _w = data.contentWidth;\r
+ gapX = _AbstractUINode.calcValue( attrs[ data.supportAttrs.gapX.No ], contentW );\r
+ gapY = _AbstractUINode.calcValue( attrs[ data.supportAttrs.gapY.No ], contentH );\r
+ childW = _AbstractUINode.calcValue( attrs[ data.supportAttrs.childWidth.No ], contentW );\r
+ childH = _AbstractUINode.calcValue( attrs[ data.supportAttrs.childHeight.No ], contentH );\r
+ numH = X.UI.Attr.FLOOR( ( _w + gapX ) / ( childW + gapX ) );\r
+ numV = l % numH ? X.UI.Attr.FLOOR( l / numH ) + 1 : l / numH;\r
+ _h = _y + data.contentB + ( childH + gapY ) * numH - gapY;\r
+ \r
+ startX = attrs[ data.supportAttrs.hCenter.No ] ?\r
+ ( _w - ( childW + gapX ) * numH - gapX ) / 2 : _x;\r
+ __x = startX;\r
+ __y = attrs[ data.supportAttrs.vCenter.No ] && _h <= h ?\r
+ ( h - _h ) / 2 + _y : _y;\r
+ \r
+ for( i = 0; i < l; ++i ){\r
+ node = uinodes[ i ];\r
+ node.calculate( false, __x, __y, childW, childH );\r
+ \r
+ if( i % numH === numH - 1 ){\r
+ __x = startX;\r
+ __y += childH + gapY;\r
+ } else {\r
+ __x += childW + gapX;\r
+ };\r
};\r
+ \r
+ data.contentHeight = _h;\r
+ \r
+ } else\r
+ if( data.contentHeight === X.UI.Attr.AUTO ){\r
+ data.contentHeight = data.minContentHeight !== X.UI.Attr.AUTO ? data.minContentHeight : 0;\r
};\r
- styleData.layout( x, y, w, _y + childH + padding );\r
+ \r
+ data.postMesure();\r
+ data.updateLayout( x, y );\r
}\r
});\r
\r
-var TileBox = Box.inherits(\r
+var TileBox = Box.presets(\r
'TileBox',\r
- X.Class.SUPER_ACCESS,\r
+ X.UI.Layout.Tile,\r
{\r
- Constructor : function(){\r
- this.style = DisplayNodeStyle( this, X.Class._newPrivate( this, TileLayoutManager, arguments ) );\r
- this.style.addName( 'TileBox' );\r
- }\r
+ gapX : '0.2em',\r
+ gapY : '0.2em',\r
+ hCenter : true,\r
+ vCenter : true\r
}\r
-);
\ No newline at end of file
+);\r
chromeNodes : null,\r
containerNode : null,\r
Constructor : function( layout, args ){\r
+ \r
this.SuperConstructor( layout, args );\r
\r
// xnode の追加が可能\r
\r
- var nodes = this.nodes,\r
- i = nodes.length,\r
+ var uinodes = this.uinodes,\r
+ i = uinodes.length,\r
node;\r
for( ; i; ){\r
- node = nodes[ --i ];\r
+ node = uinodes[ --i ];\r
if( node.forContainer === true ){\r
if( this.containerNode ){\r
//throw new Error( 'ContainerNode が複数設定されています！ContainerNode はクロームボックスにひとつ、生成時に設定できます ' + node );\r
_ChromeBox,\r
{\r
Constructor : function(){\r
- this.style = DisplayNodeStyle( this, X.Class._newPrivate( this, BasicLayoutManager, arguments ) );\r
- this.style.addName( 'ChromeBox' );\r
+ X.Class._newPrivate( this, X.UI.Layout.Canvas, arguments );\r
},\r
add : function( node /* , node, node ... */ ){\r
X.Class._getPrivate( this ).containerNode.addAt( this.numNodes(), Array.prototype.slice.call( arguments ) );\r
return X.Class._getPrivate( this ).containerNode.User.getNodeByUID();\r
},\r
getNodeAt : function( index ){\r
- return X.Class._getPrivate( this ).containerNode.User.getNodeByUID( index );\r
+ return X.Class._getPrivate( this ).containerNode.User.getNodeAt( index );\r
},\r
numNodes : function(){\r
return X.Class._getPrivate( this ).containerNode.User.numNodes();\r
--- /dev/null
+var _ScrollBox;\r
+\r
+(function(){\r
+\r
+var m = Math,\r
+ ABS = new Function( 'v', 'return v<0?-v:v' );\r
+\r
+ function Options(){};\r
+ \r
+ X.Class._override( Options.prototype, {\r
+ hScroll : true,\r
+ vScroll : true,\r
+ x : 0,\r
+ y : 0,\r
+ bounce : true,\r
+ bounceLock : false,\r
+ momentum : true,\r
+ lockDirection : true,\r
+ useTransform : true,\r
+ useTransition : true,\r
+ topOffset : 0,\r
+ checkDOMChanges : false, // Experimental\r
+ handleClick : true,\r
+ \r
+ // Scrollbar\r
+ hScrollbar : true,\r
+ vScrollbar : true,\r
+ fixedScrollbar : X.UA.Android,\r
+ hideScrollbar : X.UA.iOS,\r
+ fadeScrollbar : X.UA.iOS && has3d,\r
+ scrollbarClass : '',\r
+ \r
+ // Zoom\r
+ zoom : false,\r
+ zoomMin : 1,\r
+ zoomMax : 4,\r
+ doubleTapZoom : 2,\r
+ wheelAction : 'scroll',\r
+ \r
+ // Snap\r
+ snap : false,\r
+ snapThreshold : 1 //,\r
+ });\r
+\r
+ function Scrollbar( owner, dir ){\r
+ this.owner = owner;\r
+ this.options = owner.options;\r
+ this.dir = dir;\r
+ if( dir === 'h' ){\r
+ this.XorY = 'x';\r
+ this.widthOrHeight = 'width';\r
+ this.transrateXorY = 'translateX(';\r
+ };\r
+ };\r
+ X.Class._override( Scrollbar.prototype, {\r
+ owner : null,\r
+ dir : null,\r
+ options : null,\r
+ XorY : 'y',\r
+ widthOrHeight : 'height',\r
+ transrateXorY : 'translateY(',\r
+ active : false,\r
+ xnodeWrapper : null,\r
+ xnodeIndicator : null,\r
+ wrapperSize : 0,\r
+ indicatorSize : 0,\r
+ maxScroll : 0,\r
+ scrollPercent : 0,\r
+ \r
+ update : function(){\r
+ // remove scrollbar\r
+ if( !this.active ){\r
+ if( this.xnodeWrapper ){\r
+ X.Dom.Style.transform && this.xnodeIndicator.css( 'transform', '' );\r
+ this.xnodeWrapper.css( 'display', 'none' );\r
+ };\r
+ return;\r
+ };\r
+ \r
+ // create scrollbar\r
+ if( !this.xnodeWrapper ){\r
+ // Create the scrollbar wrapper\r
+ this.xnodeWrapper = this.owner.xnodeTarget.create( 'div' )\r
+ .className(\r
+ this.options.scrollbarClass ?\r
+ this.options.scrollbarClass + this.dir.toUpperCase() :\r
+ this.dir === 'h' ?\r
+ ( this.vScrollbar && this.vScrollbar.active ? 'ScrollBox-Scrollbar-Wrapper-V-withH' : 'ScrollBox-Scrollbar-Wrapper-H' ) :\r
+ ( this.hScrollbar && this.hScrollbar.active ? 'ScrollBox-Scrollbar-Wrapper-H-withV' : 'ScrollBox-Scrollbar-Wrapper-V' ) \r
+ );\r
+ \r
+ this.options.fadeScrollbar &&\r
+ this.xnodeWrapper.css(\r
+ {\r
+ opacity : 0,\r
+ transitionProperty : 'opacity',\r
+ transitionDuration : '350ms'\r
+ }\r
+ );\r
+ \r
+ // Create the scrollbar indicator\r
+ \r
+ this.xnodeIndicator = this.xnodeWrapper.create( 'div' );\r
+ \r
+ !this.options.scrollbarClass &&\r
+ this.xnodeIndicator.className(\r
+ this.dir === 'h' ?\r
+ 'ScrollBox-Scrollbar-Indicator-H' :\r
+ 'ScrollBox-Scrollbar-Indicator-V'\r
+ );\r
+ //if (this.options.useTransition) bar.style.cssText += ';' + cssVendor + 'transition-timing-function:cubic-bezier(0.33,0.66,0.66,1)';\r
+ };\r
+ \r
+ if( this.dir === 'h' ){\r
+ this.wrapperSize = this.hScrollbarWrapper.clientWidth;\r
+ this.indicatorSize = m.max( m.round( wrapperSize * wrapperSize / this.owner.scrollerW ), 8 );\r
+ //this.hScrollbarIndicator.style.width = this.hScrollbarIndicatorSize + 'px';\r
+ this.maxScroll = wrapperSize - indicatorSize;\r
+ this.scrollPercent = maxScroll / this.owner.maxScrollX;\r
+ } else {\r
+ this.wrapperSize = this.vScrollbarWrapper.clientHeight;\r
+ this.indicatorSize = m.max( m.round( wrapperSize * wrapperSize / this.owner.scrollerH ), 8);\r
+ // this.vScrollbarIndicator.style.height = indicatorSize + 'px';\r
+ this.maxScroll = this.vScrollbarSize - indicatorSize;\r
+ this.scrollPercent = maxScroll / this.owner.maxScrollY;\r
+ }; \r
+ this.xnodeIndicator.css( this.widthOrHeight, size + 'px' );\r
+ // Reset position\r
+ this.updatePosition( this.owner[ this.XorY ], true );\r
+ },\r
+ \r
+ updatePosition : function( pos, hidden ){\r
+ var size;\r
+ pos = this.scrollPercent * pos;\r
+ \r
+ if( pos < 0 ){\r
+ if( !this.options.fixedScrollbar ){\r
+ size = this.indicatorSize + m.round( pos * 3 );\r
+ if( size < 8 ) size = 8;\r
+ //this.xnodeIndicator.style[dir == 'h' ? 'width' : 'height'] = size + 'px';\r
+ this.xnodeIndicator.css( this.widthOrHeight, size + 'px' );\r
+ };\r
+ pos = 0;\r
+ } else\r
+ if( this.maxScroll < pos ){\r
+ if( !this.options.fixedScrollbar ){\r
+ size = this.indicatorSize - m.round( ( pos - this.maxScroll ) * 3 );\r
+ if( size < 8 ) size = 8;\r
+ //this.xnodeIndicator.style[dir == 'h' ? 'width' : 'height'] = size + 'px';\r
+ this.xnodeIndicator.css( this.widthOrHeight, size + 'px' );\r
+ pos = this.maxScroll + this.indicatorSize - size;\r
+ } else {\r
+ pos = this.maxScroll;\r
+ };\r
+ };\r
+ \r
+ if (this.options.useTransition){\r
+ this.xnodeWrapper.css( {\r
+ transitionDelay : '0',\r
+ opacity : hidden && this.options.hideScrollbar ? '0' : '1'\r
+ });\r
+ //this.xnodeIndicator.style[transform] = 'translate(' + (dir == 'h' ? pos + 'px,0)' : '0,' + pos + 'px)') + translateZ;\r
+ this.xnodeIndicator.anime( this.dir === 'h' ? { x : pos } : { y : pos } ); \r
+ };\r
+ }\r
+ });\r
+\r
+ // Constructor\r
+ function iScroll( uinodeRoot, uinodeTarget, xnodeTarget, xnodeScroller, options ){\r
+ var i;\r
+ \r
+ this.uinodeRoot = uinodeRoot;\r
+ this.uinodeTarget = uinodeTarget;\r
+ this.xnodeTarget = xnodeTarget;\r
+ this.xnodeScroller = xnodeScroller;\r
+\r
+ // Default options\r
+ this.options = new Options();\r
+\r
+ // User defined options\r
+ if( options ) for (i in options) this.options[i] = options[i];\r
+ \r
+ this.options.hScroll && ( this.hScrollbar = new Scrollbar( 'h', this ) );\r
+ this.options.vScroll && ( this.vScrollbar = new Scrollbar( 'v', this ) );\r
+ \r
+ // Set starting position\r
+ this.x = this.options.x;\r
+ this.y = this.options.y;\r
+\r
+ // Normalize options\r
+ this.options.useTransform = X.Dom.Style.transform && this.options.useTransform;\r
+ this.options.hScrollbar = this.options.hScroll && this.options.hScrollbar;\r
+ this.options.vScrollbar = this.options.vScroll && this.options.vScrollbar;\r
+ this.options.zoom = this.options.useTransform && this.options.zoom;\r
+ this.options.useTransition = X.Dom.Style.transition && this.options.useTransition;\r
+\r
+ // Helpers FIX ANDROID BUG!\r
+ // translate3d and scale doesn't work together!\r
+ // Ignoring 3d ONLY WHEN YOU SET this.options.zoom\r
+ //if ( this.options.zoom && X.UA.isAndroid ){\r
+ // translateZ = '';\r
+ //}\r
+ \r
+ // Set some default styles\r
+\r
+ if (this.options.useTransform){\r
+ this.scroller.style[X.Dom.Style.transform] = 'translate(' + this.x + 'px,' + this.y + 'px)' + translateZ;\r
+ this.scroller.style[X.Dom.Style.transformOrigin] = '0 0';\r
+ } else {\r
+ this.scroller.style.cssText += ';position:absolute;top:' + this.y + 'px;left:' + this.x + 'px';\r
+ };\r
+\r
+ if (this.options.useTransition){\r
+ this.scroller.style[X.Dom.Style.transition.Property] = this.options.useTransform ? X.Dom.Style.cssVendor + 'transform' : 'top left';\r
+ this.scroller.style[X.Dom.Style.transition.Duration] = '0'; \r
+ this.scroller.style[X.Dom.Style.transition.TimingFunction] = 'cubic-bezier(0.33,0.66,0.66,1)';\r
+ this.options.fixedScrollbar = true;\r
+ };\r
+\r
+ this.refresh();\r
+\r
+ //this._bind(RESIZE_EV, window);\r
+ X.Dom.Event.add( window, RESIZE_EV, this );\r
+ //this._bind(START_EV);\r
+ uinodeTarget.listen( X.UI.Event.DRAG_START, this );\r
+ };\r
+\r
+// Prototype\r
+iScroll.prototype = {\r
+ uinodeRoot : null,\r
+ uinodeTarget : null,\r
+ xnodeTarget : null,\r
+ xnodeScroller : null,\r
+ options : null,\r
+ enabled : true,\r
+ x : 0,\r
+ y : 0,\r
+ steps : [],\r
+ scale : 1,\r
+ currPageX : 0,\r
+ currPageY : 0,\r
+ pagesX : [],\r
+ pagesY : [],\r
+ animeTimerID : 0,\r
+ wheelZoomCount : 0,\r
+ \r
+ wrapperW : 0,\r
+ wrapperH : 0,\r
+ minScrollY : 0,\r
+ scrollerW : 0,\r
+ scrollerH : 0,\r
+ maxScrollX : 0,\r
+ maxScrollY : 0,\r
+ dirX : 0,\r
+ dirY : 0,\r
+ hScrollbar : false,\r
+ vScrollbar : false,\r
+ wrapperOffsetLeft : 0,\r
+ wrapperOffsetTop : 0,\r
+ \r
+ \r
+ currPageX : 0,\r
+ currPageY : 0,\r
+ \r
+ moved : false,\r
+ animating : false,\r
+ zoomed : false,\r
+ distX : false,\r
+ distY : false,\r
+ absDistX : false,\r
+ absDistY : false,\r
+ absStartX : false, // Needed by snap threshold\r
+ absStartY : false,\r
+ startX : false,\r
+ startY : false,\r
+ pointX : false,\r
+ pointY : false,\r
+ startTime : false,\r
+ \r
+ handleEvent: function (e) {\r
+ switch(e.type) {\r
+ case X.UI.Event.DRAG :\r
+ return this._move(e);\r
+ case X.UI.Event.WHEEL :\r
+ return this._wheel(e);\r
+ case X.UI.Event.DRAG_START :\r
+ //if (!hasTouch && e.button !== 0) return;\r
+ return this._start(e);\r
+ case X.UI.Event.DRAG_END :\r
+ return this._end(e);\r
+ case X.UI.Event.ANIME_END :\r
+ return this._transitionEnd(e);\r
+ case RESIZE_EV :\r
+ return this._resize(); \r
+ }\r
+ },\r
+ \r
+ _trigger : function( type, e ){\r
+ \r
+ return this.uinodeTarget.dispatch( );\r
+ },\r
+ \r
+ _resize: function () {\r
+ X.Timer.once( X.UA.Android ? 200 : 0, this, this.refresh );\r
+ // setTimeout( this.refresh(), isAndroid ? 200 : 0);\r
+ },\r
+ \r
+ _updateScrollPosition: function( x, y, time ){\r
+ if (this.zoomed) return;\r
+\r
+ this.xnodeScroller.anime({\r
+ x : this.x = this.hScrollbar && this.hScrollbar.active ? m.round(x) : 0,\r
+ y : this.y = this.vScrollbar && this.vScrollbar.active ? m.round(y) : 0\r
+ }, time );\r
+\r
+ this.hScrollbar && this.hScrollbar.active && this.hScrollbar.updatePosition( this.x );\r
+ this.vScrollbar && this.vScrollbar.active && this.vScrollbar.updatePosition( this.y );\r
+ },\r
+ \r
+ _start: function (e) {\r
+ var point = hasTouch ? e.touches[0] : e,\r
+ matrix, x, y,\r
+ ret;\r
+ //c1, c2;\r
+\r
+ if (!this.enabled) return;\r
+\r
+ //if (this.options.onBeforeScrollStart) this.options.onBeforeScrollStart.call(this, e);\r
+ if( ( ret = this._trigger( X.UI.Event.SCROLL_BEFORE_START ) ) & X.Callback.PREVENT_DEFAULT ){\r
+ return ret;\r
+ };\r
+\r
+ //if (this.options.useTransition || this.options.zoom) this._transitionTime(0);\r
+\r
+ this.moved = false;\r
+ this.animating = false;\r
+ this.zoomed = false;\r
+ this.distX = 0;\r
+ this.distY = 0;\r
+ this.absDistX = 0;\r
+ this.absDistY = 0;\r
+ this.dirX = 0;\r
+ this.dirY = 0;\r
+\r
+ if (this.options.momentum) {\r
+ if (this.options.useTransform) {\r
+ // Very lame general purpose alternative to CSSMatrix\r
+ matrix = getComputedStyle(this.scroller, null)[transform].replace(/[^0-9\-.,]/g, '').split(',');\r
+ x = +(matrix[12] || matrix[4]);\r
+ y = +(matrix[13] || matrix[5]);\r
+ } else {\r
+ x = +getComputedStyle(this.scroller, null).left.replace(/[^0-9-]/g, '');\r
+ y = +getComputedStyle(this.scroller, null).top.replace(/[^0-9-]/g, '');\r
+ };\r
+ \r
+ if (x !== this.x || y !== this.y) {\r
+ if (this.options.useTransition){\r
+ //this._unbind(TRNEND_EV);\r
+ X.Dom.Event.remove( this.scroller, TRNEND_EV, this );\r
+ } else {\r
+ X.Timer.cancelFrame(this.animeTimerID);\r
+ };\r
+ this.steps = this.steps ? ( this.steps.length = 0 ) : [];\r
+ this._updateScrollPosition( x, y, 0 );\r
+ //if (this.options.onScrollEnd) this.options.onScrollEnd.call(this);\r
+ return this._trigger( X.UI.Event.SCROLL_END, e );\r
+ };\r
+ };\r
+\r
+ this.absStartX = this.x; // Needed by snap threshold\r
+ this.absStartY = this.y;\r
+\r
+ this.startX = this.x;\r
+ this.startY = this.y;\r
+ this.pointX = point.pageX;\r
+ this.pointY = point.pageY;\r
+\r
+ this.startTime = e.timeStamp || X.getTime();\r
+\r
+ this.uinodeRoot.listen( X.UI.Event.DRAG, this );\r
+ this.uinodeRoot.listen( X.UI.Event.DRAG_END, this );\r
+\r
+ return this._trigger( X.UI.Event.SCROLL_START, e );\r
+ },\r
+ \r
+ _move: function (e) {\r
+ var point = hasTouch ? e.touches[0] : e,\r
+ deltaX = point.pageX - this.pointX,\r
+ deltaY = point.pageY - this.pointY,\r
+ newX = this.x + deltaX,\r
+ newY = this.y + deltaY,\r
+ c1, c2, scale,\r
+ timestamp = e.timeStamp ||X.getTime(), ret;\r
+\r
+ //if (this.options.onBeforeScrollMove) this.options.onBeforeScrollMove.call(this, e);\r
+ if( ( ret = this._trigger( X.UI.Event.SCROLL_BEFORE_MOVE ) ) & X.Callback.PREVENT_DEFAULT ){\r
+ return ret;\r
+ };\r
+\r
+ this.pointX = point.pageX;\r
+ this.pointY = point.pageY;\r
+\r
+ // Slow down if outside of the boundaries\r
+ if (newX > 0 || newX < this.maxScrollX) {\r
+ newX = this.options.bounce ? this.x + (deltaX / 2) : newX >= 0 || this.maxScrollX >= 0 ? 0 : this.maxScrollX;\r
+ };\r
+ if (newY > this.minScrollY || newY < this.maxScrollY) {\r
+ newY = this.options.bounce ? this.y + (deltaY / 2) : newY >= this.minScrollY || this.maxScrollY >= 0 ? this.minScrollY : this.maxScrollY;\r
+ };\r
+\r
+ this.distX += deltaX;\r
+ this.distY += deltaY;\r
+ this.absDistX = ABS(this.distX);\r
+ this.absDistY = ABS(this.distY);\r
+\r
+ if (this.absDistX < 6 && this.absDistY < 6) {\r
+ return;\r
+ };\r
+\r
+ // Lock direction\r
+ if (this.options.lockDirection) {\r
+ if (this.absDistX > this.absDistY + 5) {\r
+ newY = this.y;\r
+ deltaY = 0;\r
+ } else if (this.absDistY > this.absDistX + 5) {\r
+ newX = this.x;\r
+ deltaX = 0;\r
+ };\r
+ };\r
+\r
+ this.moved = true;\r
+ this._updateScrollPosition(newX, newY, 0);\r
+ this.dirX = deltaX > 0 ? -1 : deltaX < 0 ? 1 : 0;\r
+ this.dirY = deltaY > 0 ? -1 : deltaY < 0 ? 1 : 0;\r
+\r
+ if (timestamp - this.startTime > 300) {\r
+ this.startTime = timestamp;\r
+ this.startX = this.x;\r
+ this.startY = this.y;\r
+ };\r
+ \r
+ //if (this.options.onScrollMove) this.options.onScrollMove.call(this, e);\r
+ return this._trigger( X.UI.Event.SCROLL_MOVE, e );\r
+ },\r
+ \r
+ _end: function (e) {\r
+ if (hasTouch && e.touches.length !== 0) return;\r
+\r
+ var point = hasTouch ? e.changedTouches[0] : e,\r
+ momentumX = { dist:0, time:0 },\r
+ momentumY = { dist:0, time:0 },\r
+ duration = ( e.timeStamp ||X.getTime() ) - this.startTime,\r
+ newPosX = this.x,\r
+ newPosY = this.y,\r
+ distX, distY,\r
+ newDuration,\r
+ snap,\r
+ scale;\r
+\r
+ this.uinodeRoot.unlisten( X.UI.Event.DRAG, this );\r
+ this.uinodeRoot.unlisten( X.UI.Event.DRAG_END, this );\r
+\r
+ //this._unbind(MOVE_EV, window);\r
+ //this._unbind(END_EV, window);\r
+ //this._unbind(CANCEL_EV, window);\r
+\r
+ //if (this.options.onBeforeScrollEnd) this.options.onBeforeScrollEnd.call(this, e);\r
+ \r
+\r
+ if (!this.moved) {\r
+\r
+\r
+ this._resetPos(400);\r
+\r
+ //if (this.options.onTouchEnd) this.options.onTouchEnd.call(this, e);\r
+ return;\r
+ };\r
+\r
+ if (duration < 300 && this.options.momentum) {\r
+ momentumX = newPosX ? this._momentum(newPosX - this.startX, duration, -this.x, this.scrollerW - this.wrapperW + this.x, this.options.bounce ? this.wrapperW : 0) : momentumX;\r
+ momentumY = newPosY ? this._momentum(newPosY - this.startY, duration, -this.y, (this.maxScrollY < 0 ? this.scrollerH - this.wrapperH + this.y - this.minScrollY : 0), this.options.bounce ? this.wrapperH : 0) : momentumY;\r
+\r
+ newPosX = this.x + momentumX.dist;\r
+ newPosY = this.y + momentumY.dist;\r
+\r
+ if ((this.x > 0 && newPosX > 0) || (this.x < this.maxScrollX && newPosX < this.maxScrollX)) momentumX = { dist:0, time:0 };\r
+ if ((this.y > this.minScrollY && newPosY > this.minScrollY) || (this.y < this.maxScrollY && newPosY < this.maxScrollY)) momentumY = { dist:0, time:0 };\r
+ \r
+ if (momentumX.dist || momentumY.dist) {\r
+ newDuration = m.max(m.max(momentumX.time, momentumY.time), 10);\r
+ \r
+ this.scrollTo(m.round(newPosX), m.round(newPosY), newDuration);\r
+ \r
+ //if (this.options.onTouchEnd) this.options.onTouchEnd.call(this, e);\r
+ return;\r
+ }; \r
+ };\r
+\r
+ this._resetPos(200);\r
+ //if (this.options.onTouchEnd) this.options.onTouchEnd.call(this, e);\r
+ },\r
+ \r
+ /*\r
+ _onZoomEndEvent : null,\r
+ _onZoomEndTimerComplete : function(){\r
+ this.options.onZoomEnd.call( this, this._onZoomEndEvent );\r
+ },\r
+ */\r
+ \r
+ /*\r
+ _onDobleTapTimerPoint : null,\r
+ _onDobleTapTimerComplete : function () {\r
+ var point = this._onDobleTapTimerPoint,\r
+ target, ev;\r
+ this.doubleTapTimer = null;\r
+\r
+ // Find the last touched element\r
+ target = point.target;\r
+ while (target.nodeType !== 1) target = target.parentNode;\r
+\r
+ if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA') {\r
+ ev = document.createEvent('MouseEvents');\r
+ ev.initMouseEvent('click', true, true, e.view, 1,\r
+ point.screenX, point.screenY, point.clientX, point.clientY,\r
+ e.ctrlKey, e.altKey, e.shiftKey, e.metaKey,\r
+ 0, null);\r
+ ev._fake = true;\r
+ target.dispatchEvent(ev);\r
+ }\r
+ },*/\r
+ \r
+ _resetPos: function (time) {\r
+ var resetX =\r
+ 0 <= this.x ?\r
+ 0 :\r
+ this.x < this.maxScrollX ?\r
+ this.maxScrollX :\r
+ this.x,\r
+ resetY =\r
+ this.minScrollY <= this.y || 0 < this.maxScrollY ?\r
+ this.minScrollY :\r
+ this.y < this.maxScrollY ?\r
+ this.maxScrollY :\r
+ this.y;\r
+\r
+ if( resetX === this.x && resetY === this.y ){\r
+ if( this.moved ){\r
+ this.moved = false;\r
+ this._trigger( X.UI.Event.SCROLL_END );\r
+ //if (this.options.onScrollEnd) this.options.onScrollEnd.call(this); // Execute custom code on scroll end\r
+ };\r
+ if( this.options.hideScrollbar ){\r
+ this.hScrollbar && this.hScrollbar.active &&\r
+ \r
+ //if (vendor == 'webkit') this.hScrollbarWrapper.style[transitionDelay] = '300ms';\r
+ //this.hScrollbarWrapper.style.opacity = '0';\r
+ this.hScrollbar.xnodeWraper.anime( {\r
+ opacity : 0\r
+ }, 300 );\r
+ this.vScrollbar && this.vScrollbar.active &&\r
+ //if (vendor == 'webkit') this.vScrollbarWrapper.style[transitionDelay] = '300ms';\r
+ //this.vScrollbarWrapper.style.opacity = '0';\r
+ this.hScrollbar.xnodeWraper.anime( {\r
+ opacity : 0\r
+ }, 300 ); \r
+ };\r
+ return;\r
+ };\r
+ this.scrollTo(resetX, resetY, time || 0);\r
+ },\r
+ \r
+ _wheel: function (e) {\r
+ var wheelDeltaX, wheelDeltaY,\r
+ deltaX, deltaY,\r
+ deltaScale;\r
+/*\r
+ if ('wheelDeltaX' in e) {\r
+ wheelDeltaX = e.wheelDeltaX / 12;\r
+ wheelDeltaY = e.wheelDeltaY / 12;\r
+ } else if('wheelDelta' in e) {\r
+ wheelDeltaX = wheelDeltaY = e.wheelDelta / 12;\r
+ } else if ('detail' in e) {\r
+ wheelDeltaX = wheelDeltaY = -e.detail * 3;\r
+ } else {\r
+ return;\r
+ } */\r
+ \r
+ deltaX = this.x + e.wheelDeltaX;\r
+ deltaY = this.y + e.wheelDeltaY;\r
+\r
+ deltaX =\r
+ 0 < deltaX ?\r
+ 0 :\r
+ deltaX < this.maxScrollX ?\r
+ this.maxScrollX : deltaX;\r
+\r
+ deltaY =\r
+ this.minScrollY < deltaY ? \r
+ this.minScrollY :\r
+ deltaY < this.maxScrollY ?\r
+ this.maxScrollY : deltaY;\r
+ \r
+ this.maxScrollY < 0 && this.scrollTo(deltaX, deltaY, 0);\r
+ },\r
+ \r
+ /*\r
+ _wheelTimerCompleteEvent : null,\r
+ _wheelTimerComplete : function() {\r
+ this.wheelZoomCount--;\r
+ if (!this.wheelZoomCount && this.options.onZoomEnd) this.options.onZoomEnd.call(this, this._wheelTimerCompleteEvent );\r
+ },\r
+ */\r
+ \r
+ _transitionEnd: function( e ){\r
+ if( e.target !== this.xnodeScroller ) return;\r
+\r
+ //this._unbind(TRNEND_EV);\r
+ //X.Dom.Event.remove( this.scroller, TRNEND_EV, this );\r
+ this.animating = false;\r
+ \r
+ this._startAnime();\r
+ \r
+ return X.Callback.UN_LISTEN;\r
+ },\r
+\r
+\r
+ /**\r
+ *\r
+ * Utilities\r
+ *\r
+ */\r
+ _startAnime: function () {\r
+ var startX = this.x,\r
+ startY = this.y,\r
+ step, animate;\r
+\r
+ if (this.animating) return;\r
+ \r
+ if (!this.steps.length) {\r
+ this._resetPos(400);\r
+ return;\r
+ };\r
+ \r
+ step = this.steps.shift();\r
+ \r
+ if( step.x === startX && step.y === startY ) step.time = 0;\r
+\r
+ this.animating = true;\r
+ this.moved = true;\r
+ \r
+ //if (this.options.useTransition) {\r
+ //this._transitionTime(step.time);\r
+ this._updateScrollPosition( step.x, step.y, step.time );\r
+ //this.animating = false;\r
+ this.xnodeScroller.listenOnce( X.UI.Event.ANIME_END, this );\r
+ //step.time ? X.Dom.Event.add( this.scroller, TRNEND_EV, this ) /* this._bind(TRNEND_EV) */ : this._resetPos(0);\r
+ //return;\r
+ //}\r
+ //this._doAnimate( X.getTime(), step, startX, startY );\r
+ },\r
+\r
+/*\r
+ _doAnimate : function( startTime, step, startX, startY ){\r
+ var now =X.getTime(),\r
+ easeOut, newX, newY;\r
+\r
+ if (now >= startTime + step.time) {\r
+ this._updateScrollPosition(step.x, step.y);\r
+ this.animating = false;\r
+ //if (this.options.onAnimationEnd) this.options.onAnimationEnd.call( this ); // Execute custom code on animation end\r
+ this._startAnime();\r
+ return;\r
+ };\r
+\r
+ now = (now - startTime) / step.time - 1;\r
+ easeOut = m.sqrt(1 - now * now);\r
+ newX = (step.x - startX) * easeOut + startX;\r
+ newY = (step.y - startY) * easeOut + startY;\r
+ this._updateScrollPosition(newX, newY);\r
+ if( this.animating ) this.animeTimerID = X.Timer.requestFrame( this, this._doAnimate, [ startTime, step, startX, startY ] );\r
+ },\r
+*/\r
+\r
+ _momentum: function (dist, time, maxDistUpper, maxDistLower, size) {\r
+ var deceleration = 0.0006,\r
+ speed = ABS(dist) / time,\r
+ newDist = (speed * speed) / (2 * deceleration),\r
+ newTime = 0, outsideDist = 0;\r
+\r
+ // Proportinally reduce speed if we are outside of the boundaries\r
+ if (dist > 0 && newDist > maxDistUpper) {\r
+ outsideDist = size / (6 / (newDist / speed * deceleration));\r
+ maxDistUpper = maxDistUpper + outsideDist;\r
+ speed = speed * maxDistUpper / newDist;\r
+ newDist = maxDistUpper;\r
+ } else if (dist < 0 && newDist > maxDistLower) {\r
+ outsideDist = size / (6 / (newDist / speed * deceleration));\r
+ maxDistLower = maxDistLower + outsideDist;\r
+ speed = speed * maxDistLower / newDist;\r
+ newDist = maxDistLower;\r
+ }\r
+\r
+ newDist = newDist * (dist < 0 ? -1 : 1);\r
+ newTime = speed / deceleration;\r
+\r
+ return { dist: newDist, time: m.round(newTime) };\r
+ },\r
+\r
+ _offset: function (el) {\r
+ var left = -el.offsetLeft,\r
+ top = -el.offsetTop;\r
+ \r
+ while (el = el.offsetParent) {\r
+ left -= el.offsetLeft;\r
+ top -= el.offsetTop;\r
+ }\r
+ \r
+ if (el != this.wrapper) {\r
+ left *= this.scale;\r
+ top *= this.scale;\r
+ }\r
+\r
+ return { left: left, top: top };\r
+ },\r
+\r
+ /*\r
+ _bind: function (type, el, bubble) {\r
+ X.Dom.Event.add( el || this.scroller, type, this );\r
+ },\r
+\r
+ _unbind: function (type, el, bubble) {\r
+ X.Dom.Event.remove( el || this.scroller, type, this );\r
+ },\r
+ */\r
+\r
+ /**\r
+ *\r
+ * Public methods\r
+ *\r
+ */\r
+ destroy: function () {\r
+ this.scroller.style[transform] = '';\r
+\r
+ // Remove the scrollbars\r
+ this.hScrollbar && this.hScrollbar.destroy();\r
+ this.vScrollbar && this.vScrollbar.destroy();\r
+\r
+ // Remove the event listeners\r
+ X.Dom.Event.add( window, RESIZE_EV, this );\r
+ this.uinodeTarget.unlisten( X.UI.Event.DRAG_START, this );\r
+ this.uinodeRoot.unlisten( X.UI.Event.DRAG, this );\r
+ this.uinodeRoot.unlisten( X.UI.Event.DRAG_END, this );\r
+ \r
+ //this._unbind(RESIZE_EV, window);\r
+ //this._unbind(START_EV);\r
+ //this._unbind(MOVE_EV, window);\r
+ //this._unbind(END_EV, window);\r
+ //this._unbind(CANCEL_EV, window);\r
+ \r
+ if (!this.options.hasTouch) {\r
+ //this._unbind('DOMMouseScroll');\r
+ //this._unbind('mousewheel');\r
+ }\r
+ \r
+ // if (this.options.useTransition) this._unbind(TRNEND_EV);\r
+ this.options.useTransition && X.Dom.Event.remove( this.scroller, TRNEND_EV, this );\r
+ \r
+ //if (this.options.checkDOMChanges) clearInterval(this.checkDOMTime);\r
+ \r
+ //if (this.options.onDestroy) this.options.onDestroy.call(this);\r
+ },\r
+\r
+ refresh: function () {\r
+ var offset,\r
+ i, l,\r
+ els,\r
+ pos = 0,\r
+ page = 0;\r
+\r
+ if (this.scale < this.options.zoomMin) this.scale = this.options.zoomMin;\r
+ this.wrapperW = this.wrapper.clientWidth || 1;\r
+ this.wrapperH = this.wrapper.clientHeight || 1;\r
+\r
+ this.minScrollY = -this.options.topOffset || 0;\r
+ this.scrollerW = m.round(this.scroller.offsetWidth * this.scale);\r
+ this.scrollerH = m.round((this.scroller.offsetHeight + this.minScrollY) * this.scale);\r
+ this.maxScrollX = this.wrapperW - this.scrollerW;\r
+ this.maxScrollY = this.wrapperH - this.scrollerH + this.minScrollY;\r
+ this.dirX = 0;\r
+ this.dirY = 0;\r
+\r
+ // if (this.options.onRefresh) this.options.onRefresh.call(this);\r
+ this._trigger( X.UI.Event.SCROLL_REFRESH, {} );\r
+\r
+ this.hScrollbar && ( this.hScrollbar.active = this.maxScrollX < 0 );\r
+ this.vScrollbar && ( this.vScrollbar.active = !this.options.bounceLock && !this.hScroll || this.scrollerH > this.wrapperH );\r
+ \r
+ offset = this._offset(this.wrapper);\r
+ this.wrapperOffsetLeft = -offset.left;\r
+ this.wrapperOffsetTop = -offset.top;\r
+\r
+ // Prepare snap\r
+ if (typeof this.options.snap == 'string') {\r
+ this.pagesX = [];\r
+ this.pagesY = [];\r
+ els = this.scroller.querySelectorAll(this.options.snap);\r
+ for (i=0, l=els.length; i<l; i++) {\r
+ pos = this._offset(els[i]);\r
+ pos.left += this.wrapperOffsetLeft;\r
+ pos.top += this.wrapperOffsetTop;\r
+ this.pagesX[i] = pos.left < this.maxScrollX ? this.maxScrollX : pos.left * this.scale;\r
+ this.pagesY[i] = pos.top < this.maxScrollY ? this.maxScrollY : pos.top * this.scale;\r
+ }\r
+ } else if (this.options.snap) {\r
+ this.pagesX = [];\r
+ while (pos >= this.maxScrollX) {\r
+ this.pagesX[page] = pos;\r
+ pos = pos - this.wrapperW;\r
+ page++;\r
+ }\r
+ if (this.maxScrollX%this.wrapperW) this.pagesX[this.pagesX.length] = this.maxScrollX - this.pagesX[this.pagesX.length-1] + this.pagesX[this.pagesX.length-1];\r
+\r
+ pos = 0;\r
+ page = 0;\r
+ this.pagesY = [];\r
+ while (pos >= this.maxScrollY) {\r
+ this.pagesY[page] = pos;\r
+ pos = pos - this.wrapperH;\r
+ page++;\r
+ }\r
+ if (this.maxScrollY%this.wrapperH) this.pagesY[this.pagesY.length] = this.maxScrollY - this.pagesY[this.pagesY.length-1] + this.pagesY[this.pagesY.length-1];\r
+ }\r
+\r
+ // Prepare the scrollbars\r
+ this._scrollbar('h');\r
+ this._scrollbar('v');\r
+\r
+ if (!this.zoomed) {\r
+ this.scroller.style[transitionDuration] = '0';\r
+ this._resetPos(400);\r
+ }\r
+ },\r
+\r
+ scrollTo: function (x, y, time, relative) {\r
+ var step = x,\r
+ i, l;\r
+\r
+ this.stop();\r
+\r
+ if( !step.length ) step = [{ x: x, y: y, time: time, relative: relative }];\r
+ \r
+ for( i = 0, l = step.length; i < l; ++i ){\r
+ if( step[ i ].relative ){\r
+ step[ i ].x = this.x - step[ i ].x;\r
+ step[ i ].y = this.y - step[ i ].y;\r
+ };\r
+ this.steps.push( {\r
+ x : step[i].x,\r
+ y : step[i].y,\r
+ time : step[i].time || 0\r
+ });\r
+ };\r
+\r
+ this._startAnime();\r
+ },\r
+\r
+ disable: function () {\r
+ this.stop();\r
+ this._resetPos(0);\r
+ this.enabled = false;\r
+\r
+ // If disabled after touchstart we make sure that there are no left over events\r
+ //this._unbind(MOVE_EV, window);\r
+ //this._unbind(END_EV, window);\r
+ //this._unbind(CANCEL_EV, window);\r
+ this.uinodeRoot.unlisten( X.UI.Event.DRAG, this );\r
+ this.uinodeRoot.unlisten( X.UI.Event.DRAG_END, this );\r
+ },\r
+ \r
+ enable: function () {\r
+ this.enabled = true;\r
+ },\r
+ \r
+ stop: function () {\r
+ //if (this.options.useTransition) this._unbind(TRNEND_EV);\r
+ //else X.Timer.cancelFrame( this.animeTimerID );\r
+ /*\r
+ if (this.options.useTransition){\r
+ X.Dom.Event.remove( this.scroller, TRNEND_EV, this );\r
+ } else {\r
+ X.Timer.cancelFrame(this.animeTimerID);\r
+ };\r
+ */\r
+ this.xnodeScroller.stop();\r
+ if( this.steps ) this.steps.length = 0;\r
+ this.moved = false;\r
+ this.animating = false;\r
+ },\r
+ \r
+ isReady: function () {\r
+ return !this.moved && !this.zoomed && !this.animating;\r
+ }\r
+};\r
+\r
+\r
+\r
+_ScrollBox = _ChromeBox.inherits(\r
+ '_ScrollBox',\r
+ X.Class.PRIVATE_DATA | X.Class.SUPER_ACCESS,\r
+ {\r
+ //elmScroll : null,\r
+ //elmScroller : null,\r
+ //elmScrollbar : null,\r
+ \r
+ scrolling : false,\r
+ _scrollX : 0,\r
+ _scrollY : 0,\r
+ scrollXPercent : 0,\r
+ scrollYPercent : 0,\r
+ scrollingX : 0,\r
+ scrollingY : 0,\r
+ \r
+ _containerNode : null,\r
+ scrollManager : null,\r
+ \r
+ Constructor : function( layout, args ){\r
+ this.SuperConstructor( layout, args );\r
+ this._containerNode = _X.Class._getPrivate( this.containerNode );\r
+ },\r
+ \r
+ creationComplete : function(){\r
+ _AbstractUINode.prototype.creationComplete.call( this, arguments );\r
+ this.scrollManager = new iScroll( this.root, this.User, this.rawElement, this._containerNode.rawElement );\r
+ this._check();\r
+ },\r
+ \r
+ calculate : function(){\r
+ _AbstractUINode.prototype.calculate.call( this, arguments );\r
+ this._check();\r
+ },\r
+ \r
+ _check : function(){\r
+ if( this.w < this._containerNode.w || this.h < this._containerNode.h ){\r
+ // scroll\r
+ if( this.scrolling ){\r
+ // fix scroll position from scrollXPercent, scrollYPercent\r
+ \r
+ } else {\r
+ // create scroller\r
+ this.listen( X.UI.Event.POINTER_START, this );\r
+ \r
+ \r
+ this._move( 0, 0 );\r
+ \r
+ this.scrolling = true;\r
+ };\r
+ } else\r
+ // no scroll\r
+ if( this.scrolling ){\r
+ // remove scroller\r
+ \r
+ ( this._scrollX !== 0 || this._scrollY !== 0 ) && this._move( 0, 0 );\r
+ \r
+ delete this.scrolling;\r
+ };\r
+ },\r
+ \r
+ handleEvent : function( e ){\r
+ switch( e.type ){\r
+ case X.UI.Event.POINTER_START :\r
+ this.listen( X.UI.Event.POINTER_MOVE, this );\r
+ this.listen( X.UI.Event.POINTER_END, this );\r
+ \r
+ break;\r
+ case X.UI.Event.POINTER_MOVE :\r
+ \r
+ break;\r
+ case X.UI.Event.POINTER_END :\r
+ this.unlisten( X.UI.Event.POINTER_MOVE, this );\r
+ this.unlisten( X.UI.Event.POINTER_END, this );\r
+ \r
+ break;\r
+ };\r
+ },\r
+ \r
+ _move : function( x, y ){\r
+ \r
+ },\r
+ \r
+ _remove : function(){\r
+ _AbstractUINode.prototype._remove.call( this, arguments );\r
+ if( this.scrolling ){\r
+ // remove scroll\r
+ };\r
+ }\r
+ \r
+ }\r
+);\r
+\r
+})();\r
+\r
+var ScrollBox = ChromeBox.inherits(\r
+ 'ScrollBox',\r
+ X.Class.SUPER_ACCESS,\r
+ _ScrollBox,\r
+ {\r
+ Constructor : function(){\r
+ var args = [],\r
+ i = arguments.length,\r
+ arg, layout;\r
+ \r
+ for( ; i; ){\r
+ arg = arguments[ --i ];\r
+ if( arg.instanceOf && arg.instanceOf( X.UI.Layout.Base ) ){\r
+ layout = arg;\r
+ } else {\r
+ args[ args.length ] = arg;\r
+ };\r
+ };\r
+ \r
+ this.style = DisplayNodeStyle( this,\r
+ X.Class._newPrivate(\r
+ this,\r
+ X.UI.Layout.Canvas,\r
+ [\r
+ Box(\r
+ layout || VerticalLayoutManager,\r
+ {\r
+ name : 'ScrollBox-Scroller',\r
+ role : 'container'\r
+ },\r
+ args\r
+ )\r
+ ]\r
+ )\r
+ );\r
+ this.style.addName( 'ScrollBox' );\r
+ },\r
+ scrollX : function(){\r
+ \r
+ },\r
+ scrollY : function(){\r
+ \r
+ },\r
+ scrollWidth : function(){\r
+ \r
+ },\r
+ scrollHeight : function(){\r
+ \r
+ },\r
+ scrollTo : function( nodeOrX, y ){\r
+ \r
+ }\r
+ }\r
+);
\ No newline at end of file
'_Text',\r
X.Class.PRIVATE_DATA,\r
{\r
- content : null,\r
+ content : null,\r
+ \r
Constructor : function( content ){\r
if( !( this.User.instanceOf( Text ) ) ){\r
//throw new Error( 'Text を継承したインスタンスだけが _Text のオーナーになれます' );\r
};\r
- this.content = content;\r
+ this.xnode = X.Dom.Node.create( 'div' );\r
+ \r
+ if( X.Type.isString( content ) ) this.content = content;\r
},\r
- afterAddition : function(){\r
- this.rawElement.text( this.content );\r
- this.styleData.afterAddition();\r
+ creationComplete : function(){\r
+ this.content && this.xnode.text( this.content );\r
\r
this.phase = 3;\r
- this.User.dispatch( { type : X.UI.Event.CREATION_COMPLETE } );\r
+ this.dispatch( { type : X.UI.Event.CREATION_COMPLETE } );\r
}\r
}\r
);\r
X.Class.SUPER_ACCESS,\r
_Text,\r
{\r
- Constructor : function( content, cssObj ){\r
- var data = X.Class._newPrivate( this, content );\r
- this.style = DisplayNodeStyle( this, data );\r
- cssObj && this.style.css( cssObj );\r
- if( cssObj ){\r
- if( cssObj.role === 'chrome' ) data.forChrome = true;\r
- };\r
+ Constructor : function( opt_content, opt_cssObj ){\r
+ X.Class._newPrivate( this, opt_content );\r
+ X.Type.isObject( opt_cssObj = opt_cssObj || opt_content ) && this.attr( opt_cssObj );\r
},\r
- content : function(){\r
- \r
+ content : function( v ){\r
+ var data = X.Class._getPrivate( this );\r
+ if( data.content !== v ){\r
+ data.xnode && data.xnode.text( v );\r
+ data.rootData.reserveCalc();\r
+ if( data.dirty < X.UI.Dirty.CONTENT ) data.dirty = X.UI.Dirty.CONTENT; \r
+ };\r
}\r
}\r
);
\ No newline at end of file
-var currentRootData = null;
-
function eventRellay( e ){
var x = e.clientX,
y = e.clientY,
type = X.UI.Event.NameToID[ e.type ],
i = 0,
- data = currentRootData,
+ data = X.UI.currentRootData,
sysOnly = false,
list, ret, parent;
if( type !== X.UI.Event._POINTER_MOVE && type !== X.UI.Event._MOUSE_MOVE ){
e.type = type;
if( data && ( data = data.monopolyNodeData ) && ( ret = data.dispatch( e ) ) & X.Callback.MONOPOLY ) return ret;
- if( currentRootData === null ) return;
- list = currentRootData.hoverList;
- data = currentRootData.targetNodeData = currentRootData;
+ if( X.UI.currentRootData === null ) return;
+ list = X.UI.currentRootData.hoverList;
+ data = X.UI.currentRootData.targetNodeData = X.UI.currentRootData;
data.capcher( x, y );
- data = currentRootData.targetNodeData;
+ data = X.UI.currentRootData.targetNodeData;
//console.log( 'absX: ' + data.absoluteX + ', absY:' + data.absoluteY )
// data.apiuser.updateCoursor( data.targetNodeData._cursor );
while( data ){
while( parent.parentData && parent === parent.parentData.hitChildData ){
parent = parent.parentData;
};
- if( parent !== currentRootData ){
- data.isHover === true && data.styleData.removeName( data.hoverStyleName );
- delete data.isHover;
+ if( parent !== X.UI.currentRootData ){
+ data.hoverClassName && data.xnode.removeClass( data.hoverClassName );
data._listeners && data._listeners[ X.UI.Event.POINTER_OUT ] && data.dispatch( e, X.UI.Event.POINTER_OUT, false ); // new Event
- delete data.hitSelf;
+ delete data.hovering;
list.splice( i, 1 );
continue;
};
- if( data.hover === true && data.isHover === false ){
- data.styleData.addName( data.hoverStyleName );
- data.isHover = true;
- };
- if( data.hitSelf === false ){
+ if( !data.hovering ){
+ data.hoverClassName && data.xnode.addClassName( data.hoverClassName );
data._listeners && data._listeners[ X.UI.Event.POINTER_IN ] && data.dispatch( e, X.UI.Event.POINTER_IN, true ); // new Event
- data.hitSelf = true;
+ data.hovering = true;
};
};
return false;
};
/*
- * body が存在したら要素を作成、style も指定
+ * body が存在したら要素を作成、css も指定
* 背景画像を読み終える onload で活動開始
*/
'_PageRoot',
X.Class.FINAL | X.Class.PRIVATE_DATA | X.Class.SUPER_ACCESS,
{
+ layout : X.UI.Layout.Canvas,
+
calcReserved : false,
hoverList : null,
targetNodeData : null,
monopolyNodeData : null,
- elmMouseCatch : null, // rootData only
- eventCounter : null, // rootData only
- cursorStyle : null, // rootData only
+ elmMouseCatch : null,
+ eventCounter : null,
+ cursorStyle : null,
Constructor : function( layout, args ){
this.SuperConstructor( layout, args );
this.hoverList = [];
this.eventCounter = {};
- currentRootData = this;
+ X.UI.currentRootData = this;
},
start : function(){
X.Timer.once( 0, this, this.afterAddToView );
},
afterAddToView : function(){
- this.afterAddition();
+ //this.afterAddition();
+ this.xnode.className( 'PageRoot' );
+
this.creationComplete();
X.Timer.once( 0, this, this.doFirstCalc );
},
doFirstCalc : function(){
- this.doCalculate();
- X.Dom.listen( X.Dom.Event.VIEW_RESIZED, this, this.doCalculate );
+ this.calculate();
+ this.phase = 4;
+ X.Dom.listen( X.Dom.Event.VIEW_RESIZED, this, this.calculate );
},
+
reserveCalc : function(){
if( this.calcReserved === false ){
this.calcReserved = true;
- X.Timer.once( 0, this, this.doCalculate );
+ X.Timer.once( 0, this, this.calculate );
};
},
- doCalculate : function( e ){
- var size, w, h;
+ calculate : function( e ){
+ var font = X.Dom.baseFontSize,
+ size, w, h;
if( !e ){
size = X.Dom.getSize();
w = size[ 0 ];
w = e.w;
h = e.h;
};
- this.layout.calculate( this, 0, 0, w, h );
+ this.layout.calculate( this, false, 0, 0, w / font, h / font );
this.calcReserved = false;
},
},
- beforeRemove : function(){
+ _remove : function(){
this.elmMouseCatch.unlisten();
+ _Box.prototype._remove.call( this );
}
}
);
-var PageRoot = Box.inherits(
+var PageRoot = Box.presets(
'PageRoot',
- X.Class.FINAL | X.Class.SUPER_ACCESS,
- _PageRoot,
- {
- Constructor : function( /* opt_manager */ ){
- var data = X.Class._newPrivate( this, BasicLayoutManager, arguments );
- this.style = DisplayNodeStyle( this, data );
- this.style.addName( 'PageRoot' );
- }
+ _PageRoot, {
+ width : '100%',
+ height : '100%'
}
);
+
OSDN Git Service
