Guest create page: name field autofocus

[bookstack] / resources / js / components / book-sort.js

diff --git a/resources/js/components/book-sort.js b/resources/js/components/book-sort.js
index da2b28d8e2a79fb0f4da1bf81d73bf5ca8c17f90..3ffadf99150d3813b06faea5d706e789257a3e8d 100644 (file)
--- a/resources/js/components/book-sort.js
+++ b/resources/js/components/book-sort.js
@@ -1,4 +1,6 @@
 import Sortable from "sortablejs";
 import Sortable from "sortablejs";

+import {Component} from "./component";
+import {htmlToDom} from "../services/dom";

 
 // Auto sort control
 const sortOperations = {
 
 // Auto sort control
 const sortOperations = {


@@ -35,14 +37,14 @@ const sortOperations = {
     },
 };
 
     },
 };
 

-class BookSort {
+export class BookSort extends Component {

 
 

-    constructor(elem) {
-        this.elem = elem;
-        this.sortContainer = elem.querySelector('[book-sort-boxes]');
-        this.input = elem.querySelector('[book-sort-input]');
+    setup() {
+        this.container = this.$el;
+        this.sortContainer = this.$refs.sortContainer;
+        this.input = this.$refs.input;

 
 

-        const initialSortBox = elem.querySelector('.sort-box');
+        const initialSortBox = this.container.querySelector('.sort-box');

         this.setupBookSortable(initialSortBox);
         this.setupSortPresets();
 
         this.setupBookSortable(initialSortBox);
         this.setupSortPresets();
 


@@ -90,14 +92,12 @@ class BookSort {
      * @param {Object} entityInfo
      */
     bookSelect(entityInfo) {
      * @param {Object} entityInfo
      */
     bookSelect(entityInfo) {

-        const alreadyAdded = this.elem.querySelector(`[data-type="book"][data-id="${entityInfo.id}"]`) !== null;
+        const alreadyAdded = this.container.querySelector(`[data-type="book"][data-id="${entityInfo.id}"]`) !== null;

         if (alreadyAdded) return;
 
         const entitySortItemUrl = entityInfo.link + '/sort-item';
         window.$http.get(entitySortItemUrl).then(resp => {
         if (alreadyAdded) return;
 
         const entitySortItemUrl = entityInfo.link + '/sort-item';
         window.$http.get(entitySortItemUrl).then(resp => {

-            const wrap = document.createElement('div');
-            wrap.innerHTML = resp.data;
-            const newBookContainer = wrap.children[0];
+            const newBookContainer = htmlToDom(resp.data);

             this.sortContainer.append(newBookContainer);
             this.setupBookSortable(newBookContainer);
         });
             this.sortContainer.append(newBookContainer);
             this.setupBookSortable(newBookContainer);
         });


@@ -134,6 +134,9 @@ class BookSort {
                 onSort: this.updateMapInput.bind(this),
                 dragClass: 'bg-white',
                 ghostClass: 'primary-background-light',
                 onSort: this.updateMapInput.bind(this),
                 dragClass: 'bg-white',
                 ghostClass: 'primary-background-light',

+                multiDrag: true,
+                multiDragKey: 'CTRL',
+                selectedClass: 'sortable-selected',

             });
         }
     }
             });
         }
     }


@@ -152,7 +155,7 @@ class BookSort {
      */
     buildEntityMap() {
         const entityMap = [];
      */
     buildEntityMap() {
         const entityMap = [];

-        const lists = this.elem.querySelectorAll('.sort-list');
+        const lists = this.container.querySelectorAll('.sort-list');

 
         for (let list of lists) {
             const bookId = list.closest('[data-type="book"]').getAttribute('data-id');
 
         for (let list of lists) {
             const bookId = list.closest('[data-type="book"]').getAttribute('data-id');


@@ -199,6 +202,4 @@ class BookSort {
         }
     }
 
         }
     }
 

-}
-
-export default BookSort;
\ No newline at end of file
+}
\ No newline at end of file