Updated shelf-sort to use sortablejs

diff --git a/package-lock.json b/package-lock.json
index 5ad14fcf0105bb1cd8ecc1b586832aa7ec7c1695..eab4ce9b3834b81adb938962e2ac128a35f86c5e 100644 (file)
--- a/package-lock.json
+++ b/package-lock.json
@@ -6264,6 +6264,13 @@
       "integrity": "sha512-UDp0epjaZikuInoJA9rlEIJaSTQThabq0R9x7TqBdl0qGVFKKzo6glP6ubfzWBmV4iRIfbSOs2DV06s3B5h5tA==",
       "requires": {
         "sortablejs": "^1.9.0"
+      },
+      "dependencies": {
+        "sortablejs": {
+          "version": "1.9.0",
+          "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.9.0.tgz",
+          "integrity": "sha512-Ot6bYJ6PoqPmpsqQYXjn1+RKrY2NWQvQt/o4jfd/UYwVWndyO5EPO8YHbnm5HIykf8ENsm4JUrdAvolPT86yYA=="
+        }
       }
     },
     "watchpack": {

diff --git a/package.json b/package.json
index 5b175f49c2019d7dc69a599866f1a4257b0d7e7d..fb06afc83077abbc6d33478cc0883aa0d7734286 100644 (file)
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "jquery-sortable": "^0.9.13",
     "markdown-it": "^8.4.2",
     "markdown-it-task-lists": "^2.1.1",
+    "sortablejs": "^1.9.0",
     "vue": "^2.6.10",
     "vuedraggable": "^2.21.0"
   },

diff --git a/resources/assets/js/components/shelf-sort.js b/resources/assets/js/components/shelf-sort.js
index 86fb5e143b142c310e30077bc302676c6638d515..38e8ae8d3e2a40c2acde17725a448f9d880943cd 100644 (file)
--- a/resources/assets/js/components/shelf-sort.js
+++ b/resources/assets/js/components/shelf-sort.js
@@ -1,25 +1,26 @@
-import "jquery-sortable";
+import Sortable from "sortablejs";
 
 class ShelfSort {
 
     constructor(elem) {
         this.elem = elem;
-        this.sortGroup = this.initSortable();
         this.input = document.getElementById('books-input');
+        this.shelfBooksList = elem.querySelector('[shelf-sort-assigned-books]');
+
+        this.initSortable();
         this.setupListeners();
     }
 
     initSortable() {
-        const placeHolderContent = this.getPlaceholderHTML();
-        // TODO - Load sortable at this point
-        return $('.scroll-box').sortable({
-            group: 'shelf-books',
-            exclude: '.instruction,.scroll-box-placeholder',
-            containerSelector: 'div.scroll-box',
-            itemSelector: '.scroll-box-item',
-            placeholder: placeHolderContent,
-            onDrop: this.onDrop.bind(this)
-        });
+        const scrollBoxes = this.elem.querySelectorAll('.scroll-box');
+        for (let scrollBox of scrollBoxes) {
+            new Sortable(scrollBox, {
+                group: 'shelf-books',
+                ghostClass: 'primary-background-light',
+                animation: 150,
+                onSort: this.onChange.bind(this),
+            });
+        }
     }
 
     setupListeners() {
@@ -45,27 +46,11 @@ class ShelfSort {
         this.onChange();
     }
 
-    onDrop($item, container, _super) {
-        this.onChange();
-        _super($item, container);
-    }
-
     onChange() {
-        const data = this.sortGroup.sortable('serialize').get();
-        this.input.value = data[0].map(item => item.id).join(',');
-        const instruction = this.elem.querySelector('.scroll-box-item.instruction');
-        instruction.parentNode.insertBefore(instruction, instruction.parentNode.children[0]);
-    }
-
-    getPlaceholderHTML() {
-        const placeHolder = document.querySelector('.scroll-box-placeholder');
-        placeHolder.style.display = 'block';
-        const placeHolderContent = placeHolder.outerHTML;
-        placeHolder.style.display = 'none';
-        return placeHolderContent;
+        const shelfBookElems = Array.from(this.shelfBooksList.querySelectorAll('[data-id]'));
+        this.input.value = shelfBookElems.map(elem => elem.getAttribute('data-id')).join(',');
     }
 
-
 }
 
 export default ShelfSort;
\ No newline at end of file

diff --git a/resources/assets/sass/styles.scss b/resources/assets/sass/styles.scss
index 3fbbcf1da949f7ba54e21914b3f07ac768a01765..70f04f3ff52677a9d8639816536fae73f9b02630 100644 (file)
--- a/resources/assets/sass/styles.scss
+++ b/resources/assets/sass/styles.scss
@@ -216,12 +216,23 @@ $btt-size: 40px;
   .scroll-box-item {
     padding: $-xs $-m;
     border-bottom: 1px solid #DDD;
+    border-top: 1px solid #DDD;
+    margin-top: -1px;
     &:last-child {
       border-bottom: 0;
     }
   }
 }
 
+.scroll-box[data-instruction]:before {
+  content: attr(data-instruction);
+  padding: $-xs $-m;
+  border-bottom: 1px solid #DDD;
+  display: block;
+  font-size: 0.75rem;
+  color: #666;
+}
+
 .fullscreen {
   border:0;
   position:fixed;

diff --git a/resources/views/shelves/form.blade.php b/resources/views/shelves/form.blade.php
index 4191f421de0e10ab44484283d38f8fb14b0ed81b..5803275df7b25b869071ecdb7c9426bc1cbff5e9 100644 (file)
--- a/resources/views/shelves/form.blade.php
+++ b/resources/views/shelves/form.blade.php
@@ -15,13 +15,7 @@
         <label for="books">{{ trans('entities.shelves_books') }}</label>
         <input type="hidden" id="books-input" name="books"
                value="{{ isset($shelf) ? $shelf->books->implode('id', ',') : '' }}">
-        <div class="scroll-box">
-            <div class="scroll-box-item text-small text-muted instruction">
-                {{ trans('entities.shelves_drag_books') }}
-            </div>
-            <div class="scroll-box-item scroll-box-placeholder" style="display: none;">
-                <a href="#" class="text-muted">@icon('book') ...</a>
-            </div>
+        <div class="scroll-box" shelf-sort-assigned-books data-instruction="{{ trans('entities.shelves_drag_books') }}">
             @if (isset($shelfBooks) && count($shelfBooks) > 0)
                 @foreach ($shelfBooks as $book)
                     <div data-id="{{ $book->id }}" class="scroll-box-item">