(function() { var PLUGIN_NAME = "amilia_button", COLORS = {g: '#40d892', dg: '#28b172', b: '#46aaf8', db: '#158ae5', o: '#fba16b', r: '#fb5b5b', y: '#fce162', steel: '#8294ab'}, IMAGES = ["check", "edit", "lock"], dictionnary = typeof tinymce.i18n.data == "object" ? tinymce.i18n.data : tinymce.i18n; tinyMCE.addI18n(window.objectL10n.lang + "." + PLUGIN_NAME, window.objectL10n); var modalTemplate = [ '

{modal-title}

', '
', ' ', ' ', '
', '
', '
', '
', ' ', ' ', '
', '
', ' ', ' ', '
', '
', ' ', ' ', '
', '
', '
', '
', '
', '
', '
', ' ', ' ', ' ', ' ', ' {help}', '
', '
', '' ].join("\n"); var buttonTemplate = [ '', '', '', '{text}', '', '', '' ].join(''); function lang(key, lang) { lang || (lang = tinymce.activeEditor.settings.language); if (lang != "fr") lang = "en"; return dictionnary[lang + '.' + PLUGIN_NAME + '.' + key] || key; } function localize(template) { return template.replace(/{([a-zA-Z0-9-_]+)}/g, function($0, $1) { return lang($1); }); } function validateUrl(url) { return /^(https?|ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(url); }; function validateText(text) { return text.replace(/^\s\s*/, '').replace(/\s\s*$/, '').length > 0; }; function getColor(backgroundColor) { var hexDigits = new Array ("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"); function hex(x) { return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16]; } backgroundColor || (backgroundColor = ""); var rgb = backgroundColor.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); backgroundColor = "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); for (var key in COLORS) if (COLORS.hasOwnProperty(key) && backgroundColor == COLORS[key]) return key; return "b"; } function getImage(backgroundImage) { backgroundImage || (backgroundImage = ""); for (var i = 0; i < IMAGES.length; i++) if (backgroundImage.indexOf(IMAGES[i]) != -1) return IMAGES[i]; return IMAGES[0]; } tinymce.PluginManager.add(PLUGIN_NAME, function(editor, url) { tinymce.DOM.loadCSS(url + "/amilia-button.css"); modalTemplate = localize(modalTemplate); // The modal var mask = document.createElement("div"); mask.id = "amilia-mask"; document.body.appendChild(mask); mask.style.display = "none"; var modal = document.createElement("div"); modal.id = "amilia-modal"; document.body.appendChild(modal); modal.innerHTML = modalTemplate; modal.style.display = "none"; var storeUrl = modal.querySelector("input[name=store-url]"), color = modal.querySelector("select[name=color]"), image = modal.querySelector("select[name=image]"), text = modal.querySelector("input[name=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; function generateRawHtml() { return buttonTemplate .replace('{url}', storeUrl.value) .replace('{color}', COLORS[color.value] == 'y' ? '#494949' : '#ffffff') .replace('{backgroundColor}', COLORS[color.value]) .replace('{imageUrl}', url + "/" + image.value + ".png") .replace('{text}', text.value); } function updatePreview() { preview.innerHTML = generateRawHtml(true); } function validate() { if (!validateUrl(storeUrl.value)) { alert(lang("error-invalid-url")); return false; } if (!validateText(text.value)) { alert(lang("error-invalid-text")); return false; } return true; } function close(e) { mask.style.display = "none"; modal.style.display = "none"; } color.onchange = image.onchange = text.onchange = updatePreview; insertButton.onclick = function(e) { if (!validate()) return; editor.execCommand("mceInsertRawHTML", false, generateRawHtml() + "

"); close(); }; updateButton.onclick = function(e) { if (!validate()) return; 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) { if (activeButton) { storeUrl.value = activeButton.href; color.value = getColor(activeButton.style.backgroundColor); image.value = getImage(activeButton.style.backgroundImage); text.value = activeButton.querySelector("span span").textContent; } insertButton.style.display = "none"; updateButton.style.display = "inline"; deleteButton.style.display = "inline"; } else { 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(PLUGIN_NAME, { onclick: showModal, title: "Amilia Button", image: url + "/amilia-button.png" }); editor.onNodeChange.add(function(editor, controllManager, node) { controllManager.setActive(PLUGIN_NAME, getActiveButton() != null); }); }); })();