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/README.md | 2 +- viewer/package-lock.json | 70 ++++++++++++++++----------------------- viewer/package.json | 9 +++-- 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 ++++----- 9 files changed, 92 insertions(+), 65 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 diff --git a/viewer/README.md b/viewer/README.md index 7a84865..2da36b3 100644 --- a/viewer/README.md +++ b/viewer/README.md @@ -1,4 +1,4 @@ -# ldgallery-front +# ldgallery-viewer ## Project setup ``` diff --git a/viewer/package-lock.json b/viewer/package-lock.json index 42eaa98..0b287d9 100644 --- a/viewer/package-lock.json +++ b/viewer/package-lock.json @@ -1,5 +1,5 @@ { - "name": "ldgallery-front", + "name": "ldgallery-viewer", "version": "0.1.0", "lockfileVersion": 1, "requires": true, @@ -2352,8 +2352,7 @@ "balanced-match": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", - "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", - "dev": true + "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=" }, "base": { "version": "0.11.2", @@ -2559,7 +2558,6 @@ "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", - "dev": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -3408,8 +3406,7 @@ "concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", - "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", - "dev": true + "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=" }, "concat-stream": { "version": "1.6.2", @@ -4088,7 +4085,6 @@ "version": "1.1.3", "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz", "integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==", - "dev": true, "requires": { "object-keys": "^1.0.12" } @@ -4521,7 +4517,6 @@ "version": "1.17.0-next.1", "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.0-next.1.tgz", "integrity": "sha512-7MmGr03N7Rnuid6+wyhD9sHNE2n4tFSwExnU2lQl3lIo2ShXWGePY80zYaoMOmILWv57H0amMjZGHNzzGG70Rw==", - "dev": true, "requires": { "es-to-primitive": "^1.2.1", "function-bind": "^1.1.1", @@ -4540,7 +4535,6 @@ "version": "1.2.1", "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz", "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==", - "dev": true, "requires": { "is-callable": "^1.1.4", "is-date-object": "^1.0.1", @@ -5406,8 +5400,7 @@ "fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", - "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=", - "dev": true + "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=" }, "fsevents": { "version": "1.2.11", @@ -5982,8 +5975,7 @@ "function-bind": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", - "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==", - "dev": true + "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==" }, "functional-red-black-tree": { "version": "1.0.1", @@ -6093,7 +6085,6 @@ "version": "7.1.6", "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz", "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==", - "dev": true, "requires": { "fs.realpath": "^1.0.0", "inflight": "^1.0.4", @@ -6225,7 +6216,6 @@ "version": "1.0.3", "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==", - "dev": true, "requires": { "function-bind": "^1.1.1" } @@ -6256,8 +6246,7 @@ "has-symbols": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.1.tgz", - "integrity": "sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==", - "dev": true + "integrity": "sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==" }, "has-unicode": { "version": "2.0.1", @@ -6717,7 +6706,6 @@ "version": "1.0.6", "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=", - "dev": true, "requires": { "once": "^1.3.0", "wrappy": "1" @@ -6726,8 +6714,7 @@ "inherits": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", - "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", - "dev": true + "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" }, "inquirer": { "version": "7.0.1", @@ -6948,8 +6935,7 @@ "is-callable": { "version": "1.1.5", "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.1.5.tgz", - "integrity": "sha512-ESKv5sMCJB2jnHTWZ3O5itG+O128Hsus4K4Qh1h2/cgn2vbgnLSVqfV46AeJA9D5EeeLa9w81KUXMtn34zhX+Q==", - "dev": true + "integrity": "sha512-ESKv5sMCJB2jnHTWZ3O5itG+O128Hsus4K4Qh1h2/cgn2vbgnLSVqfV46AeJA9D5EeeLa9w81KUXMtn34zhX+Q==" }, "is-ci": { "version": "1.2.1", @@ -6997,8 +6983,7 @@ "is-date-object": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.2.tgz", - "integrity": "sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==", - "dev": true + "integrity": "sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==" }, "is-descriptor": { "version": "0.1.6", @@ -7136,7 +7121,6 @@ "version": "1.0.5", "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.5.tgz", "integrity": "sha512-vlKW17SNq44owv5AQR3Cq0bQPEb8+kF3UKZ2fiZNOWtztYE5i0CzCZxFDwO58qAOWtxdBRVO/V5Qin1wjCqFYQ==", - "dev": true, "requires": { "has": "^1.0.3" } @@ -7166,7 +7150,6 @@ "version": "1.0.3", "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.3.tgz", "integrity": "sha512-OwijhaRSgqvhm/0ZdAcXNZt9lYdKFpcRDT5ULUuYXPoT794UNOdU+gpT6Rzo7b4V2HUl/op6GqY894AZwv9faQ==", - "dev": true, "requires": { "has-symbols": "^1.0.1" } @@ -7919,7 +7902,6 @@ "version": "3.0.4", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", - "dev": true, "requires": { "brace-expansion": "^1.1.7" } @@ -8468,8 +8450,7 @@ "object-inspect": { "version": "1.7.0", "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.7.0.tgz", - "integrity": "sha512-a7pEHdh1xKIAgTySUGgLMx/xwDZskN1Ud6egYYN3EdRW4ZMPNEDUTF+hwy2LUC+Bl+SyLXANnwz/jyh/qutKUw==", - "dev": true + "integrity": "sha512-a7pEHdh1xKIAgTySUGgLMx/xwDZskN1Ud6egYYN3EdRW4ZMPNEDUTF+hwy2LUC+Bl+SyLXANnwz/jyh/qutKUw==" }, "object-is": { "version": "1.0.2", @@ -8480,8 +8461,7 @@ "object-keys": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz", - "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==", - "dev": true + "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==" }, "object-visit": { "version": "1.0.1", @@ -8496,7 +8476,6 @@ "version": "4.1.0", "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.0.tgz", "integrity": "sha512-exHJeq6kBKj58mqGyTQ9DFvrZC/eR6OwxzoM9YRoGBqrXYonaFyGiFMuc9VZrXf7DarreEwMpurG3dd+CNyW5w==", - "dev": true, "requires": { "define-properties": "^1.1.2", "function-bind": "^1.1.1", @@ -8508,7 +8487,6 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.0.tgz", "integrity": "sha512-Z53Oah9A3TdLoblT7VKJaTDdXdT+lQO+cNpKVnya5JDe9uLvzu1YyY1yFDFrcxrlRgWrEFH0jJtD/IbuwjcEVg==", - "dev": true, "requires": { "define-properties": "^1.1.3", "es-abstract": "^1.17.0-next.1" @@ -8560,7 +8538,6 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", - "dev": true, "requires": { "wrappy": "1" } @@ -8878,8 +8855,7 @@ "path-is-absolute": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", - "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=", - "dev": true + "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=" }, "path-is-inside": { "version": "1.0.2", @@ -10173,7 +10149,6 @@ "version": "2.7.1", "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz", "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==", - "dev": true, "requires": { "glob": "^7.1.3" } @@ -11203,7 +11178,6 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/string.prototype.trimleft/-/string.prototype.trimleft-2.1.1.tgz", "integrity": "sha512-iu2AGd3PuP5Rp7x2kEZCrB2Nf41ehzh+goo8TV7z8/XDBbsvc6HQIlUl9RjkZ4oyrW1XM5UwlGl1oVEaDjg6Ag==", - "dev": true, "requires": { "define-properties": "^1.1.3", "function-bind": "^1.1.1" @@ -11213,7 +11187,6 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/string.prototype.trimright/-/string.prototype.trimright-2.1.1.tgz", "integrity": "sha512-qFvWL3/+QIgZXVmJBfpHmxLB7xsUXz6HsUmP8+5dRaC3Q7oKUv9Vo6aMCRZC1smrtyECFsIT30PqBJ1gTjAs+g==", - "dev": true, "requires": { "define-properties": "^1.1.3", "function-bind": "^1.1.1" @@ -12331,6 +12304,20 @@ "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==", "dev": true }, + "vuex": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.2.tgz", + "integrity": "sha512-ha3jNLJqNhhrAemDXcmMJMKf1Zu4sybMPr9KxJIuOpVcsDQlTBYLLladav2U+g1AvdYDG5Gs0xBTb0M5pXXYFQ==" + }, + "vuex-class-component": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/vuex-class-component/-/vuex-class-component-2.2.1.tgz", + "integrity": "sha512-ViHL2BVWPoqmPdZbzqQV/6Txa28nLNf9j9W9w4y7bTDh/noR2TPxPppRYC9FmZBmi+Q0OwJaSy2Ue23fi6/iCg==", + "requires": { + "object.getownpropertydescriptors": "^2.0.3", + "rimraf": "^2.6.3" + } + }, "watchpack": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz", @@ -12806,8 +12793,7 @@ "wrappy": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", - "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", - "dev": true + "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=" }, "write": { "version": "1.0.3", @@ -13007,4 +12993,4 @@ } } } -} +} \ No newline at end of file diff --git a/viewer/package.json b/viewer/package.json index f1c6759..0431c27 100644 --- a/viewer/package.json +++ b/viewer/package.json @@ -1,5 +1,5 @@ { - "name": "ldgallery-front", + "name": "ldgallery-viewer", "version": "0.1.0", "private": true, "scripts": { @@ -18,7 +18,9 @@ "vue-class-component": "^7.0.2", "vue-i18n": "^8.0.0", "vue-property-decorator": "^8.3.0", - "vue-router": "^3.1.3" + "vue-router": "^3.1.3", + "vuex": "^3.1.2", + "vuex-class-component": "^2.2.1" }, "devDependencies": { "@types/webpack": "^4.4.0", @@ -28,6 +30,7 @@ "@vue/cli-plugin-eslint": "^4.1.1", "@vue/cli-plugin-router": "^4.1.0", "@vue/cli-plugin-typescript": "^4.1.0", + "@vue/cli-plugin-vuex": "^4.1.1", "@vue/cli-service": "^4.1.0", "@vue/eslint-config-typescript": "^5.0.1", "eslint": "^6.8.0", @@ -40,4 +43,4 @@ "vue-cli-plugin-i18n": "^0.6.0", "vue-template-compiler": "^2.6.10" } -} +} \ No newline at end of file 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 @@ @@ -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 {}