From 9ec7c62057e0bbe9b3b9cfae8ac2d6f69f11e8a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=83=9D=E3=83=BC=E3=83=AB=20=E3=82=A6=E3=82=A7=E3=83=83?= =?UTF-8?q?=E3=83=96?= Date: Mon, 1 Oct 2018 17:11:20 -0500 Subject: [PATCH] Reduce reliance on Zepto --- app/dist/scripts/api.js | 50 ++++++++++++++--------------------------- app/dist/scripts/app.js | 38 +++++++++++++++++-------------- app/views/home.js | 2 +- 3 files changed, 39 insertions(+), 51 deletions(-) diff --git a/app/dist/scripts/api.js b/app/dist/scripts/api.js index 4f43536..bf240bb 100644 --- a/app/dist/scripts/api.js +++ b/app/dist/scripts/api.js @@ -1,58 +1,42 @@ -/* global $, Jets */ "use strict"; +/* global Jets */ "use strict"; -/** - * Initiate search functionality - */ +// Initiate search functionality let jets = new Jets({ contentTag: "#toc", 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", () => { - if ($("#input-search").val()) $(".api__toc__search__clear").addClass("active"); - else $(".api__toc__search__clear").removeClass("active"); +document.getElementById("input-search").addEventListener("keyup", () => { + if (document.getElementById("input-search").value) + 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", () => { - $("#input-search")[0].value = ""; - $(".api__toc__search__clear").removeClass("active"); +document.querySelector(".api__toc__search__clear").addEventListener("click", () => { + document.getElementById("input-search").value = ""; + document.querySelector(".api__toc__search__clear").classList.remove("active"); jets.destroy(); 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 -/** - * Reinitialize search functionality - */ +// Reinitialize search functionality function reinitJets() { jets = new Jets({ @@ -60,5 +44,5 @@ function reinitJets() { searchTag: "#input-search" }); - $("#input-search").focus(); + document.getElementById("input-search").focus(); } diff --git a/app/dist/scripts/app.js b/app/dist/scripts/app.js index 889d491..7d2dcb2 100755 --- a/app/dist/scripts/app.js +++ b/app/dist/scripts/app.js @@ -1,13 +1,15 @@ -/* global $, location, send, window */ "use strict"; +/* global location, send, window */ "use strict"; -$(function () { +document.addEventListener("DOMContentLoaded", () => { scrollToElementOnLoad(); - $("a[href^=http]").each(function () { // Automatically open external links in new tabs - if (this.href.indexOf(location.hostname) === -1) { - $(this).attr("target", "_blank"); + // Automatically open external links in new tabs + document.querySelectorAll("a[href^=http]").forEach(anchor => { + if (anchor.href.indexOf(location.hostname) === -1) { + anchor.rel = "noopener noreferrer"; + anchor.target = "_blank"; } }); }); @@ -32,33 +34,35 @@ document.querySelector("#close-alert").onclick = function () { -// Smooth scroll - +// Smooth scroll document.querySelectorAll("a[href^='#']").forEach(anchor => { - anchor.addEventListener("click", function (e) { - e.preventDefault(); + anchor.addEventListener("click", event => { + event.preventDefault(); - const element = this.href.split("#").pop(); + const element = event.target.href.split("#").pop(); let elementOffset; if (document.getElementById(element)) { elementOffset = document.getElementById(element).offsetTop - 74; 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 - -$("[data-action='subscribe to newsletter']").on("click", () => { - const email = $("#emailAddress").val(); +// Newsletter +document.querySelector("[data-action='subscribe to newsletter']").onclick = () => { + const email = document.getElementById("emailAddress").value; if (!validateEmail(email)) return; send(JSON.stringify({ "email": email, "message": "subscribe" })); -}); +}; @@ -79,6 +83,6 @@ function scrollToElementOnLoad() { } function validateEmail(email) { - const re = /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\\.,;:\s@"]{2,})$/i; - return re.test(String(email)); + const emailRegex = /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\\.,;:\s@"]{2,})$/i; + return emailRegex.test(String(email)); } diff --git a/app/views/home.js b/app/views/home.js index 14eff9e..e615448 100644 --- a/app/views/home.js +++ b/app/views/home.js @@ -96,7 +96,7 @@ module.exports = exports = () => html`