font-family: 'ＭＳ Ｐゴシック',sans-serif;\r
}\r
\r
+ .js-disabled {\r
+ background : #111 url( "../img/loading.gif" ) 50% 50% no-repeat;\r
+ }\r
+\r
+\r
.Root {\r
height : 100%;\r
}\r
/* ブラウザのレイアウト機能による auto なサイズ指定は行わない */\r
overflow : hidden;\r
border-style : solid;\r
-\r
+ border-width : 0;\r
/* border-box がデフォルト \r
box-sizing : border-box;\r
-o-box-sizing : border-box;\r
tap-highlight-color : rgba(0,0,0,0);\r
-webkit-tap-highlight-color : rgba(0,0,0,0);\r
}\r
- .ActiveX .mouse-operation-catcher {\r
- background-color : #fff;\r
- filter : alpha( opacity=0 );\r
- }\r
/*\r
* ie では、背景を設定しないと、 mousemove が働かない。\r
* activeX 有効の場合は背景を着色して filter で透明に。\r
* background: url(4x4.gif) fixed repeat;\r
*/\r
.mouse-operation-catcher {\r
- background : url( "../img/opacity0.gif" ) fixed repeat;\r
- }\r
-\r
-\r
-.slidein, .slideout {\r
- position : relative;\r
- width : 200px;\r
- height : 200px;\r
- margin : 1em auto;\r
- background : #000;\r
+ background : url( "../img/opacity0.gif" ) fixed repeat;\r
+ } \r
\r
- -webkit-transition : 0.5s ease-in-out; /* win safari3.2 */\r
- -webkit-transition : -webkit-transform 0.5s ease-in-out; /* win safari4 delay は指定しない */\r
- -moz-transition : -moz-transform 0.5s ease-in-out 0s;\r
- -ms-transition : -ms-transform 0.5s ease-in-out 0s;\r
- -o-transition : -o-transform 0.5s ease-in-out 0s;\r
- transition : transform 0.5s ease-in-out 0s;\r
-\r
- /* http://blog.webcreativepark.net/2012/10/19-161432.html */\r
- -webkit-backface-visibility : hidden;\r
- -moz-backface-visibility : hidden;\r
- backface-visibility : hidden;\r
-}\r
-.slidein .slider {\r
- -webkit-transform : translate(100px,0); /* win safari3.2 */\r
- -webkit-transform : translateX(100px) translateZ(0); /* safari4 */\r
- -moz-transform : translateX(100px) translateZ(0);\r
- -ms-transform : translateX(100px) translateZ(0);\r
- -o-transform : translateX(100px) translateZ(0);\r
- transform : translateX(100px) translateZ(0);\r
-}\r
-.slideout .slider {\r
- -webkit-transform : translate(0,0); /* win safari3.2 */\r
- -webkit-transform : translateX(0) translateZ(0); /* safari4 */\r
- -moz-transform : translateX(0) translateZ(0);\r
- -ms-transform : translateX(0) translateZ(0);\r
- -o-transform : translateX(0) translateZ(0);\r
- transform : translateX(0) translateZ(0);\r
-}\r
-.slider {\r
- position : absolute;\r
- top : 0;\r
- height : 0;\r
-}\r
-.slider div {\r
- position : absolute;\r
- top : 0;\r
- width : 200px;\r
- height : 200px;\r
-}\r
-.slider-red {\r
- left : 0;\r
- background : #f00;\r
-}\r
-.slider-blue {\r
- left : 200;\r
- background : #00f;\r
-}\r
-\r
+ .ActiveX .mouse-operation-catcher {\r
+ background : #fff;\r
+ filter : alpha( opacity=0 );\r
+ }\r
\r
/*------------------------------------------------------------------------------------\r
* hidden-sysyem-node\r
/* Scrollbox\r
--------------------------------------------------------------------------------------*/\r
.ScrollBox-Scroller {\r
- transform : translate( 0, 0 );\r
- transformOrigin : '0 0';\r
position : absolute;\r
}\r
.Root .ScrollBox-IndicatorV,\r
.Root .ScrollBox-IndicatorH {\r
- position : absolute;\r
- overflow : hidden;\r
- background : #000;\r
- background : rgba(0,0,0,0.5);\r
- border : 0;\r
+ position : absolute;\r
+ overflow : hidden;\r
+ background : #000;\r
+ background : rgba(0,0,0,0.5);\r
}\r
.Root .ScrollBox-IndicatorV {\r
top : 0;\r
left : 0;\r
height : 0.5em;\r
}\r
+ .IE4 .ScrollBox-IndicatorH,\r
+ .IE5x .ScrollBox-IndicatorH {\r
+ line-height : 0.5;\r
+ }\r
\r
console.log( '>> Opera : ' + v );\r
} else\r
- \r
+ if( v = parseFloat( dav.split( 'Edge/' )[ 1 ] ) ){\r
+ /**\r
+ * Microsoft Edge\r
+ * @alias X.UA.Edge\r
+ * @type {number}\r
+ */\r
+ X_UA[ 'Edge' ] = v;\r
+\r
+ if( dav.indexOf( 'Mobile' ) ){\r
+ /**\r
+ * Microsoft Edge for Windows 10 Mobile\r
+ * @alias X.UA.EdgeMobile\r
+ * @type {number}\r
+ */\r
+ X_UA[ 'EdgeMobile' ] = v;\r
+ };\r
+\r
+ } else\r
// Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko\r
- if( ( v = dav.split( 'Trident/' )[ 1 ] ) || document.all ){\r
+ if( ( v = dav.split( 'Trident/' )[ 1 ] ) || document.all ){ // .all は Opera にもいるので Opera の判定が先\r
if( v = parseFloat( v ) )\r
/**\r
* IE11 の互換モードの navigator.appVersion にも Trident/7.0 が書かれているため互換モードか?判定ができるc \r
X_UA[ 'ActiveX' ] = true;\r
\r
v = parseFloat( dua.split( 'MSIE ' )[ 1 ] ) ||\r
- parseFloat( dua.split( 'rv:' )[ 1 ] ) ||\r
- parseFloat( dav.split( 'MSIE ' )[ 1 ] ) || 0;\r
+ parseFloat( dua.split( 'rv:' )[ 1 ] ) || 0;\r
\r
tridentToVer = X_UA[ 'Trident' ] ? ( X_UA[ 'Trident' ] + 4 | 0 ) : v;\r
\r
X_Class_DEF_LIST = [],\r
X_Class_CALLING_SUPER = [],\r
X_Class_CALL_SUPER_STACK = [],\r
+ X_Class_SUPER_CALLER = [],\r
+ X_Class_SUPER_STACKS = [],\r
X_Class_traits = null,\r
X_Class_useObjectCreate = false, // !!Object.create, http://jsperf.com/prototype-vs-object-create-perf\r
// Opera Mobile 12.10 Android11 IS01 でクラスのメンバが欠落する問題に遭遇。__proto__ を辞めると動作,,,\r
X_Class_use_proto_ = !X_UA[ 'OperaMobile' ] && !X_UA[ 'OperaTablet' ] && !!X_emptyFunction.prototype.__proto__,\r
+ X_Class_constructorFix = X_UA[ 'AOSP' ] < 3 || X_UA[ 'iOS' ] < 5,\r
X_Class_SEAL_KILLING = [],\r
\r
X_Class_CommonMethods =\r
*/\r
// TODO 現在 new しているインスタンスを保持してチェックする\r
'Super' : function( var_args ){\r
- var sClass = this,\r
- i = X_Class_CALLING_SUPER.indexOf( sClass ),\r
+ var me = this,\r
+ sClass = me,\r
+ i = X_Class_CALLING_SUPER.indexOf( me ),\r
l, sList, def, sConst, ret;\r
\r
if( i === -1 ){\r
- X_Class_CALLING_SUPER[ l = X_Class_CALLING_SUPER.length ] = sClass;\r
+ X_Class_CALLING_SUPER[ l = X_Class_CALLING_SUPER.length ] = me;\r
X_Class_CALL_SUPER_STACK[ l ] = sList = [];\r
- def = X_Class_getClassDef( sClass );\r
+ def = X_Class_getClassDef( me );\r
if( !def.Constructor ) sClass = def.SuperClass;// 現在のクラスがコンストラクタを持たない場合 SuperConstructor を new で呼んでいるため再び呼ばないようにする\r
} else {\r
sList = X_Class_CALL_SUPER_STACK[ i ];\r
if( !sConst ) break;\r
if( sList.indexOf( sConst ) === -1 ){\r
sList[ sList.length ] = sConst;\r
- ret = sConst.apply( this, arguments );\r
+ ret = sConst.apply( me, arguments );\r
--sList.length;\r
if( !sList.length ){\r
X_Class_CALLING_SUPER.splice( i, 1 );\r
X_Class_CALL_SUPER_STACK.splice( i, 1 );\r
};\r
- return ret;\r
+ return ret || me;\r
};\r
};\r
console.log( 'スーパークラスのコンストラクタが見つかりません' );\r
\r
/**\r
* func について、親クラスで設定されている同名の関数メンバーを呼び出す。<br>\r
- * 第一引数に関数を指定し、2つ以上の異なる名前で同じ関数がメンバーがいた場合、動作が不確実になります。<br>\r
+ * 第一引数にオーバーライド済の自身の(自身から参照できる)関数を指定します。内部では関数名を調べた上で prototype チェーンをゴリゴリ辿る、特別なことはしていません。\r
+ * superCall がネストする場合、arguments.callee でないと正しく現在階層を取得して親関数を知ることができない\r
+ * 次の理由によって、関数名で辿ることはやめました\r
+ * <ol>\r
+ * <li>closur compiler でメソッド名が変更される\r
+ * <li>superCall 内からさらに superCall が呼ばれた場合に、起点となる関数を特定できない\r
+ * </ol>\r
+ * 次の場合、意図した動作が得られません\r
+ * <ol>\r
+ * <li>2つ以上の異なる名前で同じ関数がメンバーがいた場合<br>\r
+ * <li>または、サブクラスのメンバーにスーパークラスと同じ関数が出現する\r
+ * <li>superCall 以外の手段で親関数を呼び、そのなかで superCall を読んだ\r
+ * </ol>\r
+ * 通常の X.Class.create の書き方ではこのような状況は起きませんが、js はなんでもできるので\r
* 参考:<a href="http://qiita.com/no22@github/items/d3bead2acbb7ff1fb86b" target="_blank">ES5なJavascriptでモダンなクラス的継承＆スーパー呼び出し </a>\r
- * @param funcNameOrFunc {Function|string} スーパークラスの関数名 または、オーバーライド済の自身の関数。\r
+ * @param myFunc {Function|string} オーバーライド済の自身の(自身から参照できる)関数。\r
* @param var_args {...*} オーバーライド元関数に渡す任意の数の引数\r
* @example return this.superCall( arguments.callee, param0, param1, ... );\r
* @return {*} オーバーライド元の関数を呼び出した戻り値。\r
*/\r
- 'superCall' : function( funcNameOrFunc, var_args ){\r
- var sClass = this,\r
+ 'superCall' : function( myFunc, var_args ){\r
+ var me = this,\r
+ sClass = me.constructor,\r
+ proto = sClass.prototype,\r
+ i = X_Class_SUPER_CALLER.indexOf( me ),\r
+ l, d, ret,\r
args = arguments,\r
- name, p, sFunc, hit = false;\r
- if( X_Type_isFunction( funcNameOrFunc ) ){\r
- for( p in this.constructor.prototype ){\r
- if( this.constructor.prototype[ p ] === funcNameOrFunc ){\r
+ name, p, sFunc, hit;\r
+\r
+ if( X_Type_isFunction( myFunc ) ){\r
+ for( p in proto ){\r
+ if( proto[ p ] === myFunc ){\r
name = p;\r
break;\r
};\r
} else {\r
return;\r
};\r
+ \r
+ if( i === -1 ){\r
+ X_Class_SUPER_CALLER[ l = X_Class_SUPER_CALLER.length ] = me;\r
+ X_Class_SUPER_STACKS[ l ] = d = {};\r
+ } else {\r
+ d = X_Class_SUPER_STACKS[ i ];\r
+ };\r
\r
- if( X_EMPTY_OBJECT[ name ] ) return;\r
- \r
+ if( stack = d[ name ] ){\r
+ myFunc = stack[ stack.length - 1 ];\r
+ } else {\r
+ stack = d[ name ] = [];\r
+ };\r
+\r
+ /*\r
+ while( t ){\r
+ sClass = X_Class_getClassDef( sClass ).SuperClass;\r
+ --t;\r
+ };\r
+ mysFunc = sClass.prototype[ name ]; */\r
+\r
+\r
+ // TODO \r
while( sClass ){\r
- def = X_Class_getClassDef( sClass );\r
- sClass = def.SuperClass;\r
- sFunc = sClass.prototype[ name ];\r
- if( sFunc === funcNameOrFunc ){\r
- hit = true; // 現在の関数にヒット\r
+ sFunc = sClass.prototype[ name ];\r
+ \r
+ if( !hit && sFunc === myFunc ){\r
+ hit = true; // 現在の関数にヒット, さらにスーパークラスを辿って同名のプロパティの関数が現れたらそれが目指すもの\r
} else\r
- if( hit && X_Object_inObject( name, this ) ){\r
+ if( hit && sFunc !== myFunc /* X_Object_own( name, sClass.prototype ) */ ){\r
+ // this の関数と異なり、値が設定されていたら、今は手を抜いて undef か?見ている、正しくは hasOwnProperty\r
if( X_Type_isFunction( sFunc ) ){\r
+ stack[ stack.length ] = sFunc;\r
switch( args.length ){\r
+ case 0 :\r
+ ret = sFunc.call( me );\r
+ break;\r
case 1 :\r
- return sFunc.call( this );\r
+ ret = sFunc.call( me, args[ 0 ] );\r
+ break;\r
case 2 :\r
- return sFunc.call( this, args[ 1 ] );\r
+ ret = sFunc.call( me, args[ 0 ], args[ 1 ] );\r
+ break;\r
case 3 :\r
- return sFunc.call( this, args[ 1 ], args[ 2 ] );\r
- case 4 :\r
- return sFunc.call( this, args[ 1 ], args[ 2 ], args[ 3 ] );\r
+ ret = sFunc.call( me, args[ 0 ], args[ 1 ], args[ 2 ] );\r
+ break;\r
default :\r
args = X_Array_copy( args );\r
args.shift();\r
- return sFunc.apply( this, args );\r
+ ret = sFunc.apply( me, args );\r
+ break; \r
};\r
+ --stack.length;\r
};\r
break;\r
};\r
+ sClass = X_Class_getClassDef( sClass ).SuperClass; \r
+ };\r
+ \r
+ if( !stack.length ) delete d[ name ];\r
+ if( X_Object_isEmpty( d ) ){\r
+ X_Class_SUPER_CALLER.splice( l, 1 );\r
+ X_Class_SUPER_STACKS.splice( l, 1 );\r
};\r
+ return ret;\r
},\r
\r
/**\r
* インスタンスのクラスか？またはスーパークラスか？調べる。<br>\r
- * instanceof 構文をサポートしない環境(IE4,Mac IE5)を想定する場合、必ずこのメソッドを使用すること。<br>\r
+ * instanceof 構文をサポートしない環境(IE5以下)を想定する場合、必ずこのメソッドを使用すること。<br>\r
* クラスのインスタンスか？だけ調べたい場合は this.constructor === klass が高速。\r
* @param klass {__ClassBase__} クラス定義\r
* @return {boolean}\r
\r
\r
function X_Class_getClass( instance ){\r
- var cList = X_Class_CLASS_LIST,\r
- i = cList.length,\r
- klass;\r
- for( ; i; ){\r
- klass = cList[ --i ];\r
- if( instance.constructor === klass ) return klass;\r
- };\r
+ var cList = X_Class_CLASS_LIST, i;\r
+ \r
+ if( ( i = cList.indexOf( instance.constructor ) ) !== -1 ) return cList[ i ];\r
if( cList.indexOf( instance ) !== -1 ) return instance;\r
};\r
\r
+// TODO def = klass( X_Closure_COMMAND_BACK )\r
function X_Class_getClassDef( KlassOrInstance ){\r
var i = X_Class_CLASS_LIST.indexOf( KlassOrInstance );\r
if( i === -1 ) i = X_Class_CLASS_LIST.indexOf( X_Class_getClass( KlassOrInstance ) );\r
\r
def.live && def.live.push( instance );\r
\r
- if( ( X_UA[ 'AOSP' ] < 3 || X_UA[ 'iOS' ] < 5 ) && instance.constructor !== klass ){\r
+ if( X_Class_constructorFix && instance.constructor !== klass ){\r
console.log( '------- constructor の不一致!' ); // Android2.3.7\r
instance.constructor = klass;\r
};\r
'touchmove' : 'pointermove',\r
'mousemove' : 'pointermove',\r
'touchleave' : 'pointerleave',\r
- 'mouseout' : 'pointerleave',\r
+ 'mouseout' : 'pointerout',\r
'mouseleave' : 'pointerleave',\r
'touchcancel' : 'pointercancel',\r
'contextmenu' : 'contextmenu',\r
'mousedown' : 'pointerdown',\r
'mouseup' : 'pointerup',\r
'mousemove' : 'pointermove',\r
- 'mouseout' : 'pointerleave',\r
+ 'mouseout' : 'pointerout',\r
'mouseleave' : 'pointerleave',\r
'contextmenu' : 'contextmenu',\r
'dbclick' : 'dbclick',\r
\r
// iOS と MacOSX Iron36 で発生。連続してアニメーションが起こると、クロージャの束縛された obj へのアクセスに失敗する。Win では起きない?\r
// むしろ、MacOSX のブラウザ全般で起こる??\r
- X_EventDispatcher_ANIME_EVENTS = false && ( X_UA[ 'WebKit' ] || X_UA[ 'Blink' ] ) && {\r
+ X_EventDispatcher_ANIME_EVENTS = ( X_UA[ 'WebKit' ] || X_UA[ 'Blink' ] ) && {\r
'transitionend' : true, 'webkitTransitionEnd' : true, 'mozTransitionEnd' : true, 'oTransitionEnd' : true, 'otransitionEnd' : true,\r
'animationend' : true, 'webkitAnimationEnd' : true, 'oAnimationEnd' : true,\r
'animationstart' : true, 'webkitAnimationStart' : true, 'oAnimationStart' : true,\r
now = X_Timer_now(),\r
speed = now - X[ 'bootTime' ];\r
\r
- X_System_javascriptScore = speed;\r
+ X[ 'bootSpeed' ] = X_System_javascriptScore = speed;\r
console.log( 'js score ' + speed );\r
\r
delete X_TEMP.onRearchEndOfScript;\r
'width' : touch.width || 0,\r
'height' : touch.height || 0\r
};\r
- console.log( 'e.pointerId = ' + touch.identifier );\r
+ //console.log( 'e.pointerId = ' + touch.identifier );\r
};\r
return events.length === 1 ? events[ 0 ] : events;\r
} else {\r
this[ 'type' ] = pointerEventType;\r
this[ 'pointerType' ] = 'mouse';\r
\r
- this[ 'button' ] = e.button !== undefined ? e.button :\r
- e.which !== undefined ? e.which - 1 : -1;\r
+ this[ 'button' ] = e.button !== undefined ? e.button : e.which !== undefined ? e.which - 1 : -1;\r
this[ 'buttons' ] = e.buttons !== undefined ? e.buttons : this[ 'button' ] === 0 ? 1 : this[ 'button' ] === 1 ? 2 : this[ 'button' ] === 2 ? 4 : 0;\r
this[ 'pressure' ] = ( this[ 'button' ] !== -1 ? 0.5 : 0 );\r
\r
elm = e.target;\r
this[ 'target' ] = X_Node_getXNode( elm.nodeType === 3 ? elm.parentNode : elm );// defeat Safari bug // xnodetouch.target;\r
this[ 'isPrimary' ] = true;\r
- this[ 'hwTimestamp' ] = this[ 'timestamp' ] = X_Timer_now(); \r
+ this[ 'hwTimestamp' ] = this[ 'timestamp' ] = X_Timer_now();\r
this[ 'altKey' ] = e.altKey;\r
this[ 'ctrlKey' ] = e.ctrlKey;\r
this[ 'metaKey' ] = e.metaKey;\r
// this[ 'offsetX' ] = e.x - e.srcElement.offsetLeft; // e.x はイベント発生要素の親要素を基準にした座標。\r
// this[ 'offsetY' ] = e.y - e.srcElement.offsetTop; \r
//};\r
- \r
+ this[ 'pressure' ] = ( this[ 'button' ] !== -1 ? 0.5 : 0 );\r
+ this[ 'isPrimary' ] = true;\r
+ this[ 'hwTimestamp' ] = this[ 'timestamp' ] = X_Timer_now();\r
this[ 'pointerId' ] = 1;\r
this[ 'radiusX' ] = 0;\r
this[ 'radiusY' ] = 0;\r
X_Event_Rename[ 'pointerup' ] = [ 'touchend', 'mouseup' ];\r
X_Event_Rename[ 'pointermove' ] = [ 'touchmove', 'mousemove' ];\r
X_Event_Rename[ 'pointercancel' ] = 'touchcancel';\r
- X_Event_Rename[ 'pointerout' ] = \r
+ //X_Event_Rename[ 'pointerout' ] = \r
X_Event_Rename[ 'pointerleave' ] = 'touchleave';\r
// X_Event_Rename[ 'click' ] = [ 'touchstart', 'touchmove', 'touchend' ]; // ループになってしまう!直した!直ってない！\r
} else {\r
X_Event_Rename[ 'pointerdown' ] = 'mousedown';\r
X_Event_Rename[ 'pointerup' ] = 'mouseup';\r
X_Event_Rename[ 'pointermove' ] = 'mousemove';\r
- X_Event_Rename[ 'pointercancel' ] = \r
- X_Event_Rename[ 'pointerleave' ] = \r
- X_Event_Rename[ 'pointerleave' ] = document.documentElement.onmouseleave !== undefined ? 'mouseleave' : 'mouseout';\r
+ //X_Event_Rename[ 'pointercancel' ] = \r
+ //X_Event_Rename[ 'pointerout' ] = \r
+ X_Event_Rename[ 'pointerleave' ] = X_elmHtml.onmouseleave !== undefined ? 'mouseleave' : 'mouseout';\r
\r
// Opera は ブラウザ設定から右クリックの通知を許可すると mousedown で e.button==2 が返る,ｷｬﾝｾﾙは可能??\r
X_UA[ 'Opera' ] && ( X_Event_Rename[ 'contextmenu' ] = 'mousedown' );\r
var rgb, r, g, b;
if( X_Type_isNumber( x ) ){
- return ( 0x0 <= x && x <= 0xFFFFFF ) ? x : undefined;
+ return ( 0x0 <= x && x <= 0xFFFFFF ) ? x : NaN;
} else
if( !X_Type_isString( x ) ) return;
b *= 2.55;
};
} else {
- return undefined;
+ return NaN;
};
- return X_Type_isFinite( r + b + g ) ? ( r << 16 ) + ( g << 8 ) + b : undefined;
+ return X_Type_isFinite( r + b + g ) ? ( r << 16 ) + ( g << 8 ) + b : NaN;
};
function X_Node_CSS_objToCssText( that, skipFilter ){
}\r
}\r
};\r
- \r
+\r
+// お約束\r
+// transform や transition animation は スタイルシートに書かない\r
+\r
// 新規アニメーションが追加された場合、\r
// tree が dirty なら AFTER_COMMIT を待つ\r
// 1) xnode の既存アニメーションとの親子関係の調査\r
/* GPUレイヤーにいる間に要素のコンテンツを変更をすると transitionend が動かなくなるっぽい Mac safari と firefox */\r
X_Node_Anime_translateZ = X_Node_CSS_VENDER_PREFIX[ 'perspective' ] && !X_UA[ 'OperaMobile' ] && !X_UA[ 'OperaTablet' ] ? ' translateZ(0)' : '',\r
/* Opera12(XP,8.1) 切った方がスムース, win Safari3 で、たまに動作が止まってしまう、、、 */\r
- X_Node_Anime_hasTransition = !!X_Node_CSS_VENDER_PREFIX[ 'transitionDelay' ] && !X_UA[ 'Opera' ], // && !( X_UA[ 'Webkit' ] <= 528.16 ),\r
+ X_Node_Anime_hasTransition = false && !!X_Node_CSS_VENDER_PREFIX[ 'transitionDelay' ] && !( X_UA[ 'iOS' ] < 6 ) && !X_UA[ 'Opera' ] && !X_UA[ 'Blink' ], // && !( X_UA[ 'Webkit' ] <= 528.16 ),\r
X_Node_Anime_transitionProps = X_Node_Anime_hasTransform ? X_Node_CSS_VENDER_PREFIX[ 'transform' ] : 'left,top',\r
// transitionEnd イベント中に要素の更新( X_Node_startUpdate() )ができるか？\r
// iOS3+4 では可能、iOS6.1.5 で不可。TODO iOS5 及び他の環境で調査。ダメな場合、anime.html が正しく描画されない。\r
- X_Node_updateOnTransitionEnd = false; //X_UA[ 'iOS' ] < 6;\r
+ X_Node_updateOnTransitionEnd = false;\r
\r
// gpu化だけ transformX , willChange\r
// 終了位置の変更\r
*/\r
function X_Node_animate( start, dest, duration, easing, wait ){\r
var isNew = !this[ '_anime' ],\r
- obj = this[ '_anime' ] || ( this[ '_anime' ] = {} );\r
+ obj = this[ '_anime' ];\r
+ \r
+ if( !obj ){\r
+ this[ '_anime' ] = obj = X_Node_Anime_getComputedPosition( this );\r
+ obj.destX = obj.x;\r
+ obj.destY = obj.y;\r
+ obj.destA = obj.a;\r
+ };\r
\r
obj.duration = 0 <= duration && X_Type_isFinite( duration ) ? duration : 500;\r
obj.easing = ease[ easing ] || ease[ 'circular' ];\r
case 3 : // TransitionEnd -> アニメーションの解除\r
obj.phase = obj.gpuParent ? 10 : 4;\r
\r
- console.log( '#### アニメーションの解除 ' + obj.phase );\r
+ //console.log( '#### アニメーションの解除 ' + obj.phase );\r
\r
// このタイミングで animation 関連の css を削除したところ(X_Node_Anime_clearTransition)、iOS3、4 で再描画忘れが度々起きるように、、、\r
if( !obj.gpuParent ) X_Node_Anime_clearTransition( xnode );\r
case 10 :\r
// アニメーションは停止・GPUレイヤーは解除していない(再アニメーションに備えて待機)\r
if( !obj.gpuTimerID ){\r
- console.log( '#### アニメーションは停止 ' + obj.wait );\r
+ //console.log( '#### アニメーションは停止 ' + obj.wait );\r
if( obj.wait ){\r
obj.gpuTimerID = X_Timer_once( obj.wait, xnode, X_Node_Anime_releaseGPULayer );\r
} else {\r
};\r
};\r
\r
-function X_Node_Anime_getComputedPosition( that ) {\r
- var matrix = X_Node_CSS_getComputedStyle( that[ '_rawObject' ], null ),\r
- x, y;\r
+function X_Node_Anime_getComputedPosition( that ){\r
+ var raw = that[ '_rawObject' ],\r
+ x = 0, y = 0, a = 1, matrix;\r
\r
- if ( X_Node_Anime_hasTransform ) {\r
- matrix = matrix[ X_Node_CSS_VENDER_PREFIX[ 'transform' ] ].split( ')' )[ 0 ].split( ', ' );\r
- x = + ( matrix[ 12 ] || matrix[ 4 ] );\r
- y = + ( matrix[ 13 ] || matrix[ 5 ] );\r
- } else {\r
- x = + parseFloat( matrix.left );\r
- y = + parseFloat( matrix.top );\r
+ if( raw ){\r
+ if( X_Node_Anime_hasTransform ){\r
+ matrix = X_Node_CSS_getComputedStyle( raw, null );\r
+ matrix = matrix[ X_Node_CSS_VENDER_PREFIX[ 'transform' ] ].split( ')' )[ 0 ].split( ', ' );\r
+ x = + ( matrix[ 12 ] || matrix[ 4 ] );\r
+ y = + ( matrix[ 13 ] || matrix[ 5 ] );\r
+ a = matrix[ X_Node_CSS_Support[ 'opacity' ] ];\r
+ } else\r
+ if( X_Node_CSS_getComputedStyle ){\r
+ matrix = X_Node_CSS_getComputedStyle( raw, null );\r
+ x = parseFloat( matrix[ 'left' ] );\r
+ y = parseFloat( matrix[ 'top' ] );\r
+ a = matrix[ X_Node_CSS_Support[ 'opacity' ] ];\r
+ } else\r
+ if( matrix = raw.currentStyle || raw.style ){\r
+ x = parseFloat( matrix[ 'left' ] );\r
+ y = parseFloat( matrix[ 'top' ] );\r
+ a = matrix[ 'opacity' ];\r
+ }; \r
};\r
- \r
- return { x : x, y : y, a : matrix[ X_Node_CSS_Support[ 'opacity' ] ] };\r
+\r
+ return { x : x, y : y, a : a };\r
};\r
\r
function X_Node_Anime_onTransitionEnd( e ){\r
X_Node_ANIMATIONS.splice( X_Node_ANIMATIONS.indexOf( this ), 1 );\r
delete obj.gpuTimerID;\r
delete this[ '_anime' ];\r
- console.log( 'GPUレイヤーの破棄を指示' );\r
+ //console.log( 'GPUレイヤーの破棄を指示' );\r
\r
X_ViewPort[ 'listenOnce' ]( X_EVENT_AFTER_UPDATE, this, X_Node_Anime_gpuReleased );\r
};\r
\r
delete xnode[ '_anime' ];\r
X_Node_ANIMATIONS.splice( i, 1 );\r
- console.log( obj.destA );\r
+ //console.log( obj.destA );\r
// filter な 親が解除されないと子要素への filter が反映されない\r
xnode[ 'asyncDispatch' ]( { type : X_EVENT_ANIME_END, 'gpu' : false } );\r
} else {\r
* TODO Node の継承ができない！
*/
'Constructor' : function( v ){
+ // TODO uid = X_Node_CHASHE.indexOf( null ), uid === -1 ? X_Node_CHASHE.length : uid;
var uid = X_Node_CHASHE.length,
css, xnodes, xnode, parent;
case X_NodeType_RAW_TEXT :
if( v[ 'UID' ] ) return X_Node_CHASHE[ v[ 'UID' ] ];
for( chashe = X_Node_CHASHE, i = chashe.length; i; ){
- if( ( xnode = X_Node_CHASHE[ --i ] ) && ( xnode[ '_rawObject' ] === v ) ) return xnode;
+ if( ( xnode = chashe[ --i ] ) && ( xnode[ '_rawObject' ] === v ) ) return xnode;
};
};
};
};
-
+// TODO document.all[ uid ] -> document[ uid ]
var X_Node__ie4getRawNode = X_UA_DOM.IE4 && function ( that ){
return that[ '_rawObject' ] ||
- ( that[ '_rawObject' ] = document.all[ 'ie4uid' + that[ '_uid' ] ] ) ||
- ( that[ '_id' ] && ( that[ '_rawObject' ] = document.all[ that[ '_id' ] ] ) );
+ ( that[ '_rawObject' ] = document.all[ 'ie4uid' + that[ '_uid' ] ] || that[ '_id' ] && document.all[ that[ '_id' ] ] );
};
// 1. GPU 一切の更新をスキップ
if( that[ '_flags' ] & X_NodeFlags_GPU_NOW ){
- console.log( '更新のskip ' + !!( that[ '_flags' ] & X_Node_BitMask_IS_DIRTY ) );
+ //console.log( '更新のskip ' + !!( that[ '_flags' ] & X_Node_BitMask_IS_DIRTY ) );
that[ '_flags' ] & X_Node_BitMask_IS_DIRTY && X_Node__updateRawNode( that, elm );
return elm;
};
target = option[ 'target' ],\r
html, k;\r
\r
- target = target === '_self' ? '_parent' : target === '_blank' ? '_self' : target,\r
+ target = target === '_self' ? '_parent' : target === '_blank' ? '_self' : target || '_self',\r
html = [\r
'<form method="', X_FormSender_escapeQuote( option[ 'method' ] || 'GET' ), \r
'" action="', X_FormSender_escapeQuote( option[ 'url' ] || '' ), \r
- '" target="', X_FormSender_escapeQuote( target || '_self' ),\r
+ '" target="', X_FormSender_escapeQuote( target ),\r
'">' ];\r
\r
- if( target === '_top' || target === '_parent' ) this.isJump = true;\r
- if( 0 <= option[ 'timeout' ] ) this.timeout = option[ 'timeout' ];\r
+ if( target === '_top' || target === '_parent' ) X_FormSender.isJump = true;\r
+ if( 0 <= option[ 'timeout' ] ) X_FormSender.timeout = option[ 'timeout' ];\r
\r
for( k in params ){\r
// TODO 使用すべきでない name\r
html.push( '<input type="hidden" name="', X_FormSender_escapeQuote( k ), '" value="', X_FormSender_escapeQuote( params[ k ] || '' ), '">' );\r
+ // TODO 改行を含む text には textarea\r
};\r
\r
html.push( '</form><script>document.forms[0].submit();</script>' );\r
\r
switch( e.type ){\r
case 'ninjaload' :\r
- if( this.isJump ){\r
+ if( X_FormSender.isJump ){\r
return;\r
};\r
\r
if( ++X_FormSender_onloadCount === 1 ){\r
- X_FormSender_errorTimerID = X_FormSender[ 'asyncDispatch' ]( this.timeout, X_EVENT_ERROR );\r
+ X_FormSender_errorTimerID = X_FormSender[ 'asyncDispatch' ]( X_FormSender.timeout, { type : X_EVENT_ERROR, 'timeout' : true } );\r
\r
// TODO レスポンスの html にアクセスしたい場合\r
// TODO samedomain or xiframe-sender\r
!X_UA[ 'iPhone_4s' ] && !X_UA[ 'iPad_2Mini1' ] && !X_UA[ 'iPod_4' ] &&
// Android2 + Gecko で WebAudio が極めて不安定
!( X_UA[ 'Fennec' ] && X_UA[ 'Android' ] < 3 ) &&
- // AOSP でも WebAudio を不完全に実装するものがある
+ // AOSP でも WebAudio を不完全に実装するものがある, touch の有無も不明のため一律に切ってしまう
!X_UA[ 'AOSP' ] && !( X_UA[ 'ChromeWV' ] < 5 ) &&
// Blink HTMLAudio 調査用
//!X_UA[ 'Blink' ] &&
};\r
\r
function XUI_createLayout( props ){\r
- return X_Class_override( new XUI_LayoutBase, props, true );\r
+ return X_Class_override( XUI_LayoutBase(), props, true );\r
}\r
\r
// 属性定義の上書き\r
for( p in defs ){\r
- if( X_EMPTY_OBJECT[ p ] ) continue;\r
+ //if( X_EMPTY_OBJECT[ p ] ) continue;\r
if( p === '_last' ) continue;\r
if( !X_Type_isArray( def = defs[ p ] ) ) continue;\r
F[ p ] = def;\r
\r
// http://d.hatena.ne.jp/edvakf/20100205/1265338487\r
// http://d.hatena.ne.jp/uupaa/20100401/1270097629\r
- ENTER_VIEW : ++X_Event_last, // 要素が視界に入った\r
- OUT_VIEW : ++X_Event_last,\r
+ VIEW_IN : ++X_Event_last, // 要素が視界に入った\r
+ VIEW_OUT : ++X_Event_last,\r
\r
POINTER_OUT : ++X_Event_last,\r
POINTER_IN : ++X_Event_last,\r
\r
// raw pointing device event\r
_POINTER_DOWN : ++X_Event_last,\r
+ _POINTER_MOVE : ++X_Event_last, \r
_POINTER_UP : ++X_Event_last,\r
- _POINTER_MOVE : ++X_Event_last,\r
_POINTER_CANCEL : ++X_Event_last,\r
\r
FILE_DRAG : ++X_Event_last,\r
\r
( function( IdToName, NameToID, p ){\r
for( p in IdToName ){\r
- if( X_EMPTY_OBJECT[ p ] ) continue;\r
- NameToID[ IdToName[ p ] ] = p;\r
+ // if( X_EMPTY_OBJECT[ p ] ) continue;\r
+ NameToID[ IdToName[ p ] ] = parseFloat( p );\r
};\r
})( XUI_Event.IdToName, XUI_Event.NameToID );\r
\r
-/* original:\r
- * Hammer.JS - v1.0.5 - 2013-04-07\r
- * http://eightmedia.github.com/hammer.js\r
- * Jorik Tangelder <j.tangelder@gmail.com>, MIT license\r
- **/\r
-\r
- \r
- var ELEENT_LIST = [],\r
- HAMMER_LIST = [],\r
- POINTERS = [],\r
- ABS = new Function( 'v', 'return v<0?-v:v' );\r
- \r
- function Hammer( uinodeRoot, uinode, type ){\r
- this.uinode = uinode;\r
- this.enabled = true;\r
- \r
- Hammer.startup && Hammer.startup( uinodeRoot );\r
-\r
- this.options = Hammer.defaults;\r
-\r
- // start detection on touchstart\r
- Utils.addEvents( uinode, Hammer.EVENT_TYPES_START, this );\r
- \r
- this[ 'listen' ]( type );\r
- };\r
- \r
- Hammer.defaults = {};\r
- \r
- Hammer.prototype.handleEvent = function( e ){\r
- //var sourceEventType = e.type.toLowerCase();\r
-\r
- var type = IdToGestureID[ e.type ],\r
- gestures = Detection.gestures,\r
- numTouches = 0,// count the total touches on the screen\r
- pointerType, i, l, touches, ret, active, gesture, startEv,\r
- hammer, deltaTime, deltaX, deltaY, velocity, center;\r
- \r
- //console.log( 'Hammer@handleEvent ' + XUI_Event.IdToName[ e.type ] + ' ' + e.pointerType + ' ' + type );\r
- if( !type ) return;\r
- \r
- //console.log( e.type + ' dw:' + XUI_Event._POINTER_DOWN + ' up:' + XUI_Event._POINTER_UP + ' mv:' + XUI_Event._POINTER_MOVE );\r
- \r
- if( e.pointerType ){\r
- type |= POINTER;\r
- switch( e.pointerType ){\r
- case 'touch' :\r
- type |= TOUCH; break;\r
- case 'pen' :\r
- type |= PEN; break;\r
- case 'mouse' :\r
- type |= MOUSE; break;\r
- default :\r
- return;\r
- };\r
- };\r
- \r
- // onmouseup, but when touchend has been fired we do nothing.\r
- // this is for touchdevices which also fire a mouseup on touchend\r
- if( type & MOUSE && touch_triggered ){\r
- return X_CALLBACK_STOP_NOW | X_CALLBACK_PREVENT_DEFAULT;\r
- } else\r
- // mousebutton must be down or a touch event\r
- if( type & TOUCH || //sourceEventType.match(/touch/) || // touch events are always on screen\r
- ( type & POINTER && type & START ) || //sourceEventType.match(/pointerdown/) || // pointerevents touch\r
- ( type & MOUSE && e.button === 0 ) //(sourceEventType.match(/mouse/) && e.which === 1) // mouse is pressed\r
- ){\r
- enable_detect = true;\r
- };\r
-\r
- //console.log( 'Hammer@handleEvent ' + IdToGestureID[ e.type ] + ' ' + e.type + ' ' + XUI_Event._POINTER_DOWN + ' ' + enable_detect );\r
-\r
- // we are in a touch event, set the touch triggered bool to true,\r
- // this for the conflicts that may occur on ios and android\r
- //type & ( TOUCH | POINTER ) && ( touch_triggered = true );\r
- type & TOUCH && ( touch_triggered = true );\r
- //if (sourceEventType.match(/touch|pointer/)) { touch_triggered = true;}\r
-\r
- // when touch has been triggered in this detection session\r
- // and we are now handling a mouse event, we stop that to prevent conflicts\r
- if( enable_detect ){\r
- // update pointerevent\r
-\r
- POINTERS[ e.pointerId ] = type & END ? null : e;\r
- touches = [];\r
- numTouches = -1;\r
- // we can use forEach since pointerEvents only is in IE10\r
- for( i in POINTERS ){\r
- POINTERS[ i ] && ( touches[ ++numTouches ] = POINTERS[ i ] );\r
- };\r
- ++numTouches;\r
- ///console.log( 'numTouches ' + numTouches );\r
-\r
- // if we are in a end event, but when we remove one touch and\r
- // we still have enough, set eventType to move\r
- if( 0 < numTouches && type & END ){ // eventType === Hammer.EVENT_END ){\r
- type = type & POINTER_TYPE_MASK | MOVE;\r
- //eventType = Hammer.EVENT_MOVE;\r
- } else if( !numTouches ){\r
- // no touches, force the end event\r
- type = type & POINTER_TYPE_MASK | END;\r
- //eventType = Hammer.EVENT_END;\r
- };\r
-\r
- // because touchend has no touches, and we often want to use these in our gestures,\r
- // we send the last move event as our eventData in touchend\r
- ( !numTouches && last_move_event !== null ) ?\r
- ( e = last_move_event ):\r
- ( last_move_event = e ); // store the last move event\r
-\r
- e = {\r
- center : Utils.getCenter( touches ),\r
- timeStamp : e.timeStamp,\r
- target : e.target,\r
- touches : touches,\r
- eventType : type & EVENT_TYPE_MASK,\r
- pointerType : type & POINTER_TYPE_MASK\r
- };\r
-\r
- if( type & START ){\r
- if( !this.enabled ) return;\r
- // already busy with a Hammer.gesture detection on an element\r
- if( Detection.current ) return;\r
- Detection.current = {\r
- hammer : this, // reference to HammerInstance we're working for\r
- startEvent : Utils.extend( {}, e ), // start eventData for distances, timing etc\r
- lastEvent : false, // last eventData\r
- name : '' // current gesture we're in/detected, can be 'tap', 'hold' etc\r
- };\r
- Detection.stopped = false;\r
- hammer = this;\r
- active = hammer.activeGesture;\r
- } else\r
- if( !Detection.current || Detection.stopped ){\r
- return;\r
- } else {\r
- hammer = Detection.current.hammer;\r
- active = hammer.activeGesture;\r
- };\r
- \r
- // ----------------------------------------------------------------------------------------------------------------\r
- // ret = Detection.detect( e );\r
-\r
- // ----------------------------------------------------------------------------------------------------------------\r
- // extend event data with calculations about scale, distance etc\r
- // e = Detection.extendEventData( e );\r
- startEv = Detection.current.startEvent;\r
- center = e.center;\r
-\r
- // if the touches change, set the new touches over the startEvent touches\r
- // this because touchevents don't have all the touches on touchstart, or the\r
- // user must place his fingers at the EXACT same time on the screen, which is not realistic\r
- // but, sometimes it happens that both fingers are touching at the EXACT same time\r
- if( startEv && ( numTouches !== startEv.touches.length || touches === startEv.touches ) ){\r
- // extend 1 level deep to get the touchlist with the touch objects\r
- startEv.touches.length = i = 0;\r
- for( ; i < numTouches; ++i ){\r
- startEv.touches[ startEv.touches.length ] = Utils.extend( {}, touches[ i ] );\r
- };\r
- };\r
-\r
- deltaTime = e.timeStamp - startEv.timeStamp;\r
- deltaX = center.pageX - startEv.center.pageX;\r
- deltaY = center.pageY - startEv.center.pageY;\r
- velocity = Utils.getVelocity( deltaTime, deltaX, deltaY );\r
-\r
- Utils.extend( e, {\r
- deltaTime : deltaTime,\r
-\r
- deltaX : deltaX,\r
- deltaY : deltaY,\r
-\r
- velocityX : velocity.x,\r
- velocityY : velocity.y,\r
-\r
- distance : Utils.getDistance( startEv.center, center ),\r
- angle : Utils.getAngle( startEv.center, center ),\r
- direction : Utils.getDirection( startEv.center, center ),\r
-\r
- scale : Utils.getScale( startEv.touches, touches ),\r
- rotation : Utils.getRotation( startEv.touches, touches ),\r
-\r
- startEvent : startEv\r
- });\r
-\r
- // store as previous event event\r
- Detection.current.lastEvent = e;\r
- \r
- // call Hammer.gesture handlers\r
- for( i = 0, l = gestures.length; i < l; ++i ){\r
- gesture = gestures[ i ];\r
- if( Detection.stopped ) break;\r
- //if( active[ gesture.name ] ) console.log( gesture.name );\r
- // only when the instance options have enabled this gesture\r
- active[ gesture.name ] &&\r
- // if a handler returns false, we stop with the detection\r
- ( ret |= ( gesture.handler( e, hammer ) || X_CALLBACK_NONE ) );\r
- };\r
-\r
- // endevent, but not the last touch, so dont stop\r
- type & END && numTouches === 0 && Detection.stopDetect();\r
- \r
- // ----------------------------------------------------------------------------------------------------------------\r
- // trigger the handler\r
- //handler.call( context, HamEvent.collectEventData( element, eventType, e ) );\r
-\r
- // remove pointerevent from list\r
- if( Hammer.HAS_POINTEREVENTS && type & END ){ // eventType === Hammer.EVENT_END ){\r
- numTouches = 0;\r
- };\r
- };\r
-\r
- //debug(sourceEventType +" "+ eventType);\r
-\r
- // on the end we reset everything\r
- if( numTouches === 0 ){\r
- last_move_event = null;\r
- enable_detect = false;\r
- touch_triggered = false;\r
- POINTERS.length = 0;\r
- };\r
- \r
- return ret;\r
- };\r
- \r
- Hammer.startup = function( uinodeRoot ){\r
- // find what eventtypes we add listeners to\r
- /**\r
- * we have different events for each device/browser\r
- * determine what we need and set them in the Hammer.EVENT_TYPES constant\r
- */\r
- // determine the eventtype we want to set\r
- // for non pointer events browsers and mixed browsers,\r
- // like chrome on windows8 touch laptop \r
- var types, name;\r
-\r
- // Register all gestures inside Gestures\r
- for( name in Gestures ){\r
- //Gestures.hasOwnProperty( name ) && \r
- Detection.register( Gestures[ name ] );\r
- };\r
-\r
- Hammer.EVENT_TYPES_START = [ XUI_Event._POINTER_DOWN ];\r
- types = [ XUI_Event._POINTER_MOVE, XUI_Event._POINTER_UP, XUI_Event._POINTER_CANCEL ];\r
-\r
- // Add touch events on the document\r
- Utils.addEvents( uinodeRoot, types, Hammer.prototype.handleEvent );\r
-\r
- // Hammer is ready...!\r
- delete Hammer.startup;\r
- };\r
- \r
- Hammer.prototype.trigger = function( type, gesture ){\r
- if( !this.types[ type ] ) return;\r
- var e = Utils.extend( {}, gesture );\r
- e.type = type;\r
- return this.uinode[ 'dispatch' ]( e );\r
- };\r
- \r
- Hammer.prototype.listen = function( type ){\r
- var gestures = Detection.gestures,\r
- i = gestures.length, g;\r
- for( ; i; ){\r
- g = gestures[ --i ];\r
- if( g.startID <= type && type <= g.endID ){\r
- if( !this.activeGesture ) this.activeGesture = {};\r
- if( !this.types ) this.types = {};\r
- this.activeGesture[ g.name ] = this.types[ type ] = 1;\r
- return;\r
- };\r
- };\r
- };\r
- \r
- Hammer.prototype.unlisten = function( type ){\r
- var gestures = Detection.gestures,\r
- i = gestures.length, g;\r
- if( !this.activeGesture ) return;\r
- for( ; i; ){\r
- g = gestures[ --i ];\r
- if( g.startID <= type && type <= g.endID ){\r
- if( this.activeGesture[ g.name ] ){\r
- if( this.types[ type ] ) delete this.types[ type ];\r
- for( i = g.startID; i <= g.endID; ++i ){\r
- if( this.types[ i ] ) return;\r
- };\r
- delete this.activeGesture[ g.name ];\r
- };\r
- return;\r
- };\r
- };\r
- };\r
- \r
- /*\r
- * "Android version < 2.2" return ev.touches.length === 1 when touchend, others return ev.touches.length === 0\r
- */\r
- Hammer.DO_TOUCHES_FIX = Hammer.HAS_TOUCHEVENTS && ( X_UA[ 'Android' ] < 2.2 || X_UA[ 'Blink' ] || X_UA[ 'Opera' ] );\r
- \r
- // detect touchevents\r
- Hammer.HAS_POINTEREVENTS = true; // navigator.pointerEnabled || navigator.msPointerEnabled;\r
- Hammer.HAS_POINTEREVENTS && console.log( 'Hammer.HAS_POINTEREVENTS : true' );\r
-\r
-\r
- // eventtypes per touchevent (start, move, end)\r
- // are filled by HamEvent.determineEventTypes on setup\r
- Hammer.EVENT_TYPES_START = null;\r
-\r
- // direction defines\r
- Hammer.DIRECTION_DOWN = 'down';\r
- Hammer.DIRECTION_LEFT = 'left';\r
- Hammer.DIRECTION_UP = 'up';\r
- Hammer.DIRECTION_RIGHT = 'right';\r
-\r
- // plugins namespace\r
- Hammer.plugins = {};\r
-\r
- var POINTER = 1,\r
- TOUCH = 2,\r
- PEN = 8, //4,\r
- MOUSE = 8,\r
- START = 16,\r
- MOVE = 32,\r
- END = 64,\r
- CANCEL = 128,\r
- EVENT_TYPE_MASK = START | MOVE | END,\r
- POINTER_TYPE_MASK = POINTER | TOUCH | MOUSE | PEN,\r
- IdToGestureID = {};\r
- IdToGestureID[ XUI_Event._POINTER_DOWN ] = START;\r
- IdToGestureID[ XUI_Event._POINTER_MOVE ] = MOVE;\r
- IdToGestureID[ XUI_Event._POINTER_UP ] = END;\r
- IdToGestureID[ XUI_Event._POINTER_CANCEL ] = END;\r
- \r
- var Utils = {\r
- \r
- /**\r
- * touch events with mouse fallback\r
- * @param {HTMLElement} element\r
- * @param {String} eventType like Hammer.EVENT_MOVE\r
- * @param {Function} handler\r
- */\r
- addEvents : function( uinode, types, context ){\r
- for( var i = 0; i < types.length; ++i ){\r
- uinode[ 'listen' ]( types[ i ], context );\r
- };\r
- },\r
- \r
- /**\r
- * extend method,\r
- * also used for cloning when dest is an empty object\r
- * @param {Object} dest\r
- * @param {Object} src\r
- * @parm {Boolean} merge do a merge\r
- * @returns {Object} dest\r
- */\r
- extend : function extend( dest, src, merge ){\r
- for( var key in src ){\r
- if( dest[ key ] !== undefined && merge ) continue;\r
- dest[ key ] = src[ key ];\r
- };\r
- return dest;\r
- },\r
-\r
- /**\r
- * find if a node is in the given parent\r
- * used for event delegation tricks\r
- * @param {HTMLElement} node\r
- * @param {HTMLElement} parent\r
- * @returns {boolean} has_parent\r
- */\r
- hasParent : function( node, parent ){\r
- while( node && node.tagName ){ /* tagName for ie */\r
- if( node === parent ) return true;\r
- node = node.parentNode;\r
- };\r
- return false;\r
- },\r
-\r
+var XUI_GestureUtils = {\r
/**\r
* get the center of all the touches\r
* @param {Array} touches\r
* @returns {Object} center\r
*/\r
- getCenter : function getCenter(touches) {\r
+ getCenter : function( touches ){\r
var i = 0,\r
l = touches.length,\r
- valuesX, valuesY;\r
+ x, y, minX, minY, maxX, maxY;\r
+\r
switch( l ){\r
case 0 :\r
return {};\r
pageY : ( touches[ 0 ].pageY + touches[ 1 ].pageY ) / 2\r
};\r
};\r
- valuesX = [];\r
- valuesY = [];\r
+ minX = minY = 1 / 0;\r
+ maxX = maxY = - 1 / 0;\r
for( ; i < l; ++i ){\r
- valuesX[ valuesX.length ] = touches[ i ].pageX;\r
- valuesY[ valuesY.length ] = touches[ i ].pageY;\r
+ x = touches[ i ].pageX;\r
+ minX = x < minX ? x : minX;\r
+ maxX = maxX < x ? x : maxX;\r
+ y = touches[ i ].pageY;\r
+ minY = y < minY ? y : minY;\r
+ maxY = maxY < y ? y : maxY;\r
};\r
return {\r
- pageX : ( ( Math.min.apply( null, valuesX ) + Math.max.apply( null, valuesX ) ) / 2 ),\r
- pageY : ( ( Math.min.apply( null, valuesY ) + Math.max.apply( null, valuesY ) ) / 2 )\r
+ pageX : ( minX + maxX ) / 2 | 0,\r
+ pageY : ( minY + maxY ) / 2 | 0\r
};\r
},\r
\r
* @param {Number} deltaY\r
* @returns {Object} velocity\r
*/\r
- getVelocity : function getVelocity( deltaTime, deltaX, deltaY ) {\r
+ getVelocity : function( deltaTime, deltaX, deltaY ) {\r
return {\r
- x : ABS( deltaX / deltaTime ) || 0,\r
- y : ABS( deltaY / deltaTime ) || 0\r
+ x : Math.abs( deltaX / deltaTime ) || 0,\r
+ y : Math.abs( deltaY / deltaTime ) || 0\r
};\r
},\r
\r
* @param {Touch} touch2\r
* @returns {Number} angle\r
*/\r
- getAngle : function getAngle(touch1, touch2) {\r
+ getAngle : function( touch1, touch2 ){\r
var y = touch2.pageY - touch1.pageY,\r
x = touch2.pageX - touch1.pageX;\r
return Math.atan2( y, x ) * 180 / Math.PI;\r
* angle to direction define\r
* @param {Touch} touch1\r
* @param {Touch} touch2\r
- * @returns {String} direction constant, like Hammer.DIRECTION_LEFT\r
+ * @returns {String} direction constant, like 'left'\r
*/\r
- getDirection : function getDirection( touch1, touch2 ){\r
+ getDirection : function( touch1, touch2 ){\r
var x = touch1.pageX - touch2.pageX,\r
y = touch1.pageY - touch2.pageY;\r
- return ABS( y ) <= ABS( x ) ?\r
- ( x > 0 ? Hammer.DIRECTION_LEFT : Hammer.DIRECTION_RIGHT ) :\r
- ( y > 0 ? Hammer.DIRECTION_UP : Hammer.DIRECTION_DOWN );\r
+ return Math.abs( y ) <= Math.abs( x ) ?\r
+ ( x > 0 ? 'left' : 'right' ) :\r
+ ( y > 0 ? 'up' : 'down' );\r
},\r
\r
/**\r
* @param {Touch} touch2\r
* @returns {Number} distance\r
*/\r
- getDistance : function getDistance( touch1, touch2 ){\r
+ getDistance : function( touch1, touch2 ){\r
var x = touch2.pageX - touch1.pageX,\r
y = touch2.pageY - touch1.pageY;\r
return Math.sqrt( ( x * x ) + ( y * y ) );\r
* @param {Array} end\r
* @returns {Number} scale\r
*/\r
- getScale : function getScale( start, end ){\r
+ getScale : function( start, end ){\r
// need two fingers...\r
return ( 2 <= start.length && 2 <= end.length ) ?\r
- Utils.getDistance( end[ 0 ], end[ 1 ] ) / Utils.getDistance( start[ 0 ], start[ 1 ] ) :\r
+ XUI_GestureUtils.getDistance( end[ 0 ], end[ 1 ] ) / XUI_GestureUtils.getDistance( start[ 0 ], start[ 1 ] ) :\r
1;\r
},\r
\r
getRotation : function getRotation( start, end ){\r
// need two fingers\r
return ( 2 <= start.length && 2 <= end.length ) ?\r
- Utils.getAngle( end[ 1 ], end[ 0 ] ) - Utils.getAngle( start[ 1 ], start[ 0 ] ) :\r
+ XUI_GestureUtils.getAngle( end[ 1 ], end[ 0 ] ) - XUI_GestureUtils.getAngle( start[ 1 ], start[ 0 ] ) :\r
0;\r
},\r
\r
* @returns {Boolean} is_vertical\r
*/\r
isVertical : function isVertical( direction ){\r
- return direction === Hammer.DIRECTION_UP || direction === Hammer.DIRECTION_DOWN;\r
+ return direction === 'up' || direction === 'down';\r
}\r
};\r
- \r
- /*\r
- * this holds the last move event,\r
- * used to fix empty touchend issue\r
- * see the onTouch event for an explanation\r
- * @type {Object}\r
- */\r
- var last_move_event = null;\r
\r
- /*\r
- * when the mouse is hold down, this is true\r
- * @type {Boolean}\r
- */\r
- var enable_detect = false;\r
+var XUI_Gesture_POINTERS = {},\r
+ XUI_Gesture_CAPTURED = {},\r
+ XUI_Gesture_DEFAULTS = {};\r
\r
- /*\r
- * when touch events have been fired, this is true\r
- * @type {Boolean}\r
- */\r
- var touch_triggered = false;\r
- \r
- var Detection = {\r
- // contains all registred Gestures in the correct order\r
- gestures : [],\r
+// AbstractUINode に移動\r
\r
- // data of the current Hammer.gesture detection session\r
- current : null,\r
+var XUI_Gesture = Hammer = X_Class_create(\r
+ 'X.UI.Gesture',\r
+ X_Class.NONE,\r
+ {\r
+ uinodeRoot : null,\r
+ uinode : null,\r
+ options : null,\r
+ \r
+ activated : null,\r
+ types : null,\r
\r
- // the previous Hammer.gesture session data\r
- // is a full clone of the previous gesture.current object\r
- previous : null,\r
+ triggered : null,\r
+ canceled : null,\r
+ \r
+ currentName : '',\r
+ startEvent : null,\r
+ lastEvent : null,\r
+ lastMoveEvent : null,\r
+ \r
+ 'Constructor' : function( uinodeRoot, uinode, type, opt_options ){\r
+ this.uinodeRoot = uinodeRoot;\r
+ this.uinode = uinode;\r
+ this.options = X_Object_override( X_Object_copy( XUI_Gesture_DEFAULTS ), opt_options );\r
+ \r
+ this.triggered = {};\r
+ this.canceled = {};\r
\r
- // when this becomes true, no gestures are fired\r
- stopped : false,\r
+ uinode[ 'listen' ]( XUI_Event._POINTER_DOWN, this, XUI_Gesture_handleEvent );\r
+ \r
+ this[ 'listen' ]( type );\r
+ },\r
+ \r
+ trigger : function( type, gesture ){\r
+ var e;\r
+ \r
+ if( !this.types[ type ] ) return X_CALLBACK_NONE;\r
+ e = X_Object_copy( gesture );\r
+ e.type = type;\r
+ return this.uinode[ 'dispatch' ]( e ) || X_CALLBACK_NONE;\r
+ },\r
+ \r
+ listen : function( type ){\r
+ var gestures = XUI_Gesture_LIST,\r
+ i = gestures.length, g;\r
+\r
+ for( ; i; ){\r
+ g = gestures[ --i ];\r
+ if( g.startID <= type && type <= g.endID ){\r
+ if( !this.activated ) this.activated = {};\r
+ if( !this.types ) this.types = {};\r
+ this.activated[ g.name ] = this.types[ type ] = 1;\r
+ break;\r
+ };\r
+ };\r
+ },\r
+ \r
+ unlisten : function( type ){\r
+ var gestures = XUI_Gesture_LIST,\r
+ i = gestures.length,\r
+ active = this.activated, g;\r
+\r
+ if( !active ) return;\r
+ for( ; i; ){\r
+ g = gestures[ --i ];\r
+ if( g.startID <= type && type <= g.endID ){\r
+ if( active[ g.name ] ){\r
+ if( this.types[ type ] ) delete this.types[ type ];\r
+ for( i = g.startID; i <= g.endID; ++i ){\r
+ if( this.types[ i ] ) return;\r
+ };\r
+ delete active[ g.name ];\r
+ };\r
+ break;\r
+ };\r
+ };\r
+ }\r
+ }\r
+);\r
+\r
+function XUI_Gesture_handleEvent( e ){\r
+ var gestures = XUI_Gesture_LIST,\r
+ type = e.type,\r
+ uid = e[ 'pointerId' ],\r
+ isStart = type === XUI_Event._POINTER_DOWN,\r
+ isEnd = type === XUI_Event._POINTER_UP || type === XUI_Event._POINTER_CANCEL || type === XUI_Event.POINTER_OUT,\r
+ hammer = this,\r
+ isMouse = e.pointerType === 'mouse',\r
+ touches = [], \r
+ numTouches = 0,// count the total touches on the screen\r
+ i, p, l, j, captured, ret, activated, gesture, startEv,\r
+ deltaTime, deltaX, deltaY, velocity, center, startCenter;\r
\r
- /**\r
- * clear the Hammer.gesture vars\r
- * this is called on endDetect, but can also be used when a final Hammer.gesture has been detected\r
- * to stop other Gestures from being fired\r
- */\r
- stopDetect : function stopDetect() {\r
- // clone current data to the store as the previous gesture\r
- // used for the double tap gesture, since this is an other gesture detect session\r
- Detection.previous = Utils.extend( {}, Detection.current );\r
+ if( !isStart && !hammer.startEvent ) return;\r
\r
- // reset the current\r
- Detection.current = null;\r
+if( type === XUI_Event.POINTER_OUT ) console.log( 'canceled ...' + e.button )\r
\r
- // stopped!\r
- Detection.stopped = true;\r
- },\r
+ if( isEnd ){\r
+ if( XUI_Gesture_POINTERS[ uid ] ){\r
+ delete XUI_Gesture_POINTERS[ uid ];\r
+ if( XUI_Gesture_CAPTURED[ uid ] ) delete XUI_Gesture_CAPTURED[ uid ];\r
+ };\r
+ } else {\r
+ XUI_Gesture_POINTERS[ uid ] = e;\r
+ };\r
\r
- /**\r
- * register new gesture\r
- * @param {Object} gesture object, see gestures.js for documentation\r
- * @returns {Array} gestures\r
- */\r
- register : function( gesture ){\r
- // add an enable gesture options if there is no given\r
- var options = gesture.defaults || {},\r
- list = Detection.gestures,\r
- _index, i = 0, l = list.length, index;\r
- if( options[ gesture.name ] === undefined ) options[ gesture.name ] = true;\r
-\r
- // extend Hammer default options with the Hammer.gesture options\r
- Utils.extend( Hammer.defaults, options, true );\r
-\r
- // set its index\r
- gesture.index = gesture.index || 1000;\r
-\r
- // add Hammer.gesture to the list\r
- //Detection.gestures.push( gesture );\r
-\r
- // sort the list by index\r
- //Detection.gestures.sort( function( a, b ){\r
- // return\r
- // a.index < b.index ? -1 :\r
- // a.index > b.index ? 1 : 0;\r
- //});\r
- if( l === 0 ){\r
- list[ 0 ] = gesture;\r
- return;\r
+ // mousebutton must be down or a touch event\r
+ if( ( isEnd || !isMouse || e.button === 0 ) ){\r
+ numTouches = -1;\r
+\r
+ for( i in XUI_Gesture_POINTERS ){\r
+ if( p = XUI_Gesture_POINTERS[ i ] ){\r
+ // いずれかの hammer によって束縛されている場合、その束縛している hammer なら\r
+ captured = XUI_Gesture_CAPTURED[ p[ 'pointerId' ] ];\r
+ if( captured && captured !== hammer ){\r
+ continue;\r
+ };\r
+ touches[ ++numTouches ] = p;\r
+ };\r
};\r
- _index = gesture.index;\r
- for( i = 0; i < l; ++i ){\r
- index = list[ i ].index;\r
- if( i === 0 && _index < index ){\r
- list.unshift( gesture );\r
- return;\r
- } else\r
- if( i === l - 1 ){\r
- list[ l ] = gesture;\r
- return;\r
- } else\r
- if( index <= _index && _index < list[ i + 1 ].index ){\r
- list.splice( i, 0, gesture );\r
- return;\r
+ ++numTouches;\r
+\r
+ // if we are in a end event, but when we remove one touch and\r
+ // we still have enough, set eventType to move\r
+ if( !numTouches ){ // no touches, force the end event\r
+ isEnd = true;\r
+ };\r
+\r
+ // because touchend has no touches, and we often want to use these in our gestures,\r
+ // we send the last move event as our eventData in touchend\r
+ ( isEnd && hammer.lastMoveEvent ) ? ( e = hammer.lastMoveEvent ) : ( hammer.lastMoveEvent = e ); // store the last move event\r
+\r
+ hammerEvent = X_Object_copy( e );\r
+ hammerEvent.touches = touches;\r
+\r
+ if( isStart && !hammer.startEvent ){\r
+ console.log( '=- add -=' );\r
+ // already busy with a Hammer.gesture detection on an element\r
+ hammer.startEvent = hammerEvent;\r
+ hammer.uinodeRoot[ 'listen' ]( [ XUI_Event._POINTER_MOVE, XUI_Event._POINTER_UP, XUI_Event._POINTER_CANCEL, XUI_Event.POINTER_OUT ], hammer, XUI_Gesture_handleEvent ); \r
+ };\r
+ \r
+ startEv = hammer.startEvent;\r
+ \r
+\r
+ // if the touches change, set the new touches over the startEvent touches\r
+ // this because touchevents don't have all the touches on touchstart, or the\r
+ // user must place his fingers at the EXACT same time on the screen, which is not realistic\r
+ // but, sometimes it happens that both fingers are touching at the EXACT same time\r
+ if( startEv && ( numTouches !== startEv.touches.length || touches !== startEv.touches ) ){\r
+ // extend 1 level deep to get the touchlist with the touch objects\r
+ startEv.touches.length = i = 0;\r
+ j = -1;\r
+ for( ; i < numTouches; ++i ){\r
+ startEv.touches[ ++j ] = touches[ i ];\r
};\r
};\r
- }\r
- };\r
\r
- var Gestures = Gestures || {};\r
+ deltaTime = hammerEvent.timestamp - startEv.timestamp;\r
+ center = XUI_GestureUtils.getCenter( touches );\r
+ startCenter = startEv.center;\r
+ deltaX = startCenter ? ( center.pageX - startCenter.pageX ) : 0;\r
+ deltaY = startCenter ? ( center.pageY - startCenter.pageY ) : 0;\r
+ velocity = XUI_GestureUtils.getVelocity( deltaTime, deltaX, deltaY );\r
\r
- /**\r
- * Custom gestures\r
- * ==============================\r
- *\r
- * Gesture object\r
- * --------------------\r
- * The object structure of a gesture:\r
- *\r
- * { name: 'mygesture',\r
- * index: 1337,\r
- * defaults: {\r
- * mygesture_option: true\r
- * }\r
- * handler: function(type, e, inst) {\r
- * // trigger gesture event\r
- * inst.trigger(this.name, e );\r
- * }\r
- * }\r
-\r
- * @param {String} name\r
- * this should be the name of the gesture, lowercase\r
- * it is also being used to disable/enable the gesture per instance config.\r
- *\r
- * @param {Number} [index=1000]\r
- * the index of the gesture, where it is going to be in the stack of gestures detection\r
- * like when you build an gesture that depends on the drag gesture, it is a good\r
- * idea to place it after the index of the drag gesture.\r
- *\r
- * @param {Object} [defaults={}]\r
- * the default settings of the gesture. these are added to the instance settings,\r
- * and can be overruled per instance. you can also add the name of the gesture,\r
- * but this is also added by default (and set to true).\r
- *\r
- * @param {Function} handler\r
- * this handles the gesture detection of your custom gesture and receives the\r
- * following arguments:\r
- *\r
- * @param {Object} eventData\r
- * event data containing the following properties:\r
- * timeStamp {Number} time the event occurred\r
- * target {HTMLElement} target element\r
- * touches {Array} touches (fingers, pointers, mouse) on the screen\r
- * pointerType {String} kind of pointer that was used. matches Hammer.POINTER_MOUSE|TOUCH\r
- * center {Object} center position of the touches. contains pageX and pageY\r
- * deltaTime {Number} the total time of the touches in the screen\r
- * deltaX {Number} the delta on x axis we haved moved\r
- * deltaY {Number} the delta on y axis we haved moved\r
- * velocityX {Number} the velocity on the x\r
- * velocityY {Number} the velocity on y\r
- * angle {Number} the angle we are moving\r
- * direction {String} the direction we are moving. matches Hammer.DIRECTION_UP|DOWN|LEFT|RIGHT\r
- * distance {Number} the distance we haved moved\r
- * scale {Number} scaling of the touches, needs 2 touches\r
- * rotation {Number} rotation of the touches, needs 2 touches *\r
- * eventType {String} matches Hammer.EVENT_START|MOVE|END\r
- * srcEvent {Object} the source event, like TouchStart or MouseDown *\r
- * startEvent {Object} contains the same properties as above,\r
- * but from the first touch. this is used to calculate\r
- * distances, deltaTime, scaling etc\r
- *\r
- * @param {Hammer.Instance} inst\r
- * the instance we are doing the detection for. you can get the options from\r
- * the inst.options object and trigger the gesture event by calling inst.trigger\r
- *\r
- *\r
- * Handle gestures\r
- * --------------------\r
- * inside the handler you can get/set Detection.current. This is the current\r
- * detection session. It has the following properties\r
- * @param {String} name\r
- * contains the name of the gesture we have detected. it has not a real function,\r
- * only to check in other gestures if something is detected.\r
- * like in the drag gesture we set it to 'drag' and in the swipe gesture we can\r
- * check if the current gesture is 'drag' by accessing Detection.current.name\r
- *\r
- * @readonly\r
- * @param {Hammer.Instance} inst\r
- * the instance we do the detection for\r
- *\r
- * @readonly\r
- * @param {Object} startEvent\r
- * contains the properties of the first gesture detection in this session.\r
- * Used for calculations about timing, distance, etc.\r
- *\r
- * @readonly\r
- * @param {Object} lastEvent\r
- * contains all the properties of the last gesture detect in this session.\r
- *\r
- * after the gesture detection session has been completed (user has released the screen)\r
- * the Detection.current object is copied into Detection.previous,\r
- * this is usefull for gestures like doubletap, where you need to know if the\r
- * previous gesture was a tap\r
- *\r
- * options that have been set by the instance can be received by calling inst.options\r
- *\r
- * You can trigger a gesture event by calling inst.trigger("mygesture", event).\r
- * The first param is the name of your gesture, the second the event argument\r
- *\r
- *\r
- * Register gestures\r
- * --------------------\r
- * When an gesture is added to the Gestures object, it is auto registered\r
- * at the setup of the first Hammer instance. You can also call Detection.register\r
- * manually and pass your gesture object as a param\r
- *\r
- */\r
+ X_Object_override( hammerEvent, {\r
+ type : isEnd ? XUI_Event._POINTER_UP : type,\r
+ \r
+ deltaTime : deltaTime,\r
\r
- /**\r
- * Hold\r
- * Touch stays at the same place for x time\r
- * @events hold holdend\r
- */\r
- Gestures.Hold = {\r
- name : 'hold',\r
- index : 10,\r
- startID : XUI_Event.HOLD,\r
- endID : XUI_Event.HOLD_END,\r
- defaults : {\r
- hold_timeout : 500,\r
- hold_threshold : 1\r
- },\r
- timerID : null,\r
- holding : false,\r
- handler : function holdGesture( e, hammer ){\r
- switch( e.eventType ){\r
- case START :\r
- // clear any running timers\r
- this.timerID && X_Timer_remove( this.timerID );\r
-\r
- // set the gesture so we can check in the timeout if it still is\r
- Detection.current.name = this.name;\r
- Gestures.Hold.holding = false;\r
- \r
- // set timer and if after the timeout it still is hold,\r
- // we trigger the hold event\r
- this.timerID = X_Timer_add( hammer.options.hold_timeout, 1, Gestures.Hold._onTimer, [ e, hammer ] );\r
- return;\r
-\r
- // when you move or end we clear the timer\r
- case MOVE :\r
- if( e.distance <= hammer.options.hold_threshold ) return;\r
- case END :\r
- this.timerID && X_Timer_remove( this.timerID );\r
- if( Gestures.Hold.holding === true ){\r
- Gestures.Hold.holding = false;\r
- return hammer.trigger( XUI_Event.HOLD_END, e );\r
+ deltaX : deltaX,\r
+ deltaY : deltaY,\r
+\r
+ velocityX : velocity.x,\r
+ velocityY : velocity.y,\r
+\r
+ center : center,\r
+ distance : startCenter ? XUI_GestureUtils.getDistance( startCenter, center ) : 0,\r
+ angle : startCenter ? XUI_GestureUtils.getAngle( startCenter, center ) : 0,\r
+ direction : startCenter ? XUI_GestureUtils.getDirection( startCenter, center ) : 0,\r
+\r
+ scale : XUI_GestureUtils.getScale( startEv.touches, touches ),\r
+ rotation : XUI_GestureUtils.getRotation( startEv.touches, touches ),\r
+\r
+ startEvent : startEv\r
+ });\r
+\r
+ // store as previous event event\r
+ hammer.lastEvent = hammerEvent;\r
+ activated = hammer.activated;\r
+ \r
+ // call Hammer.gesture handlers\r
+ for( i = 0, l = gestures.length; i < l; ++i ){\r
+ gesture = gestures[ i ];\r
+\r
+ if( activated[ gesture.name ] && !hammer.canceled[ gesture.name ] ){\r
+ ( console.log( '... ' + i + ' ' + gesture.name ) );\r
+ // if a handler returns false, we stop with the detection\r
+ ( ret |= ( gesture.handler( hammerEvent, hammer ) || X_CALLBACK_NONE ) );\r
+ };\r
+\r
+ if( ret & X_CALLBACK_CAPTURE_POINTER ){\r
+ for( i = touches.length; i; ){\r
+ uid = touches[ --i ][ 'pointerId' ];\r
+ XUI_Gesture_CAPTURED[ uid ] = hammer;\r
+ //console.log( 'captured. ' + uid );\r
};\r
break;\r
+ } else\r
+ if( ret & X_CALLBACK_STOP_NOW ){\r
+ break;\r
+ };\r
};\r
- },\r
- _onTimer : function( e, hammer ){\r
- if( Detection.current.name === 'hold' ){\r
- hammer.trigger( XUI_Event.HOLD, e );\r
- Gestures.Hold.holding = true;\r
+ //console.log( '----' );\r
+ } else {\r
+ \r
+ };\r
+ \r
+ if( isEnd || ( ret & X_CALLBACK_RELEASE_POINTER ) ){\r
+ for( i = touches.length; i; ){\r
+ uid = touches[ --i ][ 'pointerId' ];\r
+ if( XUI_Gesture_CAPTURED[ uid ] === hammer ){\r
+ console.log( 'released. ' + uid );\r
+ delete XUI_Gesture_CAPTURED[ uid ];\r
+ };\r
};\r
- }\r
- };\r
+ };\r
+\r
+ if( isEnd ){\r
+ console.log( '=- clear -=' );\r
+ hammer.uinodeRoot[ 'unlisten' ]( [ XUI_Event._POINTER_MOVE, XUI_Event._POINTER_UP, XUI_Event._POINTER_CANCEL, XUI_Event.POINTER_OUT ], hammer, XUI_Gesture_handleEvent );\r
+ \r
+ hammer.previous = {\r
+ currentName : hammer.currentName,\r
+ startEvent : hammer.startEvent,\r
+ lastEvent : hammer.lastEvent,\r
+ lastMoveEvent : hammer.lastMoveEvent\r
+ };\r
+ \r
+ X_Object_clear( hammer.triggered );\r
+ X_Object_clear( hammer.canceled );\r
+ \r
+ delete hammer.currentName;\r
+ delete hammer.startEvent;\r
+ delete hammer.lastEvent;\r
+ delete hammer.lastMoveEvent;\r
+ \r
+ ret |= X_CALLBACK_RELEASE_POINTER;\r
+ };\r
+ \r
+ return ret;\r
+};\r
+\r
\r
+\r
+var XUI_Gesture_LIST = [\r
/**\r
- * Tap/DoubleTap\r
- * Quick touch at a place or double at the same place\r
- * @events tap, doubletap\r
+ * Touch\r
+ * Called as first, tells the user has touched the screen\r
+ * @events touch\r
*/\r
- Gestures.Tap = {\r
- name : 'tap',\r
- index : 100,\r
- startID : XUI_Event.TAP,\r
- endID : XUI_Event.DOUBLE_TAP,\r
+ {\r
+ name : 'touch',\r
+ index : -Infinity,\r
defaults : {\r
- tap_max_touchtime : 250,\r
- tap_max_distance : 10,\r
- tap_always : true,\r
- doubletap_distance : 20,\r
- doubletap_interval : 300\r
- },\r
- handler : function tapGesture( e, hammer ){\r
- // previous gesture, for the double tap since these are two different gesture detections\r
- var prev = Detection.previous;\r
- if( e.eventType === END ){\r
- // when the touchtime is higher then the max touch time\r
- // or when the moving distance is too much\r
- if( hammer.options.tap_max_touchtime < e.deltaTime || hammer.options.tap_max_distance < e.distance ) return;\r
+ // call preventDefault at touchstart, and makes the element blocking by\r
+ // disabling the scrolling of the page, but it improves gestures like\r
+ // transforming and dragging.\r
+ // be careful with using this, it can be very annoying for users to be stuck\r
+ // on the page\r
+ prevent_default : false,\r
\r
- // check if double tap\r
- if( prev && prev.name === 'tap' && ( e.timeStamp - prev.lastEvent.timeStamp ) < hammer.options.doubletap_interval && e.distance < hammer.options.doubletap_distance ){\r
- return hammer.trigger( XUI_Event.DOUBLE_TAP, e );\r
- } else\r
- // do a single tap\r
- if( hammer.options.tap_always && Detection.current.name !== 'tap' ){ // EventFire中にalert すると mouseleave で再び呼ばれるのを防ぐ\r
- Detection.current.name = 'tap';\r
- return hammer.trigger( XUI_Event.TAP, e );\r
- };\r
+ // disable mouse events, so only touch (or pen!) input triggers events\r
+ prevent_mouseevents : false\r
+ },\r
+ handler : function( e, hammer ){\r
+ if( hammer.options.prevent_mouseevents && e[ 'pointerType' ] === 'mouse' ){\r
+ return X_CALLBACK_STOP_NOW;\r
};\r
- }\r
- };\r
\r
+ //hammer.options.prevent_default && e.preventDefault();\r
+\r
+ return e.type === XUI_Event._POINTER_DOWN && hammer.trigger( XUI_Event.TOUCH, e );\r
+ }\r
+ },\r
+ \r
/**\r
- * Swipe\r
- * triggers swipe events when the end velocity is above the threshold\r
- * @events swipe, swipeleft, swiperight, swipeup, swipedown\r
+ * Transform\r
+ * User want to scale or rotate with 2 fingers\r
+ * @events transform, transformstart, transformend, pinch, pinchin, pinchout, rotate\r
*/\r
- Gestures.Swipe = {\r
- name : 'swipe',\r
- index : 40,\r
- startID : XUI_Event.SWIP,\r
- endID : XUI_Event.SWIP_DOWN,\r
+ {\r
+ name : 'transform',\r
+ index : 45,\r
+ startID : XUI_Event.TRANSFORM,\r
+ endID : XUI_Event.ROTATE,\r
defaults : {\r
- // set 0 for unlimited, but this can conflict with transform\r
- swipe_max_touches : 1,\r
- swipe_velocity : 0.7\r
+ // factor, no scale is 1, zoomin is to 0 and zoomout until higher then 1\r
+ transform_min_scale : 0.01,\r
+ // rotation in degrees\r
+ transform_min_rotation : 1,\r
+ // prevent default browser behavior when two touches are on the screen\r
+ // but it makes the element a blocking element\r
+ // when you are using the transform gesture, it is a good practice to set this true\r
+ transform_always_block : false\r
},\r
- handler : function swipeGesture(e, hammer) {\r
- if( e.eventType === END ){\r
- // max touches\r
- if( 0 < hammer.options.swipe_max_touches && hammer.options.swipe_max_touches < e.touches.length ) return;\r
-\r
- // when the distance we moved is too small we skip this gesture\r
- // or we can be already in dragging\r
- if( hammer.options.swipe_velocity < e.velocityX || hammer.options.swipe_velocity < e.velocityY ){\r
- // trigger swipe events\r
- hammer.trigger( XUI_Event.SWIP, e );\r
- hammer.trigger(\r
- e.direction === Hammer.DIRECTION_UP ?\r
- XUI_Event.SWIP_UP :\r
- e.direction === Hammer.DIRECTION_DOWN ?\r
- XUI_Event.SWIP_DOWN :\r
- e.direction === Hammer.DIRECTION_LEFT ?\r
- XUI_Event.SWIP_LEFT :\r
- XUI_Event.SWIP_RIGHT,\r
- e\r
- );\r
- };\r
+\r
+ handler : function( e, hammer ){\r
+ var transform = this, ret = X_CALLBACK_NONE, scale_threshold, rotation_threshold;\r
+ \r
+ // current gesture isnt drag, but dragged is true\r
+ // this means an other gesture is busy. now call dragend\r
+ if( hammer.currentName !== transform.name && hammer.triggered[ transform.name ] ){\r
+ ret = hammer.trigger( XUI_Event.TRANSFORM_END, e );\r
+ delete hammer.triggered[ transform.name ];\r
+ return ret;\r
};\r
- }\r
- };\r
\r
+ // atleast multitouch\r
+ if( e.touches.length < 2 ) return;\r
+\r
+ // prevent default when two fingers are on the screen\r
+ //hammer.options.transform_always_block && e.preventDefault();\r
+\r
+ switch( e.type ){\r
+ case XUI_Event._POINTER_DOWN :\r
+ //hammer.triggered[ transform.name ] = false;\r
+ break;\r
+\r
+ case XUI_Event._POINTER_MOVE:\r
+ scale_threshold = Math.abs( 1 - e.scale );\r
+ rotation_threshold = Math.abs( e.rotation );\r
+\r
+ // when the distance we moved is too small we skip this gesture\r
+ // or we can be already in dragging\r
+ if( scale_threshold < hammer.options.transform_min_scale && rotation_threshold < hammer.options.transform_min_rotation ) return;\r
+\r
+ // we are transforming!\r
+ hammer.currentName = transform.name;\r
+\r
+ // first time, trigger dragstart event\r
+ if( !hammer.triggered[ transform.name ] ){\r
+ ret = hammer.trigger( XUI_Event.TRANSFORM_START, e );\r
+ if( ret & X_CALLBACK_PREVENT_DEFAULT ){\r
+ hammer.canceled[ transform.name ] = true;\r
+ break;\r
+ };\r
+ hammer.triggered[ transform.name ] = true;\r
+ break;\r
+ };\r
+\r
+ ret |= hammer.trigger( XUI_Event.TRANSFORM, e );\r
+ // basic transform event\r
+\r
+ // trigger rotate event\r
+ if( hammer.options.transform_min_rotation < rotation_threshold ){\r
+ ret |= hammer.trigger( XUI_Event.ROTATE, e );\r
+ };\r
+ \r
+ // trigger pinch event\r
+ if( scale_threshold > hammer.options.transform_min_scale ){\r
+ ret |= hammer.trigger( XUI_Event.PINCH, e );\r
+ ret |= hammer.trigger( e.scale < 1 ? XUI_Event.PINCH_IN : XUI_Event.PINCH_OUT, e );\r
+ };\r
+ break;\r
+\r
+ case XUI_Event.POINTER_OUT :\r
+ case XUI_Event._POINTER_CANCEL :\r
+ case XUI_Event._POINTER_UP :\r
+ // trigger dragend\r
+ ret = hammer.triggered[ transform.name ] && hammer.trigger( XUI_Event.TRANSFORM_END, e );\r
+ hammer.triggered[ transform.name ] = false;\r
+ break;\r
+ };\r
+ return ret;\r
+ }\r
+ },\r
+ \r
/**\r
* Drag\r
* Move with x fingers (default 1) around on the page. Blocking the scrolling when\r
* you disable scrolling on that area.\r
* @events drag, dragstart, dragend, drapleft, dragright, dragup, dragdown\r
*/\r
- Gestures.Drag = {\r
+ {\r
name : 'drag',\r
index : 50,\r
startID : XUI_Event.DRAG,\r
endID : XUI_Event.DRAG_DOWN,\r
+ \r
defaults : {\r
drag_min_distance : 10,\r
// set 0 for unlimited, but this can conflict with transform\r
// This way, locking occurs only when the distance has become large enough to reliably determine the direction\r
drag_lock_min_distance : 25\r
},\r
- triggered : false,\r
- handler : function dragGesture( e, hammer ){\r
- var last_direction;\r
+\r
+ handler : function( e, hammer ){\r
+ var drag = this, last_direction, ret;\r
+\r
// current gesture isnt drag, but dragged is true\r
// this means an other gesture is busy. now call dragend\r
- if( Detection.current.name !== this.name && this.triggered ){\r
- hammer.trigger( XUI_Event.DRAG_END, e );\r
- this.triggered = false;\r
- return;\r
+ if( hammer.currentName !== drag.name && hammer.triggered[ drag.name ] ){\r
+ ret = hammer.trigger( XUI_Event.DRAG_END, e );\r
+ hammer.triggered[ drag.name ] = false;\r
+ return ret;\r
};\r
\r
// max touches\r
if( 0 < hammer.options.drag_max_touches && hammer.options.drag_max_touches < e.touches.length ) return;\r
-\r
- switch( e.eventType ){\r
- case START:\r
- this.triggered = false;\r
+ \r
+ switch( e.type ){\r
+ case XUI_Event._POINTER_DOWN :\r
+ hammer.triggered[ drag.name ] = false;\r
break;\r
\r
- case MOVE :\r
+ case XUI_Event._POINTER_MOVE :\r
// when the distance we moved is too small we skip this gesture\r
// or we can be already in dragging\r
- if( e.distance < hammer.options.drag_min_distance && Detection.current.name !== this.name ) return;\r
+ if( e.distance < hammer.options.drag_min_distance && hammer.currentName !== drag.name ) return;\r
\r
// we are dragging!\r
- Detection.current.name = this.name;\r
+ hammer.currentName = drag.name;\r
\r
// lock drag to axis?\r
- if( Detection.current.lastEvent.drag_locked_to_axis || ( hammer.options.drag_lock_to_axis && hammer.options.drag_lock_min_distance <= e.distance ) ){\r
+ if( hammer.lastEvent.drag_locked_to_axis || ( hammer.options.drag_lock_to_axis && hammer.options.drag_lock_min_distance <= e.distance ) ){\r
e.drag_locked_to_axis = true;\r
};\r
- last_direction = Detection.current.lastEvent.direction;\r
+ last_direction = hammer.lastEvent.direction;\r
if( e.drag_locked_to_axis && last_direction !== e.direction ){\r
// keep direction on the axis that the drag gesture started on\r
- e.direction = Utils.isVertical( last_direction ) ?\r
- ( e.deltaY < 0 ? Hammer.DIRECTION_UP : Hammer.DIRECTION_DOWN ) :\r
- ( e.deltaX < 0 ? Hammer.DIRECTION_LEFT : Hammer.DIRECTION_RIGHT );\r
+ e.direction = XUI_GestureUtils.isVertical( last_direction ) ?\r
+ ( e.deltaY < 0 ? 'up' : 'down' ) :\r
+ ( e.deltaX < 0 ? 'left' : 'right' );\r
};\r
\r
+ ret = X_CALLBACK_NONE;\r
+\r
// first time, trigger dragstart event\r
- if( !this.triggered ){\r
- hammer.trigger( XUI_Event.DRAG_START, e );\r
- this.triggered = true;\r
+ if( !hammer.triggered[ drag.name ] ){\r
+ ret = hammer.trigger( XUI_Event.DRAG_START, e );\r
+ //if( ret & X_CALLBACK_PREVENT_DEFAULT ){\r
+ // hammer.canceled[ drag.name ] = true;\r
+ // break;\r
+ //};\r
+ ret |= X_CALLBACK_CAPTURE_POINTER;\r
+ console.log( '----- drag start ....' + e.type );\r
+ hammer.triggered[ drag.name ] = true;\r
+ break;\r
};\r
\r
+ //console.log( '----- drag ....' + e.type );\r
// trigger normal event\r
- hammer.trigger( XUI_Event.DRAG, e );\r
+ ret = hammer.trigger( XUI_Event.DRAG, e ) | X_CALLBACK_CAPTURE_POINTER;\r
\r
// direction event, like dragdown\r
- hammer.trigger(\r
- e.direction === Hammer.DIRECTION_UP ?\r
+ ret |= hammer.trigger(\r
+ e.direction === 'up' ?\r
XUI_Event.DRAG_UP :\r
- e.direction === Hammer.DIRECTION_DOWN ?\r
+ e.direction === 'down' ?\r
XUI_Event.DRAG_DOWN :\r
- e.direction === Hammer.DIRECTION_LEFT ?\r
+ e.direction === 'left' ?\r
XUI_Event.DRAG_LEFT :\r
XUI_Event.DRAG_RIGHT,\r
e\r
);\r
\r
// block the browser events\r
- (\r
- ( hammer.options.drag_block_vertical && Utils.isVertical( e.direction ) ) ||\r
- ( hammer.options.drag_block_horizontal && !Utils.isVertical( e.direction ) )\r
- ) && e.preventDefault();\r
+ /* (\r
+ ( hammer.options.drag_block_vertical && XUI_GestureUtils.isVertical( e.direction ) ) ||\r
+ ( hammer.options.drag_block_horizontal && !XUI_GestureUtils.isVertical( e.direction ) )\r
+ ) && e.preventDefault(); */\r
break;\r
\r
- case END:\r
+ case XUI_Event.POINTER_OUT :\r
+ console.log( 'cancel!!' );\r
+ case XUI_Event._POINTER_CANCEL :\r
+ case XUI_Event._POINTER_UP:\r
// trigger dragend\r
- this.triggered && hammer.trigger( XUI_Event.DRAG_END, e );\r
- this.triggered = false;\r
- break;\r
- }\r
- }\r
- };\r
-\r
- /**\r
- * Transform\r
- * User want to scale or rotate with 2 fingers\r
- * @events transform, transformstart, transformend, pinch, pinchin, pinchout, rotate\r
- */\r
- Gestures.Transform = {\r
- name : 'transform',\r
- index : 45,\r
- startID : XUI_Event.TRANSFORM,\r
- endID : XUI_Event.ROTATE,\r
- defaults : {\r
- // factor, no scale is 1, zoomin is to 0 and zoomout until higher then 1\r
- transform_min_scale : 0.01,\r
- // rotation in degrees\r
- transform_min_rotation : 1,\r
- // prevent default browser behavior when two touches are on the screen\r
- // but it makes the element a blocking element\r
- // when you are using the transform gesture, it is a good practice to set this true\r
- transform_always_block : false\r
- },\r
- triggered : false,\r
- handler : function transformGesture( e, hammer ){\r
- // current gesture isnt drag, but dragged is true\r
- // this means an other gesture is busy. now call dragend\r
- if( Detection.current.name !== this.name && this.triggered ){\r
- hammer.trigger( XUI_Event.TRANSFORM_END, e );\r
- this.triggered = false;\r
- return;\r
- };\r
-\r
- // atleast multitouch\r
- if( e.touches.length < 2 ) return;\r
-\r
- // prevent default when two fingers are on the screen\r
- hammer.options.transform_always_block && e.preventDefault();\r
-\r
- switch(e.eventType) {\r
- case START:\r
- this.triggered = false;\r
- break;\r
-\r
- case MOVE:\r
- var scale_threshold = ABS( 1 - e.scale ),\r
- rotation_threshold = ABS( e.rotation );\r
-\r
- // when the distance we moved is too small we skip this gesture\r
- // or we can be already in dragging\r
- if( scale_threshold < hammer.options.transform_min_scale && rotation_threshold < hammer.options.transform_min_rotation ) return;\r
-\r
- // we are transforming!\r
- Detection.current.name = this.name;\r
-\r
- // first time, trigger dragstart event\r
- if( !this.triggered ){\r
- hammer.trigger( XUI_Event.TRANSFORM_START, e );\r
- this.triggered = true;\r
+ if( hammer.triggered[ drag.name ] ){\r
+ ret = hammer.trigger( XUI_Event.DRAG_END, e ) | X_CALLBACK_CAPTURE_POINTER;\r
+ console.log( '----- drag end ....' + e.type );\r
+ hammer.triggered[ drag.name ] = false;\r
};\r
-\r
- hammer.trigger( XUI_Event.TRANSFORM, e );\r
- // basic transform event\r
-\r
- // trigger rotate event\r
- hammer.options.transform_min_rotation < rotation_threshold && hammer.trigger( XUI_Event.ROTATE, e );\r
-\r
- // trigger pinch event\r
- if( scale_threshold > hammer.options.transform_min_scale ){\r
- hammer.trigger( XUI_Event.PINCH, e );\r
- hammer.trigger( e.scale < 1 ? XUI_Event.PINCH_IN : XUI_Event.PINCH_OUT, e );\r
- };\r
- break;\r
-\r
- case END:\r
- // trigger dragend\r
- this.triggered && hammer.trigger( XUI_Event.TRANSFORM_END, e );\r
- this.triggered = false;\r
break;\r
};\r
+ return ret;\r
}\r
- };\r
+ },\r
\r
/**\r
- * Touch\r
- * Called as first, tells the user has touched the screen\r
- * @events touch\r
+ * Tap/DoubleTap\r
+ * Quick touch at a place or double at the same place\r
+ * @events tap, doubletap\r
*/\r
- Gestures.Touch = {\r
- name : 'touch',\r
- index : -Infinity,\r
+ {\r
+ name : 'tap',\r
+ index : 100,\r
+ startID : XUI_Event.TAP,\r
+ endID : XUI_Event.DOUBLE_TAP,\r
defaults : {\r
- // call preventDefault at touchstart, and makes the element blocking by\r
- // disabling the scrolling of the page, but it improves gestures like\r
- // transforming and dragging.\r
- // be careful with using this, it can be very annoying for users to be stuck\r
- // on the page\r
- prevent_default : false,\r
-\r
- // disable mouse events, so only touch (or pen!) input triggers events\r
- prevent_mouseevents : false\r
+ tap_min_touchtime : 75,\r
+ tap_max_touchtime : 250,\r
+ tap_max_distance : 3,\r
+ tap_always : true,\r
+ doubletap_distance : 20,\r
+ doubletap_interval : 300\r
},\r
- handler : function touchGesture( e, hammer ){\r
- if( hammer.options.prevent_mouseevents && e.pointerType === MOUSE ){\r
- Detection.stopDetect();\r
- return;\r
+ handler : function( e, hammer ){\r
+ // previous gesture, for the double tap since these are two different gesture detections\r
+ var prev = hammer.previous;\r
+ \r
+ if( e.type === XUI_Event._POINTER_UP ){\r
+ // when the touchtime is higher then the max touch time\r
+ // or when the moving distance is too much\r
+ if( hammer.options.tap_max_touchtime < e.deltaTime || hammer.options.tap_max_distance < e.distance ) return;\r
+//console.log( ' rap? ' + e.deltaTime + 'ms' );\r
+ //if( e.deltaTime < hammer.options.tap_min_touchtime ) return;\r
+\r
+ // check if double tap\r
+ if( prev && prev.currentName === 'tap' && ( e.timestamp - prev.lastEvent.timestamp ) < hammer.options.doubletap_interval && e.distance < hammer.options.doubletap_distance ){\r
+ return hammer.trigger( XUI_Event.DOUBLE_TAP, e );\r
+ } else\r
+ // do a single tap\r
+ if( hammer.options.tap_always && hammer.currentName !== 'tap' ){ // EventFire中にalert すると mouseleave で再び呼ばれるのを防ぐ\r
+ //hammer.currentName = 'tap';\r
+ console.log( 'tap! ' + e.deltaTime + 'ms' );\r
+ return hammer.trigger( XUI_Event.TAP, e );\r
+ };\r
};\r
+ }\r
+ }\r
\r
- hammer.options.prevent_default && e.preventDefault();\r
+];\r
\r
- e.eventType === START && hammer.trigger( this.name, e );\r
- }\r
+(function( i, g ){\r
+ for( ; i; ){\r
+ g = XUI_Gesture_LIST[ --i ];\r
+ X_Object_override( XUI_Gesture_DEFAULTS, g.defaults );\r
+ delete g.defaults;\r
};\r
+})( XUI_Gesture_LIST.length );\r
\r
- /**\r
- * Release\r
- * Called as last, tells the user has released the screen\r
- * @events release\r
- */\r
- Gestures.Release = {\r
- name : 'release',\r
- index : Infinity,\r
- handler : function releaseGesture( e, hammer ){\r
- e.eventType === END && hammer.trigger( this.name, e );\r
- }\r
- };\r
if( attr ){\r
for( k in usableAttrs ){\r
def = usableAttrs[ k ];\r
- if( def[ 2 ] === XUI_Attr_USER.XNODE && X_Object_inObject( def.No, attr ) && attr[ k ] !== def[ 0 ] ){\r
+ if( def[ 2 ] === XUI_Attr_USER.XNODE && X_Object_inObject( def.No, attr ) && attr[ def.No ] !== def[ 0 ] ){\r
this.xnode[ 'css' ]( XUI_Attr_Rename[ k ] || k, XUI_AbstractUINode_createCssText( this, k ) );\r
};\r
};\r
if( v.indexOf( ' ' ) !== -1 ){\r
v = v.split( ' ' );\r
} else\r
- if( color && X_Type_isNumber( _v = X_Node_CSS_objToIEFilterText( v ) ) ){\r
- v = _v;\r
+ if( color && X_Type_isNumber( _v = X_Node_CSS_parseColor( v ) ) ){\r
+ v = _v; \r
} else {\r
// bad\r
return;\r
( minusPct && -1 <= v && v < 0 ) ||\r
( numerical && 0 <= v ) ||\r
( auto && v === XUI_Attr_AUTO ) ||\r
- ( color && 0 <= v && v <= 0xFFFFFF ) ||\r
+ ( color && ( 0 <= v && v <= 0xFFFFFF ) || ( v !== v ) ) || // isNaN\r
( list && list[ v ] )\r
){\r
// good\r
if( 0 <= x && x < this.boxWidth && 0 <= y && y < this.boxHeight ){\r
!this.hovering && ( this.rootData.hoverList[ this.rootData.hoverList.length ] = this );\r
this.rootData.targetNodeData = this;\r
+ //console.log( 'hit ' + this.xnode.className() )\r
return true;\r
};\r
},\r
\r
/*\r
- * context を明示しない場合、User が context になる！\r
+ * TODO context を明示しない場合、User が context になる！ の処理は User 側へ\r
*/\r
listen : function( type, arg1, arg2, arg3 ){\r
var root, events, counter, f;\r
events[ events.length ] = [ type, arg1, arg2, arg3 ];\r
return this;\r
};\r
+ \r
+ if( this[ 'listening' ]( type, arg1, arg2, arg3 ) ){\r
+ console.log( '. listening' )\r
+ return this;\r
+ };\r
+ \r
if( XUI_Event._START_XUI_EVENT < type && type < XUI_Event._END_XUI_EVENT ){\r
if( !this.gesture ){\r
this.gesture = new Hammer( this.rootData, this, type );\r
++counter[ type ];\r
} else {\r
counter[ type ] = 1; \r
- root.xnodeInteractiveLayer[ 'listen' ]( XUI_Event.IdToName[ type ], X_UI_eventRellay );\r
+ XUI_xnodeIneraction[ 'listen' ]( XUI_Event.IdToName[ type ], X_UI_eventRellay );\r
};\r
+ if( type === XUI_Event._POINTER_UP ) console.log( '... addEvent ' + counter[ type ] );\r
};\r
};\r
\r
- arg1 && arg1.cbKind ? ( f = arg1 ) : ( f = X_Closure_classifyCallbackArgs( arg1, arg2, arg3 ) );\r
- if( !f.cbKind ){\r
- return X_EventDispatcher_listen.call( this, type, this.User, f );\r
- } else\r
- if( f.cbKind === X_CLOSURE_FUNC_ONLY ){\r
- return X_EventDispatcher_listen.call( this, type, this.User, f.func, f.supplement );\r
- };\r
return X_EventDispatcher_listen.apply( this, arguments );\r
},\r
unlisten : function( type, arg1, arg2, arg3 ){\r
- var root, events, i, ev, counter, f;\r
+ var root, events, i, ev, counter;\r
+ \r
if( XUI_Event._START_POINTER <= type && type <= XUI_Event._END_POINTER ){\r
if( this.phase < 3 ){\r
if( !( events = this.reserveEvents ) ) return this;\r
for( i = events.length; i; ){\r
ev = events[ --i ];\r
- if( ev[ 0 ] === type && ev[ 1 ] === arg1 && ev[ 2 ] === arg2 ){\r
+ if( ev[ 0 ] === type && ev[ 1 ] === arg1 && ev[ 2 ] === arg2 && ev[ 3 ] === arg3 ){\r
events.split( i, 1 );\r
return this;\r
};\r
return this;\r
};\r
\r
+ if( !this[ 'listening' ]( type, arg1, arg2, arg3 ) ){\r
+ return this;\r
+ };\r
+ \r
if( XUI_Event._START_XUI_EVENT < type && type < XUI_Event._END_XUI_EVENT ){\r
this.gesture && this.gesture[ 'unlisten' ]( type );\r
} else {\r
root = this.rootData;\r
counter = root.eventCounter;\r
- if( !counter[ type ] ) return this;\r
- --counter[ type ];\r
- if( counter[ type ] === 0 ){\r
- root.xnodeInteractiveLayer[ 'unlisten' ]( XUI_Event.IdToName[ type ], X_UI_eventRellay );\r
- delete counter[ type ];\r
+ \r
+ if( !counter[ type ] ){\r
+ console.log( '... no event ... ' + counter[ type ] );\r
+ };\r
+ \r
+ if( type === XUI_Event._POINTER_UP ) console.log( '... removeEvent ' + counter[ type ] );\r
+ \r
+ if( counter[ type ] === 1 ){\r
+ XUI_xnodeIneraction[ 'unlisten' ]( XUI_Event.IdToName[ type ], X_UI_eventRellay );\r
+ counter[ type ] = 0;\r
+ } else\r
+ if( counter[ type ] ){\r
+ --counter[ type ];\r
};\r
};\r
};\r
- arg1 && arg1.cbKind ? ( f = arg1 ) : ( f = X_Closure_classifyCallbackArgs( arg1, arg2, arg3 ) );\r
- if( !f.cbKind ){\r
- return X_EventDispatcher_unlisten.apply( this, [ type, this.User, f ] );\r
- } else\r
- if( f.cbKind === X_CLOSURE_FUNC_ONLY ){\r
- return X_EventDispatcher_unlisten.apply( this, [ type, this.User, f.func, f.supplement ] );\r
- };\r
+\r
return X_EventDispatcher_unlisten.apply( this, arguments );\r
},\r
\r
+ /*\r
dispatch : function( e ){\r
//console.log( e.type + ' ' + ( this[ '_listeners' ] && this[ '_listeners' ][ e.type ] ) );\r
- var xve = XUI_Event,\r
- ret = X_EventDispatcher_dispatch.call( this, e ),\r
+ var ret = X_EventDispatcher_dispatch.call( this, e ),\r
type = e.type || e;\r
\r
// TODO captureEvent PointerEvent\r
- if( ret & X_CALLBACK_CAPTURE_POINTER && !this.hitChildData && XUI_Event._POINTER_MOVE === type ){\r
+ if( ret & X_CALLBACK_CAPTURE_POINTER ){\r
this.rootData.monopolyNodeData = this;\r
return ret;\r
};\r
- this.rootData.monopolyNodeData = null;\r
- if( xve._START_BUBLEUP < type && this.parentData && !( ret & X_CALLBACK_STOP_PROPAGATION ) && !( ret & X_CALLBACK_STOP_NOW ) ) return this.parentData[ 'dispatch' ]( e );\r
+ if( this.rootData.monopolyNodeData === this ) this.rootData.monopolyNodeData = null;\r
+ if( XUI_Event._START_BUBLEUP < type && this.parentData && !( ret & X_CALLBACK_STOP_PROPAGATION ) ){\r
+ return this.parentData[ 'dispatch' ]( e );\r
+ };\r
return ret;\r
- },\r
+ }, */\r
\r
setItemData : function( itemData ){\r
if( this.itemData === itemData ) return;\r
\r
if( X_Type_isNumber( v ) ){\r
if( auto && v === XUI_Attr_AUTO ) return 'auto';\r
- if( length || minusLen ) return v + 'em';\r
+ if( length || minusLen ) return v ? v + 'em' : 0;\r
if( numerical ) return v;\r
if( list && list[ v ] ) return list[ v ];\r
if( color ){\r
if( v < 0x100000 ){\r
v = '00000' + v.toString( 16 );\r
return '#' + v.substr( v.length - 6 );\r
+ } else\r
+ if( v !== v ){ // iSNaN\r
+ return 'none';\r
};\r
return '#' + v.toString( 16 );\r
};\r
},\r
\r
listen : function( type, arg1, arg2, arg3 ){\r
- X_Pair_get( this )[ 'listen' ]( type, arg1, arg2, arg3 );\r
+ var pair = X_Pair_get( this );\r
+ \r
+ ( !arg1 || !arg1.cbKind ) && ( arg1 = X_Closure_classifyCallbackArgs( arg1, arg2, arg3, this ) );\r
+ \r
+ if( arg1.cbKind === X_CLOSURE_FUNC_ONLY ){\r
+ pair[ 'listen' ].apply( pair, [ type, this, arg1.func, arg1.supplement ] );\r
+ } else {\r
+ pair[ 'listen' ]( type, arg1.context, arg1.func, arg1.supplement );\r
+ };\r
return this;\r
},\r
listenOnce : function( type, arg1, arg2, arg3 ){\r
return X_Pair_get( this )[ 'listening' ]( type, arg1, arg2, arg3 );\r
},\r
unlisten : function( type, arg1, arg2, arg3 ){\r
- X_Pair_get( this )[ 'unlisten' ]( type, arg1, arg2, arg3 );\r
+ var pair = X_Pair_get( this );\r
+ \r
+ ( !arg1 || !arg1.cbKind ) && ( arg1 = X_Closure_classifyCallbackArgs( arg1, arg2, arg3, this ) );\r
+ \r
+ if( arg1.cbKind === X_CLOSURE_FUNC_ONLY ){\r
+ pair[ 'unlisten' ].apply( pair, [ type, this, arg1.func, arg1.supplement ] );\r
+ } else {\r
+ pair[ 'unlisten' ]( type, arg1.context, arg1.func, arg1.supplement );\r
+ };\r
return this;\r
},\r
dispatch : function( e ){\r
\r
data.preMesure( w, h );\r
\r
- console.log( w + ' > ' + data.boxWidth );\r
+ //console.log( w + ' > ' + data.boxWidth );\r
\r
// data.boxWidth と data.boxHeight のどちらかでも Infinity\r
if( isNeedsDetection && data.boxWidth + data.boxHeight === XUI_Attr_AUTO ) return false;\r
_h = data.contentHeight;\r
\r
if( ( uinodes = data.uinodes ) && ( l = uinodes.length ) ){\r
- console.log( _w + ' x ' + _h + ' l:' + l );\r
+ //console.log( _w + ' x ' + _h + ' l:' + l );\r
for( i = 0; i < l; ++i ){\r
node = uinodes[ i ];\r
node.calculate( false, _x, _y, _w, _h );\r
\r
capcher : function( x, y ){\r
var uinodes, child, _x, _y, hit, i;\r
+ \r
if( this.pointerDisabled ) return false;\r
+\r
delete this.hitChildData;\r
x -= this.boxX;\r
y -= this.boxY;\r
};\r
hit = 0 <= x && x < this.boxWidth && 0 <= y && y < this.boxHeight;\r
( this.hitChildData || hit ) && !this.hovering && ( this.rootData.hoverList[ this.rootData.hoverList.length ] = this );\r
- if( hit && this.hitChildData === null ) this.rootData.targetNodeData = this;\r
+ if( hit && this.hitChildData === null ){\r
+ this.rootData.targetNodeData = this;\r
+ };\r
return hit || !!this.hitChildData;\r
},\r
\r
},\r
\r
clone : function( opt_cloneListener ){\r
- var clone = XUI_AbstractUINode.prototype.clone.call( this, opt_cloneListener ),\r
+ var clone = X.UI.AbstractUINode.prototype.clone.call( this, opt_cloneListener ),\r
uinodes = X_Pair_get( this ).uinodes,\r
i = 0,\r
l = uinodes && uinodes.length,\r
Constructor : function( user, layout, args ){\r
this[ 'Super' ]( user, layout, args );\r
this._containerNode = X_Pair_get( this.containerNode );\r
- this.xnodeSlider = this._containerNode.xnode[ 'className' ]( 'ScrollSlider' ).listen( X_EVENT_ANIME_END, this, X_UI_ScrollBox_onAnimeEnd );\r
+ this.xnodeSlider = this._containerNode.xnode[ 'className' ]( 'ScrollSlider' )[ 'listen' ]( X_EVENT_ANIME_END, this, X_UI_ScrollBox_onAnimeEnd );\r
this.xnode[ 'className' ]( 'ScrollBox' );\r
},\r
\r
X_UI_ScrollBox_translate( this, this.scrollXMax * this.scrollXRatio, this.scrollYMax * this.scrollYRatio, 100, '', 300 );\r
} else {\r
// scroller 作る\r
- this[ 'listen' ]( XUI_Event._POINTER_DOWN, this, X_UI_ScrollBox_onStart );\r
+ // shadow の listen には this が必要!\r
+ // TODO AbstractUI の listen が悪い!\r
+ this[ 'listen' ]( XUI_Event._POINTER_DOWN, this, X_UI_ScrollBox_onStart )\r
+ [ 'listen' ]( XUI_Event.DRAG, this, X_UI_ScrollBox_onMove );\r
+ this[ 'listen' ]( XUI_Event.DRAG_END, this, X_UI_ScrollBox_onEnd );\r
X_UI_rootData[ 'listen' ]( XUI_Event.LAYOUT_BEFORE, this, X_UI_ScrollBox_onLayoutBefore );\r
\r
X_UI_ScrollBox_translate( this, this.scrollXMax * this.scrollXRatio, this.scrollYMax * this.scrollYRatio, 100, '', 300 );\r
// scroll 不要\r
if( this.scrolling ){\r
// scroller 削除\r
- this[ 'unlisten' ]( XUI_Event._POINTER_DOWN, this, X_UI_ScrollBox_onStart );\r
+ this[ 'unlisten' ]( XUI_Event._POINTER_DOWN, this, X_UI_ScrollBox_onStart )\r
+ [ 'unlisten' ]( XUI_Event.DRAG, this, X_UI_ScrollBox_onMove );\r
+ this[ 'unlisten' ]( XUI_Event.DRAG_END, this, X_UI_ScrollBox_onEnd );\r
X_UI_rootData[ 'unlisten' ]( XUI_Event.LAYOUT_BEFORE, this, X_UI_ScrollBox_onLayoutBefore );\r
\r
( this.scrollX !== 0 || this.scrollY !== 0 ) && X_UI_ScrollBox_translate( this, 0, 0, 100, '', 300 );\r
\r
// TODO use scrollLeft, scrollTop\r
function X_UI_ScrollBox_translate( that, x, y, opt_time, opt_easing, opt_release ){\r
- var scrollBoxSize, indicatorSize;\r
+ var scrollBoxH = that.fontSize * that.boxHeight,\r
+ scrollBoxW = that.fontSize * that.boxWidth,\r
+ indicatorH, indicatorW;\r
\r
opt_time = 0 <= opt_time ? opt_time : 0;\r
opt_easing = opt_easing === '' ? '' : opt_easing || 'circular';\r
opt_time, opt_easing, opt_release\r
);\r
\r
+ if( X_UA[ 'IE' ] < 6 ){\r
+ XUI_ScrollBox_indicatorV && XUI_ScrollBox_indicatorV[ 'css' ]( 'left', ( scrollBoxW - that.fontSize * 0.6 | 0 ) + 'px' );\r
+ XUI_ScrollBox_indicatorH && XUI_ScrollBox_indicatorH[ 'css' ]( 'top' , ( scrollBoxH - that.fontSize * 0.6 | 0 ) + 'px' );\r
+ };\r
+\r
if( that.hasVScroll && XUI_ScrollBox_indicatorV ){\r
- scrollBoxSize = that.fontSize * that.boxHeight;\r
- indicatorSize = scrollBoxSize * scrollBoxSize / ( - that.scrollYMax + scrollBoxSize );\r
- scrollBoxSize -= indicatorSize;\r
+ indicatorH = scrollBoxH * scrollBoxH / ( - that.scrollYMax + scrollBoxH );\r
+ scrollBoxH -= indicatorH;\r
+\r
XUI_ScrollBox_indicatorV\r
[ 'css' ]({\r
- height : ( indicatorSize | 0 ) + 'px'\r
+ height : ( indicatorH | 0 ) + 'px'\r
})\r
[ 'animate' ](\r
{\r
- y : scrollBoxSize * that.scrollY / that.scrollYMax\r
+ y : scrollBoxH * that.scrollY / that.scrollYMax\r
},\r
{\r
- y : scrollBoxSize * y / that.scrollYMax,\r
+ y : scrollBoxH * y / that.scrollYMax,\r
opacity : 1\r
},\r
opt_time, opt_easing, opt_release\r
);\r
};\r
if( that.hasHScroll && XUI_ScrollBox_indicatorH ){\r
- scrollBoxSize = that.fontSize * that.boxWidth;\r
- indicatorSize = scrollBoxSize * scrollBoxSize / ( - that.scrollXMax + scrollBoxSize );\r
- scrollBoxSize -= indicatorSize;\r
+ indicatorW = scrollBoxW * scrollBoxW / ( - that.scrollXMax + scrollBoxW );\r
+ scrollBoxW -= indicatorW;\r
XUI_ScrollBox_indicatorH\r
[ 'css' ]({\r
- width : ( indicatorSize | 0 ) + 'px'\r
+ width : ( indicatorW | 0 ) + 'px'\r
})\r
[ 'animate' ](\r
{\r
- x : scrollBoxSize * that.scrollX / that.scrollXMax\r
+ x : scrollBoxW * that.scrollX / that.scrollXMax\r
},\r
{\r
- x : scrollBoxSize * x / that.scrollXMax,\r
+ x : scrollBoxW * x / that.scrollXMax,\r
opacity : 1\r
},\r
opt_time, opt_easing, opt_release\r
\r
function X_UI_ScrollBox_onStart( e ){\r
var ret = X_CALLBACK_NONE;\r
-\r
- // React to left mouse button only\r
- if( e.pointerType === 'mouse' && e.button !== 0 ){\r
- return ret;\r
- };\r
\r
if( !this.scrollEnabled || ( this.initiated && e.pointerType !== this.initiated ) ){\r
return ret;\r
// スクロール中の停止\r
if( this.isInTransition ){\r
this.isInTransition = false;\r
- console.log( '-1-' );\r
+ //console.log( '-1-' );\r
this[ 'dispatch' ]( XUI_Event.SCROLL_END );\r
// TODO current位置\r
this.xnodeSlider[ 'stop' ]();\r
this.pointX = e.pageX;\r
this.pointY = e.pageY;\r
\r
- console.log( 'scrollstart ' + e.pageY );\r
- \r
- this[ 'listen' ]( XUI_Event._POINTER_MOVE, this, X_UI_ScrollBox_onMove );\r
- this[ 'listen' ]( [ XUI_Event._POINTER_UP, XUI_Event.POINTER_OUT, XUI_Event._POINTER_CANCEL ], this, X_UI_ScrollBox_onEnd );\r
+ console.log( 'scrollstart ' + e.pageY + e.target.className() );\r
\r
return ret | X_CALLBACK_PREVENT_DEFAULT;\r
};\r
if( !this.scrollEnabled || e.pointerType !== this.initiated ){\r
return ret;\r
};\r
- \r
- if( e.buttons !== 1 ){\r
- return X_UI_ScrollBox_onEnd.call( this, e );\r
- };\r
\r
// gpu の用意\r
if( !this.xnodeSlider[ '_anime' ] ){\r
momentumX, momentumY,\r
duration, distanceX, distanceY;\r
\r
- console.log( e.type + ' onend ' + XUI_Event.POINTER_OUT );\r
- \r
- this[ 'unlisten' ]( XUI_Event._POINTER_MOVE, this, X_UI_ScrollBox_onMove );\r
- this[ 'unlisten' ]( [ XUI_Event._POINTER_UP, XUI_Event.POINTER_OUT, XUI_Event._POINTER_CANCEL ], this, X_UI_ScrollBox_onEnd );\r
+ //console.log( e.type + ' onend ' + XUI_Event.POINTER_OUT );\r
\r
if( !this.scrollEnabled || e.pointerType !== this.initiated ){\r
- console.log( e.type + ' onend 1 ' + e.pointerType + ' ' + this.initiated );\r
+ //console.log( e.type + ' onend 1 ' + e.pointerType + ' ' + this.initiated );\r
return ret;\r
};\r
\r
\r
// reset if we are outside of the boundaries\r
if( X_UI_ScrollBox_resetPosition( this, this.bounceTime ) ){\r
- console.log( e.type + ' onend 2 ' + XUI_Event.POINTER_OUT );\r
- return ret;\r
+ //console.log( e.type + ' onend 2 ' + XUI_Event.POINTER_OUT );\r
+ return ret | X_CALLBACK_PREVENT_DEFAULT | X_CALLBACK_RELEASE_POINTER;\r
};\r
\r
// we scrolled less than 10 pixels\r
if( !this.moved ){\r
this[ 'dispatch' ]( X_EVENT_CANCELED );\r
- console.log( 'we scrolled less than 10 pixels ' + e.pageY );\r
- return ret;\r
+ //console.log( 'we scrolled less than 10 pixels ' + e.pageY );\r
+ return ret | X_CALLBACK_PREVENT_DEFAULT | X_CALLBACK_RELEASE_POINTER;\r
};\r
\r
// start momentum animation if needed\r
time = Math.max( momentumX.duration, momentumY.duration ) | 0;\r
this.isInTransition = true;\r
} else {\r
- console.log( '慣性無し' );\r
+ //console.log( '慣性無し' );\r
};\r
\r
if( newX != this.scrollX || newY != this.scrollY ){\r
easing = 'quadratic';\r
};\r
\r
- console.log( 'end2 x:' + newX + ' y:' + newY + '<-y:' + this.scrollY + ' t:' + time );\r
+ //console.log( 'end2 x:' + newX + ' y:' + newY + '<-y:' + this.scrollY + ' t:' + time );\r
this.scrollTo( newX, newY, time, easing, 1000 );\r
} else {\r
- console.log( 'end1 x:' + newX + ' y:' + newY );\r
+ //console.log( 'end1 x:' + newX + ' y:' + newY );\r
this.scrollTo( newX, newY, 0, '', 1000 ); // ensures that the last position is rounded\r
- console.log( '-3-' );\r
+ //console.log( '-3-' );\r
this[ 'dispatch' ]( XUI_Event.SCROLL_END ); \r
};\r
- return ret;\r
+ return ret | X_CALLBACK_PREVENT_DEFAULT | X_CALLBACK_RELEASE_POINTER;\r
};\r
\r
function X_UI_ScrollBox_resetPosition( that, time ){\r
};\r
\r
if( x === that.scrollX && y === that.scrollY ){\r
- console.log( 'no バウンド y:' + y + ' max:' + that.scrollYMax );\r
+ //console.log( 'no バウンド y:' + y + ' max:' + that.scrollYMax );\r
return false;\r
};\r
\r
- console.log( ' ===> resetPosition - バウンド!' );\r
- console.log( ' x:' + x + ' y:' + y );\r
+ //console.log( ' ===> resetPosition - バウンド!' );\r
+ //console.log( ' x:' + x + ' y:' + y );\r
that.scrollTo( x, y, time, that.bounceEasing, 1000 );\r
\r
return true;\r
};\r
if( e.target === this.xnodeSlider && this.isInTransition && !X_UI_ScrollBox_resetPosition( this, this.bounceTime ) ){\r
this.isInTransition = false;\r
- console.log( '-2-' );\r
+ //console.log( '-2-' );\r
this[ 'dispatch' ]( XUI_Event.SCROLL_END );\r
};\r
- console.log(' -2.1- '+this.isInTransition );\r
+ //console.log(' -2.1- '+this.isInTransition );\r
return X_CALLBACK_NONE;\r
};\r
\r
var X_UI_Text_SUPPORT_ATTRS = {\r
- content : [ '', XUI_Dirty.CONTENT, XUI_Attr_USER.UINODE, XUI_Attr_Type.STRING ]\r
-};\r
+ content : [ '' , XUI_Dirty.CONTENT, XUI_Attr_USER.UINODE, XUI_Attr_Type.STRING ],\r
+ bgColor : [ NaN, XUI_Dirty.PAINT, XUI_Attr_USER.XNODE, XUI_Attr_Type.COLOR ]\r
+},\r
+\r
+X_UI_Text_usableAttrs = XUI_Attr_createAttrDef( XUI_AbstractUINode.prototype.usableAttrs, X_UI_Text_SUPPORT_ATTRS );\r
\r
var XUI_Text = XUI_AbstractUINode.inherits(\r
'_Text',\r
{\r
content : '',\r
\r
- usableAttrs : XUI_Attr_createAttrDef( XUI_AbstractUINode.prototype.usableAttrs, X_UI_Text_SUPPORT_ATTRS ),\r
+ usableAttrs : __textAttrs = X_UI_Text_usableAttrs,\r
+ \r
+ attrClass : XUI_Attr_preset( XUI_AbstractUINode.prototype.attrClass, X_UI_Text_usableAttrs ),\r
\r
Constructor : function( user, content ){\r
if( !( user[ 'instanceOf' ]( X.UI.Text ) ) ){\r
XUI_AbstractUINode.prototype.creationComplete.apply( this, arguments ); \r
},\r
\r
+ setContent : function( v ){\r
+ if( this.content !== v ){\r
+ this.content = v;\r
+ this.xnode && this.xnode[ 'text' ]( v );\r
+ this.rootData.reserveCalc();\r
+ if( this.dirty < XUI_Dirty.CONTENT ) this.dirty = XUI_Dirty.CONTENT;\r
+ };\r
+ return this;\r
+ },\r
+ \r
setItemData : function( itemData ){\r
if( this.itemData === itemData ) return;\r
\r
XUI_AbstractUINode.prototype.setItemData.apply( this, arguments );\r
\r
if( X_Type_isObject( itemData = this.itemData ) && this.dataFeild ){\r
- this.User.content( itemData[ this.dataFeild ] || '' );\r
+ this.setContent( itemData[ this.dataFeild ] || '' );\r
};\r
}\r
}\r
X_Type_isObject( opt_attrObj = opt_attrObj || opt_content ) && this[ 'attr' ]( opt_attrObj );\r
},\r
content : function( v ){\r
- var data = X_Pair_get( this );\r
- if( data.content !== v ){\r
- data.xnode && data.xnode[ 'text' ]( v );\r
- data.rootData.reserveCalc();\r
- if( data.dirty < XUI_Dirty.CONTENT ) data.dirty = XUI_Dirty.CONTENT;\r
+ var data = X_Pair_get( this ),\r
+ content = data.content;\r
+ \r
+ if( v === undefined ){\r
+ return content;\r
};\r
+ content !== v && data.setContent( v );\r
+ return this;\r
}\r
}\r
);
\ No newline at end of file
var X_UI_rootData = null,
- X_UI_eventBusy = false;
+ XUI_xnodeIneraction = null,
+ XUI_interactionBusy = false;
function X_UI_eventRellay( e ){
var font = X_ViewPort_baseFontSize,
data = X_UI_rootData,
sysOnly = false,
ret = X_CALLBACK_NONE,
- list, parent, _ret;
+ list, parent, _ret, eventIn, eventOut;
// mouseup で alert を出すと mouseleave が発生、ということでイベント中のイベント発火を禁止
- if( !data || X_UI_eventBusy ) return ret;
- data._eventBusy = true;
+ if( !data || XUI_interactionBusy ) return ret;
+ XUI_interactionBusy = true;
- if( type !== '' + XUI_Event._POINTER_MOVE ){
- //console.log( e.type + ' ' + type + ' x:' + x + ', y:' + y );
- };
+
e.type = type;
+ // TODO capture は pointer 毎に!
if( data && ( data = data.monopolyNodeData ) && ( ret = data[ 'dispatch' ]( e ) ) & X_CALLBACK_CAPTURE_POINTER ){
- X_UI_eventBusy = false;
+ console.log( 'capture ' + data.xnode.className() );
+ XUI_interactionBusy = false;
return ret | X_CALLBACK_PREVENT_DEFAULT;
};
+ //if( ret & X_CALLBACK_RELEASE_POINTER ){
+ data && ( data.monopolyNodeData = null );
+ //return ret | X_CALLBACK_PREVENT_DEFAULT;
+ //};
list = X_UI_rootData.hoverList;
( X_UI_rootData.targetNodeData = X_UI_rootData ).capcher( x, y );
data = X_UI_rootData.targetNodeData;
- //data !== X_UI_rootData && console.log( data.xnode[ 'text' ]() );
+ if( type !== XUI_Event._POINTER_MOVE ){
+ //console.log( data.xnode.className() + '>' + e.type + ' ' + type + ' x:' + x + ', y:' + y );
+ //console.dir( data )
+ //data !== X_UI_rootData && console.log( ( data.xnode[ 'className' ]() + data.xnode[ 'text' ]() ).substr( 0, 15 ) );
+ };
- while( data ){
+
+
+ while( true ){
_ret = data[ 'dispatch' ]( e, sysOnly );
ret |= _ret;
- if( _ret & X_CALLBACK_CAPTURE_POINTER || _ret & X_CALLBACK_STOP_PROPAGATION || _ret & X_CALLBACK_STOP_NOW ) break; // sysOnly = true;
+ if( X_UI_rootData !== data && _ret & X_CALLBACK_CAPTURE_POINTER ){
+ X_UI_rootData.monopolyNodeData = data;
+ break;
+ };
+ if( X_UI_rootData.monopolyNodeData === data ) X_UI_rootData.monopolyNodeData = null;
+ if( type < XUI_Event._START_BUBLEUP || ret & X_CALLBACK_STOP_PROPAGATION ){
+ break;
+ };
+ if( !data.parentData ) break;
data = data.parentData;
+ if( type !== XUI_Event._POINTER_MOVE ){
+ //data !== X_UI_rootData && console.log( ( data.xnode[ 'className' ]() + data.xnode[ 'text' ]() ).substr( 0, 15 ) );
+ };
};
+ if( data !== X_UI_rootData ) ret |= X_UI_rootData[ 'dispatch' ]( e, sysOnly );
+
+ eventOut = X_Object_copy( e );
+ eventOut.type = XUI_Event.POINTER_OUT;
+
+ eventIn = X_Object_copy( e );
+ eventIn.type = XUI_Event.POINTER_IN;
for( i = list.length; i; ){
parent = data = list[ --i ];
};
if( parent !== X_UI_rootData ){
data.hoverClassName && data.xnode[ 'removeClass' ]( data.hoverClassName );
- data[ '_listeners' ] && data[ '_listeners' ][ XUI_Event.POINTER_OUT ] && data[ 'dispatch' ]( XUI_Event.POINTER_OUT, false ); // new Event
+ data[ '_listeners' ] && data[ '_listeners' ][ XUI_Event.POINTER_OUT ] && data[ 'dispatch' ]( eventOut, false ); // new Event
delete data.hovering;
list.splice( i, 1 );
continue;
};
if( !data.hovering ){
data.hoverClassName && data.xnode.addClassName( data.hoverClassName );
- data[ '_listeners' ] && data[ '_listeners' ][ XUI_Event.POINTER_IN ] && data[ 'dispatch' ]( XUI_Event.POINTER_IN, true ); // new Event
+ data[ '_listeners' ] && data[ '_listeners' ][ XUI_Event.POINTER_IN ] && data[ 'dispatch' ]( eventIn, true ); // new Event
data.hovering = true;
};
};
- X_UI_eventBusy = false;
+ XUI_interactionBusy = false;
return ret | X_CALLBACK_PREVENT_DEFAULT;
};
function X_UI_onMouseOut( e ){
var list = X_UI_rootData.hoverList,
i = list.length;
-console.log( e.type + i + ' ' + e.pointerType )
+ console.log( 'pointer out!!' + e.type + i + ' ' + e.pointerType );
+
+ e = X_Object_copy( e );
+ e.type = XUI_Event.POINTER_OUT;
+
for( ; i; ){
data = list[ --i ];
- console.log( data.xnode.className() );
+ //console.log( data.xnode.className() );
data.hoverClassName && data.xnode[ 'removeClass' ]( data.hoverClassName );
- data[ '_listeners' ] && data[ '_listeners' ][ XUI_Event.POINTER_OUT ] && data[ 'dispatch' ](
- { type : XUI_Event.POINTER_OUT, pointerType : e.pointerType }, false ); // new Event
+ data[ '_listeners' ] && data[ '_listeners' ][ XUI_Event.POINTER_OUT ] && data[ 'dispatch' ]( e, false ); // new Event
delete data.hovering;
};
list.length = 0;
},
start : function(){
+ // hover や rollover rollout のための move イベントの追加
+ // TODO この切り替えを ViewPort へ
+ XUI_xnodeIneraction = ( X_UA[ 'IE' ] < 9 ? X_ViewPort_document : X_UA[ 'Opera' ] < 8 ? X_Node_body : X_ViewPort );
+
this.initialize( this.User, this, null, null );
X_Timer_once( 0, this, this.addToView );
},
addToView : function(){
- var counter = this.eventCounter, flg;
+ var counter = this.eventCounter;
// this.xnodeInteractiveLayer の前に追加する！
- this.addToParent( X.Doc.body );
+ this.addToParent( X_Node_body );
- this.xnodeInteractiveLayer = X.Doc.body.create( 'div', {
+ this.xnodeInteractiveLayer = X_Node_body.create( 'div', {
'class' : 'mouse-operation-catcher',
unselectable : 'on'
- } )[ 'listen' ]( 'pointerleave', this, X_UI_onMouseOut );
+ } );
- // hover や rollover rollout のための move イベントの追加
- // TODO この切り替えを ViewPort へ
- ( X_UA[ 'IE' ] < 9 ? X_ViewPort_document : X_UA[ 'Opera' ] < 8 ? X_Node_body : X_ViewPort )[ 'listen' ]( 'pointermove', X_UI_eventRellay );
+ X_Node_body[ 'listen' ]( 'pointerleave', this, X_UI_onMouseOut );
+
+ XUI_xnodeIneraction[ 'listen' ]( 'pointermove', X_UI_eventRellay );
if( counter[ XUI_Event._POINTER_MOVE ] ){
++counter[ XUI_Event._POINTER_MOVE ];
} else {
-var scroll;\r
+\r
+X(\r
+ function(){\r
+ var source = [\r
+ {\r
+ label : 'ぺったんR',\r
+ summary : X.VERSION + ( X.buildTimeStamp ? ' ' + X.buildTimeStamp : '' )\r
+ },\r
+ {\r
+ label : 'レンダリングエンジン',\r
+ summary : X.UA.IE ? 'Trident' :\r
+ X.UA.Opera ? 'Presto' :\r
+ X.UA.Gecko ? 'Gecko' :\r
+ X.UA.KHTML ? 'KHTML' : X.UA.WebKit ? 'WebKit' : X.UA.Blink ? 'Blink' :\r
+ X.UA.Edge ? 'Edge' : 'Other'\r
+ },\r
+ {\r
+ label : 'OS',\r
+ summary : X.UA.Windows ? 'Windows' : X.UA.Mac ? 'Mac' : X.UA.Android ? 'Android' : X.UA.iOS ? 'iOS' : 'Other'\r
+ },\r
+ {\r
+ label : '起動時間',\r
+ summary : X.bootSpeed + 'ms'\r
+ },\r
+ {\r
+ label : '設定'\r
+ },\r
+ {\r
+ label : '情報'\r
+ },\r
+ {\r
+ label : 'ローカルストレージ'\r
+ },\r
+ {\r
+ label : '外部API接続'\r
+ },\r
+ {\r
+ label : 'HID'\r
+ }\r
+ ];\r
\r
-var css = {\r
- //width : '100%',\r
- sizing : 'border',\r
- fontColor : 0xAAAAAA,\r
- fontBold : true,\r
- bgColor : 0x34383B,\r
- borderColor : 0x252527,\r
- borderStyle : 'solid',\r
- padding : [ 1.35, 1, 1.5 ],\r
- borderWidth : [ 0, 0, 0.15 ],\r
- height : 4,\r
- left : 0,\r
- right : 0\r
- };\r
\r
-with( X.UI ){\r
+ with( X.UI ){\r
+ Root(\r
+ List(\r
+ source,\r
+ AndroidItem().listen( X.UI.Event.ITEMDATA_CHANGED )\r
+ )\r
+ ); \r
+ };\r
+ }\r
+);\r
+\r
\r
var AndroidItem = X.UI.Box.inherits(\r
'AndroidItem',\r
X.Class.NONE,\r
{\r
- Constructor : function( label, discription, value ){\r
- this.Super( css );\r
- this.add( Text( label ) );\r
- } \r
- } \r
-); \r
- \r
- \r
- Root(\r
- scroll = ScrollBox(\r
- Layout.Vertical,\r
- {\r
+ Constructor : function(){\r
+ this.Super( {\r
+ sizing : 'border',\r
+ bgColor : 0x34383B,\r
borderColor : 0x252527,\r
- borderWidth : [ 0.15, 0, 0 ],\r
borderStyle : 'solid',\r
- height : 'auto',\r
- bgColor : 0x444643,\r
- gapY : 0.15\r
- },\r
- AndroidItem(\r
- 'ぺったんR ' + X.VERSION\r
- ),\r
- Text(\r
- 'システム情報',\r
- css\r
- ),\r
- Text(\r
- 'ユーザー設定',\r
- css\r
- ),\r
- Text(\r
- 'ソーシャル設定',\r
- css\r
- ),\r
- Text(\r
- 'ローカルストレージ利用設定',\r
- css\r
- ),\r
- Text(\r
- 'システム環境設定',\r
- css\r
- ),\r
- Text(\r
- 'ブラウザ情報',\r
- css\r
- ),\r
- Text(\r
- '端末スコア',\r
- css\r
- ),\r
- Text(\r
- 'ブラウザ・プラグイン',\r
- css\r
- ),\r
- Text(\r
- 'デバッグ情報',\r
- css\r
- ) \r
- )\r
- );\r
-}\r
+ borderWidth : [ 0, 0, 0.15 ],\r
+ height : 4,\r
+ left : 0,\r
+ right : 0\r
+ } ).listen( X.UI.Event.TAP );\r
+ },\r
+ \r
+ handleEvent : function( e ){\r
+ var txt;\r
+ \r
+ switch( e.type ){\r
+ case X.UI.Event.ITEMDATA_CHANGED :\r
+ if( e.itemData.summary ){\r
+ this.add( X.UI.Text( e.itemData.label, {\r
+ fontColor : 0xAAAAAA,\r
+ fontBold : true,\r
+ top : 0.7,\r
+ left : 1\r
+ } ) )\r
+ .add( X.UI.Text( e.itemData.summary, {\r
+ fontColor : 0x777777,\r
+ fontSize : 0.8,\r
+ top : 3.1,\r
+ left : 1.27\r
+ } ) );\r
+ } else {\r
+ this.add( X.UI.Text( e.itemData.label, {\r
+ fontColor : 0xAAAAAA,\r
+ fontBold : true,\r
+ top : 1.35,\r
+ left : 1\r
+ } ) );\r
+ };\r
+ break;\r
+ \r
+ case X.UI.Event.TAP :\r
+ txt = this.getNodeAt( 0 );\r
+ txt.content( txt.content() + '+' );\r
+ };\r
+ } \r
+ } \r
+);\r
+\r
+\r
\r
-var __scroll = X.Pair.get( scroll );\r
OSDN Git Service
