Merge pull request #15 from The-3Labs-Team/add-widgetbay-button

Add widgetbay

package.json

@@ -1,15 +1,16 @@
 {
-  "scripts": {
-    "start": "http-server -p 8080"
-  },
-  "dependencies": {
-    "http-server": "^14.1.1"
-  },
-  "devDependencies": {
-    "eslint": "^8.45.0",
-    "eslint-config-standard": "^17.1.0",
-    "eslint-plugin-import": "^2.28.0",
-    "eslint-plugin-n": "^16.0.1",
-    "eslint-plugin-promise": "^6.1.1"
-  }
+    "scripts": {
+        "start": "http-server -p 8080",
+        "lint": "npx eslint . --fix"
+    },
+    "dependencies": {
+        "http-server": "^14.1.1"
+    },
+    "devDependencies": {
+        "eslint": "^8.45.0",
+        "eslint-config-standard": "^17.1.0",
+        "eslint-plugin-import": "^2.28.0",
+        "eslint-plugin-n": "^16.0.1",
+        "eslint-plugin-promise": "^6.1.1"
+    }
 }

src/leggianche.js

@@ -112,7 +112,7 @@ tinymce.PluginManager.add('leggianche', function (editor, url) {
             .then(function (data) {
               console.table(data)
               return data.filter(function (item) {
-                  return type.includes(item.resourceName)
+                return type.includes(item.resourceName)
               })
             })
 

src/mediahubPhoto.js

@@ -73,7 +73,7 @@ tinymce.PluginManager.add('mediahubPhoto', function (editor, url) {
             </div>
 
         </div>
-        
+
     </form>
 
   `
@@ -274,21 +274,19 @@ function sliderDimensions (value) {
   const imageContainers = document.querySelectorAll('.checkboxes div')
 
   imageContainers.forEach(imageContainer => {
-    const image = imageContainer.querySelector('img')
-
-    if (value == 2) {
+    if (value === 2) {
       imageContainer.style.height = '300px'
     }
-    if (value == 3) {
+    if (value === 3) {
       imageContainer.style.height = '250px'
     }
-    if (value == 4) {
+    if (value === 4) {
       imageContainer.style.height = '160px'
     }
-    if (value == 5) {
+    if (value === 5) {
       imageContainer.style.height = '150px'
     }
-    if (value == 6) {
+    if (value === 6) {
       imageContainer.style.height = '100px'
     }
   })

src/shortcodeList.js

@@ -22,6 +22,11 @@ tinymce.PluginManager.add('shortcodeList', function (editor, url) {
       code: '[button link="https://www.your-link.com" label="Add a label" level="primary|secondary"]',
       description: 'Insert a button'
     },
+    {
+      title: 'Widgetbay',
+      code: '[widgetbay id="optional" link="optional"]',
+      description: 'Insert a widgetbay iframe. You can use the id or the link, but not both'
+    },
     {
       title: 'Merchandise Product',
       code: '[product id="1,2,3" amztag="nosp-guide" ebaycampaignid="123456" label="Miglior prodotto"]',

src/widgetbay.js

@@ -0,0 +1,77 @@
+/* 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...'
+          }
+        ]
+      },
+      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
+
+        editor.insertContent('[widgetbay ' + (id ?? link) + ']')
+        api.close()
+      }
+    })
+  }
+
+  /* Add a spoiler icon */
+  editor.ui.registry.addIcon('widgetbay', '<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M345 39.1L472.8 168.4c52.4 53 52.4 138.2 0 191.2L360.8 472.9c-9.3 9.4-24.5 9.5-33.9 .2s-9.5-24.5-.2-33.9L438.6 325.9c33.9-34.3 33.9-89.4 0-123.7L310.9 72.9c-9.3-9.4-9.2-24.6 .2-33.9s24.6-9.2 33.9 .2zM0 229.5V80C0 53.5 21.5 32 48 32H197.5c17 0 33.3 6.7 45.3 18.7l168 168c25 25 25 65.5 0 90.5L277.3 442.7c-25 25-65.5 25-90.5 0l-168-168C6.7 262.7 0 246.5 0 229.5zM144 144a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"/></svg>')
+
+  /* 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'
+      }
+    }
+  }
+})