Open and closing apps

All apps in the client can be opened and closed. This is great to combine with visual states in your UI. It is mainly just a visual state, but also affects performance and some functionality. By default apps are opened when loaded. This can be controlled by the .open() and .close() methods. When any app opens or closes there is a corresponding event fired. This makes it possible to react to visual app states.

Using the open/close functionality and events is very benifical if you have weavy apps placed in panels, tabs or other containers that has changing visual states. Placing your UI state modifiers in the open or close event will make it possible for weavy to open the correct visual state for a specific app when needed. For instance if you in a posts app click a link to a document in the files app, weavy will be able to trigger the correct visual state to show the app.

Even more benefit is added if you would configure full navigation handling, since weavy will be able to trigger correct visual states without additional complex logic added when navigation is performed.

Toggling apps

Weavy has built in support for handling switching UI states of one or multiple apps. This makes it easy to set up a sliding drawer or tab handling. There are two types of toggling; toggling an individual app and toggling betweeen multiple apps.

Toggling a single app

To toggle an individual app, you simply call the .toggle() method of the app. This will open or close the app depending on the state, then trigger a toggle event followed by an open event or a close event. If you want the app to stay closed at start, set open: false on the app.

Toggling between apps

Weavy may also handle toggling between apps. This is can be done on a space level for the apps the space contains. When an app is opened, the other apps in the space are closed. To toggle between multiple apps you need to set toggle: true when setting up the space wich contains the apps to toggle. By default when using toggle: true, none of the apps in that space are opened automatically, unless you set open: true on the app you want to be opened at start.

Methods

Each app has the following methods for handling the visual state. The methods are also available as a shorthand on space level, but then you should also specify the selector of the app as first parameter.

// App open
weavy.space("spacekey").app("appkey").open([url]);

// Is equivalent to

// Space open
weavy.space("spacekey").open("appkey" [, url]);
MethodDescription
app.open([url])Opens the app. May also load an optional url.
app.closeCloses the app
app.toggle([url])Opens/closes the app depending on state. Closes related apps if the space is configured with toggle: true.

Events

Putting your UI state modifications in an event handler to show a sliding side panel for instance is mostly less work than you think. It's more about the flow order when opening that panel. Let's say you're adding a class .open to change the visual state of the container when you click a button. To involve weavy in handling the visual states would simply be to put the adding of the .open class within the open event and instead let the button trigger the .open() method of the app.

EventEvent data
open{ space, app, destination }
close{ space, app }
toggle{ space, app, closed }
var weavy = new Weavy();

var space = weavy.space({ key: "myspacekey" });
var app = space.app({ key: "myappkey", type: "posts" });

// Listen to an event in a specific app
app.on("open", function(e, open) { 
    // Do something
});

Event propagation

The app events propagates from the app to the space to the weavy instance. This means you can set up a handler for the event on any of these object. This also means that events for all apps in a space will fire on that space. Then events from all apps will fire on the weavy instance.

var weavy = new Weavy();

var space = weavy.space({ key: "myspacekey" });
var app = space.app({ key: "myappkey", type: "posts" });

// Listen to an event in a specific app
app.on("open", function(e, open) { 
    // Do something
});

// Listen to an event from any app in a space
space.on("open", function(e, open) {
    // filter out a specific app
    if (open.app.key === "myappkey") {
        // Do something
    }
})

// Listen to an event from any app
weavy.on("open", function(e, open) {
    // filter out a specific space and app
    if (open.space.key === "myspacekey" && open.app.key === "myappkey") {
        // Do something
    }
})

Example of tab toggling

This example sets up two apps in a container then uses two buttons to switch between the two. It also makes it possible to handle links between the two or handle navigation.

<button id="toggle-posts">Posts</button>
<button id="toggle-files">Files</button>

<div id="apps"></div>

<script defer>
    var weavy = new Weavy();

    // Set up a toggled space
    var space = weavy.space({ key: "main", container: "#apps", toggled: true });

    // Set up two apps
    var postsApp = space.app({ key: "posts", type: "posts", open: true });
    var filesApp = space.app({ key: "files", type: "files" });

    // Listen to events in the space
    space.on("open", function (e, open) {
        $("#toggle-" + open.app.key).css("color", "blue");
    });
    space.on("close", function (e, close) {
        $("#toggle-" + close.app.key).css("color", "");
    });

    // Add click listeners to the buttons
    $("#toggle-posts").on("click", function () { postsApp.open(); });
    $("#toggle-files").on("click", function () { filesApp.open(); });
</script>