update
This commit is contained in:
@@ -3,6 +3,14 @@ $mailboxes = is_array($mailboxes ?? null) ? $mailboxes : [];
|
||||
$em = is_array($editMailbox ?? null) ? $editMailbox : null;
|
||||
$isEdit = $em !== null;
|
||||
?>
|
||||
<link href="https://cdn.quilljs.com/2.0.3/quill.snow.css" rel="stylesheet">
|
||||
<style>
|
||||
#js-header-editor .ql-editor, #js-footer-editor .ql-editor { min-height: 80px; }
|
||||
.html-source-toggle { margin-top: 4px; display: flex; justify-content: flex-end; }
|
||||
.html-source-toggle button { font-size: 11px; padding: 2px 8px; cursor: pointer; background: #f5f5f5; border: 1px solid #ccc; border-radius: 3px; }
|
||||
.html-source-toggle button.active { background: #e0e0e0; font-weight: 600; }
|
||||
.html-source-area { width: 100%; min-height: 120px; font-family: monospace; font-size: 12px; border: 1px solid #ccc; padding: 8px; box-sizing: border-box; display: none; }
|
||||
</style>
|
||||
|
||||
<section class="card">
|
||||
<h2 class="section-title">Skrzynki pocztowe</h2>
|
||||
@@ -150,6 +158,25 @@ $isEdit = $em !== null;
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<h4 class="section-title mt-16">Szablon wiadomosci</h4>
|
||||
<p class="muted mt-4" style="font-size:12px">Opcjonalnie. Naglowek i stopka beda dolaczane do kazdego e-maila wysylanego z tej skrzynki.</p>
|
||||
|
||||
<div class="form-field mt-12">
|
||||
<span class="field-label">Naglowek (header)</span>
|
||||
<div id="js-header-editor" style="min-height:80px"></div>
|
||||
<textarea id="js-header-source" class="html-source-area"></textarea>
|
||||
<div class="html-source-toggle"><button type="button" class="js-toggle-html" data-editor="header"></> HTML</button> <button type="button" class="js-preview-html" data-editor="header">Podglad</button></div>
|
||||
<input type="hidden" name="header_html" id="js-header-html" value="">
|
||||
</div>
|
||||
|
||||
<div class="form-field mt-12">
|
||||
<span class="field-label">Stopka (footer)</span>
|
||||
<div id="js-footer-editor" style="min-height:80px"></div>
|
||||
<textarea id="js-footer-source" class="html-source-area"></textarea>
|
||||
<div class="html-source-toggle"><button type="button" class="js-toggle-html" data-editor="footer"></> HTML</button> <button type="button" class="js-preview-html" data-editor="footer">Podglad</button></div>
|
||||
<input type="hidden" name="footer_html" id="js-footer-html" value="">
|
||||
</div>
|
||||
|
||||
<div class="form-actions mt-16">
|
||||
<button type="submit" class="btn btn--primary"><?= $isEdit ? 'Zapisz zmiany' : 'Dodaj skrzynke' ?></button>
|
||||
<button type="button" class="btn btn--secondary" id="js-test-connection">Testuj polaczenie</button>
|
||||
@@ -162,8 +189,176 @@ $isEdit = $em !== null;
|
||||
<div id="js-test-result" class="mt-12" style="display:none"></div>
|
||||
</section>
|
||||
|
||||
<div id="js-html-preview-modal" style="display:none; position:fixed; top:0; left:0; right:0; bottom:0; z-index:9999; background:rgba(0,0,0,0.5);">
|
||||
<div style="position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:700px; max-width:90vw; max-height:80vh; background:#fff; border-radius:6px; box-shadow:0 4px 24px rgba(0,0,0,0.2); display:flex; flex-direction:column;">
|
||||
<div style="display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid #eee;">
|
||||
<strong id="js-preview-title">Podglad</strong>
|
||||
<button type="button" id="js-preview-close" style="border:none; background:none; font-size:20px; cursor:pointer; padding:0 4px;">×</button>
|
||||
</div>
|
||||
<div style="flex:1; overflow:auto; padding:16px;">
|
||||
<iframe id="js-preview-iframe" style="width:100%; min-height:300px; border:none;"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.quilljs.com/2.0.3/quill.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// --- Quill editors for header/footer ---
|
||||
var quillToolbar = [
|
||||
[{ header: [1, 2, 3, false] }],
|
||||
['bold', 'italic', 'underline'],
|
||||
[{ color: [] }, { background: [] }],
|
||||
[{ align: [] }],
|
||||
[{ list: 'ordered' }, { list: 'bullet' }],
|
||||
['link', 'image'],
|
||||
['clean']
|
||||
];
|
||||
|
||||
var headerEditor = new Quill('#js-header-editor', {
|
||||
theme: 'snow',
|
||||
modules: { toolbar: quillToolbar },
|
||||
placeholder: 'Naglowek wiadomosci (np. logo, nazwa firmy)...'
|
||||
});
|
||||
|
||||
var footerEditor = new Quill('#js-footer-editor', {
|
||||
theme: 'snow',
|
||||
modules: { toolbar: quillToolbar },
|
||||
placeholder: 'Stopka wiadomosci (np. dane kontaktowe, adres)...'
|
||||
});
|
||||
|
||||
// --- HTML source toggle ---
|
||||
var editors = { header: headerEditor, footer: footerEditor };
|
||||
var sourceMode = { header: false, footer: false };
|
||||
var rawHtml = { header: '', footer: '' };
|
||||
|
||||
function isRichHtml(html) {
|
||||
if (!html) return false;
|
||||
return /<(div|table|td|tr|meta|img)\b[^>]*style=/i.test(html) || /<meta\b/i.test(html);
|
||||
}
|
||||
|
||||
function activateSourceMode(key) {
|
||||
var quillContainer = document.getElementById('js-' + key + '-editor');
|
||||
var sourceArea = document.getElementById('js-' + key + '-source');
|
||||
var toolbar = quillContainer.parentNode.querySelector('.ql-toolbar');
|
||||
var btn = document.querySelector('.js-toggle-html[data-editor="' + key + '"]');
|
||||
sourceArea.value = rawHtml[key];
|
||||
quillContainer.style.display = 'none';
|
||||
if (toolbar) toolbar.style.display = 'none';
|
||||
sourceArea.style.display = 'block';
|
||||
if (btn) btn.classList.add('active');
|
||||
sourceMode[key] = true;
|
||||
}
|
||||
|
||||
function activateQuillMode(key) {
|
||||
var quillContainer = document.getElementById('js-' + key + '-editor');
|
||||
var sourceArea = document.getElementById('js-' + key + '-source');
|
||||
var toolbar = quillContainer.parentNode.querySelector('.ql-toolbar');
|
||||
var btn = document.querySelector('.js-toggle-html[data-editor="' + key + '"]');
|
||||
rawHtml[key] = sourceArea.value;
|
||||
editors[key].root.innerHTML = rawHtml[key] || '<p><br></p>';
|
||||
sourceArea.style.display = 'none';
|
||||
quillContainer.style.display = '';
|
||||
if (toolbar) toolbar.style.display = '';
|
||||
if (btn) btn.classList.remove('active');
|
||||
sourceMode[key] = false;
|
||||
}
|
||||
|
||||
// Load existing HTML — if it contains rich HTML (inline styles, divs), start in source mode
|
||||
<?php if ($isEdit && isset($em['header_html']) && $em['header_html'] !== null && $em['header_html'] !== ''): ?>
|
||||
rawHtml.header = <?= json_encode((string) $em['header_html'], JSON_UNESCAPED_UNICODE) ?>;
|
||||
if (isRichHtml(rawHtml.header)) {
|
||||
activateSourceMode('header');
|
||||
} else {
|
||||
headerEditor.root.innerHTML = rawHtml.header;
|
||||
}
|
||||
<?php endif; ?>
|
||||
<?php if ($isEdit && isset($em['footer_html']) && $em['footer_html'] !== null && $em['footer_html'] !== ''): ?>
|
||||
rawHtml.footer = <?= json_encode((string) $em['footer_html'], JSON_UNESCAPED_UNICODE) ?>;
|
||||
if (isRichHtml(rawHtml.footer)) {
|
||||
activateSourceMode('footer');
|
||||
} else {
|
||||
footerEditor.root.innerHTML = rawHtml.footer;
|
||||
}
|
||||
<?php endif; ?>
|
||||
|
||||
document.querySelectorAll('.js-toggle-html').forEach(function(btn) {
|
||||
btn.addEventListener('click', function() {
|
||||
var key = this.getAttribute('data-editor');
|
||||
if (!sourceMode[key]) {
|
||||
var quill = editors[key];
|
||||
var html = quill.root.innerHTML === '<p><br></p>' ? '' : quill.root.innerHTML;
|
||||
rawHtml[key] = rawHtml[key] && html === '' ? rawHtml[key] : html;
|
||||
activateSourceMode(key);
|
||||
} else {
|
||||
activateQuillMode(key);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// --- Preview ---
|
||||
var previewModal = document.getElementById('js-html-preview-modal');
|
||||
var previewIframe = document.getElementById('js-preview-iframe');
|
||||
var previewTitle = document.getElementById('js-preview-title');
|
||||
|
||||
function getEditorHtml(key) {
|
||||
if (sourceMode[key]) {
|
||||
return document.getElementById('js-' + key + '-source').value.trim();
|
||||
}
|
||||
var html = editors[key].root.innerHTML;
|
||||
return html === '<p><br></p>' ? '' : html;
|
||||
}
|
||||
|
||||
document.querySelectorAll('.js-preview-html').forEach(function(btn) {
|
||||
btn.addEventListener('click', function() {
|
||||
var key = this.getAttribute('data-editor');
|
||||
var label = key === 'header' ? 'Naglowek (header)' : 'Stopka (footer)';
|
||||
var html = getEditorHtml(key);
|
||||
if (!html) {
|
||||
if (window.OrderProAlerts && window.OrderProAlerts.warning) {
|
||||
window.OrderProAlerts.warning('Podglad', 'Brak tresci do wyswietlenia.');
|
||||
}
|
||||
return;
|
||||
}
|
||||
previewTitle.textContent = 'Podglad: ' + label;
|
||||
previewModal.style.display = 'block';
|
||||
var doc = previewIframe.contentDocument || previewIframe.contentWindow.document;
|
||||
doc.open();
|
||||
doc.write('<!DOCTYPE html><html><head><meta charset="utf-8"><style>body{margin:0;padding:16px;font-family:Arial,Helvetica,sans-serif;font-size:14px;color:#000;}</style></head><body>' + html + '</body></html>');
|
||||
doc.close();
|
||||
previewIframe.style.height = '0';
|
||||
setTimeout(function() {
|
||||
var h = doc.body.scrollHeight + 40;
|
||||
previewIframe.style.height = Math.min(Math.max(h, 150), 500) + 'px';
|
||||
}, 50);
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById('js-preview-close').addEventListener('click', function() {
|
||||
previewModal.style.display = 'none';
|
||||
});
|
||||
previewModal.addEventListener('click', function(e) {
|
||||
if (e.target === previewModal) previewModal.style.display = 'none';
|
||||
});
|
||||
|
||||
var mailboxForm = document.getElementById('js-mailbox-form');
|
||||
mailboxForm.addEventListener('submit', function() {
|
||||
var headerVal, footerVal;
|
||||
if (sourceMode.header) {
|
||||
headerVal = document.getElementById('js-header-source').value.trim();
|
||||
} else {
|
||||
headerVal = headerEditor.root.innerHTML === '<p><br></p>' ? '' : headerEditor.root.innerHTML;
|
||||
}
|
||||
if (sourceMode.footer) {
|
||||
footerVal = document.getElementById('js-footer-source').value.trim();
|
||||
} else {
|
||||
footerVal = footerEditor.root.innerHTML === '<p><br></p>' ? '' : footerEditor.root.innerHTML;
|
||||
}
|
||||
document.getElementById('js-header-html').value = headerVal;
|
||||
document.getElementById('js-footer-html').value = footerVal;
|
||||
});
|
||||
|
||||
// --- Delete confirm ---
|
||||
document.querySelectorAll('.js-delete-btn').forEach(function(btn) {
|
||||
btn.addEventListener('click', function() {
|
||||
var form = this.closest('form');
|
||||
|
||||
Reference in New Issue
Block a user