Fancybox 3 для JCE Editor Joomla 3

[spro1]

Всем привет!

Недавно занимался подбором нормального лайтбокса для сайта. Остановился на Fancybox. Хорошая штука, работает круто, на мобильном вид супер. Для пользователя на мой взгляд удобно.
Установка оказалась простой.
Начал пользовать, и тут столкнулся с задачей добавления Fancybox в материалах Joomla. Причем добавлять надо достаточно много, и делать это будет обычный пользователь, без особых познаний в нужной области
Ранее для этих нужд использовался визуальный редактор - JCE Editor + JCE Mediabox

Озадачился вопросом сделать человекопонятное добавление Fancybox прямо в редакторе, как это сделано с другими плагинами лайтбокса.

Задача: Получить в редакторе ссылку вида:

<a href="image.jpg" data-fancybox="images" data-caption="My caption">
    <img src="thumbnail.jpg" alt="" />
</a>

За основу можно взять готовое решение popups-widgetkit2
Для просмотра ссылки Войди или Зарегистрируйся

Сейчас получаем такую вот ссылку:

<a title="Заголовок" href="123" target="_blank" data-wk-lightbox="{group:'Группа'}" data-uk-lightbox="{group:'Группа'}">Ссылка</a>

Плагин довольно простой. Думаю знающему JS сделать можно за пару минут

Принцип работы в том, что в редакторе добавляем ссылку и для ссылки выбираем тип всплывающего окна, далее заполняем поля Группа (для создания галереи) и Заголовок (для заголовка лайтбокса)

Друзья, прошу помочь с переделкой скрипта. Уже много всего попробовал, но не могу разорбраться, потому что JS практически не знаю.

Думаю в дальнейшем многим пригодится.

Вот скрипт, который и формирует нужную ссылку:

/* popups-widgetkit2 - 2.0.1 | 2017-05-25 | http://www.joomlacontenteditor.net | Copyright (C) 2006 - 2017 Ryan Demmer. All rights reserved | GNU/GPL Version 2 or later - http://www.gnu.org/licenses/gpl-2.0.html */ ! function() {
    WFPopups.addPopup("widgetkit2", {
        params: {
            lightbox_keyboard: "",
            lightbox_duration: "",
            lightbox_group: ""
        },
        setup: function() {
            $.each(this.params, function(k, v) {
                $("#widgetkit_" + k).val(v)
            })
        },
        check: function(n) {
            return n.getAttribute("data-lightbox") || n.getAttribute("data-uk-lightbox") || n.getAttribute("data-wk-lightbox")
        },
        remove: function(n) {
            tinyMCEPopup.editor.dom.setAttribs(n, {
                "data-lightbox": null,
                "data-uk-lightbox": null,
                "data-wk-lightbox": null,
                "data-lightbox-type": null
            })
        },
        str2json: function(str, notevil) {
            try {
                return notevil ? JSON.parse(str.replace(/([\$\w]+)\s*:/g, function(_, $1) {
                    return '"' + $1 + '":'
                }).replace(/'([^']+)'/g, function(_, $1) {
                    return '"' + $1 + '"'
                })) : new Function("", "var json = " + str + "; return JSON.parse(JSON.stringify(json));")()
            } catch (e) {
                return !1
            }
        },
        convertData: function(s) {
            if (0 === s.indexOf("{")) {
                var start = s ? s.indexOf("{") : -1,
                    options = {};
                if (start != -1) try {
                    options = this.str2json(s.substr(start))
                } catch (e) {}
                return options
            }
            var a = [];
            return $.each(s.split(";"), function(i, n) {
                n && (n = n.replace(/([\w]+):(.*)/, '"$1":"$2"'), a.push(n))
            }), $.parseJSON("{" + a.join(",") + "}")
        },
        getAttributes: function(n) {
            var ed = tinyMCEPopup.editor,
                args = {},
                data = ed.dom.getAttrib(n, "data-lightbox") || ed.dom.getAttrib(n, "data-uk-lightbox") || ed.dom.getAttrib(n, "data-wk-lightbox");
            data && "on" !== data && (data = this.convertData(data), $.each(data, function(k, v) {
                $("#widgetkit_lightbox_" + k).val(v)
            })), $("#widgetkit_lightbox_title").val(ed.dom.getAttrib(n, "title"));
            var map = WFPopups.config.map || {
                href: "src"
            };
            return $.each(map, function(from, to) {
                var href = ed.dom.getAttrib(n, from);
                href = href.replace(/(\?|&)tmpl=component/i, ""), $("#" + to).val(href), args.src = href
            }), args
        },
        setAttributes: function(n, args) {
            var ed = tinyMCEPopup.editor,
                data = [];
            this.remove(n), tinymce.each(["group", "keyboard", "duration"], function(k) {
                var v = $("#widgetkit_lightbox_" + k).val();
                if ("" == v || null == v) {
                    if (!args[k]) return;
                    v = args[k]
                }
                data.push(k + ":" + v)
            }), args.data && $.each(args.data, function(k, v) {
                data.push(k + ":" + v)
            });
            var src = ed.dom.getAttrib(n, "href");
            /index\.php/.test(src) && /:\/\//.test(src) === !1 && (src += /\?/.test(src) ? "&tmpl=component" : "?tmpl=component", ed.dom.setAttrib(n, "href", src));
            var value = "on";
            data.length && (value = $.map(data, function(s) {
                var v = s.split(":");
                return "{" + v[0] + ":'" + v[1] + "'}"
            }).join(","));
            var type = $("#widgetkit_lightbox_type").val();
            type && ed.dom.setAttrib(n, "data-lightbox-type", type), ed.dom.setAttrib(n, "data-wk-lightbox", value), ed.dom.setAttrib(n, "data-uk-lightbox", value), ed.dom.setAttrib(n, "title", $("#widgetkit_lightbox_title").val()), ed.dom.setAttrib(n, "target", "_blank")
        },
        onSelect: function() {},
        onSelectFile: function(args) {}
    })
}();