# Single Page Application API

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

{% hint style="info" %}
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.
{% endhint %}

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.

{% hint style="info" %}
The order the artboards are displayed are based on their position in the layers panel. To reorder the artboards reorder the artboard layers. 
{% endhint %}

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
}
```

{% hint style="info" %}
If there is an API you'd like added or framework feature contact support. 
{% endhint %}