appscms-tools-theme 4.8.2 → 4.8.4

data/_includes/infographics/infographics.html

@@ -1,244 +1,244 @@
-<style>
-  .inforgraphics_section {
-    width: 100%;
-    padding: 50px 0px 50px 0px;
-    border-top: 1px solid rgb(224, 224, 224);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  .inforgraphics_section .wrapper {
-    display: flex;
-    max-width: 700px;
-    position: relative;
-  }
-
-  .inforgraphics_section .wrapper i {
-    top: 50%;
-    height: 44px;
-    width: 44px;
-    color: #343f4f;
-    cursor: pointer;
-    font-size: 1.15rem;
-    position: absolute;
-    text-align: center;
-    line-height: 44px;
-    background: #eee;
-    border-radius: 50%;
-    transform: translateY(-50%);
-    transition: transform 0.1s linear;
-  }
-
-  .inforgraphics_section .wrapper i:active {
-    transform: translateY(-50%) scale(0.9);
-  }
-
-  .inforgraphics_section .wrapper i:hover {
-    background: #f2f2f2;
-  }
-
-  .inforgraphics_section .wrapper i:first-child {
-    left: 0px;
-    display: none;
-    z-index: 999;
-  }
-
-  .inforgraphics_section .wrapper i:last-child {
-    right: 0px;
-  }
-
-  .carousel {
-    display: flex;
-    max-width: 700px;
-    overflow-x: scroll;
-    scroll-snap-type: x mandatory;
-    scroll-behavior: smooth;
-  }
-
-  .carousel-inner {
-    display: flex;
-    flex-wrap: nowrap;
-  }
-
-  .slide {
-    flex: 0 0 calc(100% / 3);
-    scroll-snap-align: start;
-    padding: 20px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .carousel img {
-    object-fit: contain;
-
-    height: auto;
-    border-radius: 8px;
-  }
-
-  .carousel-inner p {
-    text-align: center;
-    margin: 10px 0;
-    font-size: 14px;
-    white-space: normal;
-    word-wrap: break-word;
-  }
-
-  @media screen and (max-width: 768px) {
-    .inforgraphics_section .wrapper {
-      max-width: 100%;
-    }
-
-    .carousel-inner p {
-      font-size: 20px;
-    }
-
-    .inforgraphics_section .wrapper i:first-child {
-      left: 0;
-      /* margin-left: 14px; */
-      z-index: 99;
-    }
-
-    .inforgraphics_section .wrapper i:last-child {
-      right: 0;
-      z-index: 99;
-      display: block !important;
-    }
-
-    .carousel {
-      overflow-x: hidden;
-    }
-
-    .slide {
-      flex: 0 0 100%;
-      margin-right: 0;
-    }
-  }
-</style>
-
-<div class="inforgraphics_section">
-  <h3 class="text-center w-100 mb-5"><b>Other useful information</b></h3>
-  <div class="wrapper">
-    <i id="left" class="fas fa-angle-left"></i>
-    <div class="carousel">
-      <div class="carousel-inner">
-        {%- if homeData.infographics -%} {% for item in homeData.infographics %}
-        <div class="slide">
-          <img
-            loading="lazy"
-            src="{{ item.image }}"
-            alt="img"
-            draggable="false"
-          />
-          <p class="infographic-desc">{{ item.description | capitalize }}</p>
-        </div>
-        {% endfor %} {%- else -%} {% for item in featureData.infographics %}
-        <div class="slide">
-          <img
-            loading="lazy"
-            src="{{ item.image }}"
-            alt="img"
-            draggable="false"
-          />
-          <p class="infographic-desc">{{ item.description | capitalize }}</p>
-        </div>
-        {% endfor %} {%- endif -%}
-      </div>
-    </div>
-    <i id="right" class="fas fa-angle-right"></i>
-  </div>
-</div>
-
-<script>
-  const carousel = document.querySelector(".carousel-inner"),
-    firstImg = carousel.querySelectorAll("img")[0],
-    arrowIcons = document.querySelectorAll(".wrapper i");
-
-  const numImages = carousel.querySelectorAll("img").length;
-  const isMobile = window.matchMedia("(max-width: 767px)").matches; // Check if screen width is less than or equal to 767px
-
-  if (numImages > 3) {
-    arrowIcons[1].style.display = "block";
-  } else {
-    // arrowIcons[0].style.display = "none";
-    // arrowIcons[1].style.display = "none";
-  }
-
-  let isDragStart = false,
-    isDragging = false,
-    prevPageX,
-    prevScrollLeft,
-    positionDiff;
-  const showHideIcons = () => {
-    let scrollWidth = carousel.scrollWidth - carousel.clientWidth; // getting max scrollable width
-    arrowIcons[0].style.display = carousel.scrollLeft == 0 ? "none" : "block";
-    arrowIcons[1].style.display =
-      carousel.scrollLeft == scrollWidth ? "none" : "block";
-  };
-
-  arrowIcons.forEach((icon) => {
-    icon.addEventListener("click", () => {
-      let firstImgWidth = firstImg.clientWidth + 40;
-      const scrollAmount = icon.id === "left" ? -firstImgWidth : firstImgWidth;
-      carousel.scrollBy({
-        left: "100vw",
-        behavior: "smooth",
-      });
-      setTimeout(() => showHideIcons(), 60); // calling showHideIcons after 60ms
-    });
-  });
-
-  // const autoSlide = () => {
-  //   // if there is no image left to scroll then return from here
-  //   if (carousel.scrollLeft - (carousel.scrollWidth - carousel.clientWidth) > -1 || carousel.scrollLeft <= 0) return;
-
-  //   positionDiff = Math.abs(positionDiff); // making positionDiff value to positive
-  //   let firstImgWidth = firstImg.clientWidth + 14;
-  //   // getting difference value that needs to add or reduce from carousel left to take middle img center
-  //   let valDifference = firstImgWidth - positionDiff;
-
-  //   if (carousel.scrollLeft > prevScrollLeft) { // if user is scrolling to the right
-  //     return carousel.scrollLeft += positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
-  //   }
-  //   // if user is scrolling to the left
-  //   carousel.scrollLeft -= positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
-  // }
-
-  // const dragStart = (e) => {
-  //   // updatating global variables value on mouse down event
-  //   isDragStart = true;
-  //   prevPageX = e.pageX || e.touches[0].pageX;
-  //   prevScrollLeft = carousel.scrollLeft;
-  // }
-
-  // const dragging = (e) => {
-  //   // scrolling images/carousel to left according to mouse pointer
-  //   if (!isDragStart) return;
-  //   e.preventDefault();
-  //   isDragging = true;
-  //   carousel.classList.add("dragging");
-  //   positionDiff = (e.pageX || e.touches[0].pageX) - prevPageX;
-  //   carousel.scrollLeft = prevScrollLeft - positionDiff;
-  //   showHideIcons();
-  // }
-
-  // const dragStop = () => {
-  //   isDragStart = false;
-  //   carousel.classList.remove("dragging");
-
-  //   if (!isDragging) return;
-  //   isDragging = false;
-  //   autoSlide();
-  // }
-
-  // carousel.addEventListener("mousedown", dragStart);
-  // carousel.addEventListener("touchstart", dragStart);
-
-  // document.addEventListener("mousemove", dragging);
-  // carousel.addEventListener("touchmove", dragging);
-
-  // document.addEventListener("mouseup", dragStop);
-  // carousel.addEventListener("touchend", dragStop);
-</script>
+<style>
+  .inforgraphics_section {
+    width: 100%;
+    padding: 50px 0px 50px 0px;
+    border-top: 1px solid rgb(224, 224, 224);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .inforgraphics_section .wrapper {
+    display: flex;
+    max-width: 700px;
+    position: relative;
+  }
+
+  .inforgraphics_section .wrapper i {
+    top: 50%;
+    height: 44px;
+    width: 44px;
+    color: #343f4f;
+    cursor: pointer;
+    font-size: 1.15rem;
+    position: absolute;
+    text-align: center;
+    line-height: 44px;
+    background: #eee;
+    border-radius: 50%;
+    transform: translateY(-50%);
+    transition: transform 0.1s linear;
+  }
+
+  .inforgraphics_section .wrapper i:active {
+    transform: translateY(-50%) scale(0.9);
+  }
+
+  .inforgraphics_section .wrapper i:hover {
+    background: #f2f2f2;
+  }
+
+  .inforgraphics_section .wrapper i:first-child {
+    left: 0px;
+    display: none;
+    z-index: 999;
+  }
+
+  .inforgraphics_section .wrapper i:last-child {
+    right: 0px;
+  }
+
+  .carousel {
+    display: flex;
+    max-width: 700px;
+    overflow-x: scroll;
+    scroll-snap-type: x mandatory;
+    scroll-behavior: smooth;
+  }
+
+  .carousel-inner {
+    display: flex;
+    flex-wrap: nowrap;
+  }
+
+  .slide {
+    flex: 0 0 calc(100% / 3);
+    scroll-snap-align: start;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .carousel img {
+    object-fit: contain;
+
+    height: auto;
+    border-radius: 8px;
+  }
+
+  .carousel-inner p {
+    text-align: center;
+    margin: 10px 0;
+    font-size: 14px;
+    white-space: normal;
+    word-wrap: break-word;
+  }
+
+  @media screen and (max-width: 768px) {
+    .inforgraphics_section .wrapper {
+      max-width: 100%;
+    }
+
+    .carousel-inner p {
+      font-size: 20px;
+    }
+
+    .inforgraphics_section .wrapper i:first-child {
+      left: 0;
+      /* margin-left: 14px; */
+      z-index: 99;
+    }
+
+    .inforgraphics_section .wrapper i:last-child {
+      right: 0;
+      z-index: 99;
+      display: block !important;
+    }
+
+    .carousel {
+      overflow-x: hidden;
+    }
+
+    .slide {
+      flex: 0 0 100%;
+      margin-right: 0;
+    }
+  }
+</style>
+
+<div class="inforgraphics_section">
+  <h3 class="text-center w-100 mb-5"><b>Other useful information</b></h3>
+  <div class="wrapper">
+    <i id="left" class="fas fa-angle-left"></i>
+    <div class="carousel">
+      <div class="carousel-inner">
+        {%- if homeData.infographics -%} {% for item in homeData.infographics %}
+        <div class="slide">
+          <img
+            loading="lazy"
+            src="{{ item.image }}"
+            alt="img"
+            draggable="false"
+          />
+          <p class="infographic-desc">{{ item.description | capitalize }}</p>
+        </div>
+        {% endfor %} {%- else -%} {% for item in featureData.infographics %}
+        <div class="slide">
+          <img
+            loading="lazy"
+            src="{{ item.image }}"
+            alt="img"
+            draggable="false"
+          />
+          <p class="infographic-desc">{{ item.description | capitalize }}</p>
+        </div>
+        {% endfor %} {%- endif -%}
+      </div>
+    </div>
+    <i id="right" class="fas fa-angle-right"></i>
+  </div>
+</div>
+
+<script>
+  const carousel = document.querySelector(".carousel-inner"),
+    firstImg = carousel.querySelectorAll("img")[0],
+    arrowIcons = document.querySelectorAll(".wrapper i");
+
+  const numImages = carousel.querySelectorAll("img").length;
+  const isMobile = window.matchMedia("(max-width: 767px)").matches; // Check if screen width is less than or equal to 767px
+
+  if (numImages > 3) {
+    arrowIcons[1].style.display = "block";
+  } else {
+    // arrowIcons[0].style.display = "none";
+    // arrowIcons[1].style.display = "none";
+  }
+
+  let isDragStart = false,
+    isDragging = false,
+    prevPageX,
+    prevScrollLeft,
+    positionDiff;
+  const showHideIcons = () => {
+    let scrollWidth = carousel.scrollWidth - carousel.clientWidth; // getting max scrollable width
+    arrowIcons[0].style.display = carousel.scrollLeft == 0 ? "none" : "block";
+    arrowIcons[1].style.display =
+      carousel.scrollLeft == scrollWidth ? "none" : "block";
+  };
+
+  arrowIcons.forEach((icon) => {
+    icon.addEventListener("click", () => {
+      let firstImgWidth = firstImg.clientWidth + 40;
+      const scrollAmount = icon.id === "left" ? -firstImgWidth : firstImgWidth;
+      carousel.scrollBy({
+        left: "100vw",
+        behavior: "smooth",
+      });
+      setTimeout(() => showHideIcons(), 60); // calling showHideIcons after 60ms
+    });
+  });
+
+  // const autoSlide = () => {
+  //   // if there is no image left to scroll then return from here
+  //   if (carousel.scrollLeft - (carousel.scrollWidth - carousel.clientWidth) > -1 || carousel.scrollLeft <= 0) return;
+
+  //   positionDiff = Math.abs(positionDiff); // making positionDiff value to positive
+  //   let firstImgWidth = firstImg.clientWidth + 14;
+  //   // getting difference value that needs to add or reduce from carousel left to take middle img center
+  //   let valDifference = firstImgWidth - positionDiff;
+
+  //   if (carousel.scrollLeft > prevScrollLeft) { // if user is scrolling to the right
+  //     return carousel.scrollLeft += positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
+  //   }
+  //   // if user is scrolling to the left
+  //   carousel.scrollLeft -= positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
+  // }
+
+  // const dragStart = (e) => {
+  //   // updatating global variables value on mouse down event
+  //   isDragStart = true;
+  //   prevPageX = e.pageX || e.touches[0].pageX;
+  //   prevScrollLeft = carousel.scrollLeft;
+  // }
+
+  // const dragging = (e) => {
+  //   // scrolling images/carousel to left according to mouse pointer
+  //   if (!isDragStart) return;
+  //   e.preventDefault();
+  //   isDragging = true;
+  //   carousel.classList.add("dragging");
+  //   positionDiff = (e.pageX || e.touches[0].pageX) - prevPageX;
+  //   carousel.scrollLeft = prevScrollLeft - positionDiff;
+  //   showHideIcons();
+  // }
+
+  // const dragStop = () => {
+  //   isDragStart = false;
+  //   carousel.classList.remove("dragging");
+
+  //   if (!isDragging) return;
+  //   isDragging = false;
+  //   autoSlide();
+  // }
+
+  // carousel.addEventListener("mousedown", dragStart);
+  // carousel.addEventListener("touchstart", dragStart);
+
+  // document.addEventListener("mousemove", dragging);
+  // carousel.addEventListener("touchmove", dragging);
+
+  // document.addEventListener("mouseup", dragStop);
+  // carousel.addEventListener("touchend", dragStop);
+</script>

data/_includes/internationalization-section.html

@@ -1,47 +1,64 @@
-{%- include languages/languages.html -%} {%- if page.nointernationalization -%}
-<div></div>
-{%- elsif site.internationalizationall -%}
-<div class="container-fluid int-section">
-  <div class="d-flex justify-content-center mt-1">
-    <div>Available in</div>
-  </div>
-  <div class="lang-container">
-    {%- assign currentPermalink = page.permalink -%} {%- assign pageLang =
-    page.lang -%} {%- for i in matchurls -%} {%- for checklang in site.pages -%}
-    {%- assign linkToCheck ="/" |append: i|append:currentPermalink -%} {%- if
-    pageLang !="en" -%} {%- assign stringToReplace = "/"|append: pageLang-%}
-    {%-assign linkToCheck = linkToCheck | replace: stringToReplace, ""%}
-    {%-endif-%} {%- if checklang.permalink == linkToCheck -%} {%- assign
-    languagetext = [i]-%}
-
-    <a class="m-2 languageLinks" href="{{ checklang.permalink }}">
-      {%- if languagetext[0]==page.lang -%} English {%- else -%} {{
-      languagetext[1] }} {%- endif -%}
-    </a>
-
-    {%- endif -%} {%- endfor -%} {%- endfor -%}
-  </div>
-</div>
-
-{%- endif -%}
-<style>
-  .lang-container {
-    display: grid;
-    grid-template-columns: auto auto auto auto;
-    padding: 10px;
-  }
-  .languageLinks {
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    color: #6b6b6b;
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 18px;
-  }
-  .int-section {
-    padding: 10px;
-    background-color: white;
-    border-top: 1px solid rgb(148, 148, 148);
-  }
-</style>
+{%- include languages/languages.html -%} {%- if page.nointernationalization -%}
+<div></div>
+{%- elsif site.internationalizationall -%}
+
+<div class="internationalization-section">
+  <div class="row">
+    <div class="col-md-11 mx-auto">
+      <div class="d-flex justify-content-center mt-1">
+        <h3>Available in</h3>
+      </div>
+      <div class="internationalization-languages">
+        {%- for item in matchurls -%} {%- if item != 'zh-TW' -%} {%- if item ==
+        'en'-%} {%- if dataFile.htmlLangAtt == item -%}
+    
+        <a
+          class="active-lang internationalization-language-drop-down-item font-weight-bold"
+          href="{{ page.permalink}}"
+          >English <i class="fas fa-check ml-auto"></i>
+        </a>
+    
+        {%- else -%} {%- if dataFile.features -%}
+        <a class="internationalization-language-drop-down-item" href="/">English</a>
+        {%- else -%}
+        <a
+          class="internationalization-language-drop-down-item"
+          href="/{{ page.permalink | split: '/' | last}}"
+          >English
+        </a>
+        {%- endif -%} {%- endif -%} {%- else -%} {%- if dataFile.htmlLangAtt == item
+        -%} < > {%- if page.permalink | split: '/' | last != item -%}
+        <a
+          class="internationalization-language-drop-down-item font-weight-bold active-lang"
+          href="{{ page.permalink}}"
+          >{{[item][1]}}
+          <i class="fas fa-check ml-auto"></i>
+        </a>
+        {%- else -%}
+        <a class="active-lang" href="/{{item}}"
+          >{{[item][1]}}
+          <i class="fas fa-check ml-auto"></i>
+        </a>
+        {%- endif -%} {%- else -%} {%- if page.permalink | split: '/' | last != item
+        -%} {%- if dataFile.features -%}
+        <a class="internationalization-language-drop-down-item" href="/{{item}}">{{[item][1]}} </a>
+        {%- else -%}
+        <a
+          class="internationalization-language-drop-down-item"
+          href="/{{item}}/{{ page.permalink | split: '/' | last}}"
+          >{{[item][1]}}
+        </a>
+        {%- endif -%} {%- else -%}
+        <a class="internationalization-language-drop-down-item" href="/{{item}}">{{[item][1]}} </a>
+        {%- endif -%} {%- endif -%} {%- endif -%} {%- endif -%} {%- endfor -%}
+      </ul>
+    </div>
+    </div>
+  </div>
+ 
+</div>
+
+
+
+{%- endif -%}
+