From d836e6243878426d4cfd7a14ceb9b77db9f92b57 Mon Sep 17 00:00:00 2001 From: itozyun Date: Sat, 18 Apr 2015 15:22:16 +0900 Subject: [PATCH] Version 0.6.140, fix size detection @IE. --- 0.6.x/css/xui.css | 34 ++++++++++++++++----- 0.6.x/js/02_dom/03_XDomEvent.js | 5 ++-- 0.6.x/js/20_ui/06_AbstractUINode.js | 59 +++++++++++++++++++------------------ 0.6.x/js/20_ui/15_ScrollBox.js | 16 ++++++---- 0.6.x/js/main.js | 3 +- 5 files changed, 70 insertions(+), 47 deletions(-) diff --git a/0.6.x/css/xui.css b/0.6.x/css/xui.css index 5ec74e3..2cec8d3 100644 --- a/0.6.x/css/xui.css +++ b/0.6.x/css/xui.css @@ -1,14 +1,30 @@ -html, body { - margin : 0; - padding : 0; - width : 100%; - height : 100%; - overflow : hidden; -} + + html { + font-size : 100%; /* 1 */ + -webkit-text-size-adjust : 100%; /* 2 */ + -moz-text-size-adjust : 100%; /* 2 */ + -ms-text-size-adjust : 100%; /* 2 */ + text-size-adjust : 100%; /* 2 */ + } + + + + html, + body { + width : 100%; + height : 100%; + overflow : hidden; + margin : 0; + padding : 0;/* opera 8 */ + border : 0; + } + + body { + font-size : 16px; /* px 指定しないと ie8- で要素のサイズが狂う */ + } .PageRoot { height : 100%; - position : relative; } .PageRoot, @@ -23,6 +39,8 @@ html, body { margin : 0; /* ブラウザのレイアウト機能による auto なサイズ指定は行わない */ overflow : hidden; + + /* border-box がデフォルト box-sizing : border-box; -o-box-sizing : border-box; diff --git a/0.6.x/js/02_dom/03_XDomEvent.js b/0.6.x/js/02_dom/03_XDomEvent.js index 6ba81c8..bcfe934 100644 --- a/0.6.x/js/02_dom/03_XDomEvent.js +++ b/0.6.x/js/02_dom/03_XDomEvent.js @@ -435,11 +435,10 @@ if( !navigator.pointerEnabled ){ X_Event_Rename[ 'pointerdown' ] = 'mousedown'; X_Event_Rename[ 'pointerup' ] = 'mouseup'; X_Event_Rename[ 'pointermove' ] = 'mousemove'; - X_Event_Rename[ 'pointercancel' ] = 'mouseleave';//?? + X_Event_Rename[ 'pointercancel' ] = document.documentElement.onmouseleave !== undefined ? 'mouseleave' : 'mouseout';//?? // Opera は ブラウザ設定から右クリックの通知を許可すると mousedown で e.button==2 が返る,ｷｬﾝｾﾙは可能?? - X_UA[ 'Opera' ] && ( - X_Event_Rename[ 'contextmenu' ] = 'mousedown' ); + X_UA[ 'Opera' ] && ( X_Event_Rename[ 'contextmenu' ] = 'mousedown' ); /* * buttons の無いブラウザには mouseup, mousedown を監視して、buttons フラグを更新し続ける diff --git a/0.6.x/js/20_ui/06_AbstractUINode.js b/0.6.x/js/20_ui/06_AbstractUINode.js index f649cd5..9004773 100644 --- a/0.6.x/js/20_ui/06_AbstractUINode.js +++ b/0.6.x/js/20_ui/06_AbstractUINode.js @@ -393,7 +393,7 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( 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 ); }; this.contentWidth = contentW + boxMinus; - this.scrollWidth = this.contentWidth + this.contentL + this.contentR; + //this.scrollWidth = this.contentWidth + this.contentL + this.contentR; this.boxWidth = contentW - boxMinus + this.contentL + this.contentR; this.boxSizingOffsetLR = boxMinus; delete this.minContentWidth; @@ -401,9 +401,9 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( delete this.minBoxWidth; delete this.maxBoxWidth; } else { - this.minContentWidth = XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.minWidth.No ], allowedW ) + boxMinus; - this.maxContentWidth = XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.maxWidth.No ], allowedW ) + boxMinus; - this.scrollWidth = this.contentWidth + this.contentL + this.contentR; + 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.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; //delete this.contentWidth; @@ -435,7 +435,7 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( 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 ); }; this.contentHeight = contentH + boxMinus; - this.scrollHeight = this.contentHeight + this.contentT + this.contentB; + //this.scrollHeight = this.contentHeight + this.contentT + this.contentB; this.boxHeight = contentH - boxMinus + this.contentT + this.contentB; // padding-box の場合 border だけ足される this.boxSizingOffsetTB = boxMinus; delete this.minContentHeight; @@ -443,8 +443,8 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( delete this.minBoxHeight; delete this.maxBoxHeight; } else { - this.minContentHeight = XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.minHeight.No ], allowedH ) + boxMinus; - this.maxContentHeight = XUI_AbstractUINode_calcValue( attrs[ X.UI.Attr.Support.maxHeight.No ], allowedH ) + boxMinus; + 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.minBoxHeight = this.minContentHeight - boxMinus + this.contentT + this.contentB; this.maxBoxHeight = this.maxContentHeight - boxMinus + this.contentT + this.contentB; @@ -529,58 +529,61 @@ X.UI._AbstractUINode = X_EventDispatcher[ 'inherits' ]( */ if( xnode[ '_xnodes' ] && xnode[ '_xnodes' ].length ){ if( w === X.UI.Attr.AUTO ){ - w = this.contentWidth = xnode[ 'css' ]( 'width', 'auto' )[ 'width' ]() / X_Node_CSS_getCharSize( xnode ); + 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; + //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; - w !== this.contentWidth && xnode[ 'css' ]( 'width', XUI_AbstractUINode_ceil( this.contentWidth ) + 'em' ); + w !== this.contentWidth && xnode[ 'css' ]( 'width', this.contentWidth + 'em' ); if( h === X.UI.Attr.AUTO ){ - this.contentHeight = h = xnode[ 'css' ]( 'height', 'auto' )[ 'scrollHeight' ]() / X_Node_CSS_getCharSize( xnode ); // scrollHeight() ?? - this.scrollHeight = h + this.contentT + this.contentB; + 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; + //this.scrollHeight = h + this.contentT + this.contentB; }; this.lastContentHeight = h; } else if( h === X.UI.Attr.AUTO ){ + console.log( 'chr ' + X_Node_CSS_getCharSize( xnode ) ); if( w !== this.lastContentWidth ){ - xnode[ 'css' ]( 'width', XUI_AbstractUINode_ceil( w ) + 'em' ); + xnode[ 'css' ]( 'width', w + 'em' ); this.lastContentWidth = w; - this.contentHeight = h = xnode[ 'css' ]( 'height', 'auto' )[ 'scrollHeight' ]() / X_Node_CSS_getCharSize( xnode ); - this.scrollWidth = w + this.contentL + this.contentR; - this.scrollHeight = h + this.contentT + this.contentB; + 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; } else { this.contentHeight = this.lastContentHeight = h = - this.lastContentHeight === -1 ? 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; + 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; }; } else if( dirty !== X.UI.Dirty.LAYOUT ){ - this.contentWidth = this.lastContentWidth = w; //xnode[ 'width' ](); - this.contentHeight = this.lastContentHeight = 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; + console.log( 'chr ' + X_Node_CSS_getCharSize( xnode ) ); + 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; + //this.scrollWidth = w + this.contentL + this.contentR; + //this.scrollHeight = h + this.contentT + this.contentB; }; } 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; + //this.scrollWidth = w + this.contentL + this.contentR; + //this.scrollHeight = h + this.contentT + this.contentB; }; delete this.dirty; diff --git a/0.6.x/js/20_ui/15_ScrollBox.js b/0.6.x/js/20_ui/15_ScrollBox.js index cd5e4f4..81c1958 100644 --- a/0.6.x/js/20_ui/15_ScrollBox.js +++ b/0.6.x/js/20_ui/15_ScrollBox.js @@ -171,8 +171,8 @@ function X_UI_ScrollBox_onLayoutComplete( e ){ // scroll の停止、GPU の解除 var font = this.fontSize = this._containerXNode.call( 'fontSize' ); - this.maxScrollX = ( this.boxWidth - this._containerNode.boxWidth ) * font | 0; - this.maxScrollY = ( this.boxHeight - this._containerNode.boxHeight ) * font | 0; + this.maxScrollX = ( this.boxWidth - this._containerNode.boxWidth ) * font; + this.maxScrollY = ( this.boxHeight - this._containerNode.boxHeight ) * font; this.hasHScroll = this.scrollXEnabled && this.maxScrollX < 0; this.hasVScroll = this.scrollYEnabled && this.maxScrollY < 0; @@ -234,14 +234,14 @@ function X_UI_ScrollBox_onLayoutComplete( e ){ y : that.scrollY }, { - x : x | 0, - y : y | 0 + x : x, + y : y }, opt_time, opt_easing, opt_release ); - that.scrollX = x | 0; - that.scrollY = y | 0; + that.scrollX = x; + that.scrollY = y; if( that.indicators ){ for( i = that.indicators.length; i--; ){ @@ -300,6 +300,10 @@ function X_UI_ScrollBox_onMove( e ){ if( !this.scrollEnabled || e.pointerType !== this.initiated ){ return ret; }; + + if( e.buttons !== 1 ){ + return X_UI_ScrollBox_onEnd.call( this, e ); + }; // gpu の用意 if( !this._containerXNode[ '_anime' ] ){ diff --git a/0.6.x/js/main.js b/0.6.x/js/main.js index 8017f28..73ef331 100644 --- a/0.6.x/js/main.js +++ b/0.6.x/js/main.js @@ -1,8 +1,7 @@ root = X.UI.PageRoot( X.UI.HBox( { - //width : '50%', - height : '50%', + width : '50%', bgColor : 0x44ffff }, X.UI.Text( 'HTML4', { width : 3 } ), -- 2.11.0