65 lines
2.2 KiB
JavaScript
65 lines
2.2 KiB
JavaScript
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const componentList = document.getElementById('component-list');
|
|
const canvas = document.getElementById('canvas');
|
|
const initialCanvasMessage = canvas.querySelector('div');
|
|
|
|
let componentCounter = 0;
|
|
|
|
function clearInitialMessage() {
|
|
if (canvas.contains(initialCanvasMessage)) {
|
|
canvas.innerHTML = '';
|
|
}
|
|
}
|
|
|
|
function addComponent(componentName) {
|
|
fetch(`components/${componentName}.php`)
|
|
.then(response => response.text())
|
|
.then(html => {
|
|
clearInitialMessage();
|
|
|
|
componentCounter++;
|
|
const componentId = `component-${componentCounter}`;
|
|
|
|
const wrapper = document.createElement('div');
|
|
wrapper.classList.add('component-wrapper');
|
|
wrapper.id = componentId;
|
|
wrapper.innerHTML = `
|
|
<div class="component-controls">
|
|
<button class="btn btn-sm btn-outline-secondary move-up">↑ Move Up</button>
|
|
<button class="btn btn-sm btn-outline-danger delete-component">Delete</button>
|
|
</div>
|
|
<div class="component-content">
|
|
${html}
|
|
</div>
|
|
`;
|
|
canvas.appendChild(wrapper);
|
|
});
|
|
}
|
|
|
|
componentList.addEventListener('click', function (e) {
|
|
const navItem = e.target.closest('.nav-item');
|
|
if (navItem) {
|
|
e.preventDefault();
|
|
const componentName = navItem.dataset.component;
|
|
addComponent(componentName);
|
|
}
|
|
});
|
|
|
|
canvas.addEventListener('click', function (e) {
|
|
if (e.target.classList.contains('delete-component')) {
|
|
const wrapper = e.target.closest('.component-wrapper');
|
|
if (wrapper) {
|
|
wrapper.remove();
|
|
}
|
|
}
|
|
|
|
if (e.target.classList.contains('move-up')) {
|
|
const wrapper = e.target.closest('.component-wrapper');
|
|
if (wrapper && wrapper.previousElementSibling) {
|
|
wrapper.parentNode.insertBefore(wrapper, wrapper.previousElementSibling);
|
|
}
|
|
}
|
|
});
|
|
});
|