Skip to content

Commit

Permalink
Fix button click
Browse files Browse the repository at this point in the history
  • Loading branch information
@TheAndreiM
TheAndreiM committed Jan 3, 2025
1 parent 054e7f4 commit 10fbc58
Show file tree
Hide file tree
Showing 2 changed files with 89 additions and 86 deletions.
7 changes: 4 additions & 3 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,9 @@
<body>
<h1>JukaGUI Generator</h1>
<p>1. Move elements to screen and double click to rename.<br>
You can resize image with right click.<br/>
2. Once ready, click "Create JukaApp" which will download jukaconfig.json.<br>
&nbsp; &nbsp; &nbsp; a. You can resize image with right click.<br/>
&nbsp; &nbsp; &nbsp; b. You can change font sizes. <br/>
2. Once ready, click "Create and Download JukaConfig" which will download jukaconfig.json.<br>
3. Download JukaGUI-Trimui.zip template at <a href="https://github.com/jukaLang/JukaGUI/releases">JukaGUI releases</a>.<br>
4. Extract template and combine it with jukaconfig.json.<br>
5. Put the folder under Apps on SD card.<br>
Expand Down Expand Up @@ -105,7 +106,7 @@ <h1>JukaGUI Generator</h1>
</div>
<div class="canvas" id="canvas"></div>
</div>
<button class="create-button" onclick="createJukaApp()">Create JukaApp</button>
<button class="create-button" onclick="createJukaApp()">Create and Download JukaConfig</button>
<pre id="output"></pre>

<p class="contribute-banner">Need help or want to join the conversation? Join us on <a href="https://discord.gg/R9qgJjh5jG">Discord</a>! Want to contribute to the code? Visit our <a href="https://github.com/jukaLang/JukaGUI">GitHub</a>
Expand Down
168 changes: 85 additions & 83 deletions script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -234,7 +234,6 @@ canvas.addEventListener('drop', event => {
addElement(type, x, y);
});


function setupElementEvents(el) {
el.addEventListener('mousedown', event => {
if (event.button === 2) { // Right mouse button
Expand Down Expand Up @@ -300,7 +299,7 @@ function setupElementEvents(el) {
event.preventDefault(); // Prevent the context menu from appearing
});

el.addEventListener('dblclick', (event) => {
el.addEventListener('dblclick', event => {
event.stopPropagation(); // Prevent the click from bubbling up
const textSpan = el.querySelector('.text-content');
if (el.getAttribute('data-type') === 'button' || el.getAttribute('data-type') === 'label') {
Expand Down Expand Up @@ -334,86 +333,78 @@ function setupElementEvents(el) {
}
});

el.addEventListener('click', () => {
hideControls(); // Hide all controls first
el.addEventListener('click', () => {
hideControls(); // Hide all controls first

if (el.getAttribute('data-type') !== 'image') {
document.querySelector('.control-label[for="colorPicker"]').style.display = 'block';
colorPicker.value = el.getAttribute('data-color') || '#000000';
colorPicker.style.display = 'block';
colorPicker.oninput = function() {
el.style.color = colorPicker.value;
el.setAttribute('data-color', colorPicker.value);
};
if (el.getAttribute('data-type') !== 'image') {
document.querySelector('.control-label[for="colorPicker"]').style.display = 'block';
colorPicker.value = el.getAttribute('data-color') || '#000000';
colorPicker.style.display = 'block';
colorPicker.oninput = function() {
el.style.color = colorPicker.value;
el.setAttribute('data-color', colorPicker.value);
};

document.querySelector('.control-label[for="fontSizePicker"]').style.display = 'block';
fontSizePicker.value = el.getAttribute('data-font') || 'medium';
fontSizePicker.style.display = 'block';
fontSizePicker.onchange = function() {
el.setAttribute('data-font', fontSizePicker.value);
el.style.fontSize = getFontSize(fontSizePicker.value) + 'px';
};
document.querySelector('.control-label[for="fontSizePicker"]').style.display = 'block';
fontSizePicker.value = el.getAttribute('data-font') || 'medium';
fontSizePicker.style.display = 'block';
fontSizePicker.onchange = function() {
el.setAttribute('data-font', fontSizePicker.value);
el.style.fontSize = getFontSize(fontSizePicker.value) + 'px';
};

document.querySelector('.control-label[for="bgColorPicker"]').style.display = 'block';
bgColorPicker.value = el.getAttribute('data-bg-color') || '#ffffff';
bgColorPicker.style.display = 'block';
bgColorPicker.oninput = function() {
el.style.backgroundColor = bgColorPicker.value;
el.setAttribute('data-bg-color', bgColorPicker.value);
};
document.querySelector('.control-label[for="bgColorPicker"]').style.display = 'block';
bgColorPicker.value = el.getAttribute('data-bg-color') || '#ffffff';
bgColorPicker.style.display = 'block';
bgColorPicker.oninput = function() {
el.style.backgroundColor = bgColorPicker.value;
el.setAttribute('data-bg-color', bgColorPicker.value);
};

document.querySelector('.control-label[for="triggerSelector"]').style.display = 'block';
triggerSelector.value = el.getAttribute('data-trigger') || '';
triggerSelector.style.display = 'block';
triggerSelector.onchange = function() {
el.setAttribute('data-trigger', triggerSelector.value);
// Hide all trigger-related fields initially
sceneChangeSelector.style.display = 'none';
externalAppPath.style.display = 'none';
variableChangeSelector.style.display = 'none';
variableChangeValue.style.display = 'none';

if (triggerSelector.value === 'change_scene') {
sceneChangeSelector.style.display = 'block';
sceneChangeSelector.value = el.getAttribute('data-trigger-target') || '';
sceneChangeSelector.onchange = function() {
el.setAttribute('data-trigger-target', sceneChangeSelector.value);
};
} else if (triggerSelector.value === 'external_app') {
externalAppPath.style.display = 'block';
externalAppPath.value = el.getAttribute('data-trigger-target') || '';
externalAppPath.oninput = function() {
el.setAttribute('data-trigger-target', externalAppPath.value);
};
} else if (triggerSelector.value === 'set_variable') {
variableChangeSelector.style.display = 'block';
variableChangeValue.style.display = 'block';
variableChangeSelector.value = el.getAttribute('data-trigger-target') || '';
variableChangeValue.value = el.getAttribute('data-trigger-value') || '';
}
};

document.querySelector('.control-label[for="triggerSelector"]').style.display = 'block';
triggerSelector.value = el.getAttribute('data-trigger') || '';
triggerSelector.style.display = 'block';
triggerSelector.onchange = function() {
el.setAttribute('data-trigger', triggerSelector.value);
// Hide all trigger-related fields initially
sceneChangeSelector.style.display = 'none';
externalAppPath.style.display = 'none';
variableChangeSelector.style.display = 'none';
variableChangeValue.style.display = 'none';

if (triggerSelector.value === 'change_scene') {
// Set initial state based on the current trigger
if (el.getAttribute('data-trigger') === 'change_scene') {
sceneChangeSelector.style.display = 'block';
sceneChangeSelector.value = el.getAttribute('data-trigger-target') || '';
sceneChangeSelector.onchange = function() {
el.setAttribute('data-trigger-target', sceneChangeSelector.value);
};
} else if (triggerSelector.value === 'external_app') {
} else if (el.getAttribute('data-trigger') === 'external_app') {
externalAppPath.style.display = 'block';
externalAppPath.value = el.getAttribute('data-trigger-target') || '';
externalAppPath.oninput = function() {
el.setAttribute('data-trigger-target', externalAppPath.value);
};
} else if (triggerSelector.value === 'set_variable') {
} else if (el.getAttribute('data-trigger') === 'set_variable') {
variableChangeSelector.style.display = 'block';
variableChangeValue.style.display = 'block';
variableChangeSelector.value = el.getAttribute('data-trigger-target') || '';
variableChangeValue.value = el.getAttribute('data-trigger-value') || '';
variableChangeSelector.onchange = function() {
el.setAttribute('data-trigger-target', variableChangeSelector.value);
};
variableChangeValue.oninput = function() {
el.setAttribute('data-trigger-value', variableChangeValue.value);
};
}
};

// Set initial state based on the current trigger
if (el.getAttribute('data-trigger') === 'change_scene') {
sceneChangeSelector.style.display = 'block';
sceneChangeSelector.value = el.getAttribute('data-trigger-target') || '';
} else if (el.getAttribute('data-trigger') === 'external_app') {
externalAppPath.style.display = 'block';
externalAppPath.value = el.getAttribute('data-trigger-target') || '';
} else if (el.getAttribute('data-trigger') === 'set_variable') {
variableChangeSelector.style.display = 'block';
variableChangeValue.style.display = 'block';
variableChangeSelector.value = el.getAttribute('data-trigger-target') || '';
variableChangeValue.value = el.getAttribute('data-trigger-value') || '';
}


} else {
document.querySelector('.control-label[for="colorPicker"]').style.display = 'none';
colorPicker.style.display = 'none';
Expand All @@ -429,9 +420,24 @@ el.addEventListener('click', () => {
el.addEventListener('contextmenu', event => {
event.preventDefault(); // Prevent the context menu from appearing
});

const removeButton = el.querySelector('.remove-button');
if (removeButton) {
removeButton.addEventListener('click', (event) => {
event.stopPropagation();
const parent = el.parentNode;
parent.removeChild(el);
const sceneElements = scenes[currentScene];
const elementIndex = sceneElements.indexOf(el);
if (elementIndex > -1) {
sceneElements.splice(elementIndex, 1);
}
});
}
}



function addElement(type, x, y) {
const el = document.createElement('div');
el.classList.add('element');
Expand Down Expand Up @@ -465,22 +471,18 @@ function addElement(type, x, y) {
removeButton.classList.add('remove-button');
el.appendChild(removeButton);

removeButton.addEventListener('click', (event) => {
event.stopPropagation();
const parent = el.parentNode;
parent.removeChild(el);
const sceneElements = scenes[currentScene];
const elementIndex = sceneElements.indexOf(el);
if (elementIndex > -1) {
sceneElements.splice(elementIndex, 1);
}
});
// Attach event listeners immediately
setupElementEvents(el);

setupElementEvents(el); // Ensure events are set up

// Append element to canvas and update scenes
// Append element to canvas
canvas.appendChild(el);
updateScenes();

// Save to the current scene
if (!scenes[currentScene]) {
scenes[currentScene] = [];
}
scenes[currentScene].push(el.cloneNode(true));

return el;
}

Expand Down

0 comments on commit 10fbc58

Please sign in to comment.