0.6.x/js/20_ui/20_PageRoot.js

   1 var X_UI_rootData  = null,
   2         X_UI_eventBusy = false;
   3
   4 function X_UI_eventRellay( e ){
   5         var font    = X[ 'ViewPort' ][ 'getBaseFontSize' ](),
   6                 x       = e.clientX / font,
   7                 y       = e.clientY / font,
   8                 type    = X.UI.Event.NameToID[ e.type ],
   9                 i       = 0,
  10                 data    = X_UI_rootData,
  11                 sysOnly = false,
  12                 ret     = X_Callback_NONE,
  13                 list, parent, _ret;
  14
  15         // mouseup で　alert を出すと　mouseleave が発生、ということでイベント中のイベント発火を禁止
  16         if( !data || X_UI_eventBusy ) return ret;
  17         data._eventBusy = true;
  18
  19         if( type !== '' + X.UI.Event._POINTER_MOVE ){
  20                 //console.log( e.type + ' ' + type + ' x:' + x + ', y:' + y );
  21         };
  22
  23         e.type = type;
  24
  25         if( data && ( data = data.monopolyNodeData ) && ( ret = data[ 'dispatch' ]( e ) ) & X_Callback_MONOPOLY ){
  26                 X_UI_eventBusy = false;
  27                 return ret | X_Callback_PREVENT_DEFAULT;
  28         };
  29
  30         list = X_UI_rootData.hoverList;
  31         ( X_UI_rootData.targetNodeData = X_UI_rootData ).capcher( x, y );
  32         data = X_UI_rootData.targetNodeData;
  33
  34         //data !== X_UI_rootData && console.log( data.xnode[ 'text' ]() );
  35
  36         while( data ){
  37                 _ret = data[ 'dispatch' ]( e, sysOnly );
  38                 ret |= _ret;
  39                 if( _ret & X_Callback_MONOPOLY || _ret & X_Callback_STOP_PROPAGATION || _ret & X_Callback_STOP_NOW ) break; // sysOnly = true;
  40                 data = data.parentData;
  41         };
  42
  43         for( i = list.length; i; ){
  44                 parent = data = list[ --i ];
  45                 while( parent.parentData && parent === parent.parentData.hitChildData ){
  46                         parent = parent.parentData;
  47                 };
  48                 if( parent !== X_UI_rootData ){
  49                         data.hoverClassName && data.xnode[ 'removeClass' ]( data.hoverClassName );
  50                         data[ '_listeners' ] && data[ '_listeners' ][ X.UI.Event.POINTER_OUT ] && data[ 'dispatch' ]( e, X.UI.Event.POINTER_OUT, false ); // new Event
  51                         delete data.hovering;
  52                         list.splice( i, 1 );
  53                         continue;
  54                 };
  55                 if( !data.hovering ){
  56                         data.hoverClassName && data.xnode.addClassName( data.hoverClassName );
  57                         data[ '_listeners' ] && data[ '_listeners' ][ X.UI.Event.POINTER_IN ] && data[ 'dispatch' ]( e, X.UI.Event.POINTER_IN, true ); // new Event
  58                         data.hovering = true;
  59                 };
  60         };
  61         X_UI_eventBusy = false;
  62         return ret | X_Callback_PREVENT_DEFAULT;
  63 };
  64
  65 /*
  66  * body が存在したら要素を作成、css も指定
  67  * 背景画像を読み終える onload で活動開始
  68  */
  69
  70 X.UI._PageRoot = X.UI._Box.inherits(
  71         '_PageRoot',
  72         X_Class.FINAL | X_Class.PRIVATE_DATA | X_Class.SUPER_ACCESS,
  73         {
  74                 layout                : X.UI.Layout.Canvas,
  75
  76                 calcReserved          : false,
  77                 hoverList             : null,
  78                 targetNodeData        : null,
  79                 monopolyNodeData      : null,
  80
  81                 xnodeInteractiveLayer : null,
  82                 eventCounter          : null,
  83                 cursorStyle           : null,
  84
  85                 Constructor : function( layout, args ){
  86                         this[ 'Super' ]( layout, args );
  87
  88                         if( X_ViewPort_readyState === X_EVENT_XDOM_READY ){
  89                                 X_Timer_once( 0, this, this.start );
  90                         } else {
  91                                 X.ViewPort[ 'listenOnce' ]( X_EVENT_XDOM_READY, this, this.start );
  92                         };
  93
  94                         this.hoverList    = [];
  95                         this.eventCounter = {};
  96
  97                         X_UI_rootData = this;
  98                 },
  99
 100                 start : function(){
 101                         this.initialize( this.User, this, null, null );
 102                         X_Timer_once( 0, this, this.addToView );
 103                 },
 104                 addToView : function(){
 105                         var     counter = this.eventCounter, flg;
 106
 107                         // this.xnodeInteractiveLayer の前に追加する！
 108
 109                         this.addToParent( X.Doc.body );
 110
 111                         this.xnodeInteractiveLayer = X.Doc.body.create( 'div', {
 112                                 'class'      : 'mouse-operation-catcher',
 113                                 unselectable : 'on'
 114                         } );
 115
 116                         // hover や rollover rollout のための move イベントの追加
 117                         this.xnodeInteractiveLayer[ 'listen' ]( 'pointermove', X_UI_eventRellay );
 118                         if( counter[ X.UI.Event._POINTER_MOVE ] ){
 119                                 ++counter[ X.UI.Event._POINTER_MOVE ];
 120                         } else {
 121                                 counter[ X.UI.Event._POINTER_MOVE ] = 1;
 122                         };
 123
 124                         X_Timer_once( 0, this, this.afterAddToView );
 125                 },
 126                 afterAddToView : function(){
 127                         this.xnode[ 'className' ]( 'PageRoot' );
 128
 129                         this.creationComplete();
 130                         X_Timer_once( 0, this, this.doFirstCalc );
 131                 },
 132
 133                 doFirstCalc : function(){
 134                         this.calculate();
 135                         this.phase = 4;
 136                         X.ViewPort
 137                                 [ 'listen' ]( X_EVENT_VIEW_RESIZED, this, this.calculate )
 138                                 [ 'listen' ]( X_EVENT_BASE_FONT_RESIZED, this, this.calculate );
 139                 },
 140
 141                 reserveCalc : function(){
 142                         if( this.calcReserved === false ){
 143                                 this.calcReserved = true;
 144                                 X_Timer_once( 0, this, this.calculate );
 145                         };
 146                 },
 147                 calculate : function( e ){
 148                         var size, font, w, h;
 149
 150                         this[ 'dispatch' ]( X.UI.Event.LAYOUT_BEFORE );
 151
 152                         size = X[ 'ViewPort' ][ 'getSize' ]();
 153                         font = X[ 'ViewPort' ][ 'getBaseFontSize' ]();
 154                         this.layout.calculate( this, false, 0, 0, size[ 0 ] / font, size[ 1 ] / font );
 155                         this.calcReserved = false;
 156
 157                         X_ViewPort[ 'listenOnce' ]( X_EVENT_AFTER_UPDATE, this, XUI_PageRoot_onViewUpdate );
 158                 },
 159
 160                 updateCoursor : function( cursor ){
 161
 162                 },
 163
 164                 _remove : function(){
 165                         X_EventDispatcher_unlistenAll( this.xnodeInteractiveLayer );
 166                         _Box.prototype._remove.call( this );
 167                 }
 168         }
 169 );
 170
 171 function XUI_PageRoot_onViewUpdate( e ){
 172         this[ 'dispatch' ]( X.UI.Event.LAYOUT_COMPLETE );
 173 };
 174
 175 X.UI.PageRoot = X.UI.Box.presets(
 176         'PageRoot',
 177         X.UI._PageRoot,
 178         {
 179                 width  : '100%',
 180                 height : '100%'
 181         }
 182 );
 183