diff --git a/manage.html b/manage.html
index 6937341b..5d2508c1 100644
--- a/manage.html
+++ b/manage.html
@@ -41,6 +41,11 @@
+
-
@@ -479,12 +479,12 @@
+
-
diff --git a/manage/draggable.js b/manage/draggable.js
index dc7beac4..a11e661b 100644
--- a/manage/draggable.js
+++ b/manage/draggable.js
@@ -1,24 +1,35 @@
-/* global $$ updateInjectionOrder */
+/* global $$ installed updateInjectionOrder */
'use strict';
// Polyfill for mobile? - https://caniuse.com/#feat=dragndrop
(() => {
let dragged = null;
+ function isEnabled() {
+ return installed.dataset.sort === 'order';
+ }
+
function cleanup() {
$$('.entry.dragging').forEach(el => {
el.classList.remove('dragging');
});
+ if (isEnabled() && $('body').classList.contains('dragging')) {
+ updateInjectionOrder();
+ }
$('body').classList.remove('dragging');
- updateInjectionOrder();
}
document.addEventListener('dragstart', event => {
- const el = event.target && event.target.closest('.entry');
- if (el) {
- dragged = el;
- el.classList.add('dragging');
- $('body').classList.add('dragging');
+ if (isEnabled()) {
+ const el = event.target && event.target.closest('.entry');
+ if (el) {
+ dragged = el;
+ el.classList.add('dragging');
+ $('body').classList.add('dragging');
+ }
+ } else {
+ cleanup();
+ return false;
}
}, false);
@@ -27,10 +38,12 @@
});
document.addEventListener('dragenter', event => {
- const el = event.target && event.target.closest('.entry, .entry-header');
- if (el && dragged) {
- // Insert after the target; keeps header at top
- el.after(dragged);
+ if (isEnabled()) {
+ const el = event.target && event.target.closest('.entry, .entry-header');
+ if (el && dragged) {
+ // Insert after the target; keeps header at top
+ el.after(dragged);
+ }
}
}, false);
diff --git a/manage/manage.css b/manage/manage.css
index 6dc8f158..7d19995b 100644
--- a/manage/manage.css
+++ b/manage/manage.css
@@ -335,6 +335,8 @@ body.all-styles-hidden-by-filters #installed:after {
width: var(--entry-icon-size);
}
+.header-sort,
+.entry-sort,
#installed:not(.has-favicons) .targets img,
#installed.has-favicons .targets img:not([src]),
#installed.has-favicons .targets img[src] + svg {
@@ -451,6 +453,8 @@ a svg, .svg-icon.sort {
pointer-events: none;
}
+#installed[data-sort="order"] .header-sort,
+#installed[data-sort="order"] .entry-sort,
/* Update icons */
.can-update .update,
.no-update:not(.update-problem):not(.update-done) .up-to-date,
diff --git a/manage/sort.js b/manage/sort.js
index 9ab246a6..2048050f 100644
--- a/manage/sort.js
+++ b/manage/sort.js
@@ -79,6 +79,10 @@ const sorter = (() => {
// show it in the header
sortBy = sortBy.concat(defaultSort.split(splitRegex));
const len = sortBy.length;
+
+ // Add first column sort to #installed; show sortable column when id column sorted
+ installed.dataset.sort = sortBy[0];
+
return styles.sort((a, b) => {
let types, direction, x, y;
let result = 0;