X-Git-Url: http://git.osdn.jp/view?a=blobdiff_plain;f=0.6.x%2Fjs%2F20_ui%2F20_PageRoot.js;h=e4d2ab4dd7dd960b455e9230b0ba7b6e4eca435c;hb=20c3a948b20e52efc28fd103fc075d787c6d65d2;hp=d8dbac28435a2f55e4fcba3b997e3748a6804ace;hpb=5f61a48d303bf9ca6bf021d8957aac743fc8958b;p=pettanr%2FclientJs.git diff --git a/0.6.x/js/20_ui/20_PageRoot.js b/0.6.x/js/20_ui/20_PageRoot.js index d8dbac2..e4d2ab4 100644 --- a/0.6.x/js/20_ui/20_PageRoot.js +++ b/0.6.x/js/20_ui/20_PageRoot.js @@ -1,39 +1,42 @@ +var X_UI_rootData = null, + X_UI_eventBusy = false; -X.UI._eventRellay = function( e ){ - var x = e.clientX / X.Dom.baseFontSize, - y = e.clientY / X.Dom.baseFontSize, - type = X.UI.Event.NameToID[ e.type ], +function X_UI_eventRellay( e ){ + var font = X_ViewPort_baseFontSize, + x = e.pageX / font, // clientX は iOS4- で通らない? + y = e.pageY / font, + type = XUI_Event.NameToID[ e.type ], i = 0, - data = X.UI.currentRootData, + data = X_UI_rootData, sysOnly = false, - ret = X.Callback.NONE, + ret = X_Callback_NONE, list, parent, _ret; // mouseup で alert を出すと mouseleave が発生、ということでイベント中のイベント発火を禁止 - if( !data || data._eventBusy ) return ret; + if( !data || X_UI_eventBusy ) return ret; data._eventBusy = true; - if( type !== '' + X.UI.Event._POINTER_MOVE && type !== '' + X.UI.Event._TOUCH_MOVE && type !== '' + X.UI.Event._MOUSE_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 ){ - delete X.UI.currentRootData._eventBusy; - return ret | X.Callback.PREVENT_DEFAULT; + if( data && ( data = data.monopolyNodeData ) && ( ret = data[ 'dispatch' ]( e ) ) & X_Callback_CAPTURE_POINTER ){ + X_UI_eventBusy = false; + return ret | X_Callback_PREVENT_DEFAULT; }; - list = X.UI.currentRootData.hoverList; - ( X.UI.currentRootData.targetNodeData = X.UI.currentRootData ).capcher( x, y ); - data = X.UI.currentRootData.targetNodeData; + list = X_UI_rootData.hoverList; + ( X_UI_rootData.targetNodeData = X_UI_rootData ).capcher( x, y ); + data = X_UI_rootData.targetNodeData; - //data !== X.UI.currentRootData && console.log( data.xnode.text() ); + //data !== X_UI_rootData && console.log( data.xnode[ 'text' ]() ); while( data ){ - _ret = data.dispatch( e, sysOnly ); + _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; }; @@ -42,21 +45,21 @@ X.UI._eventRellay = function( e ){ while( parent.parentData && parent === parent.parentData.hitChildData ){ parent = parent.parentData; }; - if( parent !== X.UI.currentRootData ){ - data.hoverClassName && data.xnode.removeClass( data.hoverClassName ); - data._listeners && data._listeners[ X.UI.Event.POINTER_OUT ] && data.dispatch( e, X.UI.Event.POINTER_OUT, false ); // new Event + 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 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; }; }; - delete X.UI.currentRootData._eventBusy; - return ret | X.Callback.PREVENT_DEFAULT; + X_UI_eventBusy = false; + return ret | X_Callback_PREVENT_DEFAULT; }; /* @@ -64,11 +67,11 @@ X.UI._eventRellay = function( 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, { - layout : X.UI.Layout.Canvas, + layout : XUI_Layout_Canvas, calcReserved : false, hoverList : null, @@ -79,93 +82,78 @@ X.UI._PageRoot = X.UI._Box.inherits( eventCounter : null, cursorStyle : null, - _eventBusy : false, - - Constructor : function( layout, args ){ - this.SuperConstructor( layout, args ); + Constructor : function( user, layout, args ){ + this[ 'Super' ]( user, layout, args ); - if( X.Dom.readyState === X.Dom.Event.XDOM_READY ){ - X.Timer.once( 0, this, this.start ); + if( X_ViewPort_readyState === X_EVENT_XDOM_READY ){ + X_Timer_once( 0, this, this.start ); } else { - X.Dom.listenOnce( X.Dom.Event.XDOM_READY, this, this.start ); + X.ViewPort[ 'listenOnce' ]( X_EVENT_XDOM_READY, this, this.start ); }; this.hoverList = []; this.eventCounter = {}; - X.UI.currentRootData = this; + X_UI_rootData = this; }, start : function(){ this.initialize( this.User, this, null, null ); - X.Timer.once( 0, this, this.addToView ); + X_Timer_once( 0, this, this.addToView ); }, addToView : function(){ var counter = this.eventCounter, flg; // this.xnodeInteractiveLayer の前に追加する! - this.addToParent( X.Dom.Node._body ); + this.addToParent( X.Doc.body ); - this.xnodeInteractiveLayer = X.Dom.Node._body.create( 'div', { + this.xnodeInteractiveLayer = X.Doc.body.create( 'div', { 'class' : 'mouse-operation-catcher', unselectable : 'on' } ); // hover や rollover rollout のための move イベントの追加 - // X.Dom.Event.activate, X.Dom.Event.deactivate ? - // mouseout, mouseover - //if( X_UA_HID.POINTER ){ - this.xnodeInteractiveLayer.listen( X.UI.Event.IdToName[ X.UI.Event._POINTER_MOVE ], X.UI._eventRellay ); - if( counter[ X.UI.Event._POINTER_MOVE ] ){ - ++counter[ X.UI.Event._POINTER_MOVE ]; - } else { - counter[ X.UI.Event._POINTER_MOVE ] = 1; - }; - /*} else { - this.xnodeInteractiveLayer.listen( X.UI.Event.IdToName[ X.UI.Event._MOUSE_MOVE ], X.UI._eventRellay ); - if( counter[ X.UI.Event._MOUSE_MOVE ] ){ - ++counter[ X.UI.Event._MOUSE_MOVE ]; - } else { - counter[ X.UI.Event._MOUSE_MOVE ] = 1; - }; - };*/ - X.Timer.once( 0, this, this.afterAddToView ); + ( 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[ XUI_Event._POINTER_MOVE ] = 1; + }; + + X_Timer_once( 0, this, this.afterAddToView ); }, afterAddToView : function(){ - this.xnode.className( 'PageRoot' ); + this.xnode[ 'className' ]( 'PageRoot' ); this.creationComplete(); - X.Timer.once( 0, this, this.doFirstCalc ); - }, - - doFirstCalc : function(){ - this.calculate(); - this.phase = 4; - X.Dom - .listen( X.Dom.Event.VIEW_RESIZED, this, this.calculate ) - .listen( X.Dom.Event.BASE_FONT_RESIZED, this, this.calculate ); + X_Timer_once( 0, this, XUI_PageRoot_do1stCalculate ); }, reserveCalc : function(){ if( this.calcReserved === false ){ this.calcReserved = true; - X.Timer.once( 0, this, this.calculate ); + X_Timer_once( 0, this, this.calculate ); }; }, calculate : function( e ){ - var font = X.Dom.baseFontSize, - size, w, h; - if( !e ){ - size = X.Dom.getSize(); - w = size[ 0 ]; - h = size[ 1 ]; - } else { - w = e.w; - h = e.h; + var cancelable = !e || ( e.type !== X_EVENT_VIEW_RESIZED && e.type !== X_EVENT_BASE_FONT_RESIZED ), + size, font, w, h; + + if( this[ 'dispatch' ]( { type : XUI_Event.LAYOUT_BEFORE, 'cancelable' : cancelable } ) & X_Callback_PREVENT_DEFAULT && cancelable ){ + return X_Callback_NONE; }; - this.layout.calculate( this, false, 0, 0, w / font, h / font ); + + 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 ); + + return X_Callback_NONE; }, updateCoursor : function( cursor ){ @@ -173,18 +161,53 @@ X.UI._PageRoot = X.UI._Box.inherits( }, _remove : function(){ - this.xnodeInteractiveLayer.unlisten(); + X_EventDispatcher_unlistenAll( this.xnodeInteractiveLayer ); _Box.prototype._remove.call( this ); } } ); +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 ); +}; + +//var XUI_PageRoot; +// TODO singleton +X.UI.PageRoot = X.UI.Box.inherits( + 'PageRoot', + X_Class.NONE, + { + Constructor : function(){ + var supports; + + //if( !XUI_PageRoot ){ + supports = XUI_Attr_createAttrDef( XUI_Box.prototype.usableAttrs, XUI_Layout_Canvas.overrideAttrsForSelf ); + + XUI_PageRoot.prototype.layout = XUI_Layout_Canvas; + XUI_PageRoot.prototype.usableAttrs = supports; + XUI_PageRoot.prototype.attrClass = XUI_Attr_preset( XUI_Box.prototype.attrClass, supports, { + width : '100%', + height : '100%' + } ); + //}; + X_Pair_create( this, XUI_PageRoot( this, XUI_Layout_Canvas, arguments ) ); + } + }); +/* X.UI.PageRoot = X.UI.Box.presets( 'PageRoot', - X.UI._PageRoot, + XUI_PageRoot, { width : '100%', height : '100%' } -); +);*/