Merge pull request #222 from szpak/upstream/reuseMobileSwitchScript

Reuse sidebar on narrow screens script
This commit is contained in:
zzossig 2020-03-08 21:09:11 +09:00 committed by GitHub
commit 14b1c7c6ba
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 76 additions and 208 deletions

View File

@ -28,72 +28,6 @@
{{ end }}
</main>
<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/sidebar-script" . }}
{{ partial "script/list-script" . }}
{{ end }}

View File

@ -27,73 +27,6 @@
{{ end }}
</main>
<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/sidebar-script" . }}
{{ partial "script/taxo-script" . }}
{{ end }}

View File

@ -23,78 +23,6 @@
</aside>
{{ end }}
</main>
<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/sidebar-script" . }}
{{ partial "script/home-script" . }}
{{ end }}

View File

@ -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>