GDL - Global Design Language

Reading bar 

<div class="c-readingbar u-z-higher u-fixed u-size-full u-left u-z-cover o-bg-base u-flex u-row-reverse u-justify-between u-items-center u-p-small is-sticky" data-reading>

    <div>
        <div class="c-share u-flex">

            <a href="#" class="u-mr-xsmall">
                <div class="c-share__item c-share__item--facebook u-flex u-items-center u-justify-center">
                    <svg class="o-icon--md  o-icon--fill-inverse ">
                        <use xlink:href="#icon-facebook" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
                    </svg>
                </div>
            </a>

            <a href="#" class="u-mr-xsmall">
                <div class="c-share__item c-share__item--twitter u-flex u-items-center u-justify-center">
                    <svg class="o-icon--md  o-icon--fill-inverse ">
                        <use xlink:href="#icon-twitter" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
                    </svg>
                </div>
            </a>

            <a href="#" class="u-mr-xsmall">
                <div class="c-share__item c-share__item--whatsapp u-flex u-items-center u-justify-center">
                    <svg class="o-icon--md  o-icon--fill-inverse ">
                        <use xlink:href="#icon-whatsapp" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
                    </svg>
                </div>
            </a>

            <a href="#" class="u-mr-xsmall">
                <div class="c-share__item c-share__item--email u-flex u-items-center u-justify-center">
                    <svg class="o-icon--md  o-icon o-icon--inverse ">
                        <use xlink:href="#icon-email" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
                    </svg>
                </div>
            </a>

        </div>
    </div>

    <div class="u-flex@md u-column u-row@md u-items-center">
        <h5 class="u-none@sm u-heading-07 u-color-base u-mb-xxsmall">Invia l’articolo</h5>
        <h5 class="u-none u-block@sm u-heading-07 u-color-base u-mb-xxsmall">Reading bar title</h5>
    </div>

    <div class="c-readingbar__progress u-absolute u-bottom u-left" data-progress></div>

</div>
 
<div class="c-readingbar u-z-higher u-fixed u-size-full u-left u-z-cover o-bg-base u-flex u-row-reverse u-justify-between u-items-center u-p-small {% if sticky %}is-sticky{% endif %}" data-reading >
  
  <div >{% render "@share" %}</div>

  <div class="u-flex@md u-column u-row@md u-items-center">
    <h5 class="u-none@sm u-heading-07 u-color-base u-mb-xxsmall">Invia l’articolo</h5>
    <h5 class="u-none u-block@sm u-heading-07 u-color-base u-mb-xxsmall">{{ title }}</h5>
  </div>

  <div class="c-readingbar__progress u-absolute u-bottom u-left" data-progress></div>

</div>
 
{
  "title": "Reading bar title",
  "sticky": true
}
  • 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`
//
// ========================================================================

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

$readingbar-color: var(--theme-color);
$readingbar-progress-height: 6px;
$readingbar-transition-duration: .35s;

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

.c-readingbar {
  top: -100%;
  
  &.is-sticky {
    top: 0; 
    box-shadow: var(--global-shadow);
  }
  
  &__progress {
    height: $readingbar-progress-height;
    background-color: $readingbar-color;
    transition: width $readingbar-transition-duration ease-out 0s;
  }

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

No notes defined.