#32 Implemented settings for CSS enhancements

src/javascript/app.js

@@ -9,6 +9,8 @@ import { init as languageDisplay } from './enhancements/languageDisplay';
 import { init as notifications } from './enhancements/notifications';
 import { init as quickSearch } from './enhancements/quickSearch';
 import { init as watch2getherChat } from './enhancements/watch2getherChat';
+// css
+import { init as cssEnhancements } from './enhancements/cssEnhancements';
 
 // core
 initCore();
@@ -23,3 +25,6 @@ languageDisplay();
 notifications();
 quickSearch();
 watch2getherChat();
+
+// css
+cssEnhancements();

src/javascript/configuration/configuration.js

@@ -2,19 +2,18 @@ import { getGlobalStorageProvider } from "../browserApi/storageProvider";
 import { assigned } from "../utils/helpers";
 
 // website
-export const SETTINGS_websiteDisplayQuickSearch = 'websiteDisplayQuickSearch'; //
-export const SETTINGS_websiteShowNotificationsCountInTab = 'websiteShowNotificationsCountInTab'; //
+export const SETTINGS_websiteDisplayQuickSearch = 'websiteDisplayQuickSearch';
+export const SETTINGS_websiteShowNotificationsCountInTab = 'websiteShowNotificationsCountInTab';
 export const SETTINGS_websiteHideUnusedTabs = 'websiteHideUnusedTabs';
 export const SETTINGS_websiteOptimizeListAppearance = 'websiteOptimizeListAppearance';
 // anime
-export const SETTINGS_animeLanguageDisplay = 'animeLanguageDisplay'; //
+export const SETTINGS_animeLanguageDisplay = 'animeLanguageDisplay';
 // requests 
-export const SETTINGS_requestBeautifyPage = 'requestBeautifyPage'; //
+export const SETTINGS_requestBeautifyPage = 'requestBeautifyPage';
 // player
-export const SETTINGS_playerAutoplayAfterScreenshot = 'playerAutoplayAfterScreenshot'; //
+export const SETTINGS_playerAutoplayAfterScreenshot = 'playerAutoplayAfterScreenshot';
 // w2g
-export const SETTINGS_w2gDisplayCharacterCounter = 'w2gDisplayCharacterCounter'; //
-
+export const SETTINGS_w2gDisplayCharacterCounter = 'w2gDisplayCharacterCounter';
 class Configuration {
     constructor() {
         this.settingsCache = new Map();

src/javascript/enhancements/cssEnhancements.js

@@ -0,0 +1,69 @@
+import { getGlobalConfiguration, SETTINGS_websiteHideUnusedTabs, SETTINGS_websiteOptimizeListAppearance } from '../configuration/configuration';
+import * as core from '../utils/aniwatchCore';
+import * as helper from '../utils/helpers';
+
+export function init() {
+    getGlobalConfiguration().getProperty(SETTINGS_websiteHideUnusedTabs, value => {
+        // if disabled, add class to avoid our css optimizations
+        if (!value) {
+            let disableFunc = node => {
+                if (helper.isHtmlElement(node)) {
+                    let disableNode = node => {
+                        node.classList.add('awp-hide-unused-disabled')
+                    }
+
+                    if (node.tagName === 'MD-TAB-ITEM') {
+                        disableNode(node);
+                    }
+                    else {
+                        node.querySelectorAll('md-tab-item').forEach(node => disableNode(node));
+                    }
+                }
+            };
+
+            core.registerScript(node => {
+                disableFunc(node);
+            }, ".*");
+
+            core.runAfterLoad(() => {
+                disableFunc(document.body);
+            }, ".*");
+
+            core.runAfterLocationChange(() => {
+                disableFunc(document.body);
+            }, ".*");
+        }
+    });
+
+    getGlobalConfiguration().getProperty(SETTINGS_websiteOptimizeListAppearance, value => {
+        // if disabled, add class to avoid our css optimizations
+        if (!value) {
+            let disableFunc = node => {
+                if (helper.isHtmlElement(node)) {
+                    let disableNode = node => {
+                        node.classList.add('awp-list-disabled')
+                    }
+
+                    if (node.tagName === 'MD-LIST-ITEM') {
+                        disableNode(node);
+                    }
+                    else {
+                        node.querySelectorAll('md-list-item').forEach(node => disableNode(node));
+                    }
+                }
+            }
+
+            core.registerScript(node => {
+                disableFunc(node);
+            }, ".*");
+
+            core.runAfterLoad(() => {
+                disableFunc(document.body);
+            }, ".*");
+
+            core.runAfterLocationChange(() => {
+                disableFunc(document.body);
+            }, ".*");
+        }
+    });
+}

src/stylesheets/enhancements/_lists.scss

@@ -1,5 +1,5 @@
 md-list-item {
-    &:not(:last-child) {
+    &:not(:last-child):not(.awp-list-disabled) {
         border-bottom: 1px solid $gray;
     }
 }

src/stylesheets/enhancements/_tabs.scss

@@ -1,6 +1,6 @@
 md-tab-item {
     // hide disabled tabs
-    &.md-disabled {
+    &.md-disabled:not(.awp-hide-unused-disabled) {
         display: none;
     }
 }