Mods

base.js

@@ -1,26 +1,26 @@
-const M = {}
+const App = {}
 
-M.init = function () {
+App.init = () => {
-  M.numb = M.$("#numb")
+  App.numb = App.el(`#numb`)
-  M.filter = M.$("#filter")
+  App.filter = App.el(`#filter`)
 
-  M.keydec()
+  App.keydec()
-  M.start_widgets()
+  App.start_widgets()
-  M.update()
+  App.update()
 
-  if (M.numb.value) {
+  if (App.numb.value) {
-    M.do_numb_action()
+    App.do_numb_action()
   }
 
-  if (M.filter.value) {
+  if (App.filter.value) {
-    M.do_filter_action()
+    App.do_filter_action()
   }
 
-  M.filter.focus()
+  App.filter.focus()
-  M.move_cursor_to_end(M.filter)
+  App.move_cursor_to_end(App.filter)
 }
 
-M.$ = function (s, parent = false) {
+App.el = (s, parent = false) => {
   if (!parent) {
     parent = document
   }
@@ -28,28 +28,14 @@ M.$ = function (s, parent = false) {
   return parent.querySelector(s)
 }
 
-M.$$ = function (s, parent = false, direct = false) {
+App.debounce = (func, wait, immediate) => {
-  if (!parent) {
-    parent = document
-  }
-
-  let items = Array.from(parent.querySelectorAll(s))
-
-  if (direct) {
-    items = items.filter((node) => node.parentNode === parent)
-  }
-
-  return items
-}
-
-M.debounce = function (func, wait, immediate) {
   let timeout
 
   return function executedFunction() {
     let context = this
     let args = arguments
 
-    let later = function () {
+    let later = () => {
       timeout = null
       if (!immediate) func.apply(context, args)
     }
@@ -61,49 +47,50 @@ M.debounce = function (func, wait, immediate) {
   }
 }
 
-M.move_cursor_to_end = function (element) {
+App.move_cursor_to_end = (element) => {
   element.selectionStart = element.selectionEnd = element.value.length
 }
 
-M.do_numb_action = function () {
+App.do_numb_action = () => {
-  M.numb.value = parseInt(M.numb.value.replace(/\D/g, ""))
+  App.numb.value = parseInt(App.numb.value.replace(/\D/g, ``))
 
-  if (M.numb.value > 9999) {
+  if (App.numb.value > 9999) {
-    M.numb.value = 9999
+    App.numb.value = 9999
-  } else if (M.numb.value != "" && M.numb.value < 0) {
+  }
-    M.numb.value = 0
+  else if (App.numb.value != `` && App.numb.value < 0) {
+    App.numb.value = 0
   }
 
-  M.update(M.filter.value.trim())
+  App.update(App.filter.value.trim())
 }
 
-M.do_filter_action = function () {
+App.do_filter_action = () => {
-  M.update(M.filter.value.trim())
+  App.update(App.filter.value.trim())
 }
 
-M.keydec = function () {
+App.keydec = () => {
-  M.numb.addEventListener(
+  App.numb.addEventListener(
-    "input",
+    `input`,
-    M.debounce(function (e) {
+    App.debounce((e) => {
-      M.do_numb_action()
+      App.do_numb_action()
     }, 350)
   )
 
-  M.filter.addEventListener(
+  App.filter.addEventListener(
-    "input",
+    `input`,
-    M.debounce(function (e) {
+    App.debounce((e) => {
-      M.do_filter_action()
+      App.do_filter_action()
     }, 350)
   )
 
-  M.filter.addEventListener("keydown", function (e) {
+  App.filter.addEventListener(`keydown`, (e) => {
-    if (e.key === "Escape") {
+    if (e.key === `Escape`) {
-      M.clear_filter()
+      App.clear_filter()
     }
   })
 
-  document.addEventListener("keydown", function (e) {
+  document.addEventListener(`keydown`, (e) => {
-    if (document.activeElement !== M.filter) {
+    if (document.activeElement !== App.filter) {
       if (e.key.length === 1 && e.key.match(/[a-zA-Z]/)) {
         filter.focus()
       }
@@ -111,31 +98,33 @@ M.keydec = function () {
   })
 }
 
-M.update = function (txt = "") {
+App.update = (txt = ``) => {
   txt = txt.toLowerCase()
-  let s = ""
+  let s = ``
   let all = txt ? false : true
-  let len = M.nouns.length
+  let len = App.nouns.length
-  let index = parseInt(M.numb.value) % len
+  let index = parseInt(App.numb.value) % len
-  let exact = M.$("#exact_filter").checked
+  let exact = App.el(`#exact_filter`).checked
 
-  for (let i = 0; i < M.nouns.length; i++) {
+  for (let i = 0; i < App.nouns.length; i++) {
     let include = false
 
     if (all) {
       include = true
-    } else if (exact) {
+    }
-      include = M.nouns[i] === txt || M.nouns[index] === txt
+    else if (exact) {
-    } else {
+      include = App.nouns[i] === txt || App.nouns[index] === txt
-      include = M.nouns[i].includes(txt) || M.nouns[index].includes(txt)
+    }
+    else {
+      include = App.nouns[i].includes(txt) || App.nouns[index].includes(txt)
     }
 
     if (include) {
       s += `
 			<div class='list_item'>
-				<div class='list_item_word'>${M.nouns[i]}</div>
+				<div class='list_item_word'>${App.nouns[i]}</div>
 				<div class='list_item_arrow'>-&gt;</div>
-				<div class='list_item_word_2'>${M.nouns[index]}</div>
+				<div class='list_item_word_2'>${App.nouns[index]}</div>
 			</div>`
     }
 
@@ -146,24 +135,24 @@ M.update = function (txt = "") {
     }
   }
 
-  M.$("#list").innerHTML = s
+  App.el(`#list`).innerHTML = s
 }
 
-M.start_widgets = function () {
+App.start_widgets = () => {
-  M.$("#exact_filter").addEventListener("change", function (e) {
+  App.el(`#exact_filter`).addEventListener(`change`, (e) => {
-    if (M.filter.value) {
+    if (App.filter.value) {
-      M.do_filter_action()
+      App.do_filter_action()
     }
   })
 
-  M.$("#clear_filter").addEventListener("click", function (e) {
+  App.el(`#clear_filter`).addEventListener(`click`, (e) => {
-    M.clear_filter()
+    App.clear_filter()
   })
 }
 
-M.clear_filter = function () {
+App.clear_filter = () => {
-  if (M.filter.value) {
+  if (App.filter.value) {
-    M.filter.value = ""
+    App.filter.value = ``
-    M.do_filter_action()
+    App.do_filter_action()
   }
 }

index.html

@@ -4,29 +4,29 @@
 	<head>
 		<title>Coke Bottle Glasses</title>
 		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-		<link rel="shortcut icon" href="favicon.ico?v=1" type="image/x-icon">
+		<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
-		<link rel="stylesheet" type="text/css" href="style.css?v=1">
+		<link rel="stylesheet" type="text/css" href="style.css">
-		<script src='base.js?v=4'></script>
+		<script src="base.js"></script>
-		<script src='nouns.js?v=1'></script>
+		<script src="nouns.js"></script>
 
 		<script>
-			window.onload = function() {
+			window.onload = () => {
-				M.init()
+				App.init()
 			}
 		</script>
 	</head>
 
 	<body>
-		<div id='inputs'>
+		<div id="inputs">
-			<input type='number' max='9999' min='0' id='numb' value='89' title='Page'>
+			<input type="number" max="9999" min="0" id="numb" value="89" title="Page">
-			<input type='text' id='filter' placeholder='Filter'>
+			<input type="text" id="filter" placeholder="Filter">
-			<div class='flex_row_center'>
+			<div class="flex_row_center">
 				<div>Exact:</div>
-				<input id='exact_filter' type='checkbox'>
+				<input id="exact_filter" type="checkbox">
-				<div class='separator'>|</div>
+				<div class="separator">|</div>
-				<div id='clear_filter' class='pointer'>Clear</div>
+				<div id="clear_filter" class="pointer">Clear</div>
 			</div>
 		</div>
-		<div id='list'></div>
+		<div id="list"></div>
 	</body>
 </html>