<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
}
~ 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()
}
}();
// 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;
}
}
No notes defined.