Exclusive settings mode / pop-out (#399)

- In exclusive mode, the settings menu isn't minimizable or closable
- It automatically opens in said mode when it finds `?ffz-settings` in the URL
- When in pop-out chat, the FrankerFaceZ Control Center link will open a new window with exclusive settings mode.

src/modules/main_menu/components/main-menu.vue

@@ -1,5 +1,5 @@
 <template lang="html">
-<div class="ffz-main-menu tw-elevation-3 tw-c-background-alt tw-border tw-flex tw-flex-nowrap tw-flex-column" :class="{ maximized }">
+<div class="ffz-main-menu tw-elevation-3 tw-c-background-alt tw-border tw-flex tw-flex-nowrap tw-flex-column" :class="{ maximized: maximized || exclusive, exclusive }">
 	<header class="tw-c-background tw-full-width tw-align-items-center tw-flex tw-flex-nowrap" @dblclick="resize">
 		<h3 class="ffz-i-zreknarf ffz-i-pd-1">FrankerFaceZ</h3>
 		<div class="tw-flex-grow-1 tw-pd-x-2">
@@ -15,12 +15,12 @@
 				</div>
 			</div-->
 		</div>
-		<button class="tw-button-icon tw-mg-x-05" @click="resize">
+		<button class="tw-button-icon tw-mg-x-05" @click="resize" v-if="!exclusive">
 			<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 tw-mg-x-05" @click="close">
+		<button class="tw-button-icon tw-mg-x-05" @click="close" v-if="!exclusive">
 			<span class="tw-button-icon__icon">
 				<figure class="ffz-i-window-close" />
 			</span>

src/modules/main_menu/index.js

@@ -32,6 +32,7 @@ export default class MainMenu extends Module {
 		this._menu = null;
 		this._visible = true;
 		this._maximized = false;
+		this.exclusive = false;
 
 
 		this.settings.addUI('profiles', {
@@ -529,9 +530,11 @@ export default class MainMenu extends Module {
 			nav_keys: settings.keys,
 
 			maximized: this._maximized,
-			resize: e => this.toggleSize(e),
-			close: e => this.toggleVisible(e),
-			version: window.FrankerFaceZ.version_info
+			resize: e => !this.exclusive && this.toggleSize(e),
+			close: e => !this.exclusive && this.toggleVisible(e),
+			version: window.FrankerFaceZ.version_info,
+
+			exclusive: this.exclusive
 		}
 	}
 

src/sites/twitch-twilight/index.js

@@ -61,6 +61,15 @@ export default class Twilight extends BaseSite {
 			rel: 'stylesheet',
 			type: 'text/css'
 		}));
+
+		// Check for ?ffz-settings in page and open the
+		// settings window in exclusive mode.
+		const params = new URL(window.location).searchParams;
+		if (params && params.has('ffz-settings')) {
+			const main_menu = this.resolve('main_menu');
+			main_menu.exclusive = true;
+			main_menu.enable();
+		}
 	}
 
 	updateContext() {

src/sites/twitch-twilight/modules/chat/settings_menu.js

@@ -56,7 +56,18 @@ export default class SettingsMenu extends Module {
 	}
 
 	click(inst) {
+		// Pop-out chat check
+		const twMinimalRoot = document.querySelector('.twilight-minimal-root');
+		if (twMinimalRoot) {
+			const win = window.open(
+				'https://twitch.tv/frankerfacez?ffz-settings',
+				'_blank',
+				'resizable=yes,scrollbars=yes,width=800,height=600'
+			);
+			win.focus();
+		} else {
 			this.emit('site.menu_button:clicked');
+		}
 		const parent = this.fine.searchParent(inst, n => n.toggleBalloonId);
 		parent && parent.handleButtonClick();
 	}

src/sites/twitch-twilight/styles/main_menu.scss

@@ -35,6 +35,10 @@
 		}
 	}
 
+	&.exclusive {
+		z-index: 1000;
+	}
+
 	.want-ps {
 		overflow-y: auto;
 	}