0.6.x/js/20_ui/20_Root.js

   1 var X_UI_rootData  = null,
   2         X_UI_eventBusy = false;
   3
   4 function X_UI_eventRellay( e ){
   5         var font    = X_ViewPort_baseFontSize,
   6                 x       = e.pageX / font, // clientX は iOS4- で通らない？
   7                 y       = e.pageY / font,
   8                 type    = XUI_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 !== '' + XUI_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_CAPTURE_POINTER ){
  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_CAPTURE_POINTER || _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' ][ XUI_Event.POINTER_OUT ] && data[ 'dispatch' ]( XUI_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' ][ XUI_Event.POINTER_IN ] && data[ 'dispatch' ]( XUI_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 function X_UI_onMouseOut( e ){
  66         var list = X_UI_rootData.hoverList,
  67                 i = list.length;
  68 console.log( e.type + i + ' ' + e.pointerType )
  69         for( ; i; ){
  70                 data = list[ --i ];
  71                 console.log( data.xnode.className() );
  72                 data.hoverClassName && data.xnode[ 'removeClass' ]( data.hoverClassName );
  73                 data[ '_listeners' ] && data[ '_listeners' ][ XUI_Event.POINTER_OUT ] && data[ 'dispatch' ](
  74                         { type : XUI_Event.POINTER_OUT, pointerType : e.pointerType }, false ); // new Event
  75                 delete data.hovering;
  76         };
  77         list.length = 0;
  78 };
  79
  80 /*
  81  * body が存在したら要素を作成、css も指定
  82  * 背景画像を読み終える onload で活動開始
  83  */
  84
  85 var XUI_Root = XUI_Box.inherits(
  86         '_Root',
  87         X_Class.FINAL,
  88         {
  89                 layout                : XUI_Layout_Canvas,
  90
  91                 calcReserved          : false,
  92                 hoverList             : null,
  93                 targetNodeData        : null,
  94                 monopolyNodeData      : null,
  95
  96                 xnodeInteractiveLayer : null,
  97                 eventCounter          : null,
  98                 cursorStyle           : null,
  99
 100                 Constructor : function( user, layout, args ){
 101                         this[ 'Super' ]( user, layout, args );
 102
 103                         if( X_ViewPort_readyState === X_EVENT_XDOM_READY ){
 104                                 X_Timer_once( 0, this, this.start );
 105                         } else {
 106                                 X_ViewPort[ 'listenOnce' ]( X_EVENT_XDOM_READY, this, this.start );
 107                         };
 108
 109                         this.hoverList    = [];
 110                         this.eventCounter = {};
 111
 112                         X_UI_rootData = this;
 113                 },
 114
 115                 start : function(){
 116                         this.initialize( this.User, this, null, null );
 117                         X_Timer_once( 0, this, this.addToView );
 118                 },
 119                 addToView : function(){
 120                         var     counter = this.eventCounter, flg;
 121
 122                         // this.xnodeInteractiveLayer の前に追加する！
 123
 124                         this.addToParent( X.Doc.body );
 125
 126                         this.xnodeInteractiveLayer = X.Doc.body.create( 'div', {
 127                                 'class'      : 'mouse-operation-catcher',
 128                                 unselectable : 'on'
 129                         } )[ 'listen' ]( 'pointerleave', this, X_UI_onMouseOut );
 130
 131                         // hover や rollover rollout のための move イベントの追加
 132                         // TODO この切り替えを ViewPort へ
 133                         ( X_UA[ 'IE' ] < 9 ? X_ViewPort_document : X_UA[ 'Opera' ] < 8 ? X_Node_body : X_ViewPort )[ 'listen' ]( 'pointermove', X_UI_eventRellay );
 134                         if( counter[ XUI_Event._POINTER_MOVE ] ){
 135                                 ++counter[ XUI_Event._POINTER_MOVE ];
 136                         } else {
 137                                 counter[ XUI_Event._POINTER_MOVE ] = 1;
 138                         };
 139
 140                         X_Timer_once( 0, this, this.afterAddToView );
 141                 },
 142                 afterAddToView : function(){
 143                         this.xnode[ 'className' ]( 'Root' );
 144
 145                         this.creationComplete();
 146                         X_Timer_once( 0, this, XUI_Root_do1stCalculate );
 147                 },
 148
 149                 reserveCalc : function(){
 150                         if( this.calcReserved === false ){
 151                                 this.calcReserved = true;
 152                                 X_Timer_once( 0, this, this.calculate );
 153                         };
 154                 },
 155                 calculate : function( e ){
 156                         var cancelable = !e || ( e.type !== X_EVENT_VIEW_RESIZED && e.type !== X_EVENT_BASE_FONT_RESIZED ),
 157                                 size, font, w, h;
 158
 159                         if( ( this[ 'dispatch' ]( { type : XUI_Event.LAYOUT_BEFORE, 'cancelable' : cancelable } ) & X_CALLBACK_PREVENT_DEFAULT ) && cancelable ){
 160                                 return X_CALLBACK_NONE;
 161                         };
 162
 163                         size = X[ 'ViewPort' ][ 'getSize' ]();
 164                         font = X[ 'ViewPort' ][ 'getBaseFontSize' ]();
 165                         this.layout.calculate( this, false, 0, 0, size[ 0 ] / font, size[ 1 ] / font );
 166                         this.updateLayout();
 167
 168                         this.calcReserved = false;
 169
 170                         X_ViewPort[ 'listenOnce' ]( X_EVENT_AFTER_UPDATE, this, XUI_Root_onViewUpdate );
 171
 172                         return X_CALLBACK_NONE;
 173                 },
 174
 175                 updateCoursor : function( cursor ){
 176
 177                 },
 178
 179                 _remove : function(){
 180                         X_EventDispatcher_unlistenAll( this.xnodeInteractiveLayer );
 181                         _Box.prototype._remove.call( this );
 182                 }
 183         }
 184 );
 185
 186 function XUI_Root_do1stCalculate(){
 187         this.calculate();
 188         this.phase = 4;
 189         X_ViewPort
 190                 [ 'listen' ]( X_EVENT_VIEW_RESIZED, this, this.calculate )
 191                 [ 'listen' ]( X_EVENT_BASE_FONT_RESIZED, this, this.calculate );
 192 };
 193
 194 function XUI_Root_onViewUpdate( e ){
 195         this[ 'dispatch' ]( XUI_Event.LAYOUT_COMPLETE );
 196 };
 197
 198 //var XUI_Root;
 199 // TODO singleton
 200 X.UI.Root = X.UI.Box.inherits(
 201         'Root',
 202         X_Class.NONE,
 203         {
 204                 Constructor : function(){
 205                         var supports;
 206
 207                         //if( !XUI_Root ){
 208                                 supports = XUI_Attr_createAttrDef( XUI_Box.prototype.usableAttrs, XUI_Layout_Canvas.overrideAttrsForSelf );
 209
 210                                 XUI_Root.prototype.layout       = XUI_Layout_Canvas;
 211                                 XUI_Root.prototype.usableAttrs = supports;
 212                                 XUI_Root.prototype.attrClass    = XUI_Attr_preset( XUI_Box.prototype.attrClass, supports, {
 213                                                                         width  : '100%',
 214                                                                         height : '100%'
 215                                                                 } );
 216                         //};
 217                         X_Pair_create( this, XUI_Root( this, XUI_Layout_Canvas, arguments ) );
 218                 }
 219         });
 220 /*
 221 X.UI.Root = X.UI.Box.presets(
 222         'Root',
 223         XUI_Root,
 224         {
 225                 width  : '100%',
 226                 height : '100%'
 227         }
 228 );*/
 229