First
This commit is contained in:
Auric Vente
commit
ece60fc6ea
|
|
@ -0,0 +1,169 @@
|
|||
const M = {}
|
||||
|
||||
M.init = function () {
|
||||
M.numb = M.$("#numb")
|
||||
M.filter = M.$("#filter")
|
||||
|
||||
M.keydec()
|
||||
M.start_widgets()
|
||||
M.update()
|
||||
|
||||
if (M.numb.value) {
|
||||
M.do_numb_action()
|
||||
}
|
||||
|
||||
if (M.filter.value) {
|
||||
M.do_filter_action()
|
||||
}
|
||||
|
||||
M.filter.focus()
|
||||
M.move_cursor_to_end(M.filter)
|
||||
}
|
||||
|
||||
M.$ = function (s, parent = false) {
|
||||
if (!parent) {
|
||||
parent = document
|
||||
}
|
||||
|
||||
return parent.querySelector(s)
|
||||
}
|
||||
|
||||
M.$$ = function (s, parent = false, direct = false) {
|
||||
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 () {
|
||||
timeout = null
|
||||
if (!immediate) func.apply(context, args)
|
||||
}
|
||||
|
||||
let callNow = immediate && !timeout
|
||||
clearTimeout(timeout)
|
||||
timeout = setTimeout(later, wait)
|
||||
if (callNow) func.apply(context, args)
|
||||
}
|
||||
}
|
||||
|
||||
M.move_cursor_to_end = function (element) {
|
||||
element.selectionStart = element.selectionEnd = element.value.length
|
||||
}
|
||||
|
||||
M.do_numb_action = function () {
|
||||
M.numb.value = parseInt(M.numb.value.replace(/\D/g, ""))
|
||||
|
||||
if (M.numb.value > 9999) {
|
||||
M.numb.value = 9999
|
||||
} else if (M.numb.value != "" && M.numb.value < 0) {
|
||||
M.numb.value = 0
|
||||
}
|
||||
|
||||
M.update(M.filter.value.trim())
|
||||
}
|
||||
|
||||
M.do_filter_action = function () {
|
||||
M.update(M.filter.value.trim())
|
||||
}
|
||||
|
||||
M.keydec = function () {
|
||||
M.numb.addEventListener(
|
||||
"input",
|
||||
M.debounce(function (e) {
|
||||
M.do_numb_action()
|
||||
}, 350)
|
||||
)
|
||||
|
||||
M.filter.addEventListener(
|
||||
"input",
|
||||
M.debounce(function (e) {
|
||||
M.do_filter_action()
|
||||
}, 350)
|
||||
)
|
||||
|
||||
M.filter.addEventListener("keydown", function (e) {
|
||||
if (e.key === "Escape") {
|
||||
M.clear_filter()
|
||||
}
|
||||
})
|
||||
|
||||
document.addEventListener("keydown", function (e) {
|
||||
if (document.activeElement !== M.filter) {
|
||||
if (e.key.length === 1 && e.key.match(/[a-zA-Z]/)) {
|
||||
filter.focus()
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
M.update = function (txt = "") {
|
||||
txt = txt.toLowerCase()
|
||||
let s = ""
|
||||
let all = txt ? false : true
|
||||
let len = M.nouns.length
|
||||
let index = parseInt(M.numb.value) % len
|
||||
let exact = M.$("#exact_filter").checked
|
||||
|
||||
for (let i = 0; i < M.nouns.length; i++) {
|
||||
let include = false
|
||||
|
||||
if (all) {
|
||||
include = true
|
||||
} else if (exact) {
|
||||
include = M.nouns[i] === txt || M.nouns[index] === txt
|
||||
} else {
|
||||
include = M.nouns[i].includes(txt) || M.nouns[index].includes(txt)
|
||||
}
|
||||
|
||||
if (include) {
|
||||
s += `
|
||||
<div class='list_item'>
|
||||
<div class='list_item_word'>${M.nouns[i]}</div>
|
||||
<div class='list_item_arrow'>-></div>
|
||||
<div class='list_item_word_2'>${M.nouns[index]}</div>
|
||||
</div>`
|
||||
}
|
||||
|
||||
index += 1
|
||||
|
||||
if (index >= len) {
|
||||
index = 0
|
||||
}
|
||||
}
|
||||
|
||||
M.$("#list").innerHTML = s
|
||||
}
|
||||
|
||||
M.start_widgets = function () {
|
||||
M.$("#exact_filter").addEventListener("change", function (e) {
|
||||
if (M.filter.value) {
|
||||
M.do_filter_action()
|
||||
}
|
||||
})
|
||||
|
||||
M.$("#clear_filter").addEventListener("click", function (e) {
|
||||
M.clear_filter()
|
||||
})
|
||||
}
|
||||
|
||||
M.clear_filter = function () {
|
||||
if (M.filter.value) {
|
||||
M.filter.value = ""
|
||||
M.do_filter_action()
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 318 B |
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
<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="stylesheet" type="text/css" href="style.css?v=1">
|
||||
<script src='base.js?v=4'></script>
|
||||
<script src='nouns.js?v=1'></script>
|
||||
|
||||
<script>
|
||||
window.onload = function(){
|
||||
M.init()
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id='inputs'>
|
||||
<input type='number' max='9999' min='0' id='numb' value='88' title='Page'>
|
||||
<input type='text' id='filter' placeholder='Filter'>
|
||||
<div class='flex_row_center'>
|
||||
<div>Exact:</div>
|
||||
<input id='exact_filter' type='checkbox'>
|
||||
<div class='separator'>|</div>
|
||||
<div id='clear_filter' class='pointer'>Clear</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id='list'></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,117 @@
|
|||
body,
|
||||
html {
|
||||
background-color: #242424;
|
||||
color: #e6e6e6;
|
||||
font-size: 20px;
|
||||
font-family: monospace;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="number"] {
|
||||
background-color: #151515;
|
||||
color: #c2bbe0;
|
||||
font-size: 1rem;
|
||||
padding: 5px;
|
||||
box-shadow: inset 0 0 2px currentColor;
|
||||
border-radius: 50px;
|
||||
text-align: center;
|
||||
outline: none;
|
||||
border: 0px solid grey;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#inputs {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
background-color: inherit;
|
||||
width: 100%;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
#numb {
|
||||
width: 80px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#filter {
|
||||
width: 320px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#exact_filter {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
#list {
|
||||
display: table;
|
||||
text-shadow: 0 0 10px currentColor;
|
||||
}
|
||||
|
||||
.list_item {
|
||||
display: table-row;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.list_item > div {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.list_item:first-child > div {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.list_item:last-child > div {
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
.list_item_word {
|
||||
display: table-cell;
|
||||
text-align: right;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.list_item_word_2 {
|
||||
display: table-cell;
|
||||
text-align: left;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.list_item_arrow {
|
||||
display: table-cell;
|
||||
text-align: center;
|
||||
color: #c2bbe0;
|
||||
}
|
||||
|
||||
.flex_row_center {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.separator {
|
||||
opacity: 0.5;
|
||||
margin-left: 15px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pointer:hover {
|
||||
text-shadow: 0 0 10px currentColor;
|
||||
}
|
||||
Loading…
Reference in New Issue