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         \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">\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                 }\r
  48                 iframe {\r
  49                         display     : block;\r
  50                         padding     : 0;\r
  51                         border      : 0;\r
  52                         height      : 100%;\r
  53                         margin-left : 0;\r
  54                 }\r
  55                 #log {\r
  56                         position   : absolute;\r
  57                         top        : 0%;\r
  58                         left       : 0%;\r
  59                         width      : 240px;\r
  60                         height     : 100%;\r
  61                         font-size  : 12px;\r
  62                         z-index    : 888;\r
  63                         color      : #fff;\r
  64                         background : #000;\r
  65                         overflow   : auto;\r
  66                 }\r
  67                 #toggle {\r
  68                         font-size   : 1.5em;\r
  69                         font-family : Arial;\r
  70                         position    : absolute;\r
  71                         top         : 0;\r
  72                         left        : 0;\r
  73                         width       : 1em;\r
  74                         height      : 1em;\r
  75                         line-height : 1;\r
  76                         color       : #00f;\r
  77                         text-align  : center;\r
  78                         font-weight : bold;\r
  79                         z-index     : 999;\r
  80                         cursor      : pointer;\r
  81                         -webkit-tap-highlight-color : rgba(0,0,0,0);\r
  82                 }\r
  83                 .toggle_close #log,\r
  84                 .toggle_none #toggle {\r
  85                         display : none;\r
  86                 }\r
  87                 .toggle_none iframe {\r
  88                         margin-left : 240px;\r
  89                 }\r
  90                 \r
  91 /*--------------------------------------------------------------------------------------\r
  92  *  slide & zoom\r
  93  */\r
  94         .toggle_open_anime #log,\r
  95         .toggle_close_anime #log,\r
  96         .toggle_close_before #log, .toggle_open_before #log /* win safari3.2 */\r
  97         {\r
  98                 -webkit-transition          : 0.5s ease-in-out; /* win safari3.2 */\r
  99                 -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
 100 \r
 101                 /* http://blog.webcreativepark.net/2012/10/19-161432.html */\r
 102                 -webkit-backface-visibility : hidden;\r
 103                    -moz-backface-visibility : hidden;\r
 104                         backface-visibility : hidden;\r
 105                         \r
 106                         transition          : opacity 0.5s ease-in-out 0s, left 0.5s ease-in-out 0s, transform 0.5s ease-in-out 0s;\r
 107                      -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
 108                     -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
 109                    -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
 110     }\r
 111 \r
 112 /* slideIn */\r
 113         .toggle_open_anime #log,\r
 114         .toggle_open #log,\r
 115         .toggle_close_before #log {\r
 116                 opacity   : 1;\r
 117                 -webkit-transform : translate(0%,0); /* win safari3.2 */\r
 118                 -webkit-transform : translateX(0%) translateZ(0); /* safari4 */\r
 119                    -moz-transform : translateX(0%) translateZ(0);\r
 120                     -ms-transform : translateX(0%) translateZ(0);\r
 121                      -o-transform : translateX(0%) translateZ(0);\r
 122                         transform : translateX(0%) translateZ(0);\r
 123     }\r
 124     \r
 125 /* slideOut */\r
 126         .toggle_close_anime #log,\r
 127         .toggle_close #log,\r
 128         .toggle_open_before #log {\r
 129                 opacity   : 0;\r
 130                 -webkit-transform : translate(-10%,0); /* win safari3.2 */\r
 131                 -webkit-transform : translateX(-10%) translateZ(0); /* safari4 */\r
 132                    -moz-transform : translateX(-10%) translateZ(0);\r
 133                     -ms-transform : translateX(-10%) translateZ(0);\r
 134                      -o-transform : translateX(-10%) translateZ(0);\r
 135                         transform : translateX(-10%) translateZ(0);\r
 136     }\r
 137         </style>\r
 138         \r
 139         <script>\r
 140                 // css3 anime\r
 141                 // ff5+(-moz, 16+), ie10+, opera12+(-o, 12.5+), safari4+(-webkit, ?), iOS2+, Android2.1+\r
 142                 // http://lealog.hateblo.jp/entry/2013/03/06/234023\r
 143                 \r
 144                 // css3 transition\r
 145                 // ff4+(-moz, 16+), ie10+, opera11.6+(-o, 12.1+), safari3.0+(-webkit, ?), iOS(safari3.2+), Android2.1+\r
 146                 // https://developer.mozilla.org/ja/docs/Web/CSS/transition\r
 147                 \r
 148                 // css3 transform\r
 149                 // ff3.5+(-moz, 16+), ie9+(-ms, 10+), opera10.5+(-o, 12.1+), safari3.1+(-webkit, ?)\r
 150                 // https://developer.mozilla.org/ja/docs/Web/CSS/transform\r
 151                 \r
 152                 var EV_TRANS_END = document.getElementById && (function(){\r
 153                                 var style = document.createElement( 'div' ).style;\r
 154                                 return style[ 'transition' ]    !== void 0 ? 'transitionend'   :\r
 155                                         style[ 'OTransition' ]      !== void 0 ? 'otransitionend'  :\r
 156                                         style[ 'msTransition' ]     !== void 0 ? 'msTransitionEnd' :// 'MSTransitionEnd' :\r
 157                                         style[ 'MozTransition' ]    !== void 0 ? 'transitionend'   :\r
 158                                         style[ 'webkitTransition' ] !== void 0 ? 'webkitTransitionEnd' : false;\r
 159                         })(),\r
 160                         USE_ANIME  = !!EV_TRANS_END,\r
 161                         LOG_WIDTH  = 240,\r
 162                         hasEvent   = false,\r
 163                         toggleOpen = true,\r
 164                         toggleBusy = false;\r
 165 \r
 166                 function __resize( toggleChanged ){\r
 167                         var body  = document.body,\r
 168                                 log   = body.children[0],\r
 169                                 ifr   = body.children[1],\r
 170                                 btn   = body.children[2],\r
 171                                 viewW = document.all ? ( document.documentElement || body ).offsetWidth || window.innerWidth /* for ie9 */ : window.innerWidth,\r
 172                                 viewH = window.innerHeight;\r
 173                         if( 800 <= viewW ){\r
 174                                 if( document.all ){\r
 175                                         ifr.style.width  = viewW - LOG_WIDTH + 'px';\r
 176                                 } else {\r
 177                                         ifr.style.width  = viewW - LOG_WIDTH + 'px';\r
 178                                         ifr.style.height = viewH + 'px'; // NetFront3.4\r
 179                                 };\r
 180                                 body.className = 'toggle_none';\r
 181                         } else {\r
 182                                 if( viewW < 240 ) log.style.width = viewW + 'px';\r
 183                                 \r
 184                                 if( document.all ){\r
 185                                         ifr.style.width  = viewW + 'px';\r
 186                                 } else {\r
 187                                         ifr.style.width  = viewW + 'px';\r
 188                                         ifr.style.height = viewH + 'px'; // NetFront3.4\r
 189                                 };\r
 190                                 if( USE_ANIME && toggleChanged ){\r
 191                                         toggleBusy = true;\r
 192                                         body.className = toggleOpen ? 'toggle_open_before' : 'toggle_close_before';\r
 193                                         setTimeout( __readyTrans, 60 ); // 0 は不可\r
 194                                 } else {\r
 195                                         body.className = toggleOpen ? 'toggle_open' : 'toggle_close';\r
 196                                 };\r
 197                         };\r
 198                         btn.innerHTML = toggleOpen ? '&#9654;' : '&#9660;';//&#9658;&#9656;\r
 199                 };\r
 200                         function __readyTrans(){\r
 201                                 var body   = document.body,\r
 202                                         log    = body.children[0],\r
 203                                         _class = body.className,\r
 204                                         i      = _class.indexOf( '_before' );\r
 205                                 if( i !== -1 ){\r
 206                                         hasEvent = true;\r
 207                                         body.className = _class.substr( 0, i ) + '_anime';\r
 208                                         \r
 209                                         log.addEventListener( EV_TRANS_END, __onTrans, true );\r
 210                                         log.style.cssText = toggleOpen ?\r
 211                                                 'opacity:1;-webkit-transform:translate(0,0);' :\r
 212                                                 'opacity:0;-webkit-transform:translate(-10%,0);'; /* win safari3.2 */\r
 213                                 } else {\r
 214                                         \r
 215                                 };\r
 216                         };\r
 217                         function __onTrans(e){\r
 218                                 var body   = document.body,\r
 219                                         log    = body.children[0],\r
 220                                         _class = body.className,\r
 221                                         i      = _class.indexOf( '_anime' );\r
 222                                 if( i !== -1 ){\r
 223                                         log.removeEventListener( EV_TRANS_END, __onTrans, true );\r
 224                                         log.style.cssText = '';\r
 225                                         body.className = _class.substr( 0, i );\r
 226                                         toggleBusy = false;\r
 227                                 } else {\r
 228                                         \r
 229                                 };\r
 230                         };\r
 231                 function __ontoggle(){\r
 232                         //if( toggleBusy ) return;\r
 233                         toggleOpen = !toggleOpen;\r
 234                         __resize( true );\r
 235                 };\r
 236         </script>\r
 237         <noscript>\r
 238         <meta name="viewport" content="width=device-width,initial-scale=1">\r
 239         </noscript>\r
 240 </head>\r
 241 <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();"></div></body>\r
 242 </html>\r
 243 <xmp class="cleanup-target" style="display:none"><plaintext style="display:none"><!-- plainetext は nds 用 -->