From 7c428f77a6c8419fc178449ef0515e6fc4dbdf8f Mon Sep 17 00:00:00 2001 From: Philipp Volguine Date: Sun, 9 Jul 2023 04:44:00 -0400 Subject: [PATCH] Fix back/forward in the browser (__path was being read properly) --- script.js | 88 ++++++++++++++++++++++++++----------------------------- style.css | 16 +++++----- 2 files changed, 49 insertions(+), 55 deletions(-) diff --git a/script.js b/script.js index 497bae5..9cd5538 100644 --- a/script.js +++ b/script.js @@ -11,6 +11,10 @@ function prepend(elem, children) { function _log() { for (var arg of arguments) { + if (arg == null) { + continue; + } + var pre = document.createElement('pre'); pre.appendChild(text(arg.toString())); document.body.appendChild(pre); @@ -32,8 +36,6 @@ var console = { }; */ -var CurrentScore = null; - var global_elements; var GlobalElemSelectors = [ 'style' @@ -149,22 +151,16 @@ function createPagination(start_page_num, url, name, page_size, renderContent) { // Helper function to update the URL with the new page number function updatePageNumberInURL(pageNum) { - let params; - - if (window.location.search == "") { - params = {} - } else { - console.log("calling parseQueryParams. window.location.search:", window.location.search); - params = parseQueryParams(window.location.search.substring(1)); - } - - console.log("updatePageNumberInURL", params); - params[name.replaceAll(' ', '_')] = pageNum; - changeUrl("/", params, true); + const url = new URL(window.location.href); + const query_params = url.searchParams; + console.log("updatePageNumberInURL", query_params.constructor.name); + query_params.set(replaceAll(name, ' ', '_'), pageNum); + console.log("Hello World 1"); + changeUrl("/", query_params, true); } function createPaginationControls(page_num, dataset_size) { - const container = div(); + const container = document.createElement('nav'); container.classList.add('pagination'); // Calculate the total number of pages @@ -264,9 +260,6 @@ function createPagination(start_page_num, url, name, page_size, renderContent) { pageInfoText.innerText = `Loading page ${page_num} of ${name}`; cancelGlobalEvts(); - if (page_num > 0) { - } - return get(url, cancel, headers) .then(function(response) { // Retrieve the range and total number of results from the HTTP headers @@ -276,7 +269,7 @@ function createPagination(start_page_num, url, name, page_size, renderContent) { const controlsA = createPaginationControls(page_num, total_results); const controlsB = createPaginationControls(page_num, total_results); renderContent(json, controlsA, controlsB); - pageInfoText.innerText = `${name} ${page_num + 1}/${Math.ceil(total_results / page_size)}`; + pageInfoText.innerText = `${name} page ${page_num + 1}/${Math.ceil(total_results / page_size)}`; }) .catch(caught.bind(this, `Failed to load ${url} page ${page_num}. Reason:`)); } @@ -559,7 +552,7 @@ function renderNav() { var a_elem = _mkelem('a', text('All Known Spam Posts')); a_elem.addEventListener('click', function(e) { e.preventDefault(); - changeUrl('/', null, true); + changeUrl('/', new URLSearchParams(), true); }); a_elem.setAttribute('href', '#'); nav.appendChild(a_elem); @@ -711,18 +704,23 @@ function renderOverviewPost(post) { return postContainer; } +function replaceAll(input, find, replace) { + var regex = new RegExp(find, "g"); + return input.replace(regex, replace); +} + function loadKnownSpamPosts(params) { - if (params == null) { - params = {}; - } + console.log("loadKnownSpamPosts"); const pageName = "known spam posts"; + + console.log("HELLO WORLD 1"); + var url = GlobalVars.settings.postgrest_url + '/known_spam_post?select=*,known_spam_post_attachment(*,phash::text)' - const pageNum = Number(params[pageName.replaceAll(' ', '_')] || 0); + const pageNum = Number(params.get(replaceAll(pageName, ' ', '_')) || 0); function renderContent(json, controlsA, controlsB) { - pageInfoText.innerText = 'Have these known spam posts:'; var mainElem = document.querySelector('main'); mainElem.innerHTML = ''; mainElem.appendChild(controlsA); @@ -731,7 +729,7 @@ function loadKnownSpamPosts(params) { var postElem = renderOverviewPost(post); postElem.addEventListener('click', function() { - changeUrl('/spam_post/' + post.text_post_id, null, true); + changeUrl('/spam_post/' + post.text_post_id, new URLSearchParams(), true); }); mainElem.appendChild(postElem); @@ -744,6 +742,8 @@ function loadKnownSpamPosts(params) { } function changeUrl(path, search_query, push_state) { + console.log('changeURL'); + var event = new CustomEvent( 'urlchange', { @@ -824,12 +824,14 @@ function showSpamPost(path_data, _) { } function onUrlChange(e) { + console.log('Hello World 2'); var path = e.detail.path.split('/').filter(function(s){ return s.length; }); console.log(e, e.detail, path); if (e.detail.push_state) { - var params = Object.assign({ __path: e.detail.path }, e.detail.query); - var search_query = new URLSearchParams(params); + var search_query = e.detail.query; + search_query.set('__path', e.detail.path); + console.log("onUrlChange push_state search_query:", search_query, typeof search_query); window.history.pushState(null, "", window.location.origin + window.location.pathname + '?' + search_query.toString()); @@ -849,6 +851,14 @@ function aClickNav(e) { function bindEventHandlers() { window.addEventListener('urlchange', onUrlChange); window.addEventListener('popstate', onRealUrlChange); + + function on_pushstate(e) { + for (var i=0; i < 10; i++) { + console.log("pushstate", e); + } + } + + window.addEventListener('pushstate', on_pushstate); } function gatherElements() { @@ -862,27 +872,11 @@ function gatherElements() { } } -function parseQueryParams(querystring) { - console.log('parseQueryParams', querystring, querystring.split('&')); - return querystring.split('&') - .map(function(part) { - console.log(part); - return part.split('=').map(decodeURIComponent); - }) - .reduce(function(acc, pair) { return { [pair[0]]: pair[1] } }, {}); -} - function onRealUrlChange() { - //var path = window.location.pathname; - var path; - var query_params = parseQueryParams(window.location.search.substring(1)); + const url = new URL(window.location.href); + const query_params = url.searchParams; - if (query_params.__path != null) { - path = query_params.__path; - console.log("NEW PATH", path); - } else { - path = '/'; - } + const path = query_params.get('__path') || '/'; changeUrl(path, query_params); } diff --git a/style.css b/style.css index 71efca5..43f83d7 100644 --- a/style.css +++ b/style.css @@ -8,7 +8,7 @@ header { .post { background-color: white; - margin: 1em 1em; + margin: 1em 0; box-shadow: .4em .4em .4em grey; border: 1px solid grey; padding: 1em; @@ -23,17 +23,17 @@ header { margin-right: 1em; } +.post--image_container img { + max-width: 100%; +} + .post--body_container, .attachment-reason, .attachment { display: flow-root; } -.pagination a { - margin: 1em; - font-size: 2em; -} - -main nav { - margin: 1em; +nav a { + margin: 1rem; + font-size: 1.5em; }