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

(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);