From a39b7dc7bfb4f60a4b014b0f7cf376b6bbfe0e3b Mon Sep 17 00:00:00 2001 From: itozyun Date: Mon, 2 Nov 2015 11:41:31 +0900 Subject: [PATCH] Version 0.6.188, fix X.UI. --- 0.6.x/js/01_core/14_XEvent.js | 5 +++++ 0.6.x/js/01_core/15_XEventDispatcher.js | 2 +- 0.6.x/js/02_dom/03_XDomEvent.js | 8 +++++++- 0.6.x/js/02_dom/10_XNodeAnime.js | 22 +++++++++------------- 0.6.x/js/20_ui/08_Box.js | 26 +++++++++++--------------- 0.6.x/js/20_ui/15_ScrollBox.js | 28 +++++++++++++++++++--------- 0.6.x/js/20_ui/20_Root.js | 26 +++++++++++++++++++++----- 7 files changed, 73 insertions(+), 44 deletions(-) diff --git a/0.6.x/js/01_core/14_XEvent.js b/0.6.x/js/01_core/14_XEvent.js index 48f5b72..01ded21 100644 --- a/0.6.x/js/01_core/14_XEvent.js +++ b/0.6.x/js/01_core/14_XEvent.js @@ -34,6 +34,9 @@ var X_Event_Rename = {}, 'mouseup' : 'pointerup', 'touchmove' : 'pointermove', 'mousemove' : 'pointermove', + 'touchleave' : 'pointerleave', + 'mouseout' : 'pointerleave', + 'mouseleave' : 'pointerleave', 'touchcancel' : 'pointercancel', 'contextmenu' : 'contextmenu', 'dbclick' : 'dbclick', @@ -43,6 +46,8 @@ var X_Event_Rename = {}, 'mousedown' : 'pointerdown', 'mouseup' : 'pointerup', 'mousemove' : 'pointermove', + 'mouseout' : 'pointerleave', + 'mouseleave' : 'pointerleave', 'contextmenu' : 'contextmenu', 'dbclick' : 'dbclick', 'click' : 'click' diff --git a/0.6.x/js/01_core/15_XEventDispatcher.js b/0.6.x/js/01_core/15_XEventDispatcher.js index 34a5933..4ae7f15 100644 --- a/0.6.x/js/01_core/15_XEventDispatcher.js +++ b/0.6.x/js/01_core/15_XEventDispatcher.js @@ -54,7 +54,7 @@ var X_EventDispatcher_once = false, // iOS と MacOSX Iron36 で発生。連続してアニメーションが起こると、クロージャの束縛された obj へのアクセスに失敗する。Win では起きない? // むしろ、MacOSX のブラウザ全般で起こる?? - X_EventDispatcher_ANIME_EVENTS = ( X_UA[ 'WebKit' ] || X_UA[ 'Blink' ] ) && { + X_EventDispatcher_ANIME_EVENTS = false && ( X_UA[ 'WebKit' ] || X_UA[ 'Blink' ] ) && { 'transitionend' : true, 'webkitTransitionEnd' : true, 'mozTransitionEnd' : true, 'oTransitionEnd' : true, 'otransitionEnd' : true, 'animationend' : true, 'webkitAnimationEnd' : true, 'oAnimationEnd' : true, 'animationstart' : true, 'webkitAnimationStart' : true, 'oAnimationStart' : true, diff --git a/0.6.x/js/02_dom/03_XDomEvent.js b/0.6.x/js/02_dom/03_XDomEvent.js index 5a8069f..70cffaa 100644 --- a/0.6.x/js/02_dom/03_XDomEvent.js +++ b/0.6.x/js/02_dom/03_XDomEvent.js @@ -443,6 +443,8 @@ if( !navigator.pointerEnabled ){ X_Event_Rename[ 'pointerup' ] = 'MSPointerUp'; X_Event_Rename[ 'pointermove' ] = [ 'MSPointerMove', 'MSPointerHover' ];// ie10 と ie11 でペンのhoverevent の値が異なる X_Event_Rename[ 'pointercancel' ] = 'MSPointerCancel'; + X_Event_Rename[ 'pointerout' ] = 'MSPointerOut'; + X_Event_Rename[ 'pointerleave' ] = 'MSPointerLeave'; // http://msdn.microsoft.com/ja-jp/library/ie/dn304886%28v=vs.85%29.aspx } else if( X_UA_HID.TOUCH ){ @@ -451,12 +453,16 @@ if( !navigator.pointerEnabled ){ X_Event_Rename[ 'pointerup' ] = [ 'touchend', 'mouseup' ]; X_Event_Rename[ 'pointermove' ] = [ 'touchmove', 'mousemove' ]; X_Event_Rename[ 'pointercancel' ] = 'touchcancel'; + X_Event_Rename[ 'pointerout' ] = + X_Event_Rename[ 'pointerleave' ] = 'touchleave'; // X_Event_Rename[ 'click' ] = [ 'touchstart', 'touchmove', 'touchend' ]; // ループになってしまう!直した!直ってない！ } else { X_Event_Rename[ 'pointerdown' ] = 'mousedown'; X_Event_Rename[ 'pointerup' ] = 'mouseup'; X_Event_Rename[ 'pointermove' ] = 'mousemove'; - X_Event_Rename[ 'pointercancel' ] = document.documentElement.onmouseleave !== undefined ? 'mouseleave' : 'mouseout';//?? + X_Event_Rename[ 'pointercancel' ] = + X_Event_Rename[ 'pointerleave' ] = + X_Event_Rename[ 'pointerleave' ] = document.documentElement.onmouseleave !== undefined ? 'mouseleave' : 'mouseout'; // Opera は ブラウザ設定から右クリックの通知を許可すると mousedown で e.button==2 が返る,ｷｬﾝｾﾙは可能?? X_UA[ 'Opera' ] && ( X_Event_Rename[ 'contextmenu' ] = 'mousedown' ); diff --git a/0.6.x/js/02_dom/10_XNodeAnime.js b/0.6.x/js/02_dom/10_XNodeAnime.js index 2d20bad..7064166 100644 --- a/0.6.x/js/02_dom/10_XNodeAnime.js +++ b/0.6.x/js/02_dom/10_XNodeAnime.js @@ -497,19 +497,16 @@ function X_Node_Anime_clearTransition( xnode ){ }; function X_Node_Anime_updatePosition( xnode, x, y, opacity, useGPU ){ - console.log( 'updatePosition x:' + x + ' gpu:' + !!useGPU ); + //console.log( 'updatePosition x:' + x + ' gpu:' + !!useGPU ); if( X_Node_Anime_hasTransform ){ xnode[ 'css' ]({ transform : 'translate(' + ( x | 0 ) + 'px,' + ( y | 0 ) + 'px)' + ( useGPU ? X_Node_Anime_translateZ : '' ), opacity : opacity }); } else { - x === x && xnode[ 'css' ]({ - left : ( x | 0 ) + 'px', - opacity : opacity }); - y === y && xnode[ 'css' ]({ - top : ( y | 0 ) + 'px', - opacity : opacity }); + x === x && xnode[ 'css' ]( 'left', ( x | 0 ) + 'px' ); + y === y && xnode[ 'css' ]( 'top', ( y | 0 ) + 'px' ); + opacity === opacity && xnode[ 'css' ]( 'opacity', opacity ); }; if( X_Node_Anime_translateZ ){ @@ -518,15 +515,14 @@ function X_Node_Anime_updatePosition( xnode, x, y, opacity, useGPU ){ xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU; xnode[ '_flags' ] |= X_NodeFlags_GPU_NOW; } else - if( xnode[ '_flags' ] & X_NodeFlags_GPU_NOW ){ - } else { + if( !( xnode[ '_flags' ] & X_NodeFlags_GPU_NOW ) ){ xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU; xnode[ '_flags' ] |= X_NodeFlags_GPU_RESERVED; }; } else { if( xnode[ '_flags' ] & X_NodeFlags_GPU_NOW ){ xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU; - xnode[ '_flags' ] |= X_NodeFlags_GPU_RELEASE_RESERVED; + xnode[ '_flags' ] |= X_NodeFlags_GPU_RELEASE_RESERVED; } else if( xnode[ '_flags' ] & X_NodeFlags_GPU_RESERVED ){ xnode[ '_flags' ] &= X_Node_BitMask_RESET_GPU; @@ -551,7 +547,7 @@ function X_Node_Anime_updateAnimationsNoTransition( e ){ delete xnode[ '_anime' ]; X_Node_ANIMATIONS.splice( i, 1 ); - + console.log( obj.destA ); // filter な 親が解除されないと子要素への filter が反映されない xnode[ 'asyncDispatch' ]( { type : X_EVENT_ANIME_END, 'gpu' : false } ); } else { @@ -563,11 +559,11 @@ function X_Node_Anime_updateAnimationsNoTransition( e ){ obj.x = newX; obj.y = newY; obj.a = newA; - c = true; + c = true; }; }; - c && console.log( 'anime... ' + X_Node_updateTimerID ); + //c && console.log( 'anime... ' + X_Node_updateTimerID ); if( X_Node_Anime_reserved = c ){ if( X_Node_updateTimerID ){ diff --git a/0.6.x/js/20_ui/08_Box.js b/0.6.x/js/20_ui/08_Box.js index 613400a..0aa07e1 100644 --- a/0.6.x/js/20_ui/08_Box.js +++ b/0.6.x/js/20_ui/08_Box.js @@ -123,12 +123,10 @@ var XUI_Box = XUI_AbstractUINode.inherits( /* Rellay */ initialize : function( root, rootData, parent, parentData ){ var uinodes = this.uinodes, - i = uinodes && uinodes.length; + l = uinodes && uinodes.length, i = 0; - if( i ){ - for( ; i; ){ - uinodes[ --i ].initialize( root, rootData, this.User, this ); - }; + for( ; i < l; ++i ){ + uinodes[ i ].initialize( root, rootData, this.User, this ); }; XUI_AbstractUINode.prototype.initialize.apply( this, arguments ); @@ -137,12 +135,10 @@ var XUI_Box = XUI_AbstractUINode.inherits( addToParent : function( parentXNode ){ var uinodes = this.uinodes, l = uinodes && uinodes.length, - i; + i = 0; - if( l ){ - for( i = 0; i < l; ++i ){ - uinodes[ i ].addToParent( this.xnode ); - }; + for( ; i < l; ++i ){ + uinodes[ i ].addToParent( this.xnode ); }; XUI_AbstractUINode.prototype.addToParent.apply( this, arguments ); @@ -151,11 +147,11 @@ var XUI_Box = XUI_AbstractUINode.inherits( /* Rellay */ creationComplete : function(){ var uinodes = this.uinodes, - i = uinodes && uinodes.length; - if( i ){ - for( ; i; ){ - uinodes[ --i ].creationComplete(); - }; + l = uinodes && uinodes.length, + i = 0; + + for( ; i < l; ++i ){ + uinodes[ i ].creationComplete(); }; XUI_AbstractUINode.prototype.creationComplete.apply( this, arguments ); diff --git a/0.6.x/js/20_ui/15_ScrollBox.js b/0.6.x/js/20_ui/15_ScrollBox.js index f2f6a27..2d160a1 100644 --- a/0.6.x/js/20_ui/15_ScrollBox.js +++ b/0.6.x/js/20_ui/15_ScrollBox.js @@ -42,6 +42,7 @@ function XUI_ScrollBox_indicatorHandleEvent( e ){ switch( e.type ){ case X_EVENT_CANCELED : case XUI_Event.SCROLL_END : + console.log( '-fadeout-' ); this[ 'animate' ]( { opacity : 1 }, { opacity : 0 }, @@ -347,7 +348,7 @@ function X_UI_ScrollBox_onStart( e ){ console.log( 'scrollstart ' + e.pageY ); 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 ); + this[ 'listen' ]( [ XUI_Event._POINTER_UP, XUI_Event.POINTER_OUT, XUI_Event._POINTER_CANCEL ], this, X_UI_ScrollBox_onEnd ); return ret | X_CALLBACK_PREVENT_DEFAULT; }; @@ -462,11 +463,14 @@ function X_UI_ScrollBox_onEnd( e ){ newX, newY, momentumX, momentumY, duration, distanceX, distanceY; - + + console.log( e.type + ' onend ' + XUI_Event.POINTER_OUT ); + 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 ); + this[ 'unlisten' ]( [ XUI_Event._POINTER_UP, XUI_Event.POINTER_OUT, XUI_Event._POINTER_CANCEL ], this, X_UI_ScrollBox_onEnd ); if( !this.scrollEnabled || e.pointerType !== this.initiated ){ + console.log( e.type + ' onend 1 ' + e.pointerType + ' ' + this.initiated ); return ret; }; @@ -482,6 +486,7 @@ function X_UI_ScrollBox_onEnd( e ){ // reset if we are outside of the boundaries if( X_UI_ScrollBox_resetPosition( this, this.bounceTime ) ){ + console.log( e.type + ' onend 2 ' + XUI_Event.POINTER_OUT ); return ret; }; @@ -514,7 +519,7 @@ function X_UI_ScrollBox_onEnd( e ){ easing = 'quadratic'; }; - console.log( 'end2 x:' + newX + ' y:' + newY + ' t:' + time ); + console.log( 'end2 x:' + newX + ' y:' + newY + '<-y:' + this.scrollY + ' t:' + time ); this.scrollTo( newX, newY, time, easing, 1000 ); } else { console.log( 'end1 x:' + newX + ' y:' + newY ); @@ -558,11 +563,16 @@ function X_UI_ScrollBox_resetPosition( that, time ){ }; function X_UI_ScrollBox_onAnimeEnd( e ){ + if( e.target !== this.xnodeSlider ){ + console.log( '- not much -' ); + console.dir(e); + }; if( e.target === this.xnodeSlider && this.isInTransition && !X_UI_ScrollBox_resetPosition( this, this.bounceTime ) ){ this.isInTransition = false; console.log( '-2-' ); this[ 'dispatch' ]( XUI_Event.SCROLL_END ); }; + console.log(' -2.1- '+this.isInTransition ); return X_CALLBACK_NONE; }; @@ -618,19 +628,19 @@ X.UI.ScrollBox = X.UI.ChromeBox.inherits( minHeight : '100%' } ], - i = arguments.length, + l = arguments.length, i = 0, j = 1, arg, attr; - for( ; i; ){ - arg = arguments[ --i ]; + for( ; i < l; ++i ){ + arg = arguments[ i ]; if( arg[ 'instanceOf' ] && arg[ 'instanceOf' ]( XUI_LayoutBase ) ){ args[ 0 ] = arg; } else if( arg[ 'instanceOf' ] && arg[ 'instanceOf' ]( X.UI.AbstractUINode ) ){ - args[ args.length ] = arg; + args[ ++j ] = arg; } else if( X_Type_isObject( arg ) ){ - args[ args.length ] = attr = arg; + args[ ++j ] = attr = arg; slider = attr.scrollSlider; }; }; diff --git a/0.6.x/js/20_ui/20_Root.js b/0.6.x/js/20_ui/20_Root.js index ae0cfba..6c2dd6b 100644 --- a/0.6.x/js/20_ui/20_Root.js +++ b/0.6.x/js/20_ui/20_Root.js @@ -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' ][ XUI_Event.POINTER_OUT ] && data[ 'dispatch' ]( e, XUI_Event.POINTER_OUT, false ); // new Event + data[ '_listeners' ] && data[ '_listeners' ][ XUI_Event.POINTER_OUT ] && data[ 'dispatch' ]( 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' ][ XUI_Event.POINTER_IN ] && data[ 'dispatch' ]( e, XUI_Event.POINTER_IN, true ); // new Event + data[ '_listeners' ] && data[ '_listeners' ][ XUI_Event.POINTER_IN ] && data[ 'dispatch' ]( XUI_Event.POINTER_IN, true ); // new Event data.hovering = true; }; }; @@ -62,6 +62,21 @@ function X_UI_eventRellay( e ){ return ret | X_CALLBACK_PREVENT_DEFAULT; }; +function X_UI_onMouseOut( e ){ + var list = X_UI_rootData.hoverList, + i = list.length; +console.log( e.type + i + ' ' + e.pointerType ) + for( ; i; ){ + data = list[ --i ]; + console.log( data.xnode.className() ); + data.hoverClassName && data.xnode[ 'removeClass' ]( data.hoverClassName ); + data[ '_listeners' ] && data[ '_listeners' ][ XUI_Event.POINTER_OUT ] && data[ 'dispatch' ]( + { type : XUI_Event.POINTER_OUT, pointerType : e.pointerType }, false ); // new Event + delete data.hovering; + }; + list.length = 0; +}; + /* * body が存在したら要素を作成、css も指定 * 背景画像を読み終える onload で活動開始 @@ -88,7 +103,7 @@ var XUI_Root = XUI_Box.inherits( if( X_ViewPort_readyState === X_EVENT_XDOM_READY ){ X_Timer_once( 0, this, this.start ); } else { - X.ViewPort[ 'listenOnce' ]( X_EVENT_XDOM_READY, this, this.start ); + X_ViewPort[ 'listenOnce' ]( X_EVENT_XDOM_READY, this, this.start ); }; this.hoverList = []; @@ -111,9 +126,10 @@ var XUI_Root = XUI_Box.inherits( this.xnodeInteractiveLayer = X.Doc.body.create( 'div', { 'class' : 'mouse-operation-catcher', unselectable : 'on' - } ); + } )[ 'listen' ]( 'pointerleave', this, X_UI_onMouseOut ); // hover や rollover rollout のための move イベントの追加 + // TODO この切り替えを ViewPort へ ( 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 ]; @@ -170,7 +186,7 @@ var XUI_Root = XUI_Box.inherits( function XUI_Root_do1stCalculate(){ this.calculate(); this.phase = 4; - X.ViewPort + X_ViewPort [ 'listen' ]( X_EVENT_VIEW_RESIZED, this, this.calculate ) [ 'listen' ]( X_EVENT_BASE_FONT_RESIZED, this, this.calculate ); }; -- 2.11.0