Skip to content

Commit

Permalink
Rip the JS and CSS out of the HTML
Browse files Browse the repository at this point in the history
  • Loading branch information
WillNilges committed Sep 12, 2021
1 parent a6e5739 commit 540dd60
Show file tree
Hide file tree
Showing 3 changed files with 124 additions and 114 deletions.
117 changes: 3 additions & 114 deletions static/index.html
Expand Up @@ -4,53 +4,8 @@
<head>
<title>CSH: Haddock</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" />
<style type="text/css">
html {
text-align: center;
font-family: sans-serif;
color: #111;
background-color: #def;
}

a,
a:hover,
a:active,
a:visited {
color: #48a;
}

h1 {
color: #7ac;
margin: 20px 0 0 0;
}

#subhead {
color: #aac;
font-size: 80%;
margin: 0 0 20px 0;
}

.explain {
color: #aac;
font-size: 70%;
margin: 2px 0 0 0;
}

#passwords {
padding: 0;
margin-top: 18px;
font-family: monospace;
list-style-type: none;
display: flex;
justify-content: center;
flex-direction: column;
}

#passwords li {
margin-top: 16px;
}

</style>
<link rel="stylesheet" href="style.css"/>
<script src="scripts.js"></script>
</head>

<body>
Expand All @@ -76,73 +31,7 @@ <h1>CSH: Haddock</h1>

</ul>
<script>
function onLengthSubmit() {
const length = document.getElementById("input_length").value;
const xkcd = document.getElementById("input_xkcd").checked;
location.hash = "#length="+length
const url = xkcd ? '/api/v1/xkcd?length=' : '/api/v1/haddock?length='
fetch(url + length)
.then(response => response.json())
.then(data => {
document.getElementById("passwords").innerHTML = "";
var passNum = 0;
data.forEach(p => {
// Create the password item
var passwordText = document.createElement('li');
passwordText.setAttribute('id', 'password' + passNum);
passwordText.innerText = p
passwordText.setAttribute('onclick', 'clipboardize(\"password' + passNum + '\")');

// Append the newly constructed "node" to the password list
document.getElementById("passwords").appendChild(passwordText);

passNum++;
})
});
}
const urlParams = new URLSearchParams(location.hash.substring(1));
if (urlParams.has('length')) {
const length = parseInt(urlParams.get("length"))
if (length >= 16 && length <= 48) {
document.getElementById("input_length").value = length
}
}
onLengthSubmit();
document.getElementById("input_length").addEventListener("keydown", function (event) {
// Number 13 is the "Enter" key on the keyboard
if (event.keyCode === 13) {
// Cancel the default action, if needed
event.preventDefault();
// Trigger the button element with a click
document.getElementById("genbutton").click();
}
});
function clipboardize(passwordID) {
/* Get the text field */
var element = document.getElementById(passwordID);
var range, selection, worked;

if (document.body.createTextRange) {
range = document.body.createTextRange();
range.moveToElementText(element);
range.select();
} else if (window.getSelection) {
selection = window.getSelection();
range = document.createRange();
range.selectNodeContents(element);
selection.removeAllRanges();
selection.addRange(range);
}

try {
document.execCommand('copy');
console.log('text copied');
}
catch (err) {
console.log('unable to copy text');
}

}
main();
</script>
</body>

Expand Down
75 changes: 75 additions & 0 deletions static/scripts.js
@@ -0,0 +1,75 @@
function main() {
const urlParams = new URLSearchParams(location.hash.substring(1));
if (urlParams.has('length')) {
const length = parseInt(urlParams.get("length"))
if (length >= 16 && length <= 48) {
document.getElementById("input_length").value = length
}
}

onLengthSubmit();
document.getElementById("input_length").addEventListener("keydown", function (event) {
// Number 13 is the "Enter" key on the keyboard
if (event.keyCode === 13) {
// Cancel the default action, if needed
event.preventDefault();
// Trigger the button element with a click
document.getElementById("genbutton").click();
}
});

}

function clipboardize(passwordID) {
/* Get the text field */
var element = document.getElementById(passwordID);
var range, selection, worked;

if (document.body.createTextRange) {
range = document.body.createTextRange();
range.moveToElementText(element);
range.select();
} else if (window.getSelection) {
selection = window.getSelection();
range = document.createRange();
range.selectNodeContents(element);
selection.removeAllRanges();
selection.addRange(range);
}

try {
document.execCommand('copy');
console.log('text copied');
}
catch (err) {
console.log('unable to copy text');
}

}

function onLengthSubmit() {
const length = document.getElementById("input_length").value;
const xkcd = document.getElementById("input_xkcd").checked;
location.hash = "#length="+length
const url = xkcd ? '/api/v1/xkcd?length=' : '/api/v1/haddock?length='
fetch(url + length)
.then(response => response.json())
.then(data => {
document.getElementById("passwords").innerHTML = "";
var passNum = 0;
data.forEach(p => {
// Create the password item
var passwordText = document.createElement('li');
passwordText.setAttribute('id', 'password' + passNum);
passwordText.innerText = p
passwordText.setAttribute('onclick', 'clipboardize(\"password' + passNum + '\")');

// Append the newly constructed "node" to the password list
document.getElementById("passwords").appendChild(passwordText);

passNum++;
})
});
}


46 changes: 46 additions & 0 deletions static/style.css
@@ -0,0 +1,46 @@
html {
text-align: center;
font-family: sans-serif;
color: #111;
background-color: #def;
}

a,
a:hover,
a:active,
a:visited {
color: #48a;
}

h1 {
color: #7ac;
margin: 20px 0 0 0;
}

#subhead {
color: #aac;
font-size: 80%;
margin: 0 0 20px 0;
}

.explain {
color: #aac;
font-size: 70%;
margin: 2px 0 0 0;
}

#passwords {
padding: 0;
margin-top: 18px;
font-family: monospace;
list-style-type: none;
display: flex;
justify-content: center;
flex-direction: column;
}

#passwords li {
margin-top: 16px;
}


0 comments on commit 540dd60

Please sign in to comment.