Skip to content

Commit

Permalink
Refactor tabs.js to use 'js-' prefixes for DOM manipulation
Browse files Browse the repository at this point in the history
  • Loading branch information
@alex-ju
alex-ju committed Jan 10, 2018
1 parent 864ec37 commit f017592
Show file tree
Hide file tree
Showing 3 changed files with 34 additions and 22 deletions.
40 changes: 26 additions & 14 deletions src/javascripts/components/tabs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,29 @@

// Reset tabs and containers
resetTabs: function (id) {
// Check if we have an id
if (!id) {
console.error('id is undefined')
return
}

var $example = $(id).parent()

// Reset state
$example.find('.app-c-tabs__item').removeClass('app-c-tabs__item--current')
$example.find('.app-c-tabs__heading').removeClass('app-c-tabs__heading--current')
$example.find('.app-c-tabs__item a').removeAttr('aria-selected')
$example.find('.app-c-tabs__container').hide().attr('aria-hidden', 'true')
$example.find('.js-tabs__item').removeClass('app-c-tabs__item--current')
$example.find('.js-tabs__heading').removeClass('app-c-tabs__heading--current')
$example.find('.js-tabs__item a').removeAttr('aria-selected')
$example.find('.js-tabs__container').hide().attr('aria-hidden', 'true')
},

// Activate current tab
activateCurrentTab: function (id) {
// Check if we have an id
if (!id) {
console.error('id is undefined')
return
}

// Reset tabs
GOVUK.tabs.resetTabs(id)

Expand Down Expand Up @@ -58,31 +70,31 @@
GOVUK.tabs.resetTabs('#' + id)
},

init: function () {
init: function (selector) {
// If more than one container
var $examples = $('.app-c-example-wrapper')
var $examples = $(selector)
$.each($examples, function (key, obj) {
if ($(obj).find('.app-c-tabs__container').length > 1) {
if ($(obj).find('.js-tabs__container').length > 1) {
// Hide all containers
$(obj).find('.app-c-tabs__container').hide()
$(obj).find('.js-tabs__container').hide()

// Add close button to each container
$(obj).find('.app-c-tabs__container').append('<a class="app-c-link--close app-o-chevron--top" href="#close">Close</a>')
$(obj).find('.app-c-tabs__container').addClass('app-c-tabs__container--with-close-button')
$(obj).find('.js-tabs__container').append('<a class="app-c-link--close js-link--close app-o-chevron--top" href="#close">Close</a>')
$(obj).find('.js-tabs__container').addClass('app-c-tabs__container--with-close-button')
}
})

// Bind tab item click
$('.app-c-tabs__item a').click(GOVUK.tabs.clickTabItem)
$('.js-tabs__item a').click(GOVUK.tabs.clickTabItem)

// Bind accordion item click
$('.app-c-tabs__heading a').click(GOVUK.tabs.clickTabItem)
$('.js-tabs__heading a').click(GOVUK.tabs.clickTabItem)

// Bind close container link
$('.app-c-link--close').click(GOVUK.tabs.clickCloseContainer)
$('.js-link--close').click(GOVUK.tabs.clickCloseContainer)

// Show open containers
$('.app-c-tabs__heading a[open]').click()
$('.js-tabs__heading--open a').click()
}
}

Expand Down
2 changes: 1 addition & 1 deletion src/javascripts/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ $(document).ready(function () {
GOVUK.example.init('.js-example__frame')

// Initialise tabs
GOVUK.tabs.init()
GOVUK.tabs.init('.js-example')

// Add copy to clipboard to code blocks inside tab containers
GOVUK.copy.init('.app-c-tabs__container pre')
Expand Down
14 changes: 7 additions & 7 deletions views/partials/_example.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,31 +7,31 @@
{% set exampleId = exampleId + '-open' %}
{% endif %}

<div class="app-c-example-wrapper" id="{{ exampleId }}">
<div class="app-c-example-wrapper js-example" id="{{ exampleId }}">
<div class="app-c-example {{ "app-c-example--tabs" if params.html or params.nunjucks }}">
<span class="app-c-example__new-window"><a href="{{ exampleURL }}" target="_blank">(open in new window)</a></span>
<iframe class="app-c-example__frame app-c-example__frame--resizable js-example__frame" src="{{ exampleURL }}"></iframe>
</div>

{%- if (params.html and params.nunjucks) %}
<ul class="app-c-tabs" role="tablist">
<li class="app-c-tabs__item" role="presentation"><a href="#{{ exampleId }}-html" role="tab" aria-controls="{{ exampleId }}-html"{{ " open" if (params.open) }}>HTML</a></li>
<li class="app-c-tabs__item" role="presentation"><a href="#{{ exampleId }}-nunjucks" role="tab" aria-controls="{{ exampleId }}-nunjucks">Nunjucks</a></li>
<li class="app-c-tabs__item js-tabs__item{{ " js-tabs__item--open" if (params.open) }}" role="presentation"><a href="#{{ exampleId }}-html" role="tab" aria-controls="{{ exampleId }}-html">HTML</a></li>
<li class="app-c-tabs__item js-tabs__item" role="presentation"><a href="#{{ exampleId }}-nunjucks" role="tab" aria-controls="{{ exampleId }}-nunjucks">Nunjucks</a></li>
</ul>
{% endif %}

{%- if (params.html) %}
<div class="app-c-tabs__heading"><a href="#{{ exampleId }}-html" role="tab" aria-controls="{{ exampleId }}-html"{{ " open" if (params.open) }}>HTML</a></div>
<div class="app-c-tabs__container" id="{{ exampleId }}-html" role="tabpanel">
<div class="app-c-tabs__heading js-tabs__heading{{ " js-tabs__heading--open" if (params.open) }}"><a href="#{{ exampleId }}-html" role="tab" aria-controls="{{ exampleId }}-html">HTML</a></div>
<div class="app-c-tabs__container js-tabs__container" id="{{ exampleId }}-html" role="tabpanel">
```html
{{ getHTMLCode(examplePath) | safe }}
```
</div>
{% endif %}

{%- if (params.nunjucks) %}
<div class="app-c-tabs__heading"><a href="#{{ exampleId }}-nunjucks" role="tab" aria-controls="{{ exampleId }}-nunjucks">Nunjucks</a></div>
<div class="app-c-tabs__container" id="{{ exampleId }}-nunjucks" role="tabpanel">
<div class="app-c-tabs__heading js-tabs__heading"><a href="#{{ exampleId }}-nunjucks" role="tab" aria-controls="{{ exampleId }}-nunjucks">Nunjucks</a></div>
<div class="app-c-tabs__container js-tabs__container" id="{{ exampleId }}-nunjucks" role="tabpanel">
```js
{{ getNunjucksCode(examplePath) | safe }}
```
Expand Down

0 comments on commit f017592

Please sign in to comment.