Updates

blurymind · Mar 19, 2024 · 61a8eca · 61a8eca
1 parent eb8e6b9
commit 61a8eca
Show file tree

Hide file tree

Showing 10 changed files with 170 additions and 56 deletions.
diff --git a/css/0.css b/css/0.css
diff --git a/index.html b/index.html
diff --git a/js/main.9bf617ddccfee721ee25.js b/js/main.9bf617ddccfee721ee25.js
diff --git a/js/main.e335dd34512b0477f4ea.js b/js/main.e335dd34512b0477f4ea.js
diff --git a/js/runtime.9bf617ddccfee721ee25.js → js/runtime.e335dd34512b0477f4ea.js b/js/runtime.9bf617ddccfee721ee25.js → js/runtime.e335dd34512b0477f4ea.js
diff --git a/js/vendor.9bf617ddccfee721ee25.js → js/vendor.e335dd34512b0477f4ea.js b/js/vendor.9bf617ddccfee721ee25.js → js/vendor.e335dd34512b0477f4ea.js
diff --git a/public/plugins/jsoneditor/jsoneditor.js b/public/plugins/jsoneditor/jsoneditor.js
@@ -0,0 +1,101 @@
+export var JSONEditor = function({id}) {
+    this.tableAdd = ({key, value}) =>{
+        var $clone = this.table.find('tr.hide').clone(true).removeClass('hide table-line');
+        if(key && value) {
+            console.log("mutate", {key, value, html:$clone.html()})
+            $clone.html(`
+                <td contenteditable="true" class="cell">${key}</td>
+                <td contenteditable="true" class="cell">${value}</td>
+                <td>
+                    <span class="table-remove glyphicon glyphicon-remove">x delete</span>
+                </td>
+            `)
+            $('.table-remove').on("click",function() {
+                $(this).parents('tr').detach();
+            });
+
+        }
+        this.table.find('table').append($clone);
+    }
+    this.getValue = () => {
+        var $rows = this.table.find('tr:not(:hidden)');
+        var headers = [];
+        var data = [];
+
+        // Get the headers (add special header logic here)
+        $($rows.shift()).find('th:not(:empty):not([data-attr-ignore])').each(function() {
+            headers.push($(this).text().toLowerCase());
+        });
+
+        // Turn all existing rows into a loopable array
+        $rows.each(function() {
+            var $td = $(this).find('td');
+            var h = {};
+            // Use the headers from earlier to name our hash keys
+            headers.forEach(function(header, i) {
+                h[header] = $td.eq(i).text(); // will adapt for inputs if text is empty
+            });
+
+            data.push(h);
+        });
+        // Output the result
+        // var $EXPORT = $('#save');
+        // $EXPORT.text(JSON.stringify(data));
+        return data;;
+    }
+
+    this.init = () => {
+        document.getElementById(id).innerHTML = `
+        <div class="container">
+  <div id="table" class="table-editable">
+    <table class="table">
+        <tr class="table-header">
+            <th>Key</th>
+            <th>Value</th>
+            <th data-attr-ignore>Remove</th>
+        </tr>
+
+
+      <!-- This is our clonable table line -->
+      <tr class="hide" class="editable-row">
+        <td contenteditable="true" class="cell">key</td>
+        <td contenteditable="true" class="cell">val</td>
+        <td>
+          <span class="table-remove glyphicon glyphicon-remove">x delete</span>
+        </td>
+      </tr>
+    </table>
+
+    <div class="table-footer">
+        <button id="save-btn" class="btn btn-primary">Save Data</button>
+        <p id="save"></p>
+        <span class="table-add glyphicon glyphicon-plus">+ add</span>
+    </div>
+  </div>
+</div>
+        `
+        var $TABLE = $('#table');
+        var $BTN = $('#save-btn');
+        this.table = $TABLE;
+        this.rows = $TABLE.find('tr:not(:hidden)');
+        var $EXPORT = $('#save-btn');
+        $EXPORT.addClass("hide");
+
+        $('.table-add').on("click", this.tableAdd);
+
+        $('.table-remove').on("click",function() {
+            console.log({removeThis: this})
+            $(this).parents('tr').detach();
+        });
+
+        // A few jQuery helpers for exporting only
+        jQuery.fn.pop = [].pop;
+        jQuery.fn.shift = [].shift;
+        $BTN.on("click",this.getValue);
+    }
+    this.init();
+
+    this.setValue =(newValue = []) =>{
+        newValue.forEach(this.tableAdd);
+    }
+}
diff --git a/public/plugins/jsoneditor/size-overrides.css b/public/plugins/jsoneditor/size-overrides.css
@@ -1,9 +1,3 @@
-div.jsoneditor-tree {
-    min-height: 50vh;
-    max-height: 70vh;
-    overflow: auto;
-}
-
 @media only screen and (max-width: 600px) {
     .swal2-popup{
         padding: 2px !important;
@@ -25,11 +19,67 @@ div.jsoneditor-tree {
     /*    max-width: 100px;*/
     /*}*/
 }
-.form-control > input {
-    max-width: 100px;
+
+.table {
+    width: 100%;
+}
+.table-editable {
+    width: 100%;
+    position: relative;
 }
-.je-table{
+
+.table-header {
+    position: sticky;
+    top: 0;
+    background-color: #007;
+    color: aqua;
+}
+
+.table-footer {
+    position: sticky;
+    bottom: 0;
+    background-color: #007;
+    color: aqua;
     display: flex;
-    justify-content: center;
-    flex-wrap: wrap;
+    justify-content: space-between;
+}
+.table-editable .glyphicon {
+    font-size: 20px;
+}
+
+.table-remove {
+    color: #700;
+    cursor: pointer;
+    text-align: center;
 }
+
+.cell {
+    width: 180px;
+    max-width: 180px;
+    text-align: left;
+    padding-left: 3px;
+    padding-right: 3px;
+}
+.table-remove:hover {
+    color: #f00;
+}
+
+.table-up:hover,
+.table-down:hover {
+    color: #00f;
+}
+
+.table-add {
+    width: 120px;
+    color: #070;
+    cursor: pointer;
+    text-align: center;
+}
+
+.table-add:hover {
+    color: #0b0;
+}
+
+.hide {
+    display: none;
+}
diff --git a/public/plugins/runner.js b/public/plugins/runner.js
@@ -1,6 +1,6 @@
 import { yarnRender } from './bondage/renderer';
 import { inkRender } from './inkjs/ink-renderer';
-const { JSONEditor } = require('./jsoneditor/jsoneditor.min');
+const { JSONEditor } = require('./jsoneditor/jsoneditor');
 
 export var Runner = function({
   app,
@@ -30,32 +30,9 @@ export var Runner = function({
       onOpen: () => {
         // create the editor
         require('./jsoneditor/size-overrides.css');
-        editor = new JSONEditor(document.getElementById('jsoneditor'), {
-          // theme: 'bootstrap2',
-          schema: {
-            type: 'array',
-            format: 'table',
-            title: 'Playtest values',
-            uniqueItems: true,
-            items: {
-              type: 'object',
-              title: 'Variable',
-              format: 'grid',
-              properties: {
-                key: {
-                  type: 'string',
-                  default: 'myVar',
-                },
-                value: {
-                  type: 'string',
-                  default: 'true',
-                },
-              },
-            },
-          },
-        });
+        editor = new JSONEditor({id: 'jsoneditor'});
         const localVariables = getPluginStore(self.name);
-
+        console.log({editor})
         // set json
         editor.setValue(
           typeof localVariables.variables !== 'object'

diff --git a/sw.js b/sw.js