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

4.0.0-rc8.6

Browse source 
* Fixed: Update Fine to deal with changes to how the React Root is stored in the DOM.

Behind the Scenes

* Working on the UI for Translation Editing
* Refactor some of the main menu dialog logic into a more generic Dialog class
This commit is contained in:
SirStendec 2018-07-24 16:11:02 -04:00
parent 154a587c87
commit b8f86fe48f
14 changed files with 570 additions and 180 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -8,11 +8,9 @@ import Module from 'utilities/module';
import {createElement} from 'utilities/dom';
import {has, deep_copy} from 'utilities/object';
import {parse_path} from 'src/settings';
import Dialog from 'utilities/dialog';
const EXCLUSIVE_SELECTOR = '.twilight-main,.twilight-minimal-root>div,.twilight-root>.tw-full-height,.clips-root',
MAXIMIZED_SELECTOR = '.twilight-main,.twilight-minimal-root,.twilight-root .dashboard-side-nav+.tw-full-height,.clips-root>.tw-full-height .scrollable-area',
SELECTOR = '.twilight-root>.tw-full-height,.twilight-minimal-root>.tw-full-height,.clips-root>.tw-full-height .scrollable-area';
import {parse_path} from 'src/settings';
function format_term(term) {
return term.replace(/<[^>]*>/g, '').toLocaleLowerCase();
@ -37,10 +35,7 @@ export default class MainMenu extends Module {
this._settings_tree = null;
this._settings_count = 0;
this._menu = null;
this._visible = true;
this._maximized = false;
this.exclusive = false;
this.dialog = new Dialog(() => this.buildDialog());
this.has_update = false;
this.settings.addUI('profiles', {
@ -101,109 +96,43 @@ export default class MainMenu extends Module {
);
}
get maximized() {
return this._maximized;
}
set maximized(val) {
val = Boolean(val);
if ( val === this._maximized )
return;
async onEnable() {
await this.site.awaitElement(Dialog.EXCLUSIVE);
if ( this.enabled )
this.toggleSize();
}
this.dialog.on('hide', this.destroyDialog, this);
this.dialog.on('resize', () => {
if ( this._vue )
this._vue.$children[0].maximized = this.dialog.maximized
});
get visible() {
return this._visible;
}
set visible(val) {
val = Boolean(val);
if ( val === this._visible )
return;
if ( this.enabled )
this.toggleVisible();
}
async onEnable(event) {
await this.site.awaitElement(EXCLUSIVE_SELECTOR);
this.on('site.menu_button:clicked', this.toggleVisible);
if ( this._visible ) {
this._visible = false;
this.toggleVisible(event);
}
this.on('site.menu_button:clicked', this.dialog.toggleVisible, this.dialog);
this.dialog.show();
}
onDisable() {
if ( this._visible ) {
this.toggleVisible();
this._visible = true;
}
this.off('site.menu_button:clicked', this.toggleVisible);
this.dialog.hide();
this.off('site.menu_button:clicked', this.dialog.toggleVisible, this.dialog);
}
getContainer() {
if ( this.exclusive )
return document.querySelector(EXCLUSIVE_SELECTOR);
if ( this._maximized )
return document.querySelector(MAXIMIZED_SELECTOR);
buildDialog() {
if ( this._menu )
return this._menu;
return document.querySelector(SELECTOR);
this._vue = new this.vue.Vue({
el: createElement('div'),
render: h => h('main-menu', this.getData())
});
return this._menu = this._vue.$el;
}
toggleVisible(event) {
if ( event && event.button !== 0 )
return;
destroyDialog() {
if ( this._vue )
this._vue.$destroy();
const maximized = this._maximized,
visible = this._visible = !this._visible,
main = this.getContainer();
if ( ! visible ) {
if ( maximized )
main.classList.remove('ffz-has-menu');
if ( this._menu ) {
this._menu.remove();
this._vue.$destroy();
this._menu = this._vue = null;
}
return;
}
if ( ! this._menu )
this.createMenu();
if ( maximized )
main.classList.add('ffz-has-menu');
main.appendChild(this._menu);
}
toggleSize(event) {
if ( ! this._visible || event && event.button !== 0 )
return;
const maximized = this._maximized = !this._maximized,
main = this.getContainer(),
old_main = this._menu.parentElement;
if ( maximized )
main.classList.add('ffz-has-menu');
else
old_main.classList.remove('ffz-has-menu');
this._menu.remove();
main.appendChild(this._menu);
this._vue.$children[0].maximized = maximized;
this._menu = this._vue = null;
}
@ -588,32 +517,22 @@ export default class MainMenu extends Module {
settings.keys['home'], // settings[0],
nav_keys: settings.keys,
maximized: this._maximized,
resize: e => !this.exclusive && this.toggleSize(e),
close: e => !this.exclusive && this.toggleVisible(e),
maximized: this.dialog.maximized,
exclusive: this.dialog.exclusive,
resize: e => ! this.dialog.exclusive && this.dialog.toggleSize(e),
close: e => ! this.dialog.exclusive && this.dialog.toggleVisible(e),
popout: e => {
if ( this.exclusive )
if ( this.dialog.exclusive )
return;
this.toggleVisible(e);
this.dialog.toggleVisible(e);
if ( ! this.openPopout() )
alert(this.i18n.t('popup.error', 'We tried opening a pop-up window and could not. Make sure to allow pop-ups from Twitch.'));
alert(this.i18n.t('popup.error', 'We tried opening a pop-up window and could not. Make sure to allow pop-ups from Twitch.')); // eslint-disable-line no-alert
},
version: window.FrankerFaceZ.version_info,
exclusive: this.exclusive
version: window.FrankerFaceZ.version_info,
}
}
createMenu() {
if ( this._menu )
return;
this._vue = new this.vue.Vue({
el: createElement('div'),
render: h => h('main-menu', this.getData())
});
this._menu = this._vue.$el;
}
}