0.6.x/js/ui/20_PageRoot.js

   1
   2 function eventRellay( e ){
   3         var x       = e.clientX,
   4                 y       = e.clientY,
   5                 type    = X.UI.Event.NameToID[ e.type ],
   6                 i       = 0,
   7                 data    = X.UI.currentRootData,
   8                 sysOnly = false,
   9                 ret     = X.Callback.NONE,
  10                 list, parent, _ret;
  11         if( type !== X.UI.Event._POINTER_MOVE && type !== X.UI.Event._MOUSE_MOVE ){
  12                 //console.log( type + ' x:' + x + ', y:' + y )
  13         };
  14
  15         e.type = type;
  16
  17         if( data && ( data = data.monopolyNodeData ) && ( ret = data.dispatch( e ) ) & X.Callback.MONOPOLY ) return ret;
  18
  19         if( X.UI.currentRootData === null ) return ret;
  20
  21         list = X.UI.currentRootData.hoverList;
  22         data = X.UI.currentRootData.targetNodeData = X.UI.currentRootData;
  23         data.capcher( x, y );
  24         data = X.UI.currentRootData.targetNodeData;
  25
  26         while( data ){
  27                 _ret = data.dispatch( e, sysOnly );
  28                 ret |= _ret;
  29                 if( _ret & X.Callback.MONOPOLY || _ret & X.Callback.STOP_PROPAGATION || _ret & X.Callback.STOP_NOW ) break; // sysOnly = true;
  30                 data = data.parentData;
  31         };
  32
  33         for( i = list.length; i; ){
  34                 parent = data = list[ --i ];
  35                 while( parent.parentData && parent === parent.parentData.hitChildData ){
  36                         parent = parent.parentData;
  37                 };
  38                 if( parent !== X.UI.currentRootData ){
  39                         data.hoverClassName && data.xnode.removeClass( data.hoverClassName );
  40                         data._listeners && data._listeners[ X.UI.Event.POINTER_OUT ] && data.dispatch( e, X.UI.Event.POINTER_OUT, false ); // new Event
  41                         delete data.hovering;
  42                         list.splice( i, 1 );
  43                         continue;
  44                 };
  45                 if( !data.hovering ){
  46                         data.hoverClassName && data.xnode.addClassName( data.hoverClassName );
  47                         data._listeners && data._listeners[ X.UI.Event.POINTER_IN ] && data.dispatch( e, X.UI.Event.POINTER_IN, true ); // new Event
  48                         data.hovering = true;
  49                 };
  50         };
  51         return ret;
  52 };
  53
  54 /*
  55  * body が存在したら要素を作成、css も指定
  56  * 背景画像を読み終える onload で活動開始
  57  */
  58
  59 var _PageRoot = _Box.inherits(
  60         '_PageRoot',
  61         X.Class.FINAL | X.Class.PRIVATE_DATA | X.Class.SUPER_ACCESS,
  62         {
  63                 layout                : X.UI.Layout.Canvas,
  64
  65                 calcReserved          : false,
  66                 hoverList             : null,
  67                 targetNodeData        : null,
  68                 monopolyNodeData      : null,
  69
  70                 xnodeInteractiveLayer : null,
  71                 eventCounter          : null,
  72                 cursorStyle           : null,
  73
  74                 Constructor : function( layout, args ){
  75                         this.SuperConstructor( layout, args );
  76
  77                         if( X.Dom.readyState === X.Dom.Event.XDOM_READY ){
  78                                 X.Timer.once( 0, this, this.start );
  79                         } else {
  80                                 X.Dom.listenOnce( X.Dom.Event.XDOM_READY, this, this.start );
  81                         };
  82
  83                         this.hoverList    = [];
  84                         this.eventCounter = {};
  85
  86                         X.UI.currentRootData = this;
  87                 },
  88
  89                 start : function(){
  90                         this.initialize( this.User, this, null, null );
  91                         X.Timer.once( 0, this, this.addToView );
  92                 },
  93                 addToView : function(){
  94                         var     counter = this.eventCounter, flg;
  95
  96                         // this.xnodeInteractiveLayer の前に追加する！
  97
  98                         this.addToParent( X.Dom.Node.root );
  99
 100                         this.xnodeInteractiveLayer = X.Dom.Node.root.create( 'div', {
 101                                 'class'      : 'mouse-operation-catcher',
 102                                 unselectable : 'on'
 103                         } );
 104
 105                         // hover や rollover rollout のための move イベントの追加
 106                         // X.Dom.Event.activate, X.Dom.Event.deactivate ?
 107                         // mouseout, mouseover
 108                         if( navigator.msPointerEnabled || navigator.pointerEnabled ){
 109                                 this.xnodeInteractiveLayer.listen( X.UI.Event.IdToName[ X.UI.Event._POINTER_MOVE ], eventRellay );
 110                                 if( counter[ X.UI.Event._POINTER_MOVE ] ){
 111                                         ++counter[ X.UI.Event._POINTER_MOVE ];
 112                                 } else {
 113                                         counter[ X.UI.Event._POINTER_MOVE ] = 1;
 114                                 };
 115                         } else {
 116                                 this.xnodeInteractiveLayer.listen( X.UI.Event.IdToName[ X.UI.Event._MOUSE_MOVE ], eventRellay );
 117                                 if( counter[ X.UI.Event._MOUSE_MOVE ] ){
 118                                         ++counter[ X.UI.Event._MOUSE_MOVE ];
 119                                 } else {
 120                                         counter[ X.UI.Event._MOUSE_MOVE ] = 1;
 121                                 };
 122                         };
 123                         X.Timer.once( 0, this, this.afterAddToView );
 124                 },
 125                 afterAddToView : function(){
 126                         //this.afterAddition();
 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.Dom
 137                                 .listen( X.Dom.Event.VIEW_RESIZED, this, this.calculate )
 138                                 .listen( X.Dom.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 font = X.Dom.baseFontSize,
 149                                 size, w, h;
 150                         if( !e ){
 151                                 size = X.Dom.getSize();
 152                                 w    = size[ 0 ];
 153                                 h    = size[ 1 ];
 154                         } else {
 155                                 w = e.w;
 156                                 h = e.h;
 157                         };
 158                         this.layout.calculate( this, false, 0, 0, w / font, h / font );
 159                         this.calcReserved = false;
 160                 },
 161
 162                 updateCoursor : function( cursor ){
 163
 164                 },
 165
 166                 _remove : function(){
 167                         this.xnodeInteractiveLayer.unlisten();
 168                         _Box.prototype._remove.call( this );
 169                 }
 170         }
 171 );
 172
 173 var PageRoot = Box.presets(
 174         'PageRoot',
 175         _PageRoot, {
 176                 width  : '100%',
 177                 height : '100%'
 178         }
 179 );
 180