From b3fcea7223bb97a83a847ebe1e2cc2e078931314 Mon Sep 17 00:00:00 2001 From: Claudio-Emmolo <113107618+Claudio-Emmolo@users.noreply.github.com> Date: Fri, 26 Jul 2024 15:28:40 +0200 Subject: [PATCH] shortcodeList.js, new Widgetbay multi links --- src/__widgetbay.js | 85 ++++++++++++++++++++++ src/widgetbay.js | 177 ++++++++++++++++++++++++++++++--------------- 2 files changed, 202 insertions(+), 60 deletions(-) create mode 100644 src/__widgetbay.js diff --git a/src/__widgetbay.js b/src/__widgetbay.js new file mode 100644 index 0000000..87f5d49 --- /dev/null +++ b/src/__widgetbay.js @@ -0,0 +1,85 @@ +/* global tinymce */ +tinymce.PluginManager.add('widgetbay', function (editor, url) { + const openDialog = function () { + return editor.windowManager.open({ + title: 'Widgetbay', + body: { + type: 'panel', + items: [ + { + type: 'input', + inputMode: 'number', + name: 'id', + label: 'Add Widgetbay ID', + placeholder: '' + }, + { + type: 'input', + inputMode: 'url', + name: 'link', + label: 'or add product URL', + placeholder: 'https://www.amazon.it/B...' + }, + { + type: 'input', + inputMode: 'text', + name: 'title', + label: 'Custom title (optional)', + placeholder: 'Add custom title to product' + } + ] + }, + buttons: [ + { + type: 'cancel', + text: 'Close' + }, + { + type: 'submit', + text: 'Save', + primary: true + } + ], + onSubmit: function (api) { + const data = api.getData() + + const id = data.id ? 'id="' + data.id + '"' : null + const link = data.link ? 'link="' + data.link + '"' : null + const title = data.title ? 'title="' + data.title + '"' : null + + editor.insertContent('[widgetbay ' + (id ?? link) + ' ' + (title ?? '') + ']') + api.close() + } + }) + } + + /* Add a spoiler icon */ + editor.ui.registry.addIcon('widgetbay', '') + + /* Add a button that opens a window */ + editor.ui.registry.addButton('widgetbay', { + icon: 'widgetbay', + tooltip: 'Add Widgetbay iframe', + onAction: function () { + /* Open window */ + openDialog() + } + }) + /* Adds a menu item, which can then be included in any menu via the menu/menubar configuration */ + editor.ui.registry.addMenuItem('widgetbay', { + text: 'Widgetbay', + onAction: function () { + /* Open window */ + openDialog() + } + }) + /* Return the metadata for the help plugin */ + return { + getMetadata: function () { + return { + name: 'Widgetbay Shortcode', + url: 'https://github.com/The-3Labs-Team/tinymce-laravel-shortcode-plus' + } + } + } +}) diff --git a/src/widgetbay.js b/src/widgetbay.js index 87f5d49..1fc5796 100644 --- a/src/widgetbay.js +++ b/src/widgetbay.js @@ -1,57 +1,69 @@ /* global tinymce */ tinymce.PluginManager.add('widgetbay', function (editor, url) { - const openDialog = function () { - return editor.windowManager.open({ - title: 'Widgetbay', - body: { - type: 'panel', - items: [ - { - type: 'input', - inputMode: 'number', - name: 'id', - label: 'Add Widgetbay ID', - placeholder: '' - }, - { - type: 'input', - inputMode: 'url', - name: 'link', - label: 'or add product URL', - placeholder: 'https://www.amazon.it/B...' - }, - { - type: 'input', - inputMode: 'text', - name: 'title', - label: 'Custom title (optional)', - placeholder: 'Add custom title to product' - } - ] - }, - buttons: [ - { - type: 'cancel', - text: 'Close' - }, - { - type: 'submit', - text: 'Save', - primary: true - } - ], - onSubmit: function (api) { - const data = api.getData() + const content = ` +
+
+ + + + + - editor.insertContent('[widgetbay ' + (id ?? link) + ' ' + (title ?? '') + ']') - api.close() - } - }) - } + + + + +
+
+ ` + + const customStyles = ` + +` /* Add a spoiler icon */ editor.ui.registry.addIcon('widgetbay', '') @@ -61,18 +73,22 @@ tinymce.PluginManager.add('widgetbay', function (editor, url) { icon: 'widgetbay', tooltip: 'Add Widgetbay iframe', onAction: function () { - /* Open window */ - openDialog() - } - }) - /* Adds a menu item, which can then be included in any menu via the menu/menubar configuration */ - editor.ui.registry.addMenuItem('widgetbay', { - text: 'Widgetbay', - onAction: function () { - /* Open window */ - openDialog() + tinymce.activeEditor.windowManager.open({ + title: 'Widgetbay', + body: { + type: 'panel', + items: [ + { + type: 'htmlpanel', + html: customStyles + content + } + ] + } + }) + generateShortcode() } }) + /* Return the metadata for the help plugin */ return { getMetadata: function () { @@ -83,3 +99,44 @@ tinymce.PluginManager.add('widgetbay', function (editor, url) { } } }) + +function addNewLink () { + const linksBox = document.getElementById('links-box') + + const links = linksBox.getElementsByTagName('input') + const linksCount = links.length + + const newLink = document.createElement('input') + newLink.type = 'text' + newLink.name = 'widget-url-' + linksCount + newLink.style.margin = '5px 0' + + linksBox.appendChild(newLink) +} + +function generateShortcode () { + const formQuery = document.querySelector('#widgetbay-form') + + formQuery.addEventListener('submit', function (e) { + e.preventDefault() + const formData = new FormData(formQuery) + + // get all data starting with widget-url + const links = [] + for (const pair of formData.entries()) { + if (pair[0].includes('widget-url') && pair[1] !== '') { + links.push(pair[1]) + } + } + const link = links.join(',') + + const parsedTitle = formData.get('widget-title') ? 'title="' + formData.get('widget-title') + '" ' : '' + const parsedLink = link ? 'link="' + link + '" ' : ' ' + const parsedId = formData.get('widget-id') ? 'id="' + formData.get('widget-id') + '"' : ' ' + + const content = '[widgetbay ' + parsedId + parsedLink + parsedTitle + ']' + + tinymce.activeEditor.insertContent(content) + tinymce.activeEditor.windowManager.close() + }) +}