Line 1: | Line 1: | ||
− | + | {{#tag:html| | |
+ | <head> | ||
+ | <style> | ||
+ | body { | ||
+ | font: 14px 'Open Sans', sans-serif; | ||
+ | color: #555; | ||
+ | background: #eee; | ||
+ | } | ||
+ | h1 { | ||
+ | padding: 50px 0; | ||
+ | font-weight: 400; | ||
+ | text-align: center; | ||
+ | } | ||
+ | p { | ||
+ | margin: 0 0 20px; | ||
+ | line-height: 1.5; | ||
+ | } | ||
+ | main { | ||
+ | min-width: 320px; | ||
+ | max-width: 800px; | ||
+ | padding: 50px; | ||
+ | margin: 0 auto; | ||
+ | background: #fff; | ||
+ | } | ||
+ | section { | ||
+ | display: none; | ||
+ | padding: 20px 0 0; | ||
+ | border-top: 1px solid #ddd; | ||
+ | } | ||
+ | input { | ||
+ | display: none; | ||
+ | } | ||
+ | label { | ||
+ | display: inline-block; | ||
+ | margin: 0 0 -1px; | ||
+ | padding: 15px 25px; | ||
+ | font-weight: 600; | ||
+ | text-align: center; | ||
+ | color: #bbb; | ||
+ | border: 1px solid transparent; | ||
+ | } | ||
− | { | + | input:checked + label { |
− | + | color: #555; | |
− | + | border-top: 2px solid #fbb74b; | |
− | + | } | |
− | + | </style> | |
− | + | <script> | |
− | + | /** | |
− | + | * Converts an array buffer to a string | |
− | + | * | |
− | + | * @private | |
− | + | * @param {ArrayBuffer} buf The buffer to convert | |
+ | * @param {Function} callback The function to call when conversion is complete | ||
+ | * NOTE: Quite inefficient for small data... | ||
+ | */ | ||
+ | function _arrayBufferToString(buf, callback) { | ||
+ | var bb = new Blob([new Uint8Array(buf)]); | ||
+ | var f = new FileReader(); | ||
+ | f.onload = function(e) { | ||
+ | callback(e.target.result); | ||
+ | }; | ||
+ | f.readAsText(bb); | ||
+ | } | ||
− | + | var _load_unzip_format_and_insert = function(src, id) { | |
+ | // load zip file from src, unzip and format it to text | ||
+ | // and insert content into DOM element referenced by id | ||
− | + | var oReq = new XMLHttpRequest(); | |
+ | oReq.open("GET", src, true); | ||
+ | oReq.responseType = "arraybuffer"; | ||
− | }} | + | oReq.onload = function (oEvent) { |
− | }} | + | var arrayBuffer = oReq.response; // Note: not oReq.responseText |
+ | if (arrayBuffer) { | ||
+ | var byteArray = new Uint8Array(arrayBuffer); | ||
+ | var gunzip = new Zlib.Gunzip(byteArray); | ||
+ | var plain = gunzip.decompress(); | ||
+ | _arrayBufferToString(plain, function(r){$("#table").html(r)}); | ||
+ | } | ||
+ | }; | ||
+ | oReq.send(); | ||
+ | }; | ||
+ | |||
+ | //_load_unzip_format_and_insert("PlateReader.zip", ".notebook-awesomesheet"); | ||
+ | </script> | ||
+ | |||
+ | <script type='text/javascript'> | ||
+ | $(document).ready(function(){ | ||
+ | var awesomes = document.getElementsByClassName('awesome'); | ||
+ | for(var i=0; i<awesomes.length; i++) { | ||
+ | awesomes[i].addEventListener("click", function(){ | ||
+ | var id = $(this).attr('id'); | ||
+ | var url = $(this).val(); | ||
+ | //id = id.substring(3, id.length); | ||
+ | var content = '#content' + id; | ||
+ | $(content).css('display', 'block'); | ||
+ | _load_unzip_format_and_insert(url, content); | ||
+ | |||
+ | $('.awesome-content').not(content).css('display', 'none'); | ||
+ | }); | ||
+ | }; | ||
+ | }); | ||
+ | |||
+ | </script> | ||
+ | |||
+ | </head> | ||
+ | <body> | ||
+ | <main> | ||
+ | {{{1}}} | ||
+ | <div style="max-width: 100%"> | ||
+ | <div class="col-lg-12 notebook-awesomesheet" style="overflow-x: auto !important;"> | ||
+ | <div id="table">Loading...</div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </main> | ||
+ | </body> | ||
}} | }} | ||
− |
Revision as of 23:53, 24 October 2017
Loading...