Skip to content

Commit

Permalink
Tabs: Added ability to control rotation interval through data-wb-tabs
Browse files Browse the repository at this point in the history
  • Loading branch information
Paul Jackson authored and Paul Jackson committed Jun 3, 2014
1 parent 518e673 commit 49fbf94
Show file tree
Hide file tree
Showing 3 changed files with 208 additions and 15 deletions.
101 changes: 96 additions & 5 deletions src/plugins/tabs/tabs-carousel-en.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,13 @@
"tag": "tabs, carousel",
"parentdir": "tabs",
"altLangPrefix": "tabs-carousel",
"dateModified": "2014-05-23"
"dateModified": "2014-06-03"
}
---

<section>
<h2>Carousel style 1 (<code>carousel-s1</code>)</h2>
<div class="wb-tabs carousel-s1" data-speed="slow">
<div class="wb-tabs carousel-s1">
<ul role="tablist">
<li class="active"><a href="#panel1">Image 1</a></li>
<li><a href="#panel2">Image 2</a></li>
Expand Down Expand Up @@ -57,7 +57,7 @@

<section>
<h2>Carousel style 2 (<code>carousel-s2</code>)</h2>
<div class="wb-tabs carousel-s2" data-speed="slow">
<div class="wb-tabs carousel-s2">
<ul role="tablist">
<li class="active"><a href="#panel4"><img src="img/protect-environment.jpg" alt="tab 1" /></a></li>
<li><a href="#panel5"><img src="img/banff.jpg" alt="tab 2" /></a></li>
Expand Down Expand Up @@ -104,7 +104,7 @@
<div class="row">
<section class="col-sm-6 col-md-4">
<h3>Carousel style 1 - col-sm-6 col-md-4</h3>
<div class="wb-tabs carousel-s1" data-speed="slow">
<div class="wb-tabs carousel-s1">
<ul role="tablist">
<li class="active"><a href="#panel7">Image 1</a></li>
<li><a href="#panel8">Image 2</a></li>
Expand Down Expand Up @@ -147,7 +147,7 @@
</section>
<section class="col-sm-6 col-md-8">
<h3>Carousel style 2 - col-sm-6 col-md-8</h3>
<div class="wb-tabs carousel-s2" data-speed="slow">
<div class="wb-tabs carousel-s2">
<ul role="tablist">
<li class="active"><a href="#panel10"><img src="img/protect-environment.jpg" alt="tab 1" /></a></li>
<li><a href="#panel11"><img src="img/banff.jpg" alt="tab 2" /></a></li>
Expand Down Expand Up @@ -190,3 +190,94 @@
</section>
</div>
</section>

<section>
<h2>Change rotation speed</h2>
<section>
<h3>Data attribute (<code>data-wb-tabs='{"interval": 3}'</code>)</h3>
<div class="wb-tabs carousel-s2" data-wb-tabs='{"interval": 3}'>
<ul role="tablist">
<li class="active"><a href="#panel13"><img src="img/protect-environment.jpg" alt="tab 1" /></a></li>
<li><a href="#panel14"><img src="img/banff.jpg" alt="tab 2" /></a></li>
<li><a href="#panel15"><img src="img/investinourfuture.jpg" alt="tab 3" /></a></li>
</ul>
<div role="tabpanel" id="panel13" class="in fade">
<figure>
<img src="img/protect-environment.jpg" alt="panel 1" />
<figcaption>
<p>
Take Note: <a href="http://www.tc.gc.ca/eng/civilaviation/opssvs/general-personnel-changes-1814.htm">Renewal of the Aviation Document Booklet</a>&nbsp;<br />
Learn more about&nbsp;<a href="http://www.tc.gc.ca/eng/air-menu.htm">air transportation</a> in Canada.
</p>
</figcaption>
</figure>
</div>
<div role="tabpanel" id="panel14" class="out fade">
<figure>
<img src="img/banff.jpg" alt="panel 2" />
<figcaption>
<p>
Take Note: <a href="http://www.tc.gc.ca/eng/railsafety/publications-46.htm">Grade Crossing Improvement Program (GCIP)</a><br />
Learn more about <a href="http://www.tc.gc.ca/eng/rail-menu.htm">rail transportation</a> in Canada.
</p>
</figcaption>
</figure>
</div>
<div role="tabpanel" id="panel15" class="out fade">
<figure>
<img src="img/investinourfuture.jpg" alt="panel 3" />
<figcaption>
<p>
Take Note: <a href="http://www.tc.gc.ca/eng/tankersafetyexpertpanel/menu.htm">Tanker Safety Expert Panel</a><br />
Learn more about&nbsp;<a href="http://www.tc.gc.ca/eng/marine-menu.htm">marine transportation</a> in Canada.
</p>
</figcaption>
</figure>
</div>
</div>
</section>

<section>
<h3>CSS classes (<code>slow</code>, <code>fast</code>)</h3>
<div class="wb-tabs carousel-s2 fast">
<ul role="tablist">
<li class="active"><a href="#panel16"><img src="img/protect-environment.jpg" alt="tab 1" /></a></li>
<li><a href="#panel17"><img src="img/banff.jpg" alt="tab 2" /></a></li>
<li><a href="#panel18"><img src="img/investinourfuture.jpg" alt="tab 3" /></a></li>
</ul>
<div role="tabpanel" id="panel16" class="in fade">
<figure>
<img src="img/protect-environment.jpg" alt="panel 1" />
<figcaption>
<p>
Take Note: <a href="http://www.tc.gc.ca/eng/civilaviation/opssvs/general-personnel-changes-1814.htm">Renewal of the Aviation Document Booklet</a>&nbsp;<br />
Learn more about&nbsp;<a href="http://www.tc.gc.ca/eng/air-menu.htm">air transportation</a> in Canada.
</p>
</figcaption>
</figure>
</div>
<div role="tabpanel" id="panel17" class="out fade">
<figure>
<img src="img/banff.jpg" alt="panel 2" />
<figcaption>
<p>
Take Note: <a href="http://www.tc.gc.ca/eng/railsafety/publications-46.htm">Grade Crossing Improvement Program (GCIP)</a><br />
Learn more about <a href="http://www.tc.gc.ca/eng/rail-menu.htm">rail transportation</a> in Canada.
</p>
</figcaption>
</figure>
</div>
<div role="tabpanel" id="panel18" class="out fade">
<figure>
<img src="img/investinourfuture.jpg" alt="panel 3" />
<figcaption>
<p>
Take Note: <a href="http://www.tc.gc.ca/eng/tankersafetyexpertpanel/menu.htm">Tanker Safety Expert Panel</a><br />
Learn more about&nbsp;<a href="http://www.tc.gc.ca/eng/marine-menu.htm">marine transportation</a> in Canada.
</p>
</figcaption>
</figure>
</div>
</div>
</section>
</section>
101 changes: 96 additions & 5 deletions src/plugins/tabs/tabs-carousel-fr.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,13 @@
"tag": "tabs, carousel",
"parentdir": "tabs",
"altLangPrefix": "tabs-carousel",
"dateModified": "2014-05-23"
"dateModified": "2014-06-03"
}
---

<section>
<h2>Carrousel - Style 1 (<code>carousel-s1</code>)</h2>
<div class="wb-tabs carousel-s1" data-speed="slow">
<div class="wb-tabs carousel-s1">
<ul role="tablist">
<li class="active"><a href="#panel1">Image 1</a></li>
<li><a href="#panel2">Image 2</a></li>
Expand Down Expand Up @@ -57,7 +57,7 @@

<section>
<h2>Carrousel - Style 2</h2>
<div class="wb-tabs carousel-s2" data-speed="slow">
<div class="wb-tabs carousel-s2">
<ul role="tablist">
<li class="active"><a href="#panel4"><img src="img/protect-environment.jpg" alt="onglet 1" /></a></li>
<li><a href="#panel5"><img src="img/banff.jpg" alt="onglet 2" /></a></li>
Expand Down Expand Up @@ -104,7 +104,7 @@
<div class="row">
<section class="col-sm-6 col-md-4">
<h3>Carrousel - Style 1 - col-sm-6 col-md-4</h3>
<div class="wb-tabs carousel-s1" data-speed="slow">
<div class="wb-tabs carousel-s1">
<ul role="tablist">
<li class="active"><a href="#panel7">Image 1</a></li>
<li><a href="#panel8">Image 2</a></li>
Expand Down Expand Up @@ -147,7 +147,7 @@
</section>
<section class="col-sm-6 col-md-8">
<h3>Carrousel - Style 2 - col-sm-6 col-md-8</h3>
<div class="wb-tabs carousel-s2" data-speed="slow">
<div class="wb-tabs carousel-s2">
<ul role="tablist">
<li class="active"><a href="#panel10"><img src="img/protect-environment.jpg" alt="onglet 1" /></a></li>
<li><a href="#panel11"><img src="img/banff.jpg" alt="onglet 2" /></a></li>
Expand Down Expand Up @@ -190,3 +190,94 @@
</section>
</div>
</section>

<section>
<h2>Changement de la vitesse de rotation</h2>
<section>
<h3>Attribut &#171;&#160;data&#160;&#187; (<code>data-wb-tabs='{"interval": 3}'</code>)</h3>
<div class="wb-tabs carousel-s2" data-wb-tabs='{"interval": 3}'>
<ul role="tablist">
<li class="active"><a href="#panel13"><img src="img/protect-environment.jpg" alt="onglet 1" /></a></li>
<li><a href="#panel14"><img src="img/banff.jpg" alt="onglet 2" /></a></li>
<li><a href="#panel15"><img src="img/investinourfuture.jpg" alt="onglet 3" /></a></li>
</ul>
<div role="tabpanel" id="panel13" class="in fade">
<figure>
<img src="img/protect-environment.jpg" alt="panneau 1" />
<figcaption>
<p>
Prenez note : <a href="http://www.tc.gc.ca/fra/aviationcivile/opssvs/generale-personnel-changements-1814.htm">Renouvellement du carnet de documents d'aviation</a><br />
En savoir plus sur <a href="http://www.tc.gc.ca/fra/aerien-menu.htm">le transport aérien</a> au Canada.
</p>
</figcaption>
</figure>
</div>
<div role="tabpanel" id="panel14" class="out fade">
<figure>
<img src="img/banff.jpg" alt="panneau 2" />
<figcaption>
<p>
Prenez note : <a href="http://www.tc.gc.ca/fra/securiteferroviaire/publications-46.htm">Programme d'amélioration des passages à niveau (PAPN)</a><br />
En savoir plus sur <a href="http://www.tc.gc.ca/fra/ferroviaire-menu.htm">le transport ferroviaire</a> au Canada.
</p>
</figcaption>
</figure>
</div>
<div role="tabpanel" id="panel15" class="out fade">
<figure>
<img src="img/investinourfuture.jpg" alt="panneau 3" />
<figcaption>
<p>
Prenez note : <a href="http://www.tc.gc.ca/fra/comiteexpertssecuritenaviresciternes/menu.htm">Tanker Groupe d'experts sur la sécurité</a><br />
En savoir plus sur <a href="http://www.tc.gc.ca/fra/maritime-menu.htm">le transport maritime</a> au Canada.
</p>
</figcaption>
</figure>
</div>
</div>
</section>

<section>
<h3>Classes CSS (<code lang="en">slow</code>, <code lang="en">fast</code>)</h3>
<div class="wb-tabs carousel-s2" data-wb-tabs='{"interval": 3}'>
<ul role="tablist">
<li class="active"><a href="#panel16"><img src="img/protect-environment.jpg" alt="onglet 1" /></a></li>
<li><a href="#panel17"><img src="img/banff.jpg" alt="onglet 2" /></a></li>
<li><a href="#panel18"><img src="img/investinourfuture.jpg" alt="onglet 3" /></a></li>
</ul>
<div role="tabpanel" id="panel16" class="in fade">
<figure>
<img src="img/protect-environment.jpg" alt="panneau 1" />
<figcaption>
<p>
Prenez note : <a href="http://www.tc.gc.ca/fra/aviationcivile/opssvs/generale-personnel-changements-1814.htm">Renouvellement du carnet de documents d'aviation</a><br />
En savoir plus sur <a href="http://www.tc.gc.ca/fra/aerien-menu.htm">le transport aérien</a> au Canada.
</p>
</figcaption>
</figure>
</div>
<div role="tabpanel" id="panel17" class="out fade">
<figure>
<img src="img/banff.jpg" alt="panneau 2" />
<figcaption>
<p>
Prenez note : <a href="http://www.tc.gc.ca/fra/securiteferroviaire/publications-46.htm">Programme d'amélioration des passages à niveau (PAPN)</a><br />
En savoir plus sur <a href="http://www.tc.gc.ca/fra/ferroviaire-menu.htm">le transport ferroviaire</a> au Canada.
</p>
</figcaption>
</figure>
</div>
<div role="tabpanel" id="panel18" class="out fade">
<figure>
<img src="img/investinourfuture.jpg" alt="panneau 3" />
<figcaption>
<p>
Prenez note : <a href="http://www.tc.gc.ca/fra/comiteexpertssecuritenaviresciternes/menu.htm">Tanker Groupe d'experts sur la sécurité</a><br />
En savoir plus sur <a href="http://www.tc.gc.ca/fra/maritime-menu.htm">le transport maritime</a> au Canada.
</p>
</figcaption>
</figure>
</div>
</div>
</section>
</section>
21 changes: 16 additions & 5 deletions src/plugins/tabs/tabs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,8 @@ var pluginName = "wb-tabs",

defaults = {
addControls: true,
excludePlay: false
excludePlay: false,
interval: 6
},

/*
Expand All @@ -49,16 +50,26 @@ var pluginName = "wb-tabs",
if ( !$elm.hasClass( initedClass ) ) {
$elm.addClass( initedClass );

var interval = $elm.hasClass( "slow" ) ? 9 : $elm.hasClass( "fast" ) ? 3 : 6,
$panels = $elm.children( "[role=tabpanel], details" ),
var $panels = $elm.children( "[role=tabpanel], details" ),
$tablist = $elm.children( "[role=tablist]" ),
addControls = defaults.addControls,
excludePlay = defaults.excludePlay,
activeId = wb.pageUrlParts.hash.substring( 1 ),
$openPanel = activeId.length !== 0 ? $panels.filter( "#" + activeId ) : undefined,
elmId = $elm.attr( "id" ),
hashFocus = false,
open = "open",
settings = $.extend(
true,
{},
defaults,
{ interval: $elm.hasClass( "slow" ) ?
9 : $elm.hasClass( "fast" ) ?
3 : defaults.interval },
window[ pluginName ],
wb.getData( $elm, pluginName )
),
interval = settings.interval,
addControls = settings.addControls,
excludePlay = settings.excludePlay,
$panel, i, len, tablist, isOpen, newId, positionY, groupClass;

// Ensure there is an id on the element
Expand Down

0 comments on commit 49fbf94

Please sign in to comment.