From 951499dba4ea173ba4c1f08b956e5d558999da45 Mon Sep 17 00:00:00 2001
From: Florrie <towerofnix@gmail.com>
Date: Fri, 22 Mar 2019 21:03:44 -0300
Subject: Popup UI

---
 extension/popup/main.js | 162 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 162 insertions(+)
 create mode 100644 extension/popup/main.js

(limited to 'extension/popup/main.js')

diff --git a/extension/popup/main.js b/extension/popup/main.js
new file mode 100644
index 0000000..ad1475a
--- /dev/null
+++ b/extension/popup/main.js
@@ -0,0 +1,162 @@
+function changeScreen(id) {
+    for (const screen of document.getElementsByClassName('screen')) {
+        if (screen.id === id) {
+            screen.classList.add('visible');
+        } else {
+            screen.classList.remove('visible');
+        }
+    }
+}
+
+function loadTrackList(opts) {
+    const {hostname, siteSettings} = opts;
+    const site = siteSettings[hostname] || [];
+    return browser.storage.sync.get('tracks').then(({tracks = []}) => {
+        const ul = document.getElementById('track-list');
+        while (ul.firstChild) {
+            ul.removeChild(ul.firstChild);
+        }
+
+        tracks.sort();
+
+        for (const track of tracks) {
+            const li = document.createElement('li');
+            ul.appendChild(li);
+
+            li.classList.add('track');
+
+            const label = document.createElement('label');
+            li.appendChild(label);
+
+            const checkbox = document.createElement('input');
+            label.appendChild(checkbox);
+
+            checkbox.type = 'checkbox';
+            checkbox.checked = site.includes(track);
+            checkbox.title = `Toggles whether the track "${track}" will play when this site is opened.`
+
+            checkbox.addEventListener('click', () => {
+                if (checkbox.checked) {
+                    if (!site.includes(track)) {
+                        site.push(track);
+                    }
+                } else {
+                    if (site.includes(track)) {
+                        site.splice(site.indexOf(track), 1);
+                    }
+                }
+
+                if (!siteSettings[hostname]) {
+                    siteSettings[hostname] = site;
+                }
+
+                disableButton.style.display = 'inline-block';
+
+                browser.storage.sync.set({siteSettings})
+                    .then(() => browser.runtime.sendMessage({hostname}));
+            });
+
+            label.appendChild(document.createTextNode(' ' + track));
+
+            const deleteButton = document.createElement('button');
+            li.appendChild(deleteButton);
+
+            deleteButton.appendChild(document.createTextNode('Delete...'));
+            deleteButton.title = `Deletes the track from all sites. You will be confirmed first.`;
+
+            deleteButton.addEventListener('click', () => {
+                if (confirm(`This will delete "${track}" from ALL sites - this cannot be undone. Are you sure?`)) {
+                    changeScreen('loading-screen');
+                    browser.storage.sync.set({tracks: tracks.filter(t => t !== track)})
+                        .then(() => loadTrackList(opts))
+                        .then(() => changeScreen('main-screen'));
+                }
+            });
+        }
+
+        const actionLi = document.createElement('li');
+        ul.appendChild(actionLi);
+
+        actionLi.classList.add('action');
+
+        const addButton = document.createElement('button');
+        actionLi.appendChild(addButton);
+
+        addButton.appendChild(document.createTextNode('Create Track'));
+        addButton.title = `Creates a new track, which will be an option present in all sites.`;
+
+        let newTrackInput = null;
+        addButton.addEventListener('click', () => {
+            if (newTrackInput) {
+                newTrackInput.focus();
+                return;
+            }
+
+            const li = document.createElement('li');
+            li.classList.add('track');
+            ul.insertBefore(li, actionLi);
+
+            newTrackInput = document.createElement('input');
+            li.appendChild(newTrackInput);
+
+            const saveButton = document.createElement('button');
+            li.appendChild(saveButton);
+
+            saveButton.appendChild(document.createTextNode('Save'));
+
+            saveButton.addEventListener('click', () => {
+                while (li.firstChild) {
+                    li.removeChild(li.firstChild);
+                }
+                li.appendChild(document.createTextNode('Saving...'));
+
+                const name = newTrackInput.value.trim();
+                if (name.length) {
+                    changeScreen('loading-screen');
+                    browser.storage.sync.set({tracks: tracks.concat([name])})
+                        .then(() => loadTrackList(opts))
+                        .then(() => changeScreen('main-screen'));
+                }
+            });
+
+            newTrackInput.focus();
+        });
+
+        const disableButton = document.createElement('button');
+        actionLi.appendChild(disableButton);
+
+        disableButton.appendChild(document.createTextNode('Disable Site'));
+        disableButton.title = `Removes the entry for this site altogether. It won't change BGM when you open it again.`;
+
+        disableButton.addEventListener('click', () => {
+            changeScreen('loading-screen');
+            delete siteSettings[hostname];
+            browser.storage.sync.set({siteSettings})
+                .then(() => loadTrackList(opts))
+                .then(() => changeScreen('main-screen'));
+        });
+
+        if (!(hostname in siteSettings)) {
+            disableButton.style.display = 'none';
+        }
+    });
+}
+
+Promise.all([
+    browser.tabs.query({active: true, currentWindow: true})
+        .then(([tab]) => {
+            const url = new URL(tab.url);
+            document.getElementById('hostname').appendChild(document.createTextNode(url.hostname));
+            return url.hostname;
+        }),
+    browser.storage.sync.get('siteSettings')
+        .then(({siteSettings = {}}) => siteSettings)
+])
+    .then(([hostname, siteSettings]) => {
+        if (hostname) {
+            return loadTrackList({hostname, siteSettings})
+                .then(() => changeScreen('main-screen'));
+        } else {
+            changeScreen('invalid-host-screen');
+        }
+    });
-- 
cgit 1.3.0-6-gf8a5