move page functions code to page-functions.js

This commit is contained in:
ReznoRMichael 2021-07-12 22:23:29 +02:00
parent a43a72977d
commit 4581de1132
2 changed files with 47 additions and 47 deletions

View file

@ -1764,43 +1764,6 @@ function ResetCompletion(db) {
}
}
/**
* Focuses, selects and copies to clipboard contents inside a clicked element. Includes optional tooltip update after the copying is done.
* @param {MouseEvent} mouseEvent from the clicked element (AddEventListener)
* @param {string} tooltipId Element ID of the tooltip to update
* @param {string} tooltipFill Updated contents of the tooltip
*/
function SelectCopyInputText(mouseEvent, tooltipId = "", tooltipFill = "") {
const element = document.getElementById(mouseEvent.target.id);
// this prevents the un-selected effect after clicking the second time (clears all selection first)
if (window.getSelection) {
window.getSelection().removeAllRanges();
}
element.focus(); // best to focus the element first before selecting
element.select();
element.setSelectionRange(0, 99999); // for mobile devices
// Copy the text inside the text field to clipboard
document.execCommand("copy");
// optional tooltip showing
if (tooltipFill.length && tooltipId.length) FillInnerHTML(tooltipId, tooltipFill);
}
/**
* Fills the innerHTML of a given HTML Element with provided contents
* @param {string} elementId Element ID to update
* @param {string} textFill Updated contents (innerHTML)
*/
function FillInnerHTML(elementId, textFill) {
const element = document.getElementById(elementId);
element.innerHTML = textFill;
}
/* ----------------------- Event Listeners -------------------------- */
// Populate HTML at load (before img and css)
@ -1808,16 +1771,6 @@ document.addEventListener("DOMContentLoaded", () => {
InitializeHTMLPopulation(HK);
});
// Does an action when the save file location input text is clicked once (auto select & copy to clipboard)
document.getElementById("save-location-input").addEventListener("click", (e) => {
SelectCopyInputText(e, "save-location-input-tooltip", "Copied save file location to clipboard");
}, false);
// Choose File input field
document.getElementById("save-location-input").addEventListener("mouseout", () => {
FillInnerHTML("save-location-input-tooltip", "Click once to copy to clipboard");
}, false);
// Analyze Text button
document.getElementById("save-area-read").addEventListener("click", () => {
HKReadTextArea("save-area");

View file

@ -994,6 +994,43 @@ function StorageAvailable(type) {
}
}
/**
* Fills the innerHTML of a given HTML Element with provided contents
* @param {string} elementId Element ID to update
* @param {string} textFill Updated contents (innerHTML)
*/
function FillInnerHTML(elementId, textFill) {
const element = document.getElementById(elementId);
element.innerHTML = textFill;
}
/**
* Focuses, selects and copies to clipboard contents inside a clicked element. Includes optional tooltip update after the copying is done.
* @param {MouseEvent} mouseEvent from the clicked element (AddEventListener)
* @param {string} tooltipId Element ID of the tooltip to update
* @param {string} tooltipFill Updated contents of the tooltip
*/
function SelectCopyInputText(mouseEvent, tooltipId = "", tooltipFill = "") {
const element = document.getElementById(mouseEvent.target.id);
// this prevents the un-selected effect after clicking the second time (clears all selection first)
if (window.getSelection) {
window.getSelection().removeAllRanges();
}
element.focus(); // best to focus the element first before selecting
element.select();
element.setSelectionRange(0, 99999); // for mobile devices
// Copy the text inside the text field to clipboard
document.execCommand("copy");
// optional tooltip showing
if (tooltipFill.length && tooltipId.length) FillInnerHTML(tooltipId, tooltipFill);
}
/* ----------------------- Event Listeners -------------------------- */
document.addEventListener("scroll", () => {
@ -1010,6 +1047,16 @@ SCROLL_BUTTON.addEventListener("click", () => {
ScrollToElement(ROOT);
});
// Auto select & copy to clipboard when the save file location input text is clicked once
document.getElementById("save-location-input").addEventListener("click", (e) => {
SelectCopyInputText(e, "save-location-input-tooltip", "Copied save file location to clipboard");
}, false);
// Switch text back to the default on mouse out
document.getElementById("save-location-input").addEventListener("mouseout", () => {
FillInnerHTML("save-location-input-tooltip", "Click once to copy to clipboard");
}, false);
// Checkboxes functions
document.getElementById("checkbox-hints").addEventListener("click", CheckboxHintsToggle, false);
document.getElementById("checkbox-spoilers").addEventListener("click", CheckboxSpoilersToggle, false);