beam-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From da...@apache.org
Subject [1/2] incubator-beam-site git commit: [BEAM-752] Infrastructure for toggling code snippets in documentation
Date Thu, 03 Nov 2016 19:27:19 GMT
Repository: incubator-beam-site
Updated Branches:
  refs/heads/asf-site 75df0a1ee -> 2fbb09c3b


[BEAM-752] Infrastructure for toggling code snippets in documentation


Project: http://git-wip-us.apache.org/repos/asf/incubator-beam-site/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-beam-site/commit/d795f366
Tree: http://git-wip-us.apache.org/repos/asf/incubator-beam-site/tree/d795f366
Diff: http://git-wip-us.apache.org/repos/asf/incubator-beam-site/diff/d795f366

Branch: refs/heads/asf-site
Commit: d795f36673b641679caec3181332aa6f9892ad50
Parents: 75df0a1
Author: Abdullah Bashir <mabdullah353@gmail.com>
Authored: Wed Nov 2 09:04:41 2016 +0500
Committer: Davor Bonaci <davor@google.com>
Committed: Thu Nov 3 12:26:54 2016 -0700

----------------------------------------------------------------------
 _includes/head.html   |  1 +
 js/language-switch.js | 87 ++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 88 insertions(+)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/incubator-beam-site/blob/d795f366/_includes/head.html
----------------------------------------------------------------------
diff --git a/_includes/head.html b/_includes/head.html
index 03a47cc..02c7727 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -10,6 +10,7 @@
   <link rel="stylesheet" href="{{ "/css/theme.css" | prepend: site.baseurl }}">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
   <script src="{{ "/js/bootstrap.min.js" | prepend: site.baseurl }}"></script>
+  <script src="{{ "/js/language-switch.js" | prepend: site.baseurl }}"></script>
   <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl
| prepend: site.url }}" data-proofer-ignore>
   <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml"
| prepend: site.baseurl | prepend: site.url }}">
   <script>

http://git-wip-us.apache.org/repos/asf/incubator-beam-site/blob/d795f366/js/language-switch.js
----------------------------------------------------------------------
diff --git a/js/language-switch.js b/js/language-switch.js
new file mode 100644
index 0000000..1e4e5f2
--- /dev/null
+++ b/js/language-switch.js
@@ -0,0 +1,87 @@
+$(document).ready(function(){
+    // Pattern in every code block, wrapper element.
+    var elAttr = "div[class^=\"language-\"]";
+    // Default language.
+    var defLang = "language-java";
+    // Wrapper class for css stylings.
+    var wrapper="language-switcher"
+
+    /**
+      * @desc Generate bootstrapped like nav template, showing supported languages in nav.
+      * @param array $languages - list of supported languages.
+      * @return string - html template, which is bootstrapped nav tabs.
+    */
+    function navTemplate(languages) {
+        var langList="";
+
+        for (var i = languages.length - 1; i >= 0; i--) {
+            langList+="<li data-lang=\""+languages[i]+"\"> \
+                <a>"+languages[i].replace("language-","")+"</a></li>";
+        }
+        return "<div class=\""+wrapper+" "+languages.join(" ")+"\"> \
+                <ul class=\"nav nav-tabs\">"+langList+"</ul> </div>";
+    }
+
+    /**
+      * @desc Extract language from provided text.
+      * @param string $text - string containing language, e.g language-python.
+      * @return string - cleaned name of languge, e.g python.
+    */
+    function getLang(text) {
+        var lang = /language-\w+/i.exec(text)
+        return (lang)? lang[0]:"";
+    }
+
+    /**
+      * @desc Search next sibling and if it's also a code block, then store
+            it's language and move onto the next element. It will keep
+            looking untill their is no direct code block decendent left.
+      * @param object $el - jQuery object, from where to start searching.
+      * @param array $lang - list to hold languages, found while searching.
+      * @return array - list of languages found.
+    */
+    function nextFetch(el, lang) {
+        if(!el.is(elAttr)) {
+            return lang;
+        }
+
+        lang.push(getLang(el.attr("class")))
+        return nextFetch(el.next(), lang)
+    }
+
+    /**
+      * @desc Perform language switch on page, and persist it's state.
+    */
+    var switchLanguage = function() {
+        var langPref = localStorage.getItem("codePreference") || defLang;
+
+        // Adjusting active elements in navigation header.
+        $("."+wrapper+" li").removeClass("active").each(function(){
+            if($(this).data("lang") === langPref) {
+                $(this).addClass("active");
+            }
+        });
+
+        // Swapping visibility of code blocks.
+        $("[class^=\"language-\"]").hide();
+        $("."+langPref).show();
+    }
+
+    // Add Nav tabs on top of code blocks.
+    $(elAttr).each(function() {
+        if($(this).prev().is(elAttr)) {
+            return;
+        }
+        $(this).before(navTemplate(nextFetch($(this), [])));
+    });
+
+    // Attaching on click listener, to li elements.
+    $("."+wrapper+" ul li").click(function(el) {
+        // Making language preferences presistance, for user.
+        localStorage.setItem("codePreference", $(this).data("lang"));
+        switchLanguage();
+    })
+
+    // Invoking on page boot.
+    switchLanguage();
+})
\ No newline at end of file


Mime
View raw message