Tab-group switching for snippets

core/src/main/java/org/pegdown/ast/VerbatimGroupNode.java

@@ -0,0 +1,43 @@
+/*
+ * Copyright © 2015 - 2016 Lightbend, Inc. <http://www.lightbend.com>
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package org.pegdown.ast;
+
+public class VerbatimGroupNode extends VerbatimNode {
+    private final String group;
+
+    public VerbatimGroupNode(String text) {
+        this(text, "", "");
+    }
+
+    public VerbatimGroupNode(String text, String type) {
+    	this(text, type, "");
+    }
+
+    public VerbatimGroupNode(String text, String type, String group) {
+    	super(text, type);
+    	this.group = group;
+    }
+
+    @Override
+    public void accept(Visitor visitor) {
+    	visitor.visit(this);
+    }
+
+    public String getGroup() {
+    	return group;
+    }
+}

core/src/main/scala/com/lightbend/paradox/markdown/Directive.scala

@@ -311,7 +311,8 @@ case class SnipDirective(page: Page, variables: Map[String, String])
         } else new File(page.file.getParentFile, source)
       val text = Snippet(file, labels)
       val lang = Option(node.attributes.value("type")).getOrElse(Snippet.language(file))
-      new VerbatimNode(text, lang).accept(visitor)
+      val group = Option(node.attributes.value("group")).getOrElse("")
+      new VerbatimGroupNode(text, lang, group).accept(visitor)
     } catch {
       case e: FileNotFoundException =>
         throw new SnipDirective.LinkException(s"Unknown snippet [${e.getMessage}] referenced from [${page.path}]")

core/src/main/scala/com/lightbend/paradox/markdown/StyledVerbatim.scala

@@ -17,15 +17,15 @@
 package com.lightbend.paradox.markdown
 
 import org.parboiled.common.StringUtils
-import org.pegdown.ast.VerbatimNode
+import org.pegdown.ast.{ VerbatimNode, VerbatimGroupNode }
 import org.pegdown.{ Printer, VerbatimSerializer }
 
 /**
  * Add markup around verbatim blocks.
  */
 abstract class StyledVerbatimSerializer extends VerbatimSerializer {
 
-  def printPreAttributes(printer: Printer): Unit
+  def printPreAttributes(printer: Printer, nodeGroup: String = ""): Unit
 
   def printCodeAttributes(printer: Printer, nodeType: String): Unit
 
@@ -34,7 +34,10 @@ abstract class StyledVerbatimSerializer extends VerbatimSerializer {
 
     printer.print("<pre")
     if (!StringUtils.isEmpty(node.getType)) {
-      printPreAttributes(printer)
+      node match {
+        case vgn: VerbatimGroupNode => printPreAttributes(printer, vgn.getGroup)
+        case vn: VerbatimNode       => printPreAttributes(printer)
+      }
     }
     printer.print(">")
 
@@ -66,7 +69,13 @@ abstract class StyledVerbatimSerializer extends VerbatimSerializer {
  * Add prettify markup around verbatim blocks.
  */
 object PrettifyVerbatimSerializer extends StyledVerbatimSerializer {
-  override def printPreAttributes(printer: Printer): Unit = printClass(printer, "prettyprint")
+  override def printPreAttributes(printer: Printer, nodeGroup: String): Unit = {
+    nodeGroup match {
+      case "" => printClass(printer, "prettyprint")
+      case g  => printClass(printer, "prettyprint tab-group-" + g)
+    }
+  }
+
   override def printCodeAttributes(printer: Printer, nodeType: String): Unit = nodeType match {
     case "text" | "nocode" => printClass(printer, "nocode")
     case _                 => printClass(printer, s"language-$nodeType")

docs/src/main/paradox/features/snippet-inclusion.md

@@ -58,6 +58,45 @@ should not be highlighted set `type=text` in the directive's attribute section:
 @@snip [example.log](example.log) { #example-log type=text }
 ```
 
+#### tab switching
+
+It is possible to associate multiple snippets under the same "tag". If some tab of a snippet is switched by the user, all tabs associated with the selected one will be switched as well. To associate snippet tabs under some tag, set the `group` field of the snippet:
+
+@@@vars
+```markdown
+First-java
+:   @@snip [example-first.java](../../resources/tab-switching/examples.java) { #java_first group=java }
+$empty$
+First-scala
+:   @@snip [example-first.scala](../../resources/tab-switching/examples.scala) { #scala_first group=scala }
+$empty$
+Some separator.
+$empty$
+Second-java
+:   @@snip [example-second.java](../../resources/tab-switching/examples.java) { #java_second group=java }
+$empty$
+Second-scala
+:   @@snip [example-second.scala](../../resources/tab-switching/examples.scala) { #scala_second group=scala }
+```
+@@@
+
+The result will be rendered like this (try to switch tabs):
+
+First-java
+:   @@snip [example-first.java](../../resources/tab-switching/examples.java) { #java_first group=java }
+
+First-scala
+:   @@snip [example-first.scala](../../resources/tab-switching/examples.scala) { #scala_first group=scala }
+
+Some separator.
+
+Second-java
+:   @@snip [example-second.java](../../resources/tab-switching/examples.java) { #java_second group=java }
+
+Second-scala
+:   @@snip [example-second.scala](../../resources/tab-switching/examples.scala) { #scala_second group=scala }
+
+
 ### snip.*.base_dir
 
 In order to specify your snippet source paths off certain base directories you can define placeholders

docs/src/main/resources/tab-switching/examples.java

@@ -0,0 +1,15 @@
+// #java_first
+class JavaFirst {
+  public static void main(String[] args) {
+    System.out.println("Hello java!");
+  }
+}
+// #java_first
+
+// #java_second
+class JavaSecond {
+  public static void main(String[] args) {
+    System.out.println("Hello java!");
+  }
+}
+// #java_second

docs/src/main/resources/tab-switching/examples.scala

@@ -0,0 +1,11 @@
+// #scala_first
+object ScalaFirst extends App {
+  println("Hello scala!")
+}
+// #scala_first
+
+// #scala_second
+object ScalaSecond extends App {
+  println("Hello scala!")
+}
+// #scala_second

plugin/src/sbt-test/paradox/snippets/expected/group.html

@@ -0,0 +1,2 @@
+<pre class="prettyprint tab-group-a"><code class="language-scala">private class SomethingElse</code></pre>
+<pre class="prettyprint tab-group-b"><code class="language-scala">import scala.util.Try</code></pre>

plugin/src/sbt-test/paradox/snippets/src/main/paradox/group.md

@@ -0,0 +1,3 @@
+@@ snip [Group A](../../test/scala/Multiple.scala) { #multiple-something-else group=a }
+
+@@ snip [Group B](../../test/scala/Multiple.scala) { #parseint-imports group=b }

plugin/src/sbt-test/paradox/snippets/test

@@ -6,3 +6,4 @@ $ must-mirror target/paradox/site/main/multiple.html expected/multiple.html
 $ must-mirror target/paradox/site/main/some-xml.html expected/some-xml.html
 $ must-mirror target/paradox/site/main/nocode.html expected/nocode.html
 $ must-mirror target/paradox/site/main/configured-bases.html expected/configured-bases.html
+$ must-mirror target/paradox/site/main/group.html expected/group.html

themes/generic/src/main/assets/js/page.js

@@ -1,6 +1,56 @@
 $(function() {
 
   // Tabbed code samples
+
+  var tabGroupClass = "tab-group";
+  var tabGroupCookie = "tabGroupsPref";
+  var cookieTg = getCookie(tabGroupCookie);
+  var cookieTgList = [];
+  if(cookieTg != "")
+    cookieTgList = JSON.parse(cookieTg);
+
+  // http://www.w3schools.com/js/js_cookies.asp
+  function setCookie(cname,cvalue,exdays) {
+    if(!exdays) exdays = 365;
+    var d = new Date();
+    d.setTime(d.getTime() + (exdays*24*60*60*1000));
+    var expires = "expires=" + d.toGMTString();
+    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
+  }
+
+  // http://www.w3schools.com/js/js_cookies.asp
+  function getCookie(cname) {
+    var name = cname + "=";
+    var decodedCookie = decodeURIComponent(document.cookie);
+    var ca = decodedCookie.split(';');
+    for(var i = 0; i < ca.length; i++) {
+      var c = ca[i];
+      while (c.charAt(0) == ' ') {
+        c = c.substring(1);
+      }
+      if (c.indexOf(name) == 0) {
+        return c.substring(name.length, c.length);
+      }
+    }
+    return "";
+  }
+
+  function arrayToJson(arr) {
+    return JSON.stringify(arr);
+  }
+
+  // http://stackoverflow.com/questions/12551635/jquery-remove-duplicates-from-an-array-of-strings/12551709#12551709
+  function addToList(arr, elem) {
+    function unique(list) {
+      var result = [];
+      $.each(list, function(i, e) {
+        if ($.inArray(e, result) == -1) result.push(e);
+      });
+      return result;
+    }
+    arr.unshift(elem);
+    return unique(arr);
+  }
 
   $("dl").has("dd > pre").each(function() {
     var dl = $(this);
@@ -18,20 +68,60 @@ $(function() {
         dd.addClass("has-note");
       }
     });
-    var current = dts.first().addClass("first").addClass("current");
+
+    var current;
+    for(var i = 0; i < cookieTgList.length && !current; i++) {
+      dts.each(function() {
+        var dt = $(this);
+        var pre = dt.next("dd").find("pre");
+        if(pre.hasClass(cookieTgList[i]))
+          current = dt.addClass("current");
+      });
+    }
+
+    if(!current)
+      current = dts.first().addClass("current");
     var currentContent = current.next("dd").addClass("current").show();
+    dts.first().addClass("first");
     dts.last().addClass("last");
     dl.css("height", current.height() + currentContent.height());
   });
 
   $("dl.tabbed dt a").click(function(e){
     e.preventDefault();
-    var current = $(this).parent("dt");
-    var dl = current.parent("dl");
-    dl.find(".current").removeClass("current").next("dd").removeClass("current").hide();
-    current.addClass("current");
-    var currentContent = current.next("dd").addClass("current").show();
-    dl.css("height", current.height() + currentContent.height());
+    var currentDt = $(this).parent("dt");
+    var currentDl = currentDt.parent("dl");
+    var currentClasses = currentDt.next("dd").find("pre").attr("class").split(' ');
+    var currentGroup;
+    var regex = new RegExp("^" + tabGroupClass + "-.*");
+    for(var i = 0; i < currentClasses.length && !currentGroup; i++) {
+      if(regex.test(currentClasses[i])) {
+        currentGroup = currentClasses[i];
+        cookieTgList = addToList(cookieTgList, currentGroup);
+        setCookie(tabGroupCookie, arrayToJson(cookieTgList));
+      }
+    }
+
+    if(!currentGroup) {
+      currentDl.find(".current").removeClass("current").next("dd").removeClass("current").hide();
+      currentDt.addClass("current");
+      var currentContent = currentDt.next("dd").addClass("current").show();
+      currentDl.css("height", currentDt.height() + currentContent.height());
+    } else {
+      $("dl").has("dd > pre").each(function() {
+        var dl = $(this);
+        dl.find("dt").each(function() {
+          var dt = $(this);
+          var pre = dt.next("dd").find("pre");
+          if(pre.hasClass(currentGroup)) {
+            dl.find(".current").removeClass("current").next("dd").removeClass("current").hide();
+            dt.addClass("current");
+            var currentContent = dt.next("dd").addClass("current").show();
+            dl.css("height", dt.height() + currentContent.height());
+          }
+        });
+      });
+    }
   });
 
 });