Developing Steemfiles : Journal Entry for 2018 03(March) 16

in #steemdev6 years ago

March 16th, 2018

In this developer's journal of Steemfiles:

  • Using History in Javascript

Using History in Javascript

Steemfiles is getting some upgrades. You will be able to use the forward and back buttons in order to move within the single webpage.

So when the webpage first opens up I use replace state in order to put information for working with the back button handler:

    window.history.replaceState({'file': null, 'pane': 'explanation_item'}, '', document.location.pathname + document.location.search + document.location.hash);

Then I install the back button handler

    window.onpopstate = function(event) {
        console.log("Poping State:  location: " + document.location + ", state: " + JSON.stringify(event.state));
        console.log(event.state);
        try {
            switch_pane_with_state(event.state['pane'], false);
        } catch (e) {
            switch_pane_with_state('explanation_item', false);
        }
    };    

Finally when shifting between the Explantion, Upload, Gallery, Contact, or Login sections I use pushState:

         if (with_state)
             window.history.pushState({'file': null, 'pane': target_el_id}, '', '/cgi-bin/index.cgi');

One word of caution here. Be careful not to pushstate while being called by the back button handler is being called! If you do that, you will find back works once and then just does nothing. It's easy to do. You might be calling functions from inside functions. Be careful.

Previous Journal Entries:

Dash XjzjT4mr4f7T3E8G9jQQzozTgA2J1ehMkV
LTC LLXj1ZPQPaBA1LFtoU1Gkvu5ZrxYzeLGKt
BitcoinCash 1KVqnW7wZwn2cWbrXmSxsrzqYVC5Wj836u
Bitcoin 1Q1WX5gVPKxJKoQXF6pNNZmstWLR87ityw (too expensive to use for tips)

See also


Coin Marketplace

STEEM 0.18
TRX 0.14
JST 0.030
BTC 58679.35
ETH 3155.04
USDT 1.00
SBD 2.44