Skip to content

Commit

Permalink
Refactor variable names to be more descriptive
Browse files Browse the repository at this point in the history
@AzimsTech
AzimsTech committed Dec 23, 2024
1 parent f4b14c4 commit 6447350
Showing 3 changed files with 101 additions and 101 deletions.
12 changes: 6 additions & 6 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -11,22 +11,22 @@
<body>
<header class="header">
<h2 class="heading">My Software List</h2>
<hr class="mid-heading">
<hr class="divider">
<h3 class="sub-heading">Install multiple softwares with one command</h3>
</header>
<main class="main">
<form class="package-form">
<div class="input-group">
<input class="commands-txt" type="text" readonly>
<button class="btn all-btn" type="reset">All</button>
<button class="btn copy-btn">Copy</button>
<button class="btn reset-btn" type="reset">Reset</button>
<input class="command-input" type="text" readonly>
<button class="btn select-all-button" type="reset">All</button>
<button class="btn copy-button">Copy</button>
<button class="btn reset-button" type="reset">Reset</button>
</div>
<div class="list">
<ul class="package-list"></ul>
</div>
</form>
<button class="btn btn--top"><a href="#top" style="color: white">⬆ Jump to Top</a></button>
<button class="btn top-button"><a href="#top" style="color: white">⬆ Jump to Top</a></button>
</main>
<footer class="footer">
<p>View Source: <a href="http://github.com/AzimsTech/MySoftwareList" target="_blank">AzimsTech/MySoftwareList</a></p>
154 changes: 77 additions & 77 deletions scripts/home.js
View file
Original file line number Diff line number Diff line change
@@ -1,34 +1,34 @@
/*
GLOBAL VARIABLES
-------------------*/
const packageList = document.querySelector(".package-list");
const commandsTxt = document.querySelector(".commands-txt");
const spanSuccess = document.querySelector('.sub-heading');
const resetBtn = document.querySelector('.reset-btn');
const copyBtn = document.querySelector(".copy-btn");
const allBtn = document.querySelector(".all-btn");
const form = document.querySelector(".package-form");
const yamlPath = "https://api.github.com/gists/f79a94082c09c3d68007d498a68a7f11";
const installCmd = `Set-ExecutionPolicy Bypass -Scope Process -Force;
const packageListElement = document.querySelector(".package-list");
const commandInputElement = document.querySelector(".command-input");
const statusMessageElement = document.querySelector('.sub-heading');
const resetButtonElement = document.querySelector('.reset-button');
const copyButtonElement = document.querySelector(".copy-button");
const selectAllButtonElement = document.querySelector(".select-all-button");
const packageFormElement = document.querySelector(".package-form");
const yamlFilePath = "https://api.github.com/gists/f79a94082c09c3d68007d498a68a7f11";
const chocolateyInstallCommand = `Set-ExecutionPolicy Bypass -Scope Process -Force;
[System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072;
iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1')); `;
const iconSrc = "images/packageimages/";
const iconSourcePath = "images/packageimages/";

let yamlData = null;

/*
EVENT LISTENERS
----------------------*/
document.addEventListener("DOMContentLoaded", () => {
fetchYaml(yamlPath).then(data => {
fetchYamlData(yamlFilePath).then(data => {
yamlData = data;
addListToHtml(packageList);
populatePackageList(packageListElement);
});

resetBtn.addEventListener('click', resetForm);
copyBtn.addEventListener("click", updateClipboard);
allBtn.addEventListener("click", selectAllPkg);
form.addEventListener('change', onPackageSelect);
resetButtonElement.addEventListener('click', resetForm);
copyButtonElement.addEventListener("click", copyToClipboard);
selectAllButtonElement.addEventListener("click", selectAllPackages);
packageFormElement.addEventListener('change', onPackageSelectionChange);
});

/*
@@ -37,102 +37,102 @@ document.addEventListener("DOMContentLoaded", () => {
// reset form & clear status message
function resetForm(e) {
e.preventDefault();
form.reset(); //reset form
spanSuccess.style.visibility = 'initial';
spanSuccess.innerText = "Generate chocolatey commands from the apps you've picked";
commandsTxt.value = null;
packageFormElement.reset(); //reset form
statusMessageElement.style.visibility = 'initial';
statusMessageElement.innerText = "Generate chocolatey commands from the apps you've picked";
commandInputElement.value = null;
}

// copy command from textbox to the clipboard
function updateClipboard(e) {
function copyToClipboard(e) {
e.preventDefault();

let checkboxItem = document.querySelector('input[name="package-item"]:checked');
let selectedPackage = document.querySelector('input[name="package-item"]:checked');

if (checkboxItem) {
commandsTxt.select();
if (selectedPackage) {
commandInputElement.select();
document.execCommand('copy');
spanSuccess.innerText = "Copied to the clipboard! ✅";
spanSuccess.style.visibility = 'initial';
statusMessageElement.innerText = "Copied to the clipboard! ✅";
statusMessageElement.style.visibility = 'initial';
} else {
spanSuccess.innerText = "Please select any packages! ❎";
spanSuccess.style.visibility = 'initial';
statusMessageElement.innerText = "Please select any packages! ❎";
statusMessageElement.style.visibility = 'initial';
}
}

// select all item checkboxes
function selectAllPkg(e) {
function selectAllPackages(e) {
e.preventDefault();

let chxbox = document.querySelectorAll("input[type=checkbox][name=package-item]");
chxbox.forEach(node => {
if (!node.checked) {
node.click();
let checkboxes = document.querySelectorAll("input[type=checkbox][name=package-item]");
checkboxes.forEach(checkbox => {
if (!checkbox.checked) {
checkbox.click();
}
});
}

// generate chocolatey install commands from checkbox input
function onPackageSelect(e) {
function onPackageSelectionChange(e) {
e.preventDefault();

let chxbox = document.querySelectorAll("input[type=checkbox][name=package-item]");
let checkedValue = Array.from(chxbox)
.filter(i => i.checked)
.map(i => i.value);
let checkboxes = document.querySelectorAll("input[type=checkbox][name=package-item]");
let selectedPackages = Array.from(checkboxes)
.filter(checkbox => checkbox.checked)
.map(checkbox => checkbox.value);

spanSuccess.innerText = "Press 'Copy' button when you ready.";
spanSuccess.style.visibility = 'initial';
statusMessageElement.innerText = "Press 'Copy' button when you are ready.";
statusMessageElement.style.visibility = 'initial';

if (chxbox[0].checked) {
commandsTxt.value = installCmd;
if (checkedValue.length > 1) {
checkedValue.shift();
commandsTxt.value = installCmd + `choco install -y ${checkedValue.join(" ")}`;
if (checkboxes[0].checked) {
commandInputElement.value = chocolateyInstallCommand;
if (selectedPackages.length > 1) {
selectedPackages.shift();
commandInputElement.value = chocolateyInstallCommand + `choco install -y ${selectedPackages.join(" ")}`;
}
} else {
commandsTxt.value = `choco install -y ${checkedValue.join(" ")}`;
commandInputElement.value = `choco install -y ${selectedPackages.join(" ")}`;
}
}

// load packages data from a YAML file
async function fetchYaml(yamlPath) {
let response = await fetch(yamlPath);
async function fetchYamlData(yamlFilePath) {
let response = await fetch(yamlFilePath);
let yamlText = await response.text();
let gistData = jsyaml.load(yamlText); // use jsyaml.load() instead of yaml.safeLoad()
let yamlContent = gistData.files["packages_list.yaml"].content;
return jsyaml.load(yamlContent);
}

// write a list from yamlData
function addListToHtml(ul) {
for (let i in yamlData) {
let label = document.createElement("label");
let input = document.createElement("input");
let span = document.createElement("span");
let img = document.createElement("img");
let li = document.createElement("li");

label.htmlFor = i;
span.className = "package-list__label-text";
label.className = "package-list__label";
label.title = yamlData[i].description;

input.type = "checkbox";
input.name = "package-item";
input.className = "label__checkbox";
input.value = i;
input.id = i;
img.src = iconSrc + yamlData[i].icoUrl;
img.className = "icoImg";
span.innerHTML = `<b>${yamlData[i].name}</b> - ${yamlData[i].description}`;

li.className = "package-list__item";

label.appendChild(input);
label.appendChild(img);
label.appendChild(span);
li.appendChild(label);
ul.appendChild(li);
function populatePackageList(ulElement) {
for (let packageName in yamlData) {
let labelElement = document.createElement("label");
let inputElement = document.createElement("input");
let spanElement = document.createElement("span");
let imgElement = document.createElement("img");
let listItemElement = document.createElement("li");

labelElement.htmlFor = packageName;
spanElement.className = "package-list-label-text";
labelElement.className = "package-list-label";
labelElement.title = yamlData[packageName].description;

inputElement.type = "checkbox";
inputElement.name = "package-item";
inputElement.className = "label-checkbox";
inputElement.value = packageName;
inputElement.id = packageName;
imgElement.src = iconSourcePath + yamlData[packageName].icoUrl;
imgElement.className = "icon-image";
spanElement.innerHTML = `<b>${yamlData[packageName].name}</b> - ${yamlData[packageName].description}`;

listItemElement.className = "package-list-item";

labelElement.appendChild(inputElement);
labelElement.appendChild(imgElement);
labelElement.appendChild(spanElement);
listItemElement.appendChild(labelElement);
ulElement.appendChild(listItemElement);
}
}
36 changes: 18 additions & 18 deletions styles/home.css
View file
Original file line number Diff line number Diff line change
@@ -39,7 +39,7 @@ header {
text-shadow: 1px 1px 3px #000;
}

.mid-heading {
.divider {
font-size: 85%;
max-width: 5%;
}
@@ -66,14 +66,14 @@ main {
width: 100%;
}

.commands-txt {
.command-input {
width: 100%;
}

/* Button Styles */
.copy-btn,
.reset-btn,
.all-btn {
.copy-button,
.reset-button,
.select-all-button {
background: #0e8a7e;
border: 2px solid #024a43;
border-radius: 2px;
@@ -85,18 +85,18 @@ main {
text-transform: uppercase;
}

.copy-btn:hover,
.reset-btn:hover,
.all-btn:hover {
.copy-button:hover,
.reset-button:hover,
.select-all-button:hover {
background: #009688;
}

.all-btn {
.select-all-button {
margin-left: 1rem;
}

/* "Jump to Top" Button */
.btn--top {
.top-button {
background: #0e8a7e;
border: 2px solid #024a43;
border-radius: 2px;
@@ -111,7 +111,7 @@ main {
width: 100%;
}

.btn--top > a {
.top-button > a {
display: inline-block;
height: 100%;
margin: .5px;
@@ -122,7 +122,7 @@ main {
z-index: 1;
}

.btn--top:hover {
.top-button:hover {
background-color: #7dbbf1;
}

@@ -135,7 +135,7 @@ main {
padding: 0;
}

.package-list__item .package-list__label {
.package-list-item .package-list-label {
background: #efefef;
border-radius: 2px;
cursor: pointer;
@@ -148,19 +148,19 @@ main {
width: 100%;
}

.package-list__label:hover {
.package-list-label:hover {
background: lightyellow;
}

.package-list__label:active {
.package-list-label:active {
outline: 2px solid #36556d;
}

.package-list__label > * {
.package-list-label > * {
margin-right: 5px;
}

.package-list__label-text {
.package-list-label-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -172,7 +172,7 @@ label {
max-width: 100%;
}

.icoImg {
.icon-image {
width: 16px;
}

0 comments on commit 6447350

Please sign in to comment.