From 136b808d09fef278c92b1c1c2cecf67f1383314d Mon Sep 17 00:00:00 2001 From: itozyun Date: Mon, 20 Apr 2015 21:15:38 +0900 Subject: [PATCH] Version 0.6.142, fix X.UI.ScrollBox. --- 0.6.x/js/01_core/16_XViewPort.js | 2 +- 0.6.x/js/02_dom/10_XNodeAnime.js | 2 +- 0.6.x/js/20_ui/01_XUI_LayoutBase.js | 38 +++++++++++++++++++++++++++++++++++++ 0.6.x/js/20_ui/15_ScrollBox.js | 21 ++++++++++---------- 0.6.x/js/20_ui/20_PageRoot.js | 27 +++++++++++++++----------- 5 files changed, 67 insertions(+), 23 deletions(-) create mode 100644 0.6.x/js/20_ui/01_XUI_LayoutBase.js diff --git a/0.6.x/js/01_core/16_XViewPort.js b/0.6.x/js/01_core/16_XViewPort.js index 8207644..b970452 100644 --- a/0.6.x/js/01_core/16_XViewPort.js +++ b/0.6.x/js/01_core/16_XViewPort.js @@ -294,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 ).removeClass( 'js-disabled' ).addClass( X_UA_classNameForHTML ); + 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 ); diff --git a/0.6.x/js/02_dom/10_XNodeAnime.js b/0.6.x/js/02_dom/10_XNodeAnime.js index a7b8450..247fe48 100644 --- a/0.6.x/js/02_dom/10_XNodeAnime.js +++ b/0.6.x/js/02_dom/10_XNodeAnime.js @@ -183,7 +183,7 @@ function X_Node_Anime_reserveUpdate( before ){ }; function X_Node_Anime_updateAnimations( v, updateNow ){ - var i = X_Node_ANIMATIONS.length, ret, c = false; + var i = X_Node_ANIMATIONS.length, c = false, ret, xnode; // console.log( v.type || v ); diff --git a/0.6.x/js/20_ui/01_XUI_LayoutBase.js b/0.6.x/js/20_ui/01_XUI_LayoutBase.js new file mode 100644 index 0000000..3e537f4 --- /dev/null +++ b/0.6.x/js/20_ui/01_XUI_LayoutBase.js @@ -0,0 +1,38 @@ +var + +XUI_State = { + DEFAULT : 0, + HOVER : 1, + FOCUSED : 2, + DISABLED : 4, + CHECKED : 8, + FIRST_CHILD : 16, + LAST_CHILD : 32 +}, + +XUI_Dirty = { + CLEAN : 0, + PAINT : 1, // 再描画のみ必要 + LAYOUT : 2, // レイアウト（ボックスサイズ)の再計算が必要 + FONT : 3, // フォントサイズが変更された + CONTENT : 4 // コンテンツが変更された +}, + +XUI_currentRootData, + +XUI_LayoutBase = X_Class_create( + 'X.UI.Layout.Base', + { + overrideAttrsForSelf : null, + overrideAttrsForChild : null, + calculate : X_emptyFunction //function( data, isNeedsDetection, x, y, w, h ) + } + ); + +X[ 'UI' ][ 'Layout' ] = { + 'create' : XUI_createLayout +}; + +function XUI_createLayout( props ){ + return X_Class_override( new XUI_LayoutBase, props, true ); +} diff --git a/0.6.x/js/20_ui/15_ScrollBox.js b/0.6.x/js/20_ui/15_ScrollBox.js index 15a613f..43b57cf 100644 --- a/0.6.x/js/20_ui/15_ScrollBox.js +++ b/0.6.x/js/20_ui/15_ScrollBox.js @@ -42,7 +42,6 @@ var X_UI_ScrollBox_SUPPORT_ATTRS = { scrollShadowColor : [ '#000', XUI_Dirty.CLEAN, XUI_Attr_USER.UINODE, XUI_Attr_Type.COLOR ] }; - var XUI_ScrollBox = XUI_ChromeBox.inherits( '_ScrollBox', X_Class.PRIVATE_DATA, @@ -159,9 +158,15 @@ var XUI_ScrollBox = XUI_ChromeBox.inherits( ); function X_UI_ScrollBox_onLayoutBefore( e ){ + if( e[ 'cancelable' ] && this.isInTransition && X_Node_Anime_translateZ ){ + this[ 'listenOnce' ]( XUI_Event.SCROLL_END, X_UI_rootData, X_UI_rootData.calculate ); + return X_Callback_PREVENT_DEFAULT; + }; this.scrollXRatio = this.scrollX ? this.scrollXMax / this.scrollX : 0; this.scrollYRatio = this.scrollY ? this.scrollYMax / this.scrollY : 0; this.xnodeSlider.stop(); + this.isInTransition = false; + return X_Callback_NONE; }; function X_UI_ScrollBox_onLayoutComplete( e ){ @@ -176,34 +181,28 @@ function X_UI_ScrollBox_onLayoutComplete( e ){ if( !this.hasHScroll ){ this.scrollXMax = 0; - //this.scrollWidth = this.boxWidth; }; if( !this.hasVScroll ){ this.scrollYMax = 0; - //this.scrollHeight = this.boxHeight; }; delete this.endTime; delete this.directionX; delete this.directionY; - //this.wrapperOffset = this.xnodeWrapper[ 'offset' ](); - - //this[ 'dispatch' ]('refresh'); - X_UI_ScrollBox_resetPosition( this, 0 ); if( this.hasHScroll || this.hasVScroll ){ // scroll が必要。 if( this.scrolling ){ - X_UI_ScrollBox_translate( this, this.scrollXMax * this.scrollXRatio, this.scrollYMax * this.scrollYRatio, 0, '', 0 ); + X_UI_ScrollBox_translate( this, this.scrollXMax * this.scrollXRatio, this.scrollYMax * this.scrollYRatio, 100, '', 300 ); } else { // scroller 作る this[ 'listen' ]( XUI_Event._POINTER_DOWN, this, X_UI_ScrollBox_onStart ); X_UI_rootData[ 'listen' ]( XUI_Event.LAYOUT_BEFORE, this, X_UI_ScrollBox_onLayoutBefore ); - X_UI_ScrollBox_translate( this, this.scrollXMax * this.scrollXRatio, this.scrollYMax * this.scrollYRatio, 0, '', 0 ); + X_UI_ScrollBox_translate( this, this.scrollXMax * this.scrollXRatio, this.scrollYMax * this.scrollYRatio, 100, '', 300 ); this.scrolling = true; }; } else @@ -213,7 +212,7 @@ function X_UI_ScrollBox_onLayoutComplete( e ){ 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 ) && X_UI_ScrollBox_translate( this, 0, 0, 0, '', 0 ); + ( this.scrollX !== 0 || this.scrollY !== 0 ) && X_UI_ScrollBox_translate( this, 0, 0, 100, '', 300 ); delete this.scrolling; delete this.scrollXRatio; @@ -221,6 +220,7 @@ function X_UI_ScrollBox_onLayoutComplete( e ){ }; }; + // TODO use scrollLeft, scrollTop function X_UI_ScrollBox_translate( that, x, y, opt_time, opt_easing, opt_release ){ opt_time = 0 <= opt_time ? opt_time : 0; @@ -274,6 +274,7 @@ function X_UI_ScrollBox_onStart( e ){ if( this.isInTransition || this.isAnimating ){ this.isInTransition = this.isAnimating = false; this[ 'dispatch' ]( XUI_Event.SCROLL_END ); + this.xnodeSlider.stop(); }; this.startX = this.scrollX; diff --git a/0.6.x/js/20_ui/20_PageRoot.js b/0.6.x/js/20_ui/20_PageRoot.js index ec3524c..a73c3e6 100644 --- a/0.6.x/js/20_ui/20_PageRoot.js +++ b/0.6.x/js/20_ui/20_PageRoot.js @@ -127,15 +127,7 @@ var XUI_PageRoot = XUI_Box.inherits( this.xnode[ 'className' ]( 'PageRoot' ); this.creationComplete(); - X_Timer_once( 0, this, this.doFirstCalc ); - }, - - doFirstCalc : function(){ - this.calculate(); - this.phase = 4; - X.ViewPort - [ 'listen' ]( X_EVENT_VIEW_RESIZED, this, this.calculate ) - [ 'listen' ]( X_EVENT_BASE_FONT_RESIZED, this, this.calculate ); + X_Timer_once( 0, this, XUI_PageRoot_do1stCalculate ); }, reserveCalc : function(){ @@ -145,9 +137,12 @@ var XUI_PageRoot = XUI_Box.inherits( }; }, calculate : function( e ){ - var size, font, w, h; + var cancelable = !e || ( e.type !== X_EVENT_VIEW_RESIZED && e.type !== X_EVENT_BASE_FONT_RESIZED ), + size, font, w, h; - this[ 'dispatch' ]( XUI_Event.LAYOUT_BEFORE ); + if( this[ 'dispatch' ]( { type : XUI_Event.LAYOUT_BEFORE, 'cancelable' : cancelable } ) & X_Callback_PREVENT_DEFAULT && cancelable ){ + return X_Callback_NONE; + }; size = X[ 'ViewPort' ][ 'getSize' ](); font = X[ 'ViewPort' ][ 'getBaseFontSize' ](); @@ -157,6 +152,8 @@ var XUI_PageRoot = XUI_Box.inherits( this.calcReserved = false; X_ViewPort[ 'listenOnce' ]( X_EVENT_AFTER_UPDATE, this, XUI_PageRoot_onViewUpdate ); + + return X_Callback_NONE; }, updateCoursor : function( cursor ){ @@ -170,6 +167,14 @@ var XUI_PageRoot = XUI_Box.inherits( } ); +function XUI_PageRoot_do1stCalculate(){ + this.calculate(); + this.phase = 4; + X.ViewPort + [ 'listen' ]( X_EVENT_VIEW_RESIZED, this, this.calculate ) + [ 'listen' ]( X_EVENT_BASE_FONT_RESIZED, this, this.calculate ); +}; + function XUI_PageRoot_onViewUpdate( e ){ this[ 'dispatch' ]( XUI_Event.LAYOUT_COMPLETE ); }; -- 2.11.0