bluesaxman/librePECS
1
0
Fork 0
mirror of https://forge.murkfall.net/bluesaxman/librePECS.git synced 2026-03-13 02:04:20 -06:00
Code Issues Packages Projects Releases Wiki Activity

Added ability to add new pecs

Browse Source
This commit is contained in:
bluesaxman
2025-09-16 13:32:54 -06:00
parent b14c6406d5
commit d34793c7dc
2 changed files with 89 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
main.js
View File

@@ -95,7 +95,8 @@ function setPec(pecTemplate=null, targetIndex=null) {
targetPec.removeEventListener("click", invokeLibrary);
targetPec.innerHTML = "";
targetPec.classList.remove("empty");
targetPec.appendChild(pecTemplate.DOM);
var freshPec = new pec(pecTemplate.word, pecTemplate.image);
targetPec.appendChild(freshPec.DOM);
}
function repopBoards (current=0) {
@@ -163,13 +164,75 @@ function repopGrid (board=null) {
function useThisPec (e) {
var sourceID = ((e.currentTarget.getAttribute("id")).split("lPec"))[1];
app.gui.library.root.classList.remove("focused");
app.gui.library.body.childNodes.entries().forEach(p=>{
p[1].getAttribute("id") == "lPec"+sourceID ? p[1].style.display = "none" : null;
});
app.currentBoard.pecs[app.targetPecIndex] = app.library[sourceID];
app.currentBoard.pecs[app.targetPecIndex] = app.library.splice(sourceID,1)[0];
repopLibrary();
repopGrid(app.currentBoard);
}
function createNewPec () {
var name = app.gui.newpec_name.value;
var image = app.gui.newpec_image.files[0];
app.library.push(new pec(name, URL.createObjectURL(image)));
repopLibrary();
app.gui.newpec.root.classList.remove("focused");
}
function updatePreview () {
var name = app.gui.newpec_name.value;
var image = app.gui.newpec_image.files[0];
app.gui.newpec_preview.innerHTML = "";
app.gui.newpec_preview.removeEventListener("click", createNewPec);
app.gui.newpec_status.innerText = "Create your new pec by naming it and providing an image.";
var correct = 0;
if (["image/png","image/jpeg","image/svg"].includes(image?.type)) {
var imageBox = document.createElement("img");
imageBox.src = URL.createObjectURL(image);
imageBox.classList.add("pecImage");
app.gui.newpec_preview.appendChild(imageBox);
correct++;
}
if ("" != name) {
var nameBox = document.createElement("div");
nameBox.innerText = name;
nameBox.classList.add("pecName");
app.gui.newpec_preview.appendChild(nameBox);
correct++;
}
if (1 < correct) {
app.gui.newpec_status.innerText = "Click/Tap the preview to save.";
app.gui.newpec_preview.addEventListener("click", createNewPec);
}
}
function addNewPec (e) {
// clear out any previous values in form.
app.gui.newpec_form.reset();
updatePreview();
// make form visible
app.gui.newpec.root.classList.add("focused");
}
function repopLibrary () {
// clear library
app.gui.library.body.innerHTML = "";
// recreate items from app.library
app.library.forEach((p,i)=>{
var newPec = document.createElement("span");
newPec.classList.add("libSlot");
newPec.innerText = p.word;
newPec.id = "lPec"+i;
newPec.addEventListener("click", useThisPec);
app.gui.library.body.appendChild(newPec);
});
// add new pec button at end of list
var newPec = document.createElement("span");
newPec.classList.add("libSlot");
newPec.innerText = " + ";
newPec.id = "lPec"+(app.library.length + 1);
newPec.addEventListener("click", addNewPec);
app.gui.library.body.appendChild(newPec);
}
// Initialize gui
window.app = {};
@@ -196,6 +259,10 @@ app.gui.options = new auxillery_dialog("Options");
app.gui.options.body.classList.add("options_body");
app.gui.main.append(app.gui.options.root);
app.gui.optionsButton.addEventListener("click", ()=>{ app.gui.options.root.classList.add("focused") });
// New Pec popup
app.gui.newpec = new auxillery_dialog("Create New Pec");
app.gui.newpec.body.classList.add("newpec_body");
app.gui.main.append(app.gui.newpec.root);
// pre-populate grid with emptys
for (var x = 0; x < 16; x++) {
var name = "pec"+x;
@@ -216,15 +283,7 @@ repopGrid(app.currentBoard);
// Populate Library
import { library as library } from './library.js';
app.library = library;
// add more here
app.library.forEach((p,i)=>{
var newPec = document.createElement("span");
newPec.classList.add("libSlot");
newPec.innerText = p.word;
newPec.id = "lPec"+i;
newPec.addEventListener("click", useThisPec);
app.gui.library.body.appendChild(newPec);
});
repopLibrary();
// Populate Options
app.options = {};
@@ -254,4 +313,15 @@ app.gui.options_feedbackTimeout.innerHTML = '<label for="flood-timeout">Audio Fl
app.gui.options_about = document.createElement("div");
app.gui.options.body.appendChild(app.gui.options_about);
app.gui.options_about.innerHTML = 'App licenced <a href="LICENSE.txt" target="_blank"><img src="images/ui/gplv3-or-later.svg" height="30px" /></a><label>-</label> Cards from <a href="https://assistivecards.com" target="_blank"><img src="images/ui/ac.svg" height="30px" alt="Assistive Cards" /></a>';
app.gui.options_about.innerHTML = 'App licenced <a href="LICENSE.txt" target="_blank"><img src="images/ui/gplv3-or-later.svg" height="30px" /></a><label>-</label> Cards from <a href="https://assistivecards.com" target="_blank"><img src="images/ui/ac.svg" height="30px" alt="Assistive Cards" /></a><label>-</label> Project Source <a href="https://labs.murkfall.net/bluesaxman/librePECS">labs.murkfall.net</a>';
app.gui.newpec.body.innerHTML = '<form id="new-pec-form"><label for="new-pec-name">Name</label><input id="new-pec-name" type="text" value="" /><br /><label for="new-pec-image">Picture</label><input id="new-pec-image" type="file" accept="image/png, image/jpeg, image/svg" value="" /><br /><div id="new-pec-preview"></div><br /><div id="new-pec-status">Create your new pec by naming it and providing an image.</div></form>';
app.gui.newpec_form = document.getElementById("new-pec-form");
app.gui.newpec_name = document.getElementById("new-pec-name");
app.gui.newpec_image = document.getElementById("new-pec-image");
app.gui.newpec_preview = document.getElementById("new-pec-preview");
app.gui.newpec_status = document.getElementById("new-pec-status");
app.gui.newpec_preview.classList.add("pecSlot");
app.gui.newpec_name.addEventListener("change", updatePreview);
app.gui.newpec_image.addEventListener("change", updatePreview);