lightdm-webkit2-greeter/themes/gruvbox/js/layouts.js

class Layouts {
	constructor() {
		this._layoutList = document.querySelector("#layouts-list")
		this._dropdown = document.querySelector("#layouts-dropdown")
		this._button = document.querySelector("#layouts-button")
		this._layouts = []

		this.layout = {}

		this._init()
	}

	_setDefault() {
		let name = this.layout.name
		let description = this.layout.description
		let short = this.layout.short_description
		this._button.innerHTML = name.toUpperCase() + (short ? ` (${short})` : "")
		//this._button.name = description
	}

	_setLayoutList() {
		let dropdown = this._dropdown
		dropdown.innerHTML = ""
		for (let i = 0; i < this._layouts.length; i++) {
			let name = this._layouts[i].name
			let description = this._layouts[i].description
			let short = this._layouts[i].short_description
			let li = document.createElement("li")
			let button = document.createElement("button")
			button.innerHTML = name + (short ? ` (${short})` : "")
			button.name = description
			button.addEventListener("click", () => {
				this.layout = this._layouts[i]
				this._setDefault()
				lightdm.layout = this.layout
			})
			li.appendChild(button)
			dropdown.appendChild(li)
		}
	}

	_setKeydown() {
		let dropdown = this._dropdown
		dropdown.addEventListener("keydown", (ev) => {
			if (ev.keyCode == 27) {
				dropdown.classList.add("hide")
				this._button.focus()
			}
		})
	}

	_setButton() {
		let dropdown = this._dropdown
		document.querySelector("#screen").addEventListener("click", (ev) => {
			if (ev.target == this._button || ev.target.parentElement == this._button) {
				dropdown.classList.toggle("hide")
			} else
			if (ev.target != dropdown && ev.target.closest(".dropdown") == null) {
				dropdown.classList.add("hide")
			}
		})
		document.querySelector("#screen").addEventListener("focusin", (ev) => {
			if (!dropdown.contains(document.activeElement) && document.activeElement != this._button) {
				dropdown.classList.add("hide")
			}
		})
	}

	_init() {
		this.layout = lightdm.layout
		this._layouts = greeter_config.layouts
		this._setDefault()
		this._setLayoutList()
		this._setButton()
		this._setKeydown()
	}
}