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.
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.
Last modified 2yr ago