Merge pull request #161 from Moustachauve/disable-ads-option

Add an option to disable the ads

interface/lib/ads/adHandler.js

@@ -11,10 +11,12 @@ export class AdHandler {
    * Constructs an AdHandler.
    * @param {BrowserDetector} browserDetector
    * @param {GenericStorageHandler} storageHandler
+   * @param {OptionsHandler} optionHandler
    */
-  constructor(browserDetector, storageHandler) {
+  constructor(browserDetector, storageHandler, optionHandler) {
     this.browserDetector = browserDetector;
     this.storageHandler = storageHandler;
+    this.optionHandler = optionHandler;
   }
 
   /**
@@ -84,6 +86,9 @@ export class AdHandler {
     if (ActiveAds.length === 0) {
       return false;
     }
+    if (!this.optionHandler.getAdsEnabled()) {
+      return false;
+    }
 
     const lastDismissedAd = await this.storageHandler.getLocal(
       this.getLastDismissKey(),

interface/lib/options/options.js

@@ -15,5 +15,6 @@ export class Options {
     this.exportFormat = ExportFormats.Ask;
     this.extraInfo = ExtraInfos.Nothing;
     this.theme = Themes.Auto;
+    this.adsEnabled = true;
   }
 }

interface/lib/optionsHandler.js

@@ -202,6 +202,22 @@ export class OptionsHandler extends EventEmitter {
     return false;
   }
 
+  /**
+   * Gets whether ads are enabled or not.
+   * @return {boolean} True if ads are enabled, otherwise false.
+   */
+  getAdsEnabled() {
+    return this.options.adsEnabled;
+  }
+  /**
+   * Sets whether the ads are enabled or not.
+   * @param {boolean} adsEnabled True if the ads are enabled, otherwise false.
+   */
+  setAdsEnabled(adsEnabled) {
+    this.options.adsEnabled = adsEnabled;
+    this.saveOptions();
+  }
+
   /**
    * Loads all the options. This is done at load time, but can be called
    * manually to reload the options.

interface/options/options.html

@@ -90,6 +90,26 @@
           automatically.
         </div>
       </div>
+
+      <div class="input-container">
+        <label for="ads-enabled">Show Ads</label>
+        <label class="switch">
+          <input type="checkbox" id="ads-enabled" aria-describedby="ads-enabled-hint" />
+          <span class="slider"></span>
+        </label>
+        <div class="hint" id="ads-enabled-hint">
+          When Enabled, Cookie-Editor will display some small non-intrusive ads at the
+          top of the main interface. These are used to cover the basic operating
+          costs of Cookie-Editor. Feel free to disable them, but keep in mind
+          that I work on Cookie-Editor in free time as a personal project.
+          You can thank me with a nice review!
+          <span class="github-sponsor hidden">
+            You can also
+            <a href="https://github.com/sponsors/Moustachauve/" target="_blank">
+              sponsor me on Github</a>.
+          </span>
+        </div>
+      </div>
     </fieldset>
 
     <fieldset>
@@ -138,7 +158,7 @@
         <a href="https://github.com/Moustachauve/cookie-editor/blob/master/LICENSE" target="_blank">the GPL-3.0
           license</a>.
       </p>
-      <p class="hidden">
+      <p class="github-sponsor hidden">
         <em>Are you enjoying Cookie-Editor?</em><br />
         I would be really greatful if you considered supporting my work by
         sponsering me on Github.

interface/options/options.js

@@ -20,6 +20,7 @@ document.addEventListener('DOMContentLoaded', async (event) => {
   const exportFormatInput = document.getElementById('export-format');
   const extraInfoInput = document.getElementById('extra-info');
   const themeInput = document.getElementById('theme');
+  const adsEnabledInput = document.getElementById('ads-enabled');
 
   await optionHandler.loadOptions();
   themeHandler.updateTheme();
@@ -37,9 +38,12 @@ document.addEventListener('DOMContentLoaded', async (event) => {
     exportFormatInput.value = optionHandler.getExportFormat();
     extraInfoInput.value = optionHandler.getExtraInfo();
     themeInput.value = optionHandler.getTheme();
+    adsEnabledInput.checked = optionHandler.getAdsEnabled();
 
     if (!browserDetector.isSafari()) {
-      document.getElementById('github-sponsor').classList.remove('hidden');
+      document
+        .querySelectorAll('.github-sponsor')
+        .forEach((el) => el.classList.remove('hidden'));
     }
   }
 
@@ -78,6 +82,12 @@ document.addEventListener('DOMContentLoaded', async (event) => {
       optionHandler.setTheme(themeInput.value);
       themeHandler.updateTheme();
     });
+    adsEnabledInput.addEventListener('change', (event) => {
+      if (!event.isTrusted) {
+        return;
+      }
+      optionHandler.setAdsEnabled(adsEnabledInput.checked);
+    });
 
     document
       .getElementById('delete-all')

interface/popup/cookie-list.js

@@ -31,7 +31,11 @@ import { CookieHandlerPopup } from './cookieHandlerPopup.js';
   const storageHandler = new GenericStorageHandler(browserDetector);
   const optionHandler = new OptionsHandler(browserDetector, storageHandler);
   const themeHandler = new ThemeHandler(optionHandler);
-  const adHandler = new AdHandler(browserDetector, storageHandler);
+  const adHandler = new AdHandler(
+    browserDetector,
+    storageHandler,
+    optionHandler,
+  );
   const cookieHandler = window.isDevtools
     ? new CookieHandlerDevtools(browserDetector)
     : new CookieHandlerPopup(browserDetector);