diff --git a/README.md b/README.md index bfe9b85..adc1045 100755 --- 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 index 3df3ed7..da17199 100755 --- 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; + } + } + } });