tooltips for copied text
This commit is contained in:
ReznoRMichael
parent
af22c16db1
commit
5321cf3649
6 changed files with 122 additions and 20 deletions
File diff suppressed because one or more lines are too long
|
|
@ -46,9 +46,13 @@
|
|||
<a class="link-social" href="https://github.com/ReznoRMichael/hollow-knight-completion-check" target="_blank"><i class="simpleicon-github"></i>GitHub</a>
|
||||
<br>
|
||||
<!-- <a href="https://pastebin.com/raw/shfZ4Vqs" target="_blank">[ Decoded 5% Save Example ]</a><br> -->
|
||||
<input type="text" id="save-location-input" size="57" value="%USERPROFILE%\AppData\LocalLow\Team Cherry\Hollow Knight\" readonly>
|
||||
<br>
|
||||
Choose a HK user*.dat save OR paste a <a href="https://bloodorca.github.io/hollow/" target="_blank">decoded save</a>.
|
||||
<div class="tooltip">
|
||||
<input type="text" id="save-location-input" size="57" value="%USERPROFILE%\AppData\LocalLow\Team Cherry\Hollow Knight\" readonly>
|
||||
<span class="tooltip-text" id="save-location-input-tooltip">Click once to copy to clipboard</span>
|
||||
</div>
|
||||
<p class="smalltext">
|
||||
Choose a HK user*.dat save OR paste a <a href="https://bloodorca.github.io/hollow/" target="_blank">decoded save</a>.
|
||||
</p>
|
||||
</p>
|
||||
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -220,9 +220,9 @@ h2 {
|
|||
text-align: center;
|
||||
width: max-content;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
display: block;
|
||||
background-color: rgba(128, 128, 128, 0.5);
|
||||
margin: 0.4rem 0 0.6rem 0;
|
||||
margin: 0.4rem auto 0.6rem auto;
|
||||
padding: 0.16rem 0.5rem 0.25rem 0.5rem;
|
||||
border: 1px solid rgba(231, 251, 255, 0.6);
|
||||
border-radius: 3px;
|
||||
|
|
@ -251,7 +251,7 @@ textarea {
|
|||
margin: 0.5rem 2px 0.5rem 2px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
|
||||
|
||||
/* These are technically the same, but use both */
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
|
|
@ -363,14 +363,17 @@ input[type="file"] {
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.input-buttons {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.centered {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.checkboxes {
|
||||
margin-top: 0.8rem;
|
||||
}
|
||||
|
|
@ -640,3 +643,40 @@ input[type="radio"] {
|
|||
border-radius: 50%;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tooltip .tooltip-text {
|
||||
visibility: hidden;
|
||||
width: max-content;
|
||||
background-color: #555;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
padding: 5px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: 150%;
|
||||
left: 50%;
|
||||
margin-left: -75px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.tooltip .tooltip-text::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
border-color: #555 transparent transparent transparent;
|
||||
}
|
||||
|
||||
.tooltip:hover .tooltip-text {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -113,9 +113,9 @@ h2 {
|
|||
text-align: center;
|
||||
width: max-content;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
display: block;
|
||||
background-color: rgba(128, 128, 128, 0.5);
|
||||
margin: 0.4rem 0 0.6rem 0;
|
||||
margin: 0.4rem auto 0.6rem auto;
|
||||
padding: 0.16rem 0.5rem 0.25rem 0.5rem;
|
||||
border: 1px solid rgba(231, 251, 255, 0.6);
|
||||
border-radius: 3px;
|
||||
|
|
@ -144,7 +144,7 @@ textarea {
|
|||
margin: 0.5rem 2px 0.5rem 2px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
|
||||
|
||||
/* These are technically the same, but use both */
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
|
|
@ -256,14 +256,17 @@ input[type="file"] {
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.input-buttons {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.centered {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.checkboxes {
|
||||
margin-top: 0.8rem;
|
||||
}
|
||||
|
|
@ -532,4 +535,41 @@ input[type="radio"] {
|
|||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tooltip .tooltip-text {
|
||||
visibility: hidden;
|
||||
width: max-content;
|
||||
background-color: #555;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
padding: 5px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: 150%;
|
||||
left: 50%;
|
||||
margin-left: -75px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.tooltip .tooltip-text::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
border-color: #555 transparent transparent transparent;
|
||||
}
|
||||
|
||||
.tooltip:hover .tooltip-text {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -46,9 +46,13 @@
|
|||
<a class="link-social" href="https://github.com/ReznoRMichael/hollow-knight-completion-check" target="_blank"><i class="simpleicon-github"></i>GitHub</a>
|
||||
<br>
|
||||
<!-- <a href="https://pastebin.com/raw/shfZ4Vqs" target="_blank">[ Decoded 5% Save Example ]</a><br> -->
|
||||
<input type="text" id="save-location-input" size="57" value="%USERPROFILE%\AppData\LocalLow\Team Cherry\Hollow Knight\" readonly>
|
||||
<br>
|
||||
Choose a HK user*.dat save OR paste a <a href="https://bloodorca.github.io/hollow/" target="_blank">decoded save</a>.
|
||||
<div class="tooltip">
|
||||
<input type="text" id="save-location-input" size="57" value="%USERPROFILE%\AppData\LocalLow\Team Cherry\Hollow Knight\" readonly>
|
||||
<span class="tooltip-text" id="save-location-input-tooltip">Click once to copy to clipboard</span>
|
||||
</div>
|
||||
<p class="smalltext">
|
||||
Choose a HK user*.dat save OR paste a <a href="https://bloodorca.github.io/hollow/" target="_blank">decoded save</a>.
|
||||
</p>
|
||||
</p>
|
||||
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -1046,7 +1046,7 @@ function ResetCompletion(jsObj) {
|
|||
}
|
||||
}
|
||||
|
||||
function SelectCopyInputText(mouseEvent) {
|
||||
function SelectCopyInputText(mouseEvent, tooltipId = "", tooltipFill = "") {
|
||||
|
||||
const element = document.getElementById(mouseEvent.target.id);
|
||||
|
||||
|
|
@ -1054,11 +1054,22 @@ function SelectCopyInputText(mouseEvent) {
|
|||
element.select();
|
||||
element.setSelectionRange(0, 99999); // for mobile devices
|
||||
|
||||
/* Copy the text inside the text field */
|
||||
// Copy the text inside the text field to clipboard
|
||||
document.execCommand("copy");
|
||||
|
||||
/* Alert the copied text */
|
||||
console.log("Copied the text: " + element.value);
|
||||
if (tooltipFill.length && tooltipId.length) ShowTooltip(tooltipId, tooltipFill);
|
||||
}
|
||||
|
||||
function ShowTooltip(tooltipId, tooltipFill) {
|
||||
|
||||
const tooltip = document.getElementById(tooltipId);
|
||||
tooltip.innerHTML = tooltipFill;
|
||||
}
|
||||
|
||||
function FillInnerHTML(elementId, textFill) {
|
||||
|
||||
const element = document.getElementById(elementId);
|
||||
element.innerHTML = textFill;
|
||||
}
|
||||
|
||||
// Populate HTML at load (before img and css)
|
||||
|
|
@ -1066,12 +1077,15 @@ document.addEventListener("DOMContentLoaded", InitialHTMLPopulate(HK.DIV_ID));
|
|||
|
||||
// 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);
|
||||
SelectCopyInputText(e, "save-location-input-tooltip", "Copied save file location to clipboard");
|
||||
}, false);
|
||||
|
||||
document.getElementById("save-location-input").addEventListener("mouseout", () => {
|
||||
FillInnerHTML("save-location-input-tooltip", "Click once to copy to clipboard");
|
||||
}, false);
|
||||
|
||||
// Make functions global so they can be used on click and change events (for Webpack)
|
||||
window.HKReadTextArea = HKReadTextArea;
|
||||
window.InitialHTMLPopulate = InitialHTMLPopulate;
|
||||
window.CheckboxSpoilersToggle = CheckboxSpoilersToggle;
|
||||
window.CheckboxHintsToggle = CheckboxHintsToggle;
|
||||
window.SelectCopyInputText = SelectCopyInputText;
|
||||
window.CheckboxHintsToggle = CheckboxHintsToggle;
|
||||
Loading…
Reference in a new issue