You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@zeppelin.apache.org by mo...@apache.org on 2015/12/15 02:32:48 UTC
incubator-zeppelin git commit: ZEPPELIN-490 Tidying up dynamicform.md to distinguish each category e…
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 <fb...@hanmail.net>
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 <fb...@hanmail.net>
Authored: Mon Dec 14 00:07:31 2015 +0900
Committer: Lee moon soo <mo...@apache.org>
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" />