Skip to content

Commit e73881f

Browse files
jonasViehwegerjonasViehweger
authored
Merge pull request #282 from sentinel-hub/feat/multiple-scripts
Test for multiple evalscript in tabs
2 parents a47a6e8 + f488ba4 commit e73881f

File tree

9 files changed

+481
-4
lines changed

9 files changed

+481
-4
lines changed

‎_includes/head_custom.html

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,38 @@
1717
button.innerHTML = 'Show Script';
1818
}
1919
}
20+
21+
function expand() {
22+
const container = document.querySelector('.tabcontainer');
23+
const button = document.querySelector('.expand');
24+
const expandedHeight = "auto";
25+
if (container.style.height === expandedHeight) {
26+
container.style.height = "250px";
27+
button.innerHTML = 'Show full evalscript';
28+
document.documentElement.style.setProperty("--fade-height", "100px");
29+
} else {
30+
container.style.height = expandedHeight;
31+
button.innerHTML = 'Collapse evalscript';
32+
document.documentElement.style.setProperty("--fade-height", "60px");
33+
}
34+
}
35+
36+
function openTab(evt, tabName) {
37+
var i, tabcontent, tablinks;
38+
39+
tabcontent = document.getElementsByClassName("tabcontent");
40+
for (i = 0; i < tabcontent.length; i++) {
41+
tabcontent[i].style.display = "none";
42+
}
43+
44+
tablinks = document.getElementsByClassName("tablinks");
45+
for (i = 0; i < tablinks.length; i++) {
46+
tablinks[i].className = tablinks[i].className.replace(" active", "");
47+
}
48+
49+
document.getElementById(tabName).style.display = "block";
50+
evt.currentTarget.className += " active";
51+
}
2052
</script>
2153

2254
{% if jekyll.environment == "production" %}

‎_includes/js/custom.js

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
(function (jtd, undefined) {
2+
jtd.onReady(function () {
3+
4+
var codeBlocks = document.querySelectorAll('div.highlighter-rouge, div.listingblock > div.content, figure.highlight');
5+
6+
// note: the SVG svg-copied and svg-copy is only loaded as a Jekyll include if site.enable_copy_code_button is true; see _includes/icons/icons.html
7+
var svgCDownload = '<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>';
8+
9+
codeBlocks.forEach(codeBlock => {
10+
var copyButton = document.createElement('button');
11+
var timeout = null;
12+
copyButton.style.cssText = 'right:40px';
13+
copyButton.type = 'button';
14+
copyButton.ariaLabel = 'Download code';
15+
copyButton.innerHTML = svgCDownload;
16+
codeBlock.append(copyButton);
17+
18+
copyButton.addEventListener('click', function () {
19+
if (timeout === null) {
20+
var code = (codeBlock.querySelector('pre:not(.lineno, .highlight)') || codeBlock.querySelector('code')).innerText;
21+
code = code.replace(/\n/g, "%0D%0A");
22+
23+
// create an anchor element that we can programmatically click
24+
const a = document.createElement('a');
25+
26+
console.log(code)
27+
28+
// set up a data uri with the text
29+
a.href = `data:text/plain,${code}`;
30+
31+
// set the download attribute so it downloads and uses this as a filename
32+
a.download = 'evalscript.js';
33+
34+
// stick it in the document
35+
document.body.appendChild(a);
36+
37+
// click it
38+
a.click();
39+
40+
copyButton.innerHTML = svgCDownload;
41+
42+
var timeoutSetting = 4000;
43+
44+
timeout = setTimeout(function () {
45+
copyButton.innerHTML = svgCDownload;
46+
timeout = null;
47+
}, timeoutSetting);
48+
}
49+
});
50+
});
51+
// Get the element with id="defaultOpen" and click on it
52+
document.getElementById("defaultOpen").click();
53+
54+
});
55+
})(window.jtd = window.jtd || {});

‎_layouts/multiscript.html

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
---
2+
layout: default
3+
---
4+
5+
<h1 class="d-inline" id={{page.slug}}> {{page.title}} </h1>
6+
7+
<!-- Tab links -->
8+
<div class="tabcontainer">
9+
<div class="tab", id="script">
10+
<button class="tablinks" onclick="openTab(event, 'Visualization')" id="defaultOpen">Visualization</button>
11+
{% for script in page.scripts %}
12+
<button class="tablinks" onclick="openTab(event, '{{ script[0] }}')">{{ script[0] }}</button>
13+
{% endfor %}
14+
</div>
15+
16+
<div class="line"></div>
17+
<div id="Visualization" class="tabcontent">
18+
{% highlight javascript %}
19+
{% include_relative script.js %}
20+
{% endhighlight %}
21+
</div>
22+
23+
{% for script in page.scripts %}
24+
{% assign file = script[1] %}
25+
<!-- Tab content -->
26+
<div id="{{ script[0] }}" class="tabcontent">
27+
{% highlight javascript %}
28+
{% include_relative {{ file }} %}
29+
{% endhighlight %}
30+
</div>
31+
{% endfor %}
32+
33+
<button class="expand" onclick="expand(event)">Show full evalscript</button>
34+
35+
</div>
36+
37+
{{content}}

‎_sass/custom/custom.scss

Lines changed: 111 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,114 @@
22
vertical-align: top;
33
}
44

5-
@media (min-width: 50rem) { .main-header { height: 100px;} }
6-
.site-header { min-height: 100px; }
7-
.highlight ::selection { background-color: #a2b228; }
5+
@media (min-width: 50rem) {
6+
.main-header {
7+
height: 100px;
8+
}
9+
}
10+
11+
.site-header {
12+
min-height: 100px;
13+
}
14+
15+
.highlight ::selection {
16+
background-color: #a2b228;
17+
}
18+
19+
div.highlighter-rouge>button,
20+
div.listingblock>div.content>button,
21+
figure.highlight>button {
22+
width:1rem;
23+
opacity:0.5;
24+
}
25+
26+
27+
div.highlighter-rouge > button:focus, div.listingblock > div.content > button:focus, figure.highlight > button:focus { opacity: 1; }
28+
div.highlighter-rouge > button:hover, div.listingblock > div.content > button:hover, figure.highlight > button:hover {opacity: 1 !important; cursor: copy !important;}
29+
div.highlighter-rouge:hover > button, div.listingblock > div.content:hover > button, figure.highlight:hover > button { opacity: 0.5 }
30+
div.highlighter-rouge > button svg, div.listingblock > div.content > button svg, figure.highlight > button svg { fill: none !important; }
31+
32+
.tabcontainer {
33+
border-radius: 3px;
34+
background-color: $code-background-color;
35+
box-shadow: 0 0 5px RGBa(0, 0, 0, 0.1);
36+
margin-top: 1em;
37+
position: relative;
38+
overflow: hidden;
39+
height: 250px;
40+
padding-bottom: 1.5em;
41+
transition: height .5s ease;
42+
}
43+
44+
.tab {
45+
border-top-left-radius: 3px;
46+
border-top-right-radius: 3px;
47+
background-color: white;
48+
overflow: hidden;
49+
}
50+
51+
.tab button {
52+
background-color: inherit;
53+
float: left;
54+
border: none;
55+
outline: none;
56+
cursor: pointer;
57+
height: 3.5em;
58+
padding: 0px 16px;
59+
transition: 0.25s ease;
60+
border-bottom: 2px solid $sidebar-color;
61+
}
62+
63+
.tab button:hover {
64+
border-bottom: 3px solid $feedback-color;
65+
transition: 0.25s ease;
66+
}
67+
68+
.tab button.active {
69+
border-bottom: 3px solid $btn-primary-color;
70+
}
71+
72+
.tab button.download {
73+
background-color: $btn-primary-color;
74+
float: right;
75+
}
76+
77+
:root {
78+
--fade-height: 110px;
79+
}
80+
.tabcontent {
81+
border-radius: 3px;
82+
display: none;
83+
padding: 6px 12px;
84+
border-top: none;
85+
&:after {
86+
content: "";
87+
position: absolute;
88+
bottom: 0;
89+
left: 0;
90+
width: 100%;
91+
height: var(--fade-height);
92+
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50% );
93+
}
94+
}
95+
96+
.expand {
97+
position: absolute;
98+
bottom: 0px;
99+
margin-bottom: 1em;
100+
left: 50%;
101+
transform: translateX(-50%);
102+
appearance: none;
103+
background: rgba($btn-primary-color, 0.1);
104+
color: $btn-primary-color;
105+
display: inline-flex;
106+
height: 26px;
107+
text-decoration: none;
108+
line-height: 26px;
109+
padding: 0 14px;
110+
font-size: 14px;
111+
border-radius: 3px;
112+
border: 0px solid $btn-primary-color;
113+
}
114+
115+
.expand:hover {background:rgba($btn-primary-color, 0.2)}

‎contribute/example_multiple_scripts/README.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
---
2+
title: Example product
3+
parent: Contribute
4+
5+
layout: multiscript
6+
permalink: /contribute/example-multi/
7+
nav_exclude: true
8+
scripts:
9+
- [EO-Browser, eob.js]
10+
- [Raw Values, raw.js]
11+
---
12+
13+
The layout `script` automatically adds the title defined in the front matter and adds buttons to visualize the script. For the buttons to work the evalscript has to be named `script.js` and must be in the same directory as the `README.md` file.
14+
15+
## Evaluate and visualize
16+
- [EO Browser](https://apps.sentinel-hub.com/eo-browser/#lat=41.9&lng=12.5&zoom=10&datasource=Sentinel-2%20L1C&time=2017-10-08&preset=CUSTOM&layers=B01,B02,B03&evalscripturl=https://raw.githubusercontent.com/sentinel-hub/customScripts/master/example/script.js){:target="_blank"}
17+
18+
## General description of the script
19+
20+
## References
21+
- possible references (scientific articles, wiki/web references, ...)

0 commit comments

Comments
 (0)