X-Git-Url: http://git.osdn.jp/view?a=blobdiff_plain;f=0.6.x%2Flogger.html;h=74a955ee2da8c73f4574cb75f52812beb294114b;hb=adbf9e9a2c7d8e6857774f774742a7ff6fb50600;hp=d9c82a9f94e0ebebfa9f366a402a648c7f5fd5b5;hpb=c1cfef6821da42b776bf40b051da27bb5afe71fe;p=pettanr%2FclientJs.git

diff --git a/0.6.x/logger.html b/0.6.x/logger.html
index d9c82a9..74a955e 100644
--- a/0.6.x/logger.html
+++ b/0.6.x/logger.html
@@ -14,19 +14,37 @@
 	
 	<!-- for smartphone -->
 	<meta name="format-detection" content="telephone=no">
-	<meta name="apple-mobile-web-app-capable">
+	<meta name="apple-mobile-web-app-capable" content="yes">
 	
 	<!-- maximum-scale=1 初代iPod touch で必要, dynamic-viewport は operaで可能  -->
-	<meta name="viewport" id="dynamic-viewport" content="width=device-width,target-densitydpi=device-dpi,initial-scale=1,user-scalable=0,maximum-scale=1">
+	<meta name="viewport" id="dynamic-viewport" content="width=device-width,target-densitydpi=device-dpi,initial-scale=1,user-scalable=0,maximum-scale=1,minimum-scale=1">
 
 	<style>
+		html {
+			font-size                : 100%; /* 1 */
+			-webkit-text-size-adjust : 100%; /* 2 */
+			   -moz-text-size-adjust : 100%; /* 2 */
+			    -ms-text-size-adjust : none; /* 2 */
+			        text-size-adjust : 100%; /* 2 */
+			       
+		    touch-action            : none;
+		-ms-touch-action            : none;
+		        touch-callout       : none;
+		-webkit-touch-callout       : none;
+		    content-zooming         : none;
+		-ms-content-zooming         : none;
+		        user-drag           : none;
+		 -khtml-user-drag           : none;
+		-webkit-user-drag           : none;
+		}
 		html, body {
-			padding  : 0;
-			margin   : 0;
-			border   : 0;
-			width    : 100%;
-			height   : 100%;
-			overflow : hidden;
+			padding    : 0;
+			margin     : 0;
+			border     : 0;
+			width      : 100%;
+			height     : 100%;
+			overflow   : hidden;
+			background : #FF66FF;
 		}
 		iframe {
 			display     : block;
@@ -34,11 +52,12 @@
 			border      : 0;
 			height      : 100%;
 			margin-left : 0;
+			background  : #fff;
 		}
 		#log {
 			position   : absolute;
-			top        : 0;
-			left       : 0;
+			top        : 0%;
+			left       : 0%;
 			width      : 240px;
 			height     : 100%;
 			font-size  : 12px;
@@ -48,17 +67,20 @@
 			overflow   : auto;
 		}
 		#toggle {
-			position   : absolute;
-			top        : 0;
-			left       : 0;
-			width      : 1em;
-			height     : 1em;
-			background : #00f;
-			color      : #fff;
-			text-align : center;
-			font-weight: bold;
-			z-index    : 999;
-			cursor     : pointer;
+			font-size   : 2em;
+			font-family : Arial;
+			position    : absolute;
+			top         : 0;
+			left        : 0;
+			width       : 1em;
+			height      : 1em;
+			line-height : 1;
+			color       : #00f;
+			text-align  : center;
+			font-weight : bold;
+			z-index     : 999999;
+			cursor      : pointer;
+			-webkit-tap-highlight-color : rgba(0,0,0,0);
 		}
 		.toggle_close #log,
 		.toggle_none #toggle {
@@ -67,41 +89,167 @@
 		.toggle_none iframe {
 			margin-left : 240px;
 		}
+		
+/*--------------------------------------------------------------------------------------
+ *  slide & zoom
+ */
+	.toggle_open_anime #log,
+	.toggle_close_anime #log,
+	.toggle_close_before #log, .toggle_open_before #log /* win safari3.2 */
+	{
+		-webkit-transition          : 0.5s ease-in-out; /* win safari3.2 */
+		-webkit-transition          : opacity 0.5s ease-in-out, left 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out, transform 0.5s ease-in-out; /* win safari4 delay は指定しない */
+
+		/* http://blog.webcreativepark.net/2012/10/19-161432.html */
+		-webkit-backface-visibility : hidden;
+		   -moz-backface-visibility : hidden;
+		        backface-visibility : hidden;
+		        
+		        transition          : opacity 0.5s ease-in-out 0s, left 0.5s ease-in-out 0s, transform 0.5s ease-in-out 0s;
+		     -o-transition          : opacity 0.5s ease-in-out 0s, left 0.5s ease-in-out 0s, transform 0.5s ease-in-out 0s, -o-transform 0.5s ease-in-out 0s;
+		    -ms-transition          : opacity 0.5s ease-in-out 0s, left 0.5s ease-in-out 0s, transform 0.5s ease-in-out 0s, -ms-transform 0.5s ease-in-out 0s;
+		   -moz-transition          : opacity 0.5s ease-in-out 0s, left 0.5s ease-in-out 0s, transform 0.5s ease-in-out 0s, -moz-transform 0.5s ease-in-out 0s;
+    }
+
+/* slideIn */
+	.toggle_open_anime #log,
+	.toggle_open #log,
+	.toggle_close_before #log {
+		opacity   : 1;
+		-webkit-transform : translate(0%,0); /* win safari3.2 */
+		-webkit-transform : translateX(0%) translateZ(0); /* safari4 */
+		   -moz-transform : translateX(0%) translateZ(0);
+		    -ms-transform : translateX(0%) translateZ(0);
+		     -o-transform : translateX(0%) translateZ(0);
+		        transform : translateX(0%) translateZ(0);
+    }
+    
+/* slideOut */
+	.toggle_close_anime #log,
+	.toggle_close #log,
+	.toggle_open_before #log {
+		opacity   : 0;
+		-webkit-transform : translate(-10%,0); /* win safari3.2 */
+		-webkit-transform : translateX(-10%) translateZ(0); /* safari4 */
+		   -moz-transform : translateX(-10%) translateZ(0);
+		    -ms-transform : translateX(-10%) translateZ(0);
+		     -o-transform : translateX(-10%) translateZ(0);
+		        transform : translateX(-10%) translateZ(0);
+    }
 	</style>
 	
 	<script>
-		var toggleOpen = true;
-		function __resize(){
+		// css3 anime
+		// ff5+(-moz, 16+), ie10+, opera12+(-o, 12.5+), safari4+(-webkit, ?), iOS2+, Android2.1+
+		// http://lealog.hateblo.jp/entry/2013/03/06/234023
+		
+		// css3 transition
+		// ff4+(-moz, 16+), ie10+, opera11.6+(-o, 12.1+), safari3.0+(-webkit, ?), iOS(safari3.2+), Android2.1+
+		// https://developer.mozilla.org/ja/docs/Web/CSS/transition
+		
+		// css3 transform
+		// ff3.5+(-moz, 16+), ie9+(-ms, 10+), opera10.5+(-o, 12.1+), safari3.1+(-webkit, ?)
+		// https://developer.mozilla.org/ja/docs/Web/CSS/transform
+		
+		var EV_TRANS_END = document.getElementById && (function(){
+				var style = document.createElement( 'div' ).style;
+				return style[ 'transition' ]    !== void 0 ? 'transitionend'   :
+					style[ 'OTransition' ]      !== void 0 ? 'otransitionend'  :
+					style[ 'msTransition' ]     !== void 0 ? 'msTransitionEnd' :// 'MSTransitionEnd' :
+					style[ 'MozTransition' ]    !== void 0 ? 'transitionend'   :
+					style[ 'webkitTransition' ] !== void 0 ? 'webkitTransitionEnd' : false;
+			})(),
+			USE_ANIME  = !!EV_TRANS_END,
+			LOG_WIDTH  = 240,
+			hasEvent   = false,
+			toggleOpen = true,
+			toggleBusy = false;
+			
+		function __load(){
+			__resize();
+		    setTimeout(function(){scrollTo(0, 1);}, 100);
+		    if( window.addEventListener ){
+		    	window.addEventListener( 'orientationchange', function(){
+		    		setTimeout(function(){
+		    			//alert( window.innerWidth + 'x' + window.innerHeight );
+		    			__resize();
+		    		}, 100);
+		    		}, false
+		    	); // iOS
+		    };
+		};
+		function __resize( toggleChanged ){
 			var body  = document.body,
+				log   = body.children[0],
 				ifr   = body.children[1],
-				viewW = document.all ? ( document.documentElement || body ).offsetWidth : window.innerWidth,
+				btn   = body.children[2],
+				viewW = document.all ? ( document.documentElement || body ).offsetWidth || window.innerWidth /* for ie9 */ : window.innerWidth,
 				viewH = window.innerHeight;
+
 			if( 800 <= viewW ){
-				body.className = 'toggle_none';
-				if( document.all ){
-					ifr.style.width  = viewW - 240 + 'px';
-				} else {
-					ifr.style.width  = viewW - 240 + 'px';
+				ifr.style.width  = viewW - LOG_WIDTH + 'px';
+				if( !document.all ){	
 					ifr.style.height = viewH + 'px'; // NetFront3.4
 				};
+				body.className = 'toggle_none';
 			} else {
-				body.className = toggleOpen ? 'toggle_open' : 'toggle_close';
-				if( document.all ){
-					ifr.style.width  = viewW + 'px';
-				} else {
-					ifr.style.width  = viewW + 'px';
+				if( viewW < 240 ) log.style.width = viewW + 'px';
+				
+				ifr.style.width  = viewW + 'px';
+				if( !document.all ){
 					ifr.style.height = viewH + 'px'; // NetFront3.4
 				};
+				if( USE_ANIME && toggleChanged ){
+					toggleBusy = true;
+					body.className = toggleOpen ? 'toggle_open_before' : 'toggle_close_before';
+					setTimeout( __readyTrans, 60 ); // 0 は不可
+				} else {
+					body.className = toggleOpen ? 'toggle_open' : 'toggle_close';
+				};
 			};
-
+			btn.innerHTML = toggleOpen ? '&#9654;' : '&#9660;';//&#9658;&#9656;
 		};
-		function __ontoggle( elm ){
+			function __readyTrans(){
+				var body   = document.body,
+					log    = body.children[0],
+					_class = body.className,
+					i      = _class.indexOf( '_before' );
+				if( i !== -1 ){
+					hasEvent = true;
+					body.className = _class.substr( 0, i ) + '_anime';
+					
+					log.addEventListener( EV_TRANS_END, __onTrans, true );
+					log.style.cssText = toggleOpen ?
+						'opacity:1;-webkit-transform:translate(0,0);' :
+						'opacity:0;-webkit-transform:translate(-10%,0);'; /* win safari3.2 */
+				} else {
+					
+				};
+			};
+			function __onTrans(e){
+				var body   = document.body,
+					log    = body.children[0],
+					_class = body.className,
+					i      = _class.indexOf( '_anime' );
+				if( i !== -1 ){
+					log.removeEventListener( EV_TRANS_END, __onTrans, true );
+					log.style.cssText = '';
+					body.className = _class.substr( 0, i );
+					toggleBusy = false;
+				} else {
+					
+				};
+			};
+		function __ontoggle(){
+			//if( toggleBusy ) return;
 			toggleOpen = !toggleOpen;
-			__resize();
-			elm.innerHTML = toggleOpen ? '-' : '+';
+			__resize( true );
 		};
 	</script>
+	<noscript>
+	<meta name="viewport" content="width=device-width,initial-scale=1">
+	</noscript>
 </head>
-<body onload="__resize()" onresize="__resize()" scroll="no"><div id="log">-- console.log() --</div><iframe src="index.html" width="500" height="100%" scrolling="yes" frameborder="0"></iframe><div id="toggle" onclick="__ontoggle(this);">+</div></body>
+<body onload="__load()" onresize="__resize()" scroll="no"><div id="log">-- console.log() --</div><iframe src="index.html" width="500" height="100%" scrolling="yes" frameborder="0" allowtransparency="no"></iframe><div id="toggle" onclick="__ontoggle();"></div></body>
 </html>
 <xmp class="cleanup-target" style="display:none"><plaintext style="display:none"><!-- plainetext は nds 用 -->
\ No newline at end of file