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.

Opening, closing and toggling

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 toggling an app, which switches the UI state without having to keep track of wheter the app is open or closed. This makes it easy to set up a sliding drawer or an expanding area for the app.

To toggle an 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.

Tabbed apps

Weavy may also handle switching between apps. This is can be done on a space level for all the apps the space contains. When an app is opened, the other apps in the space are closed. To switch between multiple apps you need to set tabbed: true when setting up the space wich contains the apps to switch. By default when using tabbed: 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.

Tabbed apps may be handled in two ways. If you use .open() each app will be switched to when called, the same way as normal tabs. However, if you instead use .toggle() the app will be switched to or closed if already open, which is great if you want to combine a sliding drawer with tab functionality.

Methods

Each app has the following methods for handling the visual state.

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.
// App open
weavy.space("spacekey").app("appkey").open([url]);

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

// App close
weavy.space("spacekey").app("appkey").close();

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

Examples

Tabbed space

This example sets up two apps in a container then uses two buttons to switch between the two by using .open(). The first app is opened on load. It also makes it possible to handle links between the two or handle navigation.

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

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

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

    // Set up a tabbed space
    var space = weavy.space({ key: "main", container: "#tab-apps", tabbed: 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) {
        $("#tab-" + open.app.key).css("color", "blue");
    });
    space.on("close", function (e, close) {
        $("#tab-" + close.app.key).css("color", "");
    });

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

Toggled and tabbed space

This example sets up two apps in a container then uses two buttons to switch between the two by using .toggle(). The apps are closed until the buttons are clicked. Clicking the same button again after toggled open closes the app. 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="toggled-apps"></div>

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

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

    // Set up two apps
    var postsApp = space.app({ key: "posts", type: "posts" });
    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.toggle(); });
    $("#toggle-files").on("click", function () { filesApp.toggle(); });
</script>