add Scratch Paper

css/stylesheet.css

@@ -42,6 +42,10 @@ button.active {
     background: rgb(44, 44, 44);
 }
 
+button.category {
+    background: rgba(0, 0, 0, .10);
+}
+
 button.indent {
     padding-left: 36px;
 }
@@ -90,7 +94,11 @@ nav h3 {
     visibility: visible;
 }
 
-#list > button {
+.sidemenu #header {
+    border-top: 2px solid rgb(44, 44, 44);
+}
+
+.sidemenu button {
     display: block;
     width: 100%;
     height: 30px;
@@ -163,6 +171,10 @@ section {
     visibility: visible;
 }
 
+#tab_desc > .wrapper a {
+    text-decoration: underline;
+}
+
 .tab_bar {
     bottom: 0;
     left: 0;

index.html

@@ -30,6 +30,11 @@
 <section class="sidemenu active">
     <div id="list">
     </div>
+    <div id="header">
+        <a href="https://github.com/parkjs814/AlgorithmVisualizer/wiki">
+            <button>Documentation</button>
+        </a>
+    </div>
     <a class="github-fork-ribbon left-bottom" href="http://github.com/parkjs814/AlgorithmVisualizer"
        title="Fork me on GitHub">Fork me on GitHub</a>
 </section>
@@ -37,7 +42,7 @@
     <div class="viewer_container">
         <section class="module_container"></section>
         <section class="tab_container">
-            <div class="tab active" id="tab_description">
+            <div class="tab active" id="tab_desc">
                 <div class="wrapper">
                     <h2 id="desc_title"></h2>
                     <p id="desc_def"></p>
@@ -61,7 +66,7 @@
             </div>
         </section>
         <section class="tab_bar">
-            <button class="active" id="btn_description">Description</button>
+            <button class="active" id="btn_desc">Description</button>
             <button id="btn_trace">Trace</button>
         </section>
     </div>

js/module/array2d.js

@@ -256,7 +256,6 @@ Array2DTracer.prototype.mousewheel = function (e) {
 };
 
 var initTable = function () {
-    $module_container.empty();
     $table = $('<div class="mtbl-table">');
     $module_container.append($table);
 };

js/module/graph.js

@@ -183,7 +183,6 @@ GraphTracer.prototype.prevStep = function () {
 };
 
 var initGraph = function () {
-    $module_container.empty();
     if (sigmaCanvas == null) {
         sigmaCanvas = $.extend(true, {}, sigma.canvas);
     } else {

js/module/tracer.js

@@ -10,7 +10,9 @@ var Tracer = function (module) {
     this.traceIndex = -1;
     this.stepCnt = 0;
 
-    return lastModule != module;
+    var moduleChanged = lastModule != module;
+    if (moduleChanged) $module_container.empty();
+    return moduleChanged;
 };
 
 Tracer.prototype.resize = function () {

js/script.js

 $.ajaxSetup({cache: false, dataType: "text"});
 
+$(document).on('click', 'a', function (e) {
+    e.preventDefault();
+
+    var win = window.open($(this).attr('href'), '_blank');
+    if (!win) {
+        alert('Please allow popups for this site');
+    }
+});
+
 var $module_container = $('.module_container');
 var _tracer = new Tracer();
 var initEditor = function (id) {
@@ -41,15 +50,11 @@ var loadFile = function (category, algorithm, file, explanation) {
 var loadAlgorithm = function (category, algorithm) {
     $('#list > button').removeClass('active');
     $('[data-category="' + category + '"][data-algorithm="' + algorithm + '"]').addClass('active');
-    $('#btn_description').click();
+    $('#btn_desc').click();
 
     $('#category').text(list[category].name);
     $('#algorithm, #desc_title').text(list[category].list[algorithm]);
-    $('#desc_def').html('');
-    $('#desc_app').empty();
-    $('#desc_time').html('');
-    $('#desc_space').html('');
-    $('#desc_ref').empty();
+    $('#tab_desc > .wrapper').empty();
     $('.files_bar').empty();
     $('#explanation').html('');
     dataEditor.setValue('');
@@ -57,20 +62,34 @@ var loadAlgorithm = function (category, algorithm) {
 
     var dir = './algorithm/' + category + '/' + algorithm + '/';
     $.getJSON(dir + 'desc.json', function (data) {
-        $('#desc_def').html(data.def);
-        $('#desc_app').empty();
-        data.apps.forEach(function (app) {
-            $('#desc_app').append($('<li>').html(app));
-        });
-        $('#desc_time').html(data.cpx.time);
-        $('#desc_space').html(data.cpx.space);
-        $('#desc_ref').empty();
-        data.refs.forEach(function (ref) {
-            $('#desc_ref').append($('<li>').html('<a href="' + ref + '" target="_blank">' + ref + '</a>'));
-        });
+        var files = data.files;
+        delete data.files;
+
+        var $container = $('#tab_desc > .wrapper');
+        $container.empty();
+        for (var key in data) {
+            if (key) $container.append($('<h3>').html(key));
+            var value = data[key];
+            if (typeof value === "string") {
+                $container.append($('<p>').html(value));
+            } else if (Array.isArray(value)) {
+                var $ul = $('<ul>');
+                $container.append($ul);
+                value.forEach(function (li) {
+                    $ul.append($('<li>').html(li));
+                });
+            } else if (typeof value === "object") {
+                var $ul = $('<ul>');
+                $container.append($ul);
+                for (var prop in value) {
+                    $ul.append($('<li>').append($('<strong>').html(prop)).append(' ' + value[prop]));
+                }
+            }
+        }
+
         $('.files_bar').empty();
         var init = false;
-        for (var file in data.files) {
+        for (var file in files) {
             (function (file, explanation) {
                 var $file = $('<button>').append(file).click(function () {
                     loadFile(category, algorithm, file, explanation);
@@ -82,7 +101,7 @@ var loadAlgorithm = function (category, algorithm) {
                     init = true;
                     $file.click();
                 }
-            })(file, data.files[file]);
+            })(file, files[file]);
         }
     });
 };
@@ -92,7 +111,7 @@ $.getJSON('./algorithm/category.json', function (data) {
     var init = false;
     for (var category in list) {
         (function (category) {
-            var $category = $('<button>').append(list[category].name);
+            var $category = $('<button class="category">').append(list[category].name);
             $('#list').append($category);
             var subList = list[category].list;
             for (var algorithm in subList) {
@@ -167,9 +186,9 @@ $('#btn_next').click(function () {
     _tracer.nextStep();
 });
 
-$('#btn_description').click(function () {
+$('#btn_desc').click(function () {
     $('.tab_container > .tab').removeClass('active');
-    $('#tab_description').addClass('active');
+    $('#tab_desc').addClass('active');
     $('.tab_bar > button').removeClass('active');
     $(this).addClass('active');
 });