(function() { var TINYMCE_PLUGIN_NAME = Amilia.PLUGIN_NAME + '_button', SHORTCODE = 'amilia_store_table', IMAGES = ["check", "edit", "lock"]; var modalTemplate = [ '

{button-title}

', '
', ' ', ' ', '
', '
', '
', '
', '
', ' ', ' ', '
', '
', ' ', ' ', '
', '
', ' ', ' ', '
', '
', '
', '
', '
', '
', '
', '
', ' ', ' ', ' ', ' ', ' {help}', '
', '
', '' ].join("\n"); var buttonTemplate = [ '', '', '', '{text}', '', '', '' ].join(''); tinymce.PluginManager.add(TINYMCE_PLUGIN_NAME, function(editor, url) { modalTemplate = Amilia.localize(modalTemplate); // The modal var mask = document.createElement("div"); mask.className = "amilia-mask"; document.body.appendChild(mask); mask.style.display = "none"; var modal = document.createElement("div"); modal.className = "amilia-modal"; document.body.appendChild(modal); modal.innerHTML = modalTemplate; modal.style.display = "none"; var storeUrl = modal.querySelector("input[name=store-url]"), storeUrlError = modal.querySelector('div.input-helper.store-url'), color = modal.querySelector("select[name=color]"), image = modal.querySelector("select[name=image]"), text = modal.querySelector("input[name=text]"), textError = modal.querySelector('div.input-helper.button-text'), preview = modal.querySelector("#amilia-button-preview"), insertButton = modal.querySelector("button[name=insert]"), updateButton = modal.querySelector("button[name=update]"), deleteButton = modal.querySelector("button[name=delete]"), cancelButton = modal.querySelector("button[name=cancel]"), help1 = modal.querySelector("a.amilia-help1"), help2 = modal.querySelector("a.amilia-help2"), instructions = modal.querySelector(".amilia-instructions"), activeButton = null, imagesUrl = url.replace('/shortcodes', '/images/'); function generateRawHtml() { return buttonTemplate .replace('{url}', storeUrl.value) .replace('{color}', Amilia.COLORS[color.value] == 'y' ? '#494949' : '#ffffff') .replace('{backgroundColor}', Amilia.COLORS[color.value]) .replace('{imageUrl}', imagesUrl + image.value + ".png") .replace('{text}', text.value); } function updatePreview() { preview.innerHTML = generateRawHtml(true); } storeUrl.onchange = function() { Amilia.validateStoreUrl(storeUrl, storeUrlError); }; text.onchange = function() { textError.innerText = text.value.replace(/^\s\s*/, '').replace(/\s\s*$/, '').length > 0 ? '' : Amilia.lang('error-invalid-button-text'); updatePreview(); } color.onchange = image.onchange = updatePreview; function close(e) { mask.style.display = "none"; modal.style.display = "none"; } insertButton.onclick = function(e) { editor.execCommand("mceInsertRawHTML", false, generateRawHtml() + "

"); close(); }; updateButton.onclick = function(e) { activeButton.innerHTML = ""; editor.execCommand("mceRemoveNode", false, activeButton); editor.execCommand("mceInsertRawHTML", false, generateRawHtml()); close(); } deleteButton.onclick = function(e) { activeButton.innerHTML = ""; editor.execCommand("mceRemoveNode", false, activeButton); close(); } cancelButton.onclick = close; mask.onclick = close; help1.onclick = help2.onclick = function(e) { e.preventDefault(); instructions.style.display = "block"; return false; } function getActiveButton() { return editor.dom.getParent(editor.selection.getNode(), "a.amilia-button"); } function showModal() { activeButton = getActiveButton(); if (activeButton) { storeUrl.value = activeButton.href; Amilia.validateStoreUrl(storeUrl, storeUrlError); color.value = Amilia.getColor(activeButton.style.backgroundColor); image.value = Amilia.getImage(activeButton.style.backgroundImage); text.value = activeButton.querySelector("span span").textContent; insertButton.style.display = "none"; updateButton.style.display = "inline"; deleteButton.style.display = "inline"; } else { storeUrl.value = Amilia.storeUrl; Amilia.validateStoreUrl(storeUrl, storeUrlError); insertButton.style.display = "inline"; updateButton.style.display = "none"; deleteButton.style.display = "none"; } mask.style.display = "block"; modal.style.display = "block"; modal.style.left = window.innerWidth/2 - modal.offsetWidth/2 + "px"; updatePreview(); } // The TineMCE button editor.addButton(TINYMCE_PLUGIN_NAME, { onclick: showModal, title: Amilia.lang('button-title'), image: imagesUrl + "link.svg" }); editor.onNodeChange.add(function(editor, controllManager, node) { controllManager.setActive(TINYMCE_PLUGIN_NAME, getActiveButton() != null); }); // In case the old deprecated button is present, remove it setTimeout(function() { var buttonDiv = document.querySelector('.mce-btn[aria-label="Amilia Button"]'); if (buttonDiv) buttonDiv.style.display = "none"; }, 10); }); })();