Setting to disable self-referenced links

css/onboarding/onboarding.css

@@ -170,4 +170,11 @@ h2 {
 
 p {
     font-size: 18px;
+}
+
+#innerLinksList {
+    max-width: 100%;
+    width: 100%;
+    border-radius: 6px;
+    padding: 12px;
 }

css/popup/popup.css

@@ -12,6 +12,16 @@ body.dark-theme {
     color: white!important;
 }
 
+#generalSettings {
+    color: #007AFF;
+    cursor: pointer;
+    transition: 0.1s ease-in-out;
+}
+
+#generalSettings:hover {
+    color: #0065d1;
+}
+
 .logo {
     transform: scale(0.75);
 }

html/onboarding.html

@@ -28,6 +28,11 @@ <h2 class="subtitle" id="generalSettings">General settings</h2>
                     <span class="slider round"></span>
                 </label>
             </div>
+            <br>
+            <div>
+                <p>Advanced setting - inner links preview disabled on :</p>
+                <textarea id="innerLinksList" placeholder="Comma separated list of domains on which you don't want inner links to be previewed e.g: github.com, ppy.sh, example.com, ...."></textarea>
+            </div>
         </div>
     </div>
 

html/popup.html

@@ -17,19 +17,4 @@ <h2 class="subtitle" id="pageSettings">Page settings</h2>
       </label>
 
     <h2 class="subtitle" id="generalSettings">General settings</h2>
-    <p id="allowMetadata">Allow meta-data preview ? (if disabled Survol will only preview youtube, twitter, wikipedia, ...)</p>
-
-    <label class="switch">
-        <input type="checkbox" id="previewMetadata" checked>
-        <span class="slider round"></span>
-    </label>
-
-    <br/> <br/>
-
-    <p id="enableDarkTheme">Enable dark theme ?</p>
-
-    <label class="switch">
-        <input type="checkbox" id="darkThemeCheckbox" checked>
-        <span class="slider round"></span>
-    </label>
 </body>

js/background/auxiliary.js

@@ -53,6 +53,7 @@ chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
 const DEFAULT_SETTINGS = {
     version: '0.6.0',
     disabledDomains: ['survol.me'],
+    selfReferDisabled: ['github.com', 'ppy.sh'],
     previewMetadata: true,
     darkThemeToggle: false,
     installationType: 'install'

js/core.js

@@ -42,7 +42,7 @@ document.addEventListener('DOMContentLoaded', () => {
     /* Used to do everything using CSS, however it was messy.
      * We will now use a single div that we will move across the screen based on the mouse position
      */
-    function insertSurvolDiv() {
+    function insertSurvolDiv(selfReferDisabled) {
         return new Promise((resolve) => {
             container.className = `survol-container ${darkTheme ? 'dark-theme' : ''} hidden`;
             container.id = 'survol-container';
@@ -58,9 +58,9 @@ document.addEventListener('DOMContentLoaded', () => {
                     window.lastHovered = document.querySelectorAll('a:hover')[0];
                     container.innerHTML = '';
 
-                    if (document.querySelectorAll('a:hover')[0]) {
+                    if (document.querySelectorAll('a:hover')[0] && document.querySelectorAll('a:hover')[0].href) {
                         intentTimeout = setTimeout(() => {
-                            dispatcher(window.lastHovered, window.lastHovered.href);
+                            dispatcher(window.lastHovered, window.lastHovered.href, selfReferDisabled);
                         }, 1000 * intent);
                     } else {
                         clearTimeout(intentTimeout);
@@ -139,25 +139,29 @@ document.addEventListener('DOMContentLoaded', () => {
      * {Node} node
      * {String} link
      */
-    function dispatcher(node, link) {
+    function dispatcher(node, link, selfReferDisabled) {
         let domain = getDomain(link);
 
-        let potentialHover = getPotentialHover(node, domain);
-        /* If we do not support the domain we might not get anything in return of getPotentialHover */
-        if (potentialHover && potentialHover.bindToContainer != null && node.href && node.href.startsWith('http')) {
-            potentialHover.bindToContainer(node, domain, container);
-            container.className = `survol-container ${darkTheme ? 'dark-theme' : ''}`;
-            window.lastHovered = node;
-        } else {
-            // In case the node has no href feed it to the garbage collector
-            potentialHover = null;
+        // If inner links have not been disabled
+        if (!selfReferDisabled || domain.toLowerCase() != getDomain(CURRENT_TAB).toLowerCase()) {
+            let potentialHover = getPotentialHover(node, domain);
+            /* If we do not support the domain we might not get anything in return of getPotentialHover */
+            if (potentialHover && potentialHover.bindToContainer != null && node.href && node.href.startsWith('http')) {
+                potentialHover.bindToContainer(node, domain, container);
+                container.className = `survol-container ${darkTheme ? 'dark-theme' : ''}`;
+                window.lastHovered = node;
+            } else {
+                // In case the node has no href feed it to the garbage collector
+                potentialHover = null;
+            }
         }
     }
 
     // If the script is part of the extension
     if ((window.chrome && chrome.runtime && chrome.runtime.id) || chrome) {
-        chrome.storage.local.get(['disabledDomains', 'previewMetadata', 'darkThemeToggle'], function (res) {
+        chrome.storage.local.get(['disabledDomains', 'selfReferDisabled', 'previewMetadata', 'darkThemeToggle'], function (res) {
             let disabledDomains = res.disabledDomains ? res.disabledDomains : ['survol.me'];
+            let selfReferDisabled = res.selfReferDisabled ? res.selfReferDisabled.includes(getDomain(CURRENT_TAB).toLowerCase()) : false;
 
             if (res.previewMetadata === false) {
                 previewMetadata = false;
@@ -168,7 +172,7 @@ document.addEventListener('DOMContentLoaded', () => {
             }
 
             if (!disabledDomains.includes(getDomain(CURRENT_TAB).toLowerCase()) && !CURRENT_TAB.includes('/wp-admin')) {
-                insertSurvolDiv();
+                insertSurvolDiv(selfReferDisabled);
             }
         });
     }

js/popup/popup.js

@@ -1,4 +1,9 @@
 document.addEventListener('DOMContentLoaded', () => {
+
+    document.getElementById('generalSettings').addEventListener('click', () => {
+        chrome.tabs.create({ url: chrome.runtime.getURL('./html/onboarding.html') });
+    });
+
     /* Takes {String} link
      * Returns {String} link
      * Description: Returns the domain name associated to a full link
@@ -8,21 +13,14 @@ document.addEventListener('DOMContentLoaded', () => {
         return link.replace('http://', '').replace('https://', '').split('/')[0].split('.').slice(subdomains - 2, subdomains).join('.');
     }
 
-    ['pageSettings', 'generalSettings', 'allowMetadata', 'enableOnPage', 'enableDarkTheme'].forEach(function (word) {
+    ['pageSettings', 'generalSettings', 'enableOnPage'].forEach(function (word) {
         document.getElementById(word).innerText = chrome.i18n.getMessage(word);
     });
 
-    chrome.storage.local.get(['disabledDomains', 'previewMetadata', 'darkThemeToggle'], function (res) {
+    chrome.storage.local.get(['disabledDomains', 'darkThemeToggle'], function (res) {
         let disabledDomains = res.disabledDomains ? res.disabledDomains : ['survol.me'];
-        let previewMetadata = true;
-        let darkTheme = false;
-
-        if (res.previewMetadata === false) {
-            previewMetadata = false;
-        }
 
         if (res.darkThemeToggle === true) {
-            darkTheme = true;
             document.getElementById('body').classList.add('dark-theme');
         }
 
@@ -35,18 +33,6 @@ document.addEventListener('DOMContentLoaded', () => {
                     document.getElementById('previewOnThisPage').checked = false;
                 }
 
-                document.getElementById('previewMetadata').checked = previewMetadata;
-
-                document.getElementById('previewMetadata').addEventListener('click', () => {
-                    chrome.storage.local.set({ previewMetadata: document.getElementById('previewMetadata').checked });
-                });
-
-                document.getElementById('darkThemeCheckbox').checked = darkTheme;
-
-                document.getElementById('darkThemeCheckbox').addEventListener('click', () => {
-                    chrome.storage.local.set({ darkThemeToggle: document.getElementById('darkThemeCheckbox').checked });
-                    document.getElementById('body').classList.toggle('dark-theme');
-                });
 
                 document.getElementById('previewOnThisPage').addEventListener('click', () => {
                     // if the box gets unchecked i.e domain disabled, and the domain is not already in the list add it
@@ -64,5 +50,4 @@ document.addEventListener('DOMContentLoaded', () => {
             }
         });
     });
-
 });

js/utils/bootstrap.js

@@ -21,8 +21,9 @@ const bootstrap = (function () {
     }
 
     function bindEventListenersAndUpdateUI() {
-        chrome.storage.local.get(['disabledDomains', 'previewMetadata', 'darkThemeToggle', 'installationType'], function (res) {
+        chrome.storage.local.get(['disabledDomains', 'previewMetadata', 'darkThemeToggle', 'installationType', 'selfReferDisabled'], function (res) {
             let disabledDomains = res.disabledDomains ? res.disabledDomains : ['survol.me'];
+            let selfReferDisabled = res.selfReferDisabled ? res.selfReferDisabled : [];
             let previewMetadata = true;
             let darkTheme = false;
 
@@ -35,6 +36,8 @@ const bootstrap = (function () {
                 document.getElementById('body').classList.add('dark-theme');
             }
 
+            document.getElementById('innerLinksList').value = selfReferDisabled.join(',');
+
             switch (res.installationType) {
                 case 'install':
                     document.getElementById('welcomeMessage').innerText = chrome.i18n.getMessage('thankInstallation') || 'Survol';
@@ -57,7 +60,6 @@ const bootstrap = (function () {
 
                     updateUIElements(previewMetadata, darkTheme, previewOnThisPage);
 
-
                     document.getElementById('previewMetadata').addEventListener('click', () => {
                         chrome.storage.local.set({ previewMetadata: document.getElementById('previewMetadata').checked });
                     });
@@ -66,6 +68,10 @@ const bootstrap = (function () {
                         chrome.storage.local.set({ darkThemeToggle: document.getElementById('darkThemeCheckbox').checked });
                         document.getElementById('body').classList.toggle('dark-theme');
                     });
+
+                    document.getElementById('innerLinksList').addEventListener('keyup', () => {
+                        chrome.storage.local.set({ selfReferDisabled: document.getElementById('innerLinksList').value.toLowerCase().replace(/ /g, '').split(',') });
+                    });
                 }
             });
         });