+ toggleMenu: function() {
+ this.showMenu = !this.showMenu;
+ },
+ matchesFilter: function(item) {
+ return (item.name.toLowerCase().includes(this.filter.toLowerCase())
+ || (item.tag && item.tag.toLowerCase().includes(this.filter.toLowerCase())))
+ },
+ firstMatchingService: function() {
+ for (group of this.config.services) {
+ for (item of group.items) {
+ if (this.matchesFilter(item)) {
+ return item;
+ }
+ }
+ }
+ return null;
+ },
+ navigateToFirstService: function(target) {
+ service = this.firstMatchingService();
+ if (service) {
+ window.open(service.url, target || service.target || '_self');
+ }
+ }
+ },
+ mounted() {
+ function isSmallScreen() {
+ return window.matchMedia('screen and (max-width: 1023px)').matches;
+ }
+ this._keyListener = function(e) {
+ if (e.key === '/') {
+ if (isSmallScreen()) {
+ this.showMenu = true;
+ }
+ Vue.nextTick(() => {
+ this.$refs.search.focus();
+ });
+
+ e.preventDefault();
+ }
+ if (e.key === 'Escape') {
+ this.filter = '';
+ this.$refs.search.blur();
+ if (isSmallScreen()) {
+ this.showMenu = false;
+ }
+ }
+ }
+
+ document.addEventListener('keydown', this._keyListener.bind(this));
+ },
+ beforeDestroy() {
+ document.removeEventListener('keydown', this._keyListener);