extremely nice context move implementation

RvNovae · Jan 18, 2020 · 54bce05 · 54bce05
1 parent ff84cee
commit 54bce05
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 23 deletions.
diff --git a/src/modules/DOM.js b/src/modules/DOM.js
@@ -100,24 +100,24 @@ Write = {
 
                         <div class="field has-addons">
                             <p class="control">
-                                <a class="button">
-                                    <span class="icon is-small">
+                                <a class="button" onclick="Editor.Move.Down('move-`+ counter +`')">
+                                    <span class="icon is-small">          
                                         <i class="fas fa-angle-up"></i>
                                     </span>
                                 </a>
                             </p>
                             <p class="control">
-                                <a class="button">
+                                <a class="button" onclick="Editor.Move.Up('move-`+ counter +`')">
                                     <span class="icon is-small">
                                         <i class="fas fa-angle-down"></i>
                                     </span>
                                 </a>
                             </p>
                             <p class="control">
-                                <input class="input" value=`+counter+` placeholder="Pos">
+                                <input class="input" oninput="Editor.Move.Check(this)" data-pos="` + counter + `" id="move-`+ counter +`" value=`+counter+` placeholder="Pos">
                             </p> 
                             <p class="control">
-                                <a class="button submit">
+                                <a class="button submit" onclick="Editor.Move.To('move-`+ counter +`')">
                                     <span class="icon is-small">
                                         <i class="fas fa-check"></i>
                                     </span>
@@ -235,6 +235,7 @@ document.getElementById('erase_btn').addEventListener('click', function() {
 
 });
 
+
 // NOT IMPLEMENTED YET
 
 // dragover function (no implementation yet)

diff --git a/src/modules/editor.js b/src/modules/editor.js
@@ -14,11 +14,17 @@ module.exports = {
         }
     },
     Move: {
-        Up: function(element, id) {
-            moveUp(element, id)
+        Up: function(id) {
+            moveUp(id)
         },
-        Down: function(element, id) {
-            moveDown(element, id);
+        Down: function(id) {
+            moveDown(id);
+        },
+        Check: function(element) {
+            moveCheck(element);
+        },
+        To: function(id) {
+            moveTo(id);
         }
     },
     Delete: function(element, id) {
@@ -62,31 +68,66 @@ function addAbove(id) {
 
 function addBelow(id) {
     State.Adding.Below.Set(true);
-    
+
     addTrack(id);
 }
 
 // if called, it shifts the track one position up in the array
 // => refresh the UI afterwards
-function moveUp(element, id) {
+function moveUp(id) {
     // make sure the element isn't the first
-    if (id-1 < 1) {}
-    else {
-        Data.Tracks = ARRAY_MOVE(Data.Tracks, id-1, id-2);
-        DOM.UI.Update();
+    // if (id-1 < 1) {}
+    // else {
+    //     Data.Tracks = ARRAY_MOVE(Data.Tracks, id-1, id-2);
+    //     DOM.UI.Update();
+    // }
+
+    let value = document.getElementById(id).value;
+    if (value < Data.Tracks.length) {
+        value++;
     }
+
+    document.getElementById(id).value = value;
 }
 // if called, it shifts the track one position down in the array
 // => refresh the UI afterwards
-function moveDown(element, id) {
+function moveDown(id) {
     // make sure the element isn't the last
-    if (id-1 > Data.Tracks.length-1) {}
-    else {
-        Data.Tracks = ARRAY_MOVE(Data.Tracks, id-1, id);
-        DOM.UI.Update();
+    // if (id-1 > Data.Tracks.length-1) {}
+    // else {
+    //     Data.Tracks = ARRAY_MOVE(Data.Tracks, id-1, id);
+    //     DOM.UI.Update();
+    // }
+
+    let value = document.getElementById(id).value;
+    if (value > 1) {
+        value--;
     }
+    document.getElementById(id).value = value;
 }
 
+function moveCheck(element) {
+
+    if (element.value > Data.Tracks.length && element.value != '') {
+        element.value = Data.Tracks.length;
+    }
+    if (element.value < 1 && element.value != '') {
+        element.value = 1;
+    }
+
+}
+
+function moveTo(id) {
+    let currentPos = document.getElementById(id).getAttribute('data-pos');
+    let desiredPos = document.getElementById(id).value;
+
+    console.log(currentPos + " " + desiredPos);
+
+    Data.Tracks = ARRAY_MOVE(Data.Tracks, currentPos-1, desiredPos-1);
+    DOM.UI.Update();
+}
+
+
 // populates the edit modal form with values and opens it
 // sets is_editing to the id of the counter of the track that is being edited,
 // this just makes saving the data easier

diff --git a/src/modules/key.js b/src/modules/key.js
@@ -8,15 +8,28 @@ document.addEventListener('keyup', function(e) {
         });
     }
     if (e.key === "Enter") {
-        let counter = 0;
+        let modals = 0;
+        let contextMenus = 0;
+
         Array.from(document.getElementsByClassName('modal')).forEach(function(elem) {
             if (elem.classList.contains('is-active')) {
-                counter++;
+                modals++;
                 elem.getElementsByClassName('submit')[0].click();
+                return;
             }
         });
-        if (counter == 0) {
+
+        Array.from(document.getElementsByClassName('dropdown')).forEach( (element) => {
+            if (element.classList.contains('is-active')) {
+                contextMenus++;
+                element.getElementsByClassName('submit')[0].click();
+                return;
+            } 
+        });
+
+        if (modals == 0 && contextMenus == 0) {
             Editor.Add.Append('new');
+            return;
         }
     }
 });