Going back to previous sections (back link, history)

jhlagado

I looked around but I couldn't see a way of going back to a previous section so I implemented something myself that adds a Go Back link to every page (except the first). This is more of an issue for people who want each page to be separate (using @clear) instead of scrolling.

All feedback is welcome, especially if someone knows an easier way to do the same thing.

@title New Game

Here is the beginning.

[[page1]]

[[]]:
@clear

    //some useful code we put in functions
    //so we can reuse it when we need it
    
    //return the history list from storage
    function getHistory(){

        //load history list from storage
        var history = squiffy.get('history');
        if (!history) {

            //if there isn't one already, create it
            history = [];

            //save history to storage
            squiffy.set('history', history);
        }
        return history;
    }

    //go to the previous place in our history list
    function goBack() {

        //get history
        var history = getHistory();

        //remove the current section from history 
        history.pop();

        //remove the previous section from history 
        //and put it in a variable
        var sectionid = history.pop();

        //save history to storage
        squiffy.set('history', history);

        //go to previous section
        squiffy.story.go(sectionid)
    }

    //make this function visible to "onlick" links
    window.goBack = goBack;

    // get history list from storage
    var history = getHistory();
    
    if (history.length > 0) {
        //if the history list is longer than one section
        //then show the "go back" link
        squiffy.ui.write(
        '<a href="#" onclick="window.goBack()">Go back</a>');
    }    
    //add the current section in the history list
    history.push(get('_section'));
    
    //save the history list in storage
    squiffy.set('history', history);

This is section {_section}

[[inventory]]

[[page1]]:
Go to [[page2]]

[[page2]]:
Go to [[page3]]

[[page3]]:
Go to [[page4]]

[[page4]]:

[[inventory]]:
Inventory


thetruespin

Good solution. Don't need it personally but thanks for sharing.


jhlagado

Thanks. Hopefully it's useful just to show working code for those that want to do more JavaScript.
The documentation is very, uh, brief.

Here's a slightly different approach. In this case you don't want to have a goBack available on every page. Only those that need it. But say you had an inventory page that you wanted to be able to access from anywhere. Furthermore that inventory links to a map section that you can also read. In that case it would be useful to be able to return from the map back to the inventory and from the inventory back to the page you were originally on.

@title New Game

Here is the beginning.

[[page1]]

[[]]:
@clear

    //some useful code we put in functions
    //so we can reuse it when we need it

    //return the history list from storage
    function getHistory(){

        //load history list from storage
        var history = squiffy.get('history');
        if (!history) {

            //if there isn't one already, create it
            history = [];

            //save history to storage
            squiffy.set('history', history);
        }
        return history;
    }

    //go to the previous place in our history list
    function goBack() {

        var history = getHistory();

        //remove the current section from history
        history.pop();

        //remove the previous section from history
        //and put it in a variable
        var sectionid = history.pop();

        //save history to storage
        squiffy.set('history', history);

        //go to previous section
        squiffy.story.go(sectionid)
    }

    function sectionLink(sectionid, linkname) {

        var history = getHistory();
        
        //look in history list for sectionid
        //if not found, indeOf function returns -1
        if (history.indexOf(sectionid) == -1) {
        
           //sectionid not in history
           squiffy.ui.write(
               '<a href="#" onclick="squiffy.story.go(\'' +
               sectionid +
               '\')">' +
               linkname +
               '</a>'
           );
        }
    }


    //make squiffy visible to onclick links
    window.squiffy = squiffy;

    //make this function visible to "onlick" links
    window.goBack = goBack;

    // get history list from storage
    var history = getHistory();

    var section = get('_section');
    //add the current section in the history list
    history.push(section);

    //save the history list in storage
    squiffy.set('history', history);

    sectionLink('inventory', 'Inventory');


[[page1]]:
Go to [[page2]]

[[page2]]:
Go to [[page3]]

[[page3]]:
Go to [[page4]]

[[page4]]:

[[inventory]]:
Inventory

[[map]]

Sunglasses<br>{if seen ch1.detectivefiles1: [[Case file: Simon Bresic]](ch1.readFile)}
<br><br>
<a href="#" onclick="window.goBack()">Go back!</a><br>

[[map]]:
Reading the map
<br><br>
<a href="#" onclick="window.goBack()">Go back!</a><br>

This topic is now closed. Topics are closed after 60 days of inactivity.

Support

Forums