Added custom loader

ftgibran · Aug 13, 2017 · 49ed5a1 · 49ed5a1
1 parent 6b540cd
commit 49ed5a1
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 0 deletions.
diff --git a/src/components/CustomLoader.vue b/src/components/CustomLoader.vue
@@ -0,0 +1,11 @@
+<template>
+  <div :style="{color: this.color}">
+    <strong>Loading...</strong>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: ['color']
+  }
+</script>
diff --git a/src/index.js b/src/index.js
@@ -4,11 +4,16 @@ var api = {}
 
 var module = {
   effects: [],
+  loader: {},
 
   addEffect: function (name, func) {
     module.effects.push({name: name, func: func})
   },
 
+  addLoader: function (name, component) {
+    Object.assign(module.loader, {[name]: component})
+  },
+
   setAPI: function (obj) {
     api = obj
   },
@@ -39,6 +44,7 @@ var module = {
     }
 
     Vue.component('ApiRequest', ApiRequest)
+    Vue.options.components['ApiRequest'].mixin({components: module.loader})
   }
 }
 

diff --git a/src/main.js b/src/main.js
@@ -4,8 +4,12 @@ import AppRouter from './service/AppRouter'
 import AppResource from './service/AppResource'
 import VueApiRequest from './index'
 import { TweenLite, Power2 } from 'gsap'
+import CustomLoader from './components/CustomLoader.vue'
 
 VueApiRequest.setAPI(AppResource)
+
+VueApiRequest.addLoader('CustomLoader', CustomLoader)
+
 VueApiRequest.addEffect('blur', (el) => {
   el.style.filter = 'blur(10px)'
   TweenLite.to(el, 0.5, {