Merge pull request #222 from szpak/upstream/reuseMobileSwitchScript
Reuse sidebar on narrow screens script
This commit is contained in:
commit
14b1c7c6ba
|
@ -28,72 +28,6 @@
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<script>
|
{{ partial "script/sidebar-script" . }}
|
||||||
{{ $sidebarPosition:= $.Param "sidebarPosition" }}
|
|
||||||
var sidebarPosition = JSON.parse({{ $sidebarPosition | jsonify }});
|
|
||||||
{{ $enableSidebar:= $.Param "enableSidebar" }}
|
|
||||||
var enableSidebar = JSON.parse({{ $enableSidebar | jsonify }});
|
|
||||||
|
|
||||||
var listMainElem = document.querySelector('.list__main');
|
|
||||||
var listSideElem = document.querySelector('.list__sidebar');
|
|
||||||
|
|
||||||
var gridSmall = 'l';
|
|
||||||
var gridBig = 'mr';
|
|
||||||
var gridFull = 'lmr'
|
|
||||||
|
|
||||||
if (sidebarPosition === "right") {
|
|
||||||
gridSmall = 'r';
|
|
||||||
gridBig = 'lm'
|
|
||||||
}
|
|
||||||
enquire.register("screen and (max-width: 769px)", {
|
|
||||||
match: function () {
|
|
||||||
if (enableSidebar) {
|
|
||||||
listMainElem.classList.remove(gridBig);
|
|
||||||
listMainElem.classList.add(gridFull);
|
|
||||||
listSideElem.classList.remove(gridSmall);
|
|
||||||
listSideElem.classList.add('hide');
|
|
||||||
} else {
|
|
||||||
if (listMainElem && !listMainElem.classList.contains(gridFull)) {
|
|
||||||
listMainElem.classList.remove(gridBig);
|
|
||||||
listMainElem.classList.add(gridFull);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (listSideElem && !listSideElem.classList.contains('hide')) {
|
|
||||||
listSideElem.classList.add('hide');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
unmatch: function () {
|
|
||||||
if (enableSidebar) {
|
|
||||||
listMainElem.classList.remove(gridFull);
|
|
||||||
listMainElem.classList.add(gridBig);
|
|
||||||
listSideElem.classList.add(gridSmall);
|
|
||||||
listSideElem.classList.remove('hide');
|
|
||||||
} else {
|
|
||||||
if (listMainElem && !listMainElem.classList.contains(gridFull)) {
|
|
||||||
listMainElem.classList.remove(gridBig);
|
|
||||||
listMainElem.classList.add(gridFull);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (listSideElem && !listSideElem.classList.contains('hide')) {
|
|
||||||
listSideElem.classList.add('hide');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
var navCollapseBtn = document.querySelector('.navbar__burger');
|
|
||||||
var navCollapse = document.getElementsByClassName('navbarm__collapse')[0];
|
|
||||||
if (navCollapse) {
|
|
||||||
navCollapse.setAttribute('data-open', false);
|
|
||||||
navCollapse.style.maxHeight = 0;
|
|
||||||
navCollapseBtn.classList.remove('is-active');
|
|
||||||
}
|
|
||||||
document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active');
|
|
||||||
document.getElementsByClassName('mobile-search')[0].classList.add('hide');
|
|
||||||
},
|
|
||||||
setup: function () { },
|
|
||||||
deferSetup: true,
|
|
||||||
destroy: function () { },
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
{{ partial "script/list-script" . }}
|
{{ partial "script/list-script" . }}
|
||||||
{{ end }}
|
{{ end }}
|
|
@ -27,73 +27,6 @@
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<script>
|
{{ partial "script/sidebar-script" . }}
|
||||||
{{ $sidebarPosition:= $.Param "sidebarPosition" }}
|
|
||||||
var sidebarPosition = JSON.parse({{ $sidebarPosition | jsonify }});
|
|
||||||
{{ $enableSidebar:= $.Param "enableSidebar" }}
|
|
||||||
var enableSidebar = JSON.parse({{ $enableSidebar | jsonify }});
|
|
||||||
|
|
||||||
var listMainElem = document.querySelector('.list__main');
|
|
||||||
var listSideElem = document.querySelector('.list__sidebar');
|
|
||||||
|
|
||||||
var gridSmall = 'l';
|
|
||||||
var gridBig = 'mr';
|
|
||||||
var gridFull = 'lmr'
|
|
||||||
|
|
||||||
if (sidebarPosition === "right") {
|
|
||||||
gridSmall = 'r';
|
|
||||||
gridBig = 'lm'
|
|
||||||
}
|
|
||||||
|
|
||||||
enquire.register("screen and (max-width: 769px)", {
|
|
||||||
match: function () {
|
|
||||||
if (enableSidebar) {
|
|
||||||
listMainElem.classList.remove(gridBig);
|
|
||||||
listMainElem.classList.add(gridFull);
|
|
||||||
listSideElem.classList.remove(gridSmall);
|
|
||||||
listSideElem.classList.add('hide');
|
|
||||||
} else {
|
|
||||||
if (listMainElem && !listMainElem.classList.contains(gridFull)) {
|
|
||||||
listMainElem.classList.remove(gridBig);
|
|
||||||
listMainElem.classList.add(gridFull);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (listSideElem && !listSideElem.classList.contains('hide')) {
|
|
||||||
listSideElem.classList.add('hide');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
unmatch: function () {
|
|
||||||
if (enableSidebar) {
|
|
||||||
listMainElem.classList.remove(gridFull);
|
|
||||||
listMainElem.classList.add(gridBig);
|
|
||||||
listSideElem.classList.add(gridSmall);
|
|
||||||
listSideElem.classList.remove('hide');
|
|
||||||
} else {
|
|
||||||
if (listMainElem && !listMainElem.classList.contains(gridFull)) {
|
|
||||||
listMainElem.classList.remove(gridBig);
|
|
||||||
listMainElem.classList.add(gridFull);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (listSideElem && !listSideElem.classList.contains('hide')) {
|
|
||||||
listSideElem.classList.add('hide');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
var navCollapseBtn = document.querySelector('.navbar__burger');
|
|
||||||
var navCollapse = document.getElementsByClassName('navbarm__collapse')[0];
|
|
||||||
if (navCollapse) {
|
|
||||||
navCollapse.setAttribute('data-open', false);
|
|
||||||
navCollapse.style.maxHeight = 0;
|
|
||||||
navCollapseBtn.classList.remove('is-active');
|
|
||||||
}
|
|
||||||
document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active');
|
|
||||||
document.getElementsByClassName('mobile-search')[0].classList.add('hide');
|
|
||||||
},
|
|
||||||
setup: function () { },
|
|
||||||
deferSetup: true,
|
|
||||||
destroy: function () { },
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
{{ partial "script/taxo-script" . }}
|
{{ partial "script/taxo-script" . }}
|
||||||
{{ end }}
|
{{ end }}
|
|
@ -23,78 +23,6 @@
|
||||||
</aside>
|
</aside>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</main>
|
</main>
|
||||||
<script>
|
{{ partial "script/sidebar-script" . }}
|
||||||
{{ $sidebarPosition:= $.Param "sidebarPosition" }}
|
|
||||||
var sidebarPosition = JSON.parse({{ $sidebarPosition | jsonify }});
|
|
||||||
{{ $enableSidebar:= $.Param "enableSidebar" }}
|
|
||||||
var enableSidebar = JSON.parse({{ $enableSidebar | jsonify }});
|
|
||||||
|
|
||||||
var listMainElem = document.querySelector('.list__main');
|
|
||||||
var listSideElem = document.querySelector('.list__sidebar');
|
|
||||||
|
|
||||||
var gridSmall = 'l';
|
|
||||||
var gridBig = 'mr';
|
|
||||||
var gridFull = 'lmr'
|
|
||||||
|
|
||||||
if (sidebarPosition === "right") {
|
|
||||||
gridSmall = 'r';
|
|
||||||
gridBig = 'lm'
|
|
||||||
}
|
|
||||||
|
|
||||||
enquire.register("screen and (max-width: 769px)", {
|
|
||||||
match: function () {
|
|
||||||
if (enableSidebar) {
|
|
||||||
listMainElem.classList.remove(gridBig);
|
|
||||||
listMainElem.classList.add(gridFull);
|
|
||||||
listSideElem.classList.remove(gridSmall);
|
|
||||||
listSideElem.classList.add('hide');
|
|
||||||
} else {
|
|
||||||
if (listMainElem && !listMainElem.classList.contains(gridFull)) {
|
|
||||||
listMainElem.classList.remove(gridBig);
|
|
||||||
listMainElem.classList.add(gridFull);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (listSideElem && !listSideElem.classList.contains('hide')) {
|
|
||||||
listSideElem.classList.add('hide');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
unmatch: function () {
|
|
||||||
if (enableSidebar) {
|
|
||||||
listMainElem.classList.remove(gridFull);
|
|
||||||
listMainElem.classList.add(gridBig);
|
|
||||||
listSideElem.classList.add(gridSmall);
|
|
||||||
listSideElem.classList.remove('hide');
|
|
||||||
} else {
|
|
||||||
if (listMainElem && !listMainElem.classList.contains(gridFull)) {
|
|
||||||
listMainElem.classList.remove(gridBig);
|
|
||||||
listMainElem.classList.add(gridFull);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (listSideElem && !listSideElem.classList.contains('hide')) {
|
|
||||||
listSideElem.classList.add('hide');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
var navCollapseBtn = document.querySelector('.navbar__burger');
|
|
||||||
var navCollapse = document.getElementsByClassName('navbarm__collapse')[0];
|
|
||||||
if (navCollapse) {
|
|
||||||
navCollapse.setAttribute('data-open', false);
|
|
||||||
navCollapse.style.maxHeight = 0;
|
|
||||||
navCollapseBtn.classList.remove('is-active');
|
|
||||||
}
|
|
||||||
if (document.getElementsByClassName('navbar__menu')[0]) {
|
|
||||||
document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active');
|
|
||||||
}
|
|
||||||
if (document.getElementsByClassName('mobile-search')[0]) {
|
|
||||||
document.getElementsByClassName('mobile-search')[0].classList.add('hide');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
setup: function () { },
|
|
||||||
deferSetup: true,
|
|
||||||
destroy: function () { },
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
{{ partial "script/home-script" . }}
|
{{ partial "script/home-script" . }}
|
||||||
{{ end }}
|
{{ end }}
|
|
@ -0,0 +1,73 @@
|
||||||
|
<script>
|
||||||
|
{{ $sidebarPosition:= $.Param "sidebarPosition" }}
|
||||||
|
var sidebarPosition = JSON.parse({{ $sidebarPosition | jsonify }});
|
||||||
|
{{ $enableSidebar:= $.Param "enableSidebar" }}
|
||||||
|
var enableSidebar = JSON.parse({{ $enableSidebar | jsonify }});
|
||||||
|
|
||||||
|
var listMainElem = document.querySelector('.list__main');
|
||||||
|
var listSideElem = document.querySelector('.list__sidebar');
|
||||||
|
|
||||||
|
var gridSmall = 'l';
|
||||||
|
var gridBig = 'mr';
|
||||||
|
var gridFull = 'lmr'
|
||||||
|
|
||||||
|
if (sidebarPosition === "right") {
|
||||||
|
gridSmall = 'r';
|
||||||
|
gridBig = 'lm'
|
||||||
|
}
|
||||||
|
|
||||||
|
enquire.register("screen and (max-width: 769px)", {
|
||||||
|
match: function () {
|
||||||
|
if (enableSidebar) {
|
||||||
|
listMainElem.classList.remove(gridBig);
|
||||||
|
listMainElem.classList.add(gridFull);
|
||||||
|
listSideElem.classList.remove(gridSmall);
|
||||||
|
listSideElem.classList.add('hide');
|
||||||
|
} else {
|
||||||
|
if (listMainElem && !listMainElem.classList.contains(gridFull)) {
|
||||||
|
listMainElem.classList.remove(gridBig);
|
||||||
|
listMainElem.classList.add(gridFull);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (listSideElem && !listSideElem.classList.contains('hide')) {
|
||||||
|
listSideElem.classList.add('hide');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
unmatch: function () {
|
||||||
|
if (enableSidebar) {
|
||||||
|
listMainElem.classList.remove(gridFull);
|
||||||
|
listMainElem.classList.add(gridBig);
|
||||||
|
listSideElem.classList.add(gridSmall);
|
||||||
|
listSideElem.classList.remove('hide');
|
||||||
|
} else {
|
||||||
|
if (listMainElem && !listMainElem.classList.contains(gridFull)) {
|
||||||
|
listMainElem.classList.remove(gridBig);
|
||||||
|
listMainElem.classList.add(gridFull);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (listSideElem && !listSideElem.classList.contains('hide')) {
|
||||||
|
listSideElem.classList.add('hide');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var navCollapseBtn = document.querySelector('.navbar__burger');
|
||||||
|
var navCollapse = document.getElementsByClassName('navbarm__collapse')[0];
|
||||||
|
if (navCollapse) {
|
||||||
|
navCollapse.setAttribute('data-open', false);
|
||||||
|
navCollapse.style.maxHeight = 0;
|
||||||
|
navCollapseBtn.classList.remove('is-active');
|
||||||
|
}
|
||||||
|
if (document.getElementsByClassName('navbar__menu')[0]) {
|
||||||
|
document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active');
|
||||||
|
}
|
||||||
|
if (document.getElementsByClassName('mobile-search')[0]) {
|
||||||
|
document.getElementsByClassName('mobile-search')[0].classList.add('hide');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setup: function () { },
|
||||||
|
deferSetup: true,
|
||||||
|
destroy: function () { },
|
||||||
|
});
|
||||||
|
</script>
|
Loading…
Reference in New Issue