| 1 |
/** |
| 2 |
* widget.js - Contains all Widget functionality required by Photonic |
| 3 |
*/ |
| 4 |
document.addEventListener('DOMContentLoaded', () => { |
| 5 |
const PhotonicWidget = () => { |
| 6 |
"use strict"; |
| 7 |
|
| 8 |
let nativeMediaLibrary = new PhotonicWPNativeUI(sendDataToWizard, getDataFromWizard); |
| 9 |
let photonicWidgetData; |
| 10 |
let shortcode = ''; |
| 11 |
let clickedNode; |
| 12 |
|
| 13 |
document.addEventListener('click', e => { |
| 14 |
if (!(e.target instanceof Element) || !e.target.closest('.photonic-wizard')) { |
| 15 |
return; |
| 16 |
} |
| 17 |
e.preventDefault(); |
| 18 |
|
| 19 |
clickedNode = e.target.closest('.photonic-wizard'); |
| 20 |
photonicWidgetData = clickedNode.closest('.photonic-widget').querySelector('.photonic-shortcode'); |
| 21 |
shortcode = photonicWidgetData.value; |
| 22 |
|
| 23 |
tb_show('Click to create gallery', clickedNode.getAttribute('href')); |
| 24 |
}); |
| 25 |
|
| 26 |
nativeMediaLibrary.waitForIFrame(); |
| 27 |
|
| 28 |
function processWidgetChanges(widgetShortcode) { |
| 29 |
const widget = clickedNode.closest('.photonic-widget'); |
| 30 |
widget.querySelector('.photonic-shortcode').value = widgetShortcode; |
| 31 |
if (top.wp !== undefined && top.wp.shortcode !== undefined) { |
| 32 |
const shortcode = top.wp.shortcode.next(Photonic_Widget_JS.shortcode, widgetShortcode); |
| 33 |
const attrs = shortcode.shortcode.attrs.named; |
| 34 |
if (clickedNode.classList.contains('photonic')) { |
| 35 |
clickedNode.parentElement.querySelector('p').innerHTML = Photonic_Widget_JS.edit_message; |
| 36 |
} |
| 37 |
if (attrs.type !== undefined) { |
| 38 |
clickedNode.className = ''; |
| 39 |
clickedNode.classList.add('photonic-wizard', attrs.type); |
| 40 |
} |
| 41 |
else { |
| 42 |
clickedNode.className = ''; |
| 43 |
clickedNode.classList.add('photonic-wizard', 'wp'); |
| 44 |
} |
| 45 |
} |
| 46 |
|
| 47 |
widget.querySelector('.photonic-shortcode-display').innerHTML = "<h4>" + Photonic_Widget_JS.current_shortcode + "</h4>\n" + |
| 48 |
"<code>" + widgetShortcode + "</code>\n"; |
| 49 |
|
| 50 |
widget.querySelector('input[type="text"]').dispatchEvent(new Event('change', {bubbles: true})); |
| 51 |
} |
| 52 |
|
| 53 |
function parseSelection(selection) { |
| 54 |
if (selection !== '' && top.wp !== undefined && top.wp.shortcode !== undefined) { |
| 55 |
let shortcode = top.wp.shortcode.next(Photonic_Widget_JS.shortcode, selection.trim()); |
| 56 |
let moreShortcode = top.wp.shortcode.next(Photonic_Widget_JS.shortcode, selection.trim(), 1); // Only one shortcode at a time |
| 57 |
|
| 58 |
if (shortcode !== undefined && moreShortcode === undefined && shortcode.content.length === selection.trim().length) { // Selection is a valid shortcode |
| 59 |
return { |
| 60 |
shortcode: shortcode |
| 61 |
} |
| 62 |
} else { // Selection is not a valid shortcode |
| 63 |
return { |
| 64 |
shortcode: null, |
| 65 |
error: 'Not a shortcode' |
| 66 |
} |
| 67 |
} |
| 68 |
} else if (selection === '') { // Selection is blank |
| 69 |
return { |
| 70 |
shortcode: '' |
| 71 |
} |
| 72 |
} |
| 73 |
return null; |
| 74 |
} |
| 75 |
|
| 76 |
function sendDataToWizard(messageChannel) { |
| 77 |
messageChannel.port1.postMessage({ |
| 78 |
type: 'photonicWidget', |
| 79 |
object: parseSelection(shortcode), |
| 80 |
}); |
| 81 |
} |
| 82 |
|
| 83 |
function getDataFromWizard(data) { |
| 84 |
processWidgetChanges(data.html); |
| 85 |
} |
| 86 |
}; |
| 87 |
|
| 88 |
PhotonicWidget(); |
| 89 |
}); |
| 90 |
|
