add hint element wrapper

2 files changed, 45 insertions, 0 deletions

diff --git a/src/content/hint.css b/src/content/hint.css
new file mode 100644
index 0000000..a0f1233
--- /dev/null
+++ b/src/content/hint.css
@@ -0,0 +1,7 @@
+.vimvixen-hint {
+  background-color: yellow;
+  border: 1px solid gold;
+  font-weight: bold;
+  position: absolute;
+  text-transform: uppercase;
+}
diff --git a/src/content/hint.js b/src/content/hint.js
new file mode 100644
index 0000000..7979cf1
--- /dev/null
+++ b/src/content/hint.js
@@ -0,0 +1,38 @@
+import './hint.css';
+
+export default class Hint {
+  constructor(target, tag) {
+    this.target = target;
+
+    let doc = target.ownerDocument
+    let { top, left } = target.getBoundingClientRect();
+
+    this.element = doc.createElement('span');
+    this.element.className = 'vimvixen-hint';
+    this.element.textContent = tag;
+    this.element.style.top = top + 'px';
+    this.element.style.left = left + 'px';
+
+    this.show();
+    doc.body.append(this.element);
+  }
+
+  show() {
+    this.element.style.display = 'inline';
+  }
+
+  hide() {
+    this.element.style.display = 'none';
+  }
+
+  remove() {
+    this.element.remove();
+  }
+
+  activate() {
+    if (this.target.tagName.toLowerCase() === 'a') {
+      let href = this.target.href;
+      window.location.href = href;
+    }
+  }
+}