add horizontal scrollable gallery (for featured examples), supports a…

…uto-scroll while mouse is not over element
FabianBartl · Nov 2, 2023 · 1941442 · 1941442
1 parent 3396ceb
commit 1941442
Show file tree

Hide file tree

Showing 11 changed files with 212 additions and 21 deletions.
diff --git a/.jekyll-metadata b/.jekyll-metadata
diff --git a/_data/galleries/workshop23 b/_data/galleries/workshop23
diff --git a/_includes/gallery.html b/_includes/gallery.html
diff --git a/_site/css/customstyles.css b/_site/css/customstyles.css
@@ -1289,6 +1289,30 @@ abbr[title]:after {
     width: 100%;
 }
 
+/* horizontal scrollable rows */
+.row.no-wrap-scrollable-x {
+    display: flex;
+    overflow-x: auto;
+    white-space: nowrap;
+    /* margin: auto; */
+    scroll-snap-type: x mandatory;
+    outline: 1px solid red;
+}
+.row.no-wrap-scrollable-x > div {
+    display: ruby;
+    white-space: initial;
+    scroll-snap-align: start;
+}
+
+/* show scrollbar at top of container */
+.scrollbar-at-top {
+    transform: rotateX(180deg);
+}
+.scrollbar-at-top > * {
+    padding-top: 10px;
+    transform: rotateX(180deg);
+}
+
 /* -------------------------- */
 /* important / override rules */
 /* -------------------------- */

diff --git a/_site/index.html b/_site/index.html
@@ -223,6 +223,7 @@
 <img src="https://img.shields.io/github/downloads/mtex-toolbox/mtex/total" alt="" /> 
 <img src="https://img.shields.io/github/contributors/mtex-toolbox/mtex" alt="" /> </p>
 
+<!-- news and community card -->
 <div class="row">
     <div id="home-news" class="col-md-6">
         <div class="panel panel-default">
@@ -325,6 +326,7 @@
     </div>
 </div>
 
+<!-- a bunch of links as documentation overview  -->
 <div class="row">
     <div id="home-documentation" class="col-md-12">
         <div class="panel panel-default">
@@ -342,7 +344,45 @@
     </div>
 </div>
 
-<div class="row">
+<!-- some examples with image and description -->
+<div class="row no-wrap-scrollable-x auto-scroll-x scrollbar-at-top">
+    <div class="col-md-4">
+        <div class="panel panel-default text-center">
+            <div class="panel-heading">
+                <img src="images/thumbnails/GrainTutorial.jpg" />
+            </div>
+            <div class="panel-body">
+                <h4>Grain Tutorial</h4>
+                <p>A quick guide through the grain reconstruction capabilities of MTEX.</p>
+                <a href="GrainTutorial.html" class="btn btn-primary">Learn More</a>
+            </div>
+        </div>
+    </div>
+    <div class="col-md-4">
+        <div class="panel panel-default text-center">
+            <div class="panel-heading">
+                <img src="images/thumbnails/EBSDDenoising.jpg" />
+            </div>
+            <div class="panel-body">
+                <h4>Denoising Orientation Maps</h4>
+                <p>In this section we demonstrate how random errors can be significantly reduced using denoising techniques.</p>
+                <a href="EBSDDenoising.html" class="btn btn-primary">Learn More</a>
+            </div>
+        </div>
+    </div>
+    <div class="col-md-4">
+        <div class="panel panel-default text-center">
+            <div class="panel-heading">
+                <img src="images/thumbnails/MaParentGrainReconstruction.jpg" />
+            </div>
+            <div class="panel-body">
+                <h4>Martensite Parent Grain Reconstruction</h4>
+                <p>Here we demonstrate the tools MTEX offers to reconstruct a parent austenite phase from a measured martensite phase.</p>
+                <a href="MaParentGrainReconstruction.html" class="btn btn-primary">Learn More</a>
+            </div>
+        </div>
+    </div>
+    <!-- proberly begin of second page -->
     <div class="col-md-4">
         <div class="panel panel-default text-center">
             <div class="panel-heading">
@@ -381,6 +421,7 @@ <h4>Martensite Parent Grain Reconstruction</h4>
     </div>
 </div>
 
+<!-- latest publications and featured addons cards -->
 <div class="row">
     <div id="home-latest-publications" class="col-md-6">
         <div class="panel panel-default">
@@ -422,6 +463,7 @@ <h4>Martensite Parent Grain Reconstruction</h4>
     </div>
 </div>
 
+<!-- requirements and licensing card -->
 <div class="row">
     <div id="home-requirements-and-licensing" class="col-md-12">
         <div class="panel panel-default">

diff --git a/_site/js/customscripts.js b/_site/js/customscripts.js
@@ -1,4 +1,38 @@
 
+function auto_scroll_x(scrollElement, scrollStep=1, scrollDelayMilSec=1000) {
+    const scrollWidth = scrollElement.scrollWidth - scrollElement.clientWidth;
+    const scrollDelay = scrollDelayMilSec;
+
+    // auto-scrolling
+    const scrollAnimation = setInterval(()=>{
+        if (scrollElement.scrollLeft >= scrollWidth) {
+            scrollStep *= -1;
+        } else if (scrollElement.scrollLeft <= 0) {
+            scrollStep *= -1;
+        }
+        scrollElement.scrollBy(scrollStep, 0);
+    }, scrollDelay);
+
+    // stop auto-scrolling while mouse over element
+    scrollElement.addEventListener("mouseenter", (evt)=>{
+        clearInterval(scrollAnimation);
+    });
+    // continue auto-scrolling when mouse leave element
+    scrollElement.addEventListener("mouseleave", (evt)=>{
+        auto_scroll_x(scrollElement, scrollStep, scrollDelayMilSec);
+    });
+
+    // stop auto-scrolling on mobile after short time
+    const scrollDuration = scrollWidth / scrollStep * scrollDelay;
+    if (scrollWidth < 200) {
+        setTimeout(()=>{
+            clearInterval(scrollAnimation);
+        }, scrollDuration);
+    }
+}
+
+
+
 // some small functions
 const uniqId = (()=>{let i=0;return()=>{return i++;}})();
 
@@ -69,6 +103,11 @@ $(document).ready(function() {
             }
         }
     });
+
+    // auto scroll along x-axis
+    $(".auto-scroll-x").each(function() {
+        auto_scroll_x(this, 1, 3000)
+    });
 });
 
 // needed for nav tabs on pages. See Formatting > Nav tabs for more details.

diff --git a/_site/workshop23.html b/_site/workshop23.html
@@ -347,10 +347,6 @@ <h1 class="post-title-main">Freiberg MTEX Workshop 2023</h1>
 	</form>
 </div>
 
-<div class="row" height="30vh">
-
-</div>
-
 <h2 id="week-1-learning-crystallographic-texture-analysis-with-mtex">Week 1: Learning Crystallographic Texture Analysis with MTEX</h2>
 
 <p>Date: 06.03.2023 - 10.03.2023</p>

diff --git a/css/customstyles.css b/css/customstyles.css
@@ -1289,6 +1289,30 @@ abbr[title]:after {
     width: 100%;
 }
 
+/* horizontal scrollable rows */
+.row.no-wrap-scrollable-x {
+    display: flex;
+    overflow-x: auto;
+    white-space: nowrap;
+    /* margin: auto; */
+    scroll-snap-type: x mandatory;
+    outline: 1px solid red;
+}
+.row.no-wrap-scrollable-x > div {
+    display: ruby;
+    white-space: initial;
+    scroll-snap-align: start;
+}
+
+/* show scrollbar at top of container */
+.scrollbar-at-top {
+    transform: rotateX(180deg);
+}
+.scrollbar-at-top > * {
+    padding-top: 10px;
+    transform: rotateX(180deg);
+}
+
 /* -------------------------- */
 /* important / override rules */
 /* -------------------------- */

diff --git a/index.md b/index.md
@@ -20,6 +20,7 @@ of material scientists, geologists and mathematicians.
 ![](https://img.shields.io/github/downloads/mtex-toolbox/mtex/total)&nbsp;
 ![](https://img.shields.io/github/contributors/mtex-toolbox/mtex)&nbsp;
 
+<!-- news and community card -->
 <div class="row">
     <div id="home-news" class="col-md-6">
         <div class="panel panel-default">
@@ -124,6 +125,7 @@ of material scientists, geologists and mathematicians.
     </div>
 </div>
 
+<!-- a bunch of links as documentation overview  -->
 <div class="row">
     <div id="home-documentation" class="col-md-12">
         <div class="panel panel-default">
@@ -141,7 +143,45 @@ of material scientists, geologists and mathematicians.
     </div>
 </div>
 
-<div class="row">
+<!-- some featured examples with image and description -->
+<div class="row no-wrap-scrollable-x auto-scroll-x scrollbar-at-top">
+    <div class="col-md-4">
+        <div class="panel panel-default text-center">
+            <div class="panel-heading">
+                <img src="images/thumbnails/GrainTutorial.jpg">
+            </div>
+            <div class="panel-body">
+                <h4>Grain Tutorial</h4>
+                <p>A quick guide through the grain reconstruction capabilities of MTEX.</p>
+                {% include reference.html link="GrainTutorial.html" content="Learn More" class="btn btn-primary" %}
+            </div>
+        </div>
+    </div>
+    <div class="col-md-4">
+        <div class="panel panel-default text-center">
+            <div class="panel-heading">
+                <img src="images/thumbnails/EBSDDenoising.jpg">
+            </div>
+            <div class="panel-body">
+                <h4>Denoising Orientation Maps</h4>
+                <p>In this section we demonstrate how random errors can be significantly reduced using denoising techniques.</p>
+                {% include reference.html link="EBSDDenoising.html" content="Learn More" class="btn btn-primary" %}
+            </div>
+        </div>
+    </div>
+    <div class="col-md-4">
+        <div class="panel panel-default text-center">
+            <div class="panel-heading">
+                <img src="images/thumbnails/MaParentGrainReconstruction.jpg">
+            </div>
+            <div class="panel-body">
+                <h4>Martensite Parent Grain Reconstruction</h4>
+                <p>Here we demonstrate the tools MTEX offers to reconstruct a parent austenite phase from a measured martensite phase.</p>
+                {% include reference.html link="MaParentGrainReconstruction.html" content="Learn More" class="btn btn-primary" %}
+            </div>
+        </div>
+    </div>
+    <!-- proberly begin of second page -->
     <div class="col-md-4">
         <div class="panel panel-default text-center">
             <div class="panel-heading">
@@ -180,6 +220,7 @@ of material scientists, geologists and mathematicians.
     </div>
 </div>
 
+<!-- latest publications and featured addons cards -->
 <div class="row">
     <div id="home-latest-publications" class="col-md-6">
         <div class="panel panel-default">
@@ -221,6 +262,7 @@ of material scientists, geologists and mathematicians.
     </div>
 </div>
 
+<!-- requirements and licensing card -->
 <div class="row">
     <div id="home-requirements-and-licensing" class="col-md-12">
         <div class="panel panel-default">

diff --git a/js/customscripts.js b/js/customscripts.js
@@ -1,4 +1,38 @@
 
+function auto_scroll_x(scrollElement, scrollStep=1, scrollDelayMilSec=1000) {
+    const scrollWidth = scrollElement.scrollWidth - scrollElement.clientWidth;
+    const scrollDelay = scrollDelayMilSec;
+
+    // auto-scrolling
+    const scrollAnimation = setInterval(()=>{
+        if (scrollElement.scrollLeft >= scrollWidth) {
+            scrollStep *= -1;
+        } else if (scrollElement.scrollLeft <= 0) {
+            scrollStep *= -1;
+        }
+        scrollElement.scrollBy(scrollStep, 0);
+    }, scrollDelay);
+
+    // stop auto-scrolling while mouse over element
+    scrollElement.addEventListener("mouseenter", (evt)=>{
+        clearInterval(scrollAnimation);
+    });
+    // continue auto-scrolling when mouse leave element
+    scrollElement.addEventListener("mouseleave", (evt)=>{
+        auto_scroll_x(scrollElement, scrollStep, scrollDelayMilSec);
+    });
+
+    // stop auto-scrolling on mobile after short time
+    const scrollDuration = scrollWidth / scrollStep * scrollDelay;
+    if (scrollWidth < 200) {
+        setTimeout(()=>{
+            clearInterval(scrollAnimation);
+        }, scrollDuration);
+    }
+}
+
+
+
 // some small functions
 const uniqId = (()=>{let i=0;return()=>{return i++;}})();
 
@@ -69,6 +103,11 @@ $(document).ready(function() {
             }
         }
     });
+
+    // auto scroll along x-axis
+    $(".auto-scroll-x").each(function() {
+        auto_scroll_x(this, 1, 3000)
+    });
 });
 
 // needed for nav tabs on pages. See Formatting > Nav tabs for more details.

diff --git a/pages/workshops/workshop23.md b/pages/workshops/workshop23.md
@@ -18,8 +18,6 @@ The workshop extends over two weeks and is part of the master course {% include
 {% endcapture %}
 {% include password_access_restriction.html content_default=par_default content_access=par_access %}
 
-{% include gallery.html images=site.data.galleries.workshop23 height="30vh" scroll_direction="x" auto_scroll="true" %}
-
 ## Week 1: Learning Crystallographic Texture Analysis with MTEX
 
 Date: 06.03.2023 - 10.03.2023
-Original file line number
+Diff line change
@@ Expand Up @@
     	</form>
     </div>
-    <div class="row" height="30vh">
-    </div>
     <h2 id="week-1-learning-crystallographic-texture-analysis-with-mtex">Week 1: Learning Crystallographic Texture Analysis with MTEX</h2>
     <p>Date: 06.03.2023 - 10.03.2023</p>
@@ Expand Down @@