mirror of
https://github.com/apache/zeppelin
synced 2026-05-24 09:38:26 +00:00
add docs.js for same language code tab synchronization
This commit is contained in:
Ryu Ah young
parent
261aabf41f
commit
e23445584f
2 changed files with 121 additions and 152 deletions
121
docs/assets/themes/zeppelin/js/docs.js
Normal file
121
docs/assets/themes/zeppelin/js/docs.js
Normal file
|
|
@ -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); });
|
||||
});
|
||||
|
|
@ -1,152 +0,0 @@
|
|||
---
|
||||
layout: page
|
||||
title: "Dynamic Form"
|
||||
description: ""
|
||||
group: manual
|
||||
---
|
||||
<!--
|
||||
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.
|
||||
-->
|
||||
{% 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.
|
||||
|
||||
### 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.
|
||||
|
||||
#### Text input form
|
||||
|
||||
To create text input form, use _${formName}_ templates.
|
||||
|
||||
for example
|
||||
|
||||
<img src="/assets/themes/zeppelin/img/screenshots/form_input.png" />
|
||||
|
||||
|
||||
Also you can provide default value, using _${formName=defaultValue}_.
|
||||
|
||||
<img src="/assets/themes/zeppelin/img/screenshots/form_input_default.png" />
|
||||
|
||||
|
||||
#### Select form
|
||||
|
||||
To create select form, use _${formName=defaultValue,option1|option2...}_
|
||||
|
||||
for example
|
||||
|
||||
<img src="/assets/themes/zeppelin/img/screenshots/form_select.png" />
|
||||
|
||||
Also you can separate option's display name and value, using _${formName=defaultValue,option1(DisplayName)|option2(DisplayName)...}_
|
||||
|
||||
<img src="/assets/themes/zeppelin/img/screenshots/form_select_displayname.png" />
|
||||
|
||||
### 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
|
||||
|
||||
<ul class="nav nav-tabs" data-tabs"tabs">
|
||||
<li class="active"><a href="#scala_1" data-toggle="tab">Scala</a></li>
|
||||
<li><a href="#python_1" data-toggle="tab">Python</a></li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div id="scala_1" class="tab-pane active">
|
||||
<pre>
|
||||
<code class="scala language-scala">
|
||||
%spark
|
||||
println("Hello "+z.input("name"))
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
<div id="python_1" class="tab-pane">
|
||||
<pre>
|
||||
<code class="python language-python">
|
||||
%pyspark
|
||||
print("Hello "+z.input("name"))
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
<img src="/assets/themes/zeppelin/img/screenshots/form_input_prog.png" />
|
||||
|
||||
####Text input form with default value
|
||||
|
||||
<ul class="nav nav-tabs" data-tabs"tabs">
|
||||
<li class="active"><a href="#scala_2" data-toggle="tab">Scala</a></li>
|
||||
<li><a href="#python_2" data-toggle="tab">Python</a></li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div id="scala_2" class="tab-pane active">
|
||||
<pre>
|
||||
<code class="scala language-scala">
|
||||
%spark
|
||||
println("Hello "+z.input("name", "sun"))
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
<div id="python_2" class="tab-pane">
|
||||
<pre>
|
||||
<code class="python language-python">
|
||||
%pyspark
|
||||
print("Hello "+z.input("name", "sun"))
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
<img src="/assets/themes/zeppelin/img/screenshots/form_input_default_prog.png" />
|
||||
|
||||
####Select form
|
||||
|
||||
<ul class="nav nav-tabs" data-tabs"tabs">
|
||||
<li class="active"><a href="#scala_3" data-toggle="tab">Scala</a></li>
|
||||
<li><a href="#python_3" data-toggle="tab">Python</a></li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div id="scala_3" class="tab-pane active">
|
||||
<pre>
|
||||
<code class="scala language-scala">
|
||||
%spark
|
||||
println("Hello "+z.select("day", Seq(("1","mon"),
|
||||
("2","tue"),
|
||||
("3","wed"),
|
||||
("4","thurs"),
|
||||
("5","fri"),
|
||||
("6","sat"),
|
||||
("7","sun"))))
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
<div id="python_3" class="tab-pane">
|
||||
<pre>
|
||||
<code class="python language-python">
|
||||
%pyspark
|
||||
print("Hello "+z.select("day", [("1","mon"),
|
||||
("2","tue"),
|
||||
("3","wed"),
|
||||
("4","thurs"),
|
||||
("5","fri"),
|
||||
("6","sat"),
|
||||
("7","sun")]))
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
<img src="/assets/themes/zeppelin/img/screenshots/form_select_prog.png" />
|
||||
Loading…
Reference in a new issue