X-Git-Url: http://git.osdn.jp/view?a=blobdiff_plain;ds=sidebyside;f=0.6.x%2Flogger.html;h=731be4e720211fc8bd166612f0c527bade11c0f3;hb=512e08f4d38eab417f9651277e8a50c08535cb07;hp=9971fb5fff90e89e4b61108950af94ae7431316e;hpb=727a15dac43d44825a94fb061a433e18dc7816d7;p=pettanr%2FclientJs.git

diff --git a/0.6.x/logger.html b/0.6.x/logger.html
index 9971fb5..731be4e 100644
--- a/0.6.x/logger.html
+++ b/0.6.x/logger.html
@@ -4,7 +4,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 		
 	<title>Logger</title>
-	
+	<meta name="msapplication-tap-highlight" content="no">
 	<meta name="HandheldFriendly" content="true">
 	<meta name="mobileoptimized" content="0">
 	
@@ -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,6 +52,7 @@
 			border      : 0;
 			height      : 100%;
 			margin-left : 0;
+			background  : #fff;
 		}
 		#log {
 			position   : absolute;
@@ -48,7 +67,7 @@
 			overflow   : auto;
 		}
 		#toggle {
-			font-size   : 1.5em;
+			font-size   : 2em;
 			font-family : Arial;
 			position    : absolute;
 			top         : 0;
@@ -59,8 +78,9 @@
 			color       : #00f;
 			text-align  : center;
 			font-weight : bold;
-			z-index     : 999;
+			z-index     : 999999;
 			cursor      : pointer;
+			-webkit-tap-highlight-color : rgba(0,0,0,0);
 		}
 		.toggle_close #log,
 		.toggle_none #toggle {
@@ -74,53 +94,47 @@
  *  slide & zoom
  */
 	.toggle_open_anime #log,
-	.toggle_close_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;
 		        
-		transform                   : translateZ(0);
-		
-		        transition-property : opacity, left, transform;
-		     -o-transition-property : opacity, left, transform;
-		    -ms-transition-property : opacity, left, transform;
-		   -moz-transition-property : opacity, left, transform;
-		-webkit-transition-property : opacity, left, transform;
-	
-		        transition-duration : 0.5s;
-		     -o-transition-duration : 0.5s;
-		    -ms-transition-duration : 0.5s;
-		   -moz-transition-duration : 0.5s;
-		-webkit-transition-duration : 0.5s;
-		
-		        transition-timing-function : ease-in-out;
-		     -o-transition-timing-function : ease-in-out;
-		    -ms-transition-timing-function : ease-in-out;
-		   -moz-transition-timing-function : ease-in-out;
-		-webkit-transition-timing-function : ease-in-out;
-	
-		        transition-delay    : 0s;
-		     -o-transition-delay    : 0s;
-		    -ms-transition-delay    : 0s;
-		   -moz-transition-delay    : 0s;
-		-webkit-transition-delay    : 0s;
+		        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; left :  0%;/* for iOS3 */
-		/*transform : translateX(0%);*/
+		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; left : -5%;/* for iOS3 */
-		/*transform : translateX(-5%);*/
+		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>
 	
@@ -130,96 +144,112 @@
 		// http://lealog.hateblo.jp/entry/2013/03/06/234023
 		
 		// css3 transition
-		// ff4+(-moz, 16+), ie10+, opera11.6+(-o, 12.1+), safari3+(-webkit, ?), iOS(safari3.2+), Android2.1+
+		// 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+()
-
-		var EV_TRANS_END = (function(){
+		// 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 document.documentMode <= 9 ? false : // ie9
-					style[ 'transform' ]       !== void 0 ? 'transitionend'   :
-					style[ 'OTransform' ]      !== void 0 ? 'otransitionend'  :
-					style[ 'msTransform' ]     !== void 0 ? 'msTransitionEnd' : // 'MSTransitionEnd' :
-					style[ 'MozTransform' ]    !== void 0 ? 'transitionend'   :
-					style[ 'webkitTransform' ] !== void 0 ? 'webkitTransitionEnd' : false;
+				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 __resize(){
+			
+		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],
 				btn   = body.children[2],
 				viewW = document.all ? ( document.documentElement || body ).offsetWidth || window.innerWidth /* for ie9 */ : window.innerWidth,
 				viewH = window.innerHeight;
+
 			if( 800 <= viewW ){
-				if( document.all ){
-					ifr.style.width  = viewW - LOG_WIDTH + 'px';
-				} else {
-					ifr.style.width  = viewW - LOG_WIDTH + 'px';
+				ifr.style.width  = viewW - LOG_WIDTH + 'px';
+				if( !document.all ){	
 					ifr.style.height = viewH + 'px'; // NetFront3.4
 				};
 				body.className = 'toggle_none';
 			} else {
 				if( viewW < 240 ) log.style.width = viewW + 'px';
 				
-				if( document.all ){
-					ifr.style.width  = viewW + 'px';
-				} else {
-					ifr.style.width  = viewW + 'px';
+				ifr.style.width  = viewW + 'px';
+				if( !document.all ){
 					ifr.style.height = viewH + 'px'; // NetFront3.4
 				};
-				if( USE_ANIME ){
+				if( USE_ANIME && toggleChanged ){
 					toggleBusy = true;
 					body.className = toggleOpen ? 'toggle_open_before' : 'toggle_close_before';
-					setTimeout( __readyTrans, 16 );
+					setTimeout( __readyTrans, 60 ); // 0 は不可
 				} else {
 					body.className = toggleOpen ? 'toggle_open' : 'toggle_close';
 				};
 			};
-			btn.innerHTML = toggleOpen ? '&#9658;' : '&#9660;';
+			btn.innerHTML = toggleOpen ? '&#9654;' : '&#9660;';//&#9658;&#9656;
 		};
-		function __readyTrans(){
-			var body   = document.body,
-				log    = body.children[0],
-				_class = body.className,
-				i      = _class.indexOf( '_before' );
-			if( i !== -1 ){
-				log.addEventListener( EV_TRANS_END, __onTrans, true );
-				hasEvent = true;
-				body.className = _class.substr( 0, i ) + '_anime';
-			} else {
-				
+			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){
-			console.log( 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 );
-				body.className = _class.substr( 0, i );
-				toggleBusy = false;
-			} 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();
+			__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="mini.html" width="500" height="100%" scrolling="yes" frameborder="0"></iframe><div id="toggle" onclick="__ontoggle();"></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