Blocs en offcanvas

app/assets/javascripts/admin/commons/content_editor.js

@@ -1,106 +1,12 @@
-/* global $, Sortable */
 window.osuny = window.osuny || {};
 window.osuny.contentEditor = {
-
     init: function () {
         'use strict';
         this.container = document.querySelector('.js-content-editor');
-        if (this.container === null) {
-            return;
-        }
-        this.sortHeadingsUrl = this.container.getAttribute('data-sort-headings-url');
-        this.sortBlocksUrl = this.container.getAttribute('data-sort-blocks-url');
-        this.modeWriteContainer = this.container.querySelector('#mode-write-container');
-        this.modeStructureContainer = this.container.querySelector('#mode-structure-container');
-        this.addListeners('[data-bs-toggle="tab"]', 'shown.bs.tab', this.tabChanged);
-        this.initSortable();
-    },
-
-    initSortable: function () {
-        'use strict';
-        var sortableContainers = this.container.querySelectorAll('.js-content-editor-sortable-container'),
-            i;
-
-        for (i = 0; i < sortableContainers.length; i += 1) {
-            new Sortable(sortableContainers[i], {
-                handle: '.content-editor__elements__handle',
-                fallbackOnBody: false,
-                onEnd: this.onSortableEnd.bind(this)
-            });
-        }
-    },
-
-    tabChanged: function (event) {
-        'use strict';
-        var tab = event.target,
-            id = tab.getAttribute('data-bs-target'),
-            div = this.container.querySelector(id),
-            source = div.dataset.source;
-        this.target = this.container.querySelector(div.dataset.target);
-        this.target.innerHTML = '';
-        this.xhr = new XMLHttpRequest();
-        this.xhr.open('GET', source, true);
-        this.xhr.onreadystatechange = this.tabLoaded.bind(this);
-        this.xhr.send();
-    },
-
-    tabLoaded: function () {
-        'use strict';
-        if (this.xhr.readyState === XMLHttpRequest.DONE) {
-            if (this.xhr.status === 200) {
-                this.target.innerHTML = this.xhr.responseText;
-                this.initSortable();
-            }
-        }
-    },
-
-    onSortableEnd: function (event) {
-        'use strict';
-        if (event.from.classList.contains('content-editor--write')) {
-            this.sortModeWrite(event.to);
-        } else if (event.from.classList.contains('content-editor--organize')) {
-            this.sortModeOrganize(event.to);
-        }
-    },
-
-    // Mode écriture du contenu
-    sortModeWrite: function (to) {
-        'use strict';
-        var ids = [],
-            child,
-            i;
-        for (i = 0; i < to.children.length; i += 1) {
-            child = to.children[i];
-            // Nous utilisons une route déjà existante, dédiée aux blocs,
-            // pour gérer à la fois des blocs et des headings.
-            // Ca manque d'élégance.
-            ids.push({
-                id: child.dataset.id,
-                kind: child.dataset.kind
-            });
-        }
-        $.post(this.sortBlocksUrl, { ids: ids });
-    },
-
-    // Mode organisation du plan
-    sortModeOrganize: function (to) {
-        'use strict';
-        var ids = [],
-            child,
-            i;
-        for (i = 0; i < to.children.length; i += 1) {
-            child = to.children[i];
-            ids.push(child.dataset.id);
-        }
-        $.post(this.sortHeadingsUrl, { ids: ids });
-    },
-
-    addListeners: function (selector, event, action) {
-        'use strict';
-        var elements = document.querySelectorAll(selector),
-            i;
-        for (i = 0; i < elements.length; i += 1) {
-            elements[i].addEventListener(event, action.bind(this));
+        if (this.container !== null) {
+            window.osuny.contentEditor.offcanvas.init();
+            window.osuny.contentEditor.tabs.init();
+            window.osuny.contentEditor.sort.init();
         }
     },
 

app/assets/javascripts/admin/commons/content_editor/offcanvas.js

@@ -0,0 +1,72 @@
+window.osuny.contentEditor.offcanvas = {
+    init: function () {
+        'use strict';
+        this.editor = document.getElementById('offcanvasEditor');
+        this.editorBootstrap = new bootstrap.Offcanvas(this.editor);
+        this.iframe = document.getElementById('offcanvasEditorIframe');
+        this.editButtons = document.querySelectorAll('.js-content-editor__element__edit');
+        this.addBlockButton = document.querySelector('.js-content-editor__add-block');
+        this.initButtons();
+    },
+
+    initButtons: function () {
+        'use strict';
+        var i,
+            button;
+        for (i = 0; i < this.editButtons.length; i += 1) {
+            button = this.editButtons[i];
+            button.addEventListener('click', this.onEditButtonClick.bind(this));
+        }
+        this.addBlockButton.addEventListener('click', this.onAddBlockButtonClick.bind(this));
+    },
+
+    onEditButtonClick: function (event) {
+        'use strict';
+        event.preventDefault();
+        window.open(event.target.href, 'editor');
+        this.editorBootstrap.show();
+    },
+
+    onAddBlockButtonClick: function (event) {
+        'use strict';
+        event.preventDefault();
+        window.open(event.target.href, 'editor');
+        this.editorBootstrap.show();
+    },
+
+    onBlockSave: function (blockIdentifier, blockPath) {
+        'use strict';
+        var snippet = document.querySelector('#snippet-' + blockIdentifier);
+        if (snippet === null) {
+            this.addNewSnippet();
+        } else {
+            this.updateExistingSnippet(snippet, blockPath);
+        }
+    },
+
+    addNewSnippet: function () {
+        this.editorBootstrap.hide();
+        window.osuny.contentEditor.tabs.reload();
+    },
+
+    updateExistingSnippet: function (snippet, blockPath) {
+        'use strict';
+        var request = new XMLHttpRequest();
+        request.onreadystatechange = function() {
+            if (request.status == 200) {
+                snippet.innerHTML = request.responseText;
+            }
+        };
+        request.open("GET", blockPath);
+        request.send();
+        this.editorBootstrap.hide();
+    },
+
+    invoke: function () {
+        'use strict';
+        return {
+            init: this.init.bind(this),
+            onBlockSave: this.onBlockSave.bind(this)
+        };
+    }
+}.invoke();

app/assets/javascripts/admin/commons/content_editor/sort.js

@@ -0,0 +1,71 @@
+/* global Sortable */
+window.osuny.contentEditor.sort = {
+    init: function () {
+        'use strict';
+        this.container = document.querySelector('.js-content-editor');
+        this.sortableContainers = this.container.querySelectorAll('.js-content-editor-sortable-container');
+        this.sortHeadingsUrl = this.container.getAttribute('data-sort-headings-url');
+        this.sortBlocksUrl = this.container.getAttribute('data-sort-blocks-url');
+        this.initSortable();
+    },
+
+    initSortable: function () {
+        'use strict';
+        var i;
+        for (i = 0; i < this.sortableContainers.length; i += 1) {
+            new Sortable(this.sortableContainers[i], {
+                handle: '.content-editor__elements__handle',
+                fallbackOnBody: false,
+                onEnd: this.onSortableEnd.bind(this)
+            });
+        }
+    },
+
+    onSortableEnd: function (event) {
+        'use strict';
+        if (event.from.classList.contains('content-editor--write')) {
+            this.sortModeWrite(event.to);
+        } else if (event.from.classList.contains('content-editor--organize')) {
+            this.sortModeOrganize(event.to);
+        }
+    },
+
+    // Mode écriture du contenu
+    sortModeWrite: function (to) {
+        'use strict';
+        var ids = [],
+            child,
+            i;
+        for (i = 0; i < to.children.length; i += 1) {
+            child = to.children[i];
+            // Nous utilisons une route déjà existante, dédiée aux blocs,
+            // pour gérer à la fois des blocs et des headings.
+            // Ca manque d'élégance.
+            ids.push({
+                id: child.dataset.id,
+                kind: child.dataset.kind
+            });
+        }
+        $.post(this.sortBlocksUrl, { ids: ids });
+    },
+
+    // Mode organisation du plan
+    sortModeOrganize: function (to) {
+        'use strict';
+        var ids = [],
+            child,
+            i;
+        for (i = 0; i < to.children.length; i += 1) {
+            child = to.children[i];
+            ids.push(child.dataset.id);
+        }
+        $.post(this.sortHeadingsUrl, { ids: ids });
+    },
+
+    invoke: function () {
+        'use strict';
+        return {
+            init: this.init.bind(this)
+        };
+    }
+}.invoke();

app/assets/javascripts/admin/commons/content_editor/tabs.js

@@ -0,0 +1,78 @@
+window.osuny.contentEditor.tabs = {
+    init: function () {
+        'use strict';
+        this.container = document.querySelector('.js-content-editor');
+        this.tabs = document.querySelectorAll('[data-bs-toggle="tab"]');
+        this.modeWriteContainer = this.container.querySelector('#mode-write-container');
+        this.modeWritePane = this.container.querySelector('#mode-write');
+        this.modeWriteSource = this.modeWritePane.getAttribute('data-source');
+        this.modeStructureContainer = this.container.querySelector('#mode-structure-container');
+        this.modeStructurePane = this.container.querySelector('#mode-structure');
+        this.modeStructureSource = this.modeStructurePane.getAttribute('data-source');
+        this.target = this.modeWriteContainer;
+        this.source = this.modeWriteSource;
+        this.initTabsHook();
+    },
+
+    initTabsHook: function () {
+        'use strict';
+        var i,
+            tab;
+        for (i = 0; i < this.tabs.length; i += 1) {
+            tab = this.tabs[i];
+            tab.addEventListener('shown.bs.tab', this.tabChanged.bind(this));
+        }
+    },
+
+    tabChanged: function (event) {
+        'use strict';
+        if (event.target.id == 'mode-write-tab') {
+            this.loadWrite();
+        } else {
+            this.loadStructure();
+        }
+    },
+
+    loadWrite: function () {
+        this.target = this.modeWriteContainer;
+        this.source = this.modeWriteSource;
+        this.loadCurrentTab();
+    },
+
+    loadStructure: function () {
+        this.target = this.modeStructureContainer;
+        this.source = this.modeStructureSource;
+        this.loadCurrentTab();
+    },
+
+    loadCurrentTab: function () {
+        this.target.innerHTML = '';
+        this.xhr = new XMLHttpRequest();
+        this.xhr.open('GET', this.source, true);
+        this.xhr.onreadystatechange = this.tabLoaded.bind(this);
+        this.xhr.send();
+    },
+
+    reload: function () {
+        this.loadCurrentTab();
+    },
+
+    tabLoaded: function () {
+        'use strict';
+        if (this.xhr.readyState === XMLHttpRequest.DONE) {
+            if (this.xhr.status === 200) {
+                this.target.innerHTML = this.xhr.responseText;
+                window.osuny.contentEditor.sort.init();
+                window.osuny.contentEditor.offcanvas.init();
+            }
+        }
+    },
+
+    invoke: function () {
+        'use strict';
+        return {
+            init: this.init.bind(this),
+            reload: this.reload.bind(this),
+        };
+    }
+}.invoke();

app/assets/stylesheets/admin/components/card.sass

@@ -1,17 +1,9 @@
 .card
     box-shadow: 0px 2px 4px 0px rgba(16, 15, 15, 0.05)
-    height: 100%
-    margin-bottom: $spacing1
-    overflow: hidden
     transition: box-shadow 0.3s ease-in-out
-    // In the people and organizations
-    > .osuny__published
-        margin-right: 0
-        position: absolute
-        right: pxToRem(10)
-        top: pxToRem(10)
-        &--false
-            border: 1px solid $color-border
+    &--osuny
+        height: 100%
+        overflow: hidden
     &--horizontal
         align-items: center
         flex-direction: row