Add layout buttons to switch

extension.js

@@ -14,8 +14,10 @@ class Extension {
 		this._settings = ExtensionUtils.getSettings("org.gnome.shell.extensions.fairy");
 
 		this._renderer = new Renderer.Renderer(this._state, this._settings);
-		this._indicator = new Indicator.Indicator(this._state, this._renderer);
-		this._keybinds = new Keybinds.KeyboardManager(this._state, this._renderer, this._indicator);
+		this._keybinds = new Keybinds.KeyboardManager();
+		this._indicator = new Indicator.Indicator(this._state, this._renderer, this._keybinds);
+
+		this._keybinds.endInit(this);
 	}
 
 	enable() {

sources/indicator.js

@@ -8,16 +8,19 @@ const Main = imports.ui.main;
 const Meta = imports.gi.Meta;
 const Shell = imports.gi.Shell;
 const PanelMenu = imports.ui.panelMenu;
+const PopupMenu = imports.ui.popupMenu;
+const Clutter = imports.gi.Clutter;
 
 const ExtensionUtils = imports.misc.extensionUtils;
 const Me = ExtensionUtils.getCurrentExtension();
 
 var Indicator = GObject.registerClass(
 	class Indicator extends GObject.Object {
-		_init(state, renderer) {
+		_init(state, renderer, keybinds) {
 			super._init();
 			this._state = state;
 			this._renderer = renderer;
+			this._keybinds = keybinds;
 
 			this._layoutIcons = {
 				tiling: Gio.icon_new_for_string(`${Me.path}/icons/tiling.svg`),
@@ -27,6 +30,12 @@ var Indicator = GObject.registerClass(
 			};
 		}
 
+		_createSelectableItem(title, cb) {
+			const menuItem = new PopupMenu.PopupMenuItem(title, {});
+			menuItem.connect("activate", cb);
+			return menuItem;
+		}
+
 		enable() {
 			this.settings = ExtensionUtils.getSettings(
 				"org.gnome.shell.extensions.fairy"
@@ -40,6 +49,26 @@ var Indicator = GObject.registerClass(
 			});
 			this._layoutIndicator.add_child(this._icon);
 
+			const mon = global.display.get_primary_monitor();
+			this._layoutPanelItems = {
+				tiling: this._createSelectableItem("Tiling", () =>
+					this._keybinds.switchLayout("tiling")
+				),
+				monocle: this._createSelectableItem("Monocle", () =>
+					this._keybinds.switchLayout("monocle")
+				),
+				floating: this._createSelectableItem("Floating", () =>
+					this._keybinds.switchLayout("floating")
+				),
+				deck: this._createSelectableItem("Deck", () =>
+					this._keybinds.switchLayout("deck")
+				),
+			};
+			this._layoutIndicator.menu.addMenuItem(this._layoutPanelItems.tiling);
+			this._layoutIndicator.menu.addMenuItem(this._layoutPanelItems.monocle);
+			this._layoutIndicator.menu.addMenuItem(this._layoutPanelItems.floating);
+			this._layoutIndicator.menu.addMenuItem(this._layoutPanelItems.deck);
+
 			this.settings.bind(
 				"show-layout",
 				this._layoutIndicator,
@@ -47,11 +76,14 @@ var Indicator = GObject.registerClass(
 				Gio.SettingsBindFlags.DEFAULT
 			);
 			Main.panel.addToStatusArea(indicatorName, this._layoutIndicator);
+
+			this.update();
 		}
 
 		disable() {
 			this._layoutIndicator.destroy();
 			this._layoutIndicator = null;
+			this._icon.destroy();
 			this._icon = null;
 
 			this.settings = null;
@@ -59,7 +91,15 @@ var Indicator = GObject.registerClass(
 
 		update() {
 			const primaryMon = global.display.get_primary_monitor();
-			this._icon.gicon = this._layoutIcons[this._state.monitors[primaryMon].layout];
+			const layout = this._state.monitors[primaryMon].layout;
+			log(layout);
+			this._icon.gicon = this._layoutIcons[layout];
+
+			for (const [key, value] of Object.entries(this._layoutPanelItems)) {
+				value.setOrnament(
+					key === layout ? PopupMenu.Ornament.DOT : PopupMenu.Ornament.NONE
+				);
+			}
 		}
 	}
 );

sources/keybinds.js

@@ -8,11 +8,14 @@ const ExtensionUtils = imports.misc.extensionUtils;
 
 var KeyboardManager = GObject.registerClass(
 	class KeyboardManager extends GObject.Object {
-		_init(state, renderer, indicator) {
+		_init(ext) {
 			super._init();
-			this._state = state;
-			this._renderer = renderer;
-			this._indicator = indicator;
+		}
+
+		endInit(ext) {
+			this._state = ext._state;
+			this._renderer = ext._renderer;
+			this._indicator = ext._indicator;
 		}
 
 		/**
@@ -41,14 +44,14 @@ var KeyboardManager = GObject.registerClass(
 		}
 
 		enable() {
-			this._addBinding("set-layout-tiling", () => this._switchLayout("tiling"));
+			this._addBinding("set-layout-tiling", () => this.switchLayout("tiling"));
 			this._addBinding("set-layout-monocle", () =>
-				this._switchLayout("monocle")
+				this.switchLayout("monocle")
 			);
 			this._addBinding("set-layout-floating", () =>
-				this._switchLayout("floating")
+				this.switchLayout("floating")
 			);
-			this._addBinding("set-layout-deck", () => this._switchLayout("deck"));
+			this._addBinding("set-layout-deck", () => this.switchLayout("deck"));
 
 			this._addBinding("cycle-prev", () => {
 				const mon = global.display.get_current_monitor();
@@ -190,7 +193,7 @@ var KeyboardManager = GObject.registerClass(
 			this._removeBinding("moveto-tag-all");
 		}
 
-		_switchLayout(mode) {
+		switchLayout(mode) {
 			const mon = global.display.get_current_monitor();
 			const state = this._state.monitors[mon];
 			const currentLayout = state.layout;