diff --git a/lib/cubx_injector_sidebar.js b/lib/cubx_injector_sidebar.js index 74ecb6f..aeb703e 100644 --- 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,8 +226,9 @@ } 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); } @@ -231,35 +236,64 @@ 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; }