Merge pull request #5 from edejin/master

Add 'hide-top-menu' and 'hide-left-menu' arguments
pointcz · Oct 27, 2021 · eea01d7 · eea01d7
2 parents 8f17812 + 9c51ea8
commit eea01d7
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 33 deletions.
diff --git a/README.md b/README.md
@@ -4,6 +4,7 @@ Hide left sidebar and top header bar for use in iframe for example or some other
 
 ## Usage 
 Add `hide-sidebars` after `?` as query parameter to nextcloud url or with `dir` parameter after `&`.
+If you need to hide only left or top menu you can use `hide-left-menu` or `hide-top-menu`.
 
 Examples:
 ```

diff --git a/js/script.js b/js/script.js
@@ -1,38 +1,61 @@
 window.addEventListener('DOMContentLoaded', function(event) {
-	if (getParameterByName('hide-sidebars') !== null) {
-		hideSidebars();
-	}
+        if (getParameterByName('hide-sidebars') !== null) {
+                hideTopMenu();
+                hideLeftMenu();
+        }
 
-	function getParameterByName(name, url) {
-		if (!url) url = window.location.href;
-		name = name.replace(/[\[\]]/g, "\\$&");
-		var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
-			results = regex.exec(url);
-		if (!results) return null;
-		if (!results[2]) return '';
-		return decodeURIComponent(results[2].replace(/\+/g, " "));
-	}
+        if (getParameterByName('hide-top-menu') !== null) {
+                hideTopMenu();
+        }
 
-	function hideSidebars() {
-		var changeStyles = [
-			{el: '#header', style: 'display', value: 'none'},
-			{el: '#app-navigation', style: 'display', value: 'none'},
-			{el: '#app-navigation-vue', style: 'display', value: 'none'},
-			{el: '.app-navigation-toggle', style: 'display', value: 'none'},
-			{el: '#app-content', style: 'marginLeft', value: 0},
-			{el: '#content', style: 'paddingTop', value: 0},
-			{el: '#content-vue', style: 'paddingTop', value: 0},
-			{el: '#controls', style: 'top', value: 0},
-			{el: '#controls', style: 'paddingLeft', value: 0},
-			{el: '#filestable thead', style: 'top', value: '44px'},
-			{el: '#app-navigation-toggle', style: 'zIndex', value: 0},
-		];
-		for (var i = 0; i < changeStyles.length; i += 1) {
-			var element = document.querySelectorAll(changeStyles[i].el);
-			if (element.length) {
-				element[0].style[changeStyles[i].style] = changeStyles[i].value;
-			}
-		}
-	}
+        if (getParameterByName('hide-left-menu') !== null) {
+                hideLeftMenu();
+        }
+
+        function getParameterByName(name, url) {
+                if (!url) url = window.location.href;
+                name = name.replace(/[\[\]]/g, "\\$&");
+                var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
+                        results = regex.exec(url);
+                if (!results) return null;
+                if (!results[2]) return '';
+                return decodeURIComponent(results[2].replace(/\+/g, " "));
+        }
+
+        function hideTopMenu() {
+                var changeStyles = [
+                        {el: '#header', style: 'display', value: 'none'},
+                        {el: '#app-navigation-vue', style: 'top', value: '0'},
+                        {el: '#app-navigation', style: 'top', value: '0'},
+                        {el: '#app-navigation-vue', style: 'height', value: '100vh'},
+                        {el: '#content', style: 'paddingTop', value: 0},
+                        {el: '#content-vue', style: 'paddingTop', value: 0},
+                        {el: '#controls', style: 'top', value: 0},
+                        {el: '#filestable thead', style: 'top', value: '44px'},
+                ];
+                for (var i = 0; i < changeStyles.length; i += 1) {
+                        var element = document.querySelectorAll(changeStyles[i].el);
+                        if (element.length) {
+                                element[0].style[changeStyles[i].style] = changeStyles[i].value;
+                        }
+                }
+        }
+
+        function hideLeftMenu() {
+                var changeStyles = [
+                        {el: '#app-navigation', style: 'display', value: 'none'},
+                        {el: '#app-navigation-vue', style: 'display', value: 'none'},
+                        {el: '.app-navigation-toggle', style: 'display', value: 'none'},
+                        {el: '#app-content', style: 'marginLeft', value: 0},
+                        {el: '#controls', style: 'paddingLeft', value: 0},
+                        {el: '#app-navigation-toggle', style: 'zIndex', value: 0},
+                ];
+                for (var i = 0; i < changeStyles.length; i += 1) {
+                        var element = document.querySelectorAll(changeStyles[i].el);
+                        if (element.length) {
+                                element[0].style[changeStyles[i].style] = changeStyles[i].value;
+                        }
+                }
+        }
 
 });