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