From ccafcd5285df6cfe62f3cca4f2aa6f0dc519ea03 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Sun, 11 Nov 2018 02:25:47 +0100
Subject: [PATCH] Components for popup UI

---
 js/lib/libghettoui/BaseUi.js                 | 29 +++++++++++++++++++
 js/lib/libghettoui/buttons/Button.js         | 11 +++++++
 js/lib/libghettoui/buttons/ShortcutButton.js | 10 +++++++
 js/lib/libghettoui/popup/MenuItem.js         | 30 ++++++++++++++++++++
 4 files changed, 80 insertions(+)
 create mode 100644 js/lib/libghettoui/BaseUi.js
 create mode 100644 js/lib/libghettoui/buttons/Button.js
 create mode 100644 js/lib/libghettoui/buttons/ShortcutButton.js
 create mode 100644 js/lib/libghettoui/popup/MenuItem.js

diff --git a/js/lib/libghettoui/BaseUi.js b/js/lib/libghettoui/BaseUi.js
new file mode 100644
index 0000000..9550f65
--- /dev/null
+++ b/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);
+  }
+}
\ No newline at end of file
diff --git a/js/lib/libghettoui/buttons/Button.js b/js/lib/libghettoui/buttons/Button.js
new file mode 100644
index 0000000..ab5f213
--- /dev/null
+++ b/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');
+  }
+}
\ No newline at end of file
diff --git a/js/lib/libghettoui/buttons/ShortcutButton.js b/js/lib/libghettoui/buttons/ShortcutButton.js
new file mode 100644
index 0000000..d238f16
--- /dev/null
+++ b/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
+    );
+  }
+}
\ No newline at end of file
diff --git a/js/lib/libghettoui/popup/MenuItem.js b/js/lib/libghettoui/popup/MenuItem.js
new file mode 100644
index 0000000..c0b4e99
--- /dev/null
+++ b/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');
+  }
+}
\ No newline at end of file