Skip to content

Commit 0fc8e54

Browse files
mrclaymrclay
committed
Clean up JS
1 parent d0d240b commit 0fc8e54

File tree

2 files changed

+48
-54
lines changed

2 files changed

+48
-54
lines changed

‎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: 18 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -99,55 +99,27 @@ function dumpEntries($entries)
9999
<body>
100100

101101
<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>
113-
</div>
114-
115-
<?php dumpEntries($entries); ?>
116-
102+
<div class="header">
103+
<form id="filterform">
104+
<input id="query"
105+
autofocus
106+
type="text"
107+
name="query"
108+
placeholder=""
109+
value="<?php echo htmlspecialchars($filter); ?>"
110+
/>
111+
</form>
112+
</div>
113+
114+
<?php dumpEntries($entries); ?>
117115
</div>
118116

119-
<script>
120-
window.filter = <?php echo $filter ? json_encode($filter) : "''"; ?>
117+
<div data-b="<?php echo htmlspecialchars(json_encode([
118+
'filter' => $filter ? $filter : '',
119+
'infiniteScrolling' => $b->getConfig('infiniteScrolling'),
120+
'add' => $_GET['add'] ?? null,
121+
])) ?>"></div>
121122

122-
<?php if ($step = $b->getConfig('infiniteScrolling')): ?>
123-
window.infiniteScrolling = <?php echo $step; ?>
124-
<?php endif; ?>
125-
</script>
126123
<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-
152124
</body>
153125
</html>

0 commit comments

Comments
 (0)