mikl/hollow-knight-silksong-completion-check
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

tooltips for copied text

Browse source
This commit is contained in:
ReznoRMichael 2021-01-30 23:57:05 +01:00
parent af22c16db1
commit 5321cf3649
6 changed files with 122 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
docs/app.js
View file

File diff suppressed because one or more lines are too long

6
docs/index.html
View file

@ -46,10 +46,14 @@
<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> -->
<div class="tooltip">
<input type="text" id="save-location-input" size="57" value="%USERPROFILE%\AppData\LocalLow\Team Cherry\Hollow Knight\" readonly>
<br>
<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>

44
docs/main.css
View file

@ -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;
@ -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;
}

44
src/css/style.css
View file

@ -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;
@ -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;
}
@ -533,3 +536,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;
}

6
src/index.html
View file

@ -46,10 +46,14 @@
<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> -->
<div class="tooltip">
<input type="text" id="save-location-input" size="57" value="%USERPROFILE%\AppData\LocalLow\Team Cherry\Hollow Knight\" readonly>
<br>
<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>

26
src/js/HKCheckCompletion.js
View file

@ -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,7 +1077,11 @@ 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)
@ -1074,4 +1089,3 @@ window.HKReadTextArea = HKReadTextArea;
window.InitialHTMLPopulate = InitialHTMLPopulate;
window.CheckboxSpoilersToggle = CheckboxSpoilersToggle;
window.CheckboxHintsToggle = CheckboxHintsToggle;
window.SelectCopyInputText = SelectCopyInputText;