Tabs: Added ability to show a tab panel with an external link or event.

Fixes #6228
wet-boew · Nov 14, 2014 · abcc690 · abcc690
1 parent b216c73
commit abcc690
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 15 deletions.
diff --git a/site/pages/docs/ref/tabs/tabs-en.hbs b/site/pages/docs/ref/tabs/tabs-en.hbs
@@ -6,7 +6,7 @@
 	"categoryfile": "plugins",
 	"description": "Dynamically stacks multiple sections of content, transforming them into a tabbed interface.",
 	"altLangPrefix": "tabs",
-	"dateModified": "2014-08-28"
+	"dateModified": "2014-11-14"
 }
 ---
 <span class="wb-prettify all-pre hide"></span>
@@ -174,6 +174,9 @@
 &lt;/ul&gt;</code></pre>
 			</li>
 			<li><strong>Optional:</strong> Override the default settings using the <a href="#config">configuration options</a>.</li>
+			<li><strong>Optional:</strong> Add an external link that affects which tab is visible. The href attribute includes the id of the panel to make visible. (v4.0.8+)
+				<pre><code>&lt;p&gt;&lt;a href="#panel3" class="wb-tabs-ext"&gt;Show the third panel&lt;/a&gt;&lt;/p&gt;</code></pre>
+			</li>
 		</ol>
 
 		<section>
@@ -387,12 +390,22 @@
 				</td>
 			</tr>
 			<tr>
-				<td><code>wb-shift.wb-tabs</code> (carousel only)</td>
+				<td><code>wb-shift.wb-tabs</code></td>
 				<td>Triggered manually or automatically to change which tab panel is visible.</td>
 				<td>Changes which tab panel is visible. The value of <code>shiftto</code> is the number of tab panels to move forwards (positive number) or backwards (negative number).
 					<pre><code>$elm.trigger({
     type: "wb-shift.wb-tabs",
     shiftto: 1
+});</code></pre>
+				</td>
+			</tr>
+			<tr>
+				<td><code>wb-select.wb-tabs</code> (v4.0.8+)</td>
+				<td>Triggered manually or automatically to change which tab panel is visible.</td>
+				<td>Changes which tab panel is visible. The value of <code>id</code> is the id attribute of the tab panel to make visible.
+					<pre><code>$elm.trigger({
+    type: "wb-shift.wb-tabs",
+    id: "panel3"
 });</code></pre>
 				</td>
 			</tr>

diff --git a/site/pages/docs/ref/tabs/tabs-fr.hbs b/site/pages/docs/ref/tabs/tabs-fr.hbs
@@ -6,7 +6,7 @@
 	"categoryfile": "plugins",
 	"description": "Comprime plusieurs images et légendes superposées et fourni des controls qui permettent à l'utilisateur de choisi l'image à afficher.",
 	"altLangPrefix": "tabs",
-	"dateModified": "2014-08-28"
+	"dateModified": "2014-11-14"
 }
 ---	
 <span class="wb-prettify all-pre hide"></span>
@@ -174,6 +174,9 @@
 &lt;/ul&gt;</code></pre>
 			</li>
 			<li><strong>Optional:</strong> Override the default settings using the <a href="#config">configuration options</a>.</li>
+			<li><strong>Optional:</strong> Add an external link that affects which tab is visible. The href attribute includes the id of the panel to make visible. (v4.0.8+)
+				<pre><code>&lt;p&gt;&lt;a href="#panel3" class="wb-tabs-ext"&gt;Show the third panel&lt;/a&gt;&lt;/p&gt;</code></pre>
+			</li>
 		</ol>
 
 		<section>
@@ -387,12 +390,22 @@
 				</td>
 			</tr>
 			<tr>
-				<td><code>wb-shift.wb-tabs</code> (carousel only)</td>
+				<td><code>wb-shift.wb-tabs</code></td>
 				<td>Triggered manually or automatically to change which tab panel is visible.</td>
 				<td>Changes which tab panel is visible. The value of <code>shiftto</code> is the number of tab panels to move forwards (positive number) or backwards (negative number).
 					<pre><code>$elm.trigger({
     type: "wb-shift.wb-tabs",
     shiftto: 1
+});</code></pre>
+				</td>
+			</tr>
+			<tr>
+				<td><code>wb-select.wb-tabs</code> (v4.0.8+)</td>
+				<td>Triggered manually or automatically to change which tab panel is visible.</td>
+				<td>Changes which tab panel is visible. The value of <code>id</code> is the id attribute of the tab panel to make visible.
+					<pre><code>$elm.trigger({
+    type: "wb-shift.wb-tabs",
+    id: "panel3"
 });</code></pre>
 				</td>
 			</tr>

diff --git a/src/plugins/tabs/tabs-en.hbs b/src/plugins/tabs/tabs-en.hbs
@@ -87,6 +87,8 @@
 		</div>
 	</div>
 
+	<p><a href="#details-panel3" class="wb-tabs-ext">Show the third panel</a></p>
+
 	<details class="mrgn-bttm-md">
 		<summary>View code</summary>
 		<pre><code>&lt;div class=&quot;wb-tabs&quot;&gt;
@@ -105,6 +107,8 @@
 		&lt;/details&gt;
 		...
 	&lt;/div&gt;
+
+	&lt;p&gt;&lt;a href="#details-panel3" class="wb-tabs-ext"&gt;Show the third panel&lt;/a&gt;&lt;/p&gt;
 &lt;/div&gt;</code></pre>
 	</details>
 </section>
diff --git a/src/plugins/tabs/tabs-fr.hbs b/src/plugins/tabs/tabs-fr.hbs
@@ -85,6 +85,8 @@
 			</details>
 		</div>
 	</div>
+
+	<p><a href="#details-panel3" class="wb-tabs-ext">Voir le troisième panneau</a></p>
 
 	<details class="mrgn-bttm-md">
 		<summary>Visualiser le code</summary>
@@ -104,6 +106,8 @@
 		&lt;/details&gt;
 		...
 	&lt;/div&gt;
+
+	&lt;p&gt;&lt;a href="#details-panel3" class="wb-tabs-ext"&gt;Voir le troisième panneau&lt;/a&gt;&lt;/p&gt;
 &lt;/div&gt;</code></pre>
 	</details>
 </section>
diff --git a/src/plugins/tabs/tabs.js b/src/plugins/tabs/tabs.js
@@ -17,6 +17,7 @@ var componentName = "wb-tabs",
 	selector = "." + componentName,
 	initEvent = "wb-init" + selector,
 	shiftEvent = "wb-shift" + selector,
+	selectEvent = "wb-select" + selector,
 	updatedEvent = "wb-updated" + selector,
 	setFocusEvent = "setfocus.wb",
 	controls = selector + " [role=tablist] a, " + selector + " [role=tablist] .tab-count",
@@ -472,17 +473,28 @@ var componentName = "wb-tabs",
 	onShift = function( event, $elm ) {
 		var data = $elm.data( componentName ),
 			$panels = data.panels,
-			$controls = data.tablist,
 			len = $panels.length,
 			current = $elm.find( "> .tabpanels > .in" ).prevAll( "[role=tabpanel]" ).length,
-			shiftto = event.shiftto ? event.shiftto : 1,
-			next = current > len ? 0 : current + shiftto,
-			$next = $panels.eq( ( next > len - 1 ) ? 0 : ( next < 0 ) ? len - 1 : next );
-
-		updateNodes(
-			$panels, $controls, $next,
-			$controls.find( "[href=#" + $next.attr( "id" ) + "]" )
-		);
+			next = current > len ? 0 : current + ( event.shiftto ? event.shiftto : 1 );
+
+		onSelect( $panels.eq( ( next > len - 1 ) ? 0 : ( next < 0 ) ? len - 1 : next ) );
+	},
+
+	/**
+	 * @method onSelect
+	 * @param (string) id Id attribute of the panel
+	 */
+	onSelect = function( id ) {
+		var selector = "#" + id,
+			$panel = $( selector );
+
+		if ( isSmallView && $panel[ 0 ].nodeName.toLowerCase() === "details" ) {
+			if ( !$panel.attr( "open" ) ) {
+				$panel.children( "summary" ).trigger( "click" );
+			}
+		} else {
+			$( selector + "-lnk" ).trigger( "click" );
+		}
 	},
 
 	/**
@@ -603,7 +615,7 @@ var componentName = "wb-tabs",
 	};
 
  // Bind the init event of the plugin
- $document.on( "timerpoke.wb " + initEvent + " " + shiftEvent, selector, function( event ) {
+ $document.on( "timerpoke.wb " + initEvent + " " + shiftEvent + " " + selectEvent, selector, function( event ) {
 	var eventTarget = event.target,
 		eventCurrentTarget = event.currentTarget,
 		$elm;
@@ -628,11 +640,18 @@ var componentName = "wb-tabs",
 				break;
 
 			/*
-			 * Change Slides
+			 * Change tab panels by a delta
 			 */
 			case "wb-shift":
 				onShift( event, $( eventTarget ) );
 				break;
+
+			/*
+			 * Select a specific tab panel
+			 */
+			case "wb-select":
+				onSelect( event.id );
+				break;
 			}
 		}
 
@@ -834,6 +853,17 @@ $document.on( activateEvent, selector + " > .tabpanels > details > summary", fun
 	}
 });
 
+// Change the panel based upon an external link click
+$document.on( "click", ".wb-tabs-ext", function( event ) {
+	var which = event.which;
+
+	// Ignore middle and right mouse buttons
+	if ( !which || which === 1 ) {
+		event.preventDefault();
+		onSelect( event.currentTarget.getAttribute( "href" ).substring( 1 ) );
+	}
+});
+
 // Add the timer poke to initialize the plugin
 wb.add( selector );