0.6.x/js/dom/12_XDomEvent.js

   1 /**\r
   2  * use X.Callback\r
   3  * \r
   4  * http://d.hatena.ne.jp/uupaa/20100430/1272561922\r
   5  * \r
   6  */\r
   7 \r
   8 if( X.Dom.EVENT_W3C ){\r
   9         X.Dom.Event = function( e, xnode ){\r
  10                 //this._event        = e;\r
  11                 this.type          = X.Dom.Event.RenameTo[ e.type ] || e.type;\r
  12                 \r
  13                 //http://www.quirksmode.org/js/events_properties.html\r
  14                 if( e.target ){\r
  15                         this.target        = Node._getXNode( e.target.nodeType === 3 ? e.target.parentNode : e.target );// defeat Safari bug // xnode\r
  16                 };\r
  17                 if( e.relatedTarget ){\r
  18                         this.relatedTarget = Node._getXNode( e.relatedTarget.nodeType === 3 ? e.relatedTarget.parentNode : e.relatedTarget ); // xnode\r
  19                 };\r
  20                 \r
  21                 this.currentTarget = xnode; // xnode\r
  22                 this.eventPhase    = e.eventPhase;\r
  23                 \r
  24                 this.clientX       = e.clientX;\r
  25                 this.clientY       = e.clientY;\r
  26                 //this.screenX       = e.screenX;\r
  27                 //this.screenY       = e.screenY;\r
  28                 this.pageX         = e.pageX;\r
  29                 this.pageY         = e.pageY;\r
  30                 this.offsetX       = e.offsetX || e.layerX;\r
  31                 this.offsetY       = e.offsetY || e.layerY;\r
  32                 \r
  33                 this.keyCode       = e.keyCode;\r
  34                 this.altKey        = e.altKey;\r
  35                 this.ctrlKey       = e.ctrlKey;\r
  36                 this.shiftKey      = e.shiftKey;\r
  37                 \r
  38                 // http://www.programming-magic.com/20090127231544/\r
  39                 this.which         = e.which || ( e.button + 1 ); // 左:1, 中:2, 右:3\r
  40                 \r
  41                 // https://developer.mozilla.org/ja/docs/DOM/DOM_event_reference/mousewheel\r
  42                 \r
  43                 // TODO\r
  44                 // https://w3g.jp/blog/tools/wheelevent_crossbrowser\r
  45                 // ホイール系イベント2014年版クロスブラウザ\r
  46                 if( e.wheelDeltaY !== undefined ){\r
  47                         this.wheelDeltaX = e.wheelDeltaX / 12;\r
  48                         this.wheelDeltaY = e.wheelDeltaY / 12;\r
  49                 } else\r
  50                 if( e.wheelDelta !== undefined ){\r
  51                         this.wheelDeltaX = this.wheelDeltaY = e.wheelDelta / 12;\r
  52                 } else\r
  53                 if( e.detail !== undefined ){\r
  54                         this.wheelDeltaX = this.wheelDeltaY = - e.detail * 3;\r
  55                 } else {\r
  56                         this.wheelDeltaX = this.wheelDeltaY = 0;\r
  57                 };\r
  58                 \r
  59                 if( e.constructor === window.TouchEvent ){\r
  60                         // TouchEvent\r
  61                         this.touches        = e.touches;\r
  62                         this.changedTouches = e.changedTouches;\r
  63                         this.targetTouches  = e.targetTouches;\r
  64                         this.metaKey        = e.metaKey;\r
  65                         this.force          = e.force || e.webkitForce || 0;\r
  66                 } else\r
  67                 if( e.constructor === window.PointerEvent ){\r
  68                         // PointerEvent;\r
  69                         this.currentPoint  = e.currentPoint;\r
  70                         this.width         = e.width;\r
  71                         this.height        = e.height;\r
  72                         this.timeStamp     = e.timeStamp;\r
  73                         this.hwTimestamp   = e.hwTimestamp;\r
  74                         this.intermediatePoints = e.intermediatePoints;\r
  75                         this.isPrimary     = e.isPrimary;\r
  76                         this.pointerId     = e.pointerId;\r
  77                         this.pointerType   = e.pointerType;\r
  78                         this.pressure      = e.pressure;\r
  79                         this.tiltX         = e.tiltX;\r
  80                         this.tiltY         = e.tiltY;\r
  81                 };\r
  82         };\r
  83 } else {\r
  84         X.Dom.Event = function( e, xnode, element ){\r
  85                 var btn;\r
  86                 \r
  87                 //this._event        = e;\r
  88                 this.type          = e.type;\r
  89                 this.target        = Node._getXNode( e.srcElement ); // xnode\r
  90                 if( this.target && this.target._xnodeType === 3 ) this.target = this.target.parent; // ie4 の fake Textnode がヒットしていないか？\r
  91                 this.currentTarget = xnode; // xnode\r
  92                 this.relatedTarget = Node._getXNode( e.formElement ? e.formElement : e.toElement ); // xnode\r
  93                 this.eventPhase    = e.srcElement === element ? 2: 3;\r
  94                 \r
  95                 this.clientX       = e.clientX;\r
  96                 this.clientY       = e.clientY;\r
  97                 //this.screenX       = e.screenX;\r
  98                 //this.screenY       = e.screenY;\r
  99                 \r
 100                 if( X.Dom._root ){ // uuu...\r
 101                         \r
 102                         this.pageX         = e.clientX + X.Dom._root.scrollLeft;\r
 103                         this.pageY         = e.clientY + X.Dom._root.scrollTop;\r
 104                         \r
 105                         // DOMAssistant 2.8.1\r
 106                         //event.pageX = DOMAssistant.def(e.pageX)? e.pageX : (event.clientX + (de.scrollLeft || b.scrollLeft) - (de.clientLeft || 0));\r
 107                         //event.pageY = DOMAssistant.def(e.pageY)? e.pageY : (event.clientY + (de.scrollTop || b.scrollTop) - (de.clientTop || 0));                                                     \r
 108                 };\r
 109                 \r
 110 \r
 111                 \r
 112                 if( X.UA.IE && 5 <= X.UA.IE ){\r
 113                         this.offsetX       = e.offsetX; // イベントターゲット左上からの座標\r
 114                         this.offsetY       = e.offsetY;                 \r
 115                 }// else\r
 116                 //if( e.srcElement ){\r
 117                 //      this.offsetX       = e.x - e.srcElement.offsetLeft; // e.x はイベント発生要素の親要素を基準にした座標。\r
 118                 //      this.offsetY       = e.y - e.srcElement.offsetTop;      \r
 119                 //};\r
 120                 \r
 121                 this.keyCode       = e.keyCode;\r
 122                 this.altKey        = e.altKey;\r
 123                 this.ctrlKey       = e.ctrlKey;\r
 124                 this.shiftKey      = e.shiftKey;\r
 125                 \r
 126                 // http://www.programming-magic.com/20090127231544/\r
 127                 switch( this.type ){\r
 128                         case 'click'    :\r
 129                         case 'dblclick' :\r
 130                                 this.which = 1;\r
 131                                 break;\r
 132                         case 'contextmenu' :\r
 133                                 this.which = 3;\r
 134                                 break;\r
 135                         default :\r
 136                                 btn = e.button;\r
 137                                 this.which =\r
 138                                         btn & 1 ? 1 :\r
 139                                         btn & 4 ? 2 :\r
 140                                         btn & 2 ? 3 : 0; // 左:1(click:0), 中:4, 右:2\r
 141                 };\r
 142                 this.wheelDeltaX = this.wheelDeltaY = e.wheelDelta / 12;\r
 143         };\r
 144 };\r
 145 \r
 146 X.Dom.Event.DOM_PRE_INIT        = ++X.Event._LAST_EVENT;\r
 147 X.Dom.Event.DOM_BUILDER_COMPLETE= ++X.Event._LAST_EVENT;\r
 148 X.Dom.Event.DOM_INIT            = ++X.Event._LAST_EVENT;\r
 149 X.Dom.Event.XDOM_READY          = ++X.Event._LAST_EVENT;\r
 150 X.Dom.Event.VIEW_ACTIVATE       = ++X.Event._LAST_EVENT;\r
 151 X.Dom.Event.VIEW_DEACTIVATE     = ++X.Event._LAST_EVENT;\r
 152 X.Dom.Event.VIEW_RESIZED        = ++X.Event._LAST_EVENT;\r
 153 X.Dom.Event.BASE_FONT_RESIZED   = ++X.Event._LAST_EVENT;\r
 154 // same_page_jump\r
 155 // on_screen_keyboard_show\r
 156 // on_screen_keyboard_hide\r
 157 // X.Dom.Event.BEFORE_UPDATE       = ++X.Event._LAST_EVENT; // このイベントで要素のサイズを取得すると無限ループに！\r
 158 X.Dom.Event.AFTER_UPDATE        = ++X.Event._LAST_EVENT;\r
 159 // hash_change\r
 160 X.Dom.Event.BEFORE_UNLOAD       = ++X.Event._LAST_EVENT;\r
 161 X.Dom.Event.UNLOAD              = ++X.Event._LAST_EVENT;\r
 162 X.Dom.Event.LOAD_BEFORE_STOP    = ++X.Event._LAST_EVENT;\r
 163 X.Dom.Event.LOAD_ASSET_STOP     = ++X.Event._LAST_EVENT;\r
 164 X.Dom.Event.LOAD_ASSET_COMPLETE = ++X.Event._LAST_EVENT;\r
 165 X.Dom.Event.LOAD_ASSET_ERROR    = ++X.Event._LAST_EVENT;\r
 166 \r
 167 X.Dom.Event.ANIME_BEFORE_START  = ++X.Event._LAST_EVENT;\r
 168 X.Dom.Event.ANIME_START         = ++X.Event._LAST_EVENT;\r
 169 X.Dom.Event.ANIME               = ++X.Event._LAST_EVENT;\r
 170 X.Dom.Event.ANIME_END           = ++X.Event._LAST_EVENT;\r
 171 X.Dom.Event.ANIME_BEFORE_STOP   = ++X.Event._LAST_EVENT; // xnode.stop() のみ、指定時間による停止では呼ばれない\r
 172 X.Dom.Event.ANIME_STOP          = ++X.Event._LAST_EVENT;\r
 173 X.Dom.Event._LAST_EVENT         = X.Event._LAST_EVENT; // ここに書いてあるイベントの最後の値 X.Dom.Event.ANIME_STOP と同じ値\r
 174 \r
 175 X.Dom.Event.Rename = {};\r
 176 X.Dom.Event.RenameTo = {};\r
 177 // https://github.com/georgeadamson/jQuery.prefixfree-events/blob/master/jQuery.prefixfree-events.js\r
 178 \r
 179 if( window.onwebkitanimationend !== undefined && window.onanimationend === undefined ){\r
 180         X.Dom.Event.Rename[ 'animationend' ]               = 'webkitAnimationEnd';\r
 181         X.Dom.Event.RenameTo[ 'webkitAnimationEnd' ]       = 'animationend';\r
 182         X.Dom.Event.Rename[ 'animationstart' ]             = 'webkitAnimationStart';\r
 183         X.Dom.Event.RenameTo[ 'webkitAnimationStart' ]     = 'animationstart';\r
 184         X.Dom.Event.Rename[ 'animationiteration' ]         = 'webkitAnimationIteration';\r
 185         X.Dom.Event.RenameTo[ 'webkitAnimationIteration' ] = 'animationiteration';\r
 186 };\r
 187 \r
 188 if( window.onwebkittransitionend !== undefined && window.ontransitionend === undefined ){\r
 189         X.Dom.Event.Rename[ 'transitionend' ]         = 'webkitTransitionEnd';\r
 190         X.Dom.Event.RenameTo[ 'webkitTransitionEnd' ] = 'transitionend';\r
 191 };\r
 192 \r
 193 X.Dom.Node.prototype.listen = function( type, arg1, arg2, arg3 /* [ listener || ( context + function ) || function ][ arguments ] */ ){\r
 194         var elm;\r
 195         \r
 196         if( this._xnodeType === 0 || this._xnodeType === 3 || !arg1 ) return this;\r
 197         \r
 198         ( !this._listeners || !this._listeners[ type ] ) && X.Type.isString( type ) && this._addEvent( type );\r
 199         \r
 200         return typeof arg1 === 'function' ?\r
 201                 X.EventDispatcher.prototype.listen.call( this, type, this, arg1, arg2 ) :\r
 202                 X.EventDispatcher.prototype.listen.apply( this, arguments );\r
 203 };\r
 204 \r
 205 X.Dom.Node.prototype._addEvent =\r
 206         // Days on the Moon DOM Events とブラウザの実装 \r
 207         // http://nanto.asablo.jp/blog/2007/03/23/1339502\r
 208         // Safari 2 では関数オブジェクトしか EventListener として使えませんが、Safari のナイトリービルドでは handleEvent メソッドを持つオブジェクトも EventListener として使えるようです。\r
 209         X.Dom.EVENT_W3C && X.UA.Safari && X.UA.Safari < 3 ?\r
 210                 (function( type ){\r
 211                         var raw = this._rawNode;\r
 212                         if( !raw ) return;\r
 213                         this._handleEvent = this._handleEvent || X.Callback.create( this );\r
 214                         if( this._xnodeType === 4 ){ // Image\r
 215                                 raw[ 'on' + type ] = this._handleEvent;\r
 216                         } else {\r
 217                                 raw.addEventListener( type, this._handleEvent, false );\r
 218                         };\r
 219                 }) :\r
 220         X.Dom.EVENT_W3C && X.UA.Opera7 ?\r
 221                 (function( type ){\r
 222                         var raw = this._rawNode;\r
 223                         if( !raw ) return;\r
 224                         this._handleEvent = this._handleEvent || X.Callback.create( this );\r
 225                         if( raw === window ){\r
 226                                 raw[ 'on' + type ] = this._handleEvent;\r
 227                         } else {\r
 228                                 raw.addEventListener( type, this._handleEvent, false );\r
 229                         };\r
 230                 }) :\r
 231         X.Dom.EVENT_W3C ?\r
 232                 (function( type ){\r
 233                         this._rawNode && this._rawNode.addEventListener( X.Dom.Event.Rename[ type ] || type, this, false );\r
 234                 }) :\r
 235         X.Dom.EVENT_IE ?\r
 236                 (function( type ){\r
 237                         if( !this._rawNode ) return;\r
 238                         this._handleEvent = this._handleEvent || X.Callback.create( this );\r
 239                         this._rawNode.attachEvent( 'on' + type, this._handleEvent );\r
 240                 }) :\r
 241                 (function( type ){\r
 242                         var elm = this._rawNode || ( this._ie4getRawNode && this._ie4getRawNode() );\r
 243                         if( !elm ) return;\r
 244                         this._handleEvent = elm[ 'on' + type ] = this._handleEvent || X.Callback.create( this );\r
 245                 });\r
 246 \r
 247 \r
 248 X.Dom.Node.prototype.unlisten = function( type /* , arg1, arg2, arg3 */ ){\r
 249         var list = this._listeners,\r
 250                 l    = !this._dispatching && list && type !== undefined && list[ type ] && list[ type ].length;\r
 251         \r
 252         X.EventDispatcher.prototype.unlisten.apply( this, arguments );\r
 253         \r
 254         l && !list[ type ] && X.Type.isString( type ) && this._removeEvent( type );\r
 255         \r
 256         return this;\r
 257 };\r
 258 \r
 259 X.Dom.Node.prototype._removeEvent =\r
 260         X.Dom.EVENT_W3C && X.UA.Safari && X.UA.Safari < 3 ?\r
 261                 (function( type ){\r
 262                         var raw = this._rawNode;\r
 263                         if( !raw ) return;\r
 264                         \r
 265                         if( this._xnodeType === 4 ){ // Image\r
 266                                 raw[ 'on' + type ] = '';\r
 267                         } else {\r
 268                                 raw.removeEventListener( type, this._handleEvent, false );\r
 269                         };\r
 270                         if( !this._listeners ){\r
 271                                 X.Callback._correct( this._handleEvent );\r
 272                                 delete this._handleEvent;\r
 273                         };\r
 274                 }) :\r
 275         X.Dom.EVENT_W3C && X.UA.Opera7 ?\r
 276                 (function( type ){\r
 277                         var raw = this._rawNode;\r
 278                         if( !raw ) return;\r
 279                         \r
 280                         if( raw === window ){\r
 281                                 raw[ 'on' + type ] = null;\r
 282                         } else {\r
 283                                 raw.removeEventListener( type, this._handleEvent, false );\r
 284                         };\r
 285                         if( !this._listeners ){\r
 286                                 X.Callback._correct( this._handleEvent );\r
 287                                 delete this._handleEvent;\r
 288                         };\r
 289                 }) :\r
 290         X.Dom.EVENT_W3C ?\r
 291                 (function( type ){\r
 292                         var elm = this._rawNode;\r
 293                         if( !elm ) return;\r
 294                         elm.removeEventListener( X.Dom.Event.Rename[ type ] || type, this, false );\r
 295                 }) :\r
 296         X.Dom.EVENT_IE ?\r
 297                 (function( type ){\r
 298                         var elm = this._rawNode;\r
 299                         if( !elm ) return;\r
 300                         elm.detachEvent( 'on' + type, this._handleEvent );\r
 301                         if( !this._listeners ){\r
 302                                 X.Callback._correct( this._handleEvent );\r
 303                                 delete this._handleEvent;\r
 304                         };\r
 305                 }) :\r
 306                 (function( type ){\r
 307                         var elm = this._rawNode || ( this._ie4getRawNode && this._ie4getRawNode() );\r
 308                         if( !elm ) return;\r
 309                         elm[ 'on' + type ] = X.emptyFunction;\r
 310                         elm[ 'on' + type ] = '';\r
 311                         if( !this._listeners ){\r
 312                                 X.Callback._correct( this._handleEvent );\r
 313                                 delete this._handleEvent;\r
 314                         };\r
 315                 });\r
 316 \r
 317 // Is this in regard to the Safari 1.x preventDefault bug on click/dblclick?\r
 318 // https://groups.google.com/forum/#!msg/comp.lang.javascript/uYEuCHjHxnw/yKoHtZJPa1QJ\r
 319 \r
 320 X.Dom.Node.prototype.handleEvent =\r
 321         X.Dom.EVENT_W3C ?\r
 322                 (function( e ){\r
 323                         var ret = X.EventDispatcher.prototype.dispatch.call( this, new X.Dom.Event( e, this ) );\r
 324                         \r
 325                         if( ret & X.Callback.STOP_PROPAGATION ){\r
 326                                 e.stopPropagation();\r
 327                         };\r
 328                         if( ret & X.Callback.PREVENT_DEFAULT ){\r
 329                                 this._tag === 'A' && this._rawNode.blur();\r
 330                                 e.preventDefault();\r
 331                                 if( X.UA.Safari && X.UA.Safari < 3 ){\r
 332                                         if( e.type === 'click' || e.type === 'dbclick' ){\r
 333                                                 X.Dom._safariPreventDefault = true;\r
 334                                         };\r
 335                                 };\r
 336                                 return false;\r
 337                         };\r
 338                 }) :\r
 339                 (function(){\r
 340                         var ret = X.EventDispatcher.prototype.dispatch.call( this, new X.Dom.Event( event, this, this._rawNode ) );\r
 341 \r
 342                         if( ret & X.Callback.STOP_PROPAGATION ){\r
 343                                 event.cancelBubble = true;\r
 344                         };\r
 345                         if( ret & X.Callback.PREVENT_DEFAULT ){\r
 346                                 this._tag === 'A' && this._rawNode.blur();\r
 347                                 return event.returnValue = false;\r
 348                         };\r
 349                 });\r
 350 \r
 351 \r
 352 // イベントの退避、dom が画面から抜かれる場合に実施しておく\r
 353 X.Dom.Node.prototype._migrateEvent = function(){\r
 354         var hash = this._listeners,\r
 355                 type;\r
 356         if( !hash ) return;\r
 357         for( type in hash ){\r
 358                 this._removeEvent( type );\r
 359         };\r
 360 };\r
 361 \r
 362 // 退避したイベントの復帰\r
 363 X.Dom.Node.prototype._restoreEvent = function(){\r
 364         var hash = this._listeners,\r
 365                 type;\r
 366         if( !hash ) return;\r
 367         for( type in hash ){\r
 368                 this._addEvent( type );\r
 369         };\r
 370 };\r
 371 \r
 372 /* -----------------------------------------------\r
 373  * Document Ready\r
 374  *  Dean Edwards/Matthias Miller/John Resig\r
 375  */\r
 376 \r
 377 // SafariでJavaScriptのデバッグをする方法\r
 378 // safari1.3 可\r
 379 // http://shimax.cocolog-nifty.com/search/2006/09/safarijavascrip_c54d.html\r
 380 \r
 381 /* for ie9+/Mozilla/Opera9 */\r
 382 if( X.Dom.DOM_W3C ){\r
 383         Node._document.listenOnce( 'DOMContentLoaded', X.Dom._init );\r
 384 } else\r
 385 if( 5 <= X.UA.IE && X.inHead ){\r
 386         // if this script in Head\r
 387         document.write( "<script id=__ie_onload defer src=javascript:void(0)><\/script>" );\r
 388         X.Dom._script = document.getElementById( "__ie_onload" );\r
 389         X.Dom._script.onreadystatechange = function(){\r
 390                 var s = X.Dom._script;\r
 391                 if( s && this.readyState === 'complete' ){\r
 392                         s.onreadystatechange = X.emptyFunction;\r
 393                         s.onreadystatechange = null;\r
 394                         s.parentNode.removeChild( s );\r
 395                         delete X.Dom._script;\r
 396                         X.Dom._init && X.Dom._init();\r
 397                 };\r
 398         };\r
 399 } else\r
 400 // Re: onLoad doesn't work with Safari?\r
 401 // http://lists.apple.com/archives/web-dev/2003/Oct/msg00036.html\r
 402 if( X.UA.WebKit || ( X.UA.Safari && X.UA.Safari < 3 ) ){ // sniff\r
 403         X.Timer.add( 10, function(){\r
 404                 if( !X.Dom._init ) return X.Callback.UN_LISTEN;\r
 405                 if( 'loaded|complete'.indexOf( document.readyState ) !== -1 ) return X.Dom._init();\r
 406         });\r
 407 };\r
 408 \r
 409 /* for other browsers */\r
 410 Node._window.listenOnce( 'load', X.Dom._init );\r
 411 //\r
 412 X.Dom.listenOnce( X.Dom.Event.XDOM_READY, function(e){\r
 413         console.log( 'X.Dom XDomReady ' + X.Dom.readyState );\r
 414 } );\r
 415 \r
 416 if( X.UA.Safari && X.UA.Safari < 3 ){\r
 417         document.documentElement.onclick =\r
 418         document.documentElement.ondbclick = function( e ){\r
 419                         if( X.Dom._safariPreventDefault ){\r
 420                                 X.Dom._safariPreventDefault = false;\r
 421                                 e.preventDefault();\r
 422                                 return false;\r
 423                         };\r
 424                 };\r
 425 };\r
 426 \r
 427 X.Dom.listenOnce( X.Dom.Event.VIEW_RESIZED, function(e){ console.log( 'X.Dom VIEW_RESIZED ' + e.w + 'x' + e.h ); } );\r
 428 \r