From f01f21c6d473692d016cb2b286a61d55380be3b3 Mon Sep 17 00:00:00 2001 From: itozyun Date: Mon, 20 Apr 2015 13:45:22 +0900 Subject: [PATCH] Version 0.6.141, fix X.UI.ScrollBox. --- 0.6.x/css/xui.css | 52 +++-- 0.6.x/index.html | 1 + 0.6.x/js/01_core/02_XUA.js | 77 ++++++-- 0.6.x/js/01_core/10_XCallback.js | 3 +- 0.6.x/js/01_core/16_XViewPort.js | 29 +-- 0.6.x/js/02_dom/10_XNodeAnime.js | 2 +- 0.6.x/js/05_util/01_XNinjaIframe.js | 3 + 0.6.x/js/06_net/01_XNetXHR.js | 4 +- 0.6.x/js/20_ui/00_XUI.js | 33 +--- 0.6.x/js/20_ui/02_XUI_Attr.js | 183 +++++++++-------- 0.6.x/js/20_ui/04_XUI_Event.js | 12 +- 0.6.x/js/20_ui/05_XUI_Gesture.js | 95 +++++---- 0.6.x/js/20_ui/06_AbstractUINode.js | 384 ++++++++++++++++++------------------ 0.6.x/js/20_ui/08_Box.js | 66 ++++--- 0.6.x/js/20_ui/11_VBox.js | 32 +-- 0.6.x/js/20_ui/12_HBox.js | 32 +-- 0.6.x/js/20_ui/13_TileBox.js | 35 ++-- 0.6.x/js/20_ui/14_ChromeBox.js | 10 +- 0.6.x/js/20_ui/15_ScrollBox.js | 165 ++++++++-------- 0.6.x/js/20_ui/17_Text.js | 14 +- 0.6.x/js/20_ui/20_PageRoot.js | 34 ++-- 21 files changed, 669 insertions(+), 597 deletions(-) diff --git a/0.6.x/css/xui.css b/0.6.x/css/xui.css index 2cec8d3..aca363e 100644 --- a/0.6.x/css/xui.css +++ b/0.6.x/css/xui.css @@ -14,15 +14,29 @@ width : 100%; height : 100%; overflow : hidden; - margin : 0; - padding : 0;/* opera 8 */ - border : 0; + margin : 0; + padding : 0;/* opera 8 */ + border : 0; } - body { + .IE5x body, + .IE6 body, + .IE7 body, + .IE8 body { font-size : 16px; /* px 指定しないと ie8- で要素のサイズが狂う */ } + /* + * http://loconet.web2.jp/blog/archives/2007/02/cssfontfamily.html + */ + body, textarea { + font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif; + } + .IE5x body, .IE5x textarea, + .IE6 body, .IE6 textarea, { + font-family: 'ＭＳ Ｐゴシック',sans-serif; + } + .PageRoot { height : 100%; } @@ -49,10 +63,9 @@ -khtml-box-sizing : border-box; -webkit-box-sizing : border-box;*/ /* browser bug fix */ - -moz-opacity : 0.99; + zoom : 1; - - *word-break : break-all; /* ie5+ */ + word-wrap : break-word; /* IE5.5?5?, Firefox3.5, Chrome1 Opera10.5 Safari1 */ white-space : pre; /* CSS 2.0 */ white-space : pre-wrap; /* CSS 2.1 */ @@ -60,8 +73,15 @@ /* white-space : -pre-wrap; Opera 4-6 */ white-space : -o-pre-wrap; /* Opera 7 */ white-space : -moz-pre-wrap; /* Mozilla */ - /* white-space : -hp-pre-wrap; HP Printers */ - white-space : normal\9; /* ie系では、 float要素へ回り込みする、 white-space の効いているテキストの位置が狂う */ + /* white-space : -hp-pre-wrap; HP Printers */ +} +.IE5x .PageRoot, .IE5x .PageRoot div, +.IE6 .PageRoot, .IE6 .PageRoot div, +.IE7 .PageRoot, .IE7 .PageRoot div, { + word-break : break-all; /* ie5+ */ +} +.IE .PageRoot, .IE .PageRoot div { + white-space : normal/* ie系では、 float要素へ回り込みする、 white-space の効いているテキストの位置が狂う */ } * {zoom:1} @@ -95,7 +115,7 @@ tap-highlight-color : rgba(0,0,0,0); -webkit-tap-highlight-color : rgba(0,0,0,0); } - .ActiveX-enabled .mouse-operation-catcher { + .ActiveX .mouse-operation-catcher { background-color : #fff; filter : alpha( opacity=0 ); } @@ -141,12 +161,12 @@ * see http://qiita.com/sou/items/5688d4e7d3a37b4e2ff1 --------------------------------------------------------------------------------------*/ #fps-slowdown-make-sound-noisy { - width: 0px; - height: 0px; - position: absolute; - -webkit-animation-name: anim-void; - -webkit-animation-duration: 1s; - -webkit-animation-iteration-count: infinite; + width : 0px; + height : 0px; + position : absolute; + -webkit-animation-name : anim-void; + -webkit-animation-duration : 1s; + -webkit-animation-iteration-count : infinite; } @-webkit-keyframes anim-void { from { diff --git a/0.6.x/index.html b/0.6.x/index.html index b18a5e2..eac273a 100644 --- a/0.6.x/index.html +++ b/0.6.x/index.html @@ -16,6 +16,7 @@ + diff --git a/0.6.x/js/01_core/02_XUA.js b/0.6.x/js/01_core/02_XUA.js index ecdbe23..52da87e 100644 --- a/0.6.x/js/01_core/02_XUA.js +++ b/0.6.x/js/01_core/02_XUA.js @@ -9,7 +9,8 @@ * @alias X.UA * @type {object} */ -var X_UA = X[ 'UA' ] = {}; +var X_UA = X[ 'UA' ] = {}, + X_UA_classNameForHTML = 'js-enabled '; (function(){ var dua = navigator.userAgent, @@ -289,62 +290,73 @@ var X_UA = X[ 'UA' ] = {}; * @alias X.UA.IECompat * @type {number} */ - X_UA[ 'IECompat' ] = /* v !== X_UA[ '_IE' ] || */ tridentToVer !== X_UA[ '_IE' ] && tridentToVer; + if( v = tridentToVer !== X_UA[ '_IE' ] && tridentToVer ) X_UA[ 'IECompat' ] = v; /** * @alias X.UA.IE4 * @type {boolean} */ - X_UA[ 'IE4' ] = v && v < 5; + if( v && v < 4.5 ) X_UA[ 'IE4' ] = true; + /** + * @alias X.UA.IE45 + * @type {boolean} + */ + if( v && 4.5 <= v && v < 5 ) X_UA[ 'IE45' ] = true; + /** + * @alias X.UA.IE4x + * @type {boolean} + */ + if( X_UA[ 'IE4' ] || X_UA[ 'IE45' ] ) X_UA[ 'IE4x' ] = true; /** * @alias X.UA.IE5 * @type {boolean} */ - X_UA[ 'IE5' ] = 5 <= v && v < 5.5; + if( 5 <= v && v < 5.5 ) X_UA[ 'IE5' ] = true; /** * @alias X.UA.IE55 * @type {boolean} */ - X_UA[ 'IE55' ] = 5.5 <= v && v < 6; + if( 5.5 <= v && v < 6 ) X_UA[ 'IE55' ] = true; /** * @alias X.UA.IE5x * @type {boolean} */ - X_UA[ 'IE5x' ] = X_UA[ 'IE5' ] || X_UA[ 'IE55' ]; + if( X_UA[ 'IE5' ] || X_UA[ 'IE55' ] ) X_UA[ 'IE5x' ] = true; /** * @alias X.UA.IE6 * @type {boolean} */ - X_UA[ 'IE6' ] = 6 <= v && v < 7; + if( 6 <= v && v < 7 ) X_UA[ 'IE6' ] = true; /** * @alias X.UA.IE7 * @type {boolean} */ - X_UA[ 'IE7' ] = 7 <= v && v < 8; + if( 7 <= v && v < 8 ) X_UA[ 'IE7' ] = true; /** * @alias X.UA.IE8 * @type {boolean} */ - X_UA[ 'IE8' ] = 8 <= v && v < 9; + if( 8 <= v && v < 9 ) X_UA[ 'IE8' ] = true; /** * @alias X.UA.IE9 * @type {boolean} */ - X_UA[ 'IE9' ] = 9 <= v && v < 10; + if( 9 <= v && v < 10 ) X_UA[ 'IE9' ] = true; /** * @alias X.UA.MacIE * @type {boolean} */ - X_UA[ 'MacIE' ] = X_UA[ 'Mac' ]; + if( X_UA[ 'Mac' ] ) X_UA[ 'MacIE' ] = true; /** * @alias X.UA.IEMobile * @type {boolean} */ - X_UA[ 'IEMobile' ] = dua.toLowerCase().indexOf( 'iemobile' ) !== -1 || X_UA[ 'WinCE' ]; + if( dua.toLowerCase().indexOf( 'iemobile' ) !== -1 || X_UA[ 'WinCE' ] ) X_UA[ 'IEMobile' ] = true; /** * @alias X.UA.WinPhone * @type {boolean} */ - X_UA[ 'WinPhone' ] = dua.toLowerCase().indexOf( 'windows phone' ) !== -1 || 0 < dav.indexOf( 'ZuneWP' ); // ZuneWP は IEM のデスクトップモードで登場する + if( dua.toLowerCase().indexOf( 'windows phone' ) !== -1 || 0 < dav.indexOf( 'ZuneWP' ) ) X_UA[ 'WinPhone' ] = true; // ZuneWP は IEM のデスクトップモードで登場する + console.log( '>> IE : ' + v + ' ActiveX : ' + X_UA[ 'ActiveX' ] ); // TODO XBox360, XBox1, Modern or Desktop, Standalone return; @@ -600,6 +612,45 @@ var X_UA = X[ 'UA' ] = {}; }; })(); +(function(){ + var k, v; + if( X_UA[ 'IE45' ] || X_UA[ 'IE4' ] ){ + if( X_UA[ 'Mac' ] ){ + X_UA_classNameForHTML = 'Mac'; + } else + if( X_UA[ 'WinCE' ] ){ + // TODO CE3 の ie4 と WM の ie4 の分岐 + X_UA_classNameForHTML = 'WinCE'; + } else + if( X_UA[ 'Win' ] ){ + X_UA_classNameForHTML = 'Win'; + } else { + X_UA_classNameForHTML = 'Other'; + }; + + X_UA_classNameForHTML += 'IE4'; + + if( X_UA[ 'IE45' ] ){ + X_UA_classNameForHTML += '5'; + }; + + if( X_UA[ 'ActiveX' ] ){ + X_UA_classNameForHTML += 'ActiveX'; + }; + + } else { + for( k in X_UA ){ + v = X_UA[ k ]; + if( v ){ + X_UA_classNameForHTML += k + ' '; + if( v !== true ){ + X_UA_classNameForHTML += k + v + ' '; + }; + }; + }; + }; +})(); + var X_UA_DOM = {}, X_UA_EVENT = {}, X_UA_HID = {}; diff --git a/0.6.x/js/01_core/10_XCallback.js b/0.6.x/js/01_core/10_XCallback.js index a8dd6a3..15efe24 100644 --- a/0.6.x/js/01_core/10_XCallback.js +++ b/0.6.x/js/01_core/10_XCallback.js @@ -152,11 +152,10 @@ X[ 'Callback' ] = { * またフレームワーク内で定義されたデフォルト動作の回避にも使用される。 */ 'PREVENT_DEFAULT' : X_Callback_PREVENT_DEFAULT, + /** * X.UI に於いて、ポインターイベントの戻り値に指定すると、以降のポインターベントを独占する。 */ - 'MONOPOLY' : X_Callback_MONOPOLY, - 'CAPTURE_POINTER' : X_Callback_CAPTURE_POINTER, 'RELEASE_POINTER' : X_Callback_RELEASE_POINTER diff --git a/0.6.x/js/01_core/16_XViewPort.js b/0.6.x/js/01_core/16_XViewPort.js index a6eddb8..8207644 100644 --- a/0.6.x/js/01_core/16_XViewPort.js +++ b/0.6.x/js/01_core/16_XViewPort.js @@ -9,7 +9,8 @@ var X_ViewPort_readyState, X_ViewPort_vScrollbarSize, X_ViewPort_hScrollbarSize, - X_Dom_detectFontSize = !( X_UA[ 'IE' ] < 9 || X_UA[ 'iOS' ] ) && function(){ + X_ViewPort_useDetectionLoop = X_UA[ 'IE' ] < 9 || X_UA[ 'iOS' ], + X_ViewPort_detectFontSize = !X_ViewPort_useDetectionLoop && function(){ var size = X_Node_fontSizeNode[ '_rawObject' ].offsetHeight; if( X_ViewPort_baseFontSize !== size ){ X_ViewPort_baseFontSize = size; @@ -18,7 +19,7 @@ var X_ViewPort_readyState, }, X_ViewPort_orientationFlag, - X_Dom_orientationchange = window[ 'orientation' ] !== undefined && function( e ){ + X_ViewPort_orientationchange = window[ 'orientation' ] !== undefined && function( e ){ X_ViewPort_orientationFlag = true; !X_UA[ 'Android' ] && X_ViewPort_resize(); //console.log( '-- orientationchange : ' + X[ 'ViewPort' ][ 'getSize' ][ 0 ] + ' ' + X[ 'ViewPort' ][ 'getSize' ][ 1 ] ); @@ -224,7 +225,7 @@ X[ 'ViewPort' ] = { */ var X_ViewPort_resize = // iOS もループで回す,,,iOS3.1.3, iOS6 で確認 - X_UA[ 'IE' ] < 9 || X_UA[ 'iOS' ] ? + X_ViewPort_useDetectionLoop ? (function(){ var size; if( !X_ViewPort_lock ){ @@ -232,7 +233,7 @@ X[ 'ViewPort' ] = { if( X_ViewPort_width !== size[ 0 ] || X_ViewPort_height !== size[ 1 ] ){ X_ViewPort_width = size[ 0 ]; X_ViewPort_height = size[ 1 ]; - X_Timer_once( 100, X_Dom_detectFinishResizing ); + X_Timer_once( 100, X_ViewPort_detectFinishResizing ); X_ViewPort_lock = true; }; }; @@ -247,16 +248,16 @@ X[ 'ViewPort' ] = { (function( e ){ console.log( '-- resize : ' + X_Timer_now() ); - !X_ViewPort_lock && ( X_ViewPort_lock = true ) && X_Timer_once( 100, X_Dom_detectFinishResizing ); + !X_ViewPort_lock && ( X_ViewPort_lock = true ) && X_Timer_once( 100, X_ViewPort_detectFinishResizing ); return X_Callback_PREVENT_DEFAULT | X_Callback_STOP_PROPAGATION; }); - function X_Dom_detectFinishResizing(){ + function X_ViewPort_detectFinishResizing(){ var size = X_ViewPort_getWindowSize(); if( X_ViewPort_width !== size[ 0 ] || X_ViewPort_height !== size[ 1 ] ){ X_ViewPort_width = size[ 0 ]; X_ViewPort_height = size[ 1 ]; - X_Timer_once( 100, X_Dom_detectFinishResizing ); + X_Timer_once( 100, X_ViewPort_detectFinishResizing ); } else { console.log( '-- detectFinishResizing : ' + X_Timer_now() ); @@ -293,7 +294,7 @@ X[ 'ViewPort' ] = { X_ViewPort_rootElement = document.compatMode !== 'CSS1Compat' ? elmBody : elmHtml || elmBody; - html = X[ 'Doc' ][ 'html' ] = X_Node_html = elmHtml && new Node( elmHtml ); + html = X[ 'Doc' ][ 'html' ] = X_Node_html = elmHtml && new Node( elmHtml ).removeClass( 'js-disabled' ).addClass( X_UA_classNameForHTML ); html[ '_flags' ] |= X_Node_State.IN_TREE; head = X[ 'Doc' ][ 'head' ] = X_Node_head = elmHead && new Node( elmHead ); @@ -359,13 +360,13 @@ X[ 'ViewPort' ] = { }; // - if( X_Dom_orientationchange ){ - X_EventDispatcher_systemListen( X_ViewPort, 'orientationchange', X_Dom_orientationchange ); + if( X_ViewPort_orientationchange ){ + X_EventDispatcher_systemListen( X_ViewPort, 'orientationchange', X_ViewPort_orientationchange ); }; - if( X_Dom_detectFontSize ){ + if( X_ViewPort_detectFontSize ){ X_EventDispatcher_systemListen( X_ViewPort, 'resize', X_ViewPort_resize ); - X_Timer_add( 333, X_Dom_detectFontSize ); + X_Timer_add( 333, X_ViewPort_detectFontSize ); } else { X_Timer_add( 333, X_ViewPort_resize ); }; @@ -402,8 +403,10 @@ X[ 'ViewPort' ] = { }; function X_ViewPort_getWindowSize(){ - return X_UA[ 'IE' ] ? + return X_UA[ 'IE' ] ? // Opera10.1 では ズーム時に表示領域のサイズが取れない！ [ X_ViewPort_rootElement.clientWidth, X_ViewPort_rootElement.clientHeight ] : + X_UA[ 'Opera' ] < 12 ? // Opera10.1 では ズーム + resize 時に表示領域のサイズが取れない！ + [ X_ViewPort_rootElement.offsetWidth, X_ViewPort_rootElement.offsetHeight ] : [ window.innerWidth, window.innerHeight ]; }; diff --git a/0.6.x/js/02_dom/10_XNodeAnime.js b/0.6.x/js/02_dom/10_XNodeAnime.js index 56c8adf..a7b8450 100644 --- a/0.6.x/js/02_dom/10_XNodeAnime.js +++ b/0.6.x/js/02_dom/10_XNodeAnime.js @@ -68,7 +68,7 @@ var X_Node_ANIMATIONS = [], /* GPUレイヤーにいる間に要素のコンテンツを変更をすると transitionend が動かなくなるっぽい Mac safari と firefox, 手当てが済むまでここは常に false */ X_Node_Anime_translateZ = X_Node_CSS_VENDER_PREFIX[ 'perspective' ] && !X_UA[ 'OperaMobile' ] && !X_UA[ 'OperaTablet' ] ? ' translateZ(0)' : '', /* Opera12(XP,8.1) 切った方がスムース, win Safari3 で、たまに動作が止まってしまう、、、 */ - X_Node_Anime_hasTransition = !!X_Node_CSS_VENDER_PREFIX[ 'transitionDelay' ] && !X_UA[ 'Opera' ] && !( X_UA[ 'Webkit' ] <= 528.16 ), + X_Node_Anime_hasTransition = !!X_Node_CSS_VENDER_PREFIX[ 'transitionDelay' ] && !X_UA[ 'Opera' ], // && !( X_UA[ 'Webkit' ] <= 528.16 ), X_Node_Anime_transitionProps = X_Node_Anime_hasTransform ? X_Node_CSS_VENDER_PREFIX[ 'transform' ] : 'left,top', // transitionEnd イベント中に要素の更新( X_Node_startUpdate() )ができるか？ // iOS3+4 では可能、iOS6.1.5 で不可。TODO iOS5　及び他の環境で調査。ダメな場合、anime.html が正しく描画されない。 diff --git a/0.6.x/js/05_util/01_XNinjaIframe.js b/0.6.x/js/05_util/01_XNinjaIframe.js index 2eeaaa9..f400818 100644 --- a/0.6.x/js/05_util/01_XNinjaIframe.js +++ b/0.6.x/js/05_util/01_XNinjaIframe.js @@ -1,6 +1,9 @@ /* * http://msdn.microsoft.com/ja-jp/library/ie/hh180174%28v=vs.85%29.aspx * 孤立するとウィンドウ オブジェクトのプロパティが消去される + * + * http://qiita.com/sou/items/3380d4fa9b08b27bb387 + * モバイルブラウザでの iframe の挙動（Mobile Safari, Chrome for Android) */ // TODO Node.inherits diff --git a/0.6.x/js/06_net/01_XNetXHR.js b/0.6.x/js/06_net/01_XNetXHR.js index 4f3ca4a..8435371 100644 --- a/0.6.x/js/06_net/01_XNetXHR.js +++ b/0.6.x/js/06_net/01_XNetXHR.js @@ -33,8 +33,8 @@ Android1.6- の XHR で 401 エラーが返った場合は、iframe に xml を var // Opera7.6+, Safari1.2+, khtml3.?+, Gecko0.9.7+ // ie7 ではローカルリソースには ActiveX の XHR を使う X_Net_XHR_W3C = ( !X_UA[ 'IE7' ] || !X_URL_IS_LOCAL ) && window[ 'XMLHttpRequest' ] && new XMLHttpRequest(), - X_Net_XHR_progress = false && X_Net_XHR_W3C && X_Net_XHR_W3C.onprogress !== undefined, - X_Net_XHR_upload = false && X_Net_XHR_W3C && !!X_Net_XHR_W3C.upload, + X_Net_XHR_progress = X_Net_XHR_W3C && X_Net_XHR_W3C.onprogress !== undefined, + X_Net_XHR_upload = X_Net_XHR_W3C && !!X_Net_XHR_W3C.upload, X_Net_XHR_X_DOMAIN = window[ 'XDomainRequest' ] && new XDomainRequest(), X_Net_XHR_VERSION = 0, diff --git a/0.6.x/js/20_ui/00_XUI.js b/0.6.x/js/20_ui/00_XUI.js index 4212773..3f03b2a 100644 --- a/0.6.x/js/20_ui/00_XUI.js +++ b/0.6.x/js/20_ui/00_XUI.js @@ -13,39 +13,8 @@ */ X.UI = { - State : { - DEFAULT : 0, - HOVER : 1, - FOCUSED : 2, - DISABLED : 4, - CHECKED : 8, - FIRST_CHILD : 16, - LAST_CHILD : 32 - }, - Dirty : { - CLEAN : 0, - PAINT : 1, // 再描画のみ必要 - LAYOUT : 2, // レイアウト（ボックスサイズ)の再計算が必要 - FONT : 3, // フォントサイズが変更された - CONTENT : 4 // コンテンツが変更された - }, - - currentRootData : null, - - Layout : { - Base : X_Class_create( - 'X.UI.Layout.Base', - { - overrideAttrsForSelf : null, - overrideAttrsForChild : null, - calculate : X_emptyFunction //function( data, isNeedsDetection, x, y, w, h ) - } - ), - create : function( props ){ - return X_Class_override( new X.UI.Layout.Base, props, true ); - } - } + currentRootData : null }; /* diff --git a/0.6.x/js/20_ui/02_XUI_Attr.js b/0.6.x/js/20_ui/02_XUI_Attr.js index 846a2e2..4908ed3 100644 --- a/0.6.x/js/20_ui/02_XUI_Attr.js +++ b/0.6.x/js/20_ui/02_XUI_Attr.js @@ -1,14 +1,11 @@ -X.UI.Attr = { - AUTO : 1/0,//Number.POSITIVE_INFINITY, - FLOOR : new Function( 'v', 'return 0 <= v ? v | 0 : -( -v | 0 )' ), - - USER : { - XNODE : 0, +var XUI_Attr_AUTO = 1/0,//Number.POSITIVE_INFINITY, + XUI_Attr_FLOOR = new Function( 'v', 'return 0 <= v ? v | 0 : -( -v | 0 )' ), + XUI_Attr_USER = { + XNODE : 0, // 値は xnode.css にコピーされます。 UINODE : 1, // 値は _uinode にコピーされます。 - LAYOUT : 2 + LAYOUT : 2 // }, - - Type : { + XUI_Attr_Type = { LIST : 16384, LENGTH : 1, // '1.5em' MINUS_LENGTH : 2, @@ -26,8 +23,7 @@ X.UI.Attr = { DEFAULT_ONLY : 4096, INIT_ONLY : 8192 }, - - Option : { + XUI_Attr_Option = { BORDER_STYLE : 'none,hidden,dotted,dashed,solid,double,groove,ridge,inset,outset', ALIGN : 'left,center,right,justify', TEXT_DECORATION : 'none,underline,overline,line-through,blink', @@ -35,8 +31,7 @@ X.UI.Attr = { BOX_SIZING : 'content,padding,border', CURSOR : 'pointer,wait' }, - - CSS3 : { + XUI_Attr_CSS3 = { opacity : true, bgColorAlpha : true, bgGradient : true, @@ -49,15 +44,79 @@ X.UI.Attr = { textShadowBlur : true, textShadowAlpha : true }, - - Rename : { + XUI_Attr_Rename = { bgColor : 'background-color', fontColor : 'color', fontBold : 'fontWeight', fontItalic : 'fontStyle', fontSmallCaps : 'fontVariant' - } -}; + }, + +/* + * 0: 初期値 : undefined は不可！ + * 1: dirty + * 2: この attr を処理する人 + * 3: 受け付けるデータ型 + * 4: 選択方式の場合、その候補 + */ + XUI_Attr_Support = XUI_Attr_createAttrDef( 0, +{ + className : [ null, XUI_Dirty.CLEAN, XUI_Attr_USER.UINODE, XUI_Attr_Type.DEFAULT_ONLY | XUI_Attr_Type.STRING ], + pointerHoverClass : [ null, XUI_Dirty.CLEAN, XUI_Attr_USER.UINODE, XUI_Attr_Type.DEFAULT_ONLY | XUI_Attr_Type.STRING ], + pointerDownClass : [ null, XUI_Dirty.CLEAN, XUI_Attr_USER.UINODE, XUI_Attr_Type.DEFAULT_ONLY | XUI_Attr_Type.STRING ], + invalidLayoutColor: [ null, XUI_Dirty.CLEAN, XUI_Attr_USER.UINODE, XUI_Attr_Type.DEFAULT_ONLY | XUI_Attr_Type.COLOR ], + + role : [ 1, XUI_Dirty.CLEAN, XUI_Attr_USER.UINODE, XUI_Attr_Type.INIT_ONLY | XUI_Attr_Type.LIST, 'none,chrome' ], + selectable : [ false, XUI_Dirty.CLEAN, XUI_Attr_USER.UINODE, XUI_Attr_Type.INIT_ONLY | XUI_Attr_Type.BOOLEAN ], + + visible : [ true, XUI_Dirty.LAYOUT, XUI_Attr_USER.UINODE, XUI_Attr_Type.BOOLEAN ], + pointerEnabled : [ false, XUI_Dirty.CLEAN, XUI_Attr_USER.UINODE, XUI_Attr_Type.BOOLEAN ], + pointerChildren : [ true, XUI_Dirty.CLEAN, XUI_Attr_USER.UINODE, XUI_Attr_Type.BOOLEAN ], + cursor : [ 1, XUI_Dirty.CLEAN, XUI_Attr_USER.UINODE, XUI_Attr_Type.LIST, XUI_Attr_Option.CURSOR ], + tooltip : [ null, XUI_Dirty.CLEAN, XUI_Attr_USER.UINODE, XUI_Attr_Type.STRING ], + + borderWidth : [ 0, XUI_Dirty.LAYOUT, XUI_Attr_USER.LAYOUT, XUI_Attr_Type.QUARTET | XUI_Attr_Type.LENGTH | XUI_Attr_Type.PERCENT ], // em [ top, right, bottom, left ] + padding : [ 0, XUI_Dirty.LAYOUT, XUI_Attr_USER.LAYOUT, XUI_Attr_Type.QUARTET | XUI_Attr_Type.LENGTH | XUI_Attr_Type.PERCENT ], + + width : [ XUI_Attr_AUTO, XUI_Dirty.LAYOUT, XUI_Attr_USER.LAYOUT, XUI_Attr_Type.LENGTH | XUI_Attr_Type.PERCENT | XUI_Attr_Type.AUTO ], + minWidth : [ 0, XUI_Dirty.LAYOUT, XUI_Attr_USER.LAYOUT, XUI_Attr_Type.LENGTH | XUI_Attr_Type.PERCENT ], + maxWidth : [ XUI_Attr_AUTO, XUI_Dirty.LAYOUT, XUI_Attr_USER.LAYOUT, XUI_Attr_Type.LENGTH | XUI_Attr_Type.PERCENT | XUI_Attr_Type.AUTO ], + height : [ XUI_Attr_AUTO, XUI_Dirty.LAYOUT, XUI_Attr_USER.LAYOUT, XUI_Attr_Type.LENGTH | XUI_Attr_Type.PERCENT | XUI_Attr_Type.AUTO ], + minHeight : [ 0, XUI_Dirty.LAYOUT, XUI_Attr_USER.LAYOUT, XUI_Attr_Type.LENGTH | XUI_Attr_Type.PERCENT ], + maxHeight : [ XUI_Attr_AUTO, XUI_Dirty.LAYOUT, XUI_Attr_USER.LAYOUT, XUI_Attr_Type.LENGTH | XUI_Attr_Type.PERCENT | XUI_Attr_Type.AUTO ], + sizing : [ 1, XUI_Dirty.LAYOUT, XUI_Attr_USER.LAYOUT, XUI_Attr_Type.LIST, XUI_Attr_Option.BOX_SIZING ], + left : [ null, XUI_Dirty.LAYOUT, XUI_Attr_USER.LAYOUT, XUI_Attr_Type.LENGTH | XUI_Attr_Type.PERCENT | XUI_Attr_Type.MINUS_LENGTH | XUI_Attr_Type.MINUS_PERCENT ], + top : [ null, XUI_Dirty.LAYOUT, XUI_Attr_USER.LAYOUT, XUI_Attr_Type.LENGTH | XUI_Attr_Type.PERCENT | XUI_Attr_Type.MINUS_LENGTH | XUI_Attr_Type.MINUS_PERCENT ], + bottom : [ null, XUI_Dirty.LAYOUT, XUI_Attr_USER.LAYOUT, XUI_Attr_Type.LENGTH | XUI_Attr_Type.PERCENT | XUI_Attr_Type.MINUS_LENGTH | XUI_Attr_Type.MINUS_PERCENT ], + right : [ null, XUI_Dirty.LAYOUT, XUI_Attr_USER.LAYOUT, XUI_Attr_Type.LENGTH | XUI_Attr_Type.PERCENT | XUI_Attr_Type.MINUS_LENGTH | XUI_Attr_Type.MINUS_PERCENT ], + + borderColor : [ 0x0, XUI_Dirty.PAINT, XUI_Attr_USER.XNODE, XUI_Attr_Type.QUARTET | XUI_Attr_Type.COLOR ], // color [ top, right, bottom, left ] + borderStyle : [ 1, XUI_Dirty.PAINT, XUI_Attr_USER.XNODE, XUI_Attr_Type.QUARTET | XUI_Attr_Type.LIST, XUI_Attr_Option.BORDER_STYLE ], // string [ top, right, bottom, left ] + bgColor : [ 0xFFFFFF, XUI_Dirty.PAINT, XUI_Attr_USER.XNODE, XUI_Attr_Type.COLOR ], // color, none + + fontColor : [ 0x0, XUI_Dirty.PAINT, XUI_Attr_USER.XNODE, XUI_Attr_Type.COLOR ], + fontFamily : [ null, XUI_Dirty.FONT, XUI_Attr_USER.XNODE, XUI_Attr_Type.FONT_NAME ], + fontSize : [ 1, XUI_Dirty.FONT, XUI_Attr_USER.XNODE, XUI_Attr_Type.LENGTH | XUI_Attr_Type.PERCENT ], + fontBold : [ false, XUI_Dirty.FONT, XUI_Attr_USER.XNODE, XUI_Attr_Type.BOOLEAN, 'bold' ], + fontItalic : [ false, XUI_Dirty.FONT, XUI_Attr_USER.XNODE, XUI_Attr_Type.BOOLEAN, 'italic' ], + fontSmallCaps : [ false, XUI_Dirty.FONT, XUI_Attr_USER.XNODE, XUI_Attr_Type.BOOLEAN, 'small-caps' ], + lineHeight : [ 1, XUI_Dirty.FONT, XUI_Attr_USER.XNODE, XUI_Attr_Type.NUMERICAL ], // percent + letterSpacing : [ 0, XUI_Dirty.FONT, XUI_Attr_USER.XNODE, XUI_Attr_Type.LENGTH ], + wordSpacing : [ 0, XUI_Dirty.FONT, XUI_Attr_USER.XNODE, XUI_Attr_Type.LENGTH ], + textAlign : [ 1, XUI_Dirty.FONT, XUI_Attr_USER.XNODE, XUI_Attr_Type.LIST, XUI_Attr_Option.ALIGN ], + textDecoration : [ 1, XUI_Dirty.FONT, XUI_Attr_USER.XNODE, XUI_Attr_Type.LIST, XUI_Attr_Option.TEXT_DECORATION ], + textTransform : [ 1, XUI_Dirty.FONT, XUI_Attr_USER.XNODE, XUI_Attr_Type.LIST, XUI_Attr_Option.TEXT_TRANSFORM ] +} +), + +/* + * 共通する attr 指定を prototype に設定しながら拡張できる、属性データ保持クラス + */ + +XUI_attrClassProto = null, + +XUI_AttrClass = X_Class_create( 'XUI_AttrClass', X_Class.POOL_OBJECT ); + function XUI_Attr_createAttrDef( base, defs ){ var F = base ? X_Object_clone( base ) : {}, @@ -74,12 +133,12 @@ X.UI.Attr = { if( !base || !X_Type_isArray( base[ p ] ) ){ def.No = z += n; // add - n = def[ 3 ] & X.UI.Attr.Type.QUARTET ? 4 : - def[ 3 ] & X.UI.Attr.Type.COMBI ? 2 : 1; + n = def[ 3 ] & XUI_Attr_Type.QUARTET ? 4 : + def[ 3 ] & XUI_Attr_Type.COMBI ? 2 : 1; } else { def.No = base[ p ].No; }; - if( def[ 3 ] & X.UI.Attr.Type.LIST && X_Type_isString( def[ 4 ] ) ){ + if( def[ 3 ] & XUI_Attr_Type.LIST && X_Type_isString( def[ 4 ] ) ){ def[ 4 ] = XUI_createChecker( def[ 4 ] ); }; }; @@ -87,73 +146,7 @@ X.UI.Attr = { return F; }; -/* - * 0: 初期値 : undefined は不可！ - * 1: dirty - * 2: この attr を処理する人 - * 3: 受け付けるデータ型 - * 4: 選択方式の場合、その候補 - */ -X.UI.Attr.Support = XUI_Attr_createAttrDef( 0, -{ - className : [ null, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.DEFAULT_ONLY | X.UI.Attr.Type.STRING ], - pointerHoverClass : [ null, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.DEFAULT_ONLY | X.UI.Attr.Type.STRING ], - pointerDownClass : [ null, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.DEFAULT_ONLY | X.UI.Attr.Type.STRING ], - invalidLayoutColor: [ null, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.DEFAULT_ONLY | X.UI.Attr.Type.COLOR ], - - role : [ 1, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.INIT_ONLY | X.UI.Attr.Type.LIST, 'none,chrome' ], - selectable : [ false, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.INIT_ONLY | X.UI.Attr.Type.BOOLEAN ], - - visible : [ true, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.BOOLEAN ], - pointerEnabled : [ false, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.BOOLEAN ], - pointerChildren : [ true, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.BOOLEAN ], - cursor : [ 1, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.LIST, X.UI.Attr.Option.CURSOR ], - tooltip : [ null, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.STRING ], - - 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 ] - 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 ], - - 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 ], - minWidth : [ 0, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH | X.UI.Attr.Type.PERCENT ], - 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 ], - 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 ], - minHeight : [ 0, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH | X.UI.Attr.Type.PERCENT ], - 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 ], - sizing : [ 1, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LIST, X.UI.Attr.Option.BOX_SIZING ], - 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 ], - 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 ], - 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 ], - 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 ], - - 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 ] - borderStyle : [ 1, 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 ] - bgColor : [ 0xFFFFFF, X.UI.Dirty.PAINT, X.UI.Attr.USER.XNODE, X.UI.Attr.Type.COLOR ], // color, none - - fontColor : [ 0x0, X.UI.Dirty.PAINT, X.UI.Attr.USER.XNODE, X.UI.Attr.Type.COLOR ], - fontFamily : [ null, X.UI.Dirty.FONT, X.UI.Attr.USER.XNODE, X.UI.Attr.Type.FONT_NAME ], - fontSize : [ 1, X.UI.Dirty.FONT, X.UI.Attr.USER.XNODE, X.UI.Attr.Type.LENGTH | X.UI.Attr.Type.PERCENT ], - fontBold : [ false, X.UI.Dirty.FONT, X.UI.Attr.USER.XNODE, X.UI.Attr.Type.BOOLEAN, 'bold' ], - fontItalic : [ false, X.UI.Dirty.FONT, X.UI.Attr.USER.XNODE, X.UI.Attr.Type.BOOLEAN, 'italic' ], - fontSmallCaps : [ false, X.UI.Dirty.FONT, X.UI.Attr.USER.XNODE, X.UI.Attr.Type.BOOLEAN, 'small-caps' ], - lineHeight : [ 1, X.UI.Dirty.FONT, X.UI.Attr.USER.XNODE, X.UI.Attr.Type.NUMERICAL ], // percent - letterSpacing : [ 0, X.UI.Dirty.FONT, X.UI.Attr.USER.XNODE, X.UI.Attr.Type.LENGTH ], - wordSpacing : [ 0, X.UI.Dirty.FONT, X.UI.Attr.USER.XNODE, X.UI.Attr.Type.LENGTH ], - textAlign : [ 1, X.UI.Dirty.FONT, X.UI.Attr.USER.XNODE, X.UI.Attr.Type.LIST, X.UI.Attr.Option.ALIGN ], - textDecoration : [ 1, X.UI.Dirty.FONT, X.UI.Attr.USER.XNODE, X.UI.Attr.Type.LIST, X.UI.Attr.Option.TEXT_DECORATION ], - textTransform : [ 1, X.UI.Dirty.FONT, X.UI.Attr.USER.XNODE, X.UI.Attr.Type.LIST, X.UI.Attr.Option.TEXT_TRANSFORM ] -} -); - -/* - * 共通する attr 指定を prototype に設定しながら拡張できる、属性データ保持クラス - */ - -X.UI.attrClassProto = null; - -X.UI.AttrClass = X_Class_create( 'X.UI.AttrClass', X_Class.POOL_OBJECT ); - - -X.UI.Attr.copy = function( proto, supports ){ +function XUI_Attr_copy( proto, supports ){ var support, p; for( p in supports ){ @@ -161,33 +154,33 @@ X.UI.Attr.copy = function( proto, supports ){ if( p === '_last' ) continue; support = supports[ p ]; proto[ support.No ] = support[ 0 ]; - if( support[ 3 ] & X.UI.Attr.Type.QUARTET ){ + if( support[ 3 ] & XUI_Attr_Type.QUARTET ){ proto[ support.No + 1 ] = support[ 0 ]; proto[ support.No + 2 ] = support[ 0 ]; proto[ support.No + 3 ] = support[ 0 ]; } else - if( support[ 3 ] & X.UI.Attr.Type.COMBI ){ + if( support[ 3 ] & XUI_Attr_Type.COMBI ){ proto[ support.No + 1 ] = support[ 0 ]; }; }; }; -X.UI.Attr.copy( X.UI.AttrClass.prototype, X.UI.Attr.Support ); +XUI_Attr_copy( XUI_AttrClass.prototype, XUI_Attr_Support ); -X.UI.Attr.preset = function( baseKlass, opt_supports, opt_attrs ){ +function XUI_Attr_preset( baseKlass, opt_supports, opt_attrs ){ var klass = baseKlass.inherits(), proto = klass.prototype, p; // 属性プリセット - X.UI.Attr.copy( proto, opt_supports ); + XUI_Attr_copy( proto, opt_supports ); // setAttr に書き換え - X.UI.attrClassProto = proto; + XUI_attrClassProto = proto; for( p in opt_attrs ){ if( X_EMPTY_OBJECT[ p ] ) continue; - opt_supports[ p ] && X.UI._AbstractUINode.prototype.setAttr( p, opt_supports[ p ], opt_attrs[ p ] ); + opt_supports[ p ] && XUI_AbstractUINode.prototype.setAttr( p, opt_supports[ p ], opt_attrs[ p ] ); }; - X.UI.attrClassProto = null; + XUI_attrClassProto = null; return klass; }; diff --git a/0.6.x/js/20_ui/04_XUI_Event.js b/0.6.x/js/20_ui/04_XUI_Event.js index 8f38aae..97ddb1f 100644 --- a/0.6.x/js/20_ui/04_XUI_Event.js +++ b/0.6.x/js/20_ui/04_XUI_Event.js @@ -1,5 +1,5 @@ -X.UI.Event = { +var XUI_Event = X[ 'UI' ][ 'Event' ] = { INIT : ++X_Event_last, ADDED : ++X_Event_last, @@ -119,10 +119,10 @@ X.UI.Event = { NameToID : {} }; - X.UI.Event.IdToName[ X.UI.Event._POINTER_DOWN ] = 'pointerdown'; - X.UI.Event.IdToName[ X.UI.Event._POINTER_UP ] = 'pointerup'; - X.UI.Event.IdToName[ X.UI.Event._POINTER_MOVE ] = 'pointermove'; - X.UI.Event.IdToName[ X.UI.Event._POINTER_CANCEL ] = 'pointercancel'; + XUI_Event.IdToName[ XUI_Event._POINTER_DOWN ] = 'pointerdown'; + XUI_Event.IdToName[ XUI_Event._POINTER_UP ] = 'pointerup'; + XUI_Event.IdToName[ XUI_Event._POINTER_MOVE ] = 'pointermove'; + XUI_Event.IdToName[ XUI_Event._POINTER_CANCEL ] = 'pointercancel'; @@ -131,5 +131,5 @@ X.UI.Event = { if( X_EMPTY_OBJECT[ p ] ) continue; NameToID[ IdToName[ p ] ] = p; }; -})( X.UI.Event.IdToName, X.UI.Event.NameToID ); +})( XUI_Event.IdToName, XUI_Event.NameToID ); diff --git a/0.6.x/js/20_ui/05_XUI_Gesture.js b/0.6.x/js/20_ui/05_XUI_Gesture.js index 1f7bd1f..3361dfa 100644 --- a/0.6.x/js/20_ui/05_XUI_Gesture.js +++ b/0.6.x/js/20_ui/05_XUI_Gesture.js @@ -4,15 +4,12 @@ * Jorik Tangelder , MIT license **/ -( function( Math, window, document, undefined ){ var ELEENT_LIST = [], HAMMER_LIST = [], POINTERS = [], ABS = new Function( 'v', 'return v<0?-v:v' ); - X.UI.Gesture = Hammer; - function Hammer( uinodeRoot, uinode, type ){ this.uinode = uinode; this.enabled = true; @@ -38,10 +35,10 @@ pointerType, i, l, touches, ret, active, gesture, startEv, hammer, deltaTime, deltaX, deltaY, velocity, center; - //console.log( 'Hammer@handleEvent ' + X.UI.Event.IdToName[ e.type ] + ' ' + e.pointerType + ' ' + type ); + //console.log( 'Hammer@handleEvent ' + XUI_Event.IdToName[ e.type ] + ' ' + e.pointerType + ' ' + type ); if( !type ) return; - //console.log( e.type + ' dw:' + X.UI.Event._POINTER_DOWN + ' up:' + X.UI.Event._POINTER_UP + ' mv:' + X.UI.Event._POINTER_MOVE ); + //console.log( e.type + ' dw:' + XUI_Event._POINTER_DOWN + ' up:' + XUI_Event._POINTER_UP + ' mv:' + XUI_Event._POINTER_MOVE ); if( e.pointerType ){ type |= POINTER; @@ -70,7 +67,7 @@ enable_detect = true; }; - //console.log( 'Hammer@handleEvent ' + IdToGestureID[ e.type ] + ' ' + e.type + ' ' + X.UI.Event._POINTER_DOWN + ' ' + enable_detect ); + //console.log( 'Hammer@handleEvent ' + IdToGestureID[ e.type ] + ' ' + e.type + ' ' + XUI_Event._POINTER_DOWN + ' ' + enable_detect ); // we are in a touch event, set the touch triggered bool to true, // this for the conflicts that may occur on ios and android @@ -257,8 +254,8 @@ Detection.register( Gestures[ name ] ); }; - Hammer.EVENT_TYPES_START = [ X.UI.Event._POINTER_DOWN ]; - types = [ X.UI.Event._POINTER_MOVE, X.UI.Event._POINTER_UP, X.UI.Event._POINTER_CANCEL ]; + Hammer.EVENT_TYPES_START = [ XUI_Event._POINTER_DOWN ]; + types = [ XUI_Event._POINTER_MOVE, XUI_Event._POINTER_UP, XUI_Event._POINTER_CANCEL ]; // Add touch events on the document Utils.addEvents( uinodeRoot, types, Hammer.prototype.handleEvent ); @@ -341,12 +338,12 @@ EVENT_TYPE_MASK = START | MOVE | END, POINTER_TYPE_MASK = POINTER | TOUCH | MOUSE | PEN, IdToGestureID = {}; - IdToGestureID[ X.UI.Event._POINTER_DOWN ] = START; - IdToGestureID[ X.UI.Event._POINTER_MOVE ] = MOVE; - IdToGestureID[ X.UI.Event._POINTER_UP ] = END; - IdToGestureID[ X.UI.Event._POINTER_CANCEL ] = END; + IdToGestureID[ XUI_Event._POINTER_DOWN ] = START; + IdToGestureID[ XUI_Event._POINTER_MOVE ] = MOVE; + IdToGestureID[ XUI_Event._POINTER_UP ] = END; + IdToGestureID[ XUI_Event._POINTER_CANCEL ] = END; - Utils = { + var Utils = { /** * touch events with mouse fallback @@ -535,7 +532,7 @@ */ var touch_triggered = false; - Detection = { + var Detection = { // contains all registred Gestures in the correct order gestures : [], @@ -733,8 +730,8 @@ Gestures.Hold = { name : 'hold', index : 10, - startID : X.UI.Event.HOLD, - endID : X.UI.Event.HOLD_END, + startID : XUI_Event.HOLD, + endID : XUI_Event.HOLD_END, defaults : { hold_timeout : 500, hold_threshold : 1 @@ -763,14 +760,14 @@ this.timerID && X_Timer_remove( this.timerID ); if( Gestures.Hold.holding === true ){ Gestures.Hold.holding = false; - return hammer.trigger( X.UI.Event.HOLD_END, e ); + return hammer.trigger( XUI_Event.HOLD_END, e ); }; break; }; }, _onTimer : function( e, hammer ){ if( Detection.current.name === 'hold' ){ - hammer.trigger( X.UI.Event.HOLD, e ); + hammer.trigger( XUI_Event.HOLD, e ); Gestures.Hold.holding = true; }; } @@ -784,8 +781,8 @@ Gestures.Tap = { name : 'tap', index : 100, - startID : X.UI.Event.TAP, - endID : X.UI.Event.DOUBLE_TAP, + startID : XUI_Event.TAP, + endID : XUI_Event.DOUBLE_TAP, defaults : { tap_max_touchtime : 250, tap_max_distance : 10, @@ -803,12 +800,12 @@ // check if double tap if( prev && prev.name === 'tap' && ( e.timeStamp - prev.lastEvent.timeStamp ) < hammer.options.doubletap_interval && e.distance < hammer.options.doubletap_distance ){ - return hammer.trigger( X.UI.Event.DOUBLE_TAP, e ); + return hammer.trigger( XUI_Event.DOUBLE_TAP, e ); } else // do a single tap if( hammer.options.tap_always && Detection.current.name !== 'tap' ){ // EventFire中にalert すると mouseleave で再び呼ばれるのを防ぐ Detection.current.name = 'tap'; - return hammer.trigger( X.UI.Event.TAP, e ); + return hammer.trigger( XUI_Event.TAP, e ); }; }; } @@ -822,8 +819,8 @@ Gestures.Swipe = { name : 'swipe', index : 40, - startID : X.UI.Event.SWIP, - endID : X.UI.Event.SWIP_DOWN, + startID : XUI_Event.SWIP, + endID : XUI_Event.SWIP_DOWN, defaults : { // set 0 for unlimited, but this can conflict with transform swipe_max_touches : 1, @@ -838,15 +835,15 @@ // or we can be already in dragging if( hammer.options.swipe_velocity < e.velocityX || hammer.options.swipe_velocity < e.velocityY ){ // trigger swipe events - hammer.trigger( X.UI.Event.SWIP, e ); + hammer.trigger( XUI_Event.SWIP, e ); hammer.trigger( e.direction === Hammer.DIRECTION_UP ? - X.UI.Event.SWIP_UP : + XUI_Event.SWIP_UP : e.direction === Hammer.DIRECTION_DOWN ? - X.UI.Event.SWIP_DOWN : + XUI_Event.SWIP_DOWN : e.direction === Hammer.DIRECTION_LEFT ? - X.UI.Event.SWIP_LEFT : - X.UI.Event.SWIP_RIGHT, + XUI_Event.SWIP_LEFT : + XUI_Event.SWIP_RIGHT, e ); }; @@ -864,8 +861,8 @@ Gestures.Drag = { name : 'drag', index : 50, - startID : X.UI.Event.DRAG, - endID : X.UI.Event.DRAG_DOWN, + startID : XUI_Event.DRAG, + endID : XUI_Event.DRAG_DOWN, defaults : { drag_min_distance : 10, // set 0 for unlimited, but this can conflict with transform @@ -888,7 +885,7 @@ // current gesture isnt drag, but dragged is true // this means an other gesture is busy. now call dragend if( Detection.current.name !== this.name && this.triggered ){ - hammer.trigger( X.UI.Event.DRAG_END, e ); + hammer.trigger( XUI_Event.DRAG_END, e ); this.triggered = false; return; }; @@ -923,22 +920,22 @@ // first time, trigger dragstart event if( !this.triggered ){ - hammer.trigger( X.UI.Event.DRAG_START, e ); + hammer.trigger( XUI_Event.DRAG_START, e ); this.triggered = true; }; // trigger normal event - hammer.trigger( X.UI.Event.DRAG, e ); + hammer.trigger( XUI_Event.DRAG, e ); // direction event, like dragdown hammer.trigger( e.direction === Hammer.DIRECTION_UP ? - X.UI.Event.DRAG_UP : + XUI_Event.DRAG_UP : e.direction === Hammer.DIRECTION_DOWN ? - X.UI.Event.DRAG_DOWN : + XUI_Event.DRAG_DOWN : e.direction === Hammer.DIRECTION_LEFT ? - X.UI.Event.DRAG_LEFT : - X.UI.Event.DRAG_RIGHT, + XUI_Event.DRAG_LEFT : + XUI_Event.DRAG_RIGHT, e ); @@ -951,7 +948,7 @@ case END: // trigger dragend - this.triggered && hammer.trigger( X.UI.Event.DRAG_END, e ); + this.triggered && hammer.trigger( XUI_Event.DRAG_END, e ); this.triggered = false; break; } @@ -966,8 +963,8 @@ Gestures.Transform = { name : 'transform', index : 45, - startID : X.UI.Event.TRANSFORM, - endID : X.UI.Event.ROTATE, + startID : XUI_Event.TRANSFORM, + endID : XUI_Event.ROTATE, defaults : { // factor, no scale is 1, zoomin is to 0 and zoomout until higher then 1 transform_min_scale : 0.01, @@ -983,7 +980,7 @@ // current gesture isnt drag, but dragged is true // this means an other gesture is busy. now call dragend if( Detection.current.name !== this.name && this.triggered ){ - hammer.trigger( X.UI.Event.TRANSFORM_END, e ); + hammer.trigger( XUI_Event.TRANSFORM_END, e ); this.triggered = false; return; }; @@ -1012,26 +1009,26 @@ // first time, trigger dragstart event if( !this.triggered ){ - hammer.trigger( X.UI.Event.TRANSFORM_START, e ); + hammer.trigger( XUI_Event.TRANSFORM_START, e ); this.triggered = true; }; - hammer.trigger( X.UI.Event.TRANSFORM, e ); + hammer.trigger( XUI_Event.TRANSFORM, e ); // basic transform event // trigger rotate event - hammer.options.transform_min_rotation < rotation_threshold && hammer.trigger( X.UI.Event.ROTATE, e ); + hammer.options.transform_min_rotation < rotation_threshold && hammer.trigger( XUI_Event.ROTATE, e ); // trigger pinch event if( scale_threshold > hammer.options.transform_min_scale ){ - hammer.trigger( X.UI.Event.PINCH, e ); - hammer.trigger( e.scale < 1 ? X.UI.Event.PINCH_IN : X.UI.Event.PINCH_OUT, e ); + hammer.trigger( XUI_Event.PINCH, e ); + hammer.trigger( e.scale < 1 ? XUI_Event.PINCH_IN : XUI_Event.PINCH_OUT, e ); }; break; case END: // trigger dragend - this.triggered && hammer.trigger( X.UI.Event.TRANSFORM_END, e ); + this.triggered && hammer.trigger( XUI_Event.TRANSFORM_END, e ); this.triggered = false; break; }; @@ -1081,5 +1078,3 @@ e.eventType === END && hammer.trigger( this.name, e ); } }; - -})( Math, window, document ); \ No newline at end of file diff --git a/0.6.x/js/20_ui/06_AbstractUINode.js b/0.6.x/js/20_ui/06_AbstractUINode.js index 9004773..249bec3 100644 --- a/0.6.x/js/20_ui/06_AbstractUINode.js +++ b/0.6.x/js/20_ui/06_AbstractUINode.js @@ -1,9 +1,9 @@ -X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( +var XUI_AbstractUINode = X_EventDispatcher[ 'inherits' ]( 'X.UI._AbstractUINode', X_Class.ABSTRACT | X_Class.PRIVATE_DATA, { phase : 0, - dirty : X.UI.Dirty.CLEAN, + dirty : XUI_Dirty.CLEAN, root : null, rootData : null, @@ -12,8 +12,8 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( parentData : null, xnode : null, - supportAttrs : X.UI.Attr.Support, - attrClass : X.UI.AttrClass, + supportAttrs : XUI_Attr_Support, + attrClass : XUI_AttrClass, attrObject : null, unverifiedAttrs : null, @@ -32,31 +32,33 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( boxY : 0, scrollWidth : 0, // remove? scrollHeight : 0, // remove? - boxWidth : X.UI.Attr.AUTO, + boxWidth : XUI_Attr_AUTO, minBoxWidth : 0, - maxBoxWidth : X.UI.Attr.AUTO, - boxHeight : X.UI.Attr.AUTO, + maxBoxWidth : XUI_Attr_AUTO, + boxHeight : XUI_Attr_AUTO, minBoxHeight : 0, - maxBoxHeight : X.UI.Attr.AUTO, + maxBoxHeight : XUI_Attr_AUTO, contentL : 0, contentT : 0, contentR : 0, contentB : 0, boxSizingOffsetLR : 0, boxSizingOffsetTB : 0, - contentWidth : X.UI.Attr.AUTO, + contentWidth : XUI_Attr_AUTO, minContentWidth : 0, - maxContentWidth : X.UI.Attr.AUTO, + maxContentWidth : XUI_Attr_AUTO, lastContentWidth : -1, - contentHeight : X.UI.Attr.AUTO, + contentHeight : XUI_Attr_AUTO, minContentHeight : 0, - maxContentHeight : X.UI.Attr.AUTO, + maxContentHeight : XUI_Attr_AUTO, lastContentHeight : -1, constraintW : false, constraintH : false, autoWidth : false, autoHeight : false, + noWidth : false, + noHeight : false, percentWidth : false, percentHeight : false, // :hover, :focus, :disabled @@ -69,14 +71,14 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( //this.xnode = X_Doc_create( 'div' ); this.phase = 1; - this[ 'dispatch' ]( X.UI.Event.INIT ); + this[ 'dispatch' ]( XUI_Event.INIT ); }, addToParent : function( xnodeParent ){ xnodeParent && xnodeParent[ 'append' ]( this.xnode ); this.phase = 2; - this[ 'dispatch' ]( X.UI.Event.ADDED ); + this[ 'dispatch' ]( XUI_Event.ADDED ); }, creationComplete : function(){ @@ -84,7 +86,7 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( l, i; this.phase = 3; - this.User[ 'dispatch' ]( X.UI.Event.CREATION_COMPLETE ); + this.User[ 'dispatch' ]( XUI_Event.CREATION_COMPLETE ); // html 要素が親に追加されるまで控えていたイベントの登録 if( events && ( l = events.length ) ){ @@ -101,26 +103,26 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( * 親要素が変化した場合、unverifiedAttrs を元に attrObject を再設定． */ setAttr : function( name, def, v ){ - var attrs = X.UI.attrClassProto || this.attrObject, + var attrs = XUI_attrClassProto || this.attrObject, propID = def.No || def[ 5 ], - defaultVal = X.UI.attrClassProto ? attrs[ propID ] : this.attrClass.prototype[ propID ], // def[ 0 ], + defaultVal = XUI_attrClassProto ? attrs[ propID ] : this.attrClass.prototype[ propID ], // def[ 0 ], currentVal = attrs ? attrs[ propID ] : defaultVal, dirty = def[ 1 ], user = def[ 2 ], type = def[ 3 ], list = def[ 4 ], - length = !!( type & X.UI.Attr.Type.LENGTH ), - minusLen = !!( type & X.UI.Attr.Type.MINUS_LENGTH ), - percent = !!( type & X.UI.Attr.Type.PERCENT ), - minusPct = !!( type & X.UI.Attr.Type.MINUS_PERCENT ), - numerical = !!( type & X.UI.Attr.Type.NUMERICAL ), - auto = !!( type & X.UI.Attr.Type.AUTO ), - color = !!( type & X.UI.Attr.Type.COLOR ), - url = !!( type & X.UI.Attr.Type.URL ), - fontName = !!( type & X.UI.Attr.Type.FONT_NAME ), - flag = !!( type & X.UI.Attr.Type.BOOLEAN ), - combi = !!( type & X.UI.Attr.Type.COMBI ), - quartet = !!( type & X.UI.Attr.Type.QUARTET ), + length = !!( type & XUI_Attr_Type.LENGTH ), + minusLen = !!( type & XUI_Attr_Type.MINUS_LENGTH ), + percent = !!( type & XUI_Attr_Type.PERCENT ), + minusPct = !!( type & XUI_Attr_Type.MINUS_PERCENT ), + numerical = !!( type & XUI_Attr_Type.NUMERICAL ), + auto = !!( type & XUI_Attr_Type.AUTO ), + color = !!( type & XUI_Attr_Type.COLOR ), + url = !!( type & XUI_Attr_Type.URL ), + fontName = !!( type & XUI_Attr_Type.FONT_NAME ), + flag = !!( type & XUI_Attr_Type.BOOLEAN ), + combi = !!( type & XUI_Attr_Type.COMBI ), + quartet = !!( type & XUI_Attr_Type.QUARTET ), _v, i, l, nodes, root, roots; if( X_Type_isString( v ) ){ @@ -129,7 +131,7 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( // good } else if( auto && v === 'auto' ){ - v = X.UI.Attr.AUTO; + v = XUI_Attr_AUTO; } else if( list && ( _v = list[ v ] ) ){ // good @@ -164,7 +166,7 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( ( percent && 0 <= v && v <= 1 ) || ( minusPct && -1 <= v && v < 0 ) || ( numerical && 0 <= v ) || - ( auto && v === X.UI.Attr.AUTO ) || + ( auto && v === XUI_Attr_AUTO ) || ( color && 0 <= v && v <= 0xFFFFFF ) || ( list && list[ v ] ) ){ @@ -179,7 +181,7 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( } else if( X_Type_isArray( v ) ){ if( v.length <= 4 && quartet ){ - type &= ~X.UI.Attr.Type.QUARTET; + type &= ~XUI_Attr_Type.QUARTET; switch( v.length ){ case 1 : this.setAttr( false, [ defaultVal, user, dirty, type, list, propID ], v[ 0 ] ); @@ -208,7 +210,7 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( }; } else if( v.length === 2 && combi ){ - type &= ~X.UI.Attr.Type.COMBI; + type &= ~XUI_Attr_Type.COMBI; this.setAttr( false, [ defaultVal, user, dirty, type, list, propID ], v[ 0 ] ); this.setAttr( false, [ defaultVal, user, dirty, type, list, ++propID ], v[ 1 ] ); } else { @@ -216,40 +218,40 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( return; }; - if( !X.UI.attrClassProto && user === X.UI.Attr.USER.XNODE && this.xnode ){ - this.xnode[ 'css' ]( X.UI.Attr.Rename[ name ] || name, XUI_AbstractUINode_createCssText( this, name ) ); - //console.log( ( X.UI.Attr.Rename[ name ] || name ) + ' ' + XUI_AbstractUINode_createCssText( this, name ) + ' ' + propID + ' ' + attrs[ propID ] ); + if( !XUI_attrClassProto && user === XUI_Attr_USER.XNODE && this.xnode ){ + this.xnode[ 'css' ]( XUI_Attr_Rename[ name ] || name, XUI_AbstractUINode_createCssText( this, name ) ); + //console.log( ( XUI_Attr_Rename[ name ] || name ) + ' ' + XUI_AbstractUINode_createCssText( this, name ) + ' ' + propID + ' ' + attrs[ propID ] ); }; return; }; if( !v && v !== 0 ) v = defaultVal; - if( X.UI.attrClassProto ){ + if( XUI_attrClassProto ){ attrs[ propID ] = v; return; }; if( currentVal !== v ){ switch( propID ){ - case X.UI.Attr.Support.left.No : - this.constraintW = attrs[ X.UI.Attr.Support.right.No ] !== null; + case XUI_Attr_Support.left.No : + this.constraintW = attrs[ XUI_Attr_Support.right.No ] !== null; break; - case X.UI.Attr.Support.right.No : - this.constraintW = attrs[ X.UI.Attr.Support.left.No ] !== null; + case XUI_Attr_Support.right.No : + this.constraintW = attrs[ XUI_Attr_Support.left.No ] !== null; break; - case X.UI.Attr.Support.top.No : - this.constraintH = attrs[ X.UI.Attr.Support.bottom.No ] !== null; + case XUI_Attr_Support.top.No : + this.constraintH = attrs[ XUI_Attr_Support.bottom.No ] !== null; break; - case X.UI.Attr.Support.bottom.No : - this.constraintH = attrs[ X.UI.Attr.Support.top.No ] !== null; + case XUI_Attr_Support.bottom.No : + this.constraintH = attrs[ XUI_Attr_Support.top.No ] !== null; break; - case X.UI.Attr.Support.width.No : - this.autoWidth = v === X.UI.Attr.AUTO; + case XUI_Attr_Support.width.No : + this.autoWidth = v === XUI_Attr_AUTO; this.percentWidth = X_Type_isString( v ); break; - case X.UI.Attr.Support.height.No : - this.autoHeight = v === X.UI.Attr.AUTO; + case XUI_Attr_Support.height.No : + this.autoHeight = v === XUI_Attr_AUTO; this.percentHeight = X_Type_isString( v ); break; }; @@ -261,20 +263,20 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( attrs[ propID ] = v; }; - if( name && user === X.UI.Attr.USER.UINODE ){ + if( name && user === XUI_Attr_USER.UINODE ){ this[ name ] = v; }; - if( name && user === X.UI.Attr.USER.XNODE && this.xnode ){ - this.xnode[ 'css' ]( X.UI.Attr.Rename[ name ] || name, XUI_AbstractUINode_createCssText( this, name ) ); - //console.log( ( X.UI.Attr.Rename[ name ] || name ) + ' ' + XUI_AbstractUINode_createCssText( this, name ) + ' ' + propID + ' ' + attrs[ propID ] ); + if( name && user === XUI_Attr_USER.XNODE && this.xnode ){ + this.xnode[ 'css' ]( XUI_Attr_Rename[ name ] || name, XUI_AbstractUINode_createCssText( this, name ) ); + //console.log( ( XUI_Attr_Rename[ name ] || name ) + ' ' + XUI_AbstractUINode_createCssText( this, name ) + ' ' + propID + ' ' + attrs[ propID ] ); } else if( this.dirty < dirty ) this.dirty = dirty; }; }, getAttr : function( name ){ - var attrs = this.attrObject || this.attrClass.prototype || X.UI.AttrClass, + var attrs = this.attrObject || this.attrClass.prototype || XUI_AttrClass, support = this.supportAttrs[ name ], v, type, list; if( !support ) return; @@ -286,19 +288,19 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( type = support[ 3 ]; // Unit - if( type & X.UI.Attr.Type.QUARTET ){ + if( type & XUI_Attr_Type.QUARTET ){ return [ this.getAttr( name + 'Top' ), this.getAttr( name + 'Right' ), this.getAttr( name + 'Bottom' ), this.getAttr( name + 'Left' ) ]; }; - if( type & X.UI.Attr.Type.COMBI ) return [ v, data[ ++propID ] ]; + if( type & XUI_Attr_Type.COMBI ) return [ v, data[ ++propID ] ]; v = attrs[ support.No ]; - if( type & X.UI.Attr.Type.AUTO && v === X.UI.Attr.AUTO ) return 'auto'; + if( type & XUI_Attr_Type.AUTO && v === XUI_Attr_AUTO ) return 'auto'; list = support[ 4 ]; if( list ) return list[ v ]; - if( type & X.UI.Attr.Type.COLOR && X_Type_isNumber( v ) ) return v; - if( !( type & X.UI.Attr.Type.NUMERICAL ) && X_Type_isNumber( v ) ) return v + 'em'; + if( type & XUI_Attr_Type.COLOR && X_Type_isNumber( v ) ) return v; + if( !( type & XUI_Attr_Type.NUMERICAL ) && X_Type_isNumber( v ) ) return v + 'em'; return v; }, @@ -332,25 +334,32 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( calculate : function( isNeedsDetection, x, y, allowedW, allowedH ){ this.preMesure( allowedW, allowedH ); - if( this.boxWidth === X.UI.Attr.AUTO || this.boxHeight === X.UI.Attr.AUTO ){ + this.noWidth = this.boxWidth === XUI_Attr_AUTO; + this.noHeight = this.boxHeight === XUI_Attr_AUTO; + + if( this.noWidth || this.noHeight ){ this.mesure(); this.postMesure(); }; - !isNeedsDetection && this.updateLayout( x, y ); + if( !isNeedsDetection ){ + this.boxX += x; + this.boxY += y; + }; }, /** * X_Node_BoxModel の情報を引きながら top,left,width,height,padding,border の設定 */ - updateLayout : function( x, y ){ - this.boxX = x; - this.boxY = y; + updateLayout : function(){ + var x = this.boxX, + y = this.boxY; + this.xnode [ 'css' ]( 'left', x ? x + 'em' : 0 ) [ 'css' ]( 'top', y ? y + 'em' : 0 ) - [ 'css' ]( 'width', this.contentWidth ? XUI_AbstractUINode_ceil( this.contentWidth ) + 'em' : 0 ) - [ 'css' ]( 'height', this.contentHeight ? XUI_AbstractUINode_ceil( this.contentHeight ) + 'em' : 0 ) + [ 'css' ]( 'width', this.noWidth ? 'auto' : this.contentWidth ? this.contentWidth + 'em' : 0 ) + [ 'css' ]( 'height', this.noHeight ? 'auto' : this.contentHeight ? this.contentHeight + 'em' : 0 ) [ 'css' ]( 'padding', XUI_AbstractUINode_createCssText( this, 'padding' ) ) [ 'css' ]( 'borderWidth', XUI_AbstractUINode_createCssText( this, 'borderWidth' ) ); }, @@ -359,8 +368,8 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( * 親の サイズを元に自身のサイズを計算していく */ preMesure : function( allowedW, allowedH ){ - var attrs = this.attrObject || this.attrClass.prototype || X.UI.AttrClass, - box = attrs[ X.UI.Attr.Support.sizing.No ], + var attrs = this.attrObject || this.attrClass.prototype || XUI_AttrClass, + box = attrs[ XUI_Attr_Support.sizing.No ], min, max, boxL, boxT, boxR, boxB, contentW, contentH, boxMinus, @@ -371,10 +380,10 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( // 自身が constraintW の場合 親が AUTO ではない // 自身が constraintW でない場合自身が AUTO はなくかつ親 が AUTO の場合 or 自身は % でない - paddingR = XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.padding.No + 1 ], allowedW ); - paddingL = XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.padding.No + 3 ], allowedW ); - borderR = XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.borderWidth.No + 1 ], allowedW ); - borderL = XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.borderWidth.No + 3 ], allowedW ); + paddingR = XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.padding.No + 1 ], allowedW ); + paddingL = XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.padding.No + 3 ], allowedW ); + borderR = XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.borderWidth.No + 1 ], allowedW ); + borderL = XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.borderWidth.No + 3 ], allowedW ); boxMinus = 0; switch( box ){ case 3 : // border-box @@ -386,11 +395,11 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( this.contentL = borderL + paddingL; this.contentR = borderR + paddingR; - if( this.constraintW ? allowedW !== X.UI.Attr.AUTO : !this.autoWidth && ( allowedW !== X.UI.Attr.AUTO || !this.percentWidth ) ){ + if( this.constraintW ? allowedW !== XUI_Attr_AUTO : !this.autoWidth && ( allowedW !== XUI_Attr_AUTO || !this.percentWidth ) ){ if( this.constraintW ){ // 制約レイアウト - contentW = allowedW - ( boxL = XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.left.No ], allowedW ) ) - ( boxR = XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.right.No ], allowedW ) ); + contentW = allowedW - ( boxL = XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.left.No ], allowedW ) ) - ( boxR = XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.right.No ], allowedW ) ); } else { - contentW = XUI_AbstractUINode_calcFinalValue( attrs[ X.UI.Attr.Support.width.No ], attrs[ X.UI.Attr.Support.minWidth.No ], attrs[ X.UI.Attr.Support.maxWidth.No ], allowedW ); + contentW = XUI_AbstractUINode_calcFinalValue( attrs[ XUI_Attr_Support.width.No ], attrs[ XUI_Attr_Support.minWidth.No ], attrs[ XUI_Attr_Support.maxWidth.No ], allowedW ); }; this.contentWidth = contentW + boxMinus; //this.scrollWidth = this.contentWidth + this.contentL + this.contentR; @@ -401,8 +410,8 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( delete this.minBoxWidth; delete this.maxBoxWidth; } else { - this.minContentWidth = XUI_AbstractUINode_ceil( XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.minWidth.No ], allowedW ) + boxMinus ); - this.maxContentWidth = XUI_AbstractUINode_ceil( XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.maxWidth.No ], allowedW ) + boxMinus ); + this.minContentWidth = XUI_AbstractUINode_ceil( XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.minWidth.No ], allowedW ) + boxMinus ); + this.maxContentWidth = XUI_AbstractUINode_ceil( XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.maxWidth.No ], allowedW ) + boxMinus ); //this.scrollWidth = this.contentWidth + this.contentL + this.contentR; this.minBoxWidth = this.minContentWidth - boxMinus + this.contentL + this.contentR; this.maxBoxWidth = this.maxContentWidth - boxMinus + this.contentL + this.contentR; @@ -412,10 +421,10 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( //delete this.boxSizingOffsetLR; }; - paddingT = XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.padding.No + 0 ], allowedH );// paddingTRBL の % 指定は 最大幅に対して TB でも幅に対して - paddingB = XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.padding.No + 2 ], allowedH ); - borderT = XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.borderWidth.No + 0 ], allowedH ); - borderB = XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.borderWidth.No + 2 ], allowedH ); + paddingT = XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.padding.No + 0 ], allowedH );// paddingTRBL の % 指定は 最大幅に対して TB でも幅に対して + paddingB = XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.padding.No + 2 ], allowedH ); + borderT = XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.borderWidth.No + 0 ], allowedH ); + borderB = XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.borderWidth.No + 2 ], allowedH ); boxMinus = 0; switch( box ){ case 3 : // border-box @@ -428,11 +437,11 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( this.contentB = borderB + paddingB; // Height - if( this.constraintH ? allowedH !== X.UI.Attr.AUTO : !this.autoHeight && ( allowedH !== X.UI.Attr.AUTO || !this.percentHeight ) ){ + if( this.constraintH ? allowedH !== XUI_Attr_AUTO : !this.autoHeight && ( allowedH !== XUI_Attr_AUTO || !this.percentHeight ) ){ if( this.constraintH ){ // 制約レイアウト - contentH = allowedH - ( boxT = XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.top.No ], allowedH ) ) - ( boxB = XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.bottom.No ], allowedH ) ); + contentH = allowedH - ( boxT = XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.top.No ], allowedH ) ) - ( boxB = XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.bottom.No ], allowedH ) ); } else { - contentH = XUI_AbstractUINode_calcFinalValue( attrs[ X.UI.Attr.Support.height.No ], attrs[ X.UI.Attr.Support.minHeight.No ], attrs[ X.UI.Attr.Support.maxHeight.No ], allowedH ); + contentH = XUI_AbstractUINode_calcFinalValue( attrs[ XUI_Attr_Support.height.No ], attrs[ XUI_Attr_Support.minHeight.No ], attrs[ XUI_Attr_Support.maxHeight.No ], allowedH ); }; this.contentHeight = contentH + boxMinus; //this.scrollHeight = this.contentHeight + this.contentT + this.contentB; @@ -443,8 +452,8 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( delete this.minBoxHeight; delete this.maxBoxHeight; } else { - this.minContentHeight = XUI_AbstractUINode_ceil( XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.minHeight.No ], allowedH ) + boxMinus ); - this.maxContentHeight = XUI_AbstractUINode_ceil( XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.maxHeight.No ], allowedH ) + boxMinus ); + this.minContentHeight = XUI_AbstractUINode_ceil( XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.minHeight.No ], allowedH ) + boxMinus ); + this.maxContentHeight = XUI_AbstractUINode_ceil( XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.maxHeight.No ], allowedH ) + boxMinus ); this.minBoxHeight = this.minContentHeight - boxMinus + this.contentT + this.contentB; this.maxBoxHeight = this.maxContentHeight - boxMinus + this.contentT + this.contentB; @@ -456,12 +465,12 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( if( this.parentData && this.parentData.layout.overrideAttrsForChild.left ){ if( this.constraintW ){ - this.boxX = ( boxL || boxL === 0 ) ? boxL : XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.left.No ], allowedW ); + this.boxX = ( boxL || boxL === 0 ) ? boxL : XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.left.No ], allowedW ); } else - if( attrs[ X.UI.Attr.Support.right.No ] === null ){ - this.boxX = ( boxL || boxL === 0 ) ? boxL : XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.left.No ], allowedW ); + if( attrs[ XUI_Attr_Support.right.No ] === null ){ + this.boxX = ( boxL || boxL === 0 ) ? boxL : XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.left.No ], allowedW ); } else { - this.boxX = alllowW - this.boxWidth - ( ( boxR || boxR === 0 ) ? boxR : XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.right.No ], allowedW ) ); + this.boxX = alllowW - this.boxWidth - ( ( boxR || boxR === 0 ) ? boxR : XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.right.No ], allowedW ) ); }; } else { delete this.boxX; @@ -469,12 +478,12 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( if( this.parentData && this.parentData.layout.overrideAttrsForChild.top ){ if( this.constraintH ){ - this.boxY = ( boxT || boxT === 0 ) ? boxT : XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.top.No ], allowedH ); + this.boxY = ( boxT || boxT === 0 ) ? boxT : XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.top.No ], allowedH ); } else - if( attrs[ X.UI.Attr.Support.bottom.No ] === null ){ - this.boxY = ( boxT || boxT === 0 ) ? boxT : XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.top.No ], allowedH ); + if( attrs[ XUI_Attr_Support.bottom.No ] === null ){ + this.boxY = ( boxT || boxT === 0 ) ? boxT : XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.top.No ], allowedH ); } else { - this.boxY = allowedH - this.boxHeight - ( ( boxB || boxB === 0 ) ? boxB : XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.bottom.No ], allowedH ) ); + this.boxY = allowedH - this.boxHeight - ( ( boxB || boxB === 0 ) ? boxB : XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.bottom.No ], allowedH ) ); }; } else { delete this.boxY; @@ -482,13 +491,14 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( }, /** - * 描画・計測を行って、contentSize, scrollSize の決定 + * 描画・計測を行って、contentSize の決定 */ mesure : function(){ var dirty = this.dirty, - w, h, xnode; + //sup = X_UA[ 'Gecko' ] || ( X_UA[ 'Safari' ] && X_UA[ 'Windows' ] ) ? .01251 : 0, + w, _w, h, xnode; - if( dirty === X.UI.Dirty.CLEAN ){ + if( dirty === XUI_Dirty.CLEAN ){ if( this.percentWidth || this.percentHeight ){ }; @@ -496,12 +506,12 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( switch( dirty ){ - case X.UI.Dirty.CONTENT : // コンテンツが変更された - case X.UI.Dirty.FONT : // フォントサイズが変更された + case XUI_Dirty.CONTENT : // コンテンツが変更された + case XUI_Dirty.FONT : // フォントサイズが変更された delete this.lastContentWidth; delete this.lastContentHeight; - case X.UI.Dirty.LAYOUT : // レイアウトの再計算が必要 + case XUI_Dirty.LAYOUT : // レイアウトの再計算が必要 default : // TODO レイアウト崩れに対処 パフォーマンス悪い！ @@ -528,67 +538,67 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( * 必要でない */ if( xnode[ '_xnodes' ] && xnode[ '_xnodes' ].length ){ - if( w === X.UI.Attr.AUTO ){ - w = this.contentWidth = XUI_AbstractUINode_ceil( xnode[ 'css' ]( 'width', 'auto' )[ 'width' ]() / X_Node_CSS_getCharSize( xnode ) ); - console.log( 'chr ' + X_Node_CSS_getCharSize( xnode ) ); - - //this.scrollWidth = w + this.contentL + this.contentR; - if( this.maxContentWidth < w - this.boxSizingOffsetLR ) this.contentWidth = this.maxContentWidth + this.boxSizingOffsetLR; - if( w - this.boxSizingOffsetLR < this.minContentWidth ) this.contentWidth = this.minContentWidth + this.boxSizingOffsetLR; - this.lastContentWidth = this.contentWidth; + if( w === XUI_Attr_AUTO ){ - w !== this.contentWidth && xnode[ 'css' ]( 'width', this.contentWidth + 'em' ); - - if( h === X.UI.Attr.AUTO ){ - this.contentHeight = h = XUI_AbstractUINode_ceil( xnode[ 'css' ]( 'height', 'auto' )[ 'scrollHeight' ]() / X_Node_CSS_getCharSize( xnode ) ); // scrollHeight() ?? - //this.scrollHeight = h + this.contentT + this.contentB; - if( this.maxContentHeight < h - this.boxSizingOffsetTB ) this.contentHeight = this.maxContentHeight + this.boxSizingOffsetTB; - if( h - this.boxSizingOffsetTB < this.minContentHeight ) this.contentHeight = this.minContentHeight + this.boxSizingOffsetTB; - } else { - //this.scrollHeight = h + this.contentT + this.contentB; + w = _w = XUI_AbstractUINode_ceil( xnode[ 'css' ]( 'width', 'auto' )[ 'clientWidth' ]() / X_Node_CSS_getCharSize( xnode ) ); + + if( this.maxContentWidth < w - this.boxSizingOffsetLR ){ + this.noWidth = false; + w = this.maxContentWidth + this.boxSizingOffsetLR; }; - - this.lastContentHeight = h; + if( w - this.boxSizingOffsetLR < this.minContentWidth ){ + this.noWidth = false; + w = this.minContentWidth + this.boxSizingOffsetLR; + }; + + if( h === XUI_Attr_AUTO ){ + w !== _w && xnode[ 'css' ]( 'width', w + 'em' ); + h = XUI_AbstractUINode_ceil( xnode[ 'css' ]( 'height', 'auto' )[ 'scrollHeight' ]() / X_Node_CSS_getCharSize( xnode ) ); + w !== _w && xnode[ 'css' ]( 'width', 'auto' ); + }; + + this.lastContentWidth = this.contentWidth = w; + } else - if( h === X.UI.Attr.AUTO ){ - console.log( 'chr ' + X_Node_CSS_getCharSize( xnode ) ); + if( h === XUI_Attr_AUTO ){ if( w !== this.lastContentWidth ){ - xnode[ 'css' ]( 'width', w + 'em' ); + xnode[ 'css' ]( 'width', w + 'em' ); + this.lastContentWidth = w; - this.lastContentWidth = w; - this.contentHeight = h = XUI_AbstractUINode_ceil( xnode[ 'css' ]( 'height', 'auto' )[ 'scrollHeight' ]() / X_Node_CSS_getCharSize( xnode ) ); // ie8 clientHeight, ff scrollHeight & clientHeight - //this.scrollWidth = w + this.contentL + this.contentR; - //this.scrollHeight = h + this.contentT + this.contentB; - if( this.maxContentHeight < h - this.boxSizingOffsetTB ) this.contentHeight = this.maxContentHeight + this.boxSizingOffsetTB; - if( h - this.boxSizingOffsetTB < this.minContentHeight ) this.contentHeight = this.minContentHeight + this.boxSizingOffsetTB; + // ie8 clientHeight, ff scrollHeight & clientHeight + h = XUI_AbstractUINode_ceil( xnode[ 'css' ]( 'height', 'auto' )[ 'scrollHeight' ]() / X_Node_CSS_getCharSize( xnode ) ); } else { - this.contentHeight = this.lastContentHeight = h = - this.lastContentHeight === -1 ? XUI_AbstractUINode_ceil( xnode[ 'css' ]( 'height', 'auto' )[ 'scrollHeight' ]() / X_Node_CSS_getCharSize( xnode ) ) : this.lastContentHeight; - //this.scrollWidth = w + this.contentL + this.contentR; - //this.scrollHeight = h + this.contentT + this.contentB; + h = this.lastContentHeight === -1 ? + XUI_AbstractUINode_ceil( xnode[ 'css' ]( 'height', 'auto' )[ 'scrollHeight' ]() / X_Node_CSS_getCharSize( xnode ) ) : + this.lastContentHeight; }; } else - if( dirty !== X.UI.Dirty.LAYOUT ){ - console.log( 'chr ' + X_Node_CSS_getCharSize( xnode ) ); + if( dirty !== XUI_Dirty.LAYOUT ){ this.contentWidth = this.lastContentWidth = w; - this.contentHeight = this.lastContentHeight = XUI_AbstractUINode_ceil( xnode[ 'css' ]( 'height', 'auto' )[ 'scrollHeight' ]() / X_Node_CSS_getCharSize( xnode ) ); - //this.scrollWidth = this.contentWidth + this.contentL + this.contentR; - //this.scrollHeight = this.contentHeight + this.contentT + this.contentB; - } else { - //this.scrollWidth = w + this.contentL + this.contentR; - //this.scrollHeight = h + this.contentT + this.contentB; - }; + h = XUI_AbstractUINode_ceil( xnode[ 'css' ]( 'height', 'auto' )[ 'scrollHeight' ]() / X_Node_CSS_getCharSize( xnode ) ); + }; + + if( this.maxContentHeight < h - this.boxSizingOffsetTB ){ + this.noHeight = false; + h = this.maxContentHeight + this.boxSizingOffsetTB; + }; + if( h - this.boxSizingOffsetTB < this.minContentHeight ){ + this.noHeight = false; + h = this.minContentHeight + this.boxSizingOffsetTB; + }; + + this.contentHeight = this.lastContentHeight = h; + } else { // コンテンツを持たないため基本のサイズは0 - if( w === X.UI.Attr.AUTO ) this.contentWidth = w = 0 < this.minContentWidth ? this.minContentWidth : 0; - if( h === X.UI.Attr.AUTO ) this.contentHeight = h = 0 < this.minContentHeight ? this.minContentHeight : 0; - //this.scrollWidth = w + this.contentL + this.contentR; - //this.scrollHeight = h + this.contentT + this.contentB; + if( w === XUI_Attr_AUTO ) this.contentWidth = w = 0 < this.minContentWidth ? this.minContentWidth : 0; + if( h === XUI_Attr_AUTO ) this.contentHeight = h = 0 < this.minContentHeight ? this.minContentHeight : 0; + this.noWidth = this.noHeight = false; }; delete this.dirty; break; - //case X.UI.Dirty.PAINT : // 再描画のみ必要 + //case XUI_Dirty.PAINT : // 再描画のみ必要 // break; }; }, @@ -596,8 +606,8 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( * 自身の contentWidth, contentHeight を元に AUTO な width, height を確定していく */ postMesure : function(){ - var attrs = this.attrObject || this.attrClass.prototype || X.UI.AttrClass, - box = attrs[ X.UI.Attr.Support.sizing.No ], + var attrs = this.attrObject || this.attrClass.prototype || XUI_AttrClass, + box = attrs[ XUI_Attr_Support.sizing.No ], contentW, contentH, contentPlus, paddingT, paddingR, paddingB, paddingL, @@ -605,12 +615,12 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( min, max; // Width - if( this.boxWidth === X.UI.Attr.AUTO ){ + if( this.boxWidth === XUI_Attr_AUTO ){ contentW = this.contentWidth; - paddingR = XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.padding.No + 1 ], contentW ); - paddingL = XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.padding.No + 3 ], contentW ); - borderR = XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.borderWidth.No + 1 ], contentW ); - borderL = XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.borderWidth.No + 3 ], contentW ); + paddingR = XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.padding.No + 1 ], contentW ); + paddingL = XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.padding.No + 3 ], contentW ); + borderR = XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.borderWidth.No + 1 ], contentW ); + borderL = XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.borderWidth.No + 3 ], contentW ); contentPlus = 0; switch( box ){ case 3 : // border-box @@ -622,8 +632,8 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( if( !this.constraintW ){ contentW += contentPlus; - min = XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.minWidth.No ], contentW ); - max = XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.maxWidth.No ], contentW ); + min = XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.minWidth.No ], contentW ); + max = XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.maxWidth.No ], contentW ); if( contentW < min && contentPlus < min ){ this.contentWidth = min - contentPlus; } else @@ -636,12 +646,12 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( this.boxWidth = this.contentWidth + this.contentL + this.contentR; }; // Height - if( this.boxHeight === X.UI.Attr.AUTO ){ + if( this.boxHeight === XUI_Attr_AUTO ){ contentH = this.contentHeight; - paddingT = XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.padding.No + 0 ], contentH );// paddingTRBL の % 指定は 最大幅に対して TB でも幅に対して - paddingB = XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.padding.No + 2 ], contentH ); - borderT = XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.borderWidth.No + 0 ], contentH ); - borderB = XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.borderWidth.No + 2 ], contentH ); + paddingT = XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.padding.No + 0 ], contentH );// paddingTRBL の % 指定は 最大幅に対して TB でも幅に対して + paddingB = XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.padding.No + 2 ], contentH ); + borderT = XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.borderWidth.No + 0 ], contentH ); + borderB = XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.borderWidth.No + 2 ], contentH ); contentPlus = 0; switch( box ){ case 3 : // border-box @@ -652,8 +662,8 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( }; if( !this.constraintH ){ contentH += contentPlus; - min = XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.minHeight.No ], contentH ); - max = XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.maxHeight.No ], contentH ); + min = XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.minHeight.No ], contentH ); + max = XUI_AbstractUINode_calcValue( attrs[ XUI_Attr_Support.maxHeight.No ], contentH ); if( contentH < min && contentPlus < min ){ this.contentHeight = min - contentPlus; } else @@ -685,15 +695,15 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( */ listen : function( type, arg1, arg2, arg3 ){ var root, events, counter, f; - if( X.UI.Event._START_POINTER <= type && type <= X.UI.Event._END_POINTER ){ + if( XUI_Event._START_POINTER <= type && type <= XUI_Event._END_POINTER ){ if( this.phase < 3 ){ if( !( events = this.reserveEvents ) ) this.reserveEvents = events = []; events[ events.length ] = [ type, arg1, arg2, arg3 ]; return this; }; - if( X.UI.Event._START_XUI_EVENT < type && type < X.UI.Event._END_XUI_EVENT ){ + if( XUI_Event._START_XUI_EVENT < type && type < XUI_Event._END_XUI_EVENT ){ if( !this.gesture ){ - this.gesture = new X.UI.Gesture( this.rootData, this, type ); + this.gesture = new Hammer( this.rootData, this, type ); } else { this.gesture[ 'listen' ]( type ); }; @@ -705,7 +715,7 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( ++counter[ type ]; } else { counter[ type ] = 1; - root.xnodeInteractiveLayer[ 'listen' ]( X.UI.Event.IdToName[ type ], X_UI_eventRellay ); + root.xnodeInteractiveLayer[ 'listen' ]( XUI_Event.IdToName[ type ], X_UI_eventRellay ); }; }; }; @@ -720,7 +730,7 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( }, unlisten : function( type, arg1, arg2, arg3 ){ var root, events, i, ev, counter, f; - if( X.UI.Event._START_POINTER <= type && type <= X.UI.Event._END_POINTER ){ + if( XUI_Event._START_POINTER <= type && type <= XUI_Event._END_POINTER ){ if( this.phase < 3 ){ if( !( events = this.reserveEvents ) ) return this; for( i = events.length; i; ){ @@ -733,7 +743,7 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( return this; }; - if( X.UI.Event._START_XUI_EVENT < type && type < X.UI.Event._END_XUI_EVENT ){ + if( XUI_Event._START_XUI_EVENT < type && type < XUI_Event._END_XUI_EVENT ){ this.gesture && this.gesture[ 'unlisten' ]( type ); } else { root = this.rootData; @@ -741,7 +751,7 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( if( !counter[ type ] ) return this; --counter[ type ]; if( counter[ type ] === 0 ){ - root.xnodeInteractiveLayer[ 'unlisten' ]( X.UI.Event.IdToName[ type ], X_UI_eventRellay ); + root.xnodeInteractiveLayer[ 'unlisten' ]( XUI_Event.IdToName[ type ], X_UI_eventRellay ); delete counter[ type ]; }; }; @@ -758,12 +768,12 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( dispatch : function( e ){ //console.log( e.type + ' ' + ( this[ '_listeners' ] && this[ '_listeners' ][ e.type ] ) ); - var xve = X.UI.Event, + var xve = XUI_Event, ret = X_EventDispatcher_dispatch.call( this, e ), type = e.type || e; // TODO captureEvent PointerEvent - if( ret & X_Callback_MONOPOLY && !this.hitChildData && ( xve._POINTER_MOVE === type || xve._MOUSE_MOVE === type || xve.FILE_DRAG === type ) ){ + if( ret & X_Callback_CAPTURE_POINTER && !this.hitChildData && XUI_Event._POINTER_MOVE === type ){ this.rootData.monopolyNodeData = this; return ret; }; @@ -776,15 +786,15 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( ); function XUI_AbstractUINode_createCssText( that, name ){ - var attrs = that.attrObject || that.attrClass.prototype || X.UI.AttrClass, + var attrs = that.attrObject || that.attrClass.prototype || XUI_AttrClass, def = that.supportAttrs[ name ], no = def.No, v = attrs[ def.No ], type = def[ 3 ], list = def[ 4 ], - flag = !!( type & X.UI.Attr.Type.BOOLEAN ), - combi = !!( type & X.UI.Attr.Type.COMBI ), - quartet = !!( type & X.UI.Attr.Type.QUARTET ); + flag = !!( type & XUI_Attr_Type.BOOLEAN ), + combi = !!( type & XUI_Attr_Type.COMBI ), + quartet = !!( type & XUI_Attr_Type.QUARTET ); if( quartet ){ if( attrs[ no + 1 ] === attrs[ no + 3 ] ){ @@ -823,18 +833,18 @@ function XUI_AbstractUINode_createCssText( that, name ){ }; function XUI_AbstractUINode_createCssValue( v, type, list ){ - var length = !!( type & X.UI.Attr.Type.LENGTH ), - minusLen = !!( type & X.UI.Attr.Type.MINUS_LENGTH ), - percent = !!( type & X.UI.Attr.Type.PERCENT ), - minusPct = !!( type & X.UI.Attr.Type.MINUS_PERCENT ), - numerical = !!( type & X.UI.Attr.Type.NUMERICAL ), - auto = !!( type & X.UI.Attr.Type.AUTO ), - color = !!( type & X.UI.Attr.Type.COLOR ), - url = !!( type & X.UI.Attr.Type.URL ), - fontName = !!( type & X.UI.Attr.Type.FONT_NAME ); + var length = !!( type & XUI_Attr_Type.LENGTH ), + minusLen = !!( type & XUI_Attr_Type.MINUS_LENGTH ), + percent = !!( type & XUI_Attr_Type.PERCENT ), + minusPct = !!( type & XUI_Attr_Type.MINUS_PERCENT ), + numerical = !!( type & XUI_Attr_Type.NUMERICAL ), + auto = !!( type & XUI_Attr_Type.AUTO ), + color = !!( type & XUI_Attr_Type.COLOR ), + url = !!( type & XUI_Attr_Type.URL ), + fontName = !!( type & XUI_Attr_Type.FONT_NAME ); if( X_Type_isNumber( v ) ){ - if( auto && v === X.UI.Attr.AUTO ) return 'auto'; + if( auto && v === XUI_Attr_AUTO ) return 'auto'; if( length || minusLen ) return v + 'em'; if( numerical ) return v; if( list && list[ v ] ) return list[ v ]; @@ -877,7 +887,7 @@ function XUI_AbstractUINode_ceil( v ){ X.UI.AbstractUINode = X_Class_create( 'AbstractUINode', - X_Class.ABSTRACT | X_Class.SUPER_ACCESS, + X_Class.ABSTRACT, { parent : function(){ return X_Class_getPrivate( this ).parent; @@ -918,7 +928,7 @@ X.UI.AbstractUINode = X_Class_create( }; }; // getter - if( attrs = ( p.attrObject || p.attrClass.prototype || X.UI.AttrClass ) ){ + if( attrs = ( p.attrObject || p.attrClass.prototype || XUI_AttrClass ) ){ def = p.supportAttrs[ nameOrObject ]; return def && attrs[ def.No ]; }; diff --git a/0.6.x/js/20_ui/08_Box.js b/0.6.x/js/20_ui/08_Box.js index dfe2e15..0a3ad33 100644 --- a/0.6.x/js/20_ui/08_Box.js +++ b/0.6.x/js/20_ui/08_Box.js @@ -1,15 +1,15 @@ -X.UI.Layout.Canvas = X.UI.Layout.create( { +var XUI_Layout_Canvas = X[ 'UI' ][ 'Layout' ][ 'Canvas' ] = XUI_createLayout( { name : 'CanvasLayout', overrideAttrsForSelf : { selectable : false, - 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' ], + role : [ 0, XUI_Dirty.CLEAN, XUI_Attr_USER.UINODE, XUI_Attr_Type.INIT_ONLY | XUI_Attr_Type.LIST, 'none,chrome,container' ], - width : [ '100%', X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH | X.UI.Attr.Type.PERCENT ], - maxWidth : [ X.UI.Attr.AUTO, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH | X.UI.Attr.Type.PERCENT ], - height : [ 0, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH | X.UI.Attr.Type.PERCENT ], - maxHeight : [ X.UI.Attr.AUTO, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH | X.UI.Attr.Type.PERCENT ] + width : [ '100%', XUI_Dirty.LAYOUT, XUI_Attr_USER.LAYOUT, XUI_Attr_Type.LENGTH | XUI_Attr_Type.PERCENT ], + maxWidth : [ XUI_Attr_AUTO, XUI_Dirty.LAYOUT, XUI_Attr_USER.LAYOUT, XUI_Attr_Type.LENGTH | XUI_Attr_Type.PERCENT ], + height : [ 0, XUI_Dirty.LAYOUT, XUI_Attr_USER.LAYOUT, XUI_Attr_Type.LENGTH | XUI_Attr_Type.PERCENT ], + maxHeight : [ XUI_Attr_AUTO, XUI_Dirty.LAYOUT, XUI_Attr_USER.LAYOUT, XUI_Attr_Type.LENGTH | XUI_Attr_Type.PERCENT ] }, overrideAttrsForChild : { @@ -24,7 +24,7 @@ X.UI.Layout.Canvas = X.UI.Layout.create( { data.preMesure( w, h ); - if( isNeedsDetection && ( data.boxWidth === X.UI.Attr.AUTO || data.boxHeight === X.UI.Attr.AUTO ) ) return false; + if( isNeedsDetection && ( data.boxWidth === XUI_Attr_AUTO || data.boxHeight === XUI_Attr_AUTO ) ) return false; _x = data.contentL; _y = data.contentT; @@ -37,23 +37,26 @@ X.UI.Layout.Canvas = X.UI.Layout.create( { node.calculate( false, _x, _y, _w, _h ); }; } else - if( data.contentHeight === X.UI.Attr.AUTO ){ - data.contentHeight = data.minContentHeight !== X.UI.Attr.AUTO ? data.minContentHeight : 0; + if( data.contentHeight === XUI_Attr_AUTO ){ + data.contentHeight = data.minContentHeight !== XUI_Attr_AUTO ? data.minContentHeight : 0; }; data.postMesure(); - data.updateLayout( x + data.boxX, y + data.boxY ); - + + if( !isNeedsDetection ){ + data.boxX += x; + data.boxY += y; + }; return true; } }); -X.UI._Box = X.UI._AbstractUINode.inherits( +var XUI_Box = XUI_AbstractUINode.inherits( 'X.UI._Box', - X_Class.PRIVATE_DATA | X_Class.SUPER_ACCESS, // 現状 super 指定がないとconstructor未定擬時に親のconstructor が使われない + X_Class.PRIVATE_DATA, // 現状 super 指定がないとconstructor未定擬時に親のconstructor が使われない { - supportAttrs : XUI_Attr_createAttrDef( X.UI._AbstractUINode.prototype.supportAttrs, X.UI.Layout.Canvas.overrideAttrsForSelf ), + supportAttrs : XUI_Attr_createAttrDef( XUI_AbstractUINode.prototype.supportAttrs, XUI_Layout_Canvas.overrideAttrsForSelf ), layout : null, uinodes : null, @@ -63,8 +66,8 @@ X.UI._Box = X.UI._AbstractUINode.inherits( pointerChildren : true, through : false, - scrollingX : 0, - scrollingY : 0, + scrollingX : 0, // TODO 現在のスクロール位置 + scrollingY : 0, // TODO Constructor : function( layout, args ){ var i = 0, @@ -97,7 +100,7 @@ X.UI._Box = X.UI._AbstractUINode.inherits( if( arg[ 'instanceOf' ] && arg[ 'instanceOf' ]( Node ) ){ //this.layout = arg; } else - if( arg[ 'instanceOf' ] && arg[ 'instanceOf' ]( X.UI.Layout.Base ) ){ + if( arg[ 'instanceOf' ] && arg[ 'instanceOf' ]( XUI_LayoutBase ) ){ //this.layout = arg; } else if( X_Type_isObject( arg ) ){ @@ -133,7 +136,7 @@ X.UI._Box = X.UI._AbstractUINode.inherits( }; this.phase = 1; - this.User[ 'dispatch' ]( { type : X.UI.Event.INIT } ); + this.User[ 'dispatch' ]( { type : XUI_Event.INIT } ); }, addToParent : function( parentXNode ){ @@ -150,7 +153,7 @@ X.UI._Box = X.UI._AbstractUINode.inherits( }; this.phase = 2; - this.User[ 'dispatch' ]( { type : X.UI.Event.ADDED } ); + this.User[ 'dispatch' ]( { type : XUI_Event.ADDED } ); }, /* Rellay */ @@ -163,7 +166,7 @@ X.UI._Box = X.UI._AbstractUINode.inherits( }; }; - X.UI._AbstractUINode.prototype.creationComplete.apply( this, arguments ); + XUI_AbstractUINode.prototype.creationComplete.apply( this, arguments ); }, calculate : function( isNeedsDetection, x, y, w, h ){ @@ -171,6 +174,17 @@ X.UI._Box = X.UI._AbstractUINode.inherits( this.phase = 4; return ret; }, + + updateLayout : function(){ + var uinodes = this.uinodes, i, l; + + if( uinodes && ( l = uinodes.length ) ){ + for( i = 0; i < l; ++i ){ + uinodes[ i ].updateLayout(); + }; + }; + XUI_AbstractUINode.prototype.updateLayout.call( this ); + }, capcher : function( x, y ){ var uinodes, child, _x, _y, hit, i; @@ -287,11 +301,11 @@ X.UI._Box = X.UI._AbstractUINode.inherits( X.UI.Box = X.UI.AbstractUINode.inherits( 'Box', - X_Class.SUPER_ACCESS, - X.UI._Box, + X_Class.NONE, + XUI_Box, { Constructor : function(){ - X_Class_newPrivate( this, X.UI.Layout.Canvas, arguments ); + X_Class_newPrivate( this, XUI_Layout_Canvas, arguments ); }, add : function( node /* , node, node ... */ ){ @@ -357,7 +371,7 @@ X.UI.Box.presets = function(){ arg = args[ i ]; if( !arg ) continue; // レイアウトの preset ができるのは layout が未定義な Box だけ - if( !shadow.prototype.layout && arg[ 'instanceOf' ] && arg[ 'instanceOf' ]( X.UI.Layout.Base ) ){ + if( !shadow.prototype.layout && arg[ 'instanceOf' ] && arg[ 'instanceOf' ]( XUI_LayoutBase ) ){ layout = arg; } else if( ( klassDef = X_Class_getClassDef( arg ) ) && klassDef.isPrivate ){ @@ -381,7 +395,7 @@ X.UI.Box.presets = function(){ klass = this.inherits( privateKlass ); privateKlass.prototype.supportAttrs = supports, - privateKlass.prototype.attrClass = X.UI.Attr.preset( privateKlass.prototype.attrClass, supports, attrs ); + privateKlass.prototype.attrClass = XUI_Attr_preset( privateKlass.prototype.attrClass, supports, attrs ); } else { supports = XUI_Attr_createAttrDef( shadow.prototype.supportAttrs, layout.overrideAttrsForSelf ); @@ -391,7 +405,7 @@ X.UI.Box.presets = function(){ { layout : layout, supportAttrs : supports, - attrClass : X.UI.Attr.preset( shadow.prototype.attrClass, supports, attrs ) + attrClass : XUI_Attr_preset( shadow.prototype.attrClass, supports, attrs ) } ) ); diff --git a/0.6.x/js/20_ui/11_VBox.js b/0.6.x/js/20_ui/11_VBox.js index 00b706a..d9becca 100644 --- a/0.6.x/js/20_ui/11_VBox.js +++ b/0.6.x/js/20_ui/11_VBox.js @@ -1,15 +1,15 @@ -X.UI.Layout.Vertical = X.UI.Layout.create( { +var XUI_Layout_Vertical = X[ 'UI' ][ 'Layout' ][ 'Vertical' ] = XUI_createLayout( { name : 'VerticalLayout', overrideAttrsForSelf : { selectable : false, - 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' ], - width : [ '100%', X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH | X.UI.Attr.Type.PERCENT | X.UI.Attr.Type.AUTO ], - 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 ], - 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 ], - 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 ], - gapY : [ 0, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH ] + role : [ 0, XUI_Dirty.CLEAN, XUI_Attr_USER.UINODE, XUI_Attr_Type.INIT_ONLY | XUI_Attr_Type.LIST, 'none,chrome,container' ], + width : [ '100%', XUI_Dirty.LAYOUT, XUI_Attr_USER.LAYOUT, XUI_Attr_Type.LENGTH | XUI_Attr_Type.PERCENT | XUI_Attr_Type.AUTO ], + height : [ XUI_Attr_AUTO, XUI_Dirty.LAYOUT, XUI_Attr_USER.LAYOUT, XUI_Attr_Type.LENGTH | XUI_Attr_Type.PERCENT | XUI_Attr_Type.AUTO ], + childWidth : [ XUI_Attr_AUTO, XUI_Dirty.LAYOUT, XUI_Attr_USER.LAYOUT, XUI_Attr_Type.LENGTH | XUI_Attr_Type.PERCENT | XUI_Attr_Type.AUTO ], + childHeight : [ XUI_Attr_AUTO, XUI_Dirty.LAYOUT, XUI_Attr_USER.LAYOUT, XUI_Attr_Type.LENGTH | XUI_Attr_Type.PERCENT | XUI_Attr_Type.AUTO ], + gapY : [ 0, XUI_Dirty.LAYOUT, XUI_Attr_USER.LAYOUT, XUI_Attr_Type.LENGTH ] }, overrideAttrsForChild : { @@ -33,8 +33,8 @@ X.UI.Layout.Vertical = X.UI.Layout.create( { contentW = data.contentWidth; contentH = data.contentHeight; - autoW = contentW === X.UI.Attr.AUTO; - autoH = contentH === X.UI.Attr.AUTO; + autoW = contentW === XUI_Attr_AUTO; + autoH = contentH === XUI_Attr_AUTO; detectionPhase = autoW || autoH; gapY = XUI_AbstractUINode_calcValue( attrs[ data.supportAttrs.gapY.No ], contentH ); childW = XUI_AbstractUINode_calcValue( attrs[ data.supportAttrs.childWidth.No ], contentW ); @@ -52,10 +52,10 @@ X.UI.Layout.Vertical = X.UI.Layout.create( { _y += node.boxHeight + gapY; // 概算のみ if( autoW ){ - if( node.boxWidth !== X.UI.Attr.AUTO ){ + if( node.boxWidth !== XUI_Attr_AUTO ){ w = node.boxWidth; } else - if( node.minBoxWidth !== X.UI.Attr.AUTO ){ + if( node.minBoxWidth !== XUI_Attr_AUTO ){ w = node.minBoxWidth; minFlag = true; } else { @@ -66,7 +66,7 @@ X.UI.Layout.Vertical = X.UI.Layout.create( { }; _y -= gapY; } else { - _y = data.minContentHeight !== X.UI.Attr.AUTO ? data.minContentHeight : 0; + _y = data.minContentHeight !== XUI_Attr_AUTO ? data.minContentHeight : 0; }; if( detectionPhase ){ @@ -81,14 +81,16 @@ X.UI.Layout.Vertical = X.UI.Layout.create( { data.postMesure(); }; - !isNeedsDetection && data.updateLayout( x + data.boxX, y + data.boxY ); - + if( !isNeedsDetection ){ + data.boxX += x; + data.boxY += y; + }; return !ret; } }); X.UI.VBox = X.UI.Box.presets( - X.UI.Layout.Vertical, + XUI_Layout_Vertical, 'VBox', { gapY : '0.2em', diff --git a/0.6.x/js/20_ui/12_HBox.js b/0.6.x/js/20_ui/12_HBox.js index 52b9bdf..1e74391 100644 --- a/0.6.x/js/20_ui/12_HBox.js +++ b/0.6.x/js/20_ui/12_HBox.js @@ -1,14 +1,14 @@ -X.UI.Layout.Horizontal = X.UI.Layout.create( { +var XUI_Layout_Horizontal = X[ 'UI' ][ 'Layout' ][ 'Horizontal' ] = XUI_createLayout( { name : 'HorizontalLayout', overrideAttrsForSelf : { selectable : false, - 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' ], - width : [ '100%', X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH | X.UI.Attr.Type.PERCENT | X.UI.Attr.Type.AUTO ], - 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 ], - 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 ], - 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 ], - gapX : [ 0, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH ] + role : [ 0, XUI_Dirty.CLEAN, XUI_Attr_USER.UINODE, XUI_Attr_Type.INIT_ONLY | XUI_Attr_Type.LIST, 'none,chrome,container' ], + width : [ '100%', XUI_Dirty.LAYOUT, XUI_Attr_USER.LAYOUT, XUI_Attr_Type.LENGTH | XUI_Attr_Type.PERCENT | XUI_Attr_Type.AUTO ], + height : [ XUI_Attr_AUTO, XUI_Dirty.LAYOUT, XUI_Attr_USER.LAYOUT, XUI_Attr_Type.LENGTH | XUI_Attr_Type.PERCENT | XUI_Attr_Type.AUTO ], + childWidth : [ XUI_Attr_AUTO, XUI_Dirty.LAYOUT, XUI_Attr_USER.LAYOUT, XUI_Attr_Type.LENGTH | XUI_Attr_Type.PERCENT | XUI_Attr_Type.AUTO ], + childHeight : [ XUI_Attr_AUTO, XUI_Dirty.LAYOUT, XUI_Attr_USER.LAYOUT, XUI_Attr_Type.LENGTH | XUI_Attr_Type.PERCENT | XUI_Attr_Type.AUTO ], + gapX : [ 0, XUI_Dirty.LAYOUT, XUI_Attr_USER.LAYOUT, XUI_Attr_Type.LENGTH ] }, overrideAttrsForChild : { @@ -31,8 +31,8 @@ X.UI.Layout.Horizontal = X.UI.Layout.create( { contentW = data.contentWidth; contentH = data.contentHeight; - autoW = contentW === X.UI.Attr.AUTO; - autoH = contentH === X.UI.Attr.AUTO; + autoW = contentW === XUI_Attr_AUTO; + autoH = contentH === XUI_Attr_AUTO; detectionPhase = autoW || autoH; gapX = XUI_AbstractUINode_calcValue( attrs[ data.supportAttrs.gapX.No ], contentW ); childW = XUI_AbstractUINode_calcValue( attrs[ data.supportAttrs.childWidth.No ], contentW ); @@ -49,10 +49,10 @@ X.UI.Layout.Horizontal = X.UI.Layout.create( { node.calculate( detectionPhase, _x, _y, childW, childH ); _x += node.boxWidth + gapX; if( autoH ){ - if( node.boxHeight !== X.UI.Attr.AUTO ){ + if( node.boxHeight !== XUI_Attr_AUTO ){ h = node.boxHeight; } else - if( node.minBoxHeight !== X.UI.Attr.AUTO ){ + if( node.minBoxHeight !== XUI_Attr_AUTO ){ h = node.minBoxHeight; minFlag = true; } else { @@ -63,7 +63,7 @@ X.UI.Layout.Horizontal = X.UI.Layout.create( { }; _x -= gapX; } else { - _h = data.minContentHeight !== X.UI.Attr.AUTO ? data.minContentHeight : 0; + _h = data.minContentHeight !== XUI_Attr_AUTO ? data.minContentHeight : 0; }; if( detectionPhase ){ @@ -78,14 +78,16 @@ X.UI.Layout.Horizontal = X.UI.Layout.create( { data.postMesure(); }; - !isNeedsDetection && data.updateLayout( x + data.boxX, y + data.boxY ); - + if( !isNeedsDetection ){ + data.boxX += x; + data.boxY += y; + }; return !ret; } }); X.UI.HBox = X.UI.Box.presets( - X.UI.Layout.Horizontal, + XUI_Layout_Horizontal, 'HBox', { gapX : '0.2em' diff --git a/0.6.x/js/20_ui/13_TileBox.js b/0.6.x/js/20_ui/13_TileBox.js index 3856e9c..f0efbaa 100644 --- a/0.6.x/js/20_ui/13_TileBox.js +++ b/0.6.x/js/20_ui/13_TileBox.js @@ -1,15 +1,15 @@ -X.UI.Layout.Tile = X.UI.Layout.create( { +var XUI_Layout_Tile = X[ 'UI' ][ 'Layout' ][ 'Tile' ] = XUI_createLayout( { name : 'TileLayout', overrideAttrsForSelf : { selectable : false, - 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' ], - childWidth : [ '8em', X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH | X.UI.Attr.Type.PERCENT ], - childHeight : [ '8em', X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH | X.UI.Attr.Type.PERCENT ], - gapX : [ 0, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH ], - gapY : [ 0, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH ], - hCenter : [ true, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.BOOLEAN ], - vCenter : [ true, X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.BOOLEAN ] + role : [ 0, XUI_Dirty.CLEAN, XUI_Attr_USER.UINODE, XUI_Attr_Type.INIT_ONLY | XUI_Attr_Type.LIST, 'none,chrome,container' ], + childWidth : [ '8em', XUI_Dirty.LAYOUT, XUI_Attr_USER.LAYOUT, XUI_Attr_Type.LENGTH | XUI_Attr_Type.PERCENT ], + childHeight : [ '8em', XUI_Dirty.LAYOUT, XUI_Attr_USER.LAYOUT, XUI_Attr_Type.LENGTH | XUI_Attr_Type.PERCENT ], + gapX : [ 0, XUI_Dirty.LAYOUT, XUI_Attr_USER.LAYOUT, XUI_Attr_Type.LENGTH ], + gapY : [ 0, XUI_Dirty.LAYOUT, XUI_Attr_USER.LAYOUT, XUI_Attr_Type.LENGTH ], + hCenter : [ true, XUI_Dirty.LAYOUT, XUI_Attr_USER.LAYOUT, XUI_Attr_Type.BOOLEAN ], + vCenter : [ true, XUI_Dirty.LAYOUT, XUI_Attr_USER.LAYOUT, XUI_Attr_Type.BOOLEAN ] }, overrideAttrsForChild : { @@ -29,7 +29,7 @@ X.UI.Layout.Tile = X.UI.Layout.create( { data.preMesure( w, h ); - if( isNeedsDetection && ( data.boxWidth === X.UI.Attr.AUTO || data.boxHeight === X.UI.Attr.AUTO ) ) return; + if( isNeedsDetection && ( data.boxWidth === XUI_Attr_AUTO || data.boxHeight === XUI_Attr_AUTO ) ) return; if( ( uinodes = data.uinodes ) && ( l = uinodes.length ) ){ _x = data.contentL; @@ -39,8 +39,8 @@ X.UI.Layout.Tile = X.UI.Layout.create( { gapY = XUI_AbstractUINode_calcValue( attrs[ data.supportAttrs.gapY.No ], contentH ); childW = XUI_AbstractUINode_calcValue( attrs[ data.supportAttrs.childWidth.No ], contentW ); childH = XUI_AbstractUINode_calcValue( attrs[ data.supportAttrs.childHeight.No ], contentH ); - numH = X.UI.Attr.FLOOR( ( _w + gapX ) / ( childW + gapX ) ); - numV = l % numH ? X.UI.Attr.FLOOR( l / numH ) + 1 : l / numH; + numH = XUI_Attr_FLOOR( ( _w + gapX ) / ( childW + gapX ) ); + numV = l % numH ? XUI_Attr_FLOOR( l / numH ) + 1 : l / numH; _h = _y + data.contentB + ( childH + gapY ) * numH - gapY; startX = attrs[ data.supportAttrs.hCenter.No ] ? @@ -64,18 +64,23 @@ X.UI.Layout.Tile = X.UI.Layout.create( { data.contentHeight = _h; } else - if( data.contentHeight === X.UI.Attr.AUTO ){ - data.contentHeight = data.minContentHeight !== X.UI.Attr.AUTO ? data.minContentHeight : 0; + if( data.contentHeight === XUI_Attr_AUTO ){ + data.contentHeight = data.minContentHeight !== XUI_Attr_AUTO ? data.minContentHeight : 0; }; data.postMesure(); - data.updateLayout( x + data.boxX, y + data.boxY ); + + if( !isNeedsDetection ){ + data.boxX += x; + data.boxY += y; + }; + return true; } }); X.UI.TileBox = X.UI.Box.presets( 'TileBox', - X.UI.Layout.Tile, + XUI_Layout_Tile, { gapX : '0.2em', gapY : '0.2em', diff --git a/0.6.x/js/20_ui/14_ChromeBox.js b/0.6.x/js/20_ui/14_ChromeBox.js index ed1cd7e..5935ebd 100644 --- a/0.6.x/js/20_ui/14_ChromeBox.js +++ b/0.6.x/js/20_ui/14_ChromeBox.js @@ -1,6 +1,6 @@ -X.UI._ChromeBox = X.UI._Box.inherits( +var XUI_ChromeBox = XUI_Box.inherits( '_ChromeBox', - X_Class.PRIVATE_DATA | X_Class.SUPER_ACCESS, + X_Class.PRIVATE_DATA, { chromeNodes : null, containerNode : null, @@ -46,11 +46,11 @@ X.UI._ChromeBox = X.UI._Box.inherits( X.UI.ChromeBox = X.UI.Box.inherits( 'ChromeBox', - X_Class.SUPER_ACCESS, - X.UI._ChromeBox, + X_Class.NONE, + XUI_ChromeBox, { Constructor : function(){ - X_Class_newPrivate( this, X.UI.Layout.Canvas, arguments ); + X_Class_newPrivate( this, XUI_Layout_Canvas, arguments ); }, add : function( node /* , node, node ... */ ){ X_Class_getPrivate( this ).containerNode.addAt( this.numNodes(), Array.prototype.slice.call( arguments ) ); diff --git a/0.6.x/js/20_ui/15_ScrollBox.js b/0.6.x/js/20_ui/15_ScrollBox.js index 81c1958..15a613f 100644 --- a/0.6.x/js/20_ui/15_ScrollBox.js +++ b/0.6.x/js/20_ui/15_ScrollBox.js @@ -30,27 +30,23 @@ function X_UI_ScrollBox_momentum( current, start, time, lowerMargin, wrapperSize var X_UI_ScrollBox_SUPPORT_ATTRS = { // スクロール開始するために必要な移動距離、縦か横、どちらか制限する場合、より重要 - directionLockThreshold : [ 10, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.LENGTH ], - scrollXEnabled : [ true, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.BOOLEAN ], - scrollYEnabled : [ true, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.BOOLEAN ], - scrollEnabled : [ true, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.BOOLEAN ], - bounceEnabled : [ true, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.BOOLEAN ], - bounceTime : [ 600, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.TIME ], - useWheel : [ true, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.BOOLEAN ], - useKey : [ true, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.BOOLEAN ], - hasScrollShadow : [ true, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.BOOLEAN ], - scrollShadowColor : [ '#000', X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.COLOR ] + directionLockThreshold : [ 10, XUI_Dirty.CLEAN, XUI_Attr_USER.UINODE, XUI_Attr_Type.LENGTH ], + scrollXEnabled : [ true, XUI_Dirty.CLEAN, XUI_Attr_USER.UINODE, XUI_Attr_Type.BOOLEAN ], + scrollYEnabled : [ true, XUI_Dirty.CLEAN, XUI_Attr_USER.UINODE, XUI_Attr_Type.BOOLEAN ], + scrollEnabled : [ true, XUI_Dirty.CLEAN, XUI_Attr_USER.UINODE, XUI_Attr_Type.BOOLEAN ], + bounceEnabled : [ true, XUI_Dirty.CLEAN, XUI_Attr_USER.UINODE, XUI_Attr_Type.BOOLEAN ], + bounceTime : [ 600, XUI_Dirty.CLEAN, XUI_Attr_USER.UINODE, XUI_Attr_Type.TIME ], + useWheel : [ true, XUI_Dirty.CLEAN, XUI_Attr_USER.UINODE, XUI_Attr_Type.BOOLEAN ], + useKey : [ true, XUI_Dirty.CLEAN, XUI_Attr_USER.UINODE, XUI_Attr_Type.BOOLEAN ], + hasScrollShadow : [ true, XUI_Dirty.CLEAN, XUI_Attr_USER.UINODE, XUI_Attr_Type.BOOLEAN ], + scrollShadowColor : [ '#000', XUI_Dirty.CLEAN, XUI_Attr_USER.UINODE, XUI_Attr_Type.COLOR ] }; -X.UI._ScrollBox = X.UI._ChromeBox.inherits( +var XUI_ScrollBox = XUI_ChromeBox.inherits( '_ScrollBox', - X_Class.PRIVATE_DATA | X_Class.SUPER_ACCESS, + X_Class.PRIVATE_DATA, { - //elmScroll : null, - //elmScroller : null, - //elmScrollbar : null, - directionLockThreshold : 10, scrollXEnabled : true, scrollYEnabled : true, @@ -63,7 +59,7 @@ X.UI._ScrollBox = X.UI._ChromeBox.inherits( hasScrollShadow : true, scrollShadowColor : '#000', - supportAttrs : XUI_Attr_createAttrDef( X.UI.Attr.Support, X_UI_ScrollBox_SUPPORT_ATTRS ), + supportAttrs : XUI_Attr_createAttrDef( XUI_Attr_Support, X_UI_ScrollBox_SUPPORT_ATTRS ), scrolling : false, @@ -86,8 +82,10 @@ X.UI._ScrollBox = X.UI._ChromeBox.inherits( scrollX : 0, // px scrollY : 0, // px - maxScrollX : 0, // px - maxScrollY : 0, // px + scrollXMax : 0, // px + scrollYMax : 0, // px + scrollXRatio : 0, // この値は scroll 不要になっても保持される。 scroll 必要時に参照される + scrollYRatio : 0, startX : 0, // px startY : 0, // px absStartX : 0, // px @@ -96,29 +94,26 @@ X.UI._ScrollBox = X.UI._ChromeBox.inherits( pointY : 0, // px distX : 0, // px distY : 0, // px - directionX : 0, // px - directionY : 0, // px - scrollXPercent : 0, // この値は scroll 不要になっても保持される。 scroll 必要時に参照される - scrollYPercent : 0, + directionX : 0, // -1, 0, 1 + directionY : 0, // -1, 0, 1 lastScrollWidth : 0, lastScrollHeight : 0, lastBoxWidth : 0, lastBoxHeight : 0, - _containerNode : null, - scrollManager : null, + _containerNode : null, + xnodeSlider : null, Constructor : function( layout, args ){ this[ 'Super' ]( layout, args ); this._containerNode = X_Class_getPrivate( this.containerNode ); - this._containerXNode = this._containerNode.xnode[ 'className' ]( 'ScrollSlider' ).listen( X_EVENT_ANIME_END, this, X_UI_ScrollBox_onAnimeEnd ); + this.xnodeSlider = this._containerNode.xnode[ 'className' ]( 'ScrollSlider' ).listen( X_EVENT_ANIME_END, this, X_UI_ScrollBox_onAnimeEnd ); this.xnode[ 'className' ]( 'ScrollBox' ); }, creationComplete : function(){ - X.UI._Box.prototype.creationComplete.apply( this, arguments ); - this.scrollManager; + XUI_Box.prototype.creationComplete.apply( this, arguments ); }, calculate : function(){ @@ -127,7 +122,7 @@ X.UI._ScrollBox = X.UI._ChromeBox.inherits( this.lastBoxWidth = this.boxWidth; this.lastBoxHeight = this.boxHeight; - X.UI._Box.prototype.calculate.apply( this, arguments ); + XUI_Box.prototype.calculate.apply( this, arguments ); // TODO root の layout_complete 後に。 // TODO calculate 前に scroll の解放。 @@ -137,7 +132,7 @@ X.UI._ScrollBox = X.UI._ChromeBox.inherits( this.lastScrollHeight !== this._containerNode.boxHeight || this.lastBoxWidth !== this.boxWidth || this.lastBoxHeight !== this.boxHeight ){ - X_UI_rootData[ 'listenOnce' ]( X.UI.Event.LAYOUT_COMPLETE, this, X_UI_ScrollBox_onLayoutComplete ); + X_UI_rootData[ 'listenOnce' ]( XUI_Event.LAYOUT_COMPLETE, this, X_UI_ScrollBox_onLayoutComplete ); }; }, @@ -154,7 +149,7 @@ X.UI._ScrollBox = X.UI._ChromeBox.inherits( }, _remove : function(){ - X.UI._AbstractUINode.prototype._remove.apply( this, arguments ); + XUI_AbstractUINode.prototype._remove.apply( this, arguments ); if( this.scrolling ){ // remove scroll }; @@ -164,26 +159,28 @@ X.UI._ScrollBox = X.UI._ChromeBox.inherits( ); function X_UI_ScrollBox_onLayoutBefore( e ){ - //this._containerXNode.stop(); + this.scrollXRatio = this.scrollX ? this.scrollXMax / this.scrollX : 0; + this.scrollYRatio = this.scrollY ? this.scrollYMax / this.scrollY : 0; + this.xnodeSlider.stop(); }; function X_UI_ScrollBox_onLayoutComplete( e ){ // scroll の停止、GPU の解除 - var font = this.fontSize = this._containerXNode.call( 'fontSize' ); + var font = this.fontSize = this.xnodeSlider.call( 'fontSize' ); - this.maxScrollX = ( this.boxWidth - this._containerNode.boxWidth ) * font; - this.maxScrollY = ( this.boxHeight - this._containerNode.boxHeight ) * font; + this.scrollXMax = ( this.boxWidth - this._containerNode.boxWidth ) * font; + this.scrollYMax = ( this.boxHeight - this._containerNode.boxHeight ) * font; - this.hasHScroll = this.scrollXEnabled && this.maxScrollX < 0; - this.hasVScroll = this.scrollYEnabled && this.maxScrollY < 0; + this.hasHScroll = this.scrollXEnabled && this.scrollXMax < 0; + this.hasVScroll = this.scrollYEnabled && this.scrollYMax < 0; if( !this.hasHScroll ){ - this.maxScrollX = 0; + this.scrollXMax = 0; //this.scrollWidth = this.boxWidth; }; if( !this.hasVScroll ){ - this.maxScrollY = 0; + this.scrollYMax = 0; //this.scrollHeight = this.boxHeight; }; @@ -200,25 +197,27 @@ function X_UI_ScrollBox_onLayoutComplete( e ){ if( this.hasHScroll || this.hasVScroll ){ // scroll が必要。 if( this.scrolling ){ - this.scrollTo( this.maxScrollX * this.scrollXPercent, this.maxScrollY * this.scrollYPercent, 100 ); + X_UI_ScrollBox_translate( this, this.scrollXMax * this.scrollXRatio, this.scrollYMax * this.scrollYRatio, 0, '', 0 ); } else { // scroller 作る - this[ 'listen' ]( X.UI.Event._POINTER_DOWN, this, X_UI_ScrollBox_onStart ); - X_UI_rootData[ 'listen' ]( X.UI.Event.LAYOUT_BEFORE, this, X_UI_ScrollBox_onLayoutBefore ); + this[ 'listen' ]( XUI_Event._POINTER_DOWN, this, X_UI_ScrollBox_onStart ); + X_UI_rootData[ 'listen' ]( XUI_Event.LAYOUT_BEFORE, this, X_UI_ScrollBox_onLayoutBefore ); - this.scrollTo( this.maxScrollX * this.scrollXPercent, this.maxScrollY * this.scrollYPercent ); + X_UI_ScrollBox_translate( this, this.scrollXMax * this.scrollXRatio, this.scrollYMax * this.scrollYRatio, 0, '', 0 ); this.scrolling = true; }; } else // scroll 不要 if( this.scrolling ){ // scroller 削除 - this[ 'unlisten' ]( X.UI.Event._POINTER_DOWN, this, X_UI_ScrollBox_onStart ); - X_UI_rootData[ 'unlisten' ]( X.UI.Event.LAYOUT_BEFORE, this, X_UI_ScrollBox_onLayoutBefore ); + this[ 'unlisten' ]( XUI_Event._POINTER_DOWN, this, X_UI_ScrollBox_onStart ); + X_UI_rootData[ 'unlisten' ]( XUI_Event.LAYOUT_BEFORE, this, X_UI_ScrollBox_onLayoutBefore ); - ( this.scrollX !== 0 || this.scrollY !== 0 ) && this.scrollTo( 0, 0 ); + ( this.scrollX !== 0 || this.scrollY !== 0 ) && X_UI_ScrollBox_translate( this, 0, 0, 0, '', 0 ); delete this.scrolling; + delete this.scrollXRatio; + delete this.scrollYRatio; }; }; @@ -228,7 +227,7 @@ function X_UI_ScrollBox_onLayoutComplete( e ){ opt_easing = opt_easing === '' ? '' : opt_easing || 'circular'; opt_release = 0 <= opt_release ? opt_release : 300; - that._containerXNode.animate( + that.xnodeSlider.animate( { x : that.scrollX, y : that.scrollY @@ -274,7 +273,7 @@ function X_UI_ScrollBox_onStart( e ){ // スクロール中の停止 if( this.isInTransition || this.isAnimating ){ this.isInTransition = this.isAnimating = false; - this[ 'dispatch' ]( X.UI.Event.SCROLL_END ); + this[ 'dispatch' ]( XUI_Event.SCROLL_END ); }; this.startX = this.scrollX; @@ -284,8 +283,8 @@ function X_UI_ScrollBox_onStart( e ){ this.pointX = e.pageX; this.pointY = e.pageY; - this[ 'listen' ]( X.UI.Event._POINTER_MOVE, this, X_UI_ScrollBox_onMove ); - this[ 'listen' ]( [ X.UI.Event._POINTER_UP, X.UI.Event._POINTER_CANCEL ], this, X_UI_ScrollBox_onEnd ); + this[ 'listen' ]( XUI_Event._POINTER_MOVE, this, X_UI_ScrollBox_onMove ); + this[ 'listen' ]( [ XUI_Event._POINTER_UP, XUI_Event._POINTER_CANCEL ], this, X_UI_ScrollBox_onEnd ); return ret | X_Callback_PREVENT_DEFAULT; }; @@ -306,7 +305,7 @@ function X_UI_ScrollBox_onMove( e ){ }; // gpu の用意 - if( !this._containerXNode[ '_anime' ] ){ + if( !this.xnodeSlider[ '_anime' ] ){ //console.log( 'gpuレイヤーの用意 ' + e.pageY ); //console.log( 'mov1 x:' + this.scrollX + ' y:' + this.scrollY ); X_UI_ScrollBox_translate( this, this.scrollX, this.scrollY, 0, '', 300 ); @@ -353,25 +352,25 @@ function X_UI_ScrollBox_onMove( e ){ deltaY = this.hasVScroll ? deltaY : 0; if( !this.moved ){ - this[ 'dispatch' ]( X.UI.Event.SCROLL_BEFORE_MOVE ); + this[ 'dispatch' ]( XUI_Event.SCROLL_BEFORE_MOVE ); this.moved = true; this.minusX = deltaX; this.minusY = deltaY; } else { - this[ 'dispatch' ]( X.UI.Event.SCROLL_MOVE ); + this[ 'dispatch' ]( XUI_Event.SCROLL_MOVE ); }; newX = this.scrollX + deltaX;// - this.minusX; newY = this.scrollY + deltaY;// - this.minusY; // Slow down if outside of the boundaries - if( 0 < newX || newX < this.maxScrollX ){ - newX = this.bounceEnabled ? this.scrollX + ( deltaX ) / 3 : 0 < newX ? 0 : this.maxScrollX; + if( 0 < newX || newX < this.scrollXMax ){ + newX = this.bounceEnabled ? this.scrollX + ( deltaX ) / 3 : 0 < newX ? 0 : this.scrollXMax; }; - if( 0 < newY || newY < this.maxScrollY ){ - //console.log( 'slow... ' + newY + ' ' + this.maxScrollY ); - newY = this.bounceEnabled ? this.scrollY + ( deltaY ) / 3 : 0 < newY ? 0 : this.maxScrollY; + if( 0 < newY || newY < this.scrollYMax ){ + //console.log( 'slow... ' + newY + ' ' + this.scrollYMax ); + newY = this.bounceEnabled ? this.scrollY + ( deltaY ) / 3 : 0 < newY ? 0 : this.scrollYMax; }; this.directionX = 0 < deltaX ? -1 : deltaX < 0 ? 1 : 0; @@ -386,7 +385,7 @@ function X_UI_ScrollBox_onMove( e ){ this.startY = this.scrollY; }; // イベントの拘束 - return ret | X_Callback_PREVENT_DEFAULT | X_Callback_MONOPOLY; + return ret | X_Callback_PREVENT_DEFAULT | X_Callback_CAPTURE_POINTER; }; function X_UI_ScrollBox_onEnd( e ){ @@ -397,8 +396,8 @@ function X_UI_ScrollBox_onEnd( e ){ momentumX, momentumY, duration, distanceX, distanceY; - this[ 'unlisten' ]( X.UI.Event._POINTER_MOVE, this, X_UI_ScrollBox_onMove ); - this[ 'unlisten' ]( [ X.UI.Event._POINTER_UP, X.UI.Event._POINTER_CANCEL ], this, X_UI_ScrollBox_onEnd ); + this[ 'unlisten' ]( XUI_Event._POINTER_MOVE, this, X_UI_ScrollBox_onMove ); + this[ 'unlisten' ]( [ XUI_Event._POINTER_UP, XUI_Event._POINTER_CANCEL ], this, X_UI_ScrollBox_onEnd ); if( !this.scrollEnabled || e.pointerType !== this.initiated ){ return ret; @@ -429,10 +428,10 @@ function X_UI_ScrollBox_onEnd( e ){ // start momentum animation if needed if( this.momentumEnabled && duration < 300 ){ momentumX = this.hasHScroll ? - X_UI_ScrollBox_momentum( this.scrollX, this.startX, duration, this.maxScrollX, this.bounceEnabled ? this.boxWidth * this.fontSize : 0, this.deceleration ) : + X_UI_ScrollBox_momentum( this.scrollX, this.startX, duration, this.scrollXMax, this.bounceEnabled ? this.boxWidth * this.fontSize : 0, this.deceleration ) : { destination: newX, duration: 0 }; momentumY = this.hasVScroll ? - X_UI_ScrollBox_momentum( this.scrollY, this.startY, duration, this.maxScrollY, this.bounceEnabled ? this.boxHeight * this.fontSize : 0, this.deceleration ) : + X_UI_ScrollBox_momentum( this.scrollY, this.startY, duration, this.scrollYMax, this.bounceEnabled ? this.boxHeight * this.fontSize : 0, this.deceleration ) : { destination: newY, duration: 0 }; newX = momentumX.destination; newY = momentumY.destination; @@ -444,7 +443,7 @@ function X_UI_ScrollBox_onEnd( e ){ if( newX != this.scrollX || newY != this.scrollY ){ // change easing function when scroller goes out of the boundaries - if( 0 < newX || newX < this.maxScrollX || 0 < newY || newY < this.maxScrollY ){ + if( 0 < newX || newX < this.scrollXMax || 0 < newY || newY < this.scrollYMax ){ easing = 'quadratic'; }; @@ -456,7 +455,7 @@ function X_UI_ScrollBox_onEnd( e ){ console.log( 'end1 x:' + newX + ' y:' + newY ); this.scrollTo( newX, newY, 0, '', 1000 ); // ensures that the last position is rounded - this[ 'dispatch' ]( X.UI.Event.SCROLL_END ); + this[ 'dispatch' ]( XUI_Event.SCROLL_END ); return ret; }; @@ -470,19 +469,19 @@ function X_UI_ScrollBox_resetPosition( that, time ){ if( !that.hasHScroll || 0 < that.scrollX ){ x = 0; } else - if( that.scrollX < that.maxScrollX ){ - x = that.maxScrollX; + if( that.scrollX < that.scrollXMax ){ + x = that.scrollXMax; }; if( !that.hasVScroll || 0 < that.scrollY ){ y = 0; } else - if( that.scrollY < that.maxScrollY ){ - y = that.maxScrollY; + if( that.scrollY < that.scrollYMax ){ + y = that.scrollYMax; }; if( x === that.scrollX && y === that.scrollY ){ - console.log( 'no バウンド y:' + y + ' max:' + that.maxScrollY ); + console.log( 'no バウンド y:' + y + ' max:' + that.scrollYMax ); return false; }; @@ -494,24 +493,24 @@ function X_UI_ScrollBox_resetPosition( that, time ){ }; function X_UI_ScrollBox_onAnimeEnd( e ){ - if( e.target !== this._containerXNode || !this.isInTransition ){ + if( e.target !== this.xnodeSlider || !this.isInTransition ){ return X_Callback_NONE; }; if( !X_UI_ScrollBox_resetPosition( this, this.bounceTime ) ){ this.isInTransition = false; - this.dispatch( X.UI.Event.SCROLL_END ); + this.dispatch( XUI_Event.SCROLL_END ); }; return X_Callback_NONE; }; X.UI.ScrollBox = X.UI.ChromeBox.inherits( 'ScrollBox', - X_Class.SUPER_ACCESS, - X.UI._ScrollBox, + X_Class.NONE, + XUI_ScrollBox, { Constructor : function(){ var args = [ - 0, // layout + XUI_Layout_Vertical, { name : 'ScrollBox-Scroller', role : 'container', @@ -522,22 +521,24 @@ X.UI.ScrollBox = X.UI.ChromeBox.inherits( } ], i = arguments.length, - arg, layout; + arg, layout, attr; for( ; i; ){ arg = arguments[ --i ]; - if( arg[ 'instanceOf' ] && arg[ 'instanceOf' ]( X.UI.Layout.Base ) ){ + if( arg[ 'instanceOf' ] && arg[ 'instanceOf' ]( XUI_LayoutBase ) ){ layout = arg; - } else { + } else + if( arg[ 'instanceOf' ] && arg[ 'instanceOf' ]( X.UI.AbstractUINode ) ){ args[ args.length ] = arg; + } else + if( X_Type_isObject( arg ) ){ + attr = arg; }; }; - args[ 0 ] = X.UI.Layout.Vertical; - X_Class_newPrivate( this, - X.UI.Layout.Canvas, + XUI_Layout_Canvas, [ { width : '100%', @@ -546,6 +547,8 @@ X.UI.ScrollBox = X.UI.ChromeBox.inherits( X.UI.VBox.apply( 0, args ) ] ); + + attr && this.attr( attr ); }, scrollX : function(){ diff --git a/0.6.x/js/20_ui/17_Text.js b/0.6.x/js/20_ui/17_Text.js index ceb896c..86913ba 100644 --- a/0.6.x/js/20_ui/17_Text.js +++ b/0.6.x/js/20_ui/17_Text.js @@ -1,4 +1,4 @@ -X.UI._Text = X.UI._AbstractUINode.inherits( +var XUI_Text = XUI_AbstractUINode.inherits( '_Text', X_Class.PRIVATE_DATA, { @@ -13,7 +13,7 @@ X.UI._Text = X.UI._AbstractUINode.inherits( if( X_Type_isString( content ) && content ){ this.content = content; this.xnode[ 'text' ]( this.content ); - this.dirty = X.UI.Dirty.CONTENT; + this.dirty = XUI_Dirty.CONTENT; }; } } @@ -21,19 +21,19 @@ X.UI._Text = X.UI._AbstractUINode.inherits( X.UI.Text = X.UI.AbstractUINode.inherits( 'Text', - X_Class.SUPER_ACCESS, - X.UI._Text, + X_Class.NONE, + XUI_Text, { - Constructor : function( opt_content, opt_cssObj ){ + Constructor : function( opt_content, opt_attrObj ){ X_Class_newPrivate( this, opt_content ); - X_Type_isObject( opt_cssObj = opt_cssObj || opt_content ) && this[ 'attr' ]( opt_cssObj ); + X_Type_isObject( opt_attrObj = opt_attrObj || opt_content ) && this[ 'attr' ]( opt_attrObj ); }, content : function( v ){ var data = X_Class_getPrivate( this ); if( data.content !== v ){ data.xnode && data.xnode[ 'text' ]( v ); data.rootData.reserveCalc(); - if( data.dirty < X.UI.Dirty.CONTENT ) data.dirty = X.UI.Dirty.CONTENT; + if( data.dirty < XUI_Dirty.CONTENT ) data.dirty = XUI_Dirty.CONTENT; }; } } diff --git a/0.6.x/js/20_ui/20_PageRoot.js b/0.6.x/js/20_ui/20_PageRoot.js index 26ce539..ec3524c 100644 --- a/0.6.x/js/20_ui/20_PageRoot.js +++ b/0.6.x/js/20_ui/20_PageRoot.js @@ -5,7 +5,7 @@ function X_UI_eventRellay( e ){ var font = X_ViewPort_baseFontSize, x = e.clientX / font, y = e.clientY / font, - type = X.UI.Event.NameToID[ e.type ], + type = XUI_Event.NameToID[ e.type ], i = 0, data = X_UI_rootData, sysOnly = false, @@ -16,13 +16,13 @@ function X_UI_eventRellay( e ){ if( !data || X_UI_eventBusy ) return ret; data._eventBusy = true; - if( type !== '' + X.UI.Event._POINTER_MOVE ){ + if( type !== '' + XUI_Event._POINTER_MOVE ){ //console.log( e.type + ' ' + type + ' x:' + x + ', y:' + y ); }; e.type = type; - if( data && ( data = data.monopolyNodeData ) && ( ret = data[ 'dispatch' ]( e ) ) & X_Callback_MONOPOLY ){ + if( data && ( data = data.monopolyNodeData ) && ( ret = data[ 'dispatch' ]( e ) ) & X_Callback_CAPTURE_POINTER ){ X_UI_eventBusy = false; return ret | X_Callback_PREVENT_DEFAULT; }; @@ -36,7 +36,7 @@ function X_UI_eventRellay( e ){ while( data ){ _ret = data[ 'dispatch' ]( e, sysOnly ); ret |= _ret; - if( _ret & X_Callback_MONOPOLY || _ret & X_Callback_STOP_PROPAGATION || _ret & X_Callback_STOP_NOW ) break; // sysOnly = true; + if( _ret & X_Callback_CAPTURE_POINTER || _ret & X_Callback_STOP_PROPAGATION || _ret & X_Callback_STOP_NOW ) break; // sysOnly = true; data = data.parentData; }; @@ -47,14 +47,14 @@ function X_UI_eventRellay( e ){ }; if( parent !== X_UI_rootData ){ 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 + data[ '_listeners' ] && data[ '_listeners' ][ XUI_Event.POINTER_OUT ] && data[ 'dispatch' ]( e, XUI_Event.POINTER_OUT, false ); // new Event delete data.hovering; list.splice( i, 1 ); continue; }; 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[ '_listeners' ] && data[ '_listeners' ][ XUI_Event.POINTER_IN ] && data[ 'dispatch' ]( e, XUI_Event.POINTER_IN, true ); // new Event data.hovering = true; }; }; @@ -67,11 +67,11 @@ function X_UI_eventRellay( e ){ * 背景画像を読み終える onload で活動開始 */ -X.UI._PageRoot = X.UI._Box.inherits( +var XUI_PageRoot = XUI_Box.inherits( '_PageRoot', - X_Class.FINAL | X_Class.PRIVATE_DATA | X_Class.SUPER_ACCESS, + X_Class.FINAL | X_Class.PRIVATE_DATA, { - layout : X.UI.Layout.Canvas, + layout : XUI_Layout_Canvas, calcReserved : false, hoverList : null, @@ -114,11 +114,11 @@ X.UI._PageRoot = X.UI._Box.inherits( } ); // hover や rollover rollout のための move イベントの追加 - ( X.UA.IE < 9 ? X_ViewPort_document : X_ViewPort )[ 'listen' ]( 'pointermove', X_UI_eventRellay ); - if( counter[ X.UI.Event._POINTER_MOVE ] ){ - ++counter[ X.UI.Event._POINTER_MOVE ]; + ( X_UA[ 'IE' ] < 9 ? X_ViewPort_document : X_UA[ 'Opera' ] < 8 ? X_Node_body : X_ViewPort )[ 'listen' ]( 'pointermove', X_UI_eventRellay ); + if( counter[ XUI_Event._POINTER_MOVE ] ){ + ++counter[ XUI_Event._POINTER_MOVE ]; } else { - counter[ X.UI.Event._POINTER_MOVE ] = 1; + counter[ XUI_Event._POINTER_MOVE ] = 1; }; X_Timer_once( 0, this, this.afterAddToView ); @@ -147,11 +147,13 @@ X.UI._PageRoot = X.UI._Box.inherits( calculate : function( e ){ var size, font, w, h; - this[ 'dispatch' ]( X.UI.Event.LAYOUT_BEFORE ); + this[ 'dispatch' ]( XUI_Event.LAYOUT_BEFORE ); size = X[ 'ViewPort' ][ 'getSize' ](); font = X[ 'ViewPort' ][ 'getBaseFontSize' ](); this.layout.calculate( this, false, 0, 0, size[ 0 ] / font, size[ 1 ] / font ); + this.updateLayout(); + this.calcReserved = false; X_ViewPort[ 'listenOnce' ]( X_EVENT_AFTER_UPDATE, this, XUI_PageRoot_onViewUpdate ); @@ -169,12 +171,12 @@ X.UI._PageRoot = X.UI._Box.inherits( ); function XUI_PageRoot_onViewUpdate( e ){ - this[ 'dispatch' ]( X.UI.Event.LAYOUT_COMPLETE ); + this[ 'dispatch' ]( XUI_Event.LAYOUT_COMPLETE ); }; X.UI.PageRoot = X.UI.Box.presets( 'PageRoot', - X.UI._PageRoot, + XUI_PageRoot, { width : '100%', height : '100%' -- 2.11.0