WWL VM Tabs

Current Version	Master	Develop

View module (wwl-js-vm) implementation to maintain tabs view. The implementation is based on backbone and backbone.marionette.

Each tab requires to get a view object (Backbone.View api compatible) to passed in for each tab model. The model will render that view as content.

---

Important currently (0.1.1), the pure Marionette implementation (without cmi) is still open.

---

Example

context = new (require('wwl-js-app-context'))({ root: true })
vm      = new (require('wwl-js-vm-tabs'))({ context: context })

vm.getView().render()
$('body').append(vm.getView().$el)

# Create a dummy content view
View = Backbone.View.extend({ template: '<div><h1>Test</h1></div>' })
view = new View()

# Create a tab
tab = vm.addTab({
  view:   view
  title:  'My first Tab'
  active: true
})

# Listen to your tab

tab.on 'view:render', ->
  # The tab view itself has been rendered
  null

Installation

wwl-js-vm-tabs requires sass, coffeescript, browserify, hamlify.

Make sure, that for sass and for browserify, the load paths are set up correctly.

// In your applications stylesheet:

// For cmi version:
@import 'wwl-js-vm-tabs/base_cmi'

// For marionette-only version:
@import 'wwl-js-vm-tabs/base_no_cmi'

# In your js application:

# For cmi version:
VmClass = require('wwl-js-vm-tabs')

# For marionette-only version:
VmClass = require('wwl-js-vm-tabs/lib/vm')

Cmi Version

Important: To run the cmi version, you need to install webcomponents and link at least:

TODO replace with dependencies:

%link{ rel: "import", href: "../cmi-button/cmi-button.html" }
%link{ rel: "import", href: "../cmi-tabs/cmi-tabs.html" }

Unfortunatly, it's not easy to automate this.

General concept

The tabs stack is maintained by a Backbone.Collection with Backbone.Model instances. Each model represents a tab you can see. A tab model requires at least the attribute view on initialization.

Every action happening on your tabs view, you can listen to via the model.

There is always one tab with the attribute active:true - the view of the that model will be displayed in the content.

Tab Model Attributes

attribute	type	default	description
view	Backbone.View or same api	null	required - The view that will be rendered as content.
active	boolean	false	If the tab is active (visible). The collection will take care of that there is always just one tab active at the time.

Tab Model Events

event	description
view:beforeRender	Marionette event on the tab item view
view:render	Marionette event on the tab item view
view:beforeAttach	Marionette event on the tab item view
view:attach	Marionette event on the tab item view
view:beforeShow	Marionette event on the tab item view
view:show	Marionette event on the tab item view
view:domRefresh	Marionette event on the tab item view
view:beforeDestroy	Marionette event on the tab item view
view:destroy	Marionette event on the tab item view
view:action:activate	When the tab got active.
view:action:deactivate	When the tab got inactive.

With or without cmi webcomponents

By default the tabs are build on base of curo-material-interface.

So you'll get the webcomponents implementation if you call:

require('wwl-js-vm-tabs')

Or explicit:

require('wwl-js-vm-tabs/lib/vm_cmi')

If you want to have a marionette-only implementation, you would require the following:

require('wwl-js-vm-tabs/lib/vm')

How to contribute

1. Check at first your node version. (See also travis.yml)
2. Run npm install
3. For serve, just go inside the build folder and run the serve command.