Difference between revisions of "Team:Heidelberg/awesomesheet"

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 {
+
{{Heidelberg/header_test
−
              color: #555;
+
    }}
−
              border-top: 2px solid #fbb74b;
+
{{Heidelberg/navbar
−
            }
+
    }}
−
        </style>
+
{{Heidelberg/templateus/Mainbody|
−
        <script>
+
    Awesomesheet.|
−
/**
+
    Documentation of all wetlab workflows|
−
      * Converts an array buffer to a string
+
    https://static.igem.org/mediawiki/2017/a/ae/T--Heidelberg--2017_Background_Tiger.jpg|
−
      *
+
    {{Heidelberg/templateus/Contentsection|
−
      * @private
+
        {{Heidelberg/awesomesheet|
−
      * @param {ArrayBuffer} buf The buffer to convert
+
            {{Heidelberg/sheetnavitemchecked|Primers|primers|https://static.igem.org/mediawiki/2017/8/87/T--Heidelberg--2017_aweseome-prim.zip}}{{Heidelberg/sheetnavitem|Plasmids|plasmids|https://static.igem.org/mediawiki/2017/8/8c/T--Heidelberg--2017_aweseome-plasmids.zip}}
−
      * @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) {
+
            {{Heidelberg/sheettext|primers|Primers Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin ball tip turducken. Pork belly meatball t-bone bresaola tail filet mignon kevin turkey ribeye shank flank doner cow kielbasa shankle. Pig swine chicken hamburger, tenderloin turkey rump ball tip sirloin frankfurter meatloaf boudin brisket ham hock. Hamburger venison brisket tri-tip andouille pork belly ball tip short ribs biltong meatball chuck. Pork chop ribeye tail short ribs, beef hamburger meatball kielbasa rump corned beef porchetta landjaeger flank. Doner rump frankfurter meatball meatloaf, cow kevin pork pork loin venison fatback spare ribs salami beef ribs.}}
−
      // load zip file from src, unzip and format it to text
+
−
      // and insert content into DOM element referenced by id
+
  
−
          var oReq = new XMLHttpRequest();
+
            {{Heidelberg/sheettext|plasmids|Plasmids Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin ball tip turducken. Pork belly meatball t-bone bresaola tail filet mignon kevin turkey ribeye shank flank doner cow kielbasa shankle. Pig swine chicken hamburger, tenderloin turkey rump ball tip sirloin frankfurter meatloaf boudin brisket ham hock. Hamburger venison brisket tri-tip andouille pork belly ball tip short ribs biltong meatball chuck. Pork chop ribeye tail short ribs, beef hamburger meatball kielbasa rump corned beef porchetta landjaeger flank. Doner rump frankfurter meatball meatloaf, cow kevin pork pork loin venison fatback spare ribs salami beef ribs.}}
−
          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>
+
 
}}
 
}}
 +
{{Heidelberg/footer}}

Revision as of 23:54, 24 October 2017

{{Heidelberg/title|{{{1}}}}}

Awesomesheet.

Documentation of all wetlab workflows

Title Subtitle

Loading...