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