Components for popup UI

js/lib/libghettoui/BaseUi.js

@@ -0,0 +1,29 @@
+class BaseUi {
+  constructor(id, label, onClick, additionalClasses) {
+    this.element = document.createElement('div');
+    this.element.setAttribute('id', id);
+    if (additionalClasses) {
+      this.element.classList.add(...additionalClasses);
+    }
+    if (onClick) {
+      this.element.addEventListener('click', onClick);
+    }
+    this.element.innerHTML = label;
+  }
+
+  disable() {
+    this.element.classList.add('disabled');
+  }
+  enable() {
+    this.element.classList.remove('disabled');
+  }
+  hide() {
+    this.element.classList.add('hidden');
+  }
+  show() {
+    this.element.classList.remove('hidden');
+  }
+  appendTo(element) {
+    element.appendChild(this.element);
+  }
+}

js/lib/libghettoui/buttons/Button.js

@@ -0,0 +1,11 @@
+class ShortcutButton extends BaseUi {
+  constructor(id, label, onClick, additionalClasses) {
+    super(
+      id,
+      label,
+      onClick,
+      additionalClasses
+    );
+    this.element.classList.add('button');
+  }
+}

js/lib/libghettoui/buttons/ShortcutButton.js

@@ -0,0 +1,10 @@
+class ShortcutButton extends Button {
+  constructor(id, label, shortcutLabel, onClick, additionalClasses) {
+    super(
+      id,
+      `${label}<br/><span class="smallcaps small darker">(${shortcutLabel})`,
+      onClick,
+      additionalClasses
+    );
+  }
+}

js/lib/libghettoui/popup/MenuItem.js

@@ -0,0 +1,30 @@
+class MenuItem extends BaseUi {
+  constructor(id, label, sublabel, onClick, additionalClasses) {
+    super(
+      id, 
+      `${label}<span class="menu-item-inline-desc"><br/>${sublabel}</span>`,
+      onClick,
+      additionalClasses
+    );
+    this.element.classList.add('menu-item');
+    this.element.subitemList = document.createElement('div');
+  }
+
+  insertSubitem(subitemElement) {
+    this.element.subitemList.appendChild(subitemElement);
+  }
+
+  removeSubitems() {
+    while (this.element.subitemList.firstChild) {
+      this.element.subitemList.removeChild(this.element.subitemList.firstChild);
+    }
+  }
+
+  showSubitems() {
+    this.element.subitemList.classList.remove('hidden');
+  }
+
+  hideSubitems() {
+    this.element.subitemList.classList.add('hidden');
+  }
+}