From 13e319d5952ca16869ec4a25305982d22b27311a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bjo=CC=88rn=20Fromme?= Date: Tue, 22 Jun 2021 17:46:45 +0200 Subject: [PATCH] WIP Migrate bs collapse --- .../Resources/Private/Assets/js/_app.js | 16 ------- .../js/controllers/collapse_controller.js | 27 +++++++++++ ...filter_controller.js => faq_controller.js} | 15 ++++++- .../Private/Assets/scss/_disturber.scss | 3 ++ .../Private/Assets/scss/_footer.scss | 3 ++ .../Resources/Private/Partials/Faq.html | 16 +++---- .../Resources/Private/Partials/Footer.html | 11 +++-- .../Private/Templates/Reseller/Copypaste.html | 45 ++++++++++--------- .../Templates/Search/Searchresult.html | 11 ++--- 9 files changed, 91 insertions(+), 56 deletions(-) rename public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/{faq_filter_controller.js => faq_controller.js} (60%) 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 8abdac32..daa856ea 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 @@ -120,7 +120,6 @@ new Vue({ return { maxWindowWidth: 991, searchBoxVisible: false, - navbarLocked: false, searchbarFixed: false, mobileMode: false, backgroundImageMode: 'mobile' @@ -138,7 +137,6 @@ new Vue({ this.scroll(top); }, scroll (top) { - this.navbarLocked = true; window.scrollTo({ top: top, behavior: 'smooth' }) }, toggleSearchbox () { @@ -167,14 +165,6 @@ new Vue({ }); } }, - initFilterpanel () { - const $filterPanel = $('#filterpanel'); - if (this.mobileMode) { - $filterPanel.removeClass('in'); - } else { - $filterPanel.addClass('in'); - } - }, initListeners () { $window.on('resize', () => { this.setMobileMode(); @@ -191,11 +181,6 @@ new Vue({ }, created () { this.$store.dispatch('init'); - EventBus.$on('ajaxContentLoaded', () => { - Vue.nextTick(() => { - this.initFilterpanel(); - }); - }); EventBus.$on('scrollTo', (anchorId, offset) => { document.getElementById(anchorId).scrollIntoView({ behavior: 'smooth' }) }); @@ -204,7 +189,6 @@ new Vue({ Vue.nextTick(() => { this.setMobileMode(); this.initListeners(); - this.initFilterpanel(); this.initDropdownMenuBehavior(); }); } diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/collapse_controller.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/collapse_controller.js index e69de29b..406f03d5 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/collapse_controller.js +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/collapse_controller.js @@ -0,0 +1,27 @@ +import { Controller } from 'stimulus' + +export default class extends Controller { + + static classes = [ 'collapsed' ] + static targets = [ 'container' ] + static values = { collapsed: Boolean, until: Number, from: Number } + + connect() { + if (this.hasUntilValue && window.innerWidth < this.untilValue) { + this.collapsedValue = true + } + if (this.hasFromValue && window.innerWidth > this.fromValue) { + this.collapsedValue = true + } + } + + toggle(e) { + e.preventDefault() + this.collapsedValue = !this.collapsedValue + } + + collapsedValueChanged() { + const collapsedClass = this.hasCollapsedClass ? this.collapsedClass : 'hidden' + this.containerTarget.classList.toggle(collapsedClass, this.collapsedValue) + } +} diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/faq_filter_controller.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/faq_controller.js similarity index 60% rename from public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/faq_filter_controller.js rename to public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/faq_controller.js index 563c7662..32846298 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/faq_filter_controller.js +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/faq_controller.js @@ -4,7 +4,20 @@ export default class extends Controller { static targets = [ 'entry' ] - apply(e) { + toggle(e) { + e.preventDefault() + const selectedEntry = e.target.parentNode + selectedEntry.dataset.expanded = "1" + selectedEntry.children[1].classList.remove('hidden') + this.entryTargets.forEach(entry => { + if (entry !== selectedEntry) { + entry.dataset.expanded = "0" + entry.children[1].classList.toggle('hidden', true) + } + }) + } + + filter(e) { const query = e.target.value if (query.length < 3) { this.entryTargets.forEach(entry => { diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/_disturber.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/_disturber.scss index 02c6ade0..018417b7 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/_disturber.scss +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/_disturber.scss @@ -87,6 +87,9 @@ } } } + &[data-expanded="1"] a.headline:before { + content: "\f107"; + } div{ background-color:$color-bg-second; padding:0px 20px 20px 20px; diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/_footer.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/_footer.scss index d5e06e85..fb13f7d9 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/_footer.scss +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/_footer.scss @@ -167,6 +167,9 @@ } } } + &[data-collapse-collapsed-value="true"] a:before { + content: "\f107"; + } &:last-child{ a.collapsed{ box-shadow:none; diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Faq.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Faq.html index 49e3041f..2704f52f 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Faq.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Faq.html @@ -3,20 +3,20 @@
-
+
Häufig gestellte Fragen
- +
-
+
-
- {faq.question} -
+
+ + {faq.question} + +
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 f3b78844..d6e67957 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Footer.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Footer.html @@ -6,14 +6,13 @@
-
+
- + + {menuheader.title} + -