#3 Support move up button

cubbles · May 23, 2019 · e1e0712 · e1e0712
1 parent 878f75a
commit e1e0712
Showing 1 changed file with 57 additions and 23 deletions.
diff --git a/lib/cubx_injector_sidebar.js b/lib/cubx_injector_sidebar.js
@@ -28,12 +28,16 @@
     actionBtn: 'btn btn-sm btn-light',
     editBtn: 'fas fa-pen',
     removeBtn: 'fas fa-trash',
+    moveUpBtn: 'fas fa-arrow-up',
+    moveDownBtn: 'fas fa-arrow-down',
     hidden: 'hidden',
     actionsContainer: 'actions-container btn-group',
   };
   const ACTIONS_LABELS = {
     remove: 'Remove',
     edit: 'Edit',
+    moveUp: 'Move up',
+    moveDown: 'Move down'
   };
   const MESSAGES_IDS = {
     injectScripts: 'inject-scripts',
@@ -222,44 +226,74 @@
   }
 
   function appendInfoRow(tableId, info) {
-    var tbody = document.getElementById(tableId).querySelector('tbody');
-    var row = tbody.insertRow(tbody.rows.length);
+    let tbody = document.getElementById(tableId).querySelector('tbody');
+    let index = tbody.rows.length;
+    let row = tbody.insertRow(index);
     fillInfoRow(row, info);
   }
 
   function fillInfoRow(row, info) {
     let divElement = createDivInfoElement(info);
     row.insertCell(0).appendChild(divElement);
 
-    let actionsDiv = createActions(row, info);
+    let actionsDiv = createActions(row);
     row.insertCell(1).appendChild(actionsDiv);
   }
 
   function createActions(row) {
     let actionsDiv = document.createElement('div');
     actionsDiv.setAttribute('class', ELEMENTS_CLASSES.actionsContainer);
-    let deleteAction = createActionButton(
-      ACTIONS_LABELS.remove,
-      function() {
-        let row = this.parentNode.parentNode.parentNode;
-        row.parentNode.removeChild(row);
+    let actionsInfo = [
+      {
+        label: ACTIONS_LABELS.remove, 
+        listener: function() {
+          let row = this.parentNode.parentNode.parentNode;
+          row.parentNode.removeChild(row);
+        },
+        className: ELEMENTS_CLASSES.actionBtn,
+        iconClassName: ELEMENTS_CLASSES.removeBtn
       },
-      ELEMENTS_CLASSES.actionBtn,
-      ELEMENTS_CLASSES.removeBtn
-    );
-    let editAction = createActionButton(
-      ACTIONS_LABELS.edit,
-      function() {
-        let element = row.querySelector(`[${DATA_ATTRIBUTE_NAMES.code}]`);
-        let info = extractInfoFromElement(element, true);
-        fillEditor(info);
-        currentEditedRow = row;
+      {
+        label: ACTIONS_LABELS.edit,
+        listener: function() {
+          let element = row.querySelector(`[${DATA_ATTRIBUTE_NAMES.code}]`);
+          let info = extractInfoFromElement(element, true);
+          fillEditor(info);
+          currentEditedRow = row;
+        },
+        className: ELEMENTS_CLASSES.actionBtn,
+        iconClassName: ELEMENTS_CLASSES.editBtn
       },
-      ELEMENTS_CLASSES.actionBtn,
-      ELEMENTS_CLASSES.editBtn
-    );
-    actionsDiv.appendChild(editAction);
-    actionsDiv.appendChild(deleteAction);
+      {
+        label: ACTIONS_LABELS.moveUp,
+        listener: function () {
+          if (row.previousSibling !== null) {
+            let tbody = row.parentNode;
+            tbody.insertBefore(row, row.previousSibling);
+          }
+        },
+        className: ELEMENTS_CLASSES.actionBtn,
+        iconClassName: ELEMENTS_CLASSES.moveUpBtn
+      },
+      {
+        label: ACTIONS_LABELS.moveDown,
+        listener: function () {
+          console.log('Moving down');
+        },
+        className: ELEMENTS_CLASSES.actionBtn,
+        iconClassName: ELEMENTS_CLASSES.moveDownBtn
+      }
+    ];
+
+    actionsInfo.forEach(function (actionInfo) {
+      let actionBtn = createActionButton(
+        actionInfo.label,
+        actionInfo.listener,
+        actionInfo.className,
+        actionInfo.iconClassName
+      )
+      actionsDiv.appendChild(actionBtn);
+    });
     return actionsDiv;
   }