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

   1
   2 function eventRellay( e ){
   3         var x       = e.clientX / X.Dom.baseFontSize,
   4                 y       = e.clientY / X.Dom.baseFontSize,
   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._TOUCH_MOVE && type !== '' + X.UI.Event._MOUSE_MOVE ){
  12                 //console.log( e.type + ' ' + 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         ( X.UI.currentRootData.targetNodeData = X.UI.currentRootData ).capcher( x, y );
  23         data = X.UI.currentRootData.targetNodeData;
  24
  25         //data !== X.UI.currentRootData && console.log( data.xnode.text() );
  26
  27         while( data ){
  28                 _ret = data.dispatch( e, sysOnly );
  29                 ret |= _ret;
  30                 if( _ret & X.Callback.MONOPOLY || _ret & X.Callback.STOP_PROPAGATION || _ret & X.Callback.STOP_NOW ) break; // sysOnly = true;
  31                 data = data.parentData;
  32         };
  33
  34         for( i = list.length; i; ){
  35                 parent = data = list[ --i ];
  36                 while( parent.parentData && parent === parent.parentData.hitChildData ){
  37                         parent = parent.parentData;
  38                 };
  39                 if( parent !== X.UI.currentRootData ){
  40                         data.hoverClassName && data.xnode.removeClass( data.hoverClassName );
  41                         data._listeners && data._listeners[ X.UI.Event.POINTER_OUT ] && data.dispatch( e, X.UI.Event.POINTER_OUT, false ); // new Event
  42                         delete data.hovering;
  43                         list.splice( i, 1 );
  44                         continue;
  45                 };
  46                 if( !data.hovering ){
  47                         data.hoverClassName && data.xnode.addClassName( data.hoverClassName );
  48                         data._listeners && data._listeners[ X.UI.Event.POINTER_IN ] && data.dispatch( e, X.UI.Event.POINTER_IN, true ); // new Event
  49                         data.hovering = true;
  50                 };
  51         };
  52         return ret;
  53 };
  54
  55 /*
  56  * body が存在したら要素を作成、css も指定
  57  * 背景画像を読み終える onload で活動開始
  58  */
  59
  60 var _PageRoot = _Box.inherits(
  61         '_PageRoot',
  62         X.Class.FINAL | X.Class.PRIVATE_DATA | X.Class.SUPER_ACCESS,
  63         {
  64                 layout                : X.UI.Layout.Canvas,
  65
  66                 calcReserved          : false,
  67                 hoverList             : null,
  68                 targetNodeData        : null,
  69                 monopolyNodeData      : null,
  70
  71                 xnodeInteractiveLayer : null,
  72                 eventCounter          : null,
  73                 cursorStyle           : null,
  74
  75                 Constructor : function( layout, args ){
  76                         this.SuperConstructor( layout, args );
  77
  78                         if( X.Dom.readyState === X.Dom.Event.XDOM_READY ){
  79                                 X.Timer.once( 0, this, this.start );
  80                         } else {
  81                                 X.Dom.listenOnce( X.Dom.Event.XDOM_READY, this, this.start );
  82                         };
  83
  84                         this.hoverList    = [];
  85                         this.eventCounter = {};
  86
  87                         X.UI.currentRootData = this;
  88                 },
  89
  90                 start : function(){
  91                         this.initialize( this.User, this, null, null );
  92                         X.Timer.once( 0, this, this.addToView );
  93                 },
  94                 addToView : function(){
  95                         var     counter = this.eventCounter, flg;
  96
  97                         // this.xnodeInteractiveLayer の前に追加する！
  98
  99                         this.addToParent( X.Dom.Node.root );
 100
 101                         this.xnodeInteractiveLayer = X.Dom.Node.root.create( 'div', {
 102                                 'class'      : 'mouse-operation-catcher',
 103                                 unselectable : 'on'
 104                         } );
 105
 106                         // hover や rollover rollout のための move イベントの追加
 107                         // X.Dom.Event.activate, X.Dom.Event.deactivate ?
 108                         // mouseout, mouseover
 109                         if( navigator.msPointerEnabled || navigator.pointerEnabled ){
 110                                 this.xnodeInteractiveLayer.listen( X.UI.Event.IdToName[ X.UI.Event._POINTER_MOVE ], eventRellay );
 111                                 if( counter[ X.UI.Event._POINTER_MOVE ] ){
 112                                         ++counter[ X.UI.Event._POINTER_MOVE ];
 113                                 } else {
 114                                         counter[ X.UI.Event._POINTER_MOVE ] = 1;
 115                                 };
 116                         } else {
 117                                 this.xnodeInteractiveLayer.listen( X.UI.Event.IdToName[ X.UI.Event._MOUSE_MOVE ], eventRellay );
 118                                 if( counter[ X.UI.Event._MOUSE_MOVE ] ){
 119                                         ++counter[ X.UI.Event._MOUSE_MOVE ];
 120                                 } else {
 121                                         counter[ X.UI.Event._MOUSE_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.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