130 lines
7.9 KiB
JavaScript
130 lines
7.9 KiB
JavaScript
/* /assets/js/bridge/blocks-custom.js (FINAL & LOG-KONTROLLIERT) */
|
||
(function () {
|
||
|
||
const PluginName = 'blocks-custom';
|
||
const B = window.BridgeParts || (window.BridgeParts = {});
|
||
|
||
// ----------------------------------------------------------------------
|
||
// 🎯 NEU: LOKALE LOG-KONFIGURATION UND WRAPPER
|
||
// ----------------------------------------------------------------------
|
||
// Setzen Sie dies auf 'false' in der config.js oder hier, um alle Logs NUR für dieses Plugin zu deaktivieren.
|
||
if (B.LOG_CONFIG && B.LOG_CONFIG.PLUGINS) {
|
||
B.LOG_CONFIG.PLUGINS[PluginName] = false; // <-- HIER IST IHR SCHALTER
|
||
}
|
||
|
||
// NEUER LOKALER WRAPPER, der die zentrale B.log Funktion verwendet:
|
||
const log = (type, message, color = '#FFD700', logType = 'info', force = false) => {
|
||
if (typeof B.log === 'function') {
|
||
B.log(PluginName, `[${type}] ${message}`, color, logType, force);
|
||
} else if (logType === 'error') {
|
||
// Fallback für kritische Fehler, wenn B.log fehlt
|
||
console.error(`%c[${PluginName} - ${type}] %c${message}`, `color:red; font-weight:bold;`, 'color:inherit;');
|
||
}
|
||
};
|
||
// ----------------------------------------------------------------------
|
||
|
||
log('FILE CHECK', 'Datei-IIFE startet.'); // NEU: Kontrollierbarer Start-Log
|
||
|
||
if (window.__CUSTOM_BLOCKS_LOADED) return;
|
||
window.__CUSTOM_BLOCKS_LOADED = true;
|
||
|
||
const TARGET_CAT_ID = 'bausteine';
|
||
const ALL_CUSTOM_BLOCK_IDS = [];
|
||
|
||
function addOnce(bm, id, def, category = TARGET_CAT_ID) {
|
||
// Hinzufügen des Blocks und Sicherstellen der Kategorie-Zuweisung
|
||
try {
|
||
bm.add(id, { ...def, category });
|
||
ALL_CUSTOM_BLOCK_IDS.push(id);
|
||
log('BLOCK ADD', `Block '${id}' erfolgreich hinzugefügt.`, '#B8860B');
|
||
} catch (e) {
|
||
log('BLOCK ERROR', `Fehler beim Hinzufügen von Block '${id}': ${e.message}`, 'red', 'error');
|
||
}
|
||
}
|
||
|
||
const css = o => Object.entries(o).map(([k,v]) => `${k}:${v}`).join(';');
|
||
|
||
function register(editor) {
|
||
log('EXECUTION', `Starte Block-Registrierung für ${TARGET_CAT_ID}.`, '#DAA520');
|
||
|
||
const bm = editor.BlockManager;
|
||
|
||
// TEXT
|
||
addOnce(bm, 'cust-text', { id:'cust-text', label:'📝 Text',
|
||
content:`<div style="${css({'font-family':'Arial,sans-serif','font-size':'14px','line-height':'1.5',color:'#0f172a',margin:'0 0 12px'})}">
|
||
<p style="${css({margin:'0 0 12px'})}">Dies ist ein Absatz. Doppelklick zum Bearbeiten.</p></div>` });
|
||
|
||
// IMAGE
|
||
addOnce(bm, 'cust-image', { id:'cust-image', label:'🖼️ Bild',
|
||
content:`<div style="${css({'text-align':'center',margin:'0 0 16px'})}">
|
||
<img src="https://placehold.co/600x300" alt="Bild" style="${css({width:'100%',height:'auto','max-width':'600px',border:'0',display:'inline-block'})}"></div>` });
|
||
|
||
// BUTTON
|
||
addOnce(bm, 'cust-button', { id:'cust-button', label:'🔘 Button',
|
||
content:`<div style="${css({'text-align':'center',margin:'0 0 16px'})}">
|
||
<a href="#" style="${css({display:'inline-block','background-color':'#0ea5e9',color:'#fff','text-decoration':'none',padding:'10px 18px','border-radius':'6px','font-family':'Arial,sans-serif','font-size':'14px'})}">Call To Action</a></div>` });
|
||
|
||
// DIVIDER
|
||
addOnce(bm, 'cust-divider',{ id:'cust-divider',label:'⎯ Divider',
|
||
content:`<hr style="${css({border:'0',height:'1px','background-color':'#e2e8f0',margin:'16px 0'})}">` });
|
||
|
||
// SPACER
|
||
addOnce(bm, 'cust-spacer', { id:'cust-spacer', label:'↕ Spacer',
|
||
content:`<div style="${css({height:'24px'})}"></div>` });
|
||
|
||
// 2 COL
|
||
addOnce(bm, 'cust-2col', { id:'cust-2col', label:'🧩 2 Spalten',
|
||
content:`<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="${css({'font-family':'Arial,sans-serif','border-collapse':'collapse','margin-bottom':'16px'})}">
|
||
<tr><td width="50%" valign="top" style="${css({padding:'0 8px 0 0'})}">
|
||
<div style="${css({'font-size':'14px','line-height':'1.5',color:'#0f172a'})}"><p style="${css({margin:'0 0 12px'})}">Linke Spalte – Inhalt hier.</p></div>
|
||
</td><td width="50%" valign="top" style="${css({padding:'0 0 0 8px'})}">
|
||
<div style="${css({'font-size':'14px','line-height':'1.5',color:'#0f172a'})}"><p style="${css({margin:'0 0 12px'})}">Rechte Spalte – Inhalt hier.</p></div>
|
||
</td></tr></table>` });
|
||
|
||
// MEDIA LEFT
|
||
addOnce(bm, 'cust-media-left', { id:'cust-media-left', label:'🖼️◀ Text',
|
||
content:`<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="${css({'font-family':'Arial,sans-serif','border-collapse':'collapse','margin-bottom':'16px'})}">
|
||
<tr><td width="40%" valign="top" style="${css({padding:'0 8px 0 0'})}">
|
||
<img src="https://placehold.co/400x260" alt="Bild" style="${css({width:'100%',height:'auto',border:'0',display:'block'})}">
|
||
</td><td width="60%" valign="top" style="${css({padding:'0 0 0 8px'})}">
|
||
<h3 style="${css({margin:'0 0 8px','font-size':'18px',color:'#0f172a'})}">Überschrift</h3>
|
||
<p style="${css({margin:'0 0 12px','font-size':'14px',color:'#0f172a','line-height':'1.5'})}">Beschreibungstext …</p>
|
||
<a href="#" style="${css({display:'inline-block','background-color':'#0ea5e9',color:'#fff','text-decoration':'none',padding:'8px 14px','border-radius':'6px','font-size':'14px'})}">Mehr erfahren</a>
|
||
</td></tr></table>` });
|
||
|
||
// HERO
|
||
addOnce(bm, 'cust-hero', { id:'cust-hero', label:'🌄 Hero',
|
||
content:`<div style="${css({'text-align':'center',margin:'0 0 16px',padding:'12px','background-color':'#eef2ff',color:'#1e3a8a','border':'1px solid #c7d2fe','border-radius':'8px'})}">
|
||
<img src="https://placehold.co/640x240" alt="Hero" style="${css({width:'100%',height:'auto','max-width':'640px',border:'0',display:'inline-block','border-radius':'6px'})}">
|
||
<h2 style="${css({'font-family':'Arial,sans-serif',margin:'12px 0 8px','font-size':'22px'})}">Titel des Newsletters</h2>
|
||
<p style="${css({'font-size':'14px',margin:'0 0 12px'})}">Kurzer Untertitel oder Einleitung.</p>
|
||
</div>` });
|
||
|
||
// FOOTER
|
||
addOnce(bm, 'cust-footer', { id:'cust-footer', label:'⚓ Footer',
|
||
content:`<div style="${css({'font-family':'Arial,sans-serif','font-size':'12px',color:'#475569','line-height':'1.5','border-top':'1px solid #e2e8f0',padding:'12px 0','text-align':'center'})}">
|
||
<p style="${css({margin:'0 0 6px'})}"><strong>Dein Unternehmen GmbH</strong> • Musterstraße 1 • 12345 Berlin</p>
|
||
<p style="${css({margin:'0'})}"><a href="#" style="${css({color:'#0ea5e9','text-decoration':'none'})}">Abmelden</a> ·
|
||
<a href="#" style="${css({color:'#0ea5e9','text-decoration':'none'})}">Impressum</a> ·
|
||
<a href="#" style="${css({color:'#0ea5e9','text-decoration':'none'})}">Datenschutz</a></p>
|
||
</div>` });
|
||
|
||
log('SUCCESS', `Registrierung abgeschlossen. ${ALL_CUSTOM_BLOCK_IDS.length} Blöcke erstellt.`, '#008000', 'info', true);
|
||
}
|
||
|
||
// 🛑 KRITISCHE EXPORT-KORREKTUR: Exportiere 'register', um den Fehler in bridge-core.js zu beheben
|
||
window.BridgeBlocksCustom = {
|
||
IDS: ALL_CUSTOM_BLOCK_IDS,
|
||
register: register // <--- NEU: Exportiert die Register-Funktion
|
||
};
|
||
|
||
// Registriere das Modul als GrapesJS Plugin
|
||
if (B && B.registerGrapesJSPlugin && typeof register === 'function') {
|
||
B.registerGrapesJSPlugin('bridge-blocks-custom', register);
|
||
log('PLUGIN REGISTER', `'bridge-blocks-custom' erfolgreich zur Bridge Plugin Registry hinzugefügt.`, '#008000');
|
||
} else {
|
||
log('CRITICAL ERROR', `BridgeParts oder registerGrapesJSPlugin fehlt! Plugin-Registrierung gescheitert.`, 'red', 'error');
|
||
}
|
||
|
||
})();
|