From 1507f08e01032075ee35e807d0445dcea9adaaec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcin=20Zaj=C4=85czkowski?= <szpak@users.sourceforge.net>
Date: Fri, 6 Mar 2020 23:52:49 +0100
Subject: [PATCH] Reuse sidebar on narrow screens script

---
 layouts/_default/list.html                  | 68 +------------------
 layouts/_default/taxonomy.html              | 69 +------------------
 layouts/index.html                          | 74 +--------------------
 layouts/partials/script/sidebar-script.html | 73 ++++++++++++++++++++
 4 files changed, 76 insertions(+), 208 deletions(-)
 create mode 100644 layouts/partials/script/sidebar-script.html

diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 06430b74..8b646037 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -28,72 +28,6 @@ <h5 class="list__header--title capitalize h5">{{.Title}}</h5>
     {{ 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 }}
\ No newline at end of file
diff --git a/layouts/_default/taxonomy.html b/layouts/_default/taxonomy.html
index 90a0dff4..583e7ebf 100644
--- a/layouts/_default/taxonomy.html
+++ b/layouts/_default/taxonomy.html
@@ -27,73 +27,6 @@ <h5 class="list__header--title capitalize h5">{{ .Title }}</h5>
   {{ 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 }}
\ No newline at end of file
diff --git a/layouts/index.html b/layouts/index.html
index c2d6afaa..c3f724cc 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -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 }}
\ No newline at end of file
diff --git a/layouts/partials/script/sidebar-script.html b/layouts/partials/script/sidebar-script.html
new file mode 100644
index 00000000..90927319
--- /dev/null
+++ b/layouts/partials/script/sidebar-script.html
@@ -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>