On Pokemon Fusion, I found it annoying that the webpage didn't automatically update the tab URL to the permalink when the fusion is changed, so I decided to write a UserScript to do that.
After finishing that, I thought it would also be convenient to update the fusion whenever navigating through the site history as well.
// ==UserScript==
// @name Automated Permalink
// @namespace http://tampermonkey.net/
// @version 2.0
// @description automatically synchronizes permalink to fusion
// @author Patrick Roberts
// @match http://pokemon.alexonsager.net/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
var image = document.getElementById('pk_img');
window.addEventListener('popstate', function () {
var match = location.pathname.match(/\/(\d+)\/(\d+)/);
pokego(match[1], match[2]);
});
function updateHistory() {
var prev = location.pathname;
var next = image.src.replace(/.*(\d+)\/\1\.(\d+).*/, '/$2/$1');
if (prev === '/') {
history.replaceState(null, document.title, next);
} else if (prev !== next) {
history.pushState(null, document.title, next);
}
}
image.addEventListener('load', updateHistory);
updateHistory();
})();
I'd appreciate any feedback on improving perceived responsiveness for the feature this UserScript adds to the webpage.
I realize changing the URL after a slow image load within image.onload
might make the URL change seem slow, but I also noticed that when calling history.pushState()
or history.replaceState()
within a listener to a.onclick
or select.onchange
events, it appeared to cause the fusion image to load significantly slower.
Though this UserScript still functioned properly either way, I'm curious if anyone can come up with an approach that improves responsiveness overall.