Skip to content

Commit

Permalink
Merge pull request #111 from alphagov/update-examples-component
Browse files Browse the repository at this point in the history 
Update tabs on examples component
  • Loading branch information
@alex-ju
alex-ju authored Jan 10, 2018
2 parents c68184e + f017592 commit e5c1d24
Show file tree
Hide file tree
Showing 4 changed files with 68 additions and 39 deletions.
81 changes: 52 additions & 29 deletions src/javascripts/components/tabs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,35 @@

GOVUK.tabs = {

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

// Get tab container ID
var id = $(this).attr('href')
var $example = $(id).parent()

// Reset state
$('.app-c-tabs__item').removeClass('app-c-tabs__item--current')
$('.app-c-tabs__heading').removeClass('app-c-tabs__heading--current')
$('.app-c-tabs__item a').removeAttr('aria-selected')
$('.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)

// Set current active tab
// Set current active tab for both tabs and accordion links
$('[href="' + id + '"]').attr('aria-selected', 'true')
var $parents = $('[href="' + id + '"]').parent()
$.each($parents, function (key, obj) {
Expand All @@ -33,45 +48,53 @@
$(id).show().removeAttr('aria-hidden')
},

// Accordion mode
clickAccordionItem: function (e) {
// Tabs mode
clickTabItem: function (e) {
e.preventDefault()

// Get tab container ID
var id = $(this).attr('href')

// Let the main tabs deal with the states
$('.app-c-tabs__item a[href="' + id + '"]').click()
// Activate current tab
GOVUK.tabs.activateCurrentTab(id)
},

// Close current container on click
clickCloseContainer: function (e) {
e.preventDefault()
$('.app-c-tabs__item').removeClass('app-c-tabs__item--current')
$('.app-c-tabs__heading').removeClass('app-c-tabs__heading--current')
$('.app-c-tabs__container').hide().attr('aria-selected', 'true')

// Get tab container ID and save example object
var id = $(this).parent().attr('id')

// Reset tabs
GOVUK.tabs.resetTabs('#' + id)
},

init: function () {
init: function (selector) {
// If more than one container
if ($('.app-c-tabs__container').length > 1) {
// Hide all containers
$('.app-c-tabs__container').hide()

// Add close button to each container
$('.app-c-tabs__container').append('<a class="app-c-link--close app-o-chevron--top" href="#close">Close</a>')
}
var $examples = $(selector)
$.each($examples, function (key, obj) {
if ($(obj).find('.js-tabs__container').length > 1) {
// Hide all containers
$(obj).find('.js-tabs__container').hide()

// Add close button to each container
$(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.clickAccordionItem)
$('.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 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
5 changes: 4 additions & 1 deletion src/stylesheets/components/_tabs.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,10 +87,13 @@
}

.app-c-tabs__container pre {
padding-bottom: $govuk-spacing-scale-6;
border: 0;
}

.app-c-tabs__container--with-close-button pre {
padding-bottom: $govuk-spacing-scale-6;
}

// Close container button
.app-c-link--close {
position: absolute;
Expand Down
19 changes: 11 additions & 8 deletions views/partials/_example.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,33 +2,36 @@

{% set examplePath = "src/" + params.group + "/" + params.item + "/" + params.example + ".njk" %}
{% set exampleURL = "/" + params.group + "/" + params.item + "/" + params.example + "/index.html" %}
{% set examplePrefix = params.item + "-" + params.example + "-" %}
{% set exampleId = "example-" + params.example %}
{% if params.open %}
{% set exampleId = exampleId + '-open' %}
{% endif %}

<div class="app-c-example-wrapper">
<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 }}" frameBorder="0"></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="#{{examplePrefix}}html" role="tab" aria-controls="{{examplePrefix}}html"{% if (params.open) %}open{% endif %}>HTML</a></li>
<li class="app-c-tabs__item" role="presentation"><a href="#{{examplePrefix}}nunjucks" role="tab" aria-controls="{{examplePrefix}}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="#{{examplePrefix}}html" role="tab" aria-controls="{{examplePrefix}}html">HTML</a></div>
<div class="app-c-tabs__container" id="{{examplePrefix}}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="#{{examplePrefix}}nunjucks" role="tab" aria-controls="{{examplePrefix}}nunjucks">Nunjucks</a></div>
<div class="app-c-tabs__container" id="{{examplePrefix}}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 e5c1d24

Please sign in to comment.