Skip to content

Commit 5364f30

Browse files
mrclaymrclay
committed
Clean up JS
1 parent d0d240b commit 5364f30

2 files changed

Lines changed: 52 additions & 54 deletions

File tree

‎htdocs/bookmarkManager.js‎

Lines changed: 30 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22
const contentEl = document.getElementById('content')
33
const formEl = document.getElementById('filterform')
44
const queryEl = document.getElementById('query')
5+
const dataEl = document.querySelector('[data-b]')
6+
7+
const page = JSON.parse(dataEl.dataset.b)
58

69
async function request(data) {
710
const res = await fetch('', {
@@ -11,8 +14,7 @@
1114
credentials: 'include'
1215
})
1316

14-
const text = await res.text()
15-
return JSON.parse(text)
17+
return await res.json()
1618
}
1719

1820
async function deleteEntry(id) {
@@ -144,13 +146,13 @@
144146
return false
145147
}
146148

147-
document.location.href = '?filter=' + encodeURIComponent(query)
149+
document.location.href = `?${new URLSearchParams({ filter: query })}`
148150

149151
return false
150152
})
151153

152154
let loadingMore = false
153-
let ifStep = window.infiniteScrolling
155+
let ifStep = page.infiniteScrolling
154156
let ifSkip = ifStep
155157

156158
async function loadMore() {
@@ -160,9 +162,12 @@
160162

161163
loadingMore = true
162164

163-
const url =
164-
`?filter=${encodeURIComponent(window.filter)}` +
165-
`&format=html&count=${ifStep}&skip=${ifSkip}`
165+
const url = `?${new URLSearchParams({
166+
filter: page.filter,
167+
format: 'html',
168+
count: ifStep,
169+
skip: ifSkip,
170+
})}`
166171
const res = await fetch(url, { credentials: 'include' })
167172
const text = await res.text()
168173

@@ -175,7 +180,24 @@
175180
loadingMore = false
176181
}
177182

178-
if (window.infiniteScrolling) {
183+
window.addEventListener('load', () => {
184+
queryEl.value = page.add || page.filter
185+
186+
/* Place cursor at end of query text.
187+
* https://stackoverflow.com/a/10576409 */
188+
queryEl.addEventListener('focus', e => {
189+
setTimeout(() => { queryEl.selectionStart = queryEl.selectionEnd = 10000 }, 0)
190+
})
191+
192+
queryEl.focus()
193+
194+
if (page.add) {
195+
/* Remove query string from URL */
196+
history.replaceState({}, null, window.location.pathname)
197+
}
198+
})
199+
200+
if (page.infiniteScrolling) {
179201
window.addEventListener('scroll', e => {
180202
const offset =
181203
document.body.offsetHeight - (window.pageYOffset + window.innerHeight)

‎htdocs/index.php‎

Lines changed: 22 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,14 @@ function dumpEntries($entries)
8181
}
8282
}
8383

84+
$pageConfig = [
85+
'filter' => $filter ? $filter : '',
86+
'infiniteScrolling' => $b->getConfig('infiniteScrolling'),
87+
'add' => $_GET['add'] ?? null,
88+
];
89+
90+
$h = htmlspecialchars(...);
91+
8492
?>
8593
<!DOCTYPE html>
8694
<html>
@@ -99,55 +107,23 @@ function dumpEntries($entries)
99107
<body>
100108

101109
<div id="content">
102-
103-
<div class="header">
104-
<form id="filterform">
105-
<input id="query"
106-
autofocus
107-
type="text"
108-
name="query"
109-
placeholder=""
110-
value="<?php echo htmlspecialchars($filter); ?>"
111-
/>
112-
</form>
110+
<div class="header">
111+
<form id="filterform">
112+
<input id="query"
113+
autofocus
114+
type="text"
115+
name="query"
116+
placeholder=""
117+
value="<?php echo $h($filter); ?>"
118+
/>
119+
</form>
120+
</div>
121+
122+
<?php dumpEntries($entries); ?>
113123
</div>
114124

115-
<?php dumpEntries($entries); ?>
125+
<div data-b="<?php echo $h(json_encode($pageConfig)) ?>"></div>
116126

117-
</div>
118-
119-
<script>
120-
window.filter = <?php echo $filter ? json_encode($filter) : "''"; ?>
121-
122-
<?php if ($step = $b->getConfig('infiniteScrolling')): ?>
123-
window.infiniteScrolling = <?php echo $step; ?>
124-
<?php endif; ?>
125-
</script>
126127
<script src="bookmarkManager.js"></script>
127-
128-
<script>
129-
130-
(function () {
131-
window.onload = function() {
132-
const queryEl = document.getElementById('query')
133-
queryEl.value = <?php echo json_encode(!empty($_GET['add']) ? $_GET['add'] : (string)$filter); ?>
134-
135-
/* Place cursor at end of query text.
136-
* https://stackoverflow.com/a/10576409 */
137-
queryEl.addEventListener('focus', e => {
138-
setTimeout(() => { queryEl.selectionStart = queryEl.selectionEnd = 10000 }, 0)
139-
})
140-
141-
queryEl.focus()
142-
143-
<?php if (!empty($_GET['add'])): ?>
144-
/* Remove query string from URL */
145-
history.replaceState({}, null, window.location.pathname)
146-
<?php endif; ?>
147-
}
148-
}())
149-
150-
</script>
151-
152128
</body>
153129
</html>

0 commit comments

Comments
 (0)