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 <[email protected]> Authored: Wed Nov 2 09:04:41 2016 +0500 Committer: Davor Bonaci <[email protected]> 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
