<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.