mobile-query-three-www-live-editor-index.htm / htm
/.CodeMirror { font-family: inconsolata; background-color: rgba(255,255,255,0.5); } .CodeMirror-scroll { height: 100%; } div.CodeMirror-selected { background: rgba(0,0,0,0.1); } .CodeMirror-focused div.CodeMirror-selected { background: rgba(0,0,255,0.1); } </style> </head> <body> <script> window.URL = window.URL || window.webkitURL; // deflate var decode = function ( string ) { return RawDeflate.inflate( window.atob( string ) ); }; var encode = function ( string ) { return window.btoa( RawDeflate.deflate( string ) ); }; // var documents = [ { filename: 'Untitled', filetype: 'text/plain', autoupdate: true, code: decode('XY5NDoIwEIXXeIrKCha2B7BwAxNNSFz3Z6IlheJ00HB7C1UXJrN5b9438+TeBkPLBOxOg28lOfLQntzoBuUZXWbAhZ3VDaTIq52MBt1ELKJpSs5FHj07bwU91vxBz6P1wPtYtlLkeOJ0sEsrv7J4KmSvgN4WzecPNwiK4LqaVc11cB5w8slKKpJCqupjBoPuwdA/2QWcY8oqa7tQbccT8KsgxVbhDQ==') // bVRdb5swFH2mv+IuT0xjhlaqViUk0pZl60u1qq007dHBN8ET2Mw2SdMq/322wSi0QQjMPcf33C+Tf/j+a/n0534FpamrxUXevaK8RMrsO8prNBSKkiqNZj5pzebzzcQD2hwqdKtoLdkBXt0qkjtUm0rup1ByxlDMnPXo6Gng52nvO3f7OleF4o0BrYr5pDSm0dM03XJTtmtSyDqtFZNynZpSIZK/OlV0n9ZUG1TpuuUV65GaC4tOFlbK+ztxvbhwceyogoLWqGgCukCBCSgUDBWqWcC3KG3G6pBATa0Ap5VdoS5n3gMX3MQfPZkK7hjuy31uWlEYLgV0FFsOX49ODuYgcA9Ptw+rFblHpRu05B0uPRrDl+sE9lwwuSdcCFS/OTMlpCPbLfJtaRK4tHeWZdBF0QuQRmru5MmL1brOsi6oyGc5Un90lhB0FLIdUZbtGn/2QAxXWZYMj6AaajPad2fL9I1qXtz1aAyvUMhKqilkz5m/XJ4KN8pGPQWjWoQjhGBcmd85jM90ZNjh0yOUsdj3aLCHro7TomJH9UMP9V0cqMSO9yN/wfh9I5IzfRikmCzaGoUhbpgJbRrrb1naoYyH2SJM1qsKHStsO45nZpilMDYK/7WozVdvt4wfrmBx4I0qRpQ0nkOe4dMcMpJdzs6Ahx68elMi0i3icCD6gT2N8+Q85Wl3Zu0Zdv+J/w==' ) } ]; if ( localStorage.codeeditor !== undefined ) { documents = JSON.parse( localStorage.codeeditor ); } if ( window.location.hash ) { var hash = window.location.hash.substr( 1 ); var version = hash.substr( 0, 2 ); if ( version == 'A/' ) { alert( 'That shared link format is no longer supported.' ); } else if ( version == 'B/' ) { documents[ 0 ].code = decode( hash.substr( 2 ) ); } } // preview var preview = document.createElement( 'div' ); preview.style.position = 'absolute'; preview.style.left = '0px'; preview.style.top = '0px'; preview.style.width = window.innerWidth + 'px'; preview.style.height = window.innerHeight + 'px'; document.body.appendChild( preview ); // editor var interval; var code = CodeMirror( document.body, { mode: "text/html", lineNumbers: true, matchBrackets: true, indentWithTabs: true, tabSize: 4, indentUnit: 4, onChange: function () { buttonSave.style.display = ''; buttonDownload.style.display = 'none'; if ( documents[ 0 ].autoupdate === false ) return; clearTimeout( interval ); interval = setTimeout( update, 300 ); } } ); var codeElement = code.getWrapperElement(); codeElement.style.position = 'absolute'; codeElement.style.width = window.innerWidth + 'px'; codeElement.style.height = window.innerHeight + 'px'; document.body.appendChild( codeElement ); // toolbar var pad = function ( number, length ) { var string = number.toString(); while ( string.length < length ) string = '0' + string; return string; } var toolbar = document.createElement( 'div' ); toolbar.style.position = 'absolute'; toolbar.style.right = '15px'; toolbar.style.top = '15px'; document.body.appendChild( toolbar ); var buttonUpdate = document.createElement( 'button' ); buttonUpdate.className = 'button'; var checkbox = document.createElement( 'input' ); checkbox.type = 'checkbox'; if ( documents[ 0 ].autoupdate === true ) checkbox.checked = true; checkbox.style.margin = '-4px 4px -4px 0px'; checkbox.addEventListener( 'click', function ( event ) { event.stopPropagation(); documents[ 0 ].autoupdate = documents[ 0 ].autoupdate === false; localStorage.codeeditor = JSON.stringify( documents ); }, false ); buttonUpdate.appendChild( checkbox ); buttonUpdate.appendChild( document.createTextNode( 'update' ) ); buttonUpdate.addEventListener( 'click', function ( event ) { update(); }, false ); toolbar.appendChild( buttonUpdate ); var buttonIO = document.createElement( 'span' ); toolbar.appendChild( buttonIO ); var buttonSave = document.createElement( 'button' ); buttonSave.className = 'button'; buttonSave.textContent = 'save'; buttonSave.addEventListener( 'click', function ( event ) { save(); }, false ); buttonIO.appendChild( buttonSave ); var buttonDownload = document.createElement( 'a' ); buttonDownload.className = 'button'; buttonDownload.style.display = 'none'; buttonDownload.download = 'index.html'; buttonDownload.textContent = 'download'; buttonIO.appendChild( buttonDownload ); var buttonShare = document.createElement( 'button' ); buttonShare.className = 'button'; buttonShare.textContent = 'share'; buttonShare.addEventListener( 'click', function ( event ) { window.location.replace( '#B/' + encode( code.getValue() ) ); }, false ); buttonIO.appendChild( buttonShare ); var buttonHide = document.createElement( 'button' ); buttonHide.className = 'button'; buttonHide.textContent = 'hide code'; buttonHide.addEventListener( 'click', function ( event ) { if ( codeElement.style.display === '' ) { this.textContent = 'show code'; codeElement.style.display = 'none'; buttonUpdate.style.display = 'none'; buttonIO.style.display = 'none'; buttonShare.display = 'none'; } else { this.textContent = 'hide code'; codeElement.style.display = ''; buttonUpdate.style.display = ''; buttonIO.style.display = ''; buttonShare.display = ''; } }, false ); toolbar.appendChild( buttonHide ); // events document.addEventListener( 'drop', function ( event ) { event.preventDefault(); event.stopPropagation(); var file = event.dataTransfer.files[ 0 ]; documents[ 0 ].filename = file.name; documents[ 0 ].filetype = file.type; var reader = new FileReader(); reader.onload = function ( event ) { code.setValue( event.target.result ); }; reader.readAsText( file ); }, false ); document.addEventListener( 'keydown', function ( event ) { if ( event.keyCode === 'S'.charCodeAt(0) && event.ctrlKey === true ) { event.preventDefault(); save(); } if ( event.keyCode === 13 && event.ctrlKey === true ) { update(); } }, false ); window.addEventListener( 'resize', function ( event ) { codeElement.style.width = window.innerWidth + 'px'; codeElement.style.height = window.innerHeight + 'px'; preview.style.width = window.innerWidth + 'px'; preview.style.height = window.innerHeight + 'px'; } ); // actions var update = function () { while ( preview.children.length > 0 ) { preview.removeChild( preview.firstChild ); } var iframe = document.createElement( 'iframe' ); iframe.style.width = '100%'; iframe.style.height = '100%'; iframe.style.border = '0'; preview.appendChild( iframe ); var content = iframe.contentDocument || iframe.contentWindow.document; content.open(); content.write( code.getValue() ); content.close(); } var save = function () { documents[ 0 ].code = code.getValue(); localStorage.codeeditor = JSON.stringify( documents ); var blob = new Blob( [ code.getValue() ], { type: documents[ 0 ].filetype } ); var objectURL = URL.createObjectURL( blob ); buttonDownload.href = objectURL; var date = new Date(); buttonDownload.download = documents[ 0 ].filename; buttonSave.style.display = 'none'; buttonDownload.style.display = ''; } code.setValue( documents[ 0 ].code ); update(); </script> </body> </html>
[]readme course(s) prefaceI 1 2II 3 4III 5 6 7IV 8 9 10V 11 12 afterthought(s)appendix reference(s) example(s)resource(s) _![]()
(C) Æliens 04/09/2009
You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.