oss/FrankerFaceZ
oss/FrankerFaceZ
1
0
Fork 0
mirror of https://github.com/FrankerFaceZ/FrankerFaceZ.git synced 2025-07-07 11:38:32 +00:00
Code Wiki Activity

4.0.0 Beta 1

Browse source
This commit is contained in:
SirStendec 2017-11-13 01:23:39 -05:00
parent c2688646af
commit 262757a20d
187 changed files with 22878 additions and 38882 deletions
Download patch file Download diff file Expand all files Collapse all files

180
src/modules/main_menu/components/main-menu.vue Normal file
View file

@ -0,0 +1,180 @@
<template lang="html">
<div class="ffz-main-menu elevation-3 c-background-alt border flex flex--nowrap flex-column" :class="{ maximized }">
<header class="c-background pd-1 pd-l-2 full-width align-items-center flex flex-nowrap" @dblclick="resize">
<h3 class="ffz-i-zreknarf ffz-i-pd-1">FrankerFaceZ</h3>
<div class="flex-grow-1 pd-x-2">
<!--div class="tw-search-input">
<label for="ffz-main-menu.search" class="hide-accessible">{{ t('main-menu.search', 'Search Settings') }}</label>
<div class="relative">
<div class="tw-input__icon-group">
<div class="tw-input__icon">
<figure class="ffz-i-search" />
</div>
</div>
<input type="search" class="tw-input tw-input--icon-left" :placeholder="t('main-menu.search', 'Search Settings')" autocapitalize="off" autocorrect="off" autocomplete="off" id="ffz-main-menu.search">
</div>
</div-->
</div>
<button class="tw-button-icon mg-x-05" @click="resize">
<span class="tw-button-icon__icon">
<figure :class="{'ffz-i-window-maximize': !maximized, 'ffz-i-window-restore': maximized}" />
</span>
</button>
<button class="tw-button-icon mg-x-05" @click="close">
<span class="tw-button-icon__icon">
<figure class="ffz-i-window-close" />
</span>
</button>
</header>
<section class="border-t full-height full-width flex flex--nowrap">
<nav class="ffz-vertical-nav c-background-alt-2 border-r full-height flex flex-column flex-shrink-0 flex-nowrap">
<header class="border-b pd-1">
<profile-selector
:context="context"
@navigate="navigate"
/>
</header>
<div class="full-width full-height overflow-hidden flex flex-nowrap relative">
<div class="ffz-vertical-nav__items full-width flex-grow-1 scrollable-area" data-simplebar>
<div class="simplebar-scroll-content">
<div class="simplebar-content">
<menu-tree
:currentItem="currentItem"
:modal="nav"
@change-item="changeItem"
@navigate="navigate"
/>
</div>
</div>
</div>
</div>
<footer class="c-text-alt border-t pd-1">
<div>
{{ t('main-menu.version', 'Version %{version}', {version: version.toString()}) }}
</div>
<div class="c-text-alt-2">
{{version.build}}
</div>
</footer>
</nav>
<main class="flex-grow-1 scrollable-area" data-simplebar>
<div class="simplebar-scroll-content">
<div class="simplebar-content">
<menu-page
ref="page"
:context="context"
:item="currentItem"
@change-item="changeItem"
@navigate="navigate"
v-if="currentItem"
/>
</div>
</div>
</main>
</section>
</div>
</template>
<script>
import displace from 'displacejs';
export default {
data() {
return this.$vnode.data;
},
created() {
this.context.context._add_user();
},
destroyed() {
this.context.context._remove_user();
},
methods: {
changeProfile() {
const new_id = this.$refs.profiles.value,
new_profile = this.context.profiles[new_id];
if ( new_profile )
this.context.currentProfile = new_profile;
},
changeItem(item) {
if ( this.$refs.page && this.$refs.page.onBeforeChange ) {
if ( this.$refs.page.onBeforeChange(this.currentItem, item) === false )
return;
}
this.currentItem = item;
let current = item;
while(current = current.parent)
current.expanded = true;
},
updateDrag() {
if ( this.maximized )
this.destroyDrag();
else
this.createDrag();
},
destroyDrag() {
if ( this.displace ) {
this.displace.destroy();
this.displace = null;
}
},
createDrag() {
this.$nextTick(() => {
if ( ! this.maximized )
this.displace = displace(this.$el, {
handle: this.$el.querySelector('header'),
highlightInputs: true,
constrain: true
});
})
},
handleResize() {
if ( this.displace )
this.displace.reinit();
},
navigate(key) {
let item = this.nav_keys[key];
while(item && item.page)
item = item.parent;
if ( ! item )
return;
this.changeItem(item);
}
},
watch: {
maximized() {
this.updateDrag();
}
},
mounted() {
this.updateDrag();
this._on_resize = this.handleResize.bind(this);
window.addEventListener('resize', this._on_resize);
},
beforeDestroy() {
this.destroyDrag();
if ( this._on_resize ) {
window.removeEventListener('resize', this._on_resize);
this._on_resize = null;
}
}
}
</script>