@openeuropa/bcl-theme-default 0.19.0 → 0.22.0

package/src/js/gallery/gallery.js

@@ -0,0 +1,168 @@
+/**
+ * --------------------------------------------------------------------------
+ * Bootstrap (v5.1.3): gallery.js
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ * --------------------------------------------------------------------------
+ */
+
+import { defineJQueryPlugin, typeCheckConfig } from '@openeuropa/bcl-bootstrap/js/src/util/index'
+import EventHandler from '@openeuropa/bcl-bootstrap/js/src/dom/event-handler'
+import BaseComponent from '@openeuropa/bcl-bootstrap/js/src/base-component'
+import SelectorEngine from '@openeuropa/bcl-bootstrap/js/src/dom/selector-engine'
+import Manipulator from '@openeuropa/bcl-bootstrap/js/src/dom/manipulator'
+
+/**
+ * ------------------------------------------------------------------------
+ * Constants
+ * ------------------------------------------------------------------------
+ */
+
+const Default = {}
+const DefaultType = {}
+
+const NAME = 'gallery'
+const DATA_KEY = 'bs.gallery'
+const EVENT_KEY = `.${DATA_KEY}`
+const DATA_API_KEY = '.data-api'
+
+const CAROUSEL_SELECTOR = '.carousel'
+const CAROUSEL_PAGER_SELECTOR = '.carousel-pager span'
+const CAROUSEL_ACTIVE_SELECTOR = '.carousel-item.active'
+const CAROUSEL_ITEM_SELECTOR = '.carousel-item'
+const THUMBNAIL_SELECTOR = '.bcl-gallery__grid a, .bcl-gallery__mobile-view-more'
+const MODAL_SELECTOR = '.modal'
+const EVENT_MODAL_HIDE = 'hide.bs.modal'
+const CAROUSEL_EVENT = 'slide.bs.carousel'
+const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
+
+/**
+ * ------------------------------------------------------------------------
+ * Class Definition
+ * ------------------------------------------------------------------------
+ */
+
+class Gallery extends BaseComponent {
+  constructor(element, config) {
+    super(element)
+    this._carousel = SelectorEngine.findOne(CAROUSEL_SELECTOR, this._element)
+    this._carouselPager = SelectorEngine.findOne(CAROUSEL_PAGER_SELECTOR, this._element)
+    this._carouselStartIndex = element.getAttribute('data-gallery-start')
+    this._carouselActiveItem = SelectorEngine.find(CAROUSEL_ITEM_SELECTOR, this._carousel)[this._carouselStartIndex]
+    this._carouselPager.textContent = Number(this._carouselStartIndex) + 1
+    this._modal = SelectorEngine.findOne(MODAL_SELECTOR, this._element)
+    this._config = this._getConfig(config)
+    this._addEventListeners()
+    this._carouselLazyLoad(this._carouselActiveItem)
+  }
+
+  // Getters
+  static get NAME() {
+    return NAME
+  }
+
+  // Public
+  setSlide(event) {
+    const slideFrom = SelectorEngine.findOne(CAROUSEL_ACTIVE_SELECTOR, this._carousel)
+    const slideTo = event.relatedTarget
+    this._carouselLazyLoad(slideTo)
+    this._carouselPager.textContent = event.to + 1
+    this.stopVideo(slideFrom)
+  }
+
+  stopSlide() {
+    const currentSlide = SelectorEngine.findOne(CAROUSEL_ACTIVE_SELECTOR, this._carousel)
+    this.stopVideo(currentSlide)
+  }
+
+  stopVideo(slide) {
+    const iframe = SelectorEngine.findOne('iframe', slide);
+    const video = SelectorEngine.findOne('video', slide);
+    if (iframe) {
+      iframe.src = iframe.dataset.src;
+    } else if (video) {
+      video.pause();
+    }
+  }
+
+  // Private
+  _carouselLazyLoad(slide) {
+    const media = SelectorEngine.findOne('[data-src]', slide);
+
+    if (media && !media.src) {
+      media.src = media.dataset.src;
+    }
+  }
+
+  _getConfig(config) {
+    config = {
+      ...Default,
+      ...Manipulator.getDataAttributes(this._element),
+      ...(typeof config === 'object' ? config : {})
+    }
+    typeCheckConfig(NAME, config, DefaultType)
+    return config
+  }
+
+  _addEventListeners() {
+    EventHandler.on(this._carousel, CAROUSEL_EVENT, event => this.setSlide(event))
+    EventHandler.on(this._modal, EVENT_MODAL_HIDE, event => this.stopSlide(event))
+  }
+
+  // Static
+  static get Default() {
+    return Default
+  }
+
+  static galleryInterface(element, config) {
+    const data = Gallery.getOrCreateInstance(element, config)
+
+    let { _config } = data
+    if (typeof config === 'object') {
+      _config = {
+        ..._config,
+        ...config
+      }
+    }
+  }
+
+  static jQueryInterface(config) {
+    return this.each(function () {
+      const data = Gallery.getOrCreateInstance(this)
+
+      if (typeof config !== 'string') {
+        return
+      }
+
+      if (data[config] === undefined || config.startsWith('_') || config === 'constructor') {
+        throw new TypeError(`No method named "${config}"`)
+      }
+
+      data[config](this)
+    })
+  }
+}
+
+/**
+ * ------------------------------------------------------------------------
+ * Data Api implementation
+ * ------------------------------------------------------------------------
+ */
+
+EventHandler.on(document, EVENT_CLICK_DATA_API, THUMBNAIL_SELECTOR, function (event) {
+  const gallery = event.target.closest('div.bcl-gallery')
+  const firstSlide = event.target.parentNode.getAttribute('data-bs-slide-to');
+  gallery.dataset.galleryStart = firstSlide;
+
+  Gallery.galleryInterface(gallery, Gallery.getInstance(gallery))
+})
+
+/**
+ * ------------------------------------------------------------------------
+ * jQuery
+ * ------------------------------------------------------------------------
+ * add .gallery to jQuery only if jQuery is present
+ */
+
+defineJQueryPlugin(Gallery)
+
+export default Gallery

package/src/js/index.esm.js

@@ -10,6 +10,7 @@ import Button from "@openeuropa/bcl-bootstrap/js/src/button";
 import Carousel from "@openeuropa/bcl-bootstrap/js/src/carousel";
 import Collapse from "@openeuropa/bcl-bootstrap/js/src/collapse";
 import Dropdown from "@openeuropa/bcl-bootstrap/js/src/dropdown";
+import Gallery from "@openeuropa/bcl-theme-default/src/js/gallery/gallery";
 import Modal from "@openeuropa/bcl-bootstrap/js/src/modal";
 import Offcanvas from "@openeuropa/bcl-bootstrap/js/src/offcanvas";
 import Popover from "@openeuropa/bcl-bootstrap/js/src/popover";
@@ -24,6 +25,7 @@ export {
   Carousel,
   Collapse,
   Dropdown,
+  Gallery,
   Modal,
   Offcanvas,
   Popover,

package/src/js/index.umd.js

@@ -10,6 +10,7 @@ import Button from "@openeuropa/bcl-bootstrap/js/src/button";
 import Carousel from "@openeuropa/bcl-bootstrap/js/src/carousel";
 import Collapse from "@openeuropa/bcl-bootstrap/js/src/collapse";
 import Dropdown from "@openeuropa/bcl-bootstrap/js/src/dropdown";
+import Gallery from "@openeuropa/bcl-theme-default/src/js/gallery/gallery";
 import Modal from "@openeuropa/bcl-bootstrap/js/src/modal";
 import Offcanvas from "@openeuropa/bcl-bootstrap/js/src/offcanvas";
 import Popover from "@openeuropa/bcl-bootstrap/js/src/popover";
@@ -24,6 +25,7 @@ export default {
   Carousel,
   Collapse,
   Dropdown,
+  Gallery,
   Modal,
   Offcanvas,
   Popover,

package/src/scss/_badge.scss

@@ -8,20 +8,20 @@
     font-size: $badge-font-size-desktop;
   }
   .icon--close {
-    display: inline-block;
+    display: inline-flex;
     width: 12px;
     height: 12px;
     margin-left: 0.3rem;
     font-size: 1em;
     font-weight: 300;
-    line-height: 0.55rem;
-    vertical-align: inherit;
+    justify-content: center;
+    align-items: center;
     cursor: pointer;
     background: $white;
     border-radius: 50%;
     svg {
-      width: 12px;
-      height: 12px;
+      width: 6px;
+      height: 6px;
       margin: 0;
     }
   }

package/src/scss/_banners.scss

@@ -42,12 +42,12 @@
   &::before {
     display: block;
     width: 100%;
-    padding-top: 25%;
+    padding-top: 20%;
     content: "";
   }
 
   .hero &::before {
-    padding-top: 33.33%;
+    padding-top: 25%;
   }
 }
 
@@ -147,14 +147,14 @@
     &::before {
       display: block;
       width: 100%;
-      padding-top: 25%;
+      padding-top: 20%;
       content: "";
     }
 
     &.hero {
       min-height: 380px;
       &::before {
-        padding-top: 33.33%;
+        padding-top: 25%;
       }
     }
   }

package/src/scss/_bcl-offcanvas.scss

@@ -5,10 +5,17 @@
     visibility: visible !important; // stylelint-disable-line declaration-no-important
     border: none;
     transform: none;
+    box-shadow: none;
 
     .offcanvas-body {
       overflow: visible;
     }
+
+    .offcanvas-title {
+      height: 38px;
+      display: flex;
+      align-items: center;
+    }
   }
 
   .bcl-offcanvas + .offcanvas-backdrop {

package/src/scss/_carousel.scss

@@ -0,0 +1,85 @@
+$indicator-size: 8px;
+
+.carousel-indicators {
+  background-color: rgba(0, 0, 0, 0.5);
+  margin: 0;
+  [data-bs-target] {
+    width: $indicator-size;
+    height: $indicator-size;
+    margin: map-get($spacers, "1-5") map-get($spacers, 2) map-get($spacers, 3);
+    border-radius: 50%;
+  }
+}
+
+.carousel-caption {
+  width: 100%;
+  left: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  bottom: 0;
+  padding: map-get($spacers, 3) 0 map-get($spacers, 4);
+  p {
+    margin-bottom: 0;
+  }
+  a {
+    color: $white;
+    text-decoration-color: $white;
+  }
+}
+
+.carousel-dark {
+  .carousel-caption {
+    background-color: rgba(255, 255, 255, 0.5);
+    a {
+      color: $black;
+      text-decoration-color: $black;
+    }
+  }
+
+  .carousel-indicators {
+    background-color: rgba(255, 255, 255, 0.5);
+  }
+}
+
+.carousel-control-next,
+.carousel-control-prev {
+  opacity: 1;
+  &:hover {
+    opacity: 1;
+  }
+}
+
+.carousel-control-prev-icon,
+.carousel-control-next-icon {
+  width: 40px;
+  height: 40px;
+  background-size: 60% 60%;
+  background-color: rgba(0, 0, 0, 0.5);
+  border-radius: 4px;
+}
+
+.carousel-control-next-icon {
+  background-position: 9px center;
+}
+
+.carousel-control-prev-icon {
+  background-position: 7px center;
+}
+
+.carousel.rounded-indicators {
+  .carousel-control-prev-icon,
+  .carousel-control-next-icon {
+    border-radius: 50%;
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .carousel-indicators {
+    & + .carousel-inner {
+      .carousel-caption {
+        bottom: 50px;
+        padding-bottom: 0;
+      }
+    }
+  }
+}

package/src/scss/_circular-progress-bar.scss

@@ -0,0 +1,122 @@
+@use "sass:math";
+
+//styling
+$borderWidth: 12px;
+$animationTime: 1s;
+$size: 120px;
+
+//Create how many steps
+$howManySteps: 20;
+
+.circular-progress {
+  width: $size;
+  height: $size;
+  line-height: $size;
+  background: none;
+  box-shadow: none;
+  position: relative;
+  &:after {
+    content: "";
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    border: $borderWidth solid $circular-progress-border-color;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  > span {
+    width: 50%;
+    height: 100%;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    z-index: 1;
+  }
+}
+
+.circular-progress-bar {
+  width: 100%;
+  height: 100%;
+  background: none;
+  border-width: $borderWidth;
+  border-style: solid;
+  position: absolute;
+  top: 0;
+  border-color: $circular-progress-border-color-fill;
+}
+
+.circular-progress-left {
+  left: 0;
+  .circular-progress-bar {
+    left: 100%;
+    border-top-right-radius: math.div($size, 2);
+    border-bottom-right-radius: math.div($size, 2);
+    border-left: 0;
+    transform-origin: center left;
+  }
+}
+
+.circular-progress-right {
+  right: 0;
+  .circular-progress-bar {
+    left: -100%;
+    border-top-left-radius: math.div($size, 2);
+    border-bottom-left-radius: math.div($size, 2);
+    border-right: 0;
+    transform-origin: center right;
+  }
+}
+
+/* This for loop creates the necessary css animation names 
+Due to the split circle of progress-left and progress right, we must use the animations on each side. 
+*/
+@for $i from 1 through $howManySteps {
+  $stepName: ($i * math.div(100, $howManySteps));
+
+  //animation only the left side if below 50%
+  @if $i <= math.div($howManySteps, 2) {
+    .circular-progress[data-percentage="#{$stepName}"] {
+      .circular-progress-right .circular-progress-bar {
+        animation: loading-#{$i} $animationTime linear forwards;
+      }
+      .circular-progress-left .circular-progress-bar {
+        animation: 0;
+      }
+    }
+  }
+  //animation only the right side if above 50%
+  @if $i > math.div($howManySteps, 2) {
+    .circular-progress[data-percentage="#{$stepName}"] {
+      .circular-progress-right .circular-progress-bar {
+        // prettier-ignore
+        animation: loading-#{ math.div($howManySteps, 2)}
+          $animationTime
+          linear
+          forwards; //set the animation to longest animation
+      }
+      .circular-progress-left .circular-progress-bar {
+        // prettier-ignore
+        animation: loading-#{$i - math.div($howManySteps, 2)}
+          $animationTime
+          linear
+          forwards
+          $animationTime;
+      }
+    }
+  }
+}
+
+//animation
+@for $i from 1 through math.div($howManySteps, 2) {
+  $degrees: math.div(180, math.div($howManySteps, 2));
+  $degrees: ($degrees * $i);
+  @keyframes loading-#{$i} {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(#{$degrees}deg);
+    }
+  }
+}