bootstrap-italia 2.3.7 → 2.4.0

package/src/js/plugins/accept-overlay.js

@@ -0,0 +1,118 @@
+import BaseComponent from 'bootstrap/js/src/base-component.js'
+
+import { reflow } from 'bootstrap/js/src/util'
+import { cookies } from './util/cookies'
+import SelectorEngine from 'bootstrap/js/src/dom/selector-engine'
+
+const NAME = 'acceptoverlay'
+
+const CLASS_NAME_FADE = 'fade'
+const CLASS_NAME_SHOW = 'show'
+
+const SELECTOR_DATA_TOGGLE = '[data-bs-accept-from]'
+const SELECTOR_DATA_REMEMBER = '[data-bs-accept-remember]'
+
+class AcceptOverlay extends BaseComponent {
+  constructor(element, config) {
+    const parentElement = element.closest('.acceptoverlay')
+    super(parentElement)
+    const remember = cookies.isChoiceRemembered(config.service)
+    this._isShown = true
+    this._toggleElement = element
+    if (remember) {
+      this.hide()
+      setTimeout(() => {
+        this._toggleElement.dispatchEvent(new Event('click'))
+      }, 100)
+      return
+    }
+    this._toggleElement.addEventListener('click', () => {
+      this.hide()
+      this._remember = this._toggleElement.parentElement.querySelector(SELECTOR_DATA_REMEMBER).checked
+      cookies.rememberChoice(config.service, this._remember)
+    })
+  }
+
+  // Getters
+
+  static get NAME() {
+    return NAME
+  }
+
+  // Public
+
+  show() {
+    if (this._isShown || this._isTransitioning) {
+      return
+    }
+
+    this._isShown = true
+
+    if (this._isAnimated()) {
+      this._isTransitioning = true
+    }
+
+    this._showElement()
+  }
+
+  hide() {
+    if (!this._isShown || this._isTransitioning) {
+      return
+    }
+
+    this._isShown = false
+    const isAnimated = this._isAnimated()
+
+    if (isAnimated) {
+      this._isTransitioning = true
+    }
+
+    this._element.classList.remove(CLASS_NAME_SHOW)
+
+    this._queueCallback(() => this._hideElement(), this._element, isAnimated)
+  }
+
+  //Private
+
+  _isAnimated() {
+    return this._element.classList.contains(CLASS_NAME_FADE)
+  }
+
+  _showElement() {
+    const isAnimated = this._isAnimated()
+
+    this._element.removeAttribute('aria-hidden')
+
+    if (isAnimated) {
+      reflow(this._element)
+    }
+
+    this._element.classList.add(CLASS_NAME_SHOW)
+
+    const transitionComplete = () => {
+      this._isTransitioning = false
+    }
+
+    this._queueCallback(transitionComplete, this._element, isAnimated)
+  }
+
+  _hideElement() {
+    this._element.setAttribute('aria-hidden', true)
+    this._isTransitioning = false
+  }
+}
+
+/**
+ * ------------------------------------------------------------------------
+ * Data Api implementation
+ * ------------------------------------------------------------------------
+ */
+
+const acceptOverlays = SelectorEngine.find(SELECTOR_DATA_TOGGLE)
+if (acceptOverlays.length > 0) {
+  acceptOverlays.forEach((element) => {
+    AcceptOverlay.getOrCreateInstance(element, { service: element.dataset.bsAcceptFrom })
+  })
+}
+
+export default AcceptOverlay

package/src/js/plugins/carousel-bi.js

@@ -39,7 +39,7 @@ const CONFIGS = {
       768: {
         perPage: 1,
         gap: 24,
-        padding: { left: 40, right: 40 },
+        padding: { left: 0, right: 0 },
         arrows: false,
       },
       992: {

package/src/js/plugins/dimmer.js

@@ -2,7 +2,6 @@ import BaseComponent from 'bootstrap/js/src/base-component.js'
 
 import { reflow, getElementFromSelector } from 'bootstrap/js/src/util'
 import EventHandler from 'bootstrap/js/src/dom/event-handler'
-//import SelectorEngine from 'bootstrap/js/src/dom/selector-engine'
 
 const NAME = 'dimmer'
 const DATA_KEY = 'bs.dimmer'
@@ -10,7 +9,6 @@ const EVENT_KEY = `.${DATA_KEY}`
 const DATA_API_KEY = '.data-api'
 
 const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
-//const EVENT_CLICK = `click${EVENT_KEY}`
 
 const CLASS_NAME_FADE = 'fade'
 const CLASS_NAME_SHOW = 'show'
@@ -107,19 +105,6 @@ class Dimmer extends BaseComponent {
  * ------------------------------------------------------------------------
  */
 
-/*SelectorEngine.find(SELECTOR_DATA_TOGGLE).forEach((toggle) => {
-  const dimmerElement = getElementFromSelector(toggle)
-  const dimmer = Dimmer.getOrCreateInstance(dimmerElement)
-
-  EventHandler.on(toggle, EVENT_CLICK, () => {
-    toggle.checked ? dimmer.show() : dimmer.hide()
-  })
-
-  if (toggle.checked) {
-    dimmer.show()
-  }
-})*/
-
 EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function () {
   const dimmerElement = getElementFromSelector(this)
   const dimmer = Dimmer.getOrCreateInstance(dimmerElement)

package/src/js/plugins/util/cookies.js

@@ -0,0 +1,28 @@
+const preferencesMap = { ck3: {} }
+
+/*
+  Possible choices:
+  false => Accept once
+  true => Accept always
+*/
+const rememberChoice = (service, remember) => {
+  preferencesMap.ck3[service] = remember
+  localStorage.setItem('bs-ck3', JSON.stringify(preferencesMap.ck3))
+}
+
+const isChoiceRemembered = (service) => {
+  preferencesMap.ck3 = JSON.parse(localStorage.getItem('bs-ck3') || '{}')
+  return preferencesMap.ck3[service] || false
+}
+
+const clearAllRememberedChoices = () => {
+  localStorage.removeItem('bs-ck3')
+}
+
+const cookies = {
+  rememberChoice,
+  isChoiceRemembered,
+  clearAllRememberedChoices,
+}
+
+export { cookies }

package/src/js/plugins/videoplayer.js

@@ -0,0 +1,151 @@
+import BaseComponent from 'bootstrap/js/src/base-component.js'
+
+import SelectorEngine from 'bootstrap/js/src/dom/selector-engine'
+import Manipulator from 'bootstrap/js/src/dom/manipulator'
+import videojs from 'video.js'
+
+const NAME = 'videoplayer'
+
+const SELECTOR_TOGGLE = '[data-bs-video]'
+
+const itLang = {
+  'Audio Player': 'Lettore audio',
+  'Video Player': 'Lettore video',
+  Play: 'Play',
+  Pause: 'Pausa',
+  Replay: 'Replay',
+  'Current Time': 'Orario attuale',
+  Duration: 'Durata',
+  'Remaining Time': 'Tempo rimanente',
+  'Stream Type': 'Tipo del Streaming',
+  LIVE: 'LIVE',
+  Loaded: 'Caricato',
+  Progress: 'Stato',
+  'Progress Bar': 'Barra di avanzamento',
+  'progress bar timing: currentTime={1} duration={2}': '{1} di {2}',
+  Fullscreen: 'Schermo intero',
+  'Exit Fullscreen': 'Chiudi Schermo intero',
+  Mute: 'Muto',
+  Unmute: 'Audio',
+  'Playback Rate': 'Tasso di riproduzione',
+  Subtitles: 'Sottotitoli',
+  'subtitles off': 'Senza sottotitoli',
+  Captions: 'Sottotitoli non udenti',
+  'captions off': 'Senza sottotitoli non udenti',
+  Chapters: 'Capitolo',
+  Descriptions: 'Descrizioni',
+  'descriptions off': 'Descrizioni disattivate',
+  'Audio Track': 'Traccia audio',
+  'Volume Level': 'Livello del volume',
+  'You aborted the media playback': 'La riproduzione del filmato è stata interrotta.',
+  'A network error caused the media download to fail part-way.': 'Il download del filmato è stato interrotto a causa di un problema rete.',
+  'The media could not be loaded, either because the server or network failed or because the format is not supported.':
+    'Il filmato non può essere caricato a causa di un errore nel server o nella rete o perché il formato non viene supportato.',
+  'The media playback was aborted due to a corruption problem or because the media used features your browser did not support.':
+    'La riproduzione del filmato è stata interrotta a causa di un file danneggiato o per l’utilizzo di impostazioni non supportate dal browser.',
+  'No compatible source was found for this media.': 'Non ci sono fonti compatibili per questo filmato.',
+  'The media is encrypted and we do not have the keys to decrypt it.': 'Il contenuto multimediale è criptato e non disponiamo delle chiavi per decifrarlo.',
+  'Play Video': 'Riprduci il video',
+  Close: 'Chiudi',
+  'Close Modal Dialog': 'Chiudi la finestra di dialogo',
+  'Modal Window': 'Finestra di dialogo',
+  'This is a modal window': 'Questa è una finestra di dialogo',
+  'This modal can be closed by pressing the Escape key or activating the close button.':
+    'Questa finestra di dialogo può essere chiusa premendo sul tasto Esc o attivando il pulsante di chiusura.',
+  ', opens captions settings dialog': ', aprire i parametri della trascrizione dei sottotitoli',
+  ', opens subtitles settings dialog': ', aprire i parametri dei sottotitoli',
+  ', opens descriptions settings dialog': ', aprire i parametri delle descrizioni',
+  ', selected': ', selezionato',
+  'captions settings': 'Parametri della trascrizione dei sottotitoli',
+  'subtitles settings': 'Parametri dei sottotitoli',
+  'descriptions settings': 'Parametri delle descrizioni',
+  Text: 'Testo',
+  White: 'Bianco',
+  Black: 'Nero',
+  Red: 'Rosso',
+  Green: 'Verde',
+  Blue: 'Blu',
+  Yellow: 'Giallo',
+  Magenta: 'Magenta',
+  Cyan: 'Ciano',
+  Background: 'Sfondo',
+  Window: 'Finestra',
+  Transparent: 'Trasparente',
+  'Semi-Transparent': 'Semi-Trasparente',
+  Opaque: 'Opaco',
+  'Font Size': 'Dimensione dei caratteri',
+  'Text Edge Style': 'Stile dei bordi del testo',
+  None: 'Nessuno',
+  Uniform: 'Uniforme',
+  Dropshadow: 'Ombreggiatura',
+  'Font Family': 'Famiglia di caratteri',
+  'Proportional Sans-Serif': 'Carattere a spaziatura variabile senza grazie (Proportional Sans-Serif)',
+  'Monospace Sans-Serif': 'Carattere a spaziatura fissa senza grazie (Monospace Sans-Serif)',
+  'Proportional Serif': 'Carattere a spaziatura variabile con grazie (Proportional Serif)',
+  'Monospace Serif': 'Carattere a spaziatura fissa con grazie (Monospace Serif)',
+  'Small Caps': 'Maiuscoletto',
+  Reset: 'Reinizializza',
+  'restore all settings to the default values': 'Ripristina i valori predefiniti per tutti i parametri',
+  Done: 'Operazione completata',
+  'Caption Settings Dialog': 'Finestra di dialogo dei parametri della trascrizione dei sottotitoli',
+  'Beginning of dialog window. Escape will cancel and close the window.':
+    'Inizio della finestra di dialogo. Il tasto Esc annullerà l’operazione e chiuderà la finestra.',
+  'End of dialog window.': 'Fine della finestra di dialogo.',
+  '{1} is loading.': '{1} in fase di caricamento.',
+  'Exit Picture-in-Picture': 'Esci dalla modalità Picture-in-Picture',
+  'Picture-in-Picture': 'Picture-in-Picture',
+}
+
+const DEFAULT_CONFIG = { languages: { it: itLang }, language: 'it' }
+
+const Default = {}
+
+window.videojs = videojs
+
+class VideoPlayer extends BaseComponent {
+  constructor(element, config) {
+    super(element)
+    element.classList.add('video-js', 'vjs-theme-bootstrap-italia', 'vjs-fluid', 'vjs-big-play-centered')
+    this._config = this._getConfig(config)
+
+    this.player = videojs(element, DEFAULT_CONFIG)
+  }
+
+  // Public
+
+  setYouTubeVideo(url) {
+    this.player.tech('youtube')
+    this.player.src({ type: 'video/youtube', src: url })
+  }
+
+  // Getters
+
+  static get NAME() {
+    return NAME
+  }
+
+  // Private
+  _getConfig(config) {
+    config = {
+      ...Default,
+      ...Manipulator.getDataAttributes(this._element),
+      ...(typeof config === 'object' ? config : {}),
+    }
+    return config
+  }
+}
+
+/**
+ * ------------------------------------------------------------------------
+ * Data Api implementation
+ * ------------------------------------------------------------------------
+ */
+
+const players = SelectorEngine.find(SELECTOR_TOGGLE)
+if (players.length > 0) {
+  players.forEach((player) => {
+    VideoPlayer.getOrCreateInstance(player)
+  })
+}
+
+export default VideoPlayer

package/src/js/version.js

@@ -1,5 +1,5 @@
 // bootstrap italia version variable
 // useful to check for the current version
 // eslint-disable-next-line no-unused-vars
-const BOOTSTRAP_ITALIA_VERSION = '2.3.7'
+const BOOTSTRAP_ITALIA_VERSION = '2.4.0'
 export default BOOTSTRAP_ITALIA_VERSION

package/src/scss/_variables.scss

@@ -38,7 +38,7 @@ $font-family-sans-serif: 'Titillium Web', Geneva, Tahoma, sans-serif !default;
 $font-family-monospace: 'Roboto Mono', monospace !default;
 $font-family-base: $font-family-sans-serif;
 $text-color: $gray-700 !default;
-$text-muted: $gray-tertiary !default;
+$text-muted: $color-text-muted !default;
 $letter-spacing-base: 0;
 $line-height-base: 1.5;
 $font-weight-base: 300;

package/src/scss/bootstrap-italia.scss

@@ -120,10 +120,12 @@
 @import 'custom/gridlist';
 @import 'custom/popover';
 @import 'custom/tooltip';
+@import 'custom/videoplayer';
 @import 'custom/list';
 @import 'custom/chips';
 @import 'custom/rating';
 @import 'custom/dimmer';
+@import 'custom/accept-overlay';
 @import 'custom/timeline';
 @import 'custom/anchor';
 @import 'custom/map';

package/src/scss/custom/_accept-overlay.scss

@@ -0,0 +1,128 @@
+//mobile
+
+.acceptoverlayable {
+  position: relative;
+  min-height: 400px;
+}
+
+.acceptoverlay {
+  display: flex;
+  background-color: $color-background-emphasis;
+  opacity: 0.92;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1;
+  padding: $v-gap * 4;
+  justify-content: center;
+  flex-wrap: wrap;
+  align-items: flex-start;
+
+  label {
+    color: $white;
+    &::after {
+      border-color: $white !important;
+    }
+  }
+
+  &[aria-hidden='true'] {
+    display: none;
+  }
+
+  &.acceptoverlay-primary {
+    background-color: $primary;
+    &.show {
+      opacity: 0.9;
+    }
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p {
+    color: $white;
+    margin-bottom: 0;
+  }
+
+  h4 {
+    text-align: center;
+    font-size: 2.222rem;
+  }
+
+  p {
+    text-align: justify;
+    font-family: $font-family-serif;
+    font-size: 1rem;
+  }
+
+  .acceptoverlay-inner {
+    width: 100%;
+    max-width: 480px;
+  }
+
+  .acceptoverlay-icon {
+    text-align: center;
+    margin-bottom: $v-gap * 3;
+    .icon {
+      fill: $white;
+    }
+  }
+
+  .acceptoverlay-buttons {
+    background-color: transparent !important;
+    margin-top: $v-gap * 4;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    button {
+      width: 100%;
+      &:last-child {
+        margin-top: $v-gap * 2;
+      }
+    }
+    &.single-button {
+      button {
+        margin-top: 0;
+      }
+    }
+  }
+}
+//Tablet vertical
+@include media-breakpoint-up(md) {
+  .acceptoverlay {
+    padding: $v-gap * 3;
+    .acceptoverlay-icon {
+      margin-bottom: $v-gap * 6;
+    }
+    .acceptoverlay-buttons {
+      flex-wrap: nowrap;
+      button {
+        width: 50%;
+        margin-top: 0 !important;
+        &:last-child {
+          margin-left: $v-gap * 3;
+        }
+      }
+      &.single-button {
+        //text-align: center;
+        button {
+          width: auto;
+          min-width: 50%;
+          margin: 0 auto;
+        }
+      }
+    }
+  }
+}
+
+//Tablet horizontal / small desktop
+@include media-breakpoint-up(lg) {
+  .acceptoverlay {
+    align-items: center;
+  }
+}

package/src/scss/custom/_alert.scss

@@ -5,7 +5,7 @@
   margin-bottom: $alert-margin-bottom;
   border: 1px solid $color-border-secondary;
   padding-left: 4em;
-  background-color: transparent;
+  background-color: $white;
   border-radius: 0;
   color: $color-text-base; // UI kit
   .alert-link {

package/src/scss/custom/_buttons.scss

@@ -3,6 +3,9 @@
   font-size: $btn-font-size;
   white-space: initial;
   text-decoration: none;
+  &:not(.btn-outline-primary, .btn-outline-secondary) {
+    box-shadow: none;
+  }
 }
 
 .btn-me {
@@ -169,12 +172,19 @@
 
 .btn-outline-secondary {
   box-shadow: inset 0 0 0 2px $secondary;
+  &.disabled,
   &:hover,
   &:active {
     box-shadow: inset 0 0 0 2px color-hover($secondary);
   }
 }
 
+.btn-outline-primary {
+  &.disabled {
+    box-shadow: inset 0 0 0 2px color-hover($primary);
+  }
+}
+
 .bg-dark {
   .btn-link {
     color: $white;
@@ -209,9 +219,6 @@
   }
   .btn-outline-secondary {
     @include button-outline-variant($white, color-hover($white), transparent, color-hover($white));
-    &:hover {
-      box-shadow: none;
-    }
     &:focus,
     &.focus {
       box-shadow: 0 0 0 $btn-focus-width rgba($white, 0.5);

package/src/scss/custom/_callout.scss

@@ -1,10 +1,15 @@
 .callout {
-  padding: 2.5rem 2.222rem;
-  border: 2px solid $color-border-secondary;
   position: relative;
   max-width: 60ch;
-  margin: 1.75rem 0 1rem;
-  border-radius: 8px;
+  overflow: hidden;
+
+  .callout-inner {
+    padding: 1.1rem 2.222rem;
+    border: 2px solid;
+    border-top: 0;
+    border-color: $color-border-secondary;
+    margin: 1.75rem 0 1rem;
+  }
 
   // Highlights version
   &.callout-highlight {
@@ -12,6 +17,11 @@
     border-left: 2px solid $color-border-secondary;
     border-radius: 0;
     padding: 0 2.222rem;
+    p {
+      &:last-child {
+        margin: 0;
+      }
+    }
     .callout-title {
       margin-bottom: 1.556rem;
     }
@@ -89,6 +99,9 @@
   // color versions
   &.success {
     border-color: $success;
+    .callout-inner {
+      border-color: rgba($success, 1);
+    }
     .callout-title {
       color: $success;
       .icon {
@@ -97,10 +110,19 @@
       span {
         border-color: $success;
       }
+      .text:after {
+        border-color: $success;
+      }
+      &:before {
+        border-color: $success;
+      }
     }
   }
   &.warning {
     border-color: $warning;
+    .callout-inner {
+      border-color: $color-border-warning;
+    }
     .callout-title {
       color: $color-text-warning;
       .icon {
@@ -113,6 +135,9 @@
   }
   &.danger {
     border-color: $danger;
+    .callout-inner {
+      border-color: rgba($danger, 1);
+    }
     .callout-title {
       color: $danger;
       .icon {
@@ -125,6 +150,9 @@
   }
   &.important {
     border-color: $success;
+    .callout-inner {
+      border-color: $success;
+    }
     .callout-title {
       color: $success;
       .icon {
@@ -137,6 +165,9 @@
   }
   &.note {
     border-color: $primary;
+    .callout-inner {
+      border-color: $primary;
+    }
     .callout-title {
       color: $primary;
       .icon {
@@ -185,11 +216,26 @@
   // standard title
   &:not(.callout-highlight):not(.callout-more) {
     .callout-title {
-      position: absolute;
+      position: relative;
       font-size: 1rem;
       padding: 0 1.389rem;
-      background: $white;
-      top: -0.78em;
+      top: -2em;
+      .text:after {
+        content: '';
+        top: 0.78em;
+        border-top: 2px solid;
+        position: absolute;
+        width: 200%;
+        margin-left: calc(10px + 0.7rem);
+      }
+      &:before {
+        content: '';
+        top: 0.78em;
+        border-top: 2px solid;
+        position: absolute;
+        width: 3.222rem;
+        left: calc(-40px - 0.7rem);
+      }
     }
   }
 
@@ -198,9 +244,6 @@
     font-family: $font-family-serif;
     font-size: 0.889rem;
     color: $color-text-secondary; // UI kit
-    &:last-child {
-      margin: 0;
-    }
     &.callout-big-text {
       font-weight: bold;
       font-size: 1.111rem;

package/src/scss/custom/_carousel.scss

@@ -50,6 +50,7 @@
   // Landscape abstract
   &.it-carousel-landscape-abstract {
     .it-single-slide-wrapper {
+      background-color: $white;
       > a {
         position: relative;
         display: block;
@@ -250,7 +251,6 @@
     // Landscape abstract
     &.it-carousel-landscape-abstract {
       max-width: #{map-get($container-max-widths, xl)};
-      background-color: $white;
     }
     // 3 col card
     &.it-carousel-landscape-abstract-3 {