184 lines
9.0 KiB
JavaScript
184 lines
9.0 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 2
|
|
addOnce(bm, 'cust-text', { id:'cust-text', label:'📝 Text',
|
|
content:{
|
|
type:'text',
|
|
tagName:'p',
|
|
content:'Dies ist ein Absatz. Doppelklick zum Bearbeiten.',
|
|
style:{
|
|
'font-family':'Arial,sans-serif',
|
|
'font-size':'14px',
|
|
'line-height':'1.5',
|
|
color:'#0f172a',
|
|
margin:'0 0 12px'
|
|
}
|
|
} });
|
|
|
|
// 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>` });
|
|
|
|
// TABLE
|
|
addOnce(bm, 'cust-table', { id:'cust-table', label:'🧩 Tabelle (2xN)',
|
|
content:{
|
|
type:'default',
|
|
tagName:'table',
|
|
attributes:{
|
|
role:'presentation',
|
|
width:'100%',
|
|
cellpadding:'0',
|
|
cellspacing:'0',
|
|
'data-bridge-table':'1',
|
|
'data-bridge-rows':'3',
|
|
'data-bridge-cols':'2'
|
|
},
|
|
style:{
|
|
'font-family':'Arial,sans-serif',
|
|
'border-collapse':'collapse',
|
|
'width':'100%',
|
|
'margin-bottom':'16px'
|
|
},
|
|
components:`
|
|
<tr>
|
|
<th style="${css({'text-align':'left','padding':'8px','border':'1px solid #e2e8f0','background-color':'#f8fafc','font-size':'13px'})}">Spalte A</th>
|
|
<th style="${css({'text-align':'left','padding':'8px','border':'1px solid #e2e8f0','background-color':'#f8fafc','font-size':'13px'})}">Spalte B</th>
|
|
</tr>
|
|
<tr>
|
|
<td style="${css({'padding':'8px','border':'1px solid #e2e8f0','font-size':'13px'})}">Zeile 1</td>
|
|
<td style="${css({'padding':'8px','border':'1px solid #e2e8f0','font-size':'13px'})}">...</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="${css({'padding':'8px','border':'1px solid #e2e8f0','font-size':'13px'})}">Zeile 2</td>
|
|
<td style="${css({'padding':'8px','border':'1px solid #e2e8f0','font-size':'13px'})}">...</td>
|
|
</tr>`
|
|
} });
|
|
|
|
// 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>` });
|
|
|
|
// MEDIA LEFT
|
|
addOnce(bm, 'cust-media-left', { id:'cust-media-left', label:'🖼️◀ Text',
|
|
content:{
|
|
type:'default',
|
|
tagName:'table',
|
|
attributes:{
|
|
role:'presentation',
|
|
width:'100%',
|
|
cellpadding:'0',
|
|
cellspacing:'0'
|
|
},
|
|
style:{
|
|
'font-family':'Arial,sans-serif',
|
|
'border-collapse':'collapse',
|
|
'margin-bottom':'16px'
|
|
},
|
|
components:`
|
|
<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>`
|
|
} });
|
|
|
|
// 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');
|
|
}
|
|
|
|
// 🛑 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');
|
|
}
|
|
|
|
})();
|