Single Page Application API

The API for the single page application

With a Single Page Application you can export multiple artboards to one page. Using the application API you can switch pages.

When an artboard or artboards are exported to a web page they become a view. That is the term we use to describe the artboard on the web page.

The documentation is a work in progress.

Settings using CSS Variables

In a Single Page Application the CSS in the root tag has the list of artboard views and options for that page:

:root {
    --web-view-ids: Cats,Whiskers,Mittens,Snowball,Ending;
    --web-view-name: Cats;
    --web-view-id: Cats;
    --web-scale-to-fit: false;
    --web-scale-to-fit-type: default;
    --web-enable-scale-up: false;
    --web-scale-on-resize: false;
    --web-show-scale-controls: false;
    --web-scale-on-double-click: false;
    --web-center-horizontally: false;
    --web-center-vertically: false;
    --web-actual-size-on-double-click: false;
    --web-navigate-on-keypress: false;
    --web-refresh-for-changes: false;
    --web-add-image-compare: false;
    --web-application: true;
    --web-show-navigation-controls: false;
    --web-enable-deep-linking: true;
}

When the page loads it looks for media queries that contains a rule with an ID that matches the name of the artboard:

@media (min-width: 0px) {
    #Cats {
        width: 960px;
        height: 630px;
        background-color: rgba(247,247,247,1);
        overflow: hidden;
        margin: 0;
        padding: 0;
        --web-view-name: Cats;
        --web-view-id: Cats;
        --web-center-horizontally: true;
        --web-application: true;
        --web-enable-deep-linking: true;
    }
}

When the page loads it shows the view defined in the root selector. This is usually the first artboard.

The order the artboards are displayed are based on their position in the layers panel. To reorder the artboards reorder the artboard layers.

You can show different views by using the goToState() method.

application.goToState("Cats");

To get a list of views use the getViewIds():

application.getViewIds();

To get a reference to a view use getViewById():

var view = application.getViewById("Whiskers")

To show a view (without hiding the others) use:

var view = application.getViewById("Whiskers")
application.showView(view);

The views contains a dictionary of the view name and element:

var views = application.views;
var view = views["Cats"];

To hide all views use the hideViews() method:

application.hideViews();

To get the current or selected view use getVisibleView():

var view = self.getVisibleView();

When you change views a viewChange event is dispatched.

window.addEventListener(self.NAVIGATION_CHANGE, myViewChangeHandler);

When the application is ready an applicationComplete event is dispatched:

window.dispatchEvent(new Event(self.APPLICATION_COMPLETE));

To update the URL fragment use the updateURL() method;

 var view = application.getViewById("Cats");
 application.updateURL(view);

Or use the syncronizeViewToURL() to load the view that is in the URL fragment:

 application.syncronizeViewToURL();

You can go to the next or previous view using the nextView() and previousView() methods. The views are ordered in the --web-view-ids CSS variable:

application.nextView();
application.previousView();

You may be able to add your own views or nest states via media queries.

You can use the showStateFunction(view, state)to choose if a view should be shown or hidden. This is called when the URL changes.

application.showStateFunction = function (view, state) {
    return true; // show state or view
}

If there is an API you'd like added or framework feature contact support.