Moved node-vibrant to index.html

gmemstr · gmemstr · commit 9d39380d1fb7 · 2017-12-21T11:53:53.000-08:00
Themeing via index.js / App.vue was buggy and unreliable, this is a temporary workaround for "real time" themeing from the logo colours. Have to build in fallbacks if colours are not found.
diff --git a/README.md b/README.md
@@ -0,0 +1,7 @@
+# pogo-vue
+
+This repository holds the source code for the new Vue.js-based webapps for Pogo's frontend. It's divided into two directories.
+
+ - `admin/` is the where the admin interface is, ported from the DeV interface in the main Pogo repository.
+
+ - `main/` is the client frontend for perusing the feed and listening to episodes.
diff --git a/main/index.html b/main/index.html
@@ -8,5 +8,16 @@
   <body>
     <div id="app"></div>
     <!-- built files will be auto injected -->
+    <script type="text/javascript" src="./node_modules/node-vibrant/dist/vibrant.js"></script>
+    <script>
+		Vibrant.from('logo.png').getPalette().then(function(palette) {
+			var css = document.createElement('style')
+     css.type = 'text/css'
+     var styles = 'a {color:' + palette.Vibrant.getHex() + ';} footer {background-color:' + palette.DarkMuted.getHex() + ';}'
+     if (css.styleSheet) css.styleSheet.cssText = style
+     else css.appendChild(document.createTextNode(styles))
+     document.getElementsByTagName('head')[0].appendChild(css)
+		});
+    </script>
   </body>
 </html>
diff --git a/main/src/App.vue b/main/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <router-link to="/"><img src="/assets/logo-large.png" class="logo"></router-link>
+    <router-link to="/"><img src="logo.png" class="logo"></router-link>
     <a href="/admin" class="admin">Admin</a>
     <router-view/>
     <footer>
@@ -11,22 +11,7 @@
 
 <script>
 export default {
-  name: 'app',
-  created () {
-    this.setStyling()
-  },
-  methods: {
-    setStyling () {
-      var store = window.localStorage
-      var css = document.createElement('style')
-      css.type = 'text/css'
-      var styles = 'a {color:' + store.getItem('colourLink') + ';} footer {background-color:' + store.getItem('colourAccent') + ';}'
-      if (css.styleSheet) css.styleSheet.cssText = styles
-      else css.appendChild(document.createTextNode(styles))
-      document.getElementsByTagName('head')[0].appendChild(css)
-      store.setItem('applied', true)
-    }
-  }
+  name: 'app'
 }
 </script>
 
diff --git a/main/src/main.js b/main/src/main.js
@@ -3,33 +3,6 @@
 import Vue from 'vue'
 import App from './App'
 import router from './router'
-import * as Vibrant from 'node-vibrant'
-
-Vue.mixin({
-  created: function () {
-    var colours = this.$options.colours
-    var store = window.localStorage
-    Vibrant.from('/assets/logo-large.png').getPalette((err, p) => {
-      if (err === null) {
-        colours = p
-        console.log(p)
-        var colourLink = colours.Vibrant.getHex()
-        try {
-          var colourAccent = colours.LightVibrant.getHex()
-        } catch (e) {
-          colourAccent = colours.DarkVibrant.getHex()
-        }
-        store.setItem('colourLink', colourLink)
-        store.setItem('colourAccent', colourAccent)
-        if (!store.getItem('applied')) {
-          location.reload()
-        }
-      } else {
-        console.log(err)
-      }
-    })
-  }
-})
 
 Vue.config.productionTip = false
 
