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