Allow any fragment to be switched as part of a group

Expanding on the proposal in lightbend#95, added support for having other parts of the
documentation change as well when changing a group.

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

@@ -474,3 +474,34 @@ case class WrapDirective(typ: String) extends ContainerBlockDirective(Array(typ,
     printer.print(s"</$typ>")
   }
 }
+
+/**
+ * Inline wrap directive
+ *
+ * Wraps inner contents in a `span`, optionally with custom `id` and/or `class` attributes.
+ */
+case class InlineWrapDirective(typ: String) extends InlineDirective("span") {
+  def render(node: DirectiveNode, visitor: Visitor, printer: Printer): Unit = {
+    val id =
+      node.attributes.identifier match {
+        case null => ""
+        case x    => s""" id="$x""""
+      }
+    val classes =
+      node.attributes.classesString match {
+        case "" => ""
+        case x  => s""" class="$x""""
+      }
+    printer.print(s"""<$typ$id$classes>""")
+    node.contentsNode.accept(visitor)
+    printer.print(s"</$typ>")
+  }
+}
+
+case object SupergroupDirective extends LeafBlockDirective("supergroup") {
+  def render(node: DirectiveNode, visitor: Visitor, printer: Printer): Unit = {
+    printer.print("""<span class="supergroup" style="display: none  ">""")
+    printer.print(node.attributes.value("groups").split(",").map(group => s"""<span class="group">$group</span>""").mkString)
+    printer.print("""</span>""")
+  }
+}

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

@@ -72,7 +72,7 @@ object PrettifyVerbatimSerializer extends StyledVerbatimSerializer {
   override def printPreAttributes(printer: Printer, nodeGroup: String): Unit = {
     nodeGroup match {
       case "" => printClass(printer, "prettyprint")
-      case g  => printClass(printer, "prettyprint tab-group-" + g)
+      case g  => printClass(printer, "prettyprint group-" + g)
     }
   }
 

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

@@ -119,7 +119,10 @@ object Writer {
     VarsDirective(context.properties),
     CalloutDirective("note", "Note"),
     CalloutDirective("warning", "Warning"),
-    WrapDirective("div"))
+    WrapDirective("div"),
+    InlineWrapDirective("span"),
+    SupergroupDirective
+  )
 
   class DefaultLinkRenderer(context: Context) extends LinkRenderer {
     private lazy val imgBase = {

core/src/test/scala/com/lightbend/paradox/markdown/InlineWrapDirectiveSpec.scala

@@ -0,0 +1,36 @@
+/*
+ * 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 com.lightbend.paradox.markdown
+
+import com.lightbend.paradox.tree.Tree.Location
+
+class InlineWrapDirectiveSpec extends MarkdownBaseSpec {
+
+  "The inline `wrap` directive" should "render wrapping `span`s" in {
+    markdown("@span[Simple sentence here]") shouldEqual html("<p><span>Simple sentence here</span></p>")
+  }
+
+  it should "render the example from the docs" in {
+    markdown("@span[Scala variant containing ***markdown*** and @ref:[Linking](test.md)] { .group-scala }") shouldEqual html("""
+      |<p><span class="group-scala">Scala variant containing <strong><em>markdown</em></strong> and <a href="test.html">Linking</a></span></p>""")
+  }
+
+  it should "support a custom id and custom CSS classes at the same time" in {
+    markdown("@span[Simple sentence here.] { #yeah .red .blue }") shouldEqual html("""<p><span id="yeah" class="red blue">Simple sentence here.</div></p>""")
+  }
+
+}

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

@@ -70,6 +70,10 @@ $empty$
 First-scala
 :   @@snip [example-first.scala](../../resources/tab-switching/examples.scala) { #scala_first group=scala }
 $empty$
+@@supergroup { name=Language groups=scala,java }
+$empty$
+Some separator with text describing the @span[Java variant] { .group-java } @span[Scala variant containing ***markdown*** and @ref:[Linking](linking.md)] { .group-scala }
+$empty$
 Some separator.
 $empty$
 Second-java
@@ -88,7 +92,9 @@ First-java
 First-scala
 :   @@snip [example-first.scala](../../resources/tab-switching/examples.scala) { #scala_first group=scala }
 
-Some separator.
+@@supergroup { name=Language groups=scala,java }
+
+Some separator with text describing the @span[Java variant] { .group-java } @span[Scala variant containing ***markdown*** and @ref:[Linking](linking.md)] { .group-scala }
 
 Second-java
 :   @@snip [example-second.java](../../resources/tab-switching/examples.java) { #java_second group=java }

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

@@ -1,2 +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>
+<pre class="prettyprint group-a"><code class="language-scala">private class SomethingElse</code></pre>
+<pre class="prettyprint group-b"><code class="language-scala">import scala.util.Try</code></pre>

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

@@ -1,10 +1,11 @@
 $(function() {
 
-  // Tabbed code samples
-
-  var tabGroupClass = "tab-group";
-  var tabGroupCookie = "tabGroupsPref";
-  var cookieTg = getCookie(tabGroupCookie);
+  // Groups (like 'java' and 'scala') represent groups of 'switchable' content, either in tabs or in regular text.
+  // Supergroups can be defined (such as 'languages', containing 'scala' and 'java') to initialize the group.
+
+  var groupClass = "group";
+  var groupCookie = "groupsPref";
+  var cookieTg = getCookie(groupCookie);
   var cookieTgList = [];
   if(cookieTg != "")
     cookieTgList = JSON.parse(cookieTg);
@@ -52,6 +53,30 @@ $(function() {
     return unique(arr);
   }
 
+  $(".supergroup").each(function() {
+    var groups = $(this).find(".group")
+
+    var current;
+    for(var i = 0; i < cookieTgList.length && !current; i++) {
+      groups.each(function() {
+        var group = "group-" + $(this).text();
+        if(group == cookieTgList[i])
+          current = group;
+      });
+    }
+    if (!current) {
+      current = "group-" + groups.first().text();
+      cookieTgList = addToList(cookieTgList, current);
+    }
+
+    groups.each(function() {
+      var group = "group-" + $(this).text();
+      if(group != current) {
+        $("span." + group).hide()
+      }
+    });
+  });
+
   $("dl").has("dd > pre").each(function() {
     var dl = $(this);
     dl.addClass("tabbed");
@@ -91,23 +116,16 @@ $(function() {
     e.preventDefault();
     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));
-      }
-    }
+
+    var currentGroup = groupOf(currentDt);
 
     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 {
+      $("span ." + currentGroup).show();
       $("dl").has("dd > pre").each(function() {
         var dl = $(this);
         dl.find("dt").each(function() {
@@ -118,10 +136,25 @@ $(function() {
             dt.addClass("current");
             var currentContent = dt.next("dd").addClass("current").show();
             dl.css("height", dt.height() + currentContent.height());
+            $("span." + currentGroup).show()
+          } else {
+            $("span." + groupOf(dt)).hide()
           }
         });
       });
     }
   });
 
+  function groupOf(elem) {
+    var currentClasses = elem.next("dd").find("pre").attr("class").split(' ');
+    var regex = new RegExp("^" + groupClass + "-.*");
+    for(var i = 0; i < currentClasses.length; i++) {
+      if(regex.test(currentClasses[i])) {
+        var currentGroup = currentClasses[i];
+        cookieTgList = addToList(cookieTgList, currentGroup);
+        setCookie(groupCookie, arrayToJson(cookieTgList));
+        return currentGroup;
+      }
+    }
+  }
 });