dotfiles/gnome/.local/share/gnome-shell/extensions/gjsosk@vishram1123.com/prefs.js

'use strict';

import Adw from 'gi://Adw';
import Gtk from 'gi://Gtk';
import Gdk from 'gi://Gdk';

import { ExtensionPreferences, gettext as _ } from 'resource:///org/gnome/Shell/Extensions/js/extensions/prefs.js';


export default class GjsOskPreferences extends ExtensionPreferences {
	fillPreferencesWindow(window) {
		const UIFolderPath = this.dir.get_child('ui').get_path();

		let iconTheme = Gtk.IconTheme.get_for_display(Gdk.Display.get_default());
		iconTheme.add_search_path(UIFolderPath + `/icons`);
		const settings = this.getSettings('org.gnome.shell.extensions.gjsosk');

		const page1 = new Adw.PreferencesPage({
			title: _("General"),
			icon_name: "general-symbolic"
		});

		const behaviorGroup = new Adw.PreferencesGroup({
			title: _("Behavior")
		});
		page1.add(behaviorGroup);

		const layoutRow = new Adw.ActionRow({
			title: _('Layout')
		});
		behaviorGroup.add(layoutRow);

		let layoutList = ["Full Sized International", "Full Sized US", "Tenkeyless International", "Tenkeyless US", "Compact International", "Compact US", "Split International", "Split US"];
		let layoutDrop = Gtk.DropDown.new_from_strings(layoutList);
		layoutDrop.valign = Gtk.Align.CENTER;
		layoutDrop.selected = settings.get_int("layout");

		layoutRow.add_suffix(layoutDrop);
		layoutRow.activatable_widget = layoutDrop;

		const enableDragRow = new Adw.ActionRow({
			title: _('Enable Dragging')
		});
		behaviorGroup.add(enableDragRow);

		const dragEnableDT = new Gtk.Switch({
			active: settings.get_boolean('enable-drag'),
			valign: Gtk.Align.CENTER,
		});

		enableDragRow.add_suffix(dragEnableDT);
		enableDragRow.activatable_widget = dragEnableDT;

		const indEnabledRow = new Adw.ActionRow({
			title: _('Enable Panel Indicator')
		});
		behaviorGroup.add(indEnabledRow);

		const indEnabled = new Gtk.Switch({
			active: settings.get_boolean("indicator-enabled"),
			valign: Gtk.Align.CENTER,
		});

		indEnabledRow.add_suffix(indEnabled);
		indEnabledRow.activatable_widget = indEnabled;

		const row1t5 = new Adw.ActionRow({
			title: _('Open upon clicking in a text field')
		});
		behaviorGroup.add(row1t5);


		let dragOptList = [_("Never"), _("Only on Touch"), _("Always")];
		let dragOpt = Gtk.DropDown.new_from_strings(dragOptList);
		dragOpt.valign = Gtk.Align.CENTER;
		dragOpt.selected = settings.get_int("enable-tap-gesture");

		row1t5.add_suffix(dragOpt);
		row1t5.activatable_widget = dragOpt;

		const portraitSizing = new Adw.ExpanderRow({
			title: _('Portrait Sizing')
		});
		behaviorGroup.add(portraitSizing);

		let pW = new Adw.ActionRow({
			title: _('Width (%)')
		})
		let pH = new Adw.ActionRow({
			title: _('Height (%)')
		})

		let numChanger_pW = Gtk.SpinButton.new_with_range(0, 100, 5);
		numChanger_pW.value = settings.get_int('portrait-width-percent');
		numChanger_pW.valign = Gtk.Align.CENTER;
		pW.add_suffix(numChanger_pW);
		pW.activatable_widget = numChanger_pW;

		let numChanger_pH = Gtk.SpinButton.new_with_range(0, 100, 5);
		numChanger_pH.value = settings.get_int('portrait-height-percent');
		numChanger_pH.valign = Gtk.Align.CENTER;
		pH.add_suffix(numChanger_pH);
		pH.activatable_widget = numChanger_pH;

		portraitSizing.add_row(pW);
		portraitSizing.add_row(pH);

		const landscapeSizing = new Adw.ExpanderRow({
			title: _('Landscape Sizing')
		});
		behaviorGroup.add(landscapeSizing);

		let lW = new Adw.ActionRow({
			title: _('Width (%)')
		});
		let lH = new Adw.ActionRow({
			title: _('Height (%)')
		});

		let numChanger_lW = Gtk.SpinButton.new_with_range(0, 100, 5);
		numChanger_lW.value = settings.get_int('landscape-width-percent');
		numChanger_lW.valign = Gtk.Align.CENTER;
		lW.add_suffix(numChanger_lW);
		lW.activatable_widget = numChanger_lW;

		let numChanger_lH = Gtk.SpinButton.new_with_range(0, 100, 5);
		numChanger_lH.value = settings.get_int('landscape-height-percent');
		numChanger_lH.valign = Gtk.Align.CENTER;
		lH.add_suffix(numChanger_lH);
		lH.activatable_widget = numChanger_lH;

		landscapeSizing.add_row(lW);
		landscapeSizing.add_row(lH);

		const defaultPosition = new Adw.ActionRow({
			title: _('Default Position')
		});
		behaviorGroup.add(defaultPosition);

		let posList = [
			_("Top Left"), _("Top Center"), _("Top Right"),
			_("Center Left"), _("Center"), _("Center Right"),
			_("Bottom Left"), _("Bottom Center"), _("Bottom Right")
		];
		let snapDrop = Gtk.DropDown.new_from_strings(posList);
		snapDrop.valign = Gtk.Align.CENTER;
		snapDrop.selected = settings.get_int("default-snap");

		defaultPosition.add_suffix(snapDrop);
		defaultPosition.activatable_widget = snapDrop;

		const soundPlayRow = new Adw.ActionRow({
			title: _('Play sound')
		});
		behaviorGroup.add(soundPlayRow);

		const soundPlayDT = new Gtk.Switch({
			active: settings.get_boolean('play-sound'),
			valign: Gtk.Align.CENTER,
		});

		soundPlayRow.add_suffix(soundPlayDT);
		soundPlayRow.activatable_widget = soundPlayDT;

		const appearanceGroup = new Adw.PreferencesGroup({
			title: _("Appearance")
		});
		page1.add(appearanceGroup);

		const colorRow = new Adw.ExpanderRow({
			title: _("Color")
		})
		appearanceGroup.add(colorRow);


		const lightCol = new Adw.ActionRow({
			title: _('Light Mode')
		});
		colorRow.add_row(lightCol)

		let rgba = new Gdk.RGBA();
		rgba.parse("rgba(" + settings.get_double("background-r") + ", " + settings.get_double("background-g") + ", " + settings.get_double("background-b") + ", " + settings.get_double("background-a") + ")");
		let colorButton = new Gtk.ColorButton({
			rgba: rgba,
			use_alpha: true,
			valign: Gtk.Align.CENTER
		});
		lightCol.add_suffix(colorButton);
		lightCol.activatable_widget = colorButton;

		const darkCol = new Adw.ActionRow({
			title: _('Dark Mode')
		});
		colorRow.add_row(darkCol)

		let rgba_d = new Gdk.RGBA();
		rgba_d.parse("rgba(" + settings.get_double("background-r-dark") + ", " + settings.get_double("background-g-dark") + ", " + settings.get_double("background-b-dark") + ", " + settings.get_double("background-a-dark") + ")");
		let colorButton_d = new Gtk.ColorButton({
			rgba: rgba_d,
			use_alpha: true,
			valign: Gtk.Align.CENTER
		});
		darkCol.add_suffix(colorButton_d);
		darkCol.activatable_widget = colorButton_d;

		let fontSize = new Adw.ActionRow({
			title: _('Font Size (px)')
		});
		appearanceGroup.add(fontSize);

		let numChanger_font = Gtk.SpinButton.new_with_range(0, 100, 1);
		numChanger_font.value = settings.get_int('font-size-px');
		numChanger_font.valign = Gtk.Align.CENTER;
		
		fontSize.add_suffix(numChanger_font);
		fontSize.activatable_widget = numChanger_font;

		const fontBoldRow = new Adw.ActionRow({
			title: _("Bold Font")
		})
		appearanceGroup.add(fontBoldRow)

		const fontBoldEnabled = new Gtk.Switch({
			active: settings.get_boolean("font-bold"),
			valign: Gtk.Align.CENTER
		})

		fontBoldRow.add_suffix(fontBoldEnabled)
		fontBoldRow.activatable_widget = fontBoldEnabled

		let borderSpacing = new Adw.ActionRow({
			title: _('Border Spacing (px)')
		});
		appearanceGroup.add(borderSpacing);

		let numChanger_bord = Gtk.SpinButton.new_with_range(0, 10, 1);
		numChanger_bord.value = settings.get_int('border-spacing-px');
		numChanger_bord.valign = Gtk.Align.CENTER;
		borderSpacing.add_suffix(numChanger_bord);
		borderSpacing.activatable_widget = numChanger_bord;

		let snapSpacing = new Adw.ActionRow({
			title: _('Drag snap spacing (px)')
		});
		appearanceGroup.add(snapSpacing);

		let numChanger_snap = Gtk.SpinButton.new_with_range(0, 50, 5);
		numChanger_snap.value = settings.get_int('snap-spacing-px');
		numChanger_snap.valign = Gtk.Align.CENTER;
		snapSpacing.add_suffix(numChanger_snap);
		snapSpacing.activatable_widget = numChanger_snap;

		const roundCorners = new Adw.ActionRow({
			title: _('Round Corners')
		});
		appearanceGroup.add(roundCorners);

		const roundKeyCDT = new Gtk.Switch({
			active: settings.get_boolean('round-key-corners'),
			valign: Gtk.Align.CENTER,
		});

		roundCorners.add_suffix(roundKeyCDT);
		roundCorners.activatable_widget = roundKeyCDT;

		const showIcon = new Adw.ActionRow({
			title: _('Show Special Key Icons')
		});
		appearanceGroup.add(showIcon);

		const showIconDT = new Gtk.Switch({
			active: settings.get_boolean('show-icons'),
			valign: Gtk.Align.CENTER,
		});

		showIcon.add_suffix(showIconDT);
		showIcon.activatable_widget = showIconDT;

		window.add(page1);

		let page2 = new Adw.PreferencesPage({
			title: _("About"),
			icon_name: 'info-symbolic',
		});

		let contribute_icon_pref_group = new Adw.PreferencesGroup();
		let icon_box = new Gtk.Box({
			orientation: Gtk.Orientation.VERTICAL,
			margin_top: 24,
			margin_bottom: 24,
			spacing: 18,
		});

		let icon_image = new Gtk.Image({
			icon_name: "input-keyboard-symbolic",
			pixel_size: 128,
		});

		let label_box = new Gtk.Box({
			orientation: Gtk.Orientation.VERTICAL,
			spacing: 6,
		});

		let label = new Gtk.Label({
			label: "GJS OSK",
			wrap: true,
		});
		let context = label.get_style_context();
		context.add_class("title-1");

		let another_label = new Gtk.Label({
			label: _("Autorelease ") + `fab8e97`
		});

		let links_pref_group = new Adw.PreferencesGroup();
		let code_row = new Adw.ActionRow({
			icon_name: "code-symbolic",
			title: _("More Information, submit feedback, and get help")
		});
		let github_link = new Gtk.LinkButton({
			label: "Github",
			uri: "https://github.com/Vishram1123/gjs-osk",
		});

		let icons_credit = new Adw.ActionRow({
			icon_name: "app-icon-design-symbolic",
			title: _("Icons sourced from")
		});
		let remixicon_link = new Gtk.LinkButton({
			label: "RemixIcon",
			uri: "https://remixicon.com/",
		});

		code_row.add_suffix(github_link);
		code_row.set_activatable_widget(github_link);
		links_pref_group.add(code_row);
		icons_credit.add_suffix(remixicon_link);
		icons_credit.set_activatable_widget(remixicon_link);
		links_pref_group.add(icons_credit);

		label_box.append(label);
		label_box.append(another_label);
		icon_box.append(icon_image);
		icon_box.append(label_box);
		contribute_icon_pref_group.add(icon_box);

		page2.add(contribute_icon_pref_group);
		page2.add(links_pref_group);

		window.add(page2);
		
		settings.bind("layout", layoutDrop, "selected", 0);
		settings.bind("enable-drag", dragEnableDT, "active", 0);
		settings.bind("enable-tap-gesture", dragOpt, "selected", 0);
		settings.bind("indicator-enabled", indEnabled, "active", 0);
		settings.bind("portrait-width-percent", numChanger_pW, "value", 0);
		settings.bind("portrait-height-percent", numChanger_pH, "value", 0);
		settings.bind("landscape-width-percent", numChanger_lW, "value", 0);
		settings.bind("landscape-height-percent", numChanger_lH, "value", 0);
		colorButton.connect("color-set", () => {
			settings.set_double("background-r", Math.round(colorButton.get_rgba().red * 255));
			settings.set_double("background-g", Math.round(colorButton.get_rgba().green * 255));
			settings.set_double("background-b", Math.round(colorButton.get_rgba().blue * 255));
			settings.set_double("background-a", colorButton.get_rgba().alpha);
		})
		colorButton_d.connect("color-set", () => {
			settings.set_double("background-r-dark", Math.round(colorButton_d.get_rgba().red * 255));
			settings.set_double("background-g-dark", Math.round(colorButton_d.get_rgba().green * 255));
			settings.set_double("background-b-dark", Math.round(colorButton_d.get_rgba().blue * 255));
			settings.set_double("background-a-dark", colorButton_d.get_rgba().alpha);
		})
		settings.bind("font-size-px", numChanger_font, "value", 0);
		settings.bind("font-bold", fontBoldEnabled, "active", 0)
		settings.bind("border-spacing-px", numChanger_bord, "value", 0);
		settings.bind("snap-spacing-px", numChanger_snap, "value", 0)
		settings.bind("round-key-corners", roundKeyCDT, "active", 0);
		settings.bind("play-sound", soundPlayDT, "active", 0);
		settings.bind("show-icons", showIconDT, "active", 0)
		settings.bind("default-snap", snapDrop, "selected", 0);

		window.connect("close-request", () => {
			settings.set_int("layout", layoutDrop.selected);
			settings.set_boolean("enable-drag", dragEnableDT.active);
			settings.set_int("enable-tap-gesture", dragOpt.selected);
			settings.set_boolean("indicator-enabled", indEnabled.active);
			settings.set_int("portrait-width-percent", numChanger_pW.value);
			settings.set_int("portrait-height-percent", numChanger_pH.value);
			settings.set_int("landscape-width-percent", numChanger_lW.value);
			settings.set_int("landscape-height-percent", numChanger_lH.value);
			settings.set_double("background-r", Math.round(colorButton.get_rgba().red * 255));
			settings.set_double("background-g", Math.round(colorButton.get_rgba().green * 255));
			settings.set_double("background-b", Math.round(colorButton.get_rgba().blue * 255));
			settings.set_double("background-a", colorButton.get_rgba().alpha);
			settings.set_double("background-r-dark", Math.round(colorButton_d.get_rgba().red * 255));
			settings.set_double("background-g-dark", Math.round(colorButton_d.get_rgba().green * 255));
			settings.set_double("background-b-dark", Math.round(colorButton_d.get_rgba().blue * 255));
			settings.set_double("background-a-dark", colorButton_d.get_rgba().alpha);
			settings.set_int("font-size-px", numChanger_font.value);
			settings.set_boolean("font-bold", fontBoldEnabled.active)
			settings.set_int("border-spacing-px", numChanger_bord.value);
			settings.set_int("snap-spacing-px", numChanger_snap.value)
			settings.set_boolean("round-key-corners", roundKeyCDT.active);
			settings.set_boolean("play-sound", soundPlayDT.active);
			settings.set_boolean("show-icons", showIconDT.active)
			settings.set_int("default-snap", snapDrop.selected);
		})
	}
};