EP/website-typo3
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP Migrate bs collapse

Browse Source
This commit is contained in:
Björn Fromme
2021-07-27 14:06:11 +02:00
parent fac269d3a2
commit 13e319d595
9 changed files with 91 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js
-16
View File
@@ -120,7 +120,6 @@ new Vue({
return { return {
maxWindowWidth: 991, maxWindowWidth: 991,
searchBoxVisible: false, searchBoxVisible: false,
navbarLocked: false,
searchbarFixed: false, searchbarFixed: false,
mobileMode: false, mobileMode: false,
backgroundImageMode: 'mobile' backgroundImageMode: 'mobile'
@@ -138,7 +137,6 @@ new Vue({
this.scroll(top); this.scroll(top);
}, },
scroll (top) { scroll (top) {
this.navbarLocked = true;
window.scrollTo({ top: top, behavior: 'smooth' }) window.scrollTo({ top: top, behavior: 'smooth' })
}, },
toggleSearchbox () { toggleSearchbox () {
@@ -167,14 +165,6 @@ new Vue({
}); });
} }
}, },
initFilterpanel () {
const $filterPanel = $('#filterpanel');
if (this.mobileMode) {
$filterPanel.removeClass('in');
} else {
$filterPanel.addClass('in');
}
},
initListeners () { initListeners () {
$window.on('resize', () => { $window.on('resize', () => {
this.setMobileMode(); this.setMobileMode();
@@ -191,11 +181,6 @@ new Vue({
}, },
created () { created () {
this.$store.dispatch('init'); this.$store.dispatch('init');
EventBus.$on('ajaxContentLoaded', () => {
Vue.nextTick(() => {
this.initFilterpanel();
});
});
EventBus.$on('scrollTo', (anchorId, offset) => { EventBus.$on('scrollTo', (anchorId, offset) => {
document.getElementById(anchorId).scrollIntoView({ behavior: 'smooth' }) document.getElementById(anchorId).scrollIntoView({ behavior: 'smooth' })
}); });
@@ -204,7 +189,6 @@ new Vue({
Vue.nextTick(() => { Vue.nextTick(() => {
this.setMobileMode(); this.setMobileMode();
this.initListeners(); this.initListeners();
this.initFilterpanel();
this.initDropdownMenuBehavior(); this.initDropdownMenuBehavior();
}); });
} }
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/collapse_controller.js
+27
View File
@@ -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)
}
}
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/faq_filter_controller.js → public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/faq_controller.js
+14 -1
View File
@@ -4,7 +4,20 @@ export default class extends Controller {
static targets = [ 'entry' ] 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 const query = e.target.value
if (query.length < 3) { if (query.length < 3) {
this.entryTargets.forEach(entry => { this.entryTargets.forEach(entry => {
public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/_disturber.scss
+3
View File
@@ -87,6 +87,9 @@
} }
} }
} }
&[data-expanded="1"] a.headline:before {
content: "\f107";
}
div{ div{
background-color:$color-bg-second; background-color:$color-bg-second;
padding:0px 20px 20px 20px; padding:0px 20px 20px 20px;
public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/_footer.scss
+3
View File
@@ -167,6 +167,9 @@
} }
} }
} }
&[data-collapse-collapsed-value="true"] a:before {
content: "\f107";
}
&:last-child{ &:last-child{
a.collapsed{ a.collapsed{
box-shadow:none; box-shadow:none;
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Faq.html
+8 -8
View File
@@ -3,20 +3,20 @@
<div class="container-fluid ep-disturber faq"> <div class="container-fluid ep-disturber faq">
<div> <div>
<div> <div>
<div class="container" data-controller="faq-filter"> <div class="container" data-controller="faq">
<span class="headline headline--3 headline--disturber">Häufig gestellte Fragen</span> <span class="headline headline--3 headline--disturber">Häufig gestellte Fragen</span>
<f:if condition="{filter}"> <f:if condition="{filter}">
<div class="faq-filter"> <div class="faq-filter">
<input type="text" data-action="faq-filter#apply" class="form-control faq-filter__field" placeholder="Suchbegriff"> <input type="text" data-action="faq#filter" class="form-control faq-filter__field" placeholder="Suchbegriff">
</div> </div>
</f:if> </f:if>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel-group">
<f:for each="{faqs}" as="faq" iteration="iteration"> <f:for each="{faqs}" as="faq" iteration="iteration">
<div class="panel panel-default" data-faq-filter-target="entry"> <div class="panel panel-default" data-faq-target="entry" data-expanded="{f:if(condition: iteration.isFirst, then: '1', else: '0')}">
<a class="headline headline--4{f:if(condition: iteration.isFirst, else: ' collapsed')}" <a class="headline headline--4" role="button" data-action="faq#toggle" href="#">
role="button" data-toggle="collapse" data-parent="#accordion" {faq.question}
href="#faq-{faq.uid}" {f:if(condition: iteration.isFirst, then: 'aria-expanded="true" ')}aria-controls="faq-{faq.uid}">{faq.question}</a> </a>
<div id="faq-{faq.uid}" class="panel-collapse collapse{f:if(condition: iteration.isFirst, then: ' in')}" role="tabpanel" data-faq-answer> <div{f:if(condition: iteration.isFirst, else: ' class="hidden"')} role="tabpanel" data-collapse-target="container">
{faq.answer -> f:format.html()} {faq.answer -> f:format.html()}
</div> </div>
</div> </div>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Footer.html
+5 -6
View File
@@ -6,14 +6,13 @@
<div class="row accordion panel-group" id="ep-travel-accordion" role="tablist" aria-multiselectable="true"> <div class="row accordion panel-group" id="ep-travel-accordion" role="tablist" aria-multiselectable="true">
<v:menu pageUid="{settings.footerNavPid}" levels="2" expandAll="true"> <v:menu pageUid="{settings.footerNavPid}" levels="2" expandAll="true">
<f:for each="{menu}" as="menuheader" iteration="iteration"> <f:for each="{menu}" as="menuheader" iteration="iteration">
<div class="col-sm-3"> <div class="col-sm-3" data-controller="collapse" data-collapse-until-value="991" data-collapse-collapsed-class="hidden">
<span class="headline headline--4 headline--footer hidden-xs">{menuheader.title}</span> <span class="headline headline--4 headline--footer hidden-xs">{menuheader.title}</span>
<a class="headline headline--4 headline--footer visible-xs collapsed" role="button" <a class="headline headline--4 headline--footer visible-xs" role="button" data-action="collapse#toggle" href="#">
data-toggle="collapse" data-parent="#ep-travel-accordion" {menuheader.title}
href="#ep-travel-footer-{iteration.cycle}" aria-expanded="true" </a>
aria-controls="ep-travel-footer-{iteration.cycle}">{menuheader.title}</a>
<v:menu pageUid="{menuheader.uid}" useShortcutUid="true" as="submenu"> <v:menu pageUid="{menuheader.uid}" useShortcutUid="true" as="submenu">
<ul class="collapse list-disc" id="ep-travel-footer-{iteration.cycle}"> <ul class="list-disc lg:block" data-collapse-target="container">
<f:for each="{submenu}" as="submenuitem"> <f:for each="{submenu}" as="submenuitem">
<f:if condition="{submenuitem.doktype} == 3"> <f:if condition="{submenuitem.doktype} == 3">
<f:then> <f:then>
public/typo3conf/ext/ep_theme/Resources/Private/Templates/Reseller/Copypaste.html
+25 -20
View File
@@ -43,14 +43,15 @@
</f:section> </f:section>
<f:section name="CollapsibleSimple"> <f:section name="CollapsibleSimple">
<div class="panel panel-default"> <div class="panel panel-default" data-controller="collapse" data-collapse-collapsed-value="true">
<div class="panel-heading"> <div class="panel-heading">
<h4 class="panel-title"> <h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{id}" <a role="button" href="#" data-action="collapse#toggle">
aria-expanded="true" aria-controls="collapseOne">{label}</a> {label}
</a>
</h4> </h4>
</div> </div>
<div id="collapse{id}" class="panel-collapse collapse"> <div class="hidden" data-collapse-target="container">
<div class="panel-body"> <div class="panel-body">
<f:if condition="{name}"> <f:if condition="{name}">
<div class="form-group"> <div class="form-group">
@@ -76,14 +77,15 @@
</f:section> </f:section>
<f:section name="CollapsibleHotel"> <f:section name="CollapsibleHotel">
<div class="panel panel-default"> <div class="panel panel-default" data-controller="collapse" data-collapse-collapsed-value="true">
<div class="panel-heading"> <div class="panel-heading">
<h4 class="panel-title"> <h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{id}" <a role="button" href="#" data-action="collapse#toggle">
aria-expanded="true" aria-controls="collapseOne">{label}</a> {label}
</a>
</h4> </h4>
</div> </div>
<div id="collapse{id}" class="panel-collapse collapse"> <div class="hidden" data-collapse-target="container">
<div class="panel-body"> <div class="panel-body">
<div class="form-group"> <div class="form-group">
<label class="control-label">Name</label> <label class="control-label">Name</label>
@@ -235,14 +237,15 @@
</f:section> </f:section>
<f:section name="CollapsibleCity"> <f:section name="CollapsibleCity">
<div class="panel panel-default"> <div class="panel panel-default" data-controller="collapse" data-collapse-collapsed-value="true">
<div class="panel-heading"> <div class="panel-heading">
<h4 class="panel-title"> <h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{id}" <a role="button" href="#" data-action="collapse#toggle">
aria-expanded="true" aria-controls="collapseOne">{label}</a> {label}
</a>
</h4> </h4>
</div> </div>
<div id="collapse{id}" class="panel-collapse collapse"> <div class="hidden" data-collapse-target="container">
<div class="panel-body"> <div class="panel-body">
<div class="col-xs-12"> <div class="col-xs-12">
<div class="form-group"> <div class="form-group">
@@ -268,14 +271,15 @@
</f:section> </f:section>
<f:section name="CollapsibleRegion"> <f:section name="CollapsibleRegion">
<div class="panel panel-default"> <div class="panel panel-default" data-controller="collapse" data-collapse-collapsed-value="true">
<div class="panel-heading"> <div class="panel-heading">
<h4 class="panel-title"> <h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{id}" <a role="button" href="#" data-action="collapse#toggle">
aria-expanded="true" aria-controls="collapseOne">{label}</a> {label}
</a>
</h4> </h4>
</div> </div>
<div id="collapse{id}" class="panel-collapse collapse"> <div class="hidden" data-collapse-target="container">
<div class="panel-body"> <div class="panel-body">
<div class="col-xs-12"> <div class="col-xs-12">
<div class="form-group"> <div class="form-group">
@@ -329,14 +333,15 @@
</f:section> </f:section>
<f:section name="CollapsibleImages"> <f:section name="CollapsibleImages">
<div class="panel panel-default"> <div class="panel panel-default" data-controller="collapse" data-collapse-collapsed-value="true">
<div class="panel-heading"> <div class="panel-heading">
<h4 class="panel-title"> <h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{id}" <a role="button" href="#" data-action="collapse#toggle">
aria-expanded="true" aria-controls="collapseOne">{label}</a> {label}
</a>
</h4> </h4>
</div> </div>
<div id="collapse{id}" class="panel-collapse collapse"> <div class="hidden" data-collapse-target="containet">
<div class="panel-body"> <div class="panel-body">
<f:for each="{images}" as="image"> <f:for each="{images}" as="image">
<a href="{image}" target="_blank">{image}</a><br> <a href="{image}" target="_blank">{image}</a><br>
public/typo3conf/ext/ep_theme/Resources/Private/Templates/Search/Searchresult.html
+6 -5
View File
@@ -21,12 +21,13 @@
</div> </div>
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-md-3"> <div class="col-md-3" data-controller="collapse" data-collapse-collapsed-class="hidden" data-collapse-until-value="991">
<p class="hidden-md hidden-lg"> <p class="lg:hidden">
<button class="button button--full button--small" role="button" data-toggle="collapse" <button class="button button--full button--small" role="button" data-action="collapse#toggle">
href="#filterpanel"><i class="fa fa-toggle-on"></i> Filter ein-/ausblenden</button> <i class="fa fa-toggle-on"></i> Filter ein-/ausblenden
</button>
</p> </p>
<div id="filterpanel" class="ajaxtarget collapse in" v-cloak> <div id="filterpanel" class="hidden lg:block" v-cloak data-collapse-target="container">
<concept-buttons :concepts="filterOptions.concepts"></concept-buttons> <concept-buttons :concepts="filterOptions.concepts"></concept-buttons>
<h3>Filter</h3> <h3>Filter</h3>
<a v-if="filterCount > 0" <a v-if="filterCount > 0"