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 @@
#
+
-
v#
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;