From 5d72129ee5ba3904d55cf757450b20aa0cada9e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bjo=CC=88rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Thu, 24 Jun 2021 18:43:47 +0200
Subject: [PATCH] WIP Reduce bs and jquery javascript

---
 .../Resources/Private/Assets/js/_app.js       | 22 +++++++++++--------
 .../Assets/js/components/ConceptButtons.vue   | 22 +++----------------
 .../Assets/js/components/ProductDetail.vue    |  4 ----
 .../Private/Assets/scss/remix/_osm-map.scss   |  4 ++++
 .../Templates/FluidStyledContent/Gmap.html    | 15 +++++--------
 .../Private/Templates/Map/General.html        |  4 +++-
 .../Private/Templates/Search/Searchbar.html   |  2 +-
 .../Private/Templates/Search/Searchbox.html   |  2 +-
 webpack.config.js                             | 10 +++++++--
 9 files changed, 38 insertions(+), 47 deletions(-)

diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js
index daa856ea..ae78f64b 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js
@@ -1,3 +1,10 @@
+// Import dependencies
+require('cookieconsent')
+require('lazysizes')
+require('lazysizes/plugins/unveilhooks/ls.unveilhooks')
+require('picturefill')
+require('leaflet')
+
 // Enable resolution of stimulus controllers
 import { Application } from 'stimulus'
 import { definitionsFromContext } from 'stimulus/webpack-helpers'
@@ -65,12 +72,10 @@ import '@fancyapps/fancybox'
 
 global.$ = global.jQuery = $;
 
-require('cookieconsent');
-require('lazysizes');
-require('lazysizes/plugins/unveilhooks/ls.unveilhooks');
-require('bootstrap-sass/assets/javascripts/bootstrap');
-require('picturefill');
-require('leaflet');
+require('bootstrap-sass/assets/javascripts/bootstrap/alert')
+require('bootstrap-sass/assets/javascripts/bootstrap/dropdown')
+require('bootstrap-sass/assets/javascripts/bootstrap/modal')
+require('bootstrap-sass/assets/javascripts/bootstrap/transition')
 
 // Import components
 import EventBus from './_bus'
@@ -98,7 +103,7 @@ Vue.filter('date', (value) => {
 // Store
 import store from './store';
 
-// Initialize vue app
+//Initialize vue app
 new Vue({
     el: '#app',
     store,
@@ -133,8 +138,7 @@ new Vue({
             this.scroll(0);
         },
         scrollTo (anchorId) {
-            const top = $(anchorId).offset().top;
-            this.scroll(top);
+            document.getElementById(anchorId).scrollIntoView({ behavior: 'smooth' })
         },
         scroll (top) {
             window.scrollTo({ top: top, behavior: 'smooth' })
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/ConceptButtons.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/ConceptButtons.vue
index ae72164e..7e7b65bd 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/ConceptButtons.vue
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/ConceptButtons.vue
@@ -1,29 +1,13 @@
-<template>
-    <div v-if="showButtons" class="hidden-xs conceptbtns">
-        <a v-for="concept of concepts" @click.prevent="scrollTo('#concept-' + concept.uid)"
+<template functional>
+    <div v-if="Object.keys(props.concepts).length > 1" class="hidden-xs conceptbtns">
+        <a v-for="concept of props.concepts"
            :href="'#concept-' + concept.uid"
            :class="'btn btn-warning ep-sidebar concept-' + concept.code"
            :title="concept.name">{{ concept.name }}</a>
     </div>
 </template>
 <script>
-    import EventBus from '../_bus'
-
     export default {
         props: [ 'concepts' ],
-        computed: {
-            showButtons () {
-                let buttonCount = 0;
-                for (let concept in this.concepts) {
-                    buttonCount++;
-                }
-                return buttonCount > 1;
-            }
-        },
-        methods: {
-            scrollTo (anchorId) {
-                EventBus.$emit('scrollTo', anchorId);
-            }
-        }
     }
 </script>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/ProductDetail.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/ProductDetail.vue
index c5f743b7..b9a89f22 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/ProductDetail.vue
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/ProductDetail.vue
@@ -164,10 +164,6 @@
                     this.scrollToMain();
                 }
                 this.activeSection = section;
-                // 'Wake up' Slick slider after changing visibility
-                Vue.nextTick(() => {
-                    $('.slider--content > .slider__items').slick('setPosition');
-                });
             },
             scrollToMain () {
                 EventBus.$emit('scrollTo', '#main');
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/remix/_osm-map.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/remix/_osm-map.scss
index 283f2d21..ec9b40cf 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/remix/_osm-map.scss
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/remix/_osm-map.scss
@@ -3,3 +3,7 @@
   padding-bottom: 56.25%;
   margin-bottom: 34px;
 }
+
+.leaflet-top, .leaflet-bottom {
+    z-index: 490 !important;
+}
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/Gmap.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/Gmap.html
index e45ff8da..fce37003 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/Gmap.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/Gmap.html
@@ -6,20 +6,15 @@
 
     <f:section name="Main">
         <f:if condition="{hotel}">
-            <f:render section="Map" arguments="{latitude: hotel.0.data.latitude, longitude: hotel.0.data.longitude, googleMapsApiKey: settings.googleMapsApiKey}"/>
+            <f:variable name="latitude" value="{hotel.0.data.latitude}"/>
+            <f:variable name="longitude" value="{hotel.0.data.longitude}"/>
         </f:if>
         <f:if condition="{region}">
-            <f:render section="Map" arguments="{latitude: region.0.data.latitude, longitude: region.0.data.longitude, googleMapsApiKey: settings.googleMapsApiKey}"/>
+            <f:variable name="latitude" value="{region.0.data.latitude}"/>
+            <f:variable name="longitude" value="{region.0.data.longitude}"/>
         </f:if>
-    </f:section>
-
-    <f:section name="Map">
         <div class="row">
-            <osm-map
-                lat="{latitude}"
-                lng="{longitude}"
-                :zoom="17"
-            ></osm-map>
+            <osm-map lat="{latitude}" lng="{longitude}" :zoom="17"></osm-map>
         </div>
     </f:section>
 
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Map/General.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Map/General.html
index 2da4cb0b..e7746218 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Map/General.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Map/General.html
@@ -6,7 +6,9 @@
 
     <f:section name="Main">
         <ep:container data="{data}">
-            <osm-map :markers="{markerData}" :zoom="17"></osm-map>
+            <div class="osm-map"
+                 data-controller="osm-map"
+                 data-osm-map-markers-value='{markerData -> f:format.raw()}'></div>
         </ep:container>
     </f:section>
 
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Search/Searchbar.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Search/Searchbar.html
index f8c6d0ca..d274d956 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Search/Searchbar.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Search/Searchbar.html
@@ -5,7 +5,7 @@
     <f:layout name="Default"/>
 
     <f:section name="Main">
-        <div id="searchbar">
+        <div id="searchbar" v-cloak>
             <search-bar
                 options-uri='<ep:uri.ajax controller="AjaxSearchbar" action="options" pageUid="{settings.defaultAjaxUid}" />'
                 reset-uri='<ep:uri.ajax controller="AjaxSearchbar" action="reset" pageUid="{settings.defaultAjaxUid}" />'
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Search/Searchbox.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Search/Searchbox.html
index 4d468b1c..ec7e0320 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Search/Searchbox.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Search/Searchbox.html
@@ -5,7 +5,7 @@
     <f:layout name="Default"/>
 
     <f:section name="Main">
-        <div id="ep-navbar-searchbox" class="searchbox hidden-lg" v-show="searchBoxVisible" v-cloak>
+        <div id="searchbox" class="searchbox hidden-lg" v-cloak>
             <search-box
                 options-uri='<ep:uri.ajax controller="AjaxSearchbar" action="options" pageUid="{settings.defaultAjaxUid}" />'
                 reset-uri='<ep:uri.ajax controller="AjaxSearchbar" action="reset" pageUid="{settings.defaultAjaxUid}" />'
diff --git a/webpack.config.js b/webpack.config.js
index 2def8dab..aceb85c4 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -26,6 +26,12 @@ Encore
         js: 'js/[name].js',
         css: 'css/[name].css',
     })
+    .configureImageRule({
+        filename: 'images/[name][ext]',
+    })
+    .configureFontRule({
+        filename: 'fonts/[name][ext]',
+    })
     .configureBabel(function (babelConfig) {
         babelConfig.plugins = [ '@babel/plugin-proposal-object-rest-spread', '@babel/plugin-syntax-dynamic-import' ]
     })
@@ -65,10 +71,10 @@ Encore
         css: 'css/[name].css',
     })
     .configureImageRule({
-        filename: 'images/[name].[ext]',
+        filename: 'images/[name][ext]',
     })
     .configureFontRule({
-        filename: 'fonts/[name].[ext]',
+        filename: 'fonts/[name][ext]',
     })
     .configureBabel(function (babelConfig) {
         babelConfig.plugins = [ '@babel/plugin-proposal-object-rest-spread', '@babel/plugin-syntax-dynamic-import' ]