Reduce reliance on Zepto

This commit is contained in:
ポール ウェッブ 2018-10-01 17:11:20 -05:00
parent 35f589630a
commit 9ec7c62057
3 changed files with 39 additions and 51 deletions

View file

@ -1,58 +1,42 @@
/* global $, Jets */ "use strict"; /* global Jets */ "use strict";
/** // Initiate search functionality
* Initiate search functionality
*/
let jets = new Jets({ let jets = new Jets({
contentTag: "#toc", contentTag: "#toc",
searchTag: "#input-search" searchTag: "#input-search"
}); });
/** // Reset search on page load
* Reset search on page load
*/
$("#input-search")[0].value = ""; document.getElementById("input-search").value = "";
/** // Activate search
* Activate search
*/
$("#input-search").on("keyup", () => { document.getElementById("input-search").addEventListener("keyup", () => {
if ($("#input-search").val()) $(".api__toc__search__clear").addClass("active"); if (document.getElementById("input-search").value)
else $(".api__toc__search__clear").removeClass("active"); document.querySelector(".api__toc__search__clear").classList.add("active");
else
document.querySelector(".api__toc__search__clear").classList.remove("active");
}); });
/** // Cancel search
* Cancel search
*/
$(".api__toc__search__clear").on("click", () => { document.querySelector(".api__toc__search__clear").addEventListener("click", () => {
$("#input-search")[0].value = ""; document.getElementById("input-search").value = "";
$(".api__toc__search__clear").removeClass("active"); document.querySelector(".api__toc__search__clear").classList.remove("active");
jets.destroy(); jets.destroy();
reinitJets(); reinitJets();
}); });
/**
* Add hash to URL bar when sidebar links are clicked
*/
$(".api__toc__item a").on("click", event => {
const hash = event.currentTarget.href.split("#")[1];
history.replaceState({}, "", `#${hash}`);
});
// H E L P E R // H E L P E R
/** // Reinitialize search functionality
* Reinitialize search functionality
*/
function reinitJets() { function reinitJets() {
jets = new Jets({ jets = new Jets({
@ -60,5 +44,5 @@ function reinitJets() {
searchTag: "#input-search" searchTag: "#input-search"
}); });
$("#input-search").focus(); document.getElementById("input-search").focus();
} }

View file

@ -1,13 +1,15 @@
/* global $, location, send, window */ "use strict"; /* global location, send, window */ "use strict";
$(function () { document.addEventListener("DOMContentLoaded", () => {
scrollToElementOnLoad(); scrollToElementOnLoad();
$("a[href^=http]").each(function () { // Automatically open external links in new tabs // Automatically open external links in new tabs
if (this.href.indexOf(location.hostname) === -1) { document.querySelectorAll("a[href^=http]").forEach(anchor => {
$(this).attr("target", "_blank"); if (anchor.href.indexOf(location.hostname) === -1) {
anchor.rel = "noopener noreferrer";
anchor.target = "_blank";
} }
}); });
}); });
@ -33,32 +35,34 @@ document.querySelector("#close-alert").onclick = function () {
// Smooth scroll // Smooth scroll
document.querySelectorAll("a[href^='#']").forEach(anchor => { document.querySelectorAll("a[href^='#']").forEach(anchor => {
anchor.addEventListener("click", function (e) { anchor.addEventListener("click", event => {
e.preventDefault(); event.preventDefault();
const element = this.href.split("#").pop(); const element = event.target.href.split("#").pop();
let elementOffset; let elementOffset;
if (document.getElementById(element)) { if (document.getElementById(element)) {
elementOffset = document.getElementById(element).offsetTop - 74; elementOffset = document.getElementById(element).offsetTop - 74;
window.scroll({ top: elementOffset, behavior: "smooth" }); window.scroll({ top: elementOffset, behavior: "smooth" });
} }
// Add hash to URL bar when sidebar links are clicked
if (event.target.parentElement.className === "api__toc__item")
history.replaceState({}, "", `#${element}`);
}); });
}); });
// Newsletter // Newsletter
document.querySelector("[data-action='subscribe to newsletter']").onclick = () => {
$("[data-action='subscribe to newsletter']").on("click", () => { const email = document.getElementById("emailAddress").value;
const email = $("#emailAddress").val();
if (!validateEmail(email)) return; if (!validateEmail(email)) return;
send(JSON.stringify({ send(JSON.stringify({
"email": email, "email": email,
"message": "subscribe" "message": "subscribe"
})); }));
}); };
@ -79,6 +83,6 @@ function scrollToElementOnLoad() {
} }
function validateEmail(email) { function validateEmail(email) {
const re = /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\\.,;:\s@"]{2,})$/i; const emailRegex = /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\\.,;:\s@"]{2,})$/i;
return re.test(String(email)); return emailRegex.test(String(email));
} }

View file

@ -96,7 +96,7 @@ module.exports = exports = () => html`
</div> </div>
<script> <script>
$(function () { document.addEventListener("DOMContentLoaded", () => {
send(JSON.stringify({ send(JSON.stringify({
"message": "landed on homepage" "message": "landed on homepage"
})); }));