bootstrap-italia 2.3.8 → 2.4.1

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.8'
+const BOOTSTRAP_ITALIA_VERSION = '2.4.1'
 export default BOOTSTRAP_ITALIA_VERSION

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/_accordion.scss

@@ -38,6 +38,9 @@ $arrow-size: $font-size-base * 0.5;
         &:before {
           color: $white;
         }
+        &:after {
+          content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 24 24' %3E%3Cg%3E%3Cpath fill='#{url-friendly-color($white)}' d='M12,10.3l4.8,4.8c0.3,0.3,0.8,0.3,1.1,0c0.3-0.3,0.3-0.8,0-1c0,0,0,0,0,0l-4.8-4.8c-0.6-0.6-1.5-0.6-2.1,0L6.2,14c-0.3,0.3-0.3,0.8,0,1c0,0,0,0,0,0c0.3,0.3,0.8,0.3,1.1,0L12,10.3z'/%3E%3C/g%3E%3C/svg%3E");
+        }
       }
     }
   }
@@ -52,6 +55,9 @@ $arrow-size: $font-size-base * 0.5;
         &:before {
           color: $white;
         }
+        &:after {
+          content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 24 24' %3E%3Cg%3E%3Cpath fill='#{url-friendly-color($white)}' d='M12,10.3l4.8,4.8c0.3,0.3,0.8,0.3,1.1,0c0.3-0.3,0.3-0.8,0-1c0,0,0,0,0,0l-4.8-4.8c-0.6-0.6-1.5-0.6-2.1,0L6.2,14c-0.3,0.3-0.3,0.8,0,1c0,0,0,0,0,0c0.3,0.3,0.8,0.3,1.1,0L12,10.3z'/%3E%3C/g%3E%3C/svg%3E");
+        }
       }
     }
   }

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/_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/_version.scss

@@ -1,3 +1,3 @@
 :root {
-  --bootstrap-italia-version: '2.3.8';
+  --bootstrap-italia-version: '2.4.1';
 }

package/src/scss/custom/_videoplayer.scss

@@ -0,0 +1,40 @@
+/* stylelint-disable */
+@import 'video.js/src/css/video-js';
+/* stylelint-enable */
+
+.vjs-theme-bootstrap-italia {
+  .vjs-big-play-button {
+    background-color: $primary;
+  }
+  &:hover .vjs-big-play-button,
+  &.vjs-big-play-button:focus {
+    background-color: $primary;
+  }
+  .vjs-control-bar {
+    background-color: $primary;
+    font-size: 1.1em;
+    @include media-breakpoint-up(lg) {
+      min-height: 48px;
+      font-size: 1rem;
+    }
+  }
+}
+
+.acceptoverlay + .vjs-fluid {
+  min-height: 400px;
+}
+
+.vjs-transcription {
+  display: flex;
+  justify-content: center;
+  border: none;
+  .accordion-button {
+    border: none;
+  }
+  .accordion-item {
+    width: 100%;
+    @include media-breakpoint-up(lg) {
+      width: 75ch;
+    }
+  }
+}

package/types/index.d.ts

@@ -36,6 +36,7 @@ import { Tooltip } from './plugins/tooltip'
 import { TrackFocus } from './plugins/track-focus'
 import { Transfer } from './plugins/transfer'
 import { UploadDragDrop } from './plugins/upload-dragdrop'
+import { loadFonts } from './plugins/fonts-loader'
 
 export {
   Alert,
@@ -77,4 +78,5 @@ export {
   TrackFocus,
   Transfer,
   UploadDragDrop,
+  loadFonts
 }

package/types/plugins/fonts-loader.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Load Bootstrap Italia fonts
+ * @param {string} path - the path where fonts live
+ */
+export function loadFonts(path: string)