GDL - Global Design Language

Reading bar 

<div class="c-readingbar u-z-cover u-size-full u-left o-bg-base u-flex u-gap-small u-items-center u-py-small u-mt-medium">

    <small class="u-label-08">
        <svg class="o-icon o-icon--sm u-mr-xsmall" aria-hidden="true">
            <use xlink:href="#icon-clock"></use>
        </svg>
        <strong>4</strong> minuti di lettura
    </small>
</div>
 
<div class="c-readingbar u-z-cover u-size-full u-left o-bg-base u-flex u-gap-small u-items-center u-py-small u-mt-medium">         
  
  <small class="u-label-08">
    <svg class="o-icon o-icon--sm u-mr-xsmall" aria-hidden="true">
      <use xlink:href="#icon-clock"></use>
    </svg>
    <strong>{{time}}</strong> minuti di lettura
  </small> 
</div>
 
{
  "time": 4
}
  • Content: 
    ~ function () {
  if (!document.querySelector || !window.addEventListener || !document.createElement("div").classList) return; {
    var oArticle = document.querySelector("[data-entry]");
    var oProgress = document.querySelector("[data-progress]");
    var oReading = document.querySelector("[data-reading]");
    var oHighlighted = document.querySelector("section.native-section-article")
    if (!oArticle || !oProgress || !oReading) return
  } {
    var fScroll = function (oEvent) {
      var fPositionY = oArticle.offsetHeight ? (window.pageYOffset - oArticle.offsetTop) / oArticle.offsetHeight : 0;
      if (fPositionY >= 0 && fPositionY <= 1) {
        oProgress.style.width = fPositionY * 100 + "%";
        oReading.classList.add("is-sticky")
      } 
      else {
        oReading.classList.remove("is-sticky") 
      }
      // if (fPositionY >= .10 && fPositionY <= .85) {
      //   oHighlighted.classList.add("is-highlighted")
      // }
      // else {
      //   oHighlighted.classList.remove("is-highlighted")
      // }
          
    }; {
      var bPassiveEvents = false;
      try {
        var oOptions = Object.defineProperty({}, "passive", {
          get: function () {
            bPassiveEvents = true
          }
        });
        window.addEventListener("test", null, oOptions);
        window.removeEventListener("test", null, oOptions)
      } catch (_) {}
      window.addEventListener("scroll", fScroll, bPassiveEvents ? {
        passive: true
      } : false);
      window.addEventListener("resize", fScroll, bPassiveEvents ? {
        passive: true
      } : false)
    }
    fScroll()
  }
}();
  • URL: /components/raw/readingbar/readingbar.js
  • Filesystem Path: src/lib/components/readingbar/readingbar.js
  • Size: 1.6 KB
  • Content: 
    // Name:            Readingbar
// Description:     Progress bar showing how much content user read
//
// Component:       `c-readingbar`
//
// Dependencies:    `settings/v7/colors.theme`
//                  `settings/v7/global`
@use '../../../assets/sass/settings/v7/colors.tokens' as *;
@use '../../../assets/sass/settings/v7/layout-standard' as *;
@use '../../../assets/sass/settings/v7/global' as *;
@use '../../../assets/sass/settings/v7/spacing.tokens' as *;
@use '../../../assets/sass/tools/v7/mq' as *;
@use '../../../assets/sass/tools/v7/zindex' as *;
@use '../../../assets/sass/tools/v7/typography' as *;
// ========================================================================

// Variables
// ========================================================================

$readingbar-height: 48px;

// ========================================================================

@keyframes progress-driven {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
section:has(>.c-readingbar),
div:has(>.c-readingbar) {
  position: relative;
  @supports not (animation-timeline: scroll()) {
    margin-top: calc(#{$readingbar-height} + $margin-xxxsmall);
  }
}

.locked ~ .c-readingbar {
  display: none;
}

.c-entry:has(>.c-readingbar):has(div>.c-readingbar)  {
  >.c-readingbar {
    display: none;
  }
}


.c-readingbar {
  --_readingbar-position: absolute;
  --_readingbar-top: -70px;
  position: var(--_readingbar-position);
  top: var(--_readingbar-top);
  @supports (animation-timeline: scroll()) {
    --_readingbar-position: sticky;
    border-top: 4px solid var(--background-color-gray-dark);
    bottom: 0;
    top: auto;
  }
  [data-model*="approfondimento"] & {
    padding-left: $padding-small;
    padding-right: $padding-small;
    --_readingbar-top: -56px  ;
  }
  &::before {
    content: "";
    position: absolute;
    top: -4px;
    left: 0;
    height: 4px;
    background-color: var(--theme-color);
    z-index: -1;
    @media (prefers-color-scheme: dark) {  
      body[data-theme="today"]:not([data-color-scheme*="light"]):not([data-channel*="dossier"]) & {    
        background-color: var(--theme-color-lighter);
      }
    }
  
    [data-color-scheme*="dark"][data-theme="today"]:not([data-channel*="dossier"]) & {
      background-color: var(--theme-color-lighter);
    }
    @supports (animation-timeline: scroll()) {
      animation: progress-driven auto linear;
      animation-timeline: view();
    }
  }
  

  body[data-model*="sponsor"] & {
    display: none;
  }
}
  • URL: /components/raw/readingbar/readingbar.scss
  • Filesystem Path: src/lib/components/readingbar/readingbar.scss
  • Size: 2.5 KB

No notes defined.