Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 | 1x 5x 6x 5x 5x 3x 3x 4x 4x 1x 5x 5x 5x 5x 5x 5x | // @ts-check
import { filter, get, isFunction } from "lodash";
import $ from "jquery";
import Vue from "vue";
import logger from "../Logger/BaseLogger";
import KeyboardEventMixin from "../mixins/BaseKeyboardEventMixin";
import { BaseStoreMixin } from "../store/utils";
import ThemeSwitcher from "./ThemeSwitcher.vue";
/**
* @typedef {{
* toggler: HTMLElement,
* nav: HTMLElement
* }} Refs
*/
const component = /** @type {V.Constructor<any, Refs> } */ (Vue).extend({
name: "BaseNavBar",
components: { ThemeSwitcher },
mixins: [ KeyboardEventMixin({ local: false }), BaseStoreMixin ],
props: {
title: { type: String, default: "" },
version: { type: String, default: "" },
showRoutes: { type: Boolean, default: true },
showThemeSwitcher: { type: Boolean, default: false },
showAbout: { type: Boolean, default: false }
},
/**
* @return {{ errorsExist: boolean }}
*/
data() {
return { errorsExist: false };
},
computed: {
// FIXME: add RouteUtilsMixin in base-vue
/** @return {boolean} */
isAdmin() { return get(this.$route, [ "meta", "isAdmin" ], false); },
/**
* @return {boolean}
*/
showKeyHints() { return this.getBaseState([ "ui", "showKeyHints" ]); },
/**
* @return {boolean}
*/
darkMode() { return this.getBaseState([ "ui", "darkMode" ]); },
/**
* @return {boolean}
*/
username() { return this.getBaseGetter([ "username" ]); },
/** @return {any[]} */
navRoutes() {
Iif (!this.showRoutes) { return []; }
else {
return filter(get(this.$router, [ "options", "routes" ]),
(r) => {
const nav = get(r, "meta.navbar", true);
return (isFunction(nav)) ? nav(this) : nav;
});
}
}
},
watch: {
"$route.name": function() {
/* hide nav if toggler is visible and displayed */
Iif (this.$refs.nav && this.$refs.nav.classList.contains("show") &&
(get(window.getComputedStyle(this.$refs.toggler, null), "display") !== "none")) {
this.$refs.toggler.click();
}
}
},
mounted() {
// @ts-ignore
$('[data-toggle="tooltip"]').tooltip();
this.onKey("ctrl-e-keydown", this.toggleErrors);
this.onKey("ctrl-k-keydown", this.toggleKeyboardShortcuts);
this.onKey("f1-keydown", this.openKeyboardShortcutsModal);
logger.on("error", this.setErrorExist);
},
destroyed() {
logger.removeListener("error", this.setErrorExist);
},
methods: {
setErrorExist() {
this.errorsExist = true;
},
/**
* @param {Event} event
*/
toggleErrors(event) {
if (event) {
event.preventDefault();
}
this.$emit("toggle-errors");
},
/**
* @param {Event} event
*/
openKeyboardShortcutsModal(event) {
if (event) {
event.preventDefault();
}
this.$emit("toggle-keyboard-modal");
},
/**
* @param {Event} event
*/
toggleKeyboardShortcuts(event) {
if (event) {
event.preventDefault();
}
this.commitBase("ui/update", { showKeyHints: !this.showKeyHints });
},
/**
* @param {string} name
*/
hasRoute(name) {
return get(this.$router.resolve(name),
[ "resolved", "matched", "length" ], 0) > 0;
}
}
});
export default component;
|