Skip to content

Commit

Permalink
Change the title attribute of su-tab from 'title' to 'label'
Browse files Browse the repository at this point in the history
  • Loading branch information
@black-trooper
black-trooper committed Dec 4, 2018
1 parent c6c85ff commit e8a6ac6
Show file tree
Hide file tree
Showing 6 changed files with 313 additions and 32 deletions.
26 changes: 21 additions & 5 deletions dist/tags/tab/su-tabset.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
riot.tag2('su-tabset', '<div class="ui {opts.class} {getClass()} menu" if="{!isBottom() && !hasTitle()}"> <a each="{tab, i in tabs}" class="{tab.opts.titleClass} {active: tab.active} item" onclick="{click}">{tab.opts.title}</a> </div> <yield></yield> <div class="ui {opts.class} {getClass()} menu" if="{isBottom() && !hasTitle()}"> <a each="{tab, i in tabs}" class="{tab.opts.titleClass} {active: tab.active} item" onclick="{click}">{tab.opts.title}</a> </div>', '', '', function(opts) {
riot.tag2('su-tabset', '<div class="ui {opts.class} {getClass()} menu" if="{!isBottom() && !hasTitle()}"> <a each="{tab, i in tabs}" class="{tab.opts.titleClass} {active: tab.active} item" onclick="{click}">{tab.opts.label}</a> </div> <yield></yield> <div class="ui {opts.class} {getClass()} menu" if="{isBottom() && !hasTitle()}"> <a each="{tab, i in tabs}" class="{tab.opts.titleClass} {active: tab.active} item" onclick="{click}">{tab.opts.label}</a> </div>', '', '', function(opts) {
this.tabs = []
let lastOptsActive, lastActive, active

Expand All @@ -8,16 +8,17 @@ riot.tag2('su-tabset', '<div class="ui {opts.class} {getClass()} menu" if="{!isB
}

this.tabs = this.tags['su-tab']

if (!Array.isArray(this.tabs)) {
this.tabs = [this.tabs]
}
supportTraditionalOptions()

if (typeof opts.active === 'undefined') {
const titles = this.hasTitle()
if (titles) {
opts.active = titles[0].root.innerText.trim()
} else {
opts.active = this.tabs[0].opts.title
opts.active = this.tabs[0].opts.label
}
}

Expand All @@ -29,6 +30,7 @@ riot.tag2('su-tabset', '<div class="ui {opts.class} {getClass()} menu" if="{!isB
})

this.on('update', () => {
supportTraditionalOptions()
let changed = false
if (lastOptsActive != opts.active) {
lastOptsActive = opts.active
Expand Down Expand Up @@ -60,7 +62,7 @@ riot.tag2('su-tabset', '<div class="ui {opts.class} {getClass()} menu" if="{!isB
})
} else {
this.tabs.forEach(tab => {
tab.active = tab.opts.title == active
tab.active = tab.opts.label == active
})
if (!this.tabs.some(tab => tab.active)) {
this.tabs[0].active = true
Expand All @@ -70,7 +72,7 @@ riot.tag2('su-tabset', '<div class="ui {opts.class} {getClass()} menu" if="{!isB
})

this.click = event => {
active = event.item.tab.opts.title
active = event.item.tab.opts.label
this.update()
this.trigger('click', active)
}
Expand Down Expand Up @@ -148,4 +150,18 @@ riot.tag2('su-tabset', '<div class="ui {opts.class} {getClass()} menu" if="{!isB
return this.root.classList.contains(className)
}

let shownMessage = false
const supportTraditionalOptions = () => {
this.tabs.forEach(tab => {
if (typeof tab.opts.title !== 'undefined') {
if (!shownMessage) {
console.warn('\'title\' attribute is deprecated. Please use \'label\'.')
}
shownMessage = true
tab.opts.label = tab.opts.title
tab.opts.title = undefined
}
})
}

});
28 changes: 22 additions & 6 deletions tags/tab/su-tabset.tag
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<su-tabset>
<div class="ui { opts.class } { getClass() } menu" if="{ !isBottom() && !hasTitle() }">
<a each="{ tab, i in tabs }" class="{tab.opts.titleClass} {active: tab.active} item" onclick="{ click }">{ tab.opts.title }</a>
<a each="{ tab, i in tabs }" class="{tab.opts.titleClass} {active: tab.active} item" onclick="{ click }">{ tab.opts.label }</a>
</div>
<yield />
<div class="ui { opts.class } { getClass() } menu" if="{ isBottom() && !hasTitle() }">
<a each="{ tab, i in tabs }" class="{tab.opts.titleClass} {active: tab.active} item" onclick="{ click }">{ tab.opts.title }</a>
<a each="{ tab, i in tabs }" class="{tab.opts.titleClass} {active: tab.active} item" onclick="{ click }">{ tab.opts.label }</a>
</div>

<script>
Expand All @@ -18,16 +18,17 @@
}

this.tabs = this.tags['su-tab']

if (!Array.isArray(this.tabs)) {
this.tabs = [this.tabs]
}
supportTraditionalOptions()

if (typeof opts.active === 'undefined') {
const titles = this.hasTitle()
if (titles) {
opts.active = titles[0].root.innerText.trim()
} else {
opts.active = this.tabs[0].opts.title
opts.active = this.tabs[0].opts.label
}
}

Expand All @@ -39,6 +40,7 @@
})

this.on('update', () => {
supportTraditionalOptions()
let changed = false
if (lastOptsActive != opts.active) {
lastOptsActive = opts.active
Expand Down Expand Up @@ -70,7 +72,7 @@
})
} else {
this.tabs.forEach(tab => {
tab.active = tab.opts.title == active
tab.active = tab.opts.label == active
})
if (!this.tabs.some(tab => tab.active)) {
this.tabs[0].active = true
Expand All @@ -83,7 +85,7 @@
// Event
// =====
this.click = event => {
active = event.item.tab.opts.title
active = event.item.tab.opts.label
this.update()
this.trigger('click', active)
}
Expand Down Expand Up @@ -167,5 +169,19 @@
return this.root.classList.contains(className)
}

let shownMessage = false
const supportTraditionalOptions = () => {
this.tabs.forEach(tab => {
if (typeof tab.opts.title !== 'undefined') {
if (!shownMessage) {
console.warn('\'title\' attribute is deprecated. Please use \'label\'.')
}
shownMessage = true
tab.opts.label = tab.opts.title
tab.opts.title = undefined
}
})
}

</script>
</su-tabset>
38 changes: 19 additions & 19 deletions test/spec/tab/su-tabset.options.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ describe('su-tabset-options', function () {
it('su-tab has class', function () {
mount(`
<su-tabset>
<su-tab title="Home" class="none">Home content</su-tab>
<su-tab title="Message" class="none">Messages content</su-tab>
<su-tab label="Home" class="none">Home content</su-tab>
<su-tab label="Message" class="none">Messages content</su-tab>
</su-tabset>`)

tag.tags['su-tab'][0].root.classList.contains('none').should.equal(true)
Expand All @@ -27,8 +27,8 @@ describe('su-tabset-options', function () {
it('no segment', function () {
mount(`
<su-tabset class="no-segment">
<su-tab title="Home">Home content</su-tab>
<su-tab title="Message">Messages content</su-tab>
<su-tab label="Home">Home content</su-tab>
<su-tab label="Message">Messages content</su-tab>
</su-tabset>`)

tag.tags['su-tab'][0].root.classList.contains('segment').should.equal(false)
Expand All @@ -38,8 +38,8 @@ describe('su-tabset-options', function () {
it('top tabular', function () {
mount(`
<su-tabset class="top tabular">
<su-tab title="Home">Home content</su-tab>
<su-tab title="Message">Messages content</su-tab>
<su-tab label="Home">Home content</su-tab>
<su-tab label="Message">Messages content</su-tab>
</su-tabset>`)

tag.tags['su-tab'][0].root.classList.contains('tabular').should.equal(true)
Expand All @@ -54,8 +54,8 @@ describe('su-tabset-options', function () {
it('bottom tabular', function () {
mount(`
<su-tabset class="bottom tabular">
<su-tab title="Home">Home content</su-tab>
<su-tab title="Message">Messages content</su-tab>
<su-tab label="Home">Home content</su-tab>
<su-tab label="Message">Messages content</su-tab>
</su-tabset>`)

tag.tags['su-tab'][0].root.classList.contains('tabular').should.equal(true)
Expand All @@ -70,8 +70,8 @@ describe('su-tabset-options', function () {
it('top attached', function () {
mount(`
<su-tabset class="top attached">
<su-tab title="Home">Home content</su-tab>
<su-tab title="Message">Messages content</su-tab>
<su-tab label="Home">Home content</su-tab>
<su-tab label="Message">Messages content</su-tab>
</su-tabset>`)

tag.tags['su-tab'][0].root.classList.contains('attached').should.equal(true)
Expand All @@ -84,8 +84,8 @@ describe('su-tabset-options', function () {
it('bottom attached', function () {
mount(`
<su-tabset class="bottom attached">
<su-tab title="Home">Home content</su-tab>
<su-tab title="Message">Messages content</su-tab>
<su-tab label="Home">Home content</su-tab>
<su-tab label="Message">Messages content</su-tab>
</su-tabset>`)

tag.tags['su-tab'][0].root.classList.contains('attached').should.equal(true)
Expand Down Expand Up @@ -129,8 +129,8 @@ describe('su-tabset-options', function () {
it('default active', function () {
mount(`
<su-tabset active="Message">
<su-tab title="Home">Home content</su-tab>
<su-tab title="Message">Messages content</su-tab>
<su-tab label="Home">Home content</su-tab>
<su-tab label="Message">Messages content</su-tab>
</su-tabset>`)

tag.tags['su-tab'][0].active.should.equal(false)
Expand All @@ -140,8 +140,8 @@ describe('su-tabset-options', function () {
it('default active is not match', function () {
mount(`
<su-tabset active="Nothing">
<su-tab title="Home">Home content</su-tab>
<su-tab title="Message">Messages content</su-tab>
<su-tab label="Home">Home content</su-tab>
<su-tab label="Message">Messages content</su-tab>
</su-tabset>`)

tag.tags['su-tab'][0].active.should.equal(true)
Expand All @@ -151,7 +151,7 @@ describe('su-tabset-options', function () {
it('single tab', function () {
mount(`
<su-tabset>
<su-tab title="Home">Home content</su-tab>
<su-tab label="Home">Home content</su-tab>
</su-tabset>`)

tag.tags['su-tab'].root.classList.contains('segment').should.equal(true)
Expand Down Expand Up @@ -180,8 +180,8 @@ describe('su-tabset-options', function () {
it('lazy mount', function () {
mount(`
<su-tabset lazy-mount="true">
<su-tab title="Home" class="none">Home content</su-tab>
<su-tab title="Message" class="none">Messages content</su-tab>
<su-tab label="Home" class="none">Home content</su-tab>
<su-tab label="Message" class="none">Messages content</su-tab>
</su-tabset>`)

tag.tags['su-tab'][0].active.should.equal(true)
Expand Down

0 comments on commit e8a6ac6

Please sign in to comment.