MOBILE-3269 remotethemes: Move common code to functions

src/addon/remotethemes/providers/remotethemes.ts

@@ -30,6 +30,7 @@ import { Md5 } from 'ts-md5/dist/md5';
 export class AddonRemoteThemesProvider {
     static COMPONENT = 'mmaRemoteStyles';
     protected SEPARATOR_35 = /\/\*\*? *3\.5(\.0)? *styles? *\*\//i; // A comment like "/* 3.5 styles */".
+    protected TMP_SITE_ID = 'tmpsite';
 
     protected logger;
     protected stylesEls: {[siteId: string]: {element: HTMLStyleElement, hash: string}} = {};
@@ -57,15 +58,7 @@ export class AddonRemoteThemesProvider {
         }
 
         // Create the style and add it to the header.
-        const styleEl = document.createElement('style');
+        this.initSiteStyleElement(siteId, true);
-        styleEl.setAttribute('id', 'mobilecssurl-' + siteId);
-        this.disableElement(styleEl, true);
-
-        document.head.appendChild(styleEl);
-        this.stylesEls[siteId] = {
-            element: styleEl,
-            hash: ''
-        };
 
         return this.load(siteId, true).catch((error) => {
             this.logger.error('Error loading site after site init', error);
@@ -77,15 +70,28 @@ export class AddonRemoteThemesProvider {
      */
     clear(): void {
         // Disable all the styles.
-        const styles = <HTMLStyleElement[]> Array.from(document.querySelectorAll('style[id*=mobilecssurl]'));
+        this.disableElementsBySelector('style[id*=mobilecssurl]');
-        styles.forEach((style) => {
-            this.disableElement(style, true);
-        });
 
         // Set StatusBar properties.
         this.appProvider.setStatusBarColor();
     }
 
+    /**
+     * Create a style element.
+     *
+     * @param id ID to set to the element.
+     * @param disabled Whether the element should be disabled.
+     * @return New element.
+     */
+    protected createStyleElement(id: string, disabled: boolean): HTMLStyleElement {
+        const styleEl = document.createElement('style');
+
+        styleEl.setAttribute('id', id);
+        this.disableElement(styleEl, disabled);
+
+        return styleEl;
+    }
+
     /**
      * Enabled or disable a certain style element.
      *
@@ -107,6 +113,19 @@ export class AddonRemoteThemesProvider {
         }
     }
 
+    /**
+     * Disable all the style elements based on a query selector.
+     *
+     * @param selector The selector to get the style elements.
+     */
+    protected disableElementsBySelector(selector: string): void {
+        const styles = <HTMLStyleElement[]> Array.from(document.querySelectorAll(selector));
+
+        styles.forEach((style) => {
+            this.disableElement(style, true);
+        });
+    }
+
     /**
      * Downloads a CSS file and remove old files if needed.
      *
@@ -204,6 +223,28 @@ export class AddonRemoteThemesProvider {
         return cssCode;
     }
 
+    /**
+     * Init the style element for a site.
+     *
+     * @param siteId Site ID.
+     * @param disabled Whether the element should be disabled.
+     */
+    protected initSiteStyleElement(siteId: string, disabled: boolean): void {
+        if (this.stylesEls[siteId]) {
+            // Already initialized, ignore.
+            return;
+        }
+
+        // Create the style and add it to the header.
+        const styleEl = this.createStyleElement('mobilecssurl-' + siteId, disabled);
+
+        document.head.appendChild(styleEl);
+        this.stylesEls[siteId] = {
+            element: styleEl,
+            hash: ''
+        };
+    }
+
     /**
      * Load styles for a certain site.
      *
@@ -265,18 +306,21 @@ export class AddonRemoteThemesProvider {
         return this.wsProvider.getText(url).then((text) => {
             text = this.get35Styles(text);
 
-            const styleEl = document.createElement('style');
+            this.initSiteStyleElement(this.TMP_SITE_ID, false);
-            styleEl.setAttribute('id', 'mobilecssurl-tmpsite');
+            this.stylesEls[this.TMP_SITE_ID].element.innerHTML = text;
-            styleEl.innerHTML = text;
-
-            document.head.appendChild(styleEl);
-            this.stylesEls.tmpsite = {
-                element: styleEl,
-                hash: ''
-            };
         });
     }
 
+    /**
+     * Load styles for a temporary site, given its public config. These styles aren't prefetched.
+     *
+     * @param config Site public config.
+     * @return Promise resolved when loaded.
+     */
+    loadTmpStylesForSiteConfig(config: any): Promise<any> {
+        return this.loadTmpStyles(config.mobilecssurl);
+    }
+
     /**
      * Preload the styles of the current site (stored in DB).
      *
@@ -322,6 +366,6 @@ export class AddonRemoteThemesProvider {
      * Unload styles for a temporary site.
      */
     unloadTmpStyles(): void {
-        return this.removeSite('tmpsite');
+        return this.removeSite(this.TMP_SITE_ID);
     }
 }

src/addon/remotethemes/remotethemes.module.ts

@@ -102,7 +102,7 @@ export class AddonRemoteThemesModule {
 
         // Load temporary styles when site config is checked in login.
         eventsProvider.on(CoreEventsProvider.LOGIN_SITE_CHECKED, (data) => {
-            remoteThemesProvider.loadTmpStyles(data.config.mobilecssurl).catch((error) => {
+            remoteThemesProvider.loadTmpStylesForSiteConfig(data.config).catch((error) => {
                 logger.error('Error loading tmp styles', error);
             });
         });