Merge branch 'master' into fix/#960

resources/assets/js/components/homepage-control.js

@@ -0,0 +1,22 @@
+
+class HomepageControl {
+
+    constructor(elem) {
+        this.elem = elem;
+        this.typeControl = elem.querySelector('[name="setting-app-homepage-type"]');
+        this.pagePickerContainer = elem.querySelector('[page-picker-container]');
+
+        this.typeControl.addEventListener('change', this.controlPagePickerVisibility.bind(this));
+        this.controlPagePickerVisibility();
+    }
+
+    controlPagePickerVisibility() {
+        const showPagePicker = this.typeControl.value === 'page';
+        this.pagePickerContainer.style.display = (showPagePicker ? 'block' : 'none');
+    }
+
+
+
+}
+
+module.exports = HomepageControl;

resources/assets/js/components/index.js

@@ -18,6 +18,8 @@ let componentMapping = {
     'collapsible': require('./collapsible'),
     'toggle-switch': require('./toggle-switch'),
     'page-display': require('./page-display'),
+    'shelf-sort': require('./shelf-sort'),
+    'homepage-control': require('./homepage-control'),
 };
 
 window.components = {};

resources/assets/js/components/markdown-editor.js

@@ -8,6 +8,7 @@ class MarkdownEditor {
 
     constructor(elem) {
         this.elem = elem;
+        this.textDirection = document.getElementById('page-editor').getAttribute('text-direction');
         this.markdown = new MarkdownIt({html: true});
         this.markdown.use(mdTasksLists, {label: true});
 
@@ -98,6 +99,9 @@ class MarkdownEditor {
 
     codeMirrorSetup() {
         let cm = this.cm;
+        // Text direction
+        // cm.setOption('direction', this.textDirection);
+        cm.setOption('direction', 'ltr'); // Will force to remain as ltr for now due to issues when HTML is in editor.
         // Custom key commands
         let metaKey = code.getMetaKey();
         const extraKeys = {};

resources/assets/js/components/page-display.js

@@ -128,7 +128,7 @@ class PageDisplay {
         let $bookTreeParent = $sidebar.parent();
 
         // Check the page is scrollable and the content is taller than the tree
-        let pageScrollable = ($(document).height() > $window.height()) && ($sidebar.height() < $('.page-content').height());
+        let pageScrollable = ($(document).height() > ($window.height() + 40)) && ($sidebar.height() < $('.page-content').height());
 
         // Get current tree's width and header height
         let headerHeight = $("#header").height() + $(".toolbar").height();

resources/assets/js/components/page-picker.js

@@ -15,18 +15,20 @@ class PagePicker {
     }
 
     setupListeners() {
-        // Select click
-        this.selectButton.addEventListener('click', event => {
-            window.EntitySelectorPopup.show(entity => {
-                this.setValue(entity.id, entity.name);
-            });
-        });
+        this.selectButton.addEventListener('click', this.showPopup.bind(this));
+        this.display.parentElement.addEventListener('click', this.showPopup.bind(this));
 
         this.resetButton.addEventListener('click', event => {
             this.setValue('', '');
         });
     }
 
+    showPopup() {
+        window.EntitySelectorPopup.show(entity => {
+            this.setValue(entity.id, entity.name);
+        });
+    }
+
     setValue(value, name) {
         this.value = value;
         this.input.value = value;

resources/assets/js/components/shelf-sort.js

@@ -0,0 +1,71 @@
+
+class ShelfSort {
+
+    constructor(elem) {
+        this.elem = elem;
+        this.sortGroup = this.initSortable();
+        this.input = document.getElementById('books-input');
+        this.setupListeners();
+    }
+
+    initSortable() {
+        const sortable = require('jquery-sortable');
+        const placeHolderContent = this.getPlaceholderHTML();
+
+        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)
+        });
+    }
+
+    setupListeners() {
+        this.elem.addEventListener('click', event => {
+            const sortItem = event.target.closest('.scroll-box-item:not(.instruction)');
+            if (sortItem) {
+                event.preventDefault();
+                this.sortItemClick(sortItem);
+            }
+        });
+    }
+
+    /**
+     * Called when a sort item is clicked.
+     * @param {Element} sortItem
+     */
+    sortItemClick(sortItem) {
+        const lists = this.elem.querySelectorAll('.scroll-box');
+        const newList = Array.from(lists).filter(list => sortItem.parentElement !== list);
+        if (newList.length > 0) {
+            newList[0].appendChild(sortItem);
+        }
+        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;
+    }
+
+
+}
+
+module.exports = ShelfSort;

resources/assets/js/components/wysiwyg-editor.js

@@ -370,6 +370,7 @@ class WysiwygEditor {
 
     constructor(elem) {
         this.elem = elem;
+        this.textDirection = document.getElementById('page-editor').getAttribute('text-direction');
 
         this.plugins = "image table textcolor paste link autolink fullscreen imagetools code customhr autosave lists codeeditor media";
         this.loadPlugins();
@@ -385,6 +386,14 @@ class WysiwygEditor {
             drawIoPlugin();
             this.plugins += ' drawio';
         }
+        if (this.textDirection === 'rtl') {
+            this.plugins += ' directionality'
+        }
+    }
+
+    getToolBar() {
+        const textDirPlugins = this.textDirection === 'rtl' ? 'ltr rtl' : '';
+        return `undo redo | styleselect | bold italic underline strikethrough superscript subscript | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table image-insert link hr drawio media | removeformat code ${textDirPlugins} fullscreen`
     }
 
     getTinyMceConfig() {
@@ -397,6 +406,7 @@ class WysiwygEditor {
             body_class: 'page-content',
             browser_spellcheck: true,
             relative_urls: false,
+            directionality : this.textDirection,
             remove_script_host: false,
             document_base_url: window.baseUrl('/'),
             statusbar: false,
@@ -407,7 +417,7 @@ class WysiwygEditor {
             valid_children: "-div[p|h1|h2|h3|h4|h5|h6|blockquote],+div[pre],+div[img]",
             plugins: this.plugins,
             imagetools_toolbar: 'imageoptions',
-            toolbar: "undo redo | styleselect | bold italic underline strikethrough superscript subscript | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table image-insert link hr drawio media | removeformat code fullscreen",
+            toolbar: this.getToolBar(),
             content_style: "body {padding-left: 15px !important; padding-right: 15px !important; margin:0!important; margin-left:auto!important;margin-right:auto!important;}",
             style_formats: [
                 {title: "Header Large", format: "h2"},