Reduce js payload (#214)

This commit is contained in:
Eduardo Gómez 2020-06-29 15:54:07 +02:00 committed by GitHub
parent 116d799497
commit 58eeb4f514
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
31 changed files with 401 additions and 371 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -1 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{1:function(e,t,n){"use strict";n.r(t),n.d(t,"isRTL",(function(){return a})),n.d(t,"isMobile",(function(){return o})),n.d(t,"isDarkMode",(function(){return r})),n.d(t,"formatDate",(function(){return i})),n.d(t,"getParameterByName",(function(){return s})),n.d(t,"adjustImageGallery",(function(){return c})),n.d(t,"managePostImages",(function(){return u})),n.d(t,"makeImagesZoomable",(function(){return l}));var a=function(){var e=document.querySelector("html");return["ar","he","fa"].includes(e.getAttribute("lang"))},o=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"768px";return window.matchMedia("(max-width: ".concat(e,")")).matches},r=function(){var e=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)");return e&&e.matches},i=function(e){return e?new Date(e).toLocaleDateString(document.documentElement.lang,{year:"numeric",month:"long",day:"numeric"}):""},s=function(e,t){t||(t=window.location.href),e=e.replace(/[\[\]]/g,"\\$&");var n=new RegExp("[?&]".concat(e,"(=([^&#]*)|&|#|$)")).exec(t);return n?n[2]?decodeURIComponent(n[2].replace(/\+/g," ")):"":null},c=function(){for(var e=document.querySelectorAll(".kg-gallery-image img"),t=0,n=e.length;t<n;t++){var a=e[t].closest(".kg-gallery-image"),o=e[t].attributes.width.value/e[t].attributes.height.value;a.style.flex="".concat(o," 1 0%")}},u=function(e){e(".js-post-content").find("img").each((function(){e(this).closest("figure").hasClass("kg-bookmark-card")||e(this).parent().is("a")||e(this).addClass("js-zoomable");var t=e(this).parent().find("figcaption");t?e(this).attr("alt",t.text()):e(this).attr("alt","")}))},l=function(e,t){var n=t(".js-zoomable");n.on("open",(function(t){o()&&e(t.target).parent().hasClass("kg-gallery-image")&&setTimeout((function(){var t=e(".medium-zoom-image--opened"),n=t[0].style.transform,a=n.substr(0,n.indexOf(" ")),o=parseFloat(a.substr(a.indexOf("(")+1).split(")")[0]),r=n.substr(n.indexOf(" ")+1),i=parseFloat(r.split(",")[1]),s="scale(1) translate3d(0, ".concat(i<0?o*i+i:o*i-i,"px, 0)");t.addClass("medium-zoom-image-mobile"),t[0].style.transform=s}),10)})),n.on("close",(function(){o()&&e(event.target).parent().hasClass("kg-gallery-image")&&e(".medium-zoom-image").removeClass("medium-zoom-image-mobile")}))}},15:function(e,t,n){n(1),e.exports=n(25)},25:function(e,t){}},[[15,0,1]]]); (window.webpackJsonp=window.webpackJsonp||[]).push([[3],{1:function(e,t,n){"use strict";n.r(t),n.d(t,"isRTL",(function(){return a})),n.d(t,"isMobile",(function(){return o})),n.d(t,"isDarkMode",(function(){return r})),n.d(t,"formatDate",(function(){return i})),n.d(t,"getParameterByName",(function(){return s})),n.d(t,"adjustImageGallery",(function(){return c})),n.d(t,"managePostImages",(function(){return u})),n.d(t,"makeImagesZoomable",(function(){return l}));var a=function(){var e=document.querySelector("html");return["ar","he","fa"].includes(e.getAttribute("lang"))},o=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"768px";return window.matchMedia("(max-width: ".concat(e,")")).matches},r=function(){var e=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)");return e&&e.matches},i=function(e){return e?new Date(e).toLocaleDateString(document.documentElement.lang,{year:"numeric",month:"long",day:"numeric"}):""},s=function(e,t){t||(t=window.location.href),e=e.replace(/[\[\]]/g,"\\$&");var n=new RegExp("[?&]".concat(e,"(=([^&#]*)|&|#|$)")).exec(t);return n?n[2]?decodeURIComponent(n[2].replace(/\+/g," ")):"":null},c=function(){for(var e=document.querySelectorAll(".kg-gallery-image img"),t=0,n=e.length;t<n;t++){var a=e[t].closest(".kg-gallery-image"),o=e[t].attributes.width.value/e[t].attributes.height.value;a.style.flex="".concat(o," 1 0%")}},u=function(e){e(".js-post-content").find("img").each((function(){e(this).closest("figure").hasClass("kg-bookmark-card")||e(this).parent().is("a")||e(this).addClass("js-zoomable");var t=e(this).parent().find("figcaption");t?e(this).attr("alt",t.text()):e(this).attr("alt","")}))},l=function(e,t){var n=t(".js-zoomable");n.on("open",(function(t){o()&&e(t.target).parent().hasClass("kg-gallery-image")&&setTimeout((function(){var t=e(".medium-zoom-image--opened"),n=t[0].style.transform,a=n.substr(0,n.indexOf(" ")),o=parseFloat(a.substr(a.indexOf("(")+1).split(")")[0]),r=n.substr(n.indexOf(" ")+1),i=parseFloat(r.split(",")[1]),s="scale(1) translate3d(0, ".concat(i<0?o*i+i:o*i-i,"px, 0)");t.addClass("medium-zoom-image-mobile"),t[0].style.transform=s}),10)})),n.on("close",(function(){o()&&e(event.target).parent().hasClass("kg-gallery-image")&&e(".medium-zoom-image").removeClass("medium-zoom-image-mobile")}))}},12:function(e,t,n){n(1),e.exports=n(22)},22:function(e,t){}},[[12,0,1]]]);

View file

@ -1 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{1:function(t,e,n){"use strict";n.r(e),n.d(e,"isRTL",(function(){return a})),n.d(e,"isMobile",(function(){return r})),n.d(e,"isDarkMode",(function(){return o})),n.d(e,"formatDate",(function(){return i})),n.d(e,"getParameterByName",(function(){return s})),n.d(e,"adjustImageGallery",(function(){return c})),n.d(e,"managePostImages",(function(){return u})),n.d(e,"makeImagesZoomable",(function(){return l}));var a=function(){var t=document.querySelector("html");return["ar","he","fa"].includes(t.getAttribute("lang"))},r=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"768px";return window.matchMedia("(max-width: ".concat(t,")")).matches},o=function(){var t=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)");return t&&t.matches},i=function(t){return t?new Date(t).toLocaleDateString(document.documentElement.lang,{year:"numeric",month:"long",day:"numeric"}):""},s=function(t,e){e||(e=window.location.href),t=t.replace(/[\[\]]/g,"\\$&");var n=new RegExp("[?&]".concat(t,"(=([^&#]*)|&|#|$)")).exec(e);return n?n[2]?decodeURIComponent(n[2].replace(/\+/g," ")):"":null},c=function(){for(var t=document.querySelectorAll(".kg-gallery-image img"),e=0,n=t.length;e<n;e++){var a=t[e].closest(".kg-gallery-image"),r=t[e].attributes.width.value/t[e].attributes.height.value;a.style.flex="".concat(r," 1 0%")}},u=function(t){t(".js-post-content").find("img").each((function(){t(this).closest("figure").hasClass("kg-bookmark-card")||t(this).parent().is("a")||t(this).addClass("js-zoomable");var e=t(this).parent().find("figcaption");e?t(this).attr("alt",e.text()):t(this).attr("alt","")}))},l=function(t,e){var n=e(".js-zoomable");n.on("open",(function(e){r()&&t(e.target).parent().hasClass("kg-gallery-image")&&setTimeout((function(){var e=t(".medium-zoom-image--opened"),n=e[0].style.transform,a=n.substr(0,n.indexOf(" ")),r=parseFloat(a.substr(a.indexOf("(")+1).split(")")[0]),o=n.substr(n.indexOf(" ")+1),i=parseFloat(o.split(",")[1]),s="scale(1) translate3d(0, ".concat(i<0?r*i+i:r*i-i,"px, 0)");e.addClass("medium-zoom-image-mobile"),e[0].style.transform=s}),10)})),n.on("close",(function(){r()&&t(event.target).parent().hasClass("kg-gallery-image")&&t(".medium-zoom-image").removeClass("medium-zoom-image-mobile")}))}},19:function(t,e,n){t.exports=n(20)},20:function(t,e,n){"use strict";n.r(e);var a=n(0),r=n.n(a),o=(n(6),n(2)),i=n(1);r()(document).ready((function(){var t=r()(".js-featured-articles");t.length>0&&(t.on("init",(function(){Object(o.a)(".js-featured-article-title",200)})),t.slick({arrows:!0,infinite:!0,prevArrow:'<button class="m-icon-button in-featured-articles slick-prev" aria-label="Previous"><span class="icon-arrow-left"></span></button>',nextArrow:'<button class="m-icon-button in-featured-articles slick-next" aria-label="Next"><span class="icon-arrow-right"></span></button>',mobileFirst:!0,rtl:Object(i.isRTL)()}),setTimeout((function(){t.slick("setPosition")}),350))}))}},[[19,0,1]]]); (window.webpackJsonp=window.webpackJsonp||[]).push([[4],{1:function(e,t,n){"use strict";n.r(t),n.d(t,"isRTL",(function(){return a})),n.d(t,"isMobile",(function(){return r})),n.d(t,"isDarkMode",(function(){return o})),n.d(t,"formatDate",(function(){return i})),n.d(t,"getParameterByName",(function(){return s})),n.d(t,"adjustImageGallery",(function(){return c})),n.d(t,"managePostImages",(function(){return l})),n.d(t,"makeImagesZoomable",(function(){return u}));var a=function(){var e=document.querySelector("html");return["ar","he","fa"].includes(e.getAttribute("lang"))},r=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"768px";return window.matchMedia("(max-width: ".concat(e,")")).matches},o=function(){var e=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)");return e&&e.matches},i=function(e){return e?new Date(e).toLocaleDateString(document.documentElement.lang,{year:"numeric",month:"long",day:"numeric"}):""},s=function(e,t){t||(t=window.location.href),e=e.replace(/[\[\]]/g,"\\$&");var n=new RegExp("[?&]".concat(e,"(=([^&#]*)|&|#|$)")).exec(t);return n?n[2]?decodeURIComponent(n[2].replace(/\+/g," ")):"":null},c=function(){for(var e=document.querySelectorAll(".kg-gallery-image img"),t=0,n=e.length;t<n;t++){var a=e[t].closest(".kg-gallery-image"),r=e[t].attributes.width.value/e[t].attributes.height.value;a.style.flex="".concat(r," 1 0%")}},l=function(e){e(".js-post-content").find("img").each((function(){e(this).closest("figure").hasClass("kg-bookmark-card")||e(this).parent().is("a")||e(this).addClass("js-zoomable");var t=e(this).parent().find("figcaption");t?e(this).attr("alt",t.text()):e(this).attr("alt","")}))},u=function(e,t){var n=t(".js-zoomable");n.on("open",(function(t){r()&&e(t.target).parent().hasClass("kg-gallery-image")&&setTimeout((function(){var t=e(".medium-zoom-image--opened"),n=t[0].style.transform,a=n.substr(0,n.indexOf(" ")),r=parseFloat(a.substr(a.indexOf("(")+1).split(")")[0]),o=n.substr(n.indexOf(" ")+1),i=parseFloat(o.split(",")[1]),s="scale(1) translate3d(0, ".concat(i<0?r*i+i:r*i-i,"px, 0)");t.addClass("medium-zoom-image-mobile"),t[0].style.transform=s}),10)})),n.on("close",(function(){r()&&e(event.target).parent().hasClass("kg-gallery-image")&&e(".medium-zoom-image").removeClass("medium-zoom-image-mobile")}))}},16:function(e,t,n){e.exports=n(17)},17:function(e,t,n){"use strict";n.r(t);var a=n(0),r=n.n(a),o=n(3),i=n(2),s=n(1);r()(document).ready((function(){var e=r()(".js-featured-slider");if(e.length>0){var t=e.find(".js-featured-slide").length,n=new i.d(".js-featured-slider",{type:1===t?"slider":"carousel",rewind:!1,gap:0,swipeThreshold:!1,dragThreshold:!1,direction:Object(s.isRTL)()?"rtl":"ltr",breakpoints:{768:{swipeThreshold:1!==t&&80,dragThreshold:1!==t&&120}}});1===t&&e.find(".js-controls").remove(),n.on("mount.after",(function(){Object(o.a)(".js-featured-article-title",200)})),n.mount({Controls:i.b,Swipe:i.c,Breakpoints:i.a}),setTimeout((function(){window.dispatchEvent(new Event("resize"))}),350)}Object(o.a)(".js-featured-article-title",200)}))}},[[16,0,1]]]);

View file

@ -1 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{1:function(e,t,n){"use strict";n.r(t),n.d(t,"isRTL",(function(){return a})),n.d(t,"isMobile",(function(){return o})),n.d(t,"isDarkMode",(function(){return r})),n.d(t,"formatDate",(function(){return i})),n.d(t,"getParameterByName",(function(){return s})),n.d(t,"adjustImageGallery",(function(){return c})),n.d(t,"managePostImages",(function(){return u})),n.d(t,"makeImagesZoomable",(function(){return m}));var a=function(){var e=document.querySelector("html");return["ar","he","fa"].includes(e.getAttribute("lang"))},o=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"768px";return window.matchMedia("(max-width: ".concat(e,")")).matches},r=function(){var e=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)");return e&&e.matches},i=function(e){return e?new Date(e).toLocaleDateString(document.documentElement.lang,{year:"numeric",month:"long",day:"numeric"}):""},s=function(e,t){t||(t=window.location.href),e=e.replace(/[\[\]]/g,"\\$&");var n=new RegExp("[?&]".concat(e,"(=([^&#]*)|&|#|$)")).exec(t);return n?n[2]?decodeURIComponent(n[2].replace(/\+/g," ")):"":null},c=function(){for(var e=document.querySelectorAll(".kg-gallery-image img"),t=0,n=e.length;t<n;t++){var a=e[t].closest(".kg-gallery-image"),o=e[t].attributes.width.value/e[t].attributes.height.value;a.style.flex="".concat(o," 1 0%")}},u=function(e){e(".js-post-content").find("img").each((function(){e(this).closest("figure").hasClass("kg-bookmark-card")||e(this).parent().is("a")||e(this).addClass("js-zoomable");var t=e(this).parent().find("figcaption");t?e(this).attr("alt",t.text()):e(this).attr("alt","")}))},m=function(e,t){var n=t(".js-zoomable");n.on("open",(function(t){o()&&e(t.target).parent().hasClass("kg-gallery-image")&&setTimeout((function(){var t=e(".medium-zoom-image--opened"),n=t[0].style.transform,a=n.substr(0,n.indexOf(" ")),o=parseFloat(a.substr(a.indexOf("(")+1).split(")")[0]),r=n.substr(n.indexOf(" ")+1),i=parseFloat(r.split(",")[1]),s="scale(1) translate3d(0, ".concat(i<0?o*i+i:o*i-i,"px, 0)");t.addClass("medium-zoom-image-mobile"),t[0].style.transform=s}),10)})),n.on("close",(function(){o()&&e(event.target).parent().hasClass("kg-gallery-image")&&e(".medium-zoom-image").removeClass("medium-zoom-image-mobile")}))}},23:function(e,t,n){e.exports=n(24)},24:function(e,t,n){"use strict";n.r(t);var a=n(0),o=n.n(a),r=n(4),i=n.n(r),s=n(3),c=n(1);o()(document).ready((function(){i()(".js-post-content"),Object(c.adjustImageGallery)(),Object(c.managePostImages)(o.a),Object(c.makeImagesZoomable)(o.a,s.a)}))}},[[23,0,1]]]); (window.webpackJsonp=window.webpackJsonp||[]).push([[5],{1:function(e,t,n){"use strict";n.r(t),n.d(t,"isRTL",(function(){return a})),n.d(t,"isMobile",(function(){return o})),n.d(t,"isDarkMode",(function(){return r})),n.d(t,"formatDate",(function(){return i})),n.d(t,"getParameterByName",(function(){return s})),n.d(t,"adjustImageGallery",(function(){return c})),n.d(t,"managePostImages",(function(){return u})),n.d(t,"makeImagesZoomable",(function(){return m}));var a=function(){var e=document.querySelector("html");return["ar","he","fa"].includes(e.getAttribute("lang"))},o=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"768px";return window.matchMedia("(max-width: ".concat(e,")")).matches},r=function(){var e=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)");return e&&e.matches},i=function(e){return e?new Date(e).toLocaleDateString(document.documentElement.lang,{year:"numeric",month:"long",day:"numeric"}):""},s=function(e,t){t||(t=window.location.href),e=e.replace(/[\[\]]/g,"\\$&");var n=new RegExp("[?&]".concat(e,"(=([^&#]*)|&|#|$)")).exec(t);return n?n[2]?decodeURIComponent(n[2].replace(/\+/g," ")):"":null},c=function(){for(var e=document.querySelectorAll(".kg-gallery-image img"),t=0,n=e.length;t<n;t++){var a=e[t].closest(".kg-gallery-image"),o=e[t].attributes.width.value/e[t].attributes.height.value;a.style.flex="".concat(o," 1 0%")}},u=function(e){e(".js-post-content").find("img").each((function(){e(this).closest("figure").hasClass("kg-bookmark-card")||e(this).parent().is("a")||e(this).addClass("js-zoomable");var t=e(this).parent().find("figcaption");t?e(this).attr("alt",t.text()):e(this).attr("alt","")}))},m=function(e,t){var n=t(".js-zoomable");n.on("open",(function(t){o()&&e(t.target).parent().hasClass("kg-gallery-image")&&setTimeout((function(){var t=e(".medium-zoom-image--opened"),n=t[0].style.transform,a=n.substr(0,n.indexOf(" ")),o=parseFloat(a.substr(a.indexOf("(")+1).split(")")[0]),r=n.substr(n.indexOf(" ")+1),i=parseFloat(r.split(",")[1]),s="scale(1) translate3d(0, ".concat(i<0?o*i+i:o*i-i,"px, 0)");t.addClass("medium-zoom-image-mobile"),t[0].style.transform=s}),10)})),n.on("close",(function(){o()&&e(event.target).parent().hasClass("kg-gallery-image")&&e(".medium-zoom-image").removeClass("medium-zoom-image-mobile")}))}},20:function(e,t,n){e.exports=n(21)},21:function(e,t,n){"use strict";n.r(t);var a=n(0),o=n.n(a),r=n(5),i=n.n(r),s=n(4),c=n(1);o()(document).ready((function(){i()(".js-post-content"),Object(c.adjustImageGallery)(),Object(c.managePostImages)(o.a),Object(c.makeImagesZoomable)(o.a,s.a)}))}},[[20,0,1]]]);

View file

@ -1 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{1:function(t,e,n){"use strict";n.r(e),n.d(e,"isRTL",(function(){return a})),n.d(e,"isMobile",(function(){return o})),n.d(e,"isDarkMode",(function(){return i})),n.d(e,"formatDate",(function(){return s})),n.d(e,"getParameterByName",(function(){return r})),n.d(e,"adjustImageGallery",(function(){return c})),n.d(e,"managePostImages",(function(){return l})),n.d(e,"makeImagesZoomable",(function(){return u}));var a=function(){var t=document.querySelector("html");return["ar","he","fa"].includes(t.getAttribute("lang"))},o=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"768px";return window.matchMedia("(max-width: ".concat(t,")")).matches},i=function(){var t=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)");return t&&t.matches},s=function(t){return t?new Date(t).toLocaleDateString(document.documentElement.lang,{year:"numeric",month:"long",day:"numeric"}):""},r=function(t,e){e||(e=window.location.href),t=t.replace(/[\[\]]/g,"\\$&");var n=new RegExp("[?&]".concat(t,"(=([^&#]*)|&|#|$)")).exec(e);return n?n[2]?decodeURIComponent(n[2].replace(/\+/g," ")):"":null},c=function(){for(var t=document.querySelectorAll(".kg-gallery-image img"),e=0,n=t.length;e<n;e++){var a=t[e].closest(".kg-gallery-image"),o=t[e].attributes.width.value/t[e].attributes.height.value;a.style.flex="".concat(o," 1 0%")}},l=function(t){t(".js-post-content").find("img").each((function(){t(this).closest("figure").hasClass("kg-bookmark-card")||t(this).parent().is("a")||t(this).addClass("js-zoomable");var e=t(this).parent().find("figcaption");e?t(this).attr("alt",e.text()):t(this).attr("alt","")}))},u=function(t,e){var n=e(".js-zoomable");n.on("open",(function(e){o()&&t(e.target).parent().hasClass("kg-gallery-image")&&setTimeout((function(){var e=t(".medium-zoom-image--opened"),n=e[0].style.transform,a=n.substr(0,n.indexOf(" ")),o=parseFloat(a.substr(a.indexOf("(")+1).split(")")[0]),i=n.substr(n.indexOf(" ")+1),s=parseFloat(i.split(",")[1]),r="scale(1) translate3d(0, ".concat(s<0?o*s+s:o*s-s,"px, 0)");e.addClass("medium-zoom-image-mobile"),e[0].style.transform=r}),10)})),n.on("close",(function(){o()&&t(event.target).parent().hasClass("kg-gallery-image")&&t(".medium-zoom-image").removeClass("medium-zoom-image-mobile")}))}},21:function(t,e,n){t.exports=n(22)},22:function(t,e,n){"use strict";n.r(e);var a=n(0),o=n.n(a),i=(n(6),n(14)),s=n(3),r=n(4),c=n.n(r),l=n(2),u=n(1),m=null,d=null,f=window.pageYOffset,g=0,p=0,h=0,w=!1;function b(){f=window.pageYOffset,k()}function v(t){Object(u.isMobile)("1023px")?(o()("body").addClass("share-menu-displayed"),setTimeout((function(){m.removeAttr("data-aos")}),t)):(Object(i.a)(".js-sticky",{stickyBitStickyOffset:100}),o()("body").removeClass("share-menu-displayed"))}function y(){x(),v(100),setTimeout((function(){O(),k()}),200)}function k(){w||requestAnimationFrame(j),w=!0}function j(){var t=p-g,e=Math.ceil(f/t*100);e<=100&&function(t){if(t<=100){var e=h-t/100*h;d[0].style.strokeDashoffset=e}}(e),w=!1}function x(){g=window.innerHeight,p=o()(document).height()}function O(){var t=d.parent().width(),e=t/2,n=Object(u.isMobile)()?2:3;d.parent().attr("viewBox","0 0 ".concat(t," ").concat(t)),d.attr("stroke-width",n),d.attr("r",e-(n-1)),d.attr("cx",e),d.attr("cy",e),h=2*e*Math.PI,d[0].style.strokeDasharray="".concat(h," ").concat(h),d[0].style.strokeDashoffset=h}function C(){d=o()(".js-progress"),x(),O(),j(),setTimeout((function(){d.parent().css("opacity",1)}),300)}o()(document).ready((function(){m=o()(".js-aos-wrapper");var t=o()(".js-scrolltop"),e=o()(".js-load-comments"),n=o()(".js-comments-iframe"),a=o()(".js-recommended-articles");c()(".js-post-content"),Object(u.adjustImageGallery)(),v(1e3),a.length>0&&(a.on("init",(function(){C(),Object(l.a)(".js-article-card-title",100),Object(l.a)(".js-article-card-title-no-image",250)})),a.slick({arrows:!0,infinite:!0,prevArrow:'<button class="m-icon-button filled in-recommended-articles slick-prev" aria-label="Previous"><span class="icon-arrow-left"></span></button>',nextArrow:'<button class="m-icon-button filled in-recommended-articles slick-next" aria-label="Next"><span class="icon-arrow-right"></span></button>',mobileFirst:!0,responsive:[{breakpoint:720,settings:{slidesToShow:2}},{breakpoint:1023,settings:{arrows:!1,slidesToShow:3}}],rtl:Object(u.isRTL)()})),t.click((function(){o()("html, body").animate({scrollTop:0},500)})),e.click((function(){e.parent().hide(),n.fadeIn("slow")})),Object(u.managePostImages)(o.a),Object(u.makeImagesZoomable)(o.a,s.a),window.addEventListener("scroll",b,{passive:!0}),window.addEventListener("resize",y,{passive:!0})})),o()(window).on("load",(function(){C()}))}},[[21,0,1]]]); (window.webpackJsonp=window.webpackJsonp||[]).push([[6],{1:function(e,t,n){"use strict";n.r(t),n.d(t,"isRTL",(function(){return a})),n.d(t,"isMobile",(function(){return o})),n.d(t,"isDarkMode",(function(){return r})),n.d(t,"formatDate",(function(){return i})),n.d(t,"getParameterByName",(function(){return s})),n.d(t,"adjustImageGallery",(function(){return c})),n.d(t,"managePostImages",(function(){return l})),n.d(t,"makeImagesZoomable",(function(){return d}));var a=function(){var e=document.querySelector("html");return["ar","he","fa"].includes(e.getAttribute("lang"))},o=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"768px";return window.matchMedia("(max-width: ".concat(e,")")).matches},r=function(){var e=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)");return e&&e.matches},i=function(e){return e?new Date(e).toLocaleDateString(document.documentElement.lang,{year:"numeric",month:"long",day:"numeric"}):""},s=function(e,t){t||(t=window.location.href),e=e.replace(/[\[\]]/g,"\\$&");var n=new RegExp("[?&]".concat(e,"(=([^&#]*)|&|#|$)")).exec(t);return n?n[2]?decodeURIComponent(n[2].replace(/\+/g," ")):"":null},c=function(){for(var e=document.querySelectorAll(".kg-gallery-image img"),t=0,n=e.length;t<n;t++){var a=e[t].closest(".kg-gallery-image"),o=e[t].attributes.width.value/e[t].attributes.height.value;a.style.flex="".concat(o," 1 0%")}},l=function(e){e(".js-post-content").find("img").each((function(){e(this).closest("figure").hasClass("kg-bookmark-card")||e(this).parent().is("a")||e(this).addClass("js-zoomable");var t=e(this).parent().find("figcaption");t?e(this).attr("alt",t.text()):e(this).attr("alt","")}))},d=function(e,t){var n=t(".js-zoomable");n.on("open",(function(t){o()&&e(t.target).parent().hasClass("kg-gallery-image")&&setTimeout((function(){var t=e(".medium-zoom-image--opened"),n=t[0].style.transform,a=n.substr(0,n.indexOf(" ")),o=parseFloat(a.substr(a.indexOf("(")+1).split(")")[0]),r=n.substr(n.indexOf(" ")+1),i=parseFloat(r.split(",")[1]),s="scale(1) translate3d(0, ".concat(i<0?o*i+i:o*i-i,"px, 0)");t.addClass("medium-zoom-image-mobile"),t[0].style.transform=s}),10)})),n.on("close",(function(){o()&&e(event.target).parent().hasClass("kg-gallery-image")&&e(".medium-zoom-image").removeClass("medium-zoom-image-mobile")}))}},18:function(e,t,n){e.exports=n(19)},19:function(e,t,n){"use strict";n.r(t);var a=n(0),o=n.n(a),r=n(4),i=n(5),s=n.n(i),c=n(3),l=n(2),d=n(1),u=null,m=null,f=window.pageYOffset,h=0,g=0,p=0,w=!1;function b(){f=window.pageYOffset,j()}function y(e){Object(d.isMobile)("1023px")?(o()("body").addClass("share-menu-displayed"),setTimeout((function(){u.removeAttr("data-aos")}),e)):o()("body").removeClass("share-menu-displayed")}function v(){O(),y(100),setTimeout((function(){T(),j()}),200)}function j(){w||requestAnimationFrame(k),w=!0}function k(){var e=g-h,t=Math.ceil(f/e*100);t<=100&&function(e){if(e<=100){var t=p-e/100*p;m[0].style.strokeDashoffset=t}}(t),w=!1}function O(){h=window.innerHeight,g=o()(document).height()}function T(){var e=m.parent().width(),t=e/2,n=Object(d.isMobile)()?2:3;m.parent().attr("viewBox","0 0 ".concat(e," ").concat(e)),m.attr("stroke-width",n),m.attr("r",t-(n-1)),m.attr("cx",t),m.attr("cy",t),p=2*t*Math.PI,m[0].style.strokeDasharray="".concat(p," ").concat(p),m[0].style.strokeDashoffset=p}o()(document).ready((function(){u=o()(".js-aos-wrapper");var e=o()(".js-scrolltop"),t=o()(".js-load-comments"),n=o()(".js-comments-iframe"),a=o()(".js-recommended-slider");if(s()(".js-post-content"),Object(d.adjustImageGallery)(),y(1e3),a.length>0){var i=new l.d(".js-recommended-slider",{type:"slider",rewind:!1,perView:3,swipeThreshold:!1,dragThreshold:!1,gap:0,direction:Object(d.isRTL)()?"rtl":"ltr",breakpoints:{1023:{type:"carousel",perView:2,swipeThreshold:80,dragThreshold:120},720:{type:"carousel",perView:2,swipeThreshold:80,dragThreshold:120},568:{type:"carousel",perView:1,swipeThreshold:80,dragThreshold:120}}});i.on("mount.after",(function(){Object(c.a)(".js-article-card-title",100),Object(c.a)(".js-article-card-title-no-image",250)})),i.on("length.change",(function(e){1===e&&(i.update({type:"slider"}),a.find(".js-controls").remove())})),i.mount({Controls:l.b,Swipe:l.c,Breakpoints:l.a,Length:function(e,t,n){return{mount:function(){n.emit("length.change",t.Sizes.length)}}}})}Object(c.a)(".js-article-card-title",100),Object(c.a)(".js-article-card-title-no-image",250),e.click((function(){o()("html, body").animate({scrollTop:0},500)})),t.click((function(){t.parent().hide(),n.fadeIn("slow")})),Object(d.managePostImages)(o.a),Object(d.makeImagesZoomable)(o.a,r.a),window.addEventListener("scroll",b,{passive:!0}),window.addEventListener("resize",v,{passive:!0})})),o()(window).on("load",(function(){m=o()(".js-progress"),O(),T(),k(),setTimeout((function(){m.parent().css("opacity",1)}),300)}))}},[[18,0,1]]]);

File diff suppressed because one or more lines are too long

View file

@ -32,45 +32,55 @@ into the {body} of the default.hbs template --}}
<div class="l-grid centered"> <div class="l-grid centered">
{{#get "posts" filter="featured:true" include="authors,tags" limit="5" as |featured|}} {{#get "posts" filter="featured:true" include="authors,tags" limit="5" as |featured|}}
{{#if featured}} {{#if featured}}
<div class="m-featured-slider"> <div class="m-featured-slider glide js-featured-slider">
<div class="m-featured-slider__list js-featured-articles"> <div class="glide__track" data-glide-el="track">
{{#foreach featured}} <div class="m-featured-slider__list glide__slides">
<div class="m-featured-slider__list__item"> {{#foreach featured}}
<article class="m-featured-article {{#unless feature_image}}no-picture{{/unless}}"> <div class="m-featured-slider__list__item glide__slide js-featured-slide">
<div class="m-featured-article__picture"> <article class="m-featured-article {{#unless feature_image}}no-picture{{/unless}}">
{{#if feature_image}} <div class="m-featured-article__picture">
<div class="lozad no-fade-animation" data-background-image="{{img_url feature_image size="l"}}"></div> {{#if feature_image}}
{{/if}} <img src="{{img_url feature_image size="l"}}" loading="lazy" alt="">
</div>
<div class="m-featured-article__meta">
<a href="{{primary_author.url}}" class="m-featured-article__author js-tooltip" aria-label="Authors" data-tippy-content="{{t "Posted by"}} {{primary_author.name}} {{authors autolink="false" from="2" prefix=(t "Among with") separator=" , "}}">
{{#if primary_author.profile_image}}
<div style="background-image: url({{img_url primary_author.profile_image size="xs"}});"></div>
{{else}}
<div style="background-image: url({{asset "images/default-avatar-square-small.jpg"}});"></div>
{{/if}} {{/if}}
</a>
{{#if primary_tag}}
<a href="{{primary_tag.url}}" class="m-featured-article__tag">{{primary_tag.name}}</a>
{{/if}}
</div>
<div class="m-featured-article__ribbon">
<span class="icon-star"></span>
<span>{{t "Featured"}}</span>
</div>
<a href="{{url}}" class="m-featured-article__content">
<h2 class="m-featured-article__title js-featured-article-title" title="{{title}}">
{{title}}
</h2>
<div class="m-featured-article__timestamp">
<span>{{date published_at timeago="true"}}</span>
<span>&bull;</span>
<span>{{reading_time minute=(t "1 min read") minutes=(t "% min read")}}</span>
</div> </div>
</a> <div class="m-featured-article__meta">
</article> <a href="{{primary_author.url}}" class="m-featured-article__author js-tooltip" aria-label="Authors" data-tippy-content="{{t "Posted by"}} {{primary_author.name}} {{authors autolink="false" from="2" prefix=(t "Among with") separator=" , "}}">
</div> {{#if primary_author.profile_image}}
{{/foreach}} <div style="background-image: url({{img_url primary_author.profile_image size="xs"}});"></div>
{{else}}
<div style="background-image: url({{asset "images/default-avatar-square-small.jpg"}});"></div>
{{/if}}
</a>
{{#if primary_tag}}
<a href="{{primary_tag.url}}" class="m-featured-article__tag">{{primary_tag.name}}</a>
{{/if}}
</div>
<div class="m-featured-article__ribbon">
<span class="icon-star"></span>
<span>{{t "Featured"}}</span>
</div>
<a href="{{url}}" class="m-featured-article__content">
<h2 class="m-featured-article__title js-featured-article-title" title="{{title}}">
{{title}}
</h2>
<div class="m-featured-article__timestamp">
<span>{{date published_at timeago="true"}}</span>
<span>&bull;</span>
<span>{{reading_time minute=(t "1 min read") minutes=(t "% min read")}}</span>
</div>
</a>
</article>
</div>
{{/foreach}}
</div>
</div>
<div data-glide-el="controls" class="glide__arrows js-controls">
<button data-glide-dir="<" class="m-icon-button in-featured-articles glide-prev" aria-label="Previous">
<span class="icon-arrow-left" aria-hidden="true"></span>
</button>
<button data-glide-dir=">" class="m-icon-button in-featured-articles glide-next" aria-label="Next">
<span class="icon-arrow-right" aria-hidden="true"></span>
</button>
</div> </div>
</div> </div>
{{/if}} {{/if}}

View file

@ -54,5 +54,5 @@
"desktop": "assets/screenshot-desktop.jpg", "desktop": "assets/screenshot-desktop.jpg",
"mobile": "assets/screenshot-mobile.jpg" "mobile": "assets/screenshot-mobile.jpg"
}, },
"version": "0.7.2" "version": "0.7.3"
} }

View file

@ -27,13 +27,14 @@ into the {body} of the default.hbs template --}}
<div class="l-grid centered"> <div class="l-grid centered">
{{#foreach authors}} {{#foreach authors}}
<article class="m-article-card as-author"> <article class="m-article-card as-author">
{{#if profile_image}} <div class="m-article-card__picture">
<div class="m-article-card__picture lozad" data-background-image="{{img_url profile_image size="m"}}"> {{#if profile_image}}
{{else}} <img clasS="m-article-card__picture-background" src="{{img_url profile_image size="m"}}" loading="lazy" alt="">
<div class="m-article-card__picture lozad" data-background-image="{{asset "images/default-avatar-rectangle.jpg"}}"> {{else}}
{{/if}} <img clasS="m-article-card__picture-background" src="{{asset "images/default-avatar-rectangle.jpg"}}" loading="lazy" alt="">
<a href="{{url}}" class="m-article-card__picture-link" aria-label="Author"></a> {{/if}}
<h3 class="m-article-card__name">{{name}}</h3> <a href="{{url}}" class="m-article-card__picture-link" aria-label="Author"></a>
<h3 class="m-article-card__name">{{name}}</h3>
</div> </div>
<div class="m-article-card__info"> <div class="m-article-card__info">
<a href="{{url}}" class="m-article-card__info-link"> <a href="{{url}}" class="m-article-card__info-link">

View file

@ -62,29 +62,35 @@ This header template is shared across all the pages.
<div class="l-wrapper in-submenu"> <div class="l-wrapper in-submenu">
<section class="m-recent-articles"> <section class="m-recent-articles">
<h3 class="m-submenu-title in-recent-articles">{{t "Recent articles"}}</h3> <h3 class="m-submenu-title in-recent-articles">{{t "Recent articles"}}</h3>
<div class="js-recent-articles"> {{#get "posts" limit="4" order="published_at desc" as |recent|}}
{{#get "posts" limit="4" order="published_at desc"}} {{#if recent}}
{{#foreach posts}} <div class="glide js-recent-slider">
<div> <div class="glide__track" data-glide-el="track">
<a href="{{url}}" class="m-recent-article"> <div class="glide__slides">
<div class="m-recent-article__picture"> {{#foreach recent}}
{{#if feature_image}} <div class="glide__slide">
<div class="lozad" data-background-image="{{img_url feature_image size="s"}}"></div> <a href="{{url}}" class="m-recent-article">
{{else}} <div class="m-recent-article__picture {{#unless feature_image}}no-picture{{/unless}}">
<div class="no-image lozad" data-background-image="{{asset "images/no-image.png"}}"></div> {{#if feature_image}}
{{/if}} <img src="{{img_url feature_image size="s"}}" loading="lazy" alt="">
{{else}}
<img src="{{asset "images/no-image.png"}}" loading="lazy" alt="">
{{/if}}
</div>
<h3 class="m-recent-article__title js-recent-article-title" title="{{title}}">
{{title}}
</h3>
<span class="m-recent-article__date">{{date published_at timeago="true"}}</span>
</a>
</div> </div>
<h3 class="m-recent-article__title js-recent-article-title" title="{{title}}"> {{/foreach}}
{{title}} </div>
</h3>
<span class="m-recent-article__date">{{date published_at timeago="true"}}</span>
</a>
</div> </div>
{{else}} </div>
<div class="m-not-found in-recent-articles">{{t "No recent articles found :("}}</div> {{else}}
{{/foreach}} <div class="m-not-found in-recent-articles">{{t "No recent articles found :("}}</div>
{{/get}} {{/if}}
</div> {{/get}}
</section> </section>
<section class="m-tags"> <section class="m-tags">
<h3 class="m-submenu-title">{{t "Tags"}}</h3> <h3 class="m-submenu-title">{{t "Tags"}}</h3>

View file

@ -2,16 +2,18 @@
{{#foreach posts}} {{#foreach posts}}
{{#is "post"}} {{#is "post"}}
<div class="m-recommended-slider__item"> <div class="m-recommended-slider__item glide__slide">
{{/is}} {{/is}}
{{#if feature_image}} {{#if feature_image}}
<article class="m-article-card {{post_class}}"> <article class="m-article-card {{post_class}}">
<div class="m-article-card__picture lozad" data-background-image="{{img_url feature_image size="m"}}">
{{else}} {{else}}
<article class="m-article-card no-picture {{post_class}}"> <article class="m-article-card no-picture {{post_class}}">
<div class="m-article-card__picture">
{{/if}} {{/if}}
<div class="m-article-card__picture">
<a href="{{url}}" class="m-article-card__picture-link" aria-label="Article"></a> <a href="{{url}}" class="m-article-card__picture-link" aria-label="Article"></a>
{{#if feature_image}}
<img clasS="m-article-card__picture-background" src="{{img_url feature_image size="m"}}" loading="lazy" alt="">
{{/if}}
<a href="{{primary_author.url}}" class="m-article-card__author js-tooltip" aria-label="Authors" data-tippy-content="{{t "Posted by"}} {{primary_author.name}} {{authors autolink="false" from="2" prefix=(t "Among with") separator=" , "}}"> <a href="{{primary_author.url}}" class="m-article-card__author js-tooltip" aria-label="Authors" data-tippy-content="{{t "Posted by"}} {{primary_author.name}} {{authors autolink="false" from="2" prefix=(t "Among with") separator=" , "}}">
{{#if primary_author.profile_image}} {{#if primary_author.profile_image}}
<div style="background-image: url({{img_url primary_author.profile_image size="xs"}});"></div> <div style="background-image: url({{img_url primary_author.profile_image size="xs"}});"></div>

View file

@ -179,9 +179,21 @@ into the {body} of the default.hbs template --}}
<div class="l-wrapper in-recommended"> <div class="l-wrapper in-recommended">
<h3 class="m-section-title in-recommended">{{t "Recommended for you"}}</h3> <h3 class="m-section-title in-recommended">{{t "Recommended for you"}}</h3>
<div class="m-recommended-articles"> <div class="m-recommended-articles">
<div class="m-recommended-slider js-recommended-articles"> <div class="m-recommended-slider glide js-recommended-slider">
{{!-- The tag below iterates over all the related posts --}} <div class="glide__track" data-glide-el="track">
{{> "loop"}} <div class="glide__slides">
{{!-- The tag below iterates over all the related posts --}}
{{> "loop"}}
</div>
</div>
<div data-glide-el="controls" class="glide__arrows js-controls">
<button data-glide-dir="<" class="m-icon-button filled in-recommended-articles glide-prev" aria-label="Previous">
<span class="icon-arrow-left" aria-hidden="true"></span>
</button>
<button data-glide-dir=">" class="m-icon-button filled in-recommended-articles glide-next" aria-label="Next">
<span class="icon-arrow-right" aria-hidden="true"></span>
</button>
</div>
</div> </div>
</div> </div>
</div> </div>

View file

@ -1,12 +1,13 @@
import cssVars from 'css-vars-ponyfill'
import $ from 'jquery' import $ from 'jquery'
import lozad from 'lozad'
import Headroom from "headroom.js" import Headroom from "headroom.js"
import slick from 'slick-carousel' import Glide, {
Swipe,
Breakpoints
} from '@glidejs/glide/dist/glide.modular.esm'
import tippy from 'tippy.js' import tippy from 'tippy.js'
import shave from 'shave' import shave from 'shave'
import AOS from 'aos' import AOS from 'aos'
import Fuse from 'fuse.js' import Fuse from 'fuse.js/dist/fuse.basic.esm.min.js'
import { import {
isRTL, isRTL,
formatDate, formatDate,
@ -15,8 +16,6 @@ import {
getParameterByName getParameterByName
} from './helpers' } from './helpers'
cssVars({})
$(document).ready(() => { $(document).ready(() => {
if (isRTL()) { if (isRTL()) {
$('html').attr('dir', 'rtl').addClass('rtl') $('html').attr('dir', 'rtl').addClass('rtl')
@ -30,7 +29,7 @@ $(document).ready(() => {
const $toggleSubmenu = $('.js-toggle-submenu') const $toggleSubmenu = $('.js-toggle-submenu')
const $submenuOption = $('.js-submenu-option')[0] const $submenuOption = $('.js-submenu-option')[0]
const $submenu = $('.js-submenu') const $submenu = $('.js-submenu')
const $recentArticles = $('.js-recent-articles') const $recentSlider = $('.js-recent-slider')
const $openSecondaryMenu = $('.js-open-secondary-menu') const $openSecondaryMenu = $('.js-open-secondary-menu')
const $openSearch = $('.js-open-search') const $openSearch = $('.js-open-search')
const $closeSearch = $('.js-close-search') const $closeSearch = $('.js-close-search')
@ -81,12 +80,10 @@ $(document).ready(() => {
const allPosts = [] const allPosts = []
const fuseOptions = { const fuseOptions = {
shouldSort: true, shouldSort: true,
threshold: 0, threshold: 0.6,
location: 0, location: 0,
distance: 100, distance: 100,
tokenize: true, findAllMatches: true,
matchAllTokens: false,
maxPatternLength: 32,
minMatchCharLength: 1, minMatchCharLength: 1,
keys: ['title', 'custom_excerpt', 'html'] keys: ['title', 'custom_excerpt', 'html']
} }
@ -195,9 +192,9 @@ $(document).ready(() => {
for (var i = 0, len = results.length; i < len; i++) { for (var i = 0, len = results.length; i < len; i++) {
htmlString += ` htmlString += `
<article class="m-result">\ <article class="m-result">\
<a href="${results[i].url}" class="m-result__link">\ <a href="${results[i].item.url}" class="m-result__link">\
<h3 class="m-result__title">${results[i].title}</h3>\ <h3 class="m-result__title">${results[i].item.title}</h3>\
<span class="m-result__date">${formatDate(results[i].published_at)}</span>\ <span class="m-result__date">${formatDate(results[i].item.published_at)}</span>\
</a>\ </a>\
</article>` </article>`
} }
@ -274,19 +271,41 @@ $(document).ready(() => {
headroom.init() headroom.init()
} }
if ($recentArticles.length > 0) { if ($recentSlider.length > 0) {
$recentArticles.on('init', function () { const recentSlider = new Glide('.js-recent-slider', {
type: 'slider',
rewind: false,
perView: 4,
swipeThreshold: false,
dragThreshold: false,
gap: 0,
direction: isRTL() ? 'rtl' : 'ltr',
breakpoints: {
1024: {
perView: 3,
swipeThreshold: 80,
dragThreshold: 120
},
768: {
perView: 2,
swipeThreshold: 80,
dragThreshold: 120,
peek: { before: 0, after: 115 }
},
568: {
perView: 1,
swipeThreshold: 80,
dragThreshold: 120,
peek: { before: 0, after: 115 }
}
}
})
recentSlider.on('mount.after', () => {
shave('.js-recent-article-title', 50) shave('.js-recent-article-title', 50)
}) })
$recentArticles.slick({ recentSlider.mount({ Swipe, Breakpoints })
adaptiveHeight: true,
arrows: false,
infinite: false,
mobileFirst: true,
variableWidth: true,
rtl: isRTL()
})
} }
if (typeof disableFadeAnimation === 'undefined' || !disableFadeAnimation) { if (typeof disableFadeAnimation === 'undefined' || !disableFadeAnimation) {
@ -298,13 +317,6 @@ $(document).ready(() => {
$('[data-aos]').addClass('no-aos-animation') $('[data-aos]').addClass('no-aos-animation')
} }
const observer = lozad('.lozad', {
loaded: (el) => {
el.classList.add('loaded')
}
})
observer.observe()
if ($openSecondaryMenu.length > 0) { if ($openSecondaryMenu.length > 0) {
const template = document.getElementById('secondary-navigation-template') const template = document.getElementById('secondary-navigation-template')

View file

@ -1,27 +1,46 @@
import $ from 'jquery' import $ from 'jquery'
import slick from 'slick-carousel'
import shave from 'shave' import shave from 'shave'
import Glide, {
Controls,
Swipe,
Breakpoints
} from '@glidejs/glide/dist/glide.modular.esm'
import { isRTL } from './helpers' import { isRTL } from './helpers'
$(document).ready(() => { $(document).ready(() => {
const $featuredArticles = $('.js-featured-articles') const $featuredSlider = $('.js-featured-slider')
if ($featuredArticles.length > 0) { if ($featuredSlider.length > 0) {
$featuredArticles.on('init', function () { const numSlides = $featuredSlider.find('.js-featured-slide').length
const featuredSlider = new Glide('.js-featured-slider', {
type: numSlides === 1 ? 'slider' : 'carousel',
rewind: false,
gap: 0,
swipeThreshold: false,
dragThreshold: false,
direction: isRTL() ? 'rtl' : 'ltr',
breakpoints: {
768: {
swipeThreshold: numSlides === 1 ? false : 80,
dragThreshold: numSlides === 1 ? false : 120
}
}
})
if (numSlides === 1) {
$featuredSlider.find('.js-controls').remove()
}
featuredSlider.on('mount.after', () => {
shave('.js-featured-article-title', 200) shave('.js-featured-article-title', 200)
}) })
$featuredArticles.slick({
arrows: true,
infinite: true,
prevArrow: '<button class="m-icon-button in-featured-articles slick-prev" aria-label="Previous"><span class="icon-arrow-left"></span></button>',
nextArrow: '<button class="m-icon-button in-featured-articles slick-next" aria-label="Next"><span class="icon-arrow-right"></span></button>',
mobileFirst: true,
rtl: isRTL()
})
featuredSlider.mount({ Controls, Swipe, Breakpoints })
setTimeout(() => { setTimeout(() => {
$featuredArticles.slick('setPosition') window.dispatchEvent(new Event('resize'))
}, 350) }, 350)
} }
shave('.js-featured-article-title', 200)
}) })

View file

@ -1,9 +1,12 @@
import $ from 'jquery' import $ from 'jquery'
import slick from 'slick-carousel'
import stickybits from 'stickybits'
import mediumZoom from 'medium-zoom' import mediumZoom from 'medium-zoom'
import fitvids from 'fitvids' import fitvids from 'fitvids'
import shave from 'shave' import shave from 'shave'
import Glide, {
Controls,
Swipe,
Breakpoints
} from '@glidejs/glide/dist/glide.modular.esm'
import { import {
isRTL, isRTL,
isMobile, isMobile,
@ -27,7 +30,6 @@ function onScrolling() {
function adjustShare(timeout) { function adjustShare(timeout) {
if (!isMobile('1023px')) { if (!isMobile('1023px')) {
stickybits('.js-sticky', { stickyBitStickyOffset: 100 })
$('body').removeClass('share-menu-displayed') $('body').removeClass('share-menu-displayed')
} else { } else {
$('body').addClass('share-menu-displayed') $('body').addClass('share-menu-displayed')
@ -112,46 +114,70 @@ $(document).ready(() => {
const $scrollButton = $('.js-scrolltop') const $scrollButton = $('.js-scrolltop')
const $loadComments = $('.js-load-comments') const $loadComments = $('.js-load-comments')
const $commentsIframe = $('.js-comments-iframe') const $commentsIframe = $('.js-comments-iframe')
const $recommendedArticles = $('.js-recommended-articles') const $recommendedSlider = $('.js-recommended-slider')
fitvids('.js-post-content') fitvids('.js-post-content')
adjustImageGallery() adjustImageGallery()
adjustShare(1000) adjustShare(1000)
if ($recommendedArticles.length > 0) { if ($recommendedSlider.length > 0) {
$recommendedArticles.on('init', function () { const recommendedSlider = new Glide('.js-recommended-slider', {
prepareProgressCircle() type: 'slider',
rewind: false,
perView: 3,
swipeThreshold: false,
dragThreshold: false,
gap: 0,
direction: isRTL() ? 'rtl' : 'ltr',
breakpoints: {
1023: {
type: 'carousel',
perView: 2,
swipeThreshold: 80,
dragThreshold: 120
},
720: {
type: 'carousel',
perView: 2,
swipeThreshold: 80,
dragThreshold: 120
},
568: {
type: 'carousel',
perView: 1,
swipeThreshold: 80,
dragThreshold: 120
}
}
})
const Length = (Glide, Components, Events) => {
return {
mount() {
Events.emit('length.change', Components.Sizes.length)
}
}
}
recommendedSlider.on('mount.after', () => {
shave('.js-article-card-title', 100) shave('.js-article-card-title', 100)
shave('.js-article-card-title-no-image', 250) shave('.js-article-card-title-no-image', 250)
}) })
$recommendedArticles.slick({ recommendedSlider.on('length.change', (length) => {
arrows: true, if (length === 1) {
infinite: true, recommendedSlider.update({ type: 'slider' })
prevArrow: '<button class="m-icon-button filled in-recommended-articles slick-prev" aria-label="Previous"><span class="icon-arrow-left"></span></button>', $recommendedSlider.find('.js-controls').remove()
nextArrow: '<button class="m-icon-button filled in-recommended-articles slick-next" aria-label="Next"><span class="icon-arrow-right"></span></button>', }
mobileFirst: true,
responsive: [
{
breakpoint: 720,
settings: {
slidesToShow: 2
}
},
{
breakpoint: 1023,
settings: {
arrows: false,
slidesToShow: 3
}
}
],
rtl: isRTL()
}) })
recommendedSlider.mount({ Controls, Swipe, Breakpoints, Length })
} }
shave('.js-article-card-title', 100)
shave('.js-article-card-title-no-image', 250)
$scrollButton.click(() => { $scrollButton.click(() => {
$('html, body').animate({ $('html, body').animate({
scrollTop: 0 scrollTop: 0

36
src/package-lock.json generated
View file

@ -872,6 +872,11 @@
"to-fast-properties": "^2.0.0" "to-fast-properties": "^2.0.0"
} }
}, },
"@glidejs/glide": {
"version": "3.4.1",
"resolved": "https://registry.npmjs.org/@glidejs/glide/-/glide-3.4.1.tgz",
"integrity": "sha512-C34AEcK1HjSyxilRToUL54I6KAoodojUbeRlXoruobZuG0eGm8xfDL+3kgkWj7AJK4EZtunSOYfoqMp70eDtwg=="
},
"@mrmlnc/readdir-enhanced": { "@mrmlnc/readdir-enhanced": {
"version": "2.2.1", "version": "2.2.1",
"resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz", "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@ -1391,9 +1396,8 @@
} }
}, },
"aos": { "aos": {
"version": "2.3.4", "version": "git://github.com/eddiesigner/aos.git#6a740a744c3162e3397b31054b59bcb57385171d",
"resolved": "https://registry.npmjs.org/aos/-/aos-2.3.4.tgz", "from": "git://github.com/eddiesigner/aos.git#v2",
"integrity": "sha512-zh/ahtR2yME4I51z8IttIt4lC1Nw0ktsFtmeDzID1m9naJnWXhCoARaCgNOGXb5CLy3zm+wqmRAEgMYB5E2HUw==",
"requires": { "requires": {
"classlist-polyfill": "^1.0.3", "classlist-polyfill": "^1.0.3",
"lodash.debounce": "^4.0.6", "lodash.debounce": "^4.0.6",
@ -3575,11 +3579,6 @@
"integrity": "sha1-2bkoGtz9jO2TW9urqDeGiX9k6ZY=", "integrity": "sha1-2bkoGtz9jO2TW9urqDeGiX9k6ZY=",
"dev": true "dev": true
}, },
"css-vars-ponyfill": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/css-vars-ponyfill/-/css-vars-ponyfill-2.1.2.tgz",
"integrity": "sha512-Jfff/j2AGwr+WJaIbxVroTa9sFXy9b0xe5zjWEVQ9aoeCpd0e6iOo4D+d3OoLDTWcHCf2UBTswis/hN6fKEKiA=="
},
"css-what": { "css-what": {
"version": "2.1.3", "version": "2.1.3",
"resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz", "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz",
@ -6011,9 +6010,9 @@
"dev": true "dev": true
}, },
"fuse.js": { "fuse.js": {
"version": "3.4.6", "version": "6.3.1",
"resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-3.4.6.tgz", "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-6.3.1.tgz",
"integrity": "sha512-H6aJY4UpLFwxj1+5nAvufom5b2BT2v45P1MkPvdGIK8fWjQx/7o6tTT1+ALV0yawQvbmvCF0ufl2et8eJ7v7Cg==" "integrity": "sha512-oDh14IrQJoCGxg2pooP7AlAhNnNwCNnS3FvUEJN1wT4yLl6v1p8f9je4q4aEEKo6l3lMQWtBhhdvN2POGOJZAw=="
}, },
"generate-function": { "generate-function": {
"version": "1.1.0", "version": "1.1.0",
@ -8793,11 +8792,6 @@
"integrity": "sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==", "integrity": "sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==",
"dev": true "dev": true
}, },
"lozad": {
"version": "1.14.0",
"resolved": "https://registry.npmjs.org/lozad/-/lozad-1.14.0.tgz",
"integrity": "sha512-uMGxpXBW15JDGVly3p121Y4jlb/OwmXpnMQR5vnb4GxMeK45NGcmlMrRr47fmLxtSdnGRFm0YdJaVXuudPKDaA=="
},
"lru-cache": { "lru-cache": {
"version": "5.1.1", "version": "5.1.1",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@ -12412,11 +12406,6 @@
"integrity": "sha1-7b+JA/ZvfOL46v1s7tZeJkyDGzU=", "integrity": "sha1-7b+JA/ZvfOL46v1s7tZeJkyDGzU=",
"dev": true "dev": true
}, },
"slick-carousel": {
"version": "1.8.1",
"resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz",
"integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA=="
},
"snapdragon": { "snapdragon": {
"version": "0.8.2", "version": "0.8.2",
"resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz", "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",
@ -12968,11 +12957,6 @@
"integrity": "sha1-+vUbnrdKrvOzrPStX2Gr8ky3uT4=", "integrity": "sha1-+vUbnrdKrvOzrPStX2Gr8ky3uT4=",
"dev": true "dev": true
}, },
"stickybits": {
"version": "3.6.6",
"resolved": "https://registry.npmjs.org/stickybits/-/stickybits-3.6.6.tgz",
"integrity": "sha512-+++I84+V+IqRXCDIgSn7tGHXF1BtsPn/Nb3Ve3ZEH2NnTauorHyUFbKTW+nycobxtsGQMnl5V0WdHxGTDdmp+A=="
},
"stream-browserify": { "stream-browserify": {
"version": "2.0.2", "version": "2.0.2",
"resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.2.tgz", "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.2.tgz",

View file

@ -45,17 +45,14 @@
"vue-template-compiler": "^2.6.10" "vue-template-compiler": "^2.6.10"
}, },
"dependencies": { "dependencies": {
"aos": "^2.3.4", "@glidejs/glide": "^3.4.1",
"css-vars-ponyfill": "^2.1.2", "aos": "git://github.com/eddiesigner/aos.git#v2",
"fitvids": "^2.0.0", "fitvids": "^2.0.0",
"fuse.js": "^3.4.6", "fuse.js": "^6.3.0",
"headroom.js": "^0.10.3", "headroom.js": "^0.10.3",
"jquery": "^3.3.1", "jquery": "^3.3.1",
"lozad": "^1.14.0",
"medium-zoom": "^1.0.3", "medium-zoom": "^1.0.3",
"shave": "^2.5.6", "shave": "^2.5.6",
"slick-carousel": "^1.8.1",
"stickybits": "^3.6.1",
"tippy.js": "^4.0.1" "tippy.js": "^4.0.1"
}, },
"optionalDependencies": { "optionalDependencies": {

View file

@ -68,5 +68,5 @@
@import"components/404/subtitle"; @import"components/404/subtitle";
@import"components/404/text"; @import"components/404/text";
@import "libs/slick";
@import "libs/aos/aos"; @import "libs/aos/aos";
@import "libs/glide/glide.core.scss";

View file

@ -66,20 +66,6 @@ fieldset {
z-index: 5; z-index: 5;
} }
div.lozad.loaded:not(.no-fade-animation),
img.lozad.loaded {
opacity: 0;
@include animation('fadeIn 0.5s forwards');
@include keyframes(fadeIn) {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
}
::-webkit-input-placeholder { ::-webkit-input-placeholder {
color: $gray; color: $gray;
} }

View file

@ -57,15 +57,8 @@
z-index: 2; z-index: 2;
} }
.m-article-card__picture { .m-article-card__picture-background {
&:before { opacity: 0.75;
content: '';
display: block;
width: 100%;
height: 100%;
border-radius: 10px 10px 0 0;
background-color: rgba(0,0,0,0.25);
}
} }
.m-article-card__info { .m-article-card__info {
@ -95,9 +88,7 @@
height: 200px; height: 200px;
border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0;
background-color: var(--secondary-subtle-color); background-color: var(--secondary-subtle-color);
background-repeat: no-repeat; overflow: hidden;
background-position: center;
background-size: cover;
@include respond-to('medium') { @include respond-to('medium') {
height: 220px; height: 220px;
@ -113,6 +104,16 @@
z-index: 1; z-index: 1;
} }
.m-article-card__picture-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
.m-article-card__name { .m-article-card__name {
position: absolute; position: absolute;
left: $mobile-space; left: $mobile-space;
@ -214,11 +215,12 @@
position: absolute; position: absolute;
top: $mobile-space; top: $mobile-space;
left: $mobile-space; left: $mobile-space;
right: $mobile-space;
color: var(--link-color); color: var(--link-color);
letter-spacing: 0.2px; letter-spacing: 0.2px;
line-height: 1.3;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 600; font-weight: 600;
@include strip(1, 14px, 1.3, calc(100% - 40px));
@include respond-to('medium') { @include respond-to('medium') {
top: 25px; top: 25px;

View file

@ -5,10 +5,6 @@
background-color: var(--primary-subtle-color); background-color: var(--primary-subtle-color);
z-index: 1; z-index: 1;
@include respond-to('medium') {
border-radius: 10px;
}
&:hover { &:hover {
.m-featured-article__author { .m-featured-article__author {
@include bs(0 4px 8px rgba(0, 0, 0, 0.3)); @include bs(0 4px 8px rgba(0, 0, 0, 0.3));
@ -31,12 +27,10 @@
background-color: $black; background-color: $black;
z-index: 1; z-index: 1;
div { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-repeat: no-repeat; object-fit: cover;
background-position: center;
background-size: cover;
opacity: 0.7; opacity: 0.7;
} }
} }

View file

@ -1,6 +1,6 @@
.m-featured-slider { .m-featured-slider {
position: relative; position: relative;
overflow: hidden; overflow: hidden !important;
height: 350px; height: 350px;
margin: -40px -#{$mobile-space} 40px; margin: -40px -#{$mobile-space} 40px;
@include transition(all .25s cubic-bezier(.02,.01,.47,1)); @include transition(all .25s cubic-bezier(.02,.01,.47,1));
@ -8,9 +8,6 @@
&:hover { &:hover {
@include respond-to('medium') { @include respond-to('medium') {
@include transform(translateY(-5px)); @include transform(translateY(-5px));
}
&:before {
@include bs(var(--article-shadow-hover)); @include bs(var(--article-shadow-hover));
} }
} }
@ -27,18 +24,6 @@
margin: 0 20px 40px 20px; margin: 0 20px 40px 20px;
overflow: unset; overflow: unset;
} }
&:before {
content: '';
position: absolute;
top: 10px;
right: 10px;
bottom: 0;
left: 10px;
border-radius: 10px;
@include bs(var(--article-shadow-normal));
@include transition(all .25s cubic-bezier(.02,.01,.47,1));
}
} }
.m-featured-slider:not(:root:root) { .m-featured-slider:not(:root:root) {

View file

@ -3,15 +3,26 @@
padding: 0; padding: 0;
margin: 0; margin: 0;
.slick-list { .glide__track {
padding: 40px 0 60px; @include respond-to('medium') {
padding: 0 40px 0;
@include respond-to('large') {
padding: 40px 40px 60px;
margin: 0 -40px; margin: 0 -40px;
} }
} }
.glide__slides {
padding: 40px 0 60px;
margin: 0 auto;
@include respond-to('medium') {
padding: 40px 0 60px;
}
@include respond-to('extra-large') {
overflow: visible;
}
}
.m-article-card { .m-article-card {
width: 100% !important; width: 100% !important;
margin: 0 !important; margin: 0 !important;

View file

@ -69,6 +69,8 @@
height: 100%; height: 100%;
@include respond-to('large') { @include respond-to('large') {
position: sticky;
top: 100px;
flex-direction: column-reverse; flex-direction: column-reverse;
align-items: flex-start; align-items: flex-start;
height: auto; height: auto;

View file

@ -9,7 +9,7 @@
&:hover { &:hover {
.m-recent-article__picture { .m-recent-article__picture {
div { img {
@include transform(scale(1.1)); @include transform(scale(1.1));
} }
} }
@ -26,23 +26,30 @@
.m-recent-article__picture { .m-recent-article__picture {
height: 130px; height: 130px;
position: relative;
margin-bottom: 15px; margin-bottom: 15px;
border-radius: 5px; border-radius: 5px;
background-color: var(--secondary-subtle-color);
overflow: hidden; overflow: hidden;
div { &.no-picture {
img {
position: absolute;
left: 50%;
top: 50%;
width: 64px;
height: 64px;
margin: -32px 0 0 -32px;
}
}
img {
width: 100%;
height: 100%; height: 100%;
background-repeat: no-repeat; object-fit: cover;
background-position: center;
background-size: cover;
background-color: var(--secondary-subtle-color);
-webkit-backface-visibility: visible !important; -webkit-backface-visibility: visible !important;
backface-visibility: visible !important; backface-visibility: visible !important;
@include transition(transform .5s cubic-bezier(0.165, 0.84, 0.44, 1)); @include transition(transform .5s cubic-bezier(0.165, 0.84, 0.44, 1));
&.no-image {
background-size: 64px 64px;
}
} }
} }

View file

@ -114,24 +114,24 @@
position: absolute; position: absolute;
color: $white; color: $white;
font-size: 0.875rem; font-size: 0.875rem;
width: 29px; width: 40px;
height: 22px; height: 40px;
bottom: 16px; bottom: 5px;
z-index: 2; z-index: 2;
@include respond-to('medium') { @include respond-to('medium') {
bottom: 36px; bottom: 26px;
} }
&.slick-prev { &.glide-prev {
right: 52px; right: 56px;
@include respond-to('medium') { @include respond-to('medium') {
right: 72px; right: 76px;
} }
} }
&.slick-next { &.glide-next {
right: 16px; right: 16px;
@include respond-to('medium') { @include respond-to('medium') {
@ -149,11 +149,15 @@
z-index: 2; z-index: 2;
@include transform(translateY(-50%)); @include transform(translateY(-50%));
&.slick-prev { @include respond-to('large') {
display: none;
}
&.glide-prev {
left: 0; left: 0;
} }
&.slick-next { &.glide-next {
right: 0; right: 0;
} }
} }
@ -219,7 +223,7 @@
.rtl { .rtl {
.m-icon-button { .m-icon-button {
&.in-featured-articles { &.in-featured-articles {
&.slick-prev { &.glide-prev {
right: auto; right: auto;
left: 16px; left: 16px;
@ -229,7 +233,7 @@
} }
} }
&.slick-next { &.glide-next {
right: auto; right: auto;
left: 52px; left: 52px;
@ -241,13 +245,13 @@
} }
&.in-recommended-articles { &.in-recommended-articles {
&.slick-prev { &.glide-prev {
left: auto; left: auto;
right: 0; right: 0;
@include transform(rotate(180deg)); @include transform(rotate(180deg));
} }
&.slick-next { &.glide-next {
right: auto; right: auto;
left : 0; left : 0;
@include transform(rotate(180deg)); @include transform(rotate(180deg));

View file

@ -1,103 +0,0 @@
/* Slider */
.slick-slider {
position: relative;
display: block;
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list {
position: relative;
overflow: hidden;
display: block;
margin: 0;
padding: 0;
&:focus {
outline: none;
}
&.dragging {
cursor: pointer;
cursor: hand;
}
}
.slick-slider .slick-track,
.slick-slider .slick-list {
@include transform(translate3d(0, 0, 0));
}
.slick-track {
position: relative;
left: 0;
top: 0;
display: block;
margin-left: auto;
margin-right: auto;
&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
}
.slick-loading & {
visibility: hidden;
}
}
.slick-slide {
float: left;
height: 100%;
min-height: 1px;
[dir="rtl"] & {
float: right;
}
img {
display: block;
}
&.slick-loading img {
display: none;
}
display: none;
&.dragging img {
pointer-events: none;
}
.slick-initialized & {
display: block;
}
.slick-loading & {
visibility: hidden;
}
.slick-vertical & {
display: block;
height: auto;
border: 1px solid transparent;
}
}
.slick-arrow.slick-hidden {
display: none;
}

View file

@ -1,12 +1,12 @@
// Generate Duration && Delay // Generate Duration && Delay
[data-aos] { [data-aos] {
@for $i from 1 through 60 { @for $i from 1 through 60 {
body[data-aos-duration='#{$i * 50}'] &, [data-aos-duration='#{$i * 50}'] &,
&[data-aos][data-aos-duration='#{$i * 50}'] { &[data-aos][data-aos-duration='#{$i * 50}'] {
transition-duration: #{$i * 50}ms; transition-duration: #{$i * 50}ms;
} }
body[data-aos-delay='#{$i * 50}'] &, [data-aos-delay='#{$i * 50}'] &,
&[data-aos][data-aos-delay='#{$i * 50}'] { &[data-aos][data-aos-delay='#{$i * 50}'] {
transition-delay: 0; transition-delay: 0;

View file

@ -0,0 +1,70 @@
@import "variables";
.#{$glide-class} {
$this: &;
$se: $glide-element-separator;
$sm: $glide-modifier-separator;
position: relative;
box-sizing: border-box;
* {
box-sizing: inherit;
}
&#{$se}track {
height: 100%;
overflow: hidden;
}
&#{$se}slides {
position: relative;
width: 100%;
list-style: none;
backface-visibility: hidden;
transform-style: preserve-3d;
touch-action: pan-Y;
overflow: hidden;
padding: 0;
white-space: nowrap;
display: flex;
flex-wrap: nowrap;
will-change: transform;
&#{$glide-modifier-separator}dragging {
user-select: none;
}
}
&#{$se}slide {
width: 100%;
height: 100%;
flex-shrink: 0;
white-space: normal;
user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
a {
user-select: none;
-webkit-user-drag: none;
-moz-user-select: none;
-ms-user-select: none;
}
}
&#{$se}arrows {
-webkit-touch-callout: none;
user-select: none;
}
&#{$se}bullets {
-webkit-touch-callout: none;
user-select: none;
}
&#{$sm}rtl {
direction: rtl;
}
}

View file

@ -0,0 +1,3 @@
$glide-class: 'glide' !default;
$glide-element-separator: '__' !default;
$glide-modifier-separator: '--' !default;