From a497edd43744ea1e434dac7d2ede795d7e6b6b3f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Sun, 26 Dec 2021 20:04:29 +0100
Subject: [PATCH] Adopt lighthouse recommendations

---
 .../Assets/js/controllers/ajax_content_controller.js        | 2 +-
 .../Private/Assets/js/controllers/scroll_top_controller.js  | 2 +-
 .../Private/Assets/js/controllers/sticky_controller.js      | 4 ++--
 .../Resources/Private/Partials/Disrupter/Large.html         | 2 ++
 .../Resources/Private/Partials/Disrupter/Reminder.html      | 4 +++-
 .../Resources/Private/Partials/Disrupter/Small.html         | 2 ++
 .../Resources/Private/Partials/Disturber/Large.html         | 2 ++
 .../Resources/Private/Partials/Disturber/Small.html         | 2 ++
 .../ext/ep_theme/Resources/Private/Partials/Footer.html     | 2 ++
 .../ext/ep_theme/Resources/Private/Partials/Mainnav.html    | 6 +++---
 .../ep_theme/Resources/Private/Partials/TeaserImage.html    | 4 ++++
 11 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/ajax_content_controller.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/ajax_content_controller.js
index b87db9a4..e0c1192c 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/ajax_content_controller.js
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/ajax_content_controller.js
@@ -22,7 +22,7 @@ export default class extends Controller {
     connect() {
         window.addEventListener('scroll', () => {
             this.load()
-        })
+        }, { passive: true })
     }
 
     disconnect() {
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/scroll_top_controller.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/scroll_top_controller.js
index f9c241cc..17b18813 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/scroll_top_controller.js
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/scroll_top_controller.js
@@ -12,7 +12,7 @@ export default class extends Controller {
     connect() {
         window.addEventListener('scroll', () => {
             this.toggle()
-        })
+        }, { passive: true })
     }
 
     toggle() {
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/sticky_controller.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/sticky_controller.js
index 3d1faf10..9dc41003 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/sticky_controller.js
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/sticky_controller.js
@@ -19,13 +19,13 @@ export default class extends Controller {
     connect() {
         window.addEventListener('scroll', () => {
             this.toggle()
-        })
+        }, { passive: true })
     }
 
     disconnect() {
         window.removeEventListener('scroll', () => {
             this.toggle()
-        })
+        }, { passive: true })
     }
 
     toggle() {
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Large.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Large.html
index 39ead774..fb89c245 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Large.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Large.html
@@ -15,6 +15,8 @@
                     <f:if condition="{image}">
                         <f:then>
                             <img class="block rounded-full w-full h-auto lazyload"
+                                 width="400"
+                                 height="400"
                                  data-src="{f:uri.image(image: image, width: '400', height: '400c')}"
                                  alt="{image.alternative}" title="{image.title}">
                         </f:then>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Reminder.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Reminder.html
index ab9aa2b7..d83e4bf1 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Reminder.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Reminder.html
@@ -10,7 +10,9 @@
             <a href="{f:uri.typolink(parameter: button.container.link)}" title="{button.container.label -> f:format.raw()}">
                 <f:if condition="{image}">
                     <f:then>
-                        <img class="scale lazyload" data-src="{f:uri.image(image: image, width: '400')}"
+                        <img class="scale lazyload"
+                             data-src="{f:uri.image(image: image, width: '400')}"
+                             width="400"
                              alt="{image.alternative}" title="{image.title}">
                     </f:then>
                     <f:else>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Small.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Small.html
index bb8cafdb..f7a6dd82 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Small.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Small.html
@@ -12,6 +12,8 @@
                     <f:if condition="{image}">
                         <f:then>
                             <img class="block w-full h-auto rounded-full lazyload"
+                                 width="400"
+                                 height="400"
                                  data-src="{f:uri.image(image: image, width: '400', height: '400c')}"
                                  alt="{image.alternative}" title="{image.title}">
                         </f:then>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Large.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Large.html
index 090300fc..67afda45 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Large.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Large.html
@@ -16,6 +16,8 @@
                         <f:then>
                             <img class="block rounded-full w-full h-auto lazyload"
                                  data-src="{f:uri.image(image: teaserImage, width: '400', height: '400c')}"
+                                 width="400"
+                                 height="400"
                                  alt="{teaserImage.alternative}" title="{teaserImage.title}">
                         </f:then>
                         <f:else>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Small.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Small.html
index dcd2cce4..d2a27915 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Small.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Small.html
@@ -12,6 +12,8 @@
                     <f:if condition="{teaserImage}">
                         <f:then>
                             <img class="block w-full h-auto rounded-full lazyload"
+                                 width="400"
+                                 height="400"
                                  data-src="{f:uri.image(image: teaserImage, width: '400', height: '400c')}"
                                  alt="{teaserImage.alternative}" title="{teaserImage.title}">
                         </f:then>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Footer.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Footer.html
index 1dd2a374..997b29a0 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Footer.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Footer.html
@@ -160,6 +160,8 @@
                        title="Global Compact">
                         <img class="w-full h-auto lazyload"
                              data-src="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/global_compact.png')}"
+                             width="100"
+                             height="121"
                              alt="Global Compact"/>
                     </a>
                 </div>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mainnav.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mainnav.html
index c14bc15c..57665bef 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mainnav.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mainnav.html
@@ -9,9 +9,9 @@
                 <a href="{f:uri.typolink(parameter: settings.defaultHomeUid)}"
                    class="block lg:pb-4"
                    title="{settings.defaultTitle}">
-                    <img class="block w-auto {ep:themeClasses(classes: '{ep: \'h-10 lg:h-12\', sbw: \'h-14 lg:h-24\', snz: \'h-14 lg:h-24\', uch: \'h-12 lg:h-20\'}', key: settings.themekey)}"
-                         src="{f:uri.image(src: settings.logoImage)}"
-                         alt="{settings.defaultTitle}">
+                    <f:image src="{settings.logoImage}"
+                             class="block w-auto {ep:themeClasses(classes: '{ep: \'h-10 lg:h-12\', sbw: \'h-14 lg:h-24\', snz: \'h-14 lg:h-24\', uch: \'h-12 lg:h-20\'}', key: settings.themekey)}"
+                             alt="{settings.defaultTitle}"/>
                 </a>
                 <div class="hidden lg:block">
                     <f:render section="FirstLevel" arguments="{_all}"/>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/TeaserImage.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/TeaserImage.html
index 72a192da..e04637f2 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/TeaserImage.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/TeaserImage.html
@@ -18,6 +18,8 @@
             )}  350w"/>
             <img class="scale lazyload" title="{image.title}" alt="{image.alternative}"
                  src="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/lazy.png', width: '500', height: '250')}"
+                 width="500"
+                 height="250"
                  data-src="{f:uri.image(image: image, width: '500', height: '250c-100')}"
              >
         </picture>
@@ -46,6 +48,8 @@
             )}  320w"/>
             <img class="scale lazyload" title="" alt=""
                  src="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/lazy.png', width: '500', height: '250')}"
+                 width="500"
+                 height="250"
                  data-src="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg', width: '500', height: '250c-100')}"
              >
         </picture>