WIP Reduce bs and jquery javascript

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('bootstrap-sass/assets/javascripts/bootstrap/alert')
-require('lazysizes');
+require('bootstrap-sass/assets/javascripts/bootstrap/dropdown')
-require('lazysizes/plugins/unveilhooks/ls.unveilhooks');
+require('bootstrap-sass/assets/javascripts/bootstrap/modal')
-require('bootstrap-sass/assets/javascripts/bootstrap');
+require('bootstrap-sass/assets/javascripts/bootstrap/transition')
-require('picturefill');
-require('leaflet');
 
 // Import components
 import EventBus from './_bus'
@@ -133,8 +138,7 @@ new Vue({
             this.scroll(0);
         },
         scrollTo (anchorId) {
-            const top = $(anchorId).offset().top;
+            document.getElementById(anchorId).scrollIntoView({ behavior: 'smooth' })
-            this.scroll(top);
         },
         scroll (top) {
             window.scrollTo({ top: top, behavior: 'smooth' })

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/ConceptButtons.vue

@@ -1,29 +1,13 @@
-<template>
+<template functional>
-    <div v-if="showButtons" class="hidden-xs conceptbtns">
+    <div v-if="Object.keys(props.concepts).length > 1" class="hidden-xs conceptbtns">
-        <a v-for="concept of concepts" @click.prevent="scrollTo('#concept-' + concept.uid)"
+        <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>

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');

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;
+}

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
+            <osm-map lat="{latitude}" lng="{longitude}" :zoom="17"></osm-map>
-                lat="{latitude}"
-                lng="{longitude}"
-                :zoom="17"
-            ></osm-map>
         </div>
     </f:section>
 

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>
 

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}" />'

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}" />'

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' ]