first commit

assets/js/post-editor-media-picker.js

@@ -0,0 +1,147 @@
+(function (window, document, $) {
+    'use strict';
+
+    if (!$ || typeof $.fn.trumbowyg !== 'function') {
+        return;
+    }
+
+    var editorElement = document.getElementById('editor');
+    var modal = document.getElementById('media-picker-modal');
+    var closeButton = document.getElementById('media-picker-close');
+    var frame = document.getElementById('media-picker-frame');
+
+    if (!editorElement) {
+        return;
+    }
+
+    var $editor = $(editorElement);
+    var previousActiveElement = null;
+
+    function escapeHtmlAttribute(value) {
+        return String(value)
+            .replace(/&/g, '&')
+            .replace(/"/g, '"')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;');
+    }
+
+    function createMediaHtml(url, mediaId) {
+        return '<img src="' + escapeHtmlAttribute(url) + '" alt="" data-media-id="' + Number(mediaId) + '">';
+    }
+
+    function ensurePickerLoaded() {
+        if (!frame || !frame.dataset.pickerSrc) {
+            return;
+        }
+
+        if (!frame.getAttribute('src')) {
+            frame.setAttribute('src', frame.dataset.pickerSrc);
+        }
+    }
+
+    function focusToolbarButton() {
+        var button = document.querySelector('.trumbowyg-mediaPicker-button');
+        if (button) {
+            button.focus();
+        }
+    }
+
+    function openPicker() {
+        if (!modal) {
+            return;
+        }
+
+        previousActiveElement = document.activeElement;
+        $editor.trumbowyg('saveRange');
+        ensurePickerLoaded();
+        modal.hidden = false;
+        modal.classList.add('is-open');
+        modal.setAttribute('aria-hidden', 'false');
+
+        if (closeButton) {
+            closeButton.focus();
+        }
+    }
+
+    function closePicker() {
+        if (!modal) {
+            return;
+        }
+
+        modal.classList.remove('is-open');
+        modal.setAttribute('aria-hidden', 'true');
+        modal.hidden = true;
+
+        if (previousActiveElement instanceof HTMLElement) {
+            previousActiveElement.focus();
+            return;
+        }
+
+        focusToolbarButton();
+    }
+
+    function insertSelectedMedia(url, mediaId) {
+        if (!url || !mediaId) {
+            return;
+        }
+
+        $editor.trumbowyg('restoreRange');
+        $editor.trumbowyg('execCmd', {
+            cmd: 'insertHTML',
+            param: createMediaHtml(url, mediaId)
+        });
+        closePicker();
+        $editor.trumbowyg('saveRange');
+    }
+
+    $editor.trumbowyg({
+        lang: 'fr',
+        removeformatPasted: true,
+        btnsDef: {
+            mediaPicker: {
+                fn: function () {
+                    openPicker();
+                    return true;
+                },
+                ico: 'upload',
+                title: 'Médiathèque'
+            }
+        },
+        btns: [
+            ['viewHTML'],
+            ['formatting'],
+            ['strong', 'em', 'underline', 'del'],
+            ['link', 'mediaPicker'],
+            ['justifyLeft', 'justifyCenter', 'justifyRight'],
+            ['unorderedList', 'orderedList'],
+            ['insertHorizontalRule'],
+            ['fullscreen']
+        ]
+    });
+
+    if (closeButton) {
+        closeButton.addEventListener('click', closePicker);
+    }
+
+    if (modal) {
+        modal.addEventListener('click', function (event) {
+            if (event.target === modal) {
+                closePicker();
+            }
+        });
+    }
+
+    document.addEventListener('keydown', function (event) {
+        if (event.key === 'Escape' && modal && !modal.hidden) {
+            closePicker();
+        }
+    });
+
+    window.addEventListener('message', function (event) {
+        if (event.origin !== window.location.origin || !event.data || event.data.type !== 'netslim:media-selected') {
+            return;
+        }
+
+        insertSelectedMedia(event.data.url, event.data.mediaId);
+    });
+})(window, document, window.jQuery);