Implemented pre-loading external style functionality

src/components/FilterTile.vue

@@ -15,14 +15,19 @@
           @click="clearFilterInput"></i>
       </form>
       <div class="options-container">
+        <div class="theme-selector">
+          <ThemeSelector :themes="availableThemes" />
+        </div>
+        <div>
         <span class="options-label">Layout</span>
-        <div class="display-options">
-          <IconDeafault @click="updateDisplayLayout('default')"
-            :class="`layout-icon ${displayLayout === 'default' ? 'selected' : ''}`" />
-          <IconHorizontal class="layout-icon" @click="updateDisplayLayout('horizontal')"
-            :class="`layout-icon ${displayLayout === 'horizontal' ? 'selected' : ''}`" />
-          <IconVertical class="layout-icon" @click="updateDisplayLayout('vertical')"
-            :class="`layout-icon ${displayLayout === 'vertical' ? 'selected' : ''}`" />
+          <div class="display-options">
+            <IconDeafault @click="updateDisplayLayout('default')"
+              :class="`layout-icon ${displayLayout === 'default' ? 'selected' : ''}`" />
+            <IconHorizontal class="layout-icon" @click="updateDisplayLayout('horizontal')"
+              :class="`layout-icon ${displayLayout === 'horizontal' ? 'selected' : ''}`" />
+            <IconVertical class="layout-icon" @click="updateDisplayLayout('vertical')"
+              :class="`layout-icon ${displayLayout === 'vertical' ? 'selected' : ''}`" />
+          </div>
         </div>
       </div>
       <KeyboardShortcutInfo />
@@ -31,6 +36,7 @@
 
 <script>
 import KeyboardShortcutInfo from '@/components/KeyboardShortcutInfo';
+import ThemeSelector from '@/components/ThemeSelector';
 
 import IconDeafault from '@/assets/icons/layout-default.svg';
 import IconHorizontal from '@/assets/icons/layout-horizontal.svg';
@@ -45,9 +51,11 @@ export default {
   },
   props: {
     displayLayout: String,
+    availableThemes: Object,
   },
   components: {
     KeyboardShortcutInfo,
+    ThemeSelector,
     IconDeafault,
     IconHorizontal,
     IconVertical,
@@ -92,7 +100,7 @@ export default {
     display: flex;
     align-items: center;
     align-items: stretch;
-    background: linear-gradient(0deg, $background 0%, $header-color 100%);
+    background: linear-gradient(0deg, var(--background) 0%, $header-color 100%);
   }
   form {
     border-radius: 0 0 20px 0;
@@ -100,7 +108,7 @@ export default {
     background: $header-color;
     label {
         display: inline;
-        color: $ascent;
+        color: var(--primary);
         margin: 0.5rem;
         display: inline;
     }
@@ -112,8 +120,8 @@ export default {
       outline: none;
       border: none;
       border-radius: 12px;
-      background: $background;
-      color: $ascent;
+      background: var(--background);
+      color: var(--primary);
       &:focus {
         background: $bg-with-opacity;
       }
@@ -121,7 +129,7 @@ export default {
     .clear-search {
       position: absolute;
       margin: 1em 0 0 -2em;
-      color: $ascent;
+      color: var(--primary);
       opacity: 0.5;
       border-radius: 50px;
       cursor: pointer;
@@ -133,13 +141,13 @@ export default {
   }
   .options-container {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     align-items: flex-end;
     justify-content: flex-end;
     flex: 1;
     padding: 0 1rem;
     border-radius: 20px 0 0;
-    background: $background;
+    background: var(--background);
 
     span.options-label {
       font-size: 0.8rem;
@@ -148,6 +156,13 @@ export default {
       text-align: left;
     }
 
+    .theme-selector {
+      align-items: center;
+      display: flex;
+      height: 100%;
+      padding: 0 1rem;
+    }
+
     .display-options {
       color: $ascent-with-opacity;
       svg {
@@ -159,14 +174,14 @@ export default {
         margin: 0.2rem;
         padding: 0.2rem;
         text-align: center;
-        background: $background;
+        background: var(--background);
         border: 1px solid currentColor;
         border-radius: 4px;
         opacity: 0.8;
         cursor: pointer;
         &:hover, &.selected {
           background: $ascent-with-opacity;
-          path { fill: $background; }
+          path { fill: var(--background); }
         }
       }
     }

src/components/ThemeSelector.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="theme-selector-section" v-if="themes" >
+    <span class="theme-label">Themes</span>
+    <v-select :options="themeNames" v-model="selectedTheme" label="Theme" class="theme-dropdown" />
+  </div>
+</template>
+
+<script>
+
+import ThemeHelper from '@/utils/ThemeHelper';
+
+export default {
+  name: 'ThemeSelector',
+  props: {
+    themes: Object,
+  },
+  watch: {
+    selectedTheme(newTheme) {
+      this.themeHelper.theme = newTheme;
+    },
+  },
+  data() {
+    return {
+      selectedTheme: 'Default',
+      themeHelper: new ThemeHelper(),
+      loading: true,
+    };
+  },
+  computed: {
+    themeNames: function themeNames() { return Object.keys(this.themes); },
+  },
+  created() {
+    const added = Object.keys(this.themes).map(
+      name => this.themeHelper.add(name, this.themes[name]),
+    );
+    Promise.all(added).then(sheets => {
+      console.log(`${sheets.length} themes loaded`);
+      this.loading = false;
+      this.themeHelper.theme = 'Deafault';
+    });
+  },
+};
+</script>
+
+<style lang="scss">
+
+@import '../../src/styles/color-pallet.scss';
+@import 'vue-select/src/scss/vue-select.scss';
+
+.theme-dropdown {
+  div.vs__dropdown-toggle {
+    border-color: var(--primary);
+    min-width: 10rem;
+    height: 2rem;
+  }
+  span.vs__selected, li.vs__dropdown-option {
+    color: var(--primary);
+  }
+  button.vs__clear, svg.vs__open-indicator {
+    fill: var(--primary);
+  }
+  ul.vs__dropdown-menu {
+    width: auto;
+    background: var(--background);
+  }
+  li.vs__dropdown-option--highlight {
+    background: var(--primary);
+    color: var(--background);
+  }
+}
+
+.theme-selector-section {
+  display: flex;
+  flex-direction: column;
+  opacity: 0.8;
+  span.theme-label {
+    font-size: 0.8rem;
+    color: var(--primary);
+    margin: 1px 0 2px 0;
+  }
+  &:hover {
+    opacity: 1;
+  }
+}
+
+</style>

src/utils/ThemeHelper.js

@@ -0,0 +1,38 @@
+/**
+ * A function for pre-loading, and easy switching of external stylesheets
+ */
+const ThemeHelper = function th() {
+  /* Preload content, to avoid FOUC */
+  const preloadTheme = (href) => {
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = href;
+    document.head.appendChild(link);
+    return new Promise((resolve, reject) => {
+      link.onload = e => {
+        const { sheet } = e.target;
+        sheet.disabled = true;
+        resolve(sheet);
+      };
+      link.onerror = reject;
+    });
+  };
+
+  const selectTheme = (themes, name) => {
+    const themeResults = themes;
+    if (name && !themes[name]) {
+      throw new Error(`'${name}' has not been defined as a theme.`);
+    }
+    Object.keys(themeResults).forEach(n => { themeResults[n].disabled = (n !== name); });
+  };
+
+  const themes = {};
+
+  return {
+    add(name, href) { return preloadTheme(href).then(s => { themes[name] = s; }); },
+    set theme(name) { selectTheme(themes, name); },
+    get theme() { return Object.keys(themes).find(n => !themes[n].disabled); },
+  };
+};
+
+export default ThemeHelper;

src/views/Home.vue

@@ -5,6 +5,7 @@
       @user-is-searchin="searching"
       @change-display-layout="setLayoutOrientation"
       :displayLayout="layout"
+      :availableThemes="getAvailibleThemes()"
       class="filter-container"
     />
     <!-- Main content, section for each group of items -->
@@ -31,7 +32,8 @@ import ItemGroup from '@/components/ItemGroup.vue';
 export default {
   name: 'home',
   props: {
-    sections: Array, // Main site configuration
+    sections: Array, // Main site content
+    appConfig: Object, // Main site configuation (optional)
   },
   components: {
     FilterTile,
@@ -94,6 +96,24 @@ export default {
     getLayoutOrientation() {
       return localStorage.layoutOrientation || 'default';
     },
+    getAvailibleThemes() {
+      const availibleThemes = {};
+      if (this.appConfig) {
+        if (this.appConfig.externalStyleSheet) {
+          const externals = this.appConfig.externalStyleSheet;
+          console.log(externals);
+          if (Array.isArray(externals)) {
+            externals.forEach((ext, i) => {
+              availibleThemes[`External Stylesheet ${i + 1}`] = ext;
+            });
+          } else {
+            availibleThemes['External Stylesheet'] = this.appConfig.externalStyleSheet;
+          }
+        }
+      }
+      availibleThemes.Deafault = '#';
+      return availibleThemes;
+    },
     /* Checks if any of the icons are Font Awesome glyphs */
     checkIfFontAwesomeNeeded() {
       let isFound = false;
@@ -125,7 +145,7 @@ export default {
 @import '../../src/styles/media-queries.scss';
 
 .home {
-  background: $background;
+  background: var(--background);
   padding-bottom: 1px;
   min-height: 90%;
 }