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