71 lines
1.9 KiB
HTML
71 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Roster Builder</title>
|
|
<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet"/>
|
|
<style>body, html { height: 100%; margin: 0; } #gjs { height: 100vh; }</style>
|
|
</head>
|
|
<body>
|
|
<div class="panel__left" style="width: 200px; float: left;"></div>
|
|
<div id="gjs" style="margin-left: 200px;"></div>
|
|
<div id="gjs"></div>
|
|
<script src="https://unpkg.com/grapesjs"></script>
|
|
<script>
|
|
const editor = grapesjs.init({
|
|
container: '#gjs',
|
|
fromElement: false,
|
|
height: '100%',
|
|
width: 'auto',
|
|
storageManager: false,
|
|
panels: {
|
|
defaults: [
|
|
{
|
|
id: 'blocks',
|
|
el: '.panel__left',
|
|
},
|
|
{
|
|
id: 'commands',
|
|
buttons: [
|
|
{
|
|
id: 'save',
|
|
className: 'fa fa-save',
|
|
command: 'export-html',
|
|
attributes: { title: 'Export HTML' }
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
blockManager: {
|
|
appendTo: '.panel__left',
|
|
}
|
|
});
|
|
|
|
// === Add your dynamic role blocks here ===
|
|
const roles = ['Cleaner', 'Sound', 'Projection', 'Cameras', 'Leader'];
|
|
|
|
roles.forEach(role => {
|
|
editor.BlockManager.add(`block-${role}`, {
|
|
label: role,
|
|
content: `<p><strong>${role}:</strong> {{ ${role} }}</p>`,
|
|
category: 'Roster Roles',
|
|
});
|
|
});
|
|
|
|
// Add save command
|
|
editor.Commands.add('export-html', {
|
|
run(editor) {
|
|
const html = editor.getHtml();
|
|
const css = editor.getCss();
|
|
const blob = new Blob([`<style>${css}</style>${html}`], { type: 'text/html' });
|
|
const a = document.createElement('a');
|
|
a.href = URL.createObjectURL(blob);
|
|
a.download = 'roster_template.html';
|
|
a.click();
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|