| 1 |
(function() { |
| 2 |
var wrap, backdrop, results, search, submitBtn, selectedFid, editor; |
| 3 |
|
| 4 |
function esc(str) { |
| 5 |
var el = document.createElement('span'); |
| 6 |
el.textContent = str; |
| 7 |
return el.innerHTML; |
| 8 |
} |
| 9 |
|
| 10 |
function buildModal() { |
| 11 |
if (wrap) return; |
| 12 |
|
| 13 |
var data = window.accua_forms_shortcode || {}; |
| 14 |
var forms = data.forms || []; |
| 15 |
var i18n = data.i18n || {}; |
| 16 |
|
| 17 |
var html = '<div id="accua-form-backdrop" style="display:none"></div>'; |
| 18 |
html += '<div id="accua-form-wrap" class="wp-core-ui" style="display:none" role="dialog" aria-modal="true" aria-labelledby="accua-form-modal-title">'; |
| 19 |
html += '<form tabindex="-1">'; |
| 20 |
html += '<h1 class="accua-form-modal-title" id="accua-form-modal-title">' + esc(i18n.title || 'Insert Contact Form') + '</h1>'; |
| 21 |
html += '<button type="button" class="accua-form-close"><span class="screen-reader-text">' + esc(i18n.close || 'Close') + '</span></button>'; |
| 22 |
html += '<div class="accua-form-body">'; |
| 23 |
html += '<div class="search-wrapper"><label><span class="search-label">' + esc(i18n.search || 'Search forms') + '</span>'; |
| 24 |
html += '<input type="search" id="accua-form-search" class="link-search-field" autocomplete="off" /></label></div>'; |
| 25 |
html += '<div id="accua-form-results" class="query-results" tabindex="0"><ul>'; |
| 26 |
for (var i = 0; i < forms.length; i++) { |
| 27 |
html += '<li data-fid="' + esc(forms[i].value) + '"><span class="item-title">' + esc(forms[i].text) + '</span><span class="item-info">ID ' + esc(forms[i].value) + '</span></li>'; |
| 28 |
} |
| 29 |
html += '</ul><div class="no-results" style="display:none">' + esc(i18n.no_results || 'No forms found.') + '</div></div></div>'; |
| 30 |
html += '<div class="submitbox">'; |
| 31 |
html += '<div class="cancel"><button type="button" class="button">' + esc(i18n.cancel || 'Cancel') + '</button></div>'; |
| 32 |
html += '<div class="submit"><button type="button" class="button button-primary" id="accua-form-submit" disabled>' + esc(i18n.insert || 'Insert') + '</button></div>'; |
| 33 |
html += '</div></form></div>'; |
| 34 |
|
| 35 |
document.body.insertAdjacentHTML('beforeend', html); |
| 36 |
|
| 37 |
backdrop = document.getElementById('accua-form-backdrop'); |
| 38 |
wrap = document.getElementById('accua-form-wrap'); |
| 39 |
results = document.getElementById('accua-form-results'); |
| 40 |
search = document.getElementById('accua-form-search'); |
| 41 |
submitBtn = document.getElementById('accua-form-submit'); |
| 42 |
|
| 43 |
backdrop.addEventListener('click', close); |
| 44 |
wrap.querySelector('.accua-form-close').addEventListener('click', close); |
| 45 |
wrap.querySelector('.cancel button').addEventListener('click', close); |
| 46 |
submitBtn.addEventListener('click', insert); |
| 47 |
|
| 48 |
wrap.addEventListener('keydown', function(e) { |
| 49 |
if (e.key === 'Escape') close(); |
| 50 |
}); |
| 51 |
|
| 52 |
search.addEventListener('input', function() { |
| 53 |
var q = this.value.toLowerCase(); |
| 54 |
var items = results.querySelectorAll('li'); |
| 55 |
var any = false; |
| 56 |
for (var j = 0; j < items.length; j++) { |
| 57 |
var match = items[j].querySelector('.item-title').textContent.toLowerCase().indexOf(q) !== -1 || items[j].getAttribute('data-fid').indexOf(q) !== -1; |
| 58 |
items[j].style.display = match ? '' : 'none'; |
| 59 |
if (match) any = true; |
| 60 |
} |
| 61 |
results.querySelector('.no-results').style.display = any ? 'none' : ''; |
| 62 |
}); |
| 63 |
|
| 64 |
results.addEventListener('click', function(e) { |
| 65 |
var li = e.target.closest('li'); |
| 66 |
if (li) selectItem(li); |
| 67 |
}); |
| 68 |
|
| 69 |
results.addEventListener('dblclick', function(e) { |
| 70 |
var li = e.target.closest('li'); |
| 71 |
if (!li) return; |
| 72 |
selectItem(li); |
| 73 |
insert(); |
| 74 |
}); |
| 75 |
|
| 76 |
results.addEventListener('keydown', function(e) { |
| 77 |
if (e.key === 'ArrowDown' || e.key === 'ArrowUp') { |
| 78 |
e.preventDefault(); |
| 79 |
var sel = results.querySelector('li.selected'); |
| 80 |
var visible = []; |
| 81 |
var items = results.querySelectorAll('li'); |
| 82 |
for (var j = 0; j < items.length; j++) { |
| 83 |
if (items[j].style.display !== 'none') visible.push(items[j]); |
| 84 |
} |
| 85 |
if (!visible.length) return; |
| 86 |
var idx = sel ? visible.indexOf(sel) : -1; |
| 87 |
var next = e.key === 'ArrowDown' ? idx + 1 : idx - 1; |
| 88 |
if (next >= 0 && next < visible.length) selectItem(visible[next]); |
| 89 |
} else if (e.key === 'Enter' && selectedFid) { |
| 90 |
e.preventDefault(); |
| 91 |
insert(); |
| 92 |
} |
| 93 |
}); |
| 94 |
} |
| 95 |
|
| 96 |
function selectItem(li) { |
| 97 |
var prev = results.querySelector('li.selected'); |
| 98 |
if (prev) prev.className = ''; |
| 99 |
li.className = 'selected'; |
| 100 |
selectedFid = li.getAttribute('data-fid'); |
| 101 |
submitBtn.disabled = false; |
| 102 |
} |
| 103 |
|
| 104 |
function open(ed) { |
| 105 |
editor = ed; |
| 106 |
buildModal(); |
| 107 |
selectedFid = ''; |
| 108 |
submitBtn.disabled = true; |
| 109 |
var items = results.querySelectorAll('li'); |
| 110 |
for (var j = 0; j < items.length; j++) { |
| 111 |
items[j].className = ''; |
| 112 |
items[j].style.display = ''; |
| 113 |
} |
| 114 |
results.querySelector('.no-results').style.display = 'none'; |
| 115 |
search.value = ''; |
| 116 |
backdrop.style.display = ''; |
| 117 |
wrap.style.display = ''; |
| 118 |
search.focus(); |
| 119 |
} |
| 120 |
|
| 121 |
function close() { |
| 122 |
backdrop.style.display = 'none'; |
| 123 |
wrap.style.display = 'none'; |
| 124 |
} |
| 125 |
|
| 126 |
function insert() { |
| 127 |
if (!selectedFid) return; |
| 128 |
editor.insertContent('[accua-form fid="' + selectedFid + '"]'); |
| 129 |
close(); |
| 130 |
} |
| 131 |
|
| 132 |
tinymce.PluginManager.add('accua_fancy_button', function(ed, url) { |
| 133 |
ed.addCommand('mcebutton', function() { open(ed); }); |
| 134 |
ed.addButton('accua_fancy_button', { |
| 135 |
title: 'Contact Forms by Cimatti', |
| 136 |
cmd: 'mcebutton', |
| 137 |
image: url + '/../../img/accua-contacts-forms.svg' |
| 138 |
}); |
| 139 |
}); |
| 140 |
})(); |
