From d8a0e57190be4607540b1f821554d507c94c847c Mon Sep 17 00:00:00 2001 From: Jason McBrayer Date: Mon, 26 Aug 2019 19:18:21 -0400 Subject: [PATCH] Add polyfill for loading=lazy in Firefox. Debug some of the issues that brings up, and use "less" lazy-loading on images. --- brutaldon/static/js/loading-attribute-polyfill.min.js | 5 +++++ brutaldon/templates/base.html | 7 +++++++ brutaldon/templates/main/toot_partial.html | 10 ++++++++-- package.json | 1 + yarn.lock | 5 +++++ 5 files changed, 26 insertions(+), 2 deletions(-) create mode 100755 brutaldon/static/js/loading-attribute-polyfill.min.js diff --git a/brutaldon/static/js/loading-attribute-polyfill.min.js b/brutaldon/static/js/loading-attribute-polyfill.min.js new file mode 100755 index 0000000..1335f5b --- /dev/null +++ b/brutaldon/static/js/loading-attribute-polyfill.min.js @@ -0,0 +1,5 @@ +/* + * Loading attribute polyfill - https://github.com/mfranzke/loading-attribute-polyfill + * @license Copyright(c) 2019 by Maximilian Franzke + */ +!function(e,t){"use strict";var r,a,o={rootMargin:"256px 0px",threshold:.01,lazyImage:'img[loading="lazy"]',lazyIframe:'iframe[loading="lazy"]',loadingSupported:"loading"in HTMLImageElement.prototype&&"loading"in HTMLIFrameElement.prototype};"undefined"!=typeof NodeList&&NodeList.prototype&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),"IntersectionObserver"in window&&(r=new IntersectionObserver(function(e,t){e.forEach(function(e){if(0!==e.intersectionRatio){var r=e.target;t.unobserve(r),i(r)}})},o)),a="requestAnimationFrame"in window?window.requestAnimationFrame:function(e){e()};var n="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";function i(e){var t,r,a=[];"picture"===e.parentNode.tagName.toLowerCase()&&(t=e.parentNode,(r=t.querySelector("source[data-lazy-remove]"))&&t.removeChild(r),a=Array.prototype.slice.call(e.parentNode.querySelectorAll("source"))),a.push(e),a.forEach(function(e){e.dataset.lazySrcset&&(e.setAttribute("srcset",e.dataset.lazySrcset),delete e.dataset.lazySrcset)}),e.setAttribute("src",e.dataset.lazySrc),delete e.dataset.lazySrc}function d(){document.querySelectorAll("noscript."+e).forEach(function(e){var t=e.textContent||e.innerHTML;o.loadingSupported||(void 0!==r?("picture"===e.parentNode.tagName.toLowerCase()&&(t=''+t),t=function(e){return e.replace(/(?:\r\n|\r|\n|\t| )srcset=/g," data-lazy-srcset=").replace(/(?:\r\n|\r|\n|\t| )src=/g,' src="'+n+'" data-lazy-src=')}(t)):t=function(e){return e.replace(/(?:\r\n|\r|\n|\t| )src=/g,' lazyload="1" src=')}(t));var a=document.createElement("div");for(a.innerHTML=t;a.firstChild;)o.loadingSupported||void 0===r||!a.firstChild.tagName||"img"!==a.firstChild.tagName.toLowerCase()&&"iframe"!==a.firstChild.tagName.toLowerCase()||r.observe(a.firstChild),e.parentNode.insertBefore(a.firstChild,e);e.parentNode.removeChild(e)}),window.matchMedia("print").addListener(function(e){e.matches&&document.querySelectorAll(o.lazyImage+"[data-lazy-src],"+o.lazyIframe+"[data-lazy-src]").forEach(function(e){i(e)})})}/comp|inter/.test(document.readyState)?a(d):"addEventListener"in document?document.addEventListener("DOMContentLoaded",function(){a(d)}):document.attachEvent("onreadystatechange",function(){"complete"===document.readyState&&d()})}("loading-lazy"); \ No newline at end of file diff --git a/brutaldon/templates/base.html b/brutaldon/templates/base.html index 397067a..20d811f 100644 --- a/brutaldon/templates/base.html +++ b/brutaldon/templates/base.html @@ -46,6 +46,7 @@ + {% block page_scripts %} {% endblock %} @@ -80,12 +81,16 @@
{% if own_acct %} + {% else %} + {% endif %}
@@ -185,10 +190,12 @@
{% if preferences.theme.is_brutalist %} + {% endif %} Privacy diff --git a/brutaldon/templates/main/toot_partial.html b/brutaldon/templates/main/toot_partial.html index 1b3a2ff..07486f6 100644 --- a/brutaldon/templates/main/toot_partial.html +++ b/brutaldon/templates/main/toot_partial.html @@ -14,14 +14,14 @@
{% if reblog %}

- +

{% endif %} @@ -71,9 +71,11 @@ {% if toot.card.image %}
+
{% endif %} @@ -98,6 +100,7 @@ {% if media.type == "image" %}
+
{% else %} @@ -122,6 +126,7 @@ poster="{{ media.preview_url }}"> +
diff --git a/package.json b/package.json index 23e621a..81099c7 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "fork-awesome": "^1.1.0", "intercooler": "^1.2.1", "jquery": "^3.3.1", + "loading-attribute-polyfill": "^1.1.0", "magnific-popup": "^1.1.0", "mousetrap": "^1.6.2" } diff --git a/yarn.lock b/yarn.lock index 49d27bb..021eaa7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -32,6 +32,11 @@ jquery@^3.3.1: resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.4.0.tgz#8de513fa0fa4b2c7d2e48a530e26f0596936efdf" integrity sha512-ggRCXln9zEqv6OqAGXFEcshF5dSBvCkzj6Gm2gzuR5fWawaX8t7cxKVkkygKODrDAzKdoYw3l/e3pm3vlT4IbQ== +loading-attribute-polyfill@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/loading-attribute-polyfill/-/loading-attribute-polyfill-1.1.0.tgz#a7d50bfae00a6ab93bf3246bd3337e34adc808ac" + integrity sha512-KFVrFen+aQzGXIbx+nURedF3r/VvHvROBEXu9T7Z8vwCwNOI7w5+HMc6UWvOmezgp8n2MICi2D/PzXUD2fZ6Xg== + magnific-popup@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/magnific-popup/-/magnific-popup-1.1.0.tgz#3e7362c5bd18f6785fe99e59d013e20af33d3049"