diff --git a/tabswap/index.es6 b/tabswap/index.es6 index 3b56148..05b674e 100644 --- a/tabswap/index.es6 +++ b/tabswap/index.es6 @@ -8,7 +8,12 @@ const labels = options => { options = R.merge({ names: [] , active$: flyd.stream(0) + , setWidth: false }, options) + + + const width = options.setWidth ? 100 / options.names.length + '%' : false + return h('div', { attrs: { 'data-ff-tabswap': 'active:' + options.active$() @@ -16,13 +21,14 @@ const labels = options => { , 'data-ff-tabswap-labels-count': options.names.length } }, - map(labelSingle(options.active$), options.names) + map(labelSingle(options.active$, width), options.names) ) } -const labelSingle = active$ => (name, idx) => +const labelSingle = (active$, width) => (name, idx) => h('div', { attrs: {'data-ff-tabswap-label-wrapper': true} + , style: {width: width ? width : ''} }, [ h("a", { on: {click: [active$, idx]} diff --git a/tabswap/test/index.js b/tabswap/test/index.js index d947bf8..a84066f 100644 --- a/tabswap/test/index.js +++ b/tabswap/test/index.js @@ -5,15 +5,15 @@ const h = require('snabbdom/h') const tabswap = require('../index.es6') const render = require('flimflam-render') -function init() { +function init(labelOptions) { const state = { active$: flyd.stream(1) } const view = state => h('div', [ - tabswap.labels({ + tabswap.labels(R.merge({ names: ['a', 'b'] , active$: state.active$ - }) + }, labelOptions)) , tabswap.content({ sections: ['content a', 'content b'] , active$: state.active$ @@ -30,7 +30,6 @@ test('it renders the labels', t=> { t.plan(1) const streams = init() const labels = streams.container.querySelectorAll('[data-ff-tabswap-label]') - document.body.appendChild(streams.container) t.strictEqual(labels.length, 2) }) @@ -51,7 +50,6 @@ test('it renders the text content', t=> { test('on click of a label, it swaps data states of labels', t=> { t.plan(1) const streams = init() - const content = streams.container.textContent streams.container.querySelectorAll('[data-ff-tabswap-label]')[1].click() const states = R.map( node => node.getAttribute('data-ff-tabswap-label') @@ -71,3 +69,18 @@ test('on click of a label, it swaps data states of content', t=> { ) t.deepEqual(states, ['inactive', 'active']) }) + +test('it sets the width of the label wrappers when setWidth option is true', t=> { + t.plan(1) + const streams = init({setWidth: true}) + const label = streams.container.querySelector('[data-ff-tabswap-label-wrapper]') + t.strictEqual(label.style.width, '50%') +}) + +test('it does not set the width of the label wrappers when setWidth option is false', t=> { + t.plan(1) + const streams = init() + const label = streams.container.querySelector('[data-ff-tabswap-label-wrapper]') + t.strictEqual(label.style.width, '') +}) +