diff --git a/src/modules/main_menu/index.js b/src/modules/main_menu/index.js
index 1d2b61c3..73da6b2a 100644
--- a/src/modules/main_menu/index.js
+++ b/src/modules/main_menu/index.js
@@ -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) {
diff --git a/src/sites/twitch-twilight/modules/menu_button.jsx b/src/sites/twitch-twilight/modules/menu_button.jsx
index 9f6c774f..c7bc762b 100644
--- a/src/sites/twitch-twilight/modules/menu_button.jsx
+++ b/src/sites/twitch-twilight/modules/menu_button.jsx
@@ -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,76 +30,86 @@ 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, (
));
+ 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 = (
- {this._btn = (
);
- 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;
- cl.add('loading');
+ loadMenu(event, btn) {
+ const cl = btn && btn.classList;
+ if ( cl )
+ cl.add('loading');
this.resolve('main_menu').enable(event).then(() => {
- cl.remove('loading');
+ if ( cl )
+ cl.remove('loading');
}).catch(err => {
this.log.capture(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
- cl.remove('loading');
+ 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);
}
}
\ No newline at end of file