oss/FrankerFaceZ
oss/FrankerFaceZ
1
0
Fork 0
mirror of https://github.com/FrankerFaceZ/FrankerFaceZ.git synced 2025-07-29 14:08:31 +00:00
Code Wiki Activity

Fix the navigation bar updating hiding the FFZ menu button as well as the main menu not appearing on some pages.

Browse source
This commit is contained in:
SirStendec 2018-04-19 16:38:21 -04:00
parent 547f50312e
commit 37237c47a6
2 changed files with 65 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/modules/main_menu/index.js
View file

@ -10,8 +10,8 @@ import {has, deep_copy} from 'utilities/object';
import {parse_path} from 'src/settings';
const EXCLUSIVE_SELECTOR = '.twilight-main,.twilight-minimal-root>div',
MAXIMIZED_SELECTOR = '.twilight-main,.twilight-minimal-root',
const EXCLUSIVE_SELECTOR = '.twilight-main,.twilight-minimal-root>div,.twilight-root>.tw-full-height',
MAXIMIZED_SELECTOR = '.twilight-main,.twilight-minimal-root,.twilight-root .dashboard-side-nav+.tw-full-height',
SELECTOR = '.twilight-root>.tw-full-height,.twilight-minimal-root>.tw-full-height';
function format_term(term) {

110
src/sites/twitch-twilight/modules/menu_button.jsx
View file

@ -12,13 +12,15 @@ export default class MenuButton extends SiteModule {
super(...args);
this.inject('i18n');
this.inject('site.fine');
this.should_enable = true;
this._pill_content = null;
this._pill_content = '';
this._pill = null;
this._tip = null;
this._el = null;
this.NavBar = this.fine.define(
'nav-bar',
n => n.renderOnsiteNotifications && n.renderTwitchPrimeCrown
);
}
@ -28,75 +30,85 @@ export default class MenuButton extends SiteModule {
set pill(val) {
this._pill_content = val;
this.updatePill();
this.update();
}
formatPill() {
const val = this._pill_content;
if ( typeof val === 'number' )
return val.toLocaleString(this.i18n.locale);
return this.i18n.formatNumber(val);
return val;
}
updatePill() {
if ( ! this._pill )
return;
const content = this.formatPill();
this._pill.innerHTML = '';
if ( content )
setChildren(this._pill, (<div class="tw-animation tw-animation--animate tw-animation--duration-medium tw-animation--timing-ease-in tw-animation--bounce-in">
<div class="tw-pill tw-pill--notification">
{content}
</div>
</div>));
update() {
for(const inst of this.NavBar.instances)
this.updateButton(inst);
}
async onEnable() {
const site = this.site,
container = await site.awaitElement('.top-nav__menu'),
user_menu = container.querySelector('.top-nav__nav-items-container:last-child');
onEnable() {
this.NavBar.ready(() => this.update());
this.NavBar.on('mount', this.updateButton, this);
this.NavBar.on('update', this.updateButton, this);
this._el = (<div class="ffz-top-nav tw-align-self-center tw-flex-grow-0 tw-flex-shrink-0 tw-flex-nowrap tw-pd-r-1 tw-pd-l-05">
{this._btn = (<button
this.once(':clicked', this.loadMenu);
this.on('i18n:update', this.update);
}
updateButton(inst) {
const root = this.fine.getChildNode(inst),
container = root && root.querySelector('.top-nav__menu');
if ( ! container )
return;
let btn, el = container.querySelector('.ffz-top-nav');
if ( el )
el.remove();
const pill = this.formatPill();
el = (<div class="ffz-top-nav tw-align-self-center tw-flex-grow-0 tw-flex-shrink-0 tw-flex-nowrap tw-pd-r-1 tw-pd-l-05">
{btn = (<button
class="tw-button-icon tw-button-icon--overlay tw-button-icon--large"
onClick={e => this.emit(':clicked', e)} //eslint-disable-line react/jsx-no-bind
onClick={e => this.emit(':clicked', e, btn)} //eslint-disable-line react/jsx-no-bind
>
<div class="tw-tooltip-wrapper">
<span class="tw-button-icon__icon">
<figure class="ffz-i-zreknarf" />
</span>
{this._pill = (<div class="ffz-menu__pill tw-absolute" />)}
{this._tip = (<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-center" />)}
{pill && (<div class="ffz-menu__pill tw-absolute">
<div class="tw-animation tw-animation--animate tw-animation--duration-medium tw-animation--timing-ease-in tw-animation--bounce-in">
<div class="tw-pill tw-pill--notification">
{pill}
</div>
</div>
</div>)}
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-center">
{this.i18n.t('site.menu_button', 'FrankerFaceZ Control Center')}
</div>
</div>
</button>)}
</div>);
this.updatePill();
this.onTranslate();
container.insertBefore(this._el, user_menu);
this.once(':clicked', this.loadMenu);
this.on('i18n:update', this.onTranslate);
const user_menu = container.querySelector('.top-nav__nav-items-container:last-child');
if ( user_menu )
container.insertBefore(el, user_menu);
else
container.insertBefore(el, container.firstElementChild);
}
onTranslate() {
if ( this._tip )
this._tip.textContent = this.i18n.t('site.menu_button', 'FrankerFaceZ Control Center');
if ( this._pill )
this._pill.innerHTML = this.formatPill();
}
loadMenu(event) {
const cl = this._btn.classList;
loadMenu(event, btn) {
const cl = btn && btn.classList;
if ( cl )
cl.add('loading');
this.resolve('main_menu').enable(event).then(() => {
if ( cl )
cl.remove('loading');
}).catch(err => {
@ -106,17 +118,15 @@ export default class MenuButton extends SiteModule {
this.log.error('Error enabling main menu.', err);
alert('There was an error displaying the menu.'); // eslint-disable-line no-alert
if ( cl )
cl.remove('loading');
this.once(':clicked', this.loadMenu);
})
}
onDisable() {
this.off('i18n:update', this.onTranslate);
if ( this._el )
this._el.remove();
this._pill = this._tip = this._el = null;
this.off('i18n:update', this.update);
this.off(':clicked', this.loadMenu);
}
}