Introduction

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.

Method Description
app.open([url]) Opens the app. May also load an optional url.
app.close Closes 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.

Event Event 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>