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

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