new window overlay for generating

- removed the sandbox tab its not an algorithm now
- the overlay can be opened by pressing “generate” button at the top
menu bar
- creates overlayed divs that have the functionality to generate a
tracer and the code
- (x) button to close and return to the algorithm

Author: Kevin Nadro

algorithm/category.json

@@ -68,12 +68,6 @@
       },
       "name": "Search"
    },
-   "sandbox": {
-      "list": {
-         "create_mode": "Create Mode"
-      },
-      "name": "Sandbox"
-   },
    "sorting": {
       "list": {
          "bucket": "Bucket Sort",

algorithm/sandbox/create_mode/desc.json

@@ -252,6 +252,7 @@ section {
 
 .sandbox_container{
     left: 50%;
+    z-index:  100;
 }
 
 .editor_container {
@@ -341,6 +342,7 @@ section {
     border-bottom: none;
 }
 
+.close_bar,
 .files_bar {
     height: 30px;
     border-bottom: 1px solid #505050;
@@ -385,6 +387,11 @@ section {
     box-shadow: inset 16px 0 16px -16px rgba(0, 0, 0, .6), inset -16px 0 16px -16px rgba(0, 0, 0, .6);
 }
 
+.close_bar {
+    width: 100%;
+    background-color: #3f3f3f;
+}
+
 .explanation_container {
     border: none;
     top: 30px;
@@ -689,15 +696,16 @@ input[type=number]::-webkit-outer-spin-button {
 }
 
 .auto-gen{
-    height: 33%;
-    border: 1px solid #515151;
+    height: 34%;
+    /*border: 1px solid #515151;*/
     text-align: center;
     background-color: #262626;
     display: flex;
     align-items: center;
 }
 
 .auto-gen-tracers{
+    top: 30px;
     bottom: 66%;
 }
 

algorithm/sandbox/create_mode/normal/code.js

@@ -30,6 +30,13 @@ <h3>
         </h3>
     </button>
     <div class="top-menu-buttons">
+        <div class="btn" id="btn_generate">
+            <div class="wrapper">
+                <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
+                <span class="btn-text">Generate</span>
+            </div>
+        </div>
+
         <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">
@@ -127,32 +134,6 @@ <h3>
             </div>
         </section>
     </div>
-    <div class="sandbox_container hide">
-
-            <div class="auto-gen auto-gen-tracers">
-                <button class='sb-button' id="button-2DMatrix">Create 2DMatrix</button>
-
-            </div>
-
-            <div class="auto-gen auto-gen-options">
-                <div>
-                # of Rows: <input class="inputs"id="numRows" type="number" value="5">
-                </div>
-
-                <div>
-                # of Columns: <input class="inputs"id="numColumns" type="number" value="5">
-                </div>
-
-                <div>
-                Tracer Name: <input class="inputs"id="tracerName" type="text" value="default">
-                </div>
-            </div>
-
-            <div class="auto-gen auto-gen-generate">
-                <button class='sb-button' id="button-generateJS">Generate Javascript</button>
-            </div>
-
-    </div>
     <div class="editor_container">
         <section class="files_bar">
             <button class="btn-left"><i class="fa fa-angle-left" aria-hidden="true"></i></button>

algorithm/sandbox/create_mode/normal/data.js

@@ -2,10 +2,61 @@
 
 const modules = require('../module');
 const array2d = require('./array2d');
+const util = require('./util');
 
+const closeCreate = (modules) => {
+        const $btnClose = $('#btn_close');
+
+        $btnClose.click(() => {
+            $('.sandbox_container').remove();
+            util.clearModules();
+            restoreModules(modules);
+        });
+};
+
+const restoreModules = (modules) => {
+    for (var i = 0; i < modules.length; i++) {
+        $('.module_container').append(modules[i]);
+    }
+};
+
+const saveModules = () => {
+    return $('.module_wrapper')
+};
 
 const init = () => {
+    var moduleWrappers = saveModules();
+
+    util.clearModules();
+    $('.workspace').append("<div class='sandbox_container'>\
+            <section class='close_bar'>\
+            <div class='btn' id='btn_close'>\
+                <div class='wrapper'>\
+                    <i class='fa fa-times' aria-hidden='true'></i>\
+                </div>\
+            </div>\
+            </section>\
+            <section class='auto-gen auto-gen-tracers'>\
+                <button class='sb-button' id='button-2DMatrix'>Create 2DMatrix</button>\
+            </section>\
+            <section class='auto-gen auto-gen-options'>\
+                <div>\
+                # of Rows: <input class='inputs'id='numRows' type='number' value='5'>\
+                </div>\
+                <div>\
+                # of Columns: <input class='inputs'id='numColumns' type='number' value='5'>\
+                </div>\
+                <div>\
+                Tracer Name: <input class='inputs'id='tracerName' type='text' value='default'>\
+                </div>\
+            </section>\
+            <section class='auto-gen auto-gen-generate'>\
+                <button class='sb-button' id='button-generateJS'>Generate Javascript</button>\
+            </section>\
+    </div>");
     array2d.setup();
+
+    closeCreate(moduleWrappers);
 };
 
 module.exports = {

css/stylesheet.css

@@ -4,6 +4,7 @@ const app = require('../../app');
 const Server = require('../../server');
 const Toast = require('../toast');
 const TopMenu = require('../top_menu');
+const create = require('../../create');
 
 module.exports = () => {
 
@@ -32,6 +33,7 @@ module.exports = () => {
   const $btnPause = $('#btn_pause');
   const $btnPrev = $('#btn_prev');
   const $btnNext = $('#btn_next');
+  const $btnGenerate = $('#btn_generate');
 
   // initially, control buttons are disabled
   TopMenu.disableFlowControl();
@@ -73,4 +75,8 @@ module.exports = () => {
     app.getTracerManager().nextStep();
   });
 
+  $btnGenerate.click(() => {
+     create.init();
+  });
+
 };

index.html

@@ -25,14 +25,6 @@ module.exports = (category, algorithm, data, requestedFile) => {
     algorithm_name = categoryObj.list[algorithm];
   }
 
-  if(category_name === 'Sandbox'){
-      $('.editor_container').addClass('hide');
-      $('.sandbox_container').removeClass('hide');
-  }else{
-      $('.editor_container').removeClass('hide');
-      $('.sandbox_container').addClass('hide');
-  }
-
   $('.sidemenu button').removeClass('active');
   $menu.addClass('active');
 

js/create/index.js

@@ -5,7 +5,6 @@ const app = require('./app');
 const AppConstructor = require('./app/constructor');
 const DOM = require('./dom');
 const Server = require('./server');
-const Sandbox= require('./create');
 const modules = require('./module');
 
 const {
@@ -73,8 +72,6 @@ $(() => {
       DOM.showFirstAlgorithm();
     }
 
-    Sandbox.init();
-
   });
 
   Server.loadWikiList().then((data) => {