0.6.x/logger.html

   1 <!DOCTYPE html>\r
   2 <html lang="ja">\r
   3 <head>\r
   4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">\r
   5                 \r
   6         <title>Logger</title>\r
   7         <meta name="msapplication-tap-highlight" content="no">\r
   8         <meta name="HandheldFriendly" content="true">\r
   9         <meta name="mobileoptimized" content="0">\r
  10         \r
  11         <!-- for ie & chrome frame -->\r
  12         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">\r
  13         <meta http-equiv="imagetoolbar" content="no">\r
  14         \r
  15         <!-- for smartphone -->\r
  16         <meta name="format-detection" content="telephone=no">\r
  17         <meta name="apple-mobile-web-app-capable" content="yes">\r
  18         \r
  19         <!-- maximum-scale=1 初代iPod touch で必要, dynamic-viewport は operaで可能  -->\r
  20         <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">\r
  21 \r
  22         <style>\r
  23                 html {\r
  24                         font-size                : 100%; /* 1 */\r
  25                         -webkit-text-size-adjust : 100%; /* 2 */\r
  26                            -moz-text-size-adjust : 100%; /* 2 */\r
  27                             -ms-text-size-adjust : none; /* 2 */\r
  28                                 text-size-adjust : 100%; /* 2 */\r
  29                                \r
  30                     touch-action            : none;\r
  31                 -ms-touch-action            : none;\r
  32                         touch-callout       : none;\r
  33                 -webkit-touch-callout       : none;\r
  34                     content-zooming         : none;\r
  35                 -ms-content-zooming         : none;\r
  36                         user-drag           : none;\r
  37                  -khtml-user-drag           : none;\r
  38                 -webkit-user-drag           : none;\r
  39                 }\r
  40                 html, body {\r
  41                         padding    : 0;\r
  42                         margin     : 0;\r
  43                         border     : 0;\r
  44                         width      : 100%;\r
  45                         height     : 100%;\r
  46                         overflow   : hidden;\r
  47                         background : #FF66FF;\r
  48                 }\r
  49                 iframe {\r
  50                         display     : block;\r
  51                         padding     : 0;\r
  52                         border      : 0;\r
  53                         height      : 100%;\r
  54                         margin-left : 0;\r
  55                         background  : #fff;\r
  56                 }\r
  57                 #log {\r
  58                         position   : absolute;\r
  59                         top        : 0%;\r
  60                         left       : 0%;\r
  61                         width      : 240px;\r
  62                         height     : 100%;\r
  63                         font-size  : 12px;\r
  64                         z-index    : 888;\r
  65                         color      : #fff;\r
  66                         background : #000;\r
  67                         overflow   : auto;\r
  68                 }\r
  69                 #toggle {\r
  70                         font-size   : 2em;\r
  71                         font-family : Arial;\r
  72                         position    : absolute;\r
  73                         top         : 0;\r
  74                         left        : 0;\r
  75                         width       : 1em;\r
  76                         height      : 1em;\r
  77                         line-height : 1;\r
  78                         color       : #00f;\r
  79                         text-align  : center;\r
  80                         font-weight : bold;\r
  81                         z-index     : 999999;\r
  82                         cursor      : pointer;\r
  83                         -webkit-tap-highlight-color : rgba(0,0,0,0);\r
  84                 }\r
  85                 .toggle_close #log,\r
  86                 .toggle_none #toggle {\r
  87                         display : none;\r
  88                 }\r
  89                 .toggle_none iframe {\r
  90                         margin-left : 240px;\r
  91                 }\r
  92                 \r
  93 /*--------------------------------------------------------------------------------------\r
  94  *  slide & zoom\r
  95  */\r
  96         .toggle_open_anime #log,\r
  97         .toggle_close_anime #log,\r
  98         .toggle_close_before #log, .toggle_open_before #log /* win safari3.2 */\r
  99         {\r
 100                 -webkit-transition          : 0.5s ease-in-out; /* win safari3.2 */\r
 101                 -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 は指定しない */\r
 102 \r
 103                 /* http://blog.webcreativepark.net/2012/10/19-161432.html */\r
 104                 -webkit-backface-visibility : hidden;\r
 105                    -moz-backface-visibility : hidden;\r
 106                         backface-visibility : hidden;\r
 107                         \r
 108                         transition          : opacity 0.5s ease-in-out 0s, left 0.5s ease-in-out 0s, transform 0.5s ease-in-out 0s;\r
 109                      -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;\r
 110                     -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;\r
 111                    -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;\r
 112     }\r
 113 \r
 114 /* slideIn */\r
 115         .toggle_open_anime #log,\r
 116         .toggle_open #log,\r
 117         .toggle_close_before #log {\r
 118                 opacity   : 1;\r
 119                 -webkit-transform : translate(0%,0); /* win safari3.2 */\r
 120                 -webkit-transform : translateX(0%) translateZ(0); /* safari4 */\r
 121                    -moz-transform : translateX(0%) translateZ(0);\r
 122                     -ms-transform : translateX(0%) translateZ(0);\r
 123                      -o-transform : translateX(0%) translateZ(0);\r
 124                         transform : translateX(0%) translateZ(0);\r
 125     }\r
 126     \r
 127 /* slideOut */\r
 128         .toggle_close_anime #log,\r
 129         .toggle_close #log,\r
 130         .toggle_open_before #log {\r
 131                 opacity   : 0;\r
 132                 -webkit-transform : translate(-10%,0); /* win safari3.2 */\r
 133                 -webkit-transform : translateX(-10%) translateZ(0); /* safari4 */\r
 134                    -moz-transform : translateX(-10%) translateZ(0);\r
 135                     -ms-transform : translateX(-10%) translateZ(0);\r
 136                      -o-transform : translateX(-10%) translateZ(0);\r
 137                         transform : translateX(-10%) translateZ(0);\r
 138     }\r
 139         </style>\r
 140         \r
 141         <script>\r
 142                 // css3 anime\r
 143                 // ff5+(-moz, 16+), ie10+, opera12+(-o, 12.5+), safari4+(-webkit, ?), iOS2+, Android2.1+\r
 144                 // http://lealog.hateblo.jp/entry/2013/03/06/234023\r
 145                 \r
 146                 // css3 transition\r
 147                 // ff4+(-moz, 16+), ie10+, opera11.6+(-o, 12.1+), safari3.0+(-webkit, ?), iOS(safari3.2+), Android2.1+\r
 148                 // https://developer.mozilla.org/ja/docs/Web/CSS/transition\r
 149                 \r
 150                 // css3 transform\r
 151                 // ff3.5+(-moz, 16+), ie9+(-ms, 10+), opera10.5+(-o, 12.1+), safari3.1+(-webkit, ?)\r
 152                 // https://developer.mozilla.org/ja/docs/Web/CSS/transform\r
 153                 \r
 154                 var EV_TRANS_END = document.getElementById && (function(){\r
 155                                 var style = document.createElement( 'div' ).style;\r
 156                                 return style[ 'transition' ]    !== void 0 ? 'transitionend'   :\r
 157                                         style[ 'OTransition' ]      !== void 0 ? 'otransitionend'  :\r
 158                                         style[ 'msTransition' ]     !== void 0 ? 'msTransitionEnd' :// 'MSTransitionEnd' :\r
 159                                         style[ 'MozTransition' ]    !== void 0 ? 'transitionend'   :\r
 160                                         style[ 'webkitTransition' ] !== void 0 ? 'webkitTransitionEnd' : false;\r
 161                         })(),\r
 162                         USE_ANIME  = !!EV_TRANS_END,\r
 163                         LOG_WIDTH  = 240,\r
 164                         hasEvent   = false,\r
 165                         toggleOpen = true,\r
 166                         toggleBusy = false;\r
 167                         \r
 168                 function __load(){\r
 169                         __resize();\r
 170                     setTimeout(function(){scrollTo(0, 1);}, 100);\r
 171                     if( window.addEventListener ){\r
 172                         window.addEventListener( 'orientationchange', function(){\r
 173                                 setTimeout(function(){\r
 174                                         //alert( window.innerWidth + 'x' + window.innerHeight );\r
 175                                         __resize();\r
 176                                 }, 100);\r
 177                                 }, false\r
 178                         ); // iOS\r
 179                     };\r
 180                 };\r
 181                 function __resize( toggleChanged ){\r
 182                         var body  = document.body,\r
 183                                 log   = body.children[0],\r
 184                                 ifr   = body.children[1],\r
 185                                 btn   = body.children[2],\r
 186                                 viewW = document.all ? ( document.documentElement || body ).offsetWidth || window.innerWidth /* for ie9 */ : window.innerWidth,\r
 187                                 viewH = window.innerHeight;\r
 188 \r
 189                         if( 800 <= viewW ){\r
 190                                 ifr.style.width  = viewW - LOG_WIDTH + 'px';\r
 191                                 if( !document.all ){    \r
 192                                         ifr.style.height = viewH + 'px'; // NetFront3.4\r
 193                                 };\r
 194                                 body.className = 'toggle_none';\r
 195                         } else {\r
 196                                 if( viewW < 240 ) log.style.width = viewW + 'px';\r
 197                                 \r
 198                                 ifr.style.width  = viewW + 'px';\r
 199                                 if( !document.all ){\r
 200                                         ifr.style.height = viewH + 'px'; // NetFront3.4\r
 201                                 };\r
 202                                 if( USE_ANIME && toggleChanged ){\r
 203                                         toggleBusy = true;\r
 204                                         body.className = toggleOpen ? 'toggle_open_before' : 'toggle_close_before';\r
 205                                         setTimeout( __readyTrans, 60 ); // 0 は不可\r
 206                                 } else {\r
 207                                         body.className = toggleOpen ? 'toggle_open' : 'toggle_close';\r
 208                                 };\r
 209                         };\r
 210                         btn.innerHTML = toggleOpen ? '&#9654;' : '&#9660;';//&#9658;&#9656;\r
 211                 };\r
 212                         function __readyTrans(){\r
 213                                 var body   = document.body,\r
 214                                         log    = body.children[0],\r
 215                                         _class = body.className,\r
 216                                         i      = _class.indexOf( '_before' );\r
 217                                 if( i !== -1 ){\r
 218                                         hasEvent = true;\r
 219                                         body.className = _class.substr( 0, i ) + '_anime';\r
 220                                         \r
 221                                         log.addEventListener( EV_TRANS_END, __onTrans, true );\r
 222                                         log.style.cssText = toggleOpen ?\r
 223                                                 'opacity:1;-webkit-transform:translate(0,0);' :\r
 224                                                 'opacity:0;-webkit-transform:translate(-10%,0);'; /* win safari3.2 */\r
 225                                 } else {\r
 226                                         \r
 227                                 };\r
 228                         };\r
 229                         function __onTrans(e){\r
 230                                 var body   = document.body,\r
 231                                         log    = body.children[0],\r
 232                                         _class = body.className,\r
 233                                         i      = _class.indexOf( '_anime' );\r
 234                                 if( i !== -1 ){\r
 235                                         log.removeEventListener( EV_TRANS_END, __onTrans, true );\r
 236                                         log.style.cssText = '';\r
 237                                         body.className = _class.substr( 0, i );\r
 238                                         toggleBusy = false;\r
 239                                 } else {\r
 240                                         \r
 241                                 };\r
 242                         };\r
 243                 function __ontoggle(){\r
 244                         //if( toggleBusy ) return;\r
 245                         toggleOpen = !toggleOpen;\r
 246                         __resize( true );\r
 247                 };\r
 248         </script>\r
 249         <noscript>\r
 250         <meta name="viewport" content="width=device-width,initial-scale=1">\r
 251         </noscript>\r
 252 </head>\r
 253 <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>\r
 254 </html>\r
 255 <xmp class="cleanup-target" style="display:none"><plaintext style="display:none"><!-- plainetext は nds 用 -->