Fix back/forward in the browser (__path was being read properly)
This commit is contained in:
towards-a-new-leftypol
parent
dd651d5cac
commit
db77a4c792
88
script.js
88
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);
|
||||
}
|
||||
|
|
|
|||
16
style.css
16
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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue