Merge pull request #282 from sentinel-hub/feat/multiple-scripts

Test for multiple evalscript in tabs
sentinel-hub · Oct 9, 2023 · e73881f · e73881f
2 parents a47a6e8 + f488ba4
commit e73881f
Show file tree

Hide file tree

Showing 9 changed files with 481 additions and 4 deletions.
diff --git a/_includes/head_custom.html b/_includes/head_custom.html
@@ -17,6 +17,38 @@
             button.innerHTML = 'Show Script';
         }
     }
+
+    function expand() {
+        const container = document.querySelector('.tabcontainer');
+        const button = document.querySelector('.expand');
+        const expandedHeight = "auto";
+        if (container.style.height === expandedHeight) {
+            container.style.height = "250px";
+            button.innerHTML = 'Show full evalscript';
+            document.documentElement.style.setProperty("--fade-height", "100px");
+        } else {
+            container.style.height = expandedHeight;
+            button.innerHTML = 'Collapse evalscript';
+            document.documentElement.style.setProperty("--fade-height", "60px");
+        }
+    }
+
+    function openTab(evt, tabName) {
+        var i, tabcontent, tablinks;
+
+        tabcontent = document.getElementsByClassName("tabcontent");
+        for (i = 0; i < tabcontent.length; i++) {
+            tabcontent[i].style.display = "none";
+        }
+
+        tablinks = document.getElementsByClassName("tablinks");
+        for (i = 0; i < tablinks.length; i++) {
+            tablinks[i].className = tablinks[i].className.replace(" active", "");
+        }
+
+        document.getElementById(tabName).style.display = "block";
+        evt.currentTarget.className += " active";
+    } 
 </script>
 
 {% if jekyll.environment == "production" %}

diff --git a/_includes/js/custom.js b/_includes/js/custom.js
@@ -0,0 +1,55 @@
+(function (jtd, undefined) {
+    jtd.onReady(function () {
+
+        var codeBlocks = document.querySelectorAll('div.highlighter-rouge, div.listingblock > div.content, figure.highlight');
+
+        // 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
+        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>';
+
+        codeBlocks.forEach(codeBlock => {
+            var copyButton = document.createElement('button');
+            var timeout = null;
+            copyButton.style.cssText = 'right:40px';
+            copyButton.type = 'button';
+            copyButton.ariaLabel = 'Download code';
+            copyButton.innerHTML = svgCDownload;
+            codeBlock.append(copyButton);
+
+            copyButton.addEventListener('click', function () {
+                if (timeout === null) {
+                    var code = (codeBlock.querySelector('pre:not(.lineno, .highlight)') || codeBlock.querySelector('code')).innerText;
+                    code = code.replace(/\n/g, "%0D%0A"); 
+
+                    // create an anchor element that we can programmatically click
+                    const a = document.createElement('a');
+
+                    console.log(code)
+
+                    // set up a data uri with the text
+                    a.href = `data:text/plain,${code}`;
+
+                    // set the download attribute so it downloads and uses this as a filename
+                    a.download = 'evalscript.js';
+
+                    // stick it in the document
+                    document.body.appendChild(a);
+
+                    // click it
+                    a.click();
+
+                    copyButton.innerHTML = svgCDownload;
+
+                    var timeoutSetting = 4000;
+
+                    timeout = setTimeout(function () {
+                        copyButton.innerHTML = svgCDownload;
+                        timeout = null;
+                    }, timeoutSetting);
+                }
+            });
+        });
+        // Get the element with id="defaultOpen" and click on it
+        document.getElementById("defaultOpen").click();
+
+    });
+})(window.jtd = window.jtd || {});
diff --git a/_layouts/multiscript.html b/_layouts/multiscript.html
@@ -0,0 +1,37 @@
+---
+layout: default
+---
+
+<h1 class="d-inline" id={{page.slug}}> {{page.title}} </h1>
+
+<!-- Tab links -->
+<div class="tabcontainer">
+<div class="tab", id="script">
+    <button class="tablinks" onclick="openTab(event, 'Visualization')" id="defaultOpen">Visualization</button>
+{% for script in page.scripts %}
+    <button class="tablinks" onclick="openTab(event, '{{ script[0] }}')">{{ script[0] }}</button>
+{% endfor %}
+</div>
+
+<div class="line"></div>
+<div id="Visualization" class="tabcontent">
+{% highlight javascript %}
+{% include_relative script.js %}
+{% endhighlight %}
+</div>
+
+{% for script in page.scripts %}
+{% assign file = script[1] %}
+<!-- Tab content -->
+<div id="{{ script[0] }}" class="tabcontent">
+{% highlight javascript %}
+{% include_relative {{ file }} %}
+{% endhighlight %}
+</div>
+{% endfor %}
+
+<button class="expand" onclick="expand(event)">Show full evalscript</button>
+
+</div>
+
+{{content}}
diff --git a/_sass/custom/custom.scss b/_sass/custom/custom.scss
@@ -2,6 +2,114 @@
     vertical-align: top;
 }
 
-@media (min-width: 50rem) { .main-header { height: 100px;} }
-.site-header { min-height: 100px;  }
-.highlight ::selection { background-color: #a2b228; }
+@media (min-width: 50rem) {
+    .main-header {
+        height: 100px;
+    }
+}
+
+.site-header {
+    min-height: 100px;
+}
+
+.highlight ::selection {
+    background-color: #a2b228;
+}
+
+div.highlighter-rouge>button,
+div.listingblock>div.content>button,
+figure.highlight>button {
+    width:1rem;
+    opacity:0.5;
+}
+
+
+div.highlighter-rouge > button:focus, div.listingblock > div.content > button:focus, figure.highlight > button:focus { opacity: 1; }
+div.highlighter-rouge > button:hover, div.listingblock > div.content > button:hover, figure.highlight > button:hover {opacity: 1 !important; cursor: copy !important;}
+div.highlighter-rouge:hover > button, div.listingblock > div.content:hover > button, figure.highlight:hover > button { opacity: 0.5 }
+div.highlighter-rouge > button svg, div.listingblock > div.content > button svg, figure.highlight > button svg { fill: none !important; }
+
+.tabcontainer {
+    border-radius: 3px;
+    background-color: $code-background-color;
+    box-shadow: 0 0 5px RGBa(0, 0, 0, 0.1);
+    margin-top: 1em;
+    position: relative;
+    overflow: hidden;
+    height: 250px;
+    padding-bottom: 1.5em;
+    transition: height .5s ease;
+}
+
+.tab {
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+    background-color: white;
+    overflow: hidden;
+}
+
+.tab button {
+    background-color: inherit;
+    float: left;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    height: 3.5em; 
+    padding: 0px 16px;
+    transition: 0.25s ease;
+    border-bottom: 2px solid $sidebar-color;
+}
+
+.tab button:hover {
+    border-bottom: 3px solid $feedback-color;
+    transition: 0.25s ease;
+}
+
+.tab button.active {
+    border-bottom: 3px solid $btn-primary-color;
+}
+
+.tab button.download {
+    background-color: $btn-primary-color;
+    float: right;
+}
+
+:root {
+    --fade-height: 110px;
+}
+.tabcontent {
+    border-radius: 3px;
+    display: none;
+    padding: 6px 12px;
+    border-top: none;
+    &:after {
+        content: "";
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: var(--fade-height);
+        background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50% );
+      }
+}
+
+.expand { 
+    position: absolute; 
+    bottom: 0px;  
+    margin-bottom: 1em; 
+    left: 50%;
+    transform: translateX(-50%);
+    appearance: none;
+    background: rgba($btn-primary-color, 0.1);
+    color: $btn-primary-color;
+    display: inline-flex;
+    height: 26px;
+    text-decoration: none;
+    line-height: 26px;
+    padding: 0 14px;
+    font-size: 14px;
+    border-radius: 3px;
+    border: 0px solid $btn-primary-color;
+}
+
+.expand:hover {background:rgba($btn-primary-color, 0.2)}
diff --git a/contribute/example_multiple_scripts/README.md b/contribute/example_multiple_scripts/README.md
@@ -0,0 +1,21 @@
+---
+title: Example product
+parent: Contribute
+
+layout: multiscript
+permalink: /contribute/example-multi/
+nav_exclude: true
+scripts:
+    - [EO-Browser, eob.js]
+    - [Raw Values, raw.js]
+---
+
+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.
+
+## Evaluate and visualize 
+ - [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"}   
+
+## General description of the script
+
+## References
+ - possible references (scientific articles, wiki/web references, ...)