Add safari code

3 files changed, 67 insertions, 0 deletions

diff --git a/safari/Junction/Resources/Icon.png b/safari/Junction/Resources/Icon.png
new file mode 100644
index 0000000..f056447
--- /dev/null
+++ b/safari/Junction/Resources/Icon.png
diff --git a/safari/Junction/Resources/Script.js b/safari/Junction/Resources/Script.js
new file mode 100644
index 0000000..f551e6b
--- /dev/null
+++ b/safari/Junction/Resources/Script.js
@@ -0,0 +1,22 @@
+function show(enabled, useSettingsInsteadOfPreferences) {
+    if (useSettingsInsteadOfPreferences) {
+        document.getElementsByClassName('state-on')[0].innerText = "Junction’s extension is currently on. You can turn it off in the Extensions section of Safari Settings.";
+        document.getElementsByClassName('state-off')[0].innerText = "Junction’s extension is currently off. You can turn it on in the Extensions section of Safari Settings.";
+        document.getElementsByClassName('state-unknown')[0].innerText = "You can turn on Junction’s extension in the Extensions section of Safari Settings.";
+        document.getElementsByClassName('open-preferences')[0].innerText = "Quit and Open Safari Settings…";
+    }
+
+    if (typeof enabled === "boolean") {
+        document.body.classList.toggle(`state-on`, enabled);
+        document.body.classList.toggle(`state-off`, !enabled);
+    } else {
+        document.body.classList.remove(`state-on`);
+        document.body.classList.remove(`state-off`);
+    }
+}
+
+function openPreferences() {
+    webkit.messageHandlers.controller.postMessage("open-preferences");
+}
+
+document.querySelector("button.open-preferences").addEventListener("click", openPreferences);
diff --git a/safari/Junction/Resources/Style.css b/safari/Junction/Resources/Style.css
new file mode 100644
index 0000000..cbde9e6
--- /dev/null
+++ b/safari/Junction/Resources/Style.css
@@ -0,0 +1,45 @@
+* {
+    -webkit-user-select: none;
+    -webkit-user-drag: none;
+    cursor: default;
+}
+
+:root {
+    color-scheme: light dark;
+
+    --spacing: 20px;
+}
+
+html {
+    height: 100%;
+}
+
+body {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+
+    gap: var(--spacing);
+    margin: 0 calc(var(--spacing) * 2);
+    height: 100%;
+
+    font: -apple-system-short-body;
+    text-align: center;
+}
+
+body:not(.state-on, .state-off) :is(.state-on, .state-off) {
+    display: none;
+}
+
+body.state-on :is(.state-off, .state-unknown) {
+    display: none;
+}
+
+body.state-off :is(.state-on, .state-unknown) {
+    display: none;
+}
+
+button {
+    font-size: 1em;
+}