From 4c04faabb507561aec55be31e9ea21a8827a2469 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bjo=CC=88rn=20Fromme?= <mail@bjo3rn.com>
Date: Thu, 13 Dec 2018 14:41:41 +0100
Subject: [PATCH] Lazyload images from social media streams

---
 package-lock.json                             | 70 +++++++++----------
 .../Resources/Private/Assets/js/_app.js       | 10 +++
 .../SocialMedia/Feed/Provider-facebook.html   |  9 ++-
 .../SocialMedia/Feed/Provider-instagram.html  |  5 +-
 4 files changed, 54 insertions(+), 40 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 55bdc4b3..c614c74f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,7 @@
     },
     "@symfony/webpack-encore": {
       "version": "0.19.0",
-      "resolved": "http://registry.npmjs.org/@symfony/webpack-encore/-/webpack-encore-0.19.0.tgz",
+      "resolved": "https://registry.npmjs.org/@symfony/webpack-encore/-/webpack-encore-0.19.0.tgz",
       "integrity": "sha512-pdyT16Dgu+3fF1lAgR6mUew9h88nwjOpv47x79txVavTZcg0xiSOlPXrD/qljSb4FzMJju96sDKmt098dhcyVQ==",
       "dev": true,
       "requires": {
@@ -280,7 +280,7 @@
         },
         "string_decoder": {
           "version": "1.1.1",
-          "resolved": "http://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
           "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
           "dev": true,
           "requires": {
@@ -1716,7 +1716,7 @@
     },
     "clean-webpack-plugin": {
       "version": "0.1.19",
-      "resolved": "http://registry.npmjs.org/clean-webpack-plugin/-/clean-webpack-plugin-0.1.19.tgz",
+      "resolved": "https://registry.npmjs.org/clean-webpack-plugin/-/clean-webpack-plugin-0.1.19.tgz",
       "integrity": "sha512-M1Li5yLHECcN2MahoreuODul5LkjohJGFxLPTjl3j1ttKrF5rgjZET1SJduuqxLAuT1gAPOdkhg03qcaaU1KeA==",
       "dev": true,
       "requires": {
@@ -1828,7 +1828,7 @@
     },
     "color-string": {
       "version": "0.3.0",
-      "resolved": "http://registry.npmjs.org/color-string/-/color-string-0.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-0.3.0.tgz",
       "integrity": "sha1-J9RvtnAlxcL6JZk7+/V55HhBuZE=",
       "dev": true,
       "requires": {
@@ -1848,7 +1848,7 @@
     },
     "colors": {
       "version": "1.1.2",
-      "resolved": "http://registry.npmjs.org/colors/-/colors-1.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/colors/-/colors-1.1.2.tgz",
       "integrity": "sha1-FopHAXVran9RoSzgyXv6KMCE7WM=",
       "dev": true
     },
@@ -2184,7 +2184,7 @@
       "dependencies": {
         "regexpu-core": {
           "version": "1.0.0",
-          "resolved": "http://registry.npmjs.org/regexpu-core/-/regexpu-core-1.0.0.tgz",
+          "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-1.0.0.tgz",
           "integrity": "sha1-hqdj9Y7k18L2sQLkdkBQ3n7ZDGs=",
           "dev": true,
           "requires": {
@@ -2294,7 +2294,7 @@
     },
     "d": {
       "version": "1.0.0",
-      "resolved": "http://registry.npmjs.org/d/-/d-1.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/d/-/d-1.0.0.tgz",
       "integrity": "sha1-dUu1v+VUUdpppYuU1F9MWwRi1Y8=",
       "dev": true,
       "requires": {
@@ -2920,7 +2920,7 @@
     },
     "expand-range": {
       "version": "1.8.2",
-      "resolved": "http://registry.npmjs.org/expand-range/-/expand-range-1.8.2.tgz",
+      "resolved": "https://registry.npmjs.org/expand-range/-/expand-range-1.8.2.tgz",
       "integrity": "sha1-opnv/TNf4nIeuujiV+x5ZE/IUzc=",
       "dev": true,
       "requires": {
@@ -3006,7 +3006,7 @@
       "dependencies": {
         "array-flatten": {
           "version": "1.1.1",
-          "resolved": "http://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
+          "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
           "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=",
           "dev": true
         },
@@ -4064,7 +4064,7 @@
     },
     "globby": {
       "version": "6.1.0",
-      "resolved": "http://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
       "integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=",
       "dev": true,
       "requires": {
@@ -4108,7 +4108,7 @@
     },
     "handle-thing": {
       "version": "1.2.5",
-      "resolved": "http://registry.npmjs.org/handle-thing/-/handle-thing-1.2.5.tgz",
+      "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-1.2.5.tgz",
       "integrity": "sha1-/Xqtcmvxpf0W38KbL3pmAdJxOcQ=",
       "dev": true
     },
@@ -4316,7 +4316,7 @@
         },
         "string_decoder": {
           "version": "1.1.1",
-          "resolved": "http://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
           "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
           "dev": true,
           "requires": {
@@ -4976,7 +4976,7 @@
     },
     "jsesc": {
       "version": "1.3.0",
-      "resolved": "http://registry.npmjs.org/jsesc/-/jsesc-1.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-1.3.0.tgz",
       "integrity": "sha1-RsP+yMGJKxKwgz25vHYiF226s0s=",
       "dev": true
     },
@@ -5406,7 +5406,7 @@
         },
         "string_decoder": {
           "version": "1.1.1",
-          "resolved": "http://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
           "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
           "dev": true,
           "requires": {
@@ -5741,7 +5741,7 @@
     },
     "next-tick": {
       "version": "1.0.0",
-      "resolved": "http://registry.npmjs.org/next-tick/-/next-tick-1.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.0.0.tgz",
       "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw=",
       "dev": true
     },
@@ -6135,7 +6135,7 @@
     },
     "os-homedir": {
       "version": "1.0.2",
-      "resolved": "http://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
       "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
       "dev": true
     },
@@ -6152,7 +6152,7 @@
     },
     "os-tmpdir": {
       "version": "1.0.2",
-      "resolved": "http://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
       "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
       "dev": true
     },
@@ -6273,7 +6273,7 @@
     },
     "path-browserify": {
       "version": "0.0.0",
-      "resolved": "http://registry.npmjs.org/path-browserify/-/path-browserify-0.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-0.0.0.tgz",
       "integrity": "sha1-oLhwcpquIUAFt9UDLsLLuw+0RRo=",
       "dev": true
     },
@@ -6291,7 +6291,7 @@
     },
     "path-is-absolute": {
       "version": "1.0.1",
-      "resolved": "http://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
       "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
       "dev": true
     },
@@ -7478,7 +7478,7 @@
         },
         "string_decoder": {
           "version": "1.1.1",
-          "resolved": "http://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
           "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
           "dev": true,
           "requires": {
@@ -7583,7 +7583,7 @@
     },
     "regexpu-core": {
       "version": "2.0.0",
-      "resolved": "http://registry.npmjs.org/regexpu-core/-/regexpu-core-2.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-2.0.0.tgz",
       "integrity": "sha1-SdA4g3uNz4v6W5pCE5k45uoq4kA=",
       "dev": true,
       "requires": {
@@ -7600,7 +7600,7 @@
     },
     "regjsparser": {
       "version": "0.1.5",
-      "resolved": "http://registry.npmjs.org/regjsparser/-/regjsparser-0.1.5.tgz",
+      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.1.5.tgz",
       "integrity": "sha1-fuj4Tcb6eS0/0K4ijSS9lJ6tIFw=",
       "dev": true,
       "requires": {
@@ -7609,7 +7609,7 @@
       "dependencies": {
         "jsesc": {
           "version": "0.5.0",
-          "resolved": "http://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
+          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
           "integrity": "sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=",
           "dev": true
         }
@@ -8023,7 +8023,7 @@
     },
     "sass-mq": {
       "version": "3.3.2",
-      "resolved": "http://registry.npmjs.org/sass-mq/-/sass-mq-3.3.2.tgz",
+      "resolved": "https://registry.npmjs.org/sass-mq/-/sass-mq-3.3.2.tgz",
       "integrity": "sha1-NHLgTDGkMrzVWztgTtxyrppN7xo="
     },
     "sax": {
@@ -8053,7 +8053,7 @@
       "dependencies": {
         "source-map": {
           "version": "0.4.4",
-          "resolved": "http://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
           "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=",
           "dev": true,
           "requires": {
@@ -8589,7 +8589,7 @@
     },
     "sprintf-js": {
       "version": "1.0.3",
-      "resolved": "http://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
       "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
       "dev": true
     },
@@ -8675,7 +8675,7 @@
         },
         "string_decoder": {
           "version": "1.1.1",
-          "resolved": "http://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
           "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
           "dev": true,
           "requires": {
@@ -8691,7 +8691,7 @@
     },
     "stream-browserify": {
       "version": "2.0.1",
-      "resolved": "http://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.1.tgz",
       "integrity": "sha1-ZiZu5fm9uZQKTkUUyvtDu3Hlyds=",
       "dev": true,
       "requires": {
@@ -8722,7 +8722,7 @@
         },
         "string_decoder": {
           "version": "1.1.1",
-          "resolved": "http://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
           "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
           "dev": true,
           "requires": {
@@ -8767,7 +8767,7 @@
         },
         "string_decoder": {
           "version": "1.1.1",
-          "resolved": "http://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
           "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
           "dev": true,
           "requires": {
@@ -8811,7 +8811,7 @@
     },
     "string_decoder": {
       "version": "0.10.31",
-      "resolved": "http://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
       "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
       "dev": true
     },
@@ -8883,7 +8883,7 @@
     },
     "tar": {
       "version": "2.2.1",
-      "resolved": "http://registry.npmjs.org/tar/-/tar-2.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.1.tgz",
       "integrity": "sha1-jk0qJWwOIYXGsYrWlK7JaLg8sdE=",
       "dev": true,
       "requires": {
@@ -8997,7 +8997,7 @@
     },
     "tty-browserify": {
       "version": "0.0.0",
-      "resolved": "http://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
       "integrity": "sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY=",
       "dev": true
     },
@@ -9231,7 +9231,7 @@
     },
     "util": {
       "version": "0.10.3",
-      "resolved": "http://registry.npmjs.org/util/-/util-0.10.3.tgz",
+      "resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz",
       "integrity": "sha1-evsa/lCAUkZInj23/g7TeTNqwPk=",
       "dev": true,
       "requires": {
@@ -9305,7 +9305,7 @@
     },
     "vm-browserify": {
       "version": "0.0.4",
-      "resolved": "http://registry.npmjs.org/vm-browserify/-/vm-browserify-0.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-0.0.4.tgz",
       "integrity": "sha1-XX6kW7755Kb/ZflUOOCofDV9WnM=",
       "dev": true,
       "requires": {
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js
index a3495600..9396e1e4 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js
@@ -13,6 +13,7 @@ global.$ = global.jQuery = $;
 require('cookieconsent');
 require('slick-carousel');
 require('lazysizes');
+require('lazysizes/plugins/unveilhooks/ls.unveilhooks');
 require('bootstrap-sass/assets/javascripts/bootstrap');
 require('picturefill');
 require('leaflet');
@@ -144,6 +145,14 @@ new Vue({
                 $(this).css('backgroundImage', 'url(' + imageSource + ')');
             });
         },
+        lazyLoadBackgroundImages () {
+            document.addEventListener('lazybeforeunveil', e => {
+                const bg = e.target.getAttribute('data-bg');
+                if (bg) {
+                    e.target.style.backgroundImage = 'url(' + bg + ')';
+                }
+            });
+        },
         initCarousels () {
             let $carouselItemWrappers = $('.slider--teasers > .slider__items').not('.slick-initialized');
             $.each($carouselItemWrappers, function () {
@@ -389,6 +398,7 @@ new Vue({
             this.setMobileMode();
             this.setBackgroundImageMode();
             this.setResponsiveBackgroundImages();
+            this.lazyLoadBackgroundImages();
             this.initListeners();
             this.initFilterpanel();
             this.initCarousels();
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Partials/SocialMedia/Feed/Provider-facebook.html b/web/typo3conf/ext/ep_theme/Resources/Private/Partials/SocialMedia/Feed/Provider-facebook.html
index dac38732..4c74c091 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Partials/SocialMedia/Feed/Provider-facebook.html
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Partials/SocialMedia/Feed/Provider-facebook.html
@@ -5,10 +5,12 @@
 			<f:then>
                 <f:if condition="{fb_full_res}">
                     <f:then>
-                        <div class="image full_resolution" data-image-id="{feed.raw.full_picture}" style="background-image: url({feed.raw.full_picture})"></div>
+                        <div class="image full_resolution lazyload" data-image-id="{feed.raw.full_picture}"
+                             data-bg="{feed.raw.full_picture}"></div>
                     </f:then>
                     <f:else>
-                        <div class="image" data-image-id="{feed.raw.picture}" style="background-image: url({feed.raw.picture})"></div>
+                        <div class="image lazyload" data-image-id="{feed.raw.picture}"
+                             data-bg="{feed.raw.picture}"></div>
                     </f:else>
                 </f:if>
 			</f:then>
@@ -35,7 +37,8 @@
 			<f:count>{feed.raw.comments.data}</f:count>
 		</span>
 		<f:if condition="{0:feed.raw.type}=={0:'video'}">
-			<img class="video-overlay" src="/typo3conf/ext/pb_social/Resources/Public/Icons/play_icon.png"/>
+            <img class="video-overlay lazyload"
+                 data-src="{f:uri.image(src: 'EXT:pb_social/Resources/Public/Icons/play_icon.png')}" />
 		</f:if>
 	</a>
 </f:if>
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Partials/SocialMedia/Feed/Provider-instagram.html b/web/typo3conf/ext/ep_theme/Resources/Private/Partials/SocialMedia/Feed/Provider-instagram.html
index 2cdde677..bbd08d51 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Partials/SocialMedia/Feed/Provider-instagram.html
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Partials/SocialMedia/Feed/Provider-instagram.html
@@ -1,5 +1,6 @@
-<a href="{feed.link}" target="_blank" class="pb-list-item pb-list-item-instagram pb-hidden socialmedia__item" data-type="" data-url="{feed.link}">
-	<div class="image" style="background-image: url({feed.image})"></div>
+<a href="{feed.link}" target="_blank" class="pb-list-item pb-list-item-instagram pb-hidden socialmedia__item"
+   data-type="" data-url="{feed.link}">
+	<div class="image lazyload" data-bg="{feed.image}"></div>
 	<f:if condition="{feed.text}">
 		<span class="text">{feed.text}</span>
 	</f:if>