luci-app-ssr-plus: reset the behavior of btns in server list (#3891)

* luci-app-ssr-plus: feat server list draggable

* luci-app-ssr-plus: reset the behavior of up btn

Reset the behavior of up btn in server list to move to top.

* luci-app-ssr-plus: reset the behaviors of the btns

up: move to top
This commit is contained in:
soandsoso 2020-03-20 13:03:44 +08:00 committed by GitHub
parent 5fe5754013
commit 78f91179da
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -49,8 +49,7 @@ local dsp = require "luci.dispatcher"
thread()
}
// move
function cbi_row_drop(fromId, toId, store) {
function cbi_row_drop(fromId, toId, store, isToBottom) {
var fromNode = document.getElementById(fromId);
var toNode = document.getElementById(toId);
if (!fromNode || !toNode) return false;
@ -61,13 +60,13 @@ local dsp = require "luci.dispatcher"
if (!table) return false;
var ids = [];
for (var idx = 2; idx < table.rows.length; idx++) {
if (table.rows[idx] === fromNode) {
toNode.parentNode.insertBefore(toNode, fromNode);
} else if (table.rows[idx] === toNode) {
fromNode.parentNode.insertBefore(fromNode, toNode);
}
if (isToBottom) {
toNode.parentNode.appendChild(fromNode);
} else {
fromNode.parentNode.insertBefore(fromNode, toNode);
}
for (var idx = 2; idx < table.rows.length; idx++) {
table.rows[idx].className = table.rows[idx].className.replace(
/cbi-rowstyle-[12]/,
"cbi-rowstyle-" + (1 + (idx % 2))
@ -82,10 +81,13 @@ local dsp = require "luci.dispatcher"
return false;
}
// set tr draggable
function enableDragForTable(table_selecter, store) {
var trs = document.querySelectorAll(table_selecter + " tr");
if (!trs || trs.length.length < 3) {
return;
}
function ondragstart(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
@ -101,14 +103,46 @@ local dsp = require "luci.dispatcher"
ev.dataTransfer.dropEffect = "move";
}
function moveToTop(id) {
var top = document.querySelectorAll(table_selecter + " tr")[2];
cbi_row_drop(id, top.id, store);
}
function moveToBottom(id) {
console.log('moveToBottom:', id);
var trList = document.querySelectorAll(table_selecter + " tr");
var bottom = trList[trList.length - 1];
cbi_row_drop(id, bottom.id, store, true);
}
for (let index = 2; index < trs.length; index++) {
const el = trs[index];
el.setAttribute("draggable", true);
el.ondragstart = ondragstart;
el.ondrop = ondrop;
el.ondragover = ondragover;
// reset the behaviors of the btns
var upBtns = el.querySelectorAll(".cbi-button.cbi-button-up");
if (upBtns && upBtns.length > 0) {
upBtns.forEach(function (_el) {
_el.onclick = function () {
moveToTop(el.id);
};
});
}
var downBtns = el.querySelectorAll(".cbi-button.cbi-button-down");
if (downBtns && downBtns.length > 0) {
downBtns.forEach(function (_el) {
_el.onclick = function () {
moveToBottom(el.id);
};
});
}
}
}
// enable
enableDragForTable(
"#cbi-shadowsocksr-servers table",