turn the banner thing into a class related to #9

src/functions/banner.js

@@ -1,147 +1,136 @@
-import { domReady, newElement } from "../utils";
-
-/**
- * Render the element.
- */
-export function render() {
-    if (this.isDismissed()) return;
-    domReady().then(() => {
-
-        if (!this.postTitle) {
-            console.error('[h-bar] no post data, unable to render');
-            return;
-        }
-
-        let secondaryElement = null;
+import { domReady, newElement, isDismissed } from "../utils";
+import { styling } from '../config/styling';
+
+
+export default class Banner {
+
+    /**
+     *
+     * @param {object} param0
+     */
+    constructor({ $el, dismissible, dismissFor, theme, badge }) {
+        this.$el = $el;
+        this.dismissible = dismissible;
+        this.dismissFor = dismissFor;
+        this.badge = badge;
+        this.theme = theme
+    }
 
-        if (!this.dismissible) {
-            let secondaryLinkList = this.createSecondaryLinks()
-            secondaryElement = newElement('div', {
-                children: secondaryLinkList,
-                classes: `${this.styling.linkWrapper} ${themes[this.theme].linkWrapper}`
+    /**
+     * Render the element.
+     */
+    resolve({ title, link, secondaryLinks}) {
+        if (isDismissed()) return;
+
+        domReady().then(() => {
+
+            if (!title) {
+                console.error('[h-bar] no post data, unable to render');
+                return;
+            }
+
+            let secondaryElement = null;
+
+            if (!this.dismissible) {
+                let secondaryLinkList = this.createSecondaryLinks(secondaryLinks)
+                secondaryElement = newElement('div', {
+                    children: secondaryLinkList,
+                    classes: `${styling.linkWrapper} ${this.theme.linkWrapper}`
+                })
+            } else {
+                secondaryElement = this.dismissibleButton();
+            }
+
+            let badgeElement = newElement('span', { classes: `${styling.badge} ${this.theme.badge}` })
+            let postLink = newElement('a', { classes: `${styling.postTitle} ${this.theme.postTitle}` })
+
+            badgeElement.innerText = this.badge;
+            postLink.href = link;
+            postLink.innerText = title;
+
+            postLink.innerHTML += `
+                <svg class="hb-h-3 hb-w-3" viewBox="0 0 20 20" fill="currentColor">
+                    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
+                </svg>
+                `
+
+            let postElement = newElement('div', {
+                classes: `${styling.linkWrapper} ${this.theme.linkWrapper}`,
+                children: [badgeElement, postLink]
             })
-        } else {
-            secondaryElement = this.dismissibleButton();
-        }
 
-        let badge = newElement('span', { classes: `${this.styling.badge} ${themes[this.theme].badge}` })
-        let postLink = newElement('a', { classes: `${this.styling.postTitle} ${themes[this.theme].postTitle}` })
-
-        badge.innerText = this.badge;
-        postLink.href = this.postLink;
-        postLink.innerText = this.postTitle;
+            let _hbar = newElement('div', {
+                classes: `${styling.wrapper} ${this.theme.wrapper}`,
+                children: [postElement, secondaryElement]
+            })
 
-        postLink.innerHTML += `
-            <svg class="hb-h-3 hb-w-3" viewBox="0 0 20 20" fill="currentColor">
-                <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
-            </svg>
-            `
+            let container = document.querySelector(this.$el);
 
-        let postElement = newElement('div', {
-            classes: `${this.styling.linkWrapper} ${themes[this.theme].linkWrapper}`,
-            children: [badge, postLink]
+            container.innerHTML = ""
+            container.appendChild(_hbar)
         })
+    }
 
-        let _hbar = newElement('div', {
-            classes: `${this.styling.wrapper} ${themes[this.theme].wrapper}`,
-            children: [postElement, secondaryElement]
-        })
-
-        let container = document.getElementById(this.ele);
-
-        container.innerHTML = ""
-        container.appendChild(_hbar)
-
-        // ? what to send out
-        this.onCompleted({ element: container, id: this.ele });
-    })
-}
-
-/**
- * Removes the element in the case of it having issues.
- * Rather an aggressive option.
- *
- * Also used when dismissing.
- */
-export function destroy() {
-    try {
-        document.getElementById(this.ele).remove()
-
-        return true;
-    } catch (error) {
-        console.error('Unable to destroy the h-bar wrapper')
-        console.error(error)
+    /**
+     * Removes the element in the case of it having issues.
+     * Rather an aggressive option.
+     *
+     * Also used when dismissing.
+     */
+    destroy() {
+        try {
+            document.querySelector(this.$el).innerHTML = '';
+            return true;
+        } catch (error) {
+            console.error('Unable to destroy the h-bar wrapper')
+            console.error(error)
+        }
+        return false;
     }
 
-    return false;
-}
+    /**
+     * Creates the HTML node for a dismissible button.
+     *
+     * @returns HTMLElement
+     */
+    dismissibleButton() {
+        let dismiss = newElement('button', {
+            classes: `hb--mr-2 hb-flex hb-p-1 hb-rounded-md ${this.theme.dismiss} hover:hb-text-white hover:hb-bg-gray-800 focus:hb-outline-none focus:hb-bg-gray-800`,
+        });
 
-/**
- * Creates the HTML node for a dismissible button.
- *
- * @returns HTMLElement
- */
-export function dismissibleButton() {
-    let dismiss = newElement('button', {
-        classes: 'hb--mr-2 hb-flex hb-p-1 hb-rounded-md hover:hb-text-white hover:hb-bg-gray-800 focus:hb-outline-none focus:hb-bg-gray-800',
-    });
+        dismiss.innerHTML = `<svg class="hb-h-4 hb-w-4" stroke="currentColor" fill="none" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                  </svg>`
 
-    dismiss.innerHTML = `<svg class="hb-h-4 hb-w-4 ${themes[this.theme].dismiss}" stroke="currentColor" fill="none" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-              </svg>`
+        dismiss.onclick = (e) => {
+            e.preventDefault();
 
-    dismiss.onclick = (e) => {
-        e.preventDefault();
+            // just do it early if we not logging time.
+            if (!this.dismissFor) return this.destroy();
 
-        // just do it early if we not logging time.
-        if (!this.dismissFor) return this.destroy();
+            if (localStorage) {
+                localStorage.setItem('h-bar_dismiss_for', this.dismissFor.getTime());
+            }
 
-        if (localStorage) {
-            localStorage.setItem('h-bar_dismiss_for', this.dismissFor.getTime());
+            return this.destroy();
         }
 
-        return this.destroy();
+        return dismiss;
     }
 
-    return dismiss;
-}
+    /**
+     * Creates the secondary links for the bar.
+     */
+    createSecondaryLinks(secondaryLinks) {
+        if (!secondaryLinks) return [];
 
-/**
- * Determines if the banner has been dismissed.
- *
- * @returns boolean
- */
-export function isDismissed() {
-
-    if (localStorage) {
-        var dismissDate = localStorage.getItem('h-bar_dismiss_for');
-        if (!dismissDate) {
-            return false;
-        }
-
-        dismissDate = dismissDate;
-        var ourDate = (new Date()).getTime();
+        return secondaryLinks.map(({ title, link }) => {
+            let style = `${styling.secondaryLink} ${this.theme.secondaryLink}`;
+            let butter = newElement('a', { classes: style })
+            butter.href = link;
+            butter.innerText = title;
 
-        if (ourDate <= dismissDate) {
-            return true;
-        }
+            return butter;
+        }, this);
     }
-
-    return false;
-}
-
-/**
- * Creates the secondary links for the bar.
- */
-export function createSecondaryLinks() {
-    if (!this.secondaryLinks) return [];
-
-    return this.secondaryLinks.map(({ title, link }) => {
-        let style = `${this.styling.secondaryLink} ${themes[this.theme].secondaryLink}`;
-        let butter = newElement('a', { classes: style })
-        butter.href = link;
-        butter.innerText = title;
-
-        return butter;
-    }, this);
 }