From 62005141132da1e9761598fa3e4b35b4dab38a89 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Sat, 21 Dec 2019 02:06:02 +0100
Subject: Implemented VueX and a basic UIStore with the fullscreen mutation
 Some renaming

---
 viewer/src/main.ts                |  4 +++-
 viewer/src/plugins/fontawesome.js |  9 ---------
 viewer/src/plugins/fontawesome.ts |  9 +++++++++
 viewer/src/plugins/vuex.ts        | 23 +++++++++++++++++++++++
 viewer/src/store/uiStore.ts       | 15 +++++++++++++++
 viewer/src/views/LdGallery.vue    | 16 +++++++---------
 6 files changed, 57 insertions(+), 19 deletions(-)
 delete mode 100644 viewer/src/plugins/fontawesome.js
 create mode 100644 viewer/src/plugins/fontawesome.ts
 create mode 100644 viewer/src/plugins/vuex.ts
 create mode 100644 viewer/src/store/uiStore.ts

(limited to 'viewer/src')

diff --git a/viewer/src/main.ts b/viewer/src/main.ts
index 352b565..3a3593c 100644
--- a/viewer/src/main.ts
+++ b/viewer/src/main.ts
@@ -2,6 +2,7 @@ import Vue from "vue";
 import "@/assets/scss/global.scss";
 import "@/plugins/fontawesome";
 import "@/plugins/buefy";
+import store from '@/plugins/vuex'
 import i18n from "@/plugins/i18n";
 import router from "@/router";
 import LdGallery from "@/views/LdGallery.vue";
@@ -11,5 +12,6 @@ Vue.config.productionTip = false;
 new Vue({
   router,
   i18n,
-  render: h => h(LdGallery),
+  store,
+  render: h => h(LdGallery)
 }).$mount("#ldgallery");
diff --git a/viewer/src/plugins/fontawesome.js b/viewer/src/plugins/fontawesome.js
deleted file mode 100644
index 9bf4dba..0000000
--- a/viewer/src/plugins/fontawesome.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import Vue from "vue";
-
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faExpandArrowsAlt } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-
-library.add(faExpandArrowsAlt);
-
-Vue.component("fa-icon", FontAwesomeIcon);
diff --git a/viewer/src/plugins/fontawesome.ts b/viewer/src/plugins/fontawesome.ts
new file mode 100644
index 0000000..9bf4dba
--- /dev/null
+++ b/viewer/src/plugins/fontawesome.ts
@@ -0,0 +1,9 @@
+import Vue from "vue";
+
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faExpandArrowsAlt } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+
+library.add(faExpandArrowsAlt);
+
+Vue.component("fa-icon", FontAwesomeIcon);
diff --git a/viewer/src/plugins/vuex.ts b/viewer/src/plugins/vuex.ts
new file mode 100644
index 0000000..9b2fa46
--- /dev/null
+++ b/viewer/src/plugins/vuex.ts
@@ -0,0 +1,23 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import { extractVuexModule } from "vuex-class-component";
+import { createProxy } from "vuex-class-component";
+import UIStore from '@/store/uiStore';
+
+Vue.use(Vuex)
+
+const store = new Vuex.Store({
+  modules: {
+    ...extractVuexModule(UIStore)
+  }
+});
+
+Vue.use((vue) => vue.prototype.$uiStore = createProxy(store, UIStore));
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    $uiStore: UIStore
+  }
+}
+
+export default store;
diff --git a/viewer/src/store/uiStore.ts b/viewer/src/store/uiStore.ts
new file mode 100644
index 0000000..c4143a1
--- /dev/null
+++ b/viewer/src/store/uiStore.ts
@@ -0,0 +1,15 @@
+import { createModule, mutation, action } from "vuex-class-component";
+
+const VuexModule = createModule({
+    namespaced: "uiStore",
+    strict: true
+})
+
+export default class UIStore extends VuexModule {
+
+    fullscreen: boolean = false;
+
+    @mutation toggleFullscreen() {
+        this.fullscreen = !this.fullscreen;
+    }
+}
diff --git a/viewer/src/views/LdGallery.vue b/viewer/src/views/LdGallery.vue
index 98f083f..d22bfa6 100644
--- a/viewer/src/views/LdGallery.vue
+++ b/viewer/src/views/LdGallery.vue
@@ -1,9 +1,13 @@
 <template>
-  <div :class="{fullscreen}">
+  <div :class="{fullscreen: $uiStore.fullscreen}">
     <div class="layout top">header</div>
     <div class="layout left">panel</div>
     <router-view class="layout content" />
-    <fa-icon icon="expand-arrows-alt" class="layout button-fullscreen" @click="toggleFullscreen" />
+    <fa-icon
+      icon="expand-arrows-alt"
+      class="layout button-fullscreen"
+      @click="$uiStore.toggleFullscreen()"
+    />
   </div>
 </template>
 
@@ -11,13 +15,7 @@
 import { Component, Vue } from "vue-property-decorator";
 
 @Component
-export default class LdGallery extends Vue {
-  fullscreen: boolean = false;
-
-  toggleFullscreen() {
-    this.fullscreen = !this.fullscreen;
-  }
-}
+export default class LdGallery extends Vue {}
 </script>
 
 <style lang="scss">
-- 
cgit v1.2.3