Implement mac specific view change for Intro and Settings page

docs/index.html

@@ -77,8 +77,8 @@ <h2>
                     <button class="win" onclick="window.location='https://rebrand.ly/switch-win'">
                         <i class="fa fa-windows"></i> Install on Windows
                     </button>
-                    <button class="mac" disabled>
-                        <i class="fa fa-apple"></i> MacOS - 🚧 WIP
+                    <button class="mac" onclick="window.location='https://rebrand.ly/switch-mac'">
+                        <i class="fa fa-apple"></i> MacOS - 🚧 (alpha)
                     </button>
 
                     <br><br>
@@ -99,13 +99,13 @@ <h2>
     </div>
     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
         integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
-    </script>
+        </script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
         integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
-    </script>
+        </script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
         integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
-    </script>
+        </script>
 
     <script>
         ! function () {

intro.html

@@ -32,7 +32,7 @@
                 <img src="./assets/images/switch.ico" alt="">
                 <h2>Open dock</h2>
                 <p>
-                    Tap left or right <span class="key">alt</span> key to show Switch dock.
+                    Tap left or right <span class="key if-mac-combo">alt</span> key to show Switch dock.
                 </p>
 
             </div>
@@ -48,7 +48,8 @@ <h2>Manage apps</h2>
                 <img src="./assets/images/tip-switch.svg" alt="">
                 <h2>Switch apps</h2>
                 <p>
-                    Hold left or right <span class="key">alt</span> then press your <span class="key">num</span> keys to
+                    Hold left or right <span class="key if-mac-combo">alt</span> then press your <span
+                        class="key">NUM</span> keys to
                     switch between your hotapps.
                 </p>
             </div>

settings.html

@@ -70,7 +70,7 @@ <h3>Settings</h3>
         </label>
       </div>
 
-      <div class="form-control">
+      <div class="form-control mac-hide">
         <label class="label">Disable switching apps with AltGr</label>
         <label class="switch">
           <input type="checkbox" id="disableAltGr">

src/intro.ts

@@ -1,7 +1,7 @@
 const remote = require('electron').remote;
 const Store = require('electron-store');
 const config = new Store({
-   projectName: 'SwitchDock'
+    projectName: 'SwitchDock'
 });
 
 // Initialize analytics...
@@ -13,88 +13,73 @@ firstUseAnalytics(uuid);
 export class Intro {
     currentIndex: number = 1;
 
-    constructor()
-    {
+    constructor() {
+        if (process.platform == 'darwin') this.macOSCleanUp();
         // add mac specific styling
-        if(remote.process.platform == 'darwin') document.getElementById('slide-mac').classList.add('mac');
+        if (remote.process.platform == 'darwin') document.getElementById('slide-mac').classList.add('mac');
 
         let pane = this.getAllPanes();
         this.showPane(this.currentIndex);
     }
 
-    getAllPanes(): HTMLCollectionOf<HTMLDivElement>
-    {
+    getAllPanes(): HTMLCollectionOf<HTMLDivElement> {
         return document.getElementsByClassName('tip') as HTMLCollectionOf<HTMLDivElement>;
     }
 
-    showPane(paneIndex: number)
-    {
+    showPane(paneIndex: number) {
         let panes = this.getAllPanes();
-        if(paneIndex < 1 || panes == null || panes.length == 0 || paneIndex > panes.length) return;
+        if (paneIndex < 1 || panes == null || panes.length == 0 || paneIndex > panes.length) return;
         this.currentIndex = paneIndex;
-        for(let i = 0; i < panes.length; i++)
-        {
-            if(paneIndex-1 == i)
-            {
+        for (let i = 0; i < panes.length; i++) {
+            if (paneIndex - 1 == i) {
                 panes[i].style.display = 'block';
             } else {
                 panes[i].style.display = 'none';
             }
         }
 
-        if(paneIndex == 1)
-        {
+        if (paneIndex == 1) {
             this.hideElement('prev');
             this.showElement('next');
             this.hideElement('close');
-        } else if(paneIndex == panes.length)
-        {
+        } else if (paneIndex == panes.length) {
             this.hideElement('next');
             this.showElement('prev');
             this.showElement('close');
-        } else
-        {
+        } else {
             this.showElement('prev');
             this.showElement('next');
             this.hideElement('close');
         }
-        
+
     }
 
-    next()
-    {
-        this.showPane(this.currentIndex+1);
+    next() {
+        this.showPane(this.currentIndex + 1);
     }
 
-    prev()
-    {
-        this.showPane(this.currentIndex-1);
+    prev() {
+        this.showPane(this.currentIndex - 1);
     }
 
 
-    hideElement(id: string)
-    {
+    hideElement(id: string) {
         document.getElementById(id).style.display = 'none';
     }
 
-    showElement(id: string)
-    {
+    showElement(id: string) {
         document.getElementById(id).style.display = 'inline';
     }
 
-    close()
-    {
+    close() {
         config.set('showIntro', false);
         remote.getCurrentWindow().close();
     }
-}
 
-// Disable key-combo refresh..
-document.onkeydown = (e) => {
-    const press = (window as any).event ? (window as any).event : e;
-    if (press.keyCode == 82 && press.ctrlKey) {
-        e.preventDefault();
-        e.stopPropagation();
+    macOSCleanUp() {
+        let $macHides = document.getElementsByClassName('if-mac-combo');
+        for (let i = 0; i < $macHides.length; i++) {
+            ($macHides.item(i) as HTMLElement).innerText = '⌘+⌥';
+        }
     }
-
-}
+}

src/settings.ts

@@ -9,7 +9,7 @@ const config = new Store({
 
 import * as Sentry from '@sentry/browser';
 Sentry.init({
-  dsn: 'https://1607ab9c0f4b4156be881c9ec9be23b5@sentry.io/1540999',
+    dsn: 'https://1607ab9c0f4b4156be881c9ec9be23b5@sentry.io/1540999',
 });
 
 
@@ -18,6 +18,7 @@ Sentry.init({
 export class Settings {
 
     constructor() {
+        if (process.platform == 'darwin') this.macOSCleanUp();
         window.onload = () => {
             this.updateUI();
         }
@@ -40,16 +41,14 @@ export class Settings {
         }
     }
 
-    getShowIntro()
-    {
+    getShowIntro() {
         const status = config.get('showIntro');
-        return status == null ? true: status;
+        return status == null ? true : status;
     }
 
-    getDisableAltGr()
-    {
+    getDisableAltGr() {
         const status = config.get('disableAltGr');
-        return status == null ? false: status;
+        return status == null ? false : status;
     }
 
 
@@ -74,13 +73,11 @@ export class Settings {
         (document.getElementById(id) as HTMLInputElement).checked = value;
     }
 
-    setSelectedValue(id: string, value: string)
-    {
+    setSelectedValue(id: string, value: string) {
         (document.getElementById(id) as HTMLInputElement).value = value;
     }
 
-    getValue(id: string)
-    {
+    getValue(id: string) {
         return (document.getElementById(id) as HTMLInputElement).value;
     }
 
@@ -115,23 +112,18 @@ export class Settings {
         }).showToast();
     }
 
-    getAppVersion()
-    {
+    getAppVersion() {
         fs.readFile(path.join(__dirname, '../package.json'), (err, data) => {
-            if(err) throw new Error(err);
+            if (err) throw new Error(err);
             const parse = JSON.parse(data);
             document.getElementById('ver').innerText = `v${parse.version}`
         });
     }
-}
 
-
-// Disable key-combo refresh..
-document.onkeydown = (e) => {
-    const press = (window as any).event ? (window as any).event : e;
-    if (press.keyCode == 82 && press.ctrlKey) {
-        e.preventDefault();
-        e.stopPropagation();
+    macOSCleanUp() {
+        let $macHides = document.getElementsByClassName('mac-hide');
+        for (let i = 0; i < $macHides.length; i++) {
+            ($macHides.item(i) as HTMLElement).style.opacity = '0';
+        }
     }
-
 }