Fixes #378 - Plugin administration UI.

inc/plugin_admin.js

@@ -0,0 +1,67 @@
+/**
+ * Change the position counter of a row.
+ *
+ * @param elem  Element Node to change.
+ * @param toPos int     New position.
+ */
+function changePos(elem, toPos)
+{
+    var elemName = elem.getAttribute('data-line')
+
+    elem.setAttribute('data-order', toPos);
+    var hiddenInput = document.querySelector('[name="order_'+ elemName +'"]');
+    hiddenInput.setAttribute('value', toPos);
+}
+
+/**
+ * Move a row up or down.
+ *
+ * @param pos  Element Node to move.
+ * @param move int     Move: +1 (down) or -1 (up)
+ */
+function changeOrder(pos, move)
+{
+    var newpos = parseInt(pos) + move;
+    var line = document.querySelector('[data-order="'+ pos +'"]');
+    var changeline = document.querySelector('[data-order="'+ newpos +'"]');
+    var parent = changeline.parentNode;
+
+    changePos(line, newpos);
+    changePos(changeline, parseInt(pos));
+    var changeItem = move < 0 ? changeline : changeline.nextSibling;
+    parent.insertBefore(line, changeItem);
+}
+
+/**
+ * Move a row up in the table.
+ *
+ * @param pos int row counter.
+ *
+ * @returns false
+ */
+function orderUp(pos)
+{
+    if (pos == 0) {
+        return false;
+    }
+    changeOrder(pos, -1);
+    return false;
+}
+
+/**
+ * Move a row down in the table.
+ *
+ * @param pos int row counter.
+ *
+ * @returns false
+ */
+function orderDown(pos)
+{
+    var lastpos = document.querySelector('[data-order]:last-child').getAttribute('data-order');
+    if (pos == lastpos) {
+        return false;
+    }
+
+    changeOrder(pos, +1);
+    return false;
+}

inc/shaarli.css

@@ -1103,6 +1103,66 @@ ul.errors {
     float: left;
 }
 
+#pluginsadmin {
+    width: 80%;
+    padding: 20px 0 0 20px;
+}
+
+#pluginsadmin section {
+    padding: 20px 0;
+}
+
+#pluginsadmin .plugin_parameters {
+    margin: 10px 0;
+}
+
+#pluginsadmin h1 {
+    font-style: normal;
+}
+
+#pluginsadmin h2 {
+    font-size: 1.4em;
+    font-weight: bold;
+}
+
+#pluginsadmin table {
+    width: 100%;
+}
+
+#pluginsadmin table, #pluginsadmin th, #pluginsadmin td {
+    border-width: 1px 0;
+    border-style: solid;
+    border-color: #c0c0c0;
+}
+
+#pluginsadmin table th {
+    font-weight: bold;
+    padding: 10px 0;
+}
+
+#pluginsadmin table td {
+    padding: 5px 0;
+}
+
+#pluginsadmin input[type=submit] {
+    margin: 10px 0;
+}
+
+#pluginsadmin .plugin_parameter {
+    padding: 5px 0;
+    border-width: 1px 0;
+    border-style: solid;
+    border-color: #c0c0c0;
+}
+
+#pluginsadmin .float_label {
+    float: left;
+    width: 20%;
+}
+
+#pluginsadmin a {
+    color: black;
+}
 /* 404 page */
 .error-container {