projects/emailtemplate.it
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Umbau custom blocks

Browse Source
This commit is contained in:
Lars Gebhardt-Kusche
2026-02-07 23:16:48 +01:00
parent c6e8e37a9c
commit 764d427b1c
12 changed files with 256 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
public/assets/js/bridge/blocks-custom/elements/button.js Normal file
View File

@@ -0,0 +1,10 @@
(function(){
window.BridgeBlocksCustomElements = window.BridgeBlocksCustomElements || [];
window.BridgeBlocksCustomElements.push(function(ctx){
const { bm, addOnce, css } = ctx;
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>`
});
});
})();

9
public/assets/js/bridge/blocks-custom/elements/divider.js Normal file
View File

@@ -0,0 +1,9 @@
(function(){
window.BridgeBlocksCustomElements = window.BridgeBlocksCustomElements || [];
window.BridgeBlocksCustomElements.push(function(ctx){
const { bm, addOnce, css } = ctx;
addOnce(bm, 'cust-divider',{ id:'cust-divider',label:'⎯ Divider',
content:`<hr style="${css({border:'0',height:'1px','background-color':'#e2e8f0',margin:'16px 0'})}">`
});
});
})();

14
public/assets/js/bridge/blocks-custom/elements/footer.js Normal file
View File

@@ -0,0 +1,14 @@
(function(){
window.BridgeBlocksCustomElements = window.BridgeBlocksCustomElements || [];
window.BridgeBlocksCustomElements.push(function(ctx){
const { bm, addOnce, css } = ctx;
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>`
});
});
})();

13
public/assets/js/bridge/blocks-custom/elements/hero.js Normal file
View File

@@ -0,0 +1,13 @@
(function(){
window.BridgeBlocksCustomElements = window.BridgeBlocksCustomElements || [];
window.BridgeBlocksCustomElements.push(function(ctx){
const { bm, addOnce, css } = ctx;
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>`
});
});
})();

32
public/assets/js/bridge/blocks-custom/elements/image-text.js Normal file
View File

@@ -0,0 +1,32 @@
(function(){
window.BridgeBlocksCustomElements = window.BridgeBlocksCustomElements || [];
window.BridgeBlocksCustomElements.push(function(ctx){
const { bm, addOnce, css } = ctx;
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'})}">
<p style="${css({margin:'0','font-size':'14px',color:'#0f172a','line-height':'1.5'})}">Text …</p>
</td>
</tr>`
}
});
});
})();

10
public/assets/js/bridge/blocks-custom/elements/image.js Normal file
View File

@@ -0,0 +1,10 @@
(function(){
window.BridgeBlocksCustomElements = window.BridgeBlocksCustomElements || [];
window.BridgeBlocksCustomElements.push(function(ctx){
const { bm, addOnce, css } = ctx;
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>`
});
});
})();

9
public/assets/js/bridge/blocks-custom/elements/spacer.js Normal file
View File

@@ -0,0 +1,9 @@
(function(){
window.BridgeBlocksCustomElements = window.BridgeBlocksCustomElements || [];
window.BridgeBlocksCustomElements.push(function(ctx){
const { bm, addOnce, css } = ctx;
addOnce(bm, 'cust-spacer', { id:'cust-spacer', label:'↕ Spacer',
content:`<div style="${css({height:'24px'})}"></div>`
});
});
})();

57
public/assets/js/bridge/blocks-custom/elements/table-2xn.js Normal file
View File

@@ -0,0 +1,57 @@
(function(){
window.BridgeBlocksCustomElements = window.BridgeBlocksCustomElements || [];
window.BridgeBlocksCustomElements.push(function(ctx){
const { bm, addOnce } = ctx;
const hasBridgeTable = !!(ctx.editor && ctx.editor.DomComponents && ctx.editor.DomComponents.getType && ctx.editor.DomComponents.getType('bridge-table'));
const tableType = hasBridgeTable ? 'bridge-table' : 'default';
addOnce(bm, 'cust-table', { id:'cust-table', label:'🧩 Tabelle (2xN)',
content:{
type: tableType,
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: [
{
tagName: 'tbody',
components: [
{
tagName: 'tr',
components: [
{ tagName: 'th', content: 'Spalte A', style: {'text-align':'left','padding':'8px','border':'1px solid #e2e8f0','background-color':'#f8fafc','font-size':'13px'} },
{ tagName: 'th', content: 'Spalte B', style: {'text-align':'left','padding':'8px','border':'1px solid #e2e8f0','background-color':'#f8fafc','font-size':'13px'} },
],
},
{
tagName: 'tr',
components: [
{ tagName: 'td', content: 'Zeile 1', style: {'padding':'8px','border':'1px solid #e2e8f0','font-size':'13px'} },
{ tagName: 'td', content: '...', style: {'padding':'8px','border':'1px solid #e2e8f0','font-size':'13px'} },
],
},
{
tagName: 'tr',
components: [
{ tagName: 'td', content: 'Zeile 2', style: {'padding':'8px','border':'1px solid #e2e8f0','font-size':'13px'} },
{ tagName: 'td', content: '...', style: {'padding':'8px','border':'1px solid #e2e8f0','font-size':'13px'} },
],
},
],
},
]
}
});
});
})();

20
public/assets/js/bridge/blocks-custom/elements/text.js Normal file
View File

@@ -0,0 +1,20 @@
(function(){
window.BridgeBlocksCustomElements = window.BridgeBlocksCustomElements || [];
window.BridgeBlocksCustomElements.push(function(ctx){
const { bm, addOnce } = ctx;
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'
}
}
});
});
})();