now can share code!

css/stylesheet.css

@@ -32,7 +32,18 @@ a {
     user-select: none;
 }
 
+.btn {
+    display: inline-table;
+}
+
+.btn > .wrapper {
+    display: table-cell;
+    vertical-align: middle;
+}
+
+.btn,
 button {
+    vertical-align: top;
     border: none;
     height: 100%;
     padding: 0 12px;
@@ -45,14 +56,24 @@ button {
     text-overflow: ellipsis;
 }
 
+.btn:hover,
 button:hover {
     background: rgba(0, 0, 0, .15) !important;
 }
 
+.btn.active,
 button.active {
     background: rgb(44, 44, 44);
 }
 
+.btn input,
+button input {
+    outline: none;
+    background: rgba(0, 0, 0, .3);
+    padding: 4px;
+    border: none;
+}
+
 .divider {
     position: absolute !important;
     z-index: 3;
@@ -80,16 +101,25 @@ nav h3 {
     padding: 0 4px;
 }
 
+#category:empty + .nav-arrow {
+    display: none;
+}
+
 .buttons {
     float: right;
     height: 100%;
 }
 
-button input {
-    outline: none;
-    background: none;
-    border: none;
-    width: 20px;
+#shared {
+    width: 128px;
+}
+
+#shared.collapse {
+    display: none;
+}
+
+#interval {
+    width: 24px;
     text-align: right;
 }
 
@@ -122,11 +152,10 @@ button.category {
 
 button.indent {
     padding-left: 28px;
-    display: none;
 }
 
 button.collapse {
-    display: block;
+    display: none;
 }
 
 .workspace {
@@ -199,7 +228,7 @@ section {
     background: rgb(44, 44, 44);
 }
 
-.module_wrapper .wrapper {
+.module_wrapper > .wrapper {
     padding: 24px 16px;
     box-sizing: border-box;
 }
@@ -302,6 +331,11 @@ pre {
     background-color: #333;
 }
 
+.fa-spin-faster {
+    -webkit-animation: fa-spin 1s infinite ease-in-out;
+    animation: fa-spin 1s infinite ease-in-out;
+}
+
 .mtbl-wrapper {
     width: 100%;
     height: 100%;

index.html

@@ -26,11 +26,20 @@
         </h3>
     </button>
     <div class="buttons">
+        <div class="btn" id="btn_share">
+            <div class="wrapper">
+                <i class="fa fa-share" aria-hidden="true"></i> Share <input type="text" class="collapse" id="shared">
+            </div>
+        </div>
         <button id="btn_run"><i class="fa fa-play" aria-hidden="true"></i> Run</button>
         <button id="btn_prev"><i class="fa fa-chevron-left" aria-hidden="true"></i> Prev</button>
         <button id="btn_pause"><i class="fa fa-pause" aria-hidden="true"></i> Pause</button>
         <button id="btn_next">Next <i class="fa fa-chevron-right" aria-hidden="true"></i></button>
-        <button id="btn_interval">Interval: <input type="text" value="0.5"> sec</button>
+        <div class="btn">
+            <div class="wrapper">
+                Interval: <input type="text" value="0.5" id="interval"> sec
+            </div>
+        </div>
     </div>
 </nav>
 <section class="sidemenu active">

js/module/tracer_manager.js

@@ -83,7 +83,7 @@ TracerManager.prototype = {
         return this.pause;
     },
     setInterval: function (interval) {
-        $('#btn_interval input').val(interval);
+        $('#interval').val(interval);
     },
     reset: function () {
         this.traces = [];

js/script.js

@@ -7,10 +7,13 @@ $(document).on('click', 'a', function (e) {
         alert('Please allow popups for this site');
     }
 });
+$('.btn input').click(function (e) {
+    e.stopPropagation();
+});
 
 var tm = new TracerManager();
 
-$('#btn_interval input').on('change', function () {
+$('#interval').on('change', function () {
     tm.interval = Number.parseFloat($(this).val() * 1000);
     showInfoToast('Tracing interval has been set to ' + tm.interval / 1000 + ' second(s).');
 });
@@ -181,9 +184,9 @@ var loadAlgorithm = function (category, algorithm) {
     });
 };
 var list = {};
+var anyOpened = false;
 $.getJSON('./algorithm/category.json', function (data) {
     list = data;
-    var init = false;
     for (var category in list) {
         (function (category) {
             var $category = $('<button class="category">').append(list[category].name);
@@ -194,7 +197,7 @@ $.getJSON('./algorithm/category.json', function (data) {
             var subList = list[category].list;
             for (var algorithm in subList) {
                 (function (category, subList, algorithm) {
-                    var $algorithm = $('<button class="indent">')
+                    var $algorithm = $('<button class="indent collapse">')
                         .append(subList[algorithm])
                         .attr('data-algorithm', algorithm)
                         .attr('data-category', category)
@@ -202,8 +205,8 @@ $.getJSON('./algorithm/category.json', function (data) {
                             loadAlgorithm(category, algorithm);
                         });
                     $('#list').append($algorithm);
-                    if (!init) {
-                        init = true;
+                    if (!anyOpened) {
+                        anyOpened = true;
                         $algorithm.click();
                     }
                 })(category, subList, algorithm);
@@ -255,6 +258,15 @@ var showInfoToast = function (info) {
     }, 3000);
 };
 
+$('#btn_share').click(function () {
+    var $icon = $(this).find('.fa-share');
+    $icon.addClass('fa-spin fa-spin-faster');
+    shareScratchPaper(function (url) {
+        $icon.removeClass('fa-spin fa-spin-faster');
+        $('#shared').removeClass('collapse');
+        $('#shared').val(url);
+    });
+});
 $('#btn_run').click(function () {
     $('#btn_trace').click();
     try {
@@ -393,8 +405,6 @@ $module_container.on('DOMMouseScroll mousewheel', '.module_wrapper', function (e
     tm.findOwner(this).mousewheel(e);
 });
 
-// Share scratch paper
-
 var getParameterByName = function (name) {
     var url = window.location.href;
     name = name.replace(/[\[\]]/g, "\\$&");
@@ -405,30 +415,38 @@ var getParameterByName = function (name) {
     return decodeURIComponent(results[2].replace(/\+/g, " "));
 };
 
-var shareScratchPaper = function () {
+var shareScratchPaper = function (callback) {
     var gist = {
         'description': 'temp',
         'public': true,
         'files': {
-            'code.js': {'content': dataEditor.getValue()},
-            'data.js': {'content': codeEditor.getValue()}
+            'code.js': {'content': codeEditor.getValue()},
+            'data.js': {'content': dataEditor.getValue()}
         }
     };
     $.post('https://api.github.com/gists', JSON.stringify(gist), function (res) {
         var data = JSON.parse(res);
-        console.log(location.protocol + '//' + location.host + location.pathname + '?scratch-paper=' + data.id);
+        if (callback) callback(location.protocol + '//' + location.host + location.pathname + '?scratch-paper=' + data.id);
     });
 };
 
 var loadScratchPaper = function (gistID) {
+    anyOpened = true;
     $.get('https://api.github.com/gists/' + gistID, function (res) {
         var data = JSON.parse(res);
-        console.log(data);
+        var category = null;
+        var algorithm = 'scratch_paper';
+        var dir = getFileDir(category, algorithm, 'scratch_paper');
+        cachedFile[dir] = {
+            data: data.files['data.js'].content,
+            code: data.files['code.js'].content
+        };
+        loadAlgorithm(category, algorithm);
     });
 };
 
-if (/[?&]scratch-paper=/.test(location.search)) {
-    var gistID = getParameterByName('scratch-paper');
+var gistID = getParameterByName('scratch-paper');
+if (gistID) {
     console.log(gistID);
     loadScratchPaper(gistID);
 }