Repository: incubator-zeppelin Updated Branches: refs/heads/master f7e167c34 -> 8e4be1f65
ZEPPELIN-490 Tidying up dynamicform.md to distinguish each category e⦠This PR is related to [this issue](https://issues.apache.org/jira/browse/ZEPPELIN-490?jql=project%20%3D%20ZEPPELIN). Current `dynamicform.md` is little bit hard to distinguish each category. So, I applied `nav-tabs` by using Bootstrap. - Before applying this PR  - After   Author: Ryu Ah young <[email protected]> Closes #518 from AhyoungRyu/ZEPPELIN-490 and squashes the following commits: 4d40894 [Ryu Ah young] Fix code indentation bb3e57c [Ryu Ah young] add docs.js path to default.html 2bf04c5 [Ryu Ah young] change dynamicform.md for applying docs.js e234455 [Ryu Ah young] add docs.js for same language code tab synchronization 261aabf [Ryu Ah young] ZEPPELIN-490 Tidying up dynamicform.md to distinguish each category easily Project: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/commit/8e4be1f6 Tree: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/tree/8e4be1f6 Diff: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/diff/8e4be1f6 Branch: refs/heads/master Commit: 8e4be1f6576b6ad35a0c01b6dc8b898b21fb51c3 Parents: f7e167c Author: Ryu Ah young <[email protected]> Authored: Mon Dec 14 00:07:31 2015 +0900 Committer: Lee moon soo <[email protected]> Committed: Tue Dec 15 10:34:03 2015 +0900 ---------------------------------------------------------------------- docs/_includes/themes/zeppelin/default.html | 1 + docs/assets/themes/zeppelin/js/docs.js | 121 +++++++++++++++++++++++ docs/manual/dynamicform.md | 66 +++++++------ 3 files changed, 157 insertions(+), 31 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/8e4be1f6/docs/_includes/themes/zeppelin/default.html ---------------------------------------------------------------------- diff --git a/docs/_includes/themes/zeppelin/default.html b/docs/_includes/themes/zeppelin/default.html index 29c2be2..3940414 100644 --- a/docs/_includes/themes/zeppelin/default.html +++ b/docs/_includes/themes/zeppelin/default.html @@ -29,6 +29,7 @@ <!-- Js --> <script src="https://code.jquery.com/jquery-1.10.2.min.js";></script> <script src="{{ ASSET_PATH }}/bootstrap/js/bootstrap.min.js"></script> + <script src="{{ ASSET_PATH }}/js/docs.js"></script> <!-- atom & rss feed --> <link href="{{ BASE_PATH }}{{ site.JB.atom_path }}" type="application/atom+xml" rel="alternate" title="Sitewide ATOM Feed"> http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/8e4be1f6/docs/assets/themes/zeppelin/js/docs.js ---------------------------------------------------------------------- diff --git a/docs/assets/themes/zeppelin/js/docs.js b/docs/assets/themes/zeppelin/js/docs.js new file mode 100644 index 0000000..3fc9bf2 --- /dev/null +++ b/docs/assets/themes/zeppelin/js/docs.js @@ -0,0 +1,121 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You 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. + */ + +/* Note: This file is originally from the Apache Spark project. */ + +/* Custom JavaScript code in the MarkDown docs */ + +// Enable language-specific code tabs +function codeTabs() { + var counter = 0; + var langImages = { + "scala": "img/scala-sm.png", + "python": "img/python-sm.png", + "java": "img/java-sm.png" + }; + $("div.codetabs").each(function() { + $(this).addClass("tab-content"); + + // Insert the tab bar + var tabBar = $('<ul class="nav nav-tabs" data-tabs="tabs"></ul>'); + $(this).before(tabBar); + + // Add each code sample to the tab bar: + var codeSamples = $(this).children("div"); + codeSamples.each(function() { + $(this).addClass("tab-pane"); + var lang = $(this).data("lang"); + var image = $(this).data("image"); + var notabs = $(this).data("notabs"); + var capitalizedLang = lang.substr(0, 1).toUpperCase() + lang.substr(1); + var id = "tab_" + lang + "_" + counter; + $(this).attr("id", id); + if (image != null && langImages[lang]) { + var buttonLabel = "<img src='" +langImages[lang] + "' alt='" + capitalizedLang + "' />"; + } else if (notabs == null) { + var buttonLabel = "<b>" + capitalizedLang + "</b>"; + } else { + var buttonLabel = "" + } + tabBar.append( + '<li><a class="tab_' + lang + '" href="#' + id + '">' + buttonLabel + '</a></li>' + ); + }); + + codeSamples.first().addClass("active"); + tabBar.children("li").first().addClass("active"); + counter++; + }); + $("ul.nav-tabs a").click(function (e) { + // Toggling a tab should switch all tabs corresponding to the same language + // while retaining the scroll position + e.preventDefault(); + var scrollOffset = $(this).offset().top - $(document).scrollTop(); + $("." + $(this).attr('class')).tab('show'); + $(document).scrollTop($(this).offset().top - scrollOffset); + }); +} + +function makeCollapsable(elt, accordionClass, accordionBodyId, title) { + $(elt).addClass("accordion-inner"); + $(elt).wrap('<div class="accordion ' + accordionClass + '"></div>') + $(elt).wrap('<div class="accordion-group"></div>') + $(elt).wrap('<div id="' + accordionBodyId + '" class="accordion-body collapse"></div>') + $(elt).parent().before( + '<div class="accordion-heading">' + + '<a class="accordion-toggle" data-toggle="collapse" href="#' + accordionBodyId + '">' + + title + + '</a>' + + '</div>' + ); +} + +// Enable "view solution" sections (for exercises) +function viewSolution() { + var counter = 0 + $("div.solution").each(function() { + var id = "solution_" + counter + makeCollapsable(this, "", id, + '<i class="icon-ok-sign" style="text-decoration: none; color: #0088cc">' + + '</i>' + "View Solution"); + counter++; + }); +} + +// A script to fix internal hash links because we have an overlapping top bar. +// Based on https://github.com/twitter/bootstrap/issues/193#issuecomment-2281510 +function maybeScrollToHash() { + console.log("HERE"); + if (window.location.hash && $(window.location.hash).length) { + console.log("HERE2", $(window.location.hash), $(window.location.hash).offset().top); + var newTop = $(window.location.hash).offset().top - 57; + $(window).scrollTop(newTop); + } +} + +$(function() { + codeTabs(); + viewSolution(); + + $(window).bind('hashchange', function() { + maybeScrollToHash(); + }); + + // Scroll now too in case we had opened the page on a hash, but wait a bit because some browsers + // will try to do *their* initial scroll after running the onReady handler. + $(window).load(function() { setTimeout(function() { maybeScrollToHash(); }, 25); }); +}); \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/8e4be1f6/docs/manual/dynamicform.md ---------------------------------------------------------------------- diff --git a/docs/manual/dynamicform.md b/docs/manual/dynamicform.md index f40e353..408aeed 100644 --- a/docs/manual/dynamicform.md +++ b/docs/manual/dynamicform.md @@ -1,4 +1,4 @@ ---- + --- layout: page title: "Dynamic Form" description: "" @@ -19,18 +19,15 @@ limitations under the License. --> {% include JB/setup %} - ## Dynamic Form Zeppelin dynamically creates input forms. Depending on language backend, there're two different ways to create dynamic form. Custom language backend can select which type of form creation it wants to use. -<br /> ### Using form Templates This mode creates form using simple template language. It's simple and easy to use. For example Markdown, Shell, SparkSql language backend uses it. -<br /> #### Text input form To create text input form, use _${formName}_ templates. @@ -45,7 +42,6 @@ Also you can provide default value, using _${formName=defaultValue}_. <img src="/assets/themes/zeppelin/img/screenshots/form_input_default.png" /> -<br /> #### Select form To create select form, use _${formName=defaultValue,option1|option2...}_ @@ -58,54 +54,59 @@ Also you can separate option's display name and value, using _${formName=default <img src="/assets/themes/zeppelin/img/screenshots/form_select_displayname.png" /> -<br /> ### Creates Programmatically Some language backend uses programmatic way to create form. For example [ZeppelinContext](../interpreter/spark.html#zeppelincontext) provides form creation API Here're some examples. -Text input form - -You can do this in Scala +####Text input form +<div class="codetabs"> + <div data-lang="scala" markdown="1"> -```scala +{% highlight scala %} %spark println("Hello "+z.input("name")) -``` +{% endhighlight %} -Or Python + </div> + <div data-lang="python" markdown="1"> -```python +{% highlight python %} %pyspark print("Hello "+z.input("name")) -``` +{% endhighlight %} + </div> +</div> <img src="/assets/themes/zeppelin/img/screenshots/form_input_prog.png" /> -Text input form with default value +####Text input form with default value +<div class="codetabs"> + <div data-lang="scala" markdown="1"> -Scala - -```scala +{% highlight scala %} %spark -println("Hello "+z.input("name", "sun")) -``` +println("Hello "+z.input("name", "sun")) +{% endhighlight %} -Python + </div> + <div data-lang="python" markdown="1"> -```python +{% highlight python %} %pyspark print("Hello "+z.input("name", "sun")) -``` +{% endhighlight %} + </div> +</div> <img src="/assets/themes/zeppelin/img/screenshots/form_input_default_prog.png" /> -Select form - -Scala +####Select form +<div class="codetabs"> + <div data-lang="scala" markdown="1"> -```scala +{% highlight scala %} %spark println("Hello "+z.select("day", Seq(("1","mon"), ("2","tue"), @@ -114,11 +115,12 @@ println("Hello "+z.select("day", Seq(("1","mon"), ("5","fri"), ("6","sat"), ("7","sun")))) -``` +{% endhighlight %} -Python + </div> + <div data-lang="python" markdown="1"> -```python +{% highlight python %} %pyspark print("Hello "+z.select("day", [("1","mon"), ("2","tue"), @@ -127,6 +129,8 @@ print("Hello "+z.select("day", [("1","mon"), ("5","fri"), ("6","sat"), ("7","sun")])) -``` +{% endhighlight %} + </div> +</div> <img src="/assets/themes/zeppelin/img/screenshots/form_select_prog.png" />
