1.1.0

banthagroup · Aug 14, 2020 · 2ad3bec · 2ad3bec
1 parent b75e5f2
commit 2ad3bec
Show file tree

Hide file tree

Showing 57 changed files with 2,268 additions and 2,708 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,5 +1,5 @@
 {
   "presets": [
     "@babel/preset-env"
-  ]
+    ]
 }
diff --git a/.npmignore b/.npmignore
@@ -4,14 +4,13 @@
 /node_modules
 /src
 /tests
-/todo
 /.babelrc
 /.gitignore
 /.npmignore
 /gulpfile.babel.js
 /index.html
 /jest-setup.js
 /setupTests.js
-/webpack-prod.config.js
+/webpack.prod.config.js
 /webpack.config.js
 /yarn.lock
diff --git a/demo/Demo.vue b/demo/Demo.vue
@@ -6,40 +6,54 @@
 
         <FsLightbox
             :toggler="toggler"
-            :slide="slide"
-            :videos-posters="[null, '/demo/img/1.jpeg']"
-            :sources="['img']"
+            :videos-posters="[null, null]"
+            :sources="testSources"
             :onInit="action"
             :disable-local-storage="true"
             :load-only-current-source="true"
+            :custom-attributes="[
+                {
+                    alt: 'siema',
+                    elo: 'dupas'
+                },
+                {
+                    poster: 'supa-poster',
+                    bombster: 'supa-bombster'
+                },
+                {
+                    supaat: 'supa'
+                }
+            ]"
         />
     </div>
 </template>
 
 <script>
-    import ExampleCustom from "./ExampleCustom.vue";
-    import { testSources } from "../tests/__tests-services__/testVars";
+import ExampleCustom from "./ExampleCustom.vue";
+import { testSources } from "../tests/__tests-services__/testVars";
+import FsLightbox from "../src/FsLightbox.vue";
 
-    export default {
-        components: { FsLightbox: () => import('fslightbox-vue') },
-        data() {
-            testSources.push({ component: ExampleCustom, props: { siema: 'jd' } });
+export default {
+    components: {
+        FsLightbox
+    },
+    data() {
+        testSources.push({ component: ExampleCustom, props: { siema: 'jd' } });
 
-            return {
-                ExampleCustom: ExampleCustom,
-                toggler: false,
-                slide: 1,
-                testSources: testSources
-            }
+        return {
+            ExampleCustom: ExampleCustom,
+            toggler: false,
+            slide: 1,
+            testSources: testSources
+        }
+    },
+    methods: {
+        openLightboxOnSlide: function (number) {
+            this.toggler = !this.toggler;
         },
-        methods: {
-            openLightboxOnSlide: function(number) {
-                this.slide = number;
-                this.toggler = !this.toggler;
-            },
-            action() {
+        action() {
 
-            }
         }
     }
+}
 </script>
diff --git a/index.js b/index.js
diff --git a/package.json b/package.json
@@ -1,12 +1,12 @@
 {
   "name": "fslightbox-vue",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "description": "Vue version of Fullscreen Lightbox. Modern and easy plugin for displaying images and videos in clean overlaying box. Display single source or create beautiful gallery with powerful lightbox.",
   "main": "index.js",
   "scripts": {
     "test": "jest",
-    "production": "webpack --mode production --config webpack-prod.config.js --display-modules && gulp",
-    "watch": "webpack-dev-server --mode development --open --host"
+    "production": "webpack --mode production --config webpack.prod.config.js --display-modules && gulp",
+    "watch": "webpack-dev-server --mode development --host 0.0.0.0"
   },
   "repository": {
     "type": "git",

diff --git a/src/FsLightbox.vue b/src/FsLightbox.vue
@@ -8,101 +8,101 @@
 </template>
 
 <script>
-    import "./core/styles/styles-injection/styles-injection";
-    import { fsLightboxStore } from "./fsLightboxStore";
-    import { FsLightbox } from "./FsLightbox";
-    import Naver from './components/nav/Naver.vue';
-    import SourcesOutersWrapper from "./components/sources/SourcesOutersWrapper.vue";
-    import SlideButtons from "./components/SlideButtons.vue";
-    import SlideSwipingHoverer from "./components/SlideSwipingHoverer.vue";
-    import { runLightboxMountedActions } from "./core/main-component/mounting/runLightboxMountedActions";
+import "./core/styles/styles-injection/styles-injection";
+import { fsLightboxStore } from "./fsLightboxStore";
+import { FsLightbox } from "./FsLightbox";
+import Naver from './components/nav/Naver.vue';
+import SourcesOutersWrapper from "./components/sources/SourcesOutersWrapper.vue";
+import SlideButtons from "./components/SlideButtons.vue";
+import SlideSwipingHoverer from "./components/SlideSwipingHoverer.vue";
+import { runLightboxMountedActions } from "./core/main-component/mounting/runLightboxMountedActions";
 
-    let updatedCallback;
+let updatedCallback;
 
-    export default {
-        props: {
-            toggler: Boolean,
-            sources: Array,
+export default {
+    props: {
+        toggler: Boolean,
+        sources: Array,
+        customSources: Array, // deprecated 1.1.0
 
-            // custom sources
-            customSources: Array,
+        // slide number controlling
+        slide: Number,
+        source: String,
+        sourceIndex: Number,
 
-            // slide number controlling
-            slide: Number,
-            source: String,
-            sourceIndex: Number,
+        // events
+        onOpen: Function,
+        onClose: Function,
+        onInit: Function,
+        onShow: Function,
 
-            // events
-            onOpen: Function,
-            onClose: Function,
-            onInit: Function,
-            onShow: Function,
+        // types
+        disableLocalStorage: Boolean,
+        types: Array,
+        type: String,
 
-            // types
-            disableLocalStorage: Boolean,
-            types: Array,
-            type: String,
+        // sources
+        customAttributes: Array,
+        videosPosters: Array, // deprecated 1.1.0
+        maxYoutubeVideoDimensions: Object,
 
-            // sources
-            videosPosters: Array,
-            maxYoutubeVideoDimensions: Object,
-
-            // preferences
-            loadOnlyCurrentSource: Boolean,
-            slideDistance: { type: Number, default: 0.3 },
-            openOnMount: Boolean,
+        // preferences
+        loadOnlyCurrentSource: Boolean,
+        slideDistance: { type: Number, default: 0.3 },
+        openOnMount: Boolean,
+        exitFullscreenOnClose: Boolean
+    },
+    components: { SlideButtons, SourcesOutersWrapper, Naver, SlideSwipingHoverer },
+    data () {
+        return {
+            isOpen: this.openOnMount
+        };
+    },
+    watch: {
+        slide: function (newSlide) {
+            fsLightboxStore[this.fsLightboxIndex].core.lightboxUpdater.runCurrentStageIndexUpdateActionsFor(newSlide - 1);
         },
-        components: { SlideButtons, SourcesOutersWrapper, Naver, SlideSwipingHoverer },
-        data() {
-            return {
-                isOpen: this.openOnMount
-            };
+        sourceIndex: function (newSourceIndex) {
+            fsLightboxStore[this.fsLightboxIndex].core.lightboxUpdater.runCurrentStageIndexUpdateActionsFor(newSourceIndex);
         },
-        watch: {
-            slide: function(newSlide) {
-                fsLightboxStore[this.fsLightboxIndex].core.lightboxUpdater.runCurrentStageIndexUpdateActionsFor(newSlide - 1);
-            },
-            sourceIndex: function(newSourceIndex) {
-                fsLightboxStore[this.fsLightboxIndex].core.lightboxUpdater.runCurrentStageIndexUpdateActionsFor(newSourceIndex);
-            },
-            source: function(newSource) {
-                fsLightboxStore[this.fsLightboxIndex].core.lightboxUpdater.runCurrentStageIndexUpdateActionsFor(
-                    this.sources.indexOf(newSource)
-                );
-            },
-            /**
-             * Toggler watcher must be after slide change watchers -
-             * if both are updated simultaneously slide change must be called first
-             */
-            toggler: function() {
-                fsLightboxStore[this.fsLightboxIndex].core.lightboxUpdater.handleTogglerUpdate();
-            }
+        source: function (newSource) {
+            fsLightboxStore[this.fsLightboxIndex].core.lightboxUpdater.runCurrentStageIndexUpdateActionsFor(
+                this.sources.indexOf(newSource)
+            );
         },
-        created() {
-            this.fsLightboxIndex = fsLightboxStore.push(new FsLightbox(this)) - 1;
+        /**
+         * Toggler watcher must be after slide change watchers -
+         * if both are updated simultaneously slide change must be called first
+         */
+        toggler: function () {
+            fsLightboxStore[this.fsLightboxIndex].core.lightboxUpdater.handleTogglerUpdate();
+        }
+    },
+    created () {
+        this.fsLightboxIndex = fsLightboxStore.push(new FsLightbox(this)) - 1;
 
-            const isLightboxOpenManger = fsLightboxStore[this.fsLightboxIndex].componentsServices.isLightboxOpenManager;
-            isLightboxOpenManger.get = () => this.isOpen;
-            isLightboxOpenManger.set = (value, callback) => {
-                this.isOpen = value;
+        const isLightboxOpenManger = fsLightboxStore[this.fsLightboxIndex].componentsServices.isLightboxOpenManager;
+        isLightboxOpenManger.get = () => this.isOpen;
+        isLightboxOpenManger.set = (value, callback) => {
+            this.isOpen = value;
 
-                if (callback) {
-                    updatedCallback = callback;
-                }
-            };
-        },
-        mounted() {
-            fsLightboxStore[this.fsLightboxIndex].elements.container = this.$refs['container'];
-            runLightboxMountedActions(fsLightboxStore[this.fsLightboxIndex]);
-        },
-        updated() {
-            fsLightboxStore[this.fsLightboxIndex].elements.container = this.$refs['container'];
-
-            if (updatedCallback) {
-                updatedCallback();
+            if (callback) {
+                updatedCallback = callback;
             }
+        };
+    },
+    mounted () {
+        fsLightboxStore[this.fsLightboxIndex].elements.container = this.$refs['container'];
+        runLightboxMountedActions(fsLightboxStore[this.fsLightboxIndex]);
+    },
+    updated () {
+        fsLightboxStore[this.fsLightboxIndex].elements.container = this.$refs['container'];
 
-            updatedCallback = null;
+        if (updatedCallback) {
+            updatedCallback();
         }
-    };
+
+        updatedCallback = null;
+    }
+};
 </script>
diff --git a/src/components/SlideSwipingHoverer.test.js b/src/components/SlideSwipingHoverer.test.js
@@ -6,16 +6,16 @@ fsLightboxStore[2] = {
     componentsServices: { hideSlideSwipingHoverer: null, showSlideSwipingHoverer: null }
 };
 
-test('SlideSwipingHoverer', () => {
+test('SlideSwipingHoverer', async () => {
     const slideSwipingHoverer = shallowMount(SlideSwipingHoverer, {
         propsData: { fsLightboxIndex: 2 }
     });
 
-    expect(slideSwipingHoverer.contains('div')).toBe(false);
+    expect(slideSwipingHoverer.find('div').exists()).toBe(false);
 
-    fsLightboxStore[2].componentsServices.showSlideSwipingHoverer();
-    expect(slideSwipingHoverer.contains('div')).toBe(true);
+    await fsLightboxStore[2].componentsServices.showSlideSwipingHoverer();
+    expect(slideSwipingHoverer.find('div').exists()).toBe(true);
 
-    fsLightboxStore[2].componentsServices.hideSlideSwipingHoverer();
-    expect(slideSwipingHoverer.contains('div')).toBe(false);
+    await fsLightboxStore[2].componentsServices.hideSlideSwipingHoverer();
+    expect(slideSwipingHoverer.find('div').exists()).toBe(false);
 });
diff --git a/src/components/nav/Naver.test.js b/src/components/nav/Naver.test.js
@@ -9,9 +9,9 @@ fsLightboxStore[0] = {
 
 test('Nav', () => {
     let nav = shallowMount(Nav, { propsData: { fsLightboxIndex: 0 } });
-    expect(nav.contains(SlideNumber)).toBe(false);
+    expect(nav.findComponent(SlideNumber).exists()).toBe(false);
 
     fsLightboxStore[0].data.sources.length = 2;
     nav = shallowMount(Nav, { propsData: { fsLightboxIndex: 0 } });
-    expect(nav.contains(SlideNumber)).toBe(true);
+    expect(nav.findComponent(SlideNumber).exists()).toBe(true);
 });
diff --git a/src/components/nav/SlideNumber.test.js b/src/components/nav/SlideNumber.test.js
@@ -2,7 +2,7 @@ import SlideNumber from "./SlideNumber.vue";
 import { mount } from "@vue/test-utils";
 import { fsLightboxStore } from "../../fsLightboxStore";
 
-test('SlideNumber', () => {
+test('SlideNumber', async () => {
     fsLightboxStore[0] = {
         componentsServices: {},
         data: { sources: { length: 3 } },
@@ -14,6 +14,6 @@ test('SlideNumber', () => {
     expect(slideNumberInnerChildren[0].innerHTML).toBe('2');
     expect(slideNumberInnerChildren[2].innerHTML).toBe('3');
 
-    fsLightboxStore[0].componentsServices.setSlideNumber(1);
+    await fsLightboxStore[0].componentsServices.setSlideNumber(1);
     expect(slideNumberInnerChildren[0].innerHTML).toBe('1');
 });
diff --git a/src/components/nav/toolbar/toolbar-buttons/CloseButton.vue b/src/components/nav/toolbar/toolbar-buttons/CloseButton.vue
@@ -9,16 +9,16 @@
 </template>
 
 <script>
-    import ToolbarButton from "../ToolbarButton.vue";
-    import { fsLightboxStore } from "../../../../fsLightboxStore";
+import ToolbarButton from "../ToolbarButton.vue";
+import { fsLightboxStore } from "../../../../fsLightboxStore";
 
-    export default {
-        components: { ToolbarButton },
-        props: { fsLightboxIndex: Number },
-        data() {
-            return {
-                onClick: fsLightboxStore[this.fsLightboxIndex].core.lightboxCloser.close
-            }
+export default {
+    components: { ToolbarButton },
+    props: { fsLightboxIndex: Number },
+    data() {
+        return {
+            onClick: fsLightboxStore[this.fsLightboxIndex].core.lightboxCloser.closeLightbox
         }
     }
+}
 </script>