Add fullscreen triggers for toggles

src/main.ts

@@ -129,6 +129,23 @@ export default class CommanderPlugin extends Plugin {
 			)
 		);
 
+		this.registerDomEvent(document, 'fullscreenchange', () => {
+			if (document.fullscreenElement) {
+				this.settings.toggles.forEach((toggle, index) => {
+					if (toggle.triggerWhenEnteringFullscreen) {
+						this.executeToggle(index);
+					}
+				});
+			}
+			else {
+				this.settings.toggles.forEach((toggle, index) => {
+					if (toggle.triggerWhenExitingFullscreen) {
+						this.executeToggle(index);
+					}
+				});
+			}
+		});
+
 		app.workspace.onLayoutReady(() => {
 			updateHiderStylesheet(this.settings);
 			updateMacroCommands(this);

src/types.ts

@@ -25,6 +25,8 @@ export interface Toggle {
 	icon: string;
 	commands: string[];
 	nextCommandIndex: number;
+	triggerWhenEnteringFullscreen: boolean;
+	triggerWhenExitingFullscreen: boolean;
 }
 
 export interface CommanderSettings {

src/ui/components/ToggleBuilder.tsx

@@ -21,6 +21,8 @@ export default function ({
 	const [name, setName] = useState(toggle.name || "Toggle Name");
 	const [icon, setIcon] = useState(toggle.icon || "star");
 	const [nextCommandIndex] = useState(toggle.nextCommandIndex || 0);
+	const [triggerWhenExitingFullscreen, setTriggerWhenExitingFullscreen] = useState(toggle.triggerWhenExitingFullscreen || false);
+	const [triggerWhenEnteringFullscreen, setTriggerWhenEnteringFullscreen] = useState(toggle.triggerWhenEnteringFullscreen || false);
 	const [commands, setCommands] = useState<string[]>(
 		JSON.parse(JSON.stringify(toggle.commands)) || []
 	);
@@ -56,6 +58,22 @@ export default function ({
 					</button>
 				</div>
 			</div>
+			<div class="setting-item">
+				<div>
+					<label><input 
+						type="checkbox" 
+						checked={triggerWhenEnteringFullscreen}
+						onChange={(e) : void => setTriggerWhenEnteringFullscreen(e.currentTarget.checked)}
+					/> Trigger when entering full screen</label>
+				</div>
+				<div>
+					<label><input 
+						type="checkbox" 
+						checked={triggerWhenExitingFullscreen}
+						onChange={(e) : void => setTriggerWhenExitingFullscreen(e.currentTarget.checked)}
+					/> Trigger when exiting full screen</label>
+				</div>
+			</div>
 
 			{commands.map((item, idx) => {
 				const command = getCommandFromId(item);
@@ -125,7 +143,7 @@ export default function ({
 					disabled={commands.length === 0}
 					onClick={() : void  => {
 						if (commands.length)
-							onSave({ commands: commands, name, icon, nextCommandIndex });
+							onSave({ commands: commands, name, icon, nextCommandIndex, triggerWhenEnteringFullscreen, triggerWhenExitingFullscreen });
 					}}
 				>
 					Save

src/ui/components/ToggleViewer.tsx

@@ -91,7 +91,7 @@ export default function ToggleViewer({
 				<button
 					class="mod-cta"
 					onClick={() : void  =>
-						handleBuilder({ name: "", commands: [], nextCommandIndex: 0, icon: "star" })
+						handleBuilder({ name: "", icon: "star", commands: [], nextCommandIndex: 0, triggerWhenEnteringFullscreen: false, triggerWhenExitingFullscreen: false })
 					}
 				>
 					Add Toggle