Skip to content

Commit

Permalink
optimized js code
Browse files Browse the repository at this point in the history
  • Loading branch information
@erikpersson0884
erikpersson0884 committed Sep 8, 2024
1 parent 3467598 commit 8aa8948
Show file tree
Hide file tree
Showing 3 changed files with 97 additions and 129 deletions.
2 changes: 1 addition & 1 deletion css/screen.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -188,7 +188,7 @@
margin: 0;
}

.pinColor {
.pinColorInput {
border: none !important;
outline: none;
z-index: -100;
Expand Down
6 changes: 3 additions & 3 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,11 +72,11 @@ <h2>Options</h2>
</div>

<div id="pinColorPickerOption" class="pinColorPickerOption option disabled">
<label for="pinColor">Background color: </label>
<label for="pinColorInput">Background color: </label>
<p id="pinColorText" class="pinColorText">#000000</p>

</div>
<input id="pinColor" class="pinColor noShow" type="color" value="#000000"/>

<input id="pinColorInput" class="pinColorInput noShow" type="color" value="#000000"/>


<button id="generateTemplateButton" class="noPrint">Generate Template</button>
Expand Down
218 changes: 93 additions & 125 deletions js/script.js
View file
Original file line number Diff line number Diff line change
@@ -1,163 +1,143 @@

const generateTemplateButton = document.getElementById("generateTemplateButton")
const selectImageInput = document.getElementById('selectImageInput');
// mainContent
// Preview Image Side
const imageNotSquareWarningDialog = document.getElementById('imageNotSquareWarning');
const previewImage = document.getElementById('previewImage');
const selectImageButton = document.getElementById('selectImageButton');
const fileName = document.getElementById('fileName');
const selectImageInput = document.getElementById('selectImageInput');

/// Options Side
const createPaddingCheckbox = document.getElementById('createPaddingCheckbox');
const IncludePinBackgroundCheckbox = document.getElementById('pinBackground');
const pinColorPickerOption = document.getElementById('pinColorPickerOption');
const pinColorText = document.getElementById('pinColorText');
const pinColorInput = document.getElementById('pinColorInput');

const generateTemplateButton = document.getElementById("generateTemplateButton")

// image Grid
const imageContainer = document.getElementById('imageContainer');
const previewImage = document.getElementById('previewImage');
const imageNotSquareWarningDialog = document.getElementById('imageNotSquareWarning');
const selectImageButton = document.getElementById('selectImageButton');
const fileName = document.getElementById('fileName');
const createPaddingCheckbox = document.getElementById('createPaddingCheckbox');
const IncludePinBackgroundCheckbox = document.getElementById('pinBackground');
const pinColorPickerOption = document.getElementById('pinColorPickerOption');


const pinColorText = document.getElementById('pinColorText');
const pinColor = document.getElementById('pinColor');

const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
// Set default values

if (localStorage.getItem("includePinPadding")) {
createPaddingCheckbox.checked = localStorage.getItem("includePinPadding")
}
createPaddingCheckbox.addEventListener('change', () => {
localStorage.setItem("includePinPadding", createPaddingCheckbox.checked);
});

if (localStorage.getItem("pinBackground")) {
setPrintBackgroundColor(localStorage.getItem("pinBackground"));
}


if (localStorage.getItem("includePinBackground") && localStorage.getItem("includePinBackground") === "true") {
IncludePinBackgroundCheckbox.checked = (localStorage.getItem("includePinBackground"));
pinColorPickerOption.classList.remove('disabled');
}

// Add event listeners

function createImageGrid() {
imageContainer.innerHTML = "";
previewImage.addEventListener("click", function () {
selectImageInput.click();
});

if (isImageUploaded()) {
const imageUrl = URL.createObjectURL(selectImageInput.files[0]);

// Create the grid of images
for (let row = 0; row < 6; row++) {
const imgRow = document.createElement("div");
imgRow.classList.add("imageRow");

for (let col = 0; col < 4; col++) {
const imgElement = document.createElement('img');
imgElement.src = imageUrl;
imgElement.alt = 'Duplicated Image';
imgElement.classList = ['pinImage'];

if (createPaddingCheckbox.checked) {
imgElement.classList.add('pinImageWithPadding');
}
if (IncludePinBackgroundCheckbox.checked) {
imgElement.classList.add('pinImageWithBackground');
}
imgRow.appendChild(imgElement);
}
imageContainer.appendChild(imgRow);
};
selectImageButton.addEventListener("click", function () {
selectImageInput.click();
});

};
};
selectImageInput.addEventListener("change", uploadedImageChanged);

function uploadedImageChanged() {
changeFileName();
setImagePreview();

setTimeout(warnImageIsNotSquare, 100);
};
createPaddingCheckbox.addEventListener('change', () => {
localStorage.setItem("includePinPadding", createPaddingCheckbox.checked);
});

function changeFileName() {
const fileName = selectImageInput.files[0].name;
document.getElementById('fileName').innerHTML = fileName;
};
IncludePinBackgroundCheckbox.addEventListener('change', function(){
setIncludePinBackground(IncludePinBackgroundCheckbox.checked);
});

function warnImageIsNotSquare() {
if (imageIsSquare()) {
disableWarning();
} else{
showWarning("Image is not square");
}
};
pinColorText.addEventListener('click', () =>{
pinColorInput.click();
});

pinColorInput.addEventListener('input', () =>{
setPrintBackgroundColor(pinColorInput.value);
});

generateTemplateButton.addEventListener("click", function(){
if (isImageUploaded()) window.print();
else alert("Please upload an image first.");
});

// Unspecific functions

function showWarning(message){
imageNotSquareWarningDialog.querySelector('p').innerHTML = message;
imageNotSquareWarningDialog.style.top = "0";

}

function disableWarning() {
imageNotSquareWarningDialog.style.top = "-3rem";
}


function imageIsSquare() {
const image = previewImage;
// Funcitons

if (image.naturalWidth === image.naturalHeight) {
return true;
}
return false;
}

function setImagePreview() {
if (selectImageInput.files.length > 0) {
const imageUrl = URL.createObjectURL(selectImageInput.files[0]);
previewImage.src = imageUrl

createImageGrid(); // has to be here. if placed before print, the grid will not load in time for print
}
}
function createImageGrid() {
imageContainer.innerHTML = "";

function setPrintBackgroundColor(color) {
document.body.style.setProperty('--printBackgroundColor', color);
localStorage.setItem("pinBackground", color);
pinColorText.innerHTML = color;
}
if (isImageUploaded()) throw new Error("No image uploaded");

function isImageUploaded(){
if (selectImageInput.files.length > 0) {
return true;
}
return false;
}
const imageUrl = URL.createObjectURL(selectImageInput.files[0]);
for (let row = 0; row < 6; row++) {
const imgRow = document.createElement("div");
imgRow.classList.add("imageRow");

selectImageButton.addEventListener("click", function () {
selectImageInput.click();
});
for (let col = 0; col < 4; col++) {
const imgElement = `
<img src="${imageUrl}"
alt="Duplicated Image"
class = "pinImage ${createPaddingCheckbox.checked ? 'pinImageWithPadding' : ''} ${IncludePinBackgroundCheckbox.checked ? 'pinImageWithBackground' : ''}"
/>`;

previewImage.addEventListener("click", function () {
selectImageInput.click();
});
imgRow.innerHTML += imgElement;

}
imageContainer.appendChild(imgRow);
};
};

selectImageInput.addEventListener("change", uploadedImageChanged);
function uploadedImageChanged() {
changeFileName();
previewImage.src = URL.createObjectURL(selectImageInput.files[0])
createImageGrid(); // has to be here. if placed before print, the grid will not load in time for print

setTimeout(warnImageIsNotSquare, 100);
};

generateTemplateButton.addEventListener("click", function(){
if (isImageUploaded()){
window.print();
} else {
alert("Please upload an image first.");}
});


function isImageUploaded(){
if (selectImageInput.files.length > 0)return true;
return false;
}

function warnImageIsNotSquare() {
if (previewImage.naturalWidth === previewImage.naturalHeight) { // checks if image is square
disableWarning();
} else{
showWarning("Image is not square");
}
};

function changeFileName() {
const fileName = selectImageInput.files[0].name;
fileName.innerHTML = fileName;
};

IncludePinBackgroundCheckbox.addEventListener('change', function(){
setIncludePinBackground(IncludePinBackgroundCheckbox.checked);
});

function setIncludePinBackground(input){
if (input){
pinColorPickerOption.classList.remove('disabled');
previewImage.classList.add('pinImageWithBackground');

localStorage.setItem("includePinBackground", true);
} else {
pinColorPickerOption.classList.add('disabled');
Expand All @@ -166,20 +146,8 @@ function setIncludePinBackground(input){
}
}

pinColorText.addEventListener('click', () =>{
pinColor.click();
});

pinColor.addEventListener('input', () =>{
setPrintBackgroundColor(pinColor.value);
});



createPaddingCheckbox.addEventListener('change', function(){
if (createPaddingCheckbox.checked){
document.body.classList.add('padding');
} else {
document.body.classList.remove('padding');
}
});
function setPrintBackgroundColor(color) {
document.body.style.setProperty('--printBackgroundColor', color);
localStorage.setItem("pinBackground", color);
pinColorText.innerHTML = color;
}

0 comments on commit 8aa8948

Please sign in to comment.