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
+ \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
+\r
/*------------------------------------------------------------------------------------\r
* hidden-sysyem-node\r
*/\r
transformOrigin : '0 0';\r
position : absolute;\r
}\r
- .ScrollBox-Scrollbar-Wrapper-V,\r
- .ScrollBox-Scrollbar-Wrapper-H,\r
- .ScrollBox-Scrollbar-Wrapper-V-withH,\r
- .ScrollBox-Scrollbar-Wrapper-H-withV {\r
- position : absolute;\r
- z-index : 100;\r
- overflow : hidden;\r
- }\r
- .ScrollBox-Scrollbar-Wrapper-V,\r
- .ScrollBox-Scrollbar-Wrapper-V-withH {\r
- width : 7px;\r
- top : 2px;\r
- right : 1px;\r
- }\r
- .ScrollBox-Scrollbar-Wrapper-V {\r
- bottom : 2px;\r
- }\r
- .ScrollBox-Scrollbar-Wrapper-V-withH {\r
- bottom : 7px;\r
- }\r
- .ScrollBox-Scrollbar-Wrapper-H,\r
- .ScrollBox-Scrollbar-Wrapper-H-withV {\r
- height : 7px;\r
- bottom : 1px;\r
- left : 2px;\r
- }\r
- .ScrollBox-Scrollbar-Wrapper-H {\r
- right : 2px;\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
}\r
- .ScrollBox-Scrollbar-Wrapper-H-withV {\r
- right : 7px;\r
+ .Root .ScrollBox-IndicatorV {\r
+ top : 0;\r
+ right : 0.1em;\r
+ left : auto;\r
+ width : 0.5em;\r
+ } \r
+ .Root .ScrollBox-IndicatorH {\r
+ top : auto;\r
+ bottom : 0.1em;\r
+ left : 0;\r
+ height : 0.5em;\r
}\r
- .ScrollBox-Scrollbar-Indicator-V,\r
- .ScrollBox-Scrollbar-Indicator-H {\r
- position : absolute;\r
- z-index : 100;\r
- background : #000;\r
- background : rgba(0,0,0,0.5);\r
- border : 1px solid #fff;\r
- border : 1px solid rgba(255,255,255,0.9);\r
- background-clip : padding-box;\r
- -o-background-clip : padding-box;\r
- -ms-background-clip : padding-box;\r
- -moz-background-clip : padding-box;\r
- -khtml-background-clip : padding-box;\r
- -webkit-background-clip : padding-box;\r
- box-sizing : border-box;\r
- -o-box-sizing : border-box;\r
- -ms-box-sizing : border-box;\r
- -moz-box-sizing : border-box;\r
- -khtml-box-sizing : border-box;\r
- -webkit-box-sizing : border-box;\r
- border-radius : 3px;\r
- -o-border-radius : 3px;\r
- -ms-border-radius : 3px;\r
- -moz-border-radius : 3px;\r
- -khtml-border-radius : 3px;\r
- -webkit-border-radius : 3px;\r
- transition-property : transform;\r
- -o-transition-property : -o-transform;\r
- -ms-transition-property : -ms-transform;\r
- -moz-transition-property : -moz-transform;\r
- -khtml-transition-property : -khtml-transform;\r
- -webkit-transition-property : -webkit-transform;\r
- transform: translate(0,0);\r
- -o-transform: translate(0,0);\r
- -ms-transform: translate(0,0);\r
- -moz-transform: translate(0,0);\r
- -khtml-transform: translate(0,0);\r
- -webkit-transform: translate(0,0);\r
- }\r
- .ScrollBox-Scrollbar-Indicator-V {\r
- width:100%;\r
- }\r
- .ScrollBox-Scrollbar-Indicator-H {\r
- height:100%;\r
- }
\ No newline at end of file
// TODO CE3 の ie4 と WM の ie4 の分岐\r
X_UA_classNameForHTML = 'WinCE';\r
} else\r
- if( X_UA[ 'Win' ] ){\r
+ if( X_UA[ 'Windows' ] ){\r
X_UA_classNameForHTML = 'Win';\r
} else {\r
X_UA_classNameForHTML = 'Other';\r
}; \r
\r
- X_UA_classNameForHTML += 'IE4';\r
+ X_UA_classNameForHTML += '_IE4';\r
\r
if( X_UA[ 'IE45' ] ){\r
X_UA_classNameForHTML += '5';\r
};\r
\r
if( X_UA[ 'ActiveX' ] ){\r
- X_UA_classNameForHTML += 'ActiveX';\r
+ X_UA_classNameForHTML += '_ActiveX';\r
};\r
\r
} else {\r
*/\r
\r
// http://msdn.microsoft.com/ja-jp/library/ie/dn255104%28v=vs.85%29.aspx\r
-var X_Dom_Event_devicePixelRatio = window.devicePixelRatio || ( window.screen.deviceXDPI / window.screen.logicalXDPI ),\r
+var X_Dom_Event_devicePixelRatio = window.devicePixelRatio || ( window.screen.deviceXDPI / window.screen.logicalXDPI ) || 1,\r
\r
X_Dom_Event_convertMSPointerType = ( !window.PointerEvent && window.MSPointerEvent ) && [ 0, 0, 'touch', 'pen', 'mouse' ], // WP8.1 は PointerEvent と MSPointerEvent 両方ある\r
/*{\r
X_Dom_Event_CANCEL_MOUSE = {},\r
X_DomEvent;\r
\r
+if( X_Dom_Event_devicePixelRatio !== 1 ){\r
+ X_UA_classNameForHTML += ' dpr' + X_Dom_Event_devicePixelRatio;\r
+ \r
+ X_UA[ 'dpr' ] = X_Dom_Event_devicePixelRatio; \r
+};\r
+\r
if( !X_UA[ 'IE' ] || 9 <= X_UA[ 'IE' ] ){\r
X_DomEvent = function( e, xnode ){\r
var originalType = e.type,\r
var
X_Node_CSS_FILTER_FIX_PROPS =
- X_UA[ 'ActiveX' ] && X_UA[ 'IE' ] < 9 && !X_UA[ 'MacIE' ] ?
+ X_UA[ 'ActiveX' ] && X_UA[ 'IE' ] < 9 ?
{
'opacity' : 2,
'boxShadow' : 3,
X_Node_Anime_clearTransition( xnode );\r
X_Node_Anime_updatePosition( xnode, obj.destX, obj.destY, obj.destA, phase === 14 );\r
obj.phase = phase === 14 ? 10 : 4;\r
- xnode[ 'asyncDispatch' ]( time, { type : X_EVENT_ANIME_END, 'gpu' : obj.gpuParent } );\r
+ xnode[ 'dispatch' ]( time, { type : X_EVENT_ANIME_END, 'gpu' : obj.gpuParent } );\r
} else {\r
current = X_Node_Anime_getComputedPosition( xnode );\r
obj.startX = current.x;\r
if( X_Node_Anime_hasTransform ){\r
xnode[ 'css' ]({\r
transform : 'translate(' + ( x | 0 ) + 'px,' + ( y | 0 ) + 'px)' + ( useGPU ? X_Node_Anime_translateZ : '' ),\r
- opacity : opacity === 1 ? '' : opacity\r
+ opacity : opacity\r
});\r
} else {\r
x === x && xnode[ 'css' ]({\r
left : ( x | 0 ) + 'px',\r
- opacity : opacity === 1 ? '' : opacity });\r
+ opacity : opacity });\r
y === y && xnode[ 'css' ]({\r
top : ( y | 0 ) + 'px',\r
- opacity : opacity === 1 ? '' : opacity });\r
+ opacity : opacity });\r
};\r
\r
if( X_Node_Anime_translateZ ){\r
})() :
0,
-/*
- * ie11 の 互換モード(8,7)では、Silverlight が動作しない?
- */
X_Pulgin_SILVER_LIGHT_VERSION =
!X_UA[ 'IE' ] || !X_UA[ 'ActiveX' ] ? parseFloat( X_Object_find( navigator, 'plugins>Silverlight Plug-In>version' ) || 0 ) :
X_UA[ 'ActiveX' ] && 6 <= X_UA[ 'IE' ] ? (function(){
parseFloat( X_Object_find( navigator, 'plugins>Unity Player>version' ) || 0 ) :
!X_UA[ 'IE4' ] && !X_UA[ 'IE5' ] && X_UA[ 'ActiveX' ] ? (function(){
var obj = X_Script_createActiveXObjectSafty( 'UnityWebPlayer.UnityWebPlayer.1' );
-
- //console.log( obj && obj[ 'GetPluginVersion' ]() );
+
return obj ? parseFloat( obj[ 'GetPluginVersion' ]() ) : 0;
})() :
0,
// Windows Media Player 7 がクライアントにインストールされている場合に、自動的に Web ページに埋め込む方法
// TODO GeckoActiveXObject
X_Pulgin_WMP_VERSION =
- !X_UA[ 'IE' ] || !X_UA[ 'ActiveX' ] ? parseFloat( X_Object_find( navigator, 'plugins>Windows Media Player Plug-in Dynamic Link Library>version' ) || 0 ) :
+ !X_UA[ 'IE' ] || !X_UA[ 'ActiveX' ] ? 0 :
(function(){
var obj = X_Script_createActiveXObjectSafty( 'WMPlayer.OCX.7' );
\r
if( html ) this._contentHTML = html; \r
\r
- this[ 'appendTo' ]( X_Node_body /* X_Node_systemNode */ )\r
+ this[ 'appendTo' ]( X_Node_systemNode )\r
[ 'listenOnce' ]( X_EVENT_KILL_INSTANCE, X_Util_NinjaIframe_handleEvent );\r
\r
X_ViewPort[ 'listenOnce' ]( X_EVENT_AFTER_UPDATE, this, X_Util_NinjaIframe_handleEvent );\r
this._iwin.location.reload();\r
};\r
\r
- if( !opt_contentHTML && opt_contentHTML !== '' ) return this;\r
+ if( !X_Type_isString( opt_contentHTML ) ) return this;\r
\r
this._contentHTML = opt_contentHTML;\r
\r
if( !( X_UA[ 'IE' ] < 9 ) ){\r
X_Util_NinjaIframe_writeToIframe( this );\r
- this._ready = true;\r
+ //this._ready = true;\r
};\r
\r
return this;\r
// こちらに名前をsetしないとtargetが動作しない\r
if( X_UA[ 'IE' ] ) this._iwin.name = this._name;\r
\r
- this[ 'listen' ]( [ X_UA[ 'IE' ] < 9 ? 'readystatechange' : 'load', 'error' ], this, X_Util_NinjaIframe_handleEvent );\r
+ this[ 'listen' ]( X_UA[ 'IE' ] < 9 ? 'readystatechange' : [ 'load', 'error' ], X_Util_NinjaIframe_handleEvent );\r
\r
if( !( X_UA[ 'IE' ] < 9 ) ){\r
- ( this._contentHTML || this._contentHTML === '' ) && X_Util_NinjaIframe_writeToIframe( this );\r
- this._ready = true;\r
+ X_Util_NinjaIframe_writeToIframe( this );\r
+ //this._ready = true;\r
return;\r
};\r
//break; これあると IE8 で駄目！\r
if( ( raw.readyState !== 'complete' && raw.readyState !== 'loaded' ) ) break;\r
// ie9-\r
if( !this._ready ){\r
- ( this._contentHTML || this._contentHTML === '' ) && X_Util_NinjaIframe_writeToIframe( this );\r
- this._ready = true;\r
+ X_Util_NinjaIframe_writeToIframe( this );\r
+ //this._ready = true;\r
break;\r
};\r
// onload\r
* <p>複数のバックエンドから、与えられた音声を再生可能なものを見つけ、音声を再生します。\r
* <p>HTMLAudio の動作・機能がブラウザ毎にバラバラなのに業を煮やし、メソッドやイベントは独自に定義しています。\r
* <h4>バックエンドの種類</h4>\r
- * <p>HTMLAudio, WebAudio, Silverlight\r
+ * <p>HTMLAudio, WebAudio, Silverlight, WMP\r
* <h4>イベント</h4>\r
* <dl>\r
* <dt>X.Event.BACKEND_READY <dd>音声(src リスト)を再生可能なバックエンドが見つかった。\r
- * <dt>X.Event.BACKEND_NONE <dd>音声を再生可能なバックエンドが見つからなかった。\r
+ * <dt>X.Event.BACKEND_NONE <dd>音声を再生可能なバックエンドが見つからなかった。Audio は kill されます。\r
* <dt>X.Event.READY <dd>再生可能、実際の状態は canplay から loadeddata まで様々、、、\r
* <dt>X.Event.ERROR <dd><ul>\r
* <li> 1 : ユーザーによってメディアの取得が中断された\r
* <li> 3 : メディアのデコードエラー\r
* <li> 4 : メディアがサポートされていない\r
* </ul>\r
- * <dt>X.Event.MEDIA_PLAYING <dd>再生中に1秒以下のタイミングで発生．currentTime が取れる?\r
- * <dt>X.Event.MEDIA_LOOP <dd>ループ直前に発生、ｷｬﾝｾﾙ可能\r
- * <dt>X.Event.MEDIA_LOOPED <dd>ループ時に発生\r
- * <dt>X.Event.MEDIA_ENDED <dd>再生位置の(音声の)最後についた\r
- * <dt>X.Event.MEDIA_PAUSED <dd>ポーズした\r
- * <dt>X.Event.MEDIA_WAITING <dd>再生中に音声が待機状態に。\r
- * <dt>X.Event.MEDIA_SEEKING <dd>シーク中に音声が待機状態に。\r
+ * <dt>X.Event.MEDIA_PLAYING <dd>再生中に1秒以下のタイミングで発生．currentTime が取れる?\r
+ * <dt>X.Event.MEDIA_LOOP <dd>ループ直前に発生、ｷｬﾝｾﾙ可能\r
+ * <dt>X.Event.MEDIA_LOOPED <dd>ループ時に発生\r
+ * <dt>X.Event.MEDIA_ENDED <dd>再生位置の(音声の)最後についた\r
+ * <dt>X.Event.MEDIA_PAUSED <dd>ポーズした\r
+ * <dt>X.Event.MEDIA_WAITING <dd>再生中に音声が待機状態に。\r
+ * <dt>X.Event.MEDIA_SEEKING <dd>シーク中に音声が待機状態に。\r
+ * <dt>X.Event.MEDIA_CAN_TOUCH <dd>シーク中に音声が待機状態に。\r
* </dl>\r
* \r
* @alias X.Audio\r
*/\r
'backendName' : '',\r
\r
+ // TODO\r
'Constructor' : function( sourceList, opt_option ){\r
X_Audio_startDetectionBackend(\r
X_Audio_BACKENDS[ 0 ], this,\r
var X_Audio_constructor = 3.1 <= X_UA[ 'Safari' ] && X_UA[ 'Safari' ] < 4 ?
function( s, a ){
- a = document.createElement( 'audio' );
- a.src = s;
- a.load();
+ //a = document.createElement( 'audio' );
+ //a.src = s;
+ //a.load();
return a;
} :
// Android1.6 + MobileOpera12 HTMLAudio はいるが呼ぶとクラッシュする
// alert( 'タッチイベント以外での play! ' + ( e ? e.type : '' ) );
return;
};
+ // http://qiita.com/uupaa/items/e5856e3cb2a9fc8c5507
+ // iOS9 + touchstart で呼んでいた場合、 X_ViewPort['listenOnce']('pointerup',this,this.actualPlay())
this.disatcher[ 'asyncDispatch' ]( X_EVENT_READY );
};
X_WebAudio_touchState = false;
_sourceDispose : function(){
this.bufferSource.disconnect();
- delete this.bufferSource.onended;
+ //delete this.bufferSource.onended;
delete this.bufferSource;
},
delete this.playing;
if( this.bufferSource ){
- if( this.bufferSource.onended ) delete this.bufferSource.onended;
+ //if( this.bufferSource.onended ) delete this.bufferSource.onended;
this.bufferSource.stop ?
this.bufferSource.stop( 0 ) : this.bufferSource[ 'noteOff' ]( 0 );
{\r
// 1: canplaythrought|timeupdateに達している、またはdurationFixが終了している\r
// 2: READY イベント発火済\r
+ // 3: 1, 2 が済\r
_readyState : 0,\r
_src : '',\r
\r
// console.log( e.loaded + ' ' + e.total * 100 + '%' );\r
// iem9 で常に0 raw.networkState;\r
// opera Android 12 で buffered.end() へのアクセスはエラー try catch も無効、iem9 は常に end(0) = 0\r
- if( X_HTMLAudio_progressEnabled && this.duration && this._readyState < 2 ){\r
+ if( X_HTMLAudio_progressEnabled && this.duration && this._readyState < 3 ){\r
buf = raw.buffered;\r
time = 0;\r
for( i = 0, l = buf.length; i < l; ++i ){\r
};\r
} else\r
if( this._readyState === 1 && this.duration ){\r
- this._readyState = 2;\r
+ this._readyState |= 2;\r
this.disatcher[ 'asyncDispatch' ]( X_EVENT_READY );\r
console.log( '> Audio Loaded!! ' + e.type + ' d:' + ( this.duration | 0 ) );\r
} else\r
};\r
this._touchState = 3;\r
} else\r
- if( this._readyState !== 2 && this._durationFixPhase < 2 ){\r
+ if( this._readyState !== 3 && this._durationFixPhase < 2 ){\r
return;\r
};\r
\r
},\r
\r
detect : function( proxy, source, ext ){\r
+ // TODO source = .mp3#CBR\r
+ // 得意度で返す\r
proxy[ 'asyncDispatch' ]( { type : X_EVENT_COMPLETE, canPlay : ext === 'mp3' || ext === 'wma' || ext === 'wav' } ); \r
},\r
\r
'snd' : true,
'au' : true,
'aif' : true,
- 'aicf' : true,
- 'aiff' : true
+ 'aiff' : true,
+ 'aicf' : true
},
detect : function( proxy, source, ext ){
- proxy[ 'asyncDispatch' ]( { type : X_EVENT_COMPLETE, canPlay : ext === 'mp3' || ext === 'wma' || ext === 'wav' } );
+ proxy[ 'asyncDispatch' ]( { type : X_EVENT_COMPLETE, canPlay : 0 <= 'mp3 wma wav midi snd au aiff aicf'.indexOf( ext ) } );
},
klass : X_WMPAudio
pointerEnabled : [ false, XUI_Dirty.CLEAN, XUI_Attr_USER.UINODE, XUI_Attr_Type.BOOLEAN ],\r
pointerChildren : [ true, XUI_Dirty.CLEAN, XUI_Attr_USER.UINODE, XUI_Attr_Type.BOOLEAN ],\r
cursor : [ 1, XUI_Dirty.CLEAN, XUI_Attr_USER.UINODE, XUI_Attr_Type.LIST, XUI_Attr_Option.CURSOR ],\r
- tooltip : [ '', XUI_Dirty.CLEAN, XUI_Attr_USER.UINODE, XUI_Attr_Type.STRING ],\r
+ tooltip : [ '', XUI_Dirty.CLEAN, XUI_Attr_USER.UINODE, XUI_Attr_Type.STRING ],\r
\r
borderWidth : [ 0, XUI_Dirty.LAYOUT, XUI_Attr_USER.LAYOUT, XUI_Attr_Type.QUARTET | XUI_Attr_Type.LENGTH | XUI_Attr_Type.PERCENT ], // em [ top, right, bottom, left ]\r
padding : [ 0, XUI_Dirty.LAYOUT, XUI_Attr_USER.LAYOUT, XUI_Attr_Type.QUARTET | XUI_Attr_Type.LENGTH | XUI_Attr_Type.PERCENT ],\r
addToParent : function( xnodeParent ){\r
var attr = this.attrObject || this.attrClass.prototype,\r
usableAttrs = this.usableAttrs,\r
- i = 0, l = usableAttrs.length, def;\r
+ i = 0, l = usableAttrs.length, def, k;\r
\r
xnodeParent && xnodeParent[ 'append' ]( this.xnode );\r
\r
var newNode,\r
//newPair = X_Pair_get( newNode ),\r
pair = X_Pair_get( this ),\r
- attr, listeners, type, list, i, l;\r
+ attr, listeners, type, list, i, l, k;\r
\r
// attr もコピー\r
if( pair.attrObject ){\r
* ScrollManager\r
* indicatorX, Y は再利用\r
*/\r
+var XUI_ScrollBox_current,\r
+ XUI_ScrollBox_indicatorV,\r
+ XUI_ScrollBox_indicatorH;\r
+\r
+function XUI_ScrollBox_start( scrollBox ){\r
+ // 既存スクロールの停止\r
+ if( scrollBox.hasVScroll ){\r
+ if( !XUI_ScrollBox_indicatorV ){\r
+ XUI_ScrollBox_indicatorV = X_Doc_create( 'div' )[ 'className' ]( 'ScrollBox-IndicatorV' );\r
+ \r
+ };\r
+ XUI_ScrollBox_indicatorV.parent !== scrollBox.xnode && scrollBox.xnode[ 'append' ]( XUI_ScrollBox_indicatorV );\r
+ XUI_ScrollBox_indicatorV[ 'animate' ](\r
+ { opacity : 0 },\r
+ { opacity : 1 },\r
+ 900, 'circular', 300\r
+ );\r
+ scrollBox\r
+ [ 'listenOnce' ]( [ X_EVENT_CANCELED, XUI_Event.SCROLL_END ], XUI_ScrollBox_indicatorV, XUI_ScrollBox_indicatorHandleEvent );\r
+ };\r
+ if( scrollBox.hasHScroll ){\r
+ if( !XUI_ScrollBox_indicatorH ){\r
+ XUI_ScrollBox_indicatorH = X_Doc_create( 'div' )[ 'className' ]( 'ScrollBox-IndicatorH' );\r
+ };\r
+ XUI_ScrollBox_indicatorH.parent !== scrollBox.xnode && scrollBox.xnode[ 'append' ]( XUI_ScrollBox_indicatorH );\r
+ XUI_ScrollBox_indicatorH[ 'animate' ](\r
+ { opacity : 0 },\r
+ { opacity : 1 },\r
+ 900, 'circular', 300\r
+ );\r
+ scrollBox\r
+ [ 'listenOnce' ]( [ X_EVENT_CANCELED, XUI_Event.SCROLL_END ], XUI_ScrollBox_indicatorH, XUI_ScrollBox_indicatorHandleEvent );\r
+ };\r
+};\r
+\r
+function XUI_ScrollBox_indicatorHandleEvent( e ){\r
+ switch( e.type ){\r
+ case X_EVENT_CANCELED :\r
+ case XUI_Event.SCROLL_END :\r
+ this[ 'animate' ](\r
+ { opacity : 1 },\r
+ { opacity : 0 },\r
+ 900, 'circular', 300\r
+ );\r
+ break;\r
+ };\r
+};\r
\r
\r
var X_UI_ScrollBox_SUPPORT_ATTRS = {\r
_containerNode : null,\r
xnodeSlider : null,\r
\r
- xnodeIndicatorX : null,\r
- xnodeIndicatorY : null,\r
- \r
Constructor : function( user, layout, args ){\r
this[ 'Super' ]( user, layout, args );\r
this._containerNode = X_Pair_get( this.containerNode );\r
this.lastScrollHeight !== this._containerNode.boxHeight ||\r
this.lastBoxWidth !== this.boxWidth || this.lastBoxHeight !== this.boxHeight\r
){\r
+ console.log( 'scroll - calc' );\r
X_UI_rootData[ 'listenOnce' ]( XUI_Event.LAYOUT_COMPLETE, this, X_UI_ScrollBox_onLayoutComplete );\r
};\r
},\r
this[ 'listenOnce' ]( XUI_Event.SCROLL_END, X_UI_rootData, X_UI_rootData.calculate );\r
return X_CALLBACK_PREVENT_DEFAULT;\r
};\r
- this.scrollXRatio = this.scrollX ? this.scrollXMax / this.scrollX : 0;\r
- this.scrollYRatio = this.scrollY ? this.scrollYMax / this.scrollY : 0;\r
+ this.scrollXRatio = this.scrollX / this.scrollXMax;\r
+ this.scrollYRatio = this.scrollY / this.scrollYMax;\r
this.xnodeSlider[ 'stop' ]();\r
this.isInTransition = false;\r
return X_CALLBACK_NONE;\r
};\r
};\r
\r
- // TODO use scrollLeft, scrollTop\r
- function X_UI_ScrollBox_translate( that, x, y, opt_time, opt_easing, opt_release ){\r
- \r
- opt_time = 0 <= opt_time ? opt_time : 0;\r
- opt_easing = opt_easing === '' ? '' : opt_easing || 'circular';\r
- opt_release = 0 <= opt_release ? opt_release : 300;\r
- \r
- that.xnodeSlider[ 'animate' ](\r
- {\r
- x : that.scrollX,\r
- y : that.scrollY\r
- },\r
- {\r
- x : x,\r
- y : y\r
- },\r
- opt_time, opt_easing, opt_release\r
- );\r
- \r
- that.scrollX = x;\r
- that.scrollY = y;\r
- \r
- if( that.indicators ){\r
- for( i = that.indicators.length; i--; ){\r
- that.indicators[ i ].updatePosition();\r
- };\r
- };\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
+ \r
+ opt_time = 0 <= opt_time ? opt_time : 0;\r
+ opt_easing = opt_easing === '' ? '' : opt_easing || 'circular';\r
+ opt_release = 0 <= opt_release ? opt_release : 300;\r
+ \r
+ that.xnodeSlider[ 'animate' ](\r
+ {\r
+ x : that.scrollX,\r
+ y : that.scrollY\r
+ },\r
+ {\r
+ x : x,\r
+ y : y\r
+ },\r
+ opt_time, opt_easing, opt_release\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
+ XUI_ScrollBox_indicatorV\r
+ [ 'css' ]({\r
+ height : ( indicatorSize | 0 ) + 'px'\r
+ })\r
+ [ 'animate' ](\r
+ {\r
+ y : scrollBoxSize * that.scrollY / that.scrollYMax\r
+ },\r
+ {\r
+ y : scrollBoxSize * 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
+ XUI_ScrollBox_indicatorH\r
+ [ 'css' ]({\r
+ width : ( indicatorSize | 0 ) + 'px'\r
+ })\r
+ [ 'animate' ](\r
+ {\r
+ x : scrollBoxSize * that.scrollX / that.scrollXMax\r
+ },\r
+ {\r
+ x : scrollBoxSize * x / that.scrollXMax,\r
+ opacity : 1\r
+ },\r
+ opt_time, opt_easing, opt_release\r
+ );\r
+ };\r
+ \r
+ that.scrollX = x;\r
+ that.scrollY = y;\r
+};\r
\r
function X_UI_ScrollBox_onStart( e ){\r
var ret = X_CALLBACK_NONE;\r
// スクロール中の停止\r
if( this.isInTransition ){\r
this.isInTransition = false;\r
+ console.log( '-1-' );\r
this[ 'dispatch' ]( XUI_Event.SCROLL_END );\r
// TODO current位置\r
this.xnodeSlider[ 'stop' ]();\r
this.moved = true;\r
this.minusX = deltaX;\r
this.minusY = deltaY;\r
+ // indicator\r
+ XUI_ScrollBox_start( this );\r
} else {\r
this[ 'dispatch' ]( XUI_Event.SCROLL_MOVE );\r
};\r
\r
// we scrolled less than 10 pixels\r
if( !this.moved ){\r
- // this[ 'dispatch' ]( X_EVENT_CANCELED );\r
+ this[ 'dispatch' ]( X_EVENT_CANCELED );\r
console.log( 'we scrolled less than 10 pixels ' + e.pageY );\r
return ret;\r
};\r
\r
console.log( 'end2 x:' + newX + ' y:' + newY + ' t:' + time );\r
this.scrollTo( newX, newY, time, easing, 1000 );\r
- return ret;\r
+ } else {\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
+ this[ 'dispatch' ]( XUI_Event.SCROLL_END ); \r
};\r
-\r
- console.log( 'end1 x:' + newX + ' y:' + newY );\r
- this.scrollTo( newX, newY, 0, '', 1000 ); // ensures that the last position is rounded\r
-\r
- this[ 'dispatch' ]( XUI_Event.SCROLL_END );\r
- \r
return ret;\r
};\r
\r
};\r
\r
function X_UI_ScrollBox_onAnimeEnd( e ){\r
- if( e.target !== this.xnodeSlider || !this.isInTransition ){\r
- return X_CALLBACK_NONE;\r
- };\r
- if( !X_UI_ScrollBox_resetPosition( this, this.bounceTime ) ){\r
+ if( e.target === this.xnodeSlider && this.isInTransition && !X_UI_ScrollBox_resetPosition( this, this.bounceTime ) ){\r
this.isInTransition = false;\r
+ console.log( '-2-' );\r
this[ 'dispatch' ]( XUI_Event.SCROLL_END );\r
};\r
return X_CALLBACK_NONE;\r
var cancelable = !e || ( e.type !== X_EVENT_VIEW_RESIZED && e.type !== X_EVENT_BASE_FONT_RESIZED ),
size, font, w, h;
- if( this[ 'dispatch' ]( { type : XUI_Event.LAYOUT_BEFORE, 'cancelable' : cancelable } ) & X_CALLBACK_PREVENT_DEFAULT && cancelable ){
+ if( ( this[ 'dispatch' ]( { type : XUI_Event.LAYOUT_BEFORE, 'cancelable' : cancelable } ) & X_CALLBACK_PREVENT_DEFAULT ) && cancelable ){
return X_CALLBACK_NONE;
};
OSDN Git Service
