12 | `;
13 |
14 | exports[`global function v-pswp directive update directive value 1`] = `
15 | 
23 | `;
24 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2019 GuoQichen
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/tests/unit/__snapshots__/pswpUI.spec.ts.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`pswpUI.vue render PswpUI 1`] = `
4 |
33 | `;
34 |
--------------------------------------------------------------------------------
/example/video.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
9 |
10 |
11 |
12 |
59 |
68 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vue-pswipe",
3 | "version": "0.15.3",
4 | "description": "a vue plugin for photoswipe",
5 | "author": "guoqichen",
6 | "scripts": {
7 | "build": "vue-cli-service build --target lib --name Photoswipe ./src/main.ts",
8 | "dev": "vue-cli-service serve ./example/index.ts",
9 | "report": "npm run build -- --report",
10 | "test": "vue-cli-service test:unit --silent",
11 | "test:coverage": "npm test -- --coverage --silent"
12 | },
13 | "main": "dist/Photoswipe.umd.min.js",
14 | "dependencies": {
15 | "@types/photoswipe": "^4.1.1",
16 | "photoswipe": "^4.1.3"
17 | },
18 | "devDependencies": {
19 | "@types/jest": "^23.1.4",
20 | "@vue/cli-plugin-babel": "^3.9.2",
21 | "@vue/cli-plugin-eslint": "^3.9.2",
22 | "@vue/cli-plugin-typescript": "^3.9.0",
23 | "@vue/cli-plugin-unit-jest": "^3.9.0",
24 | "@vue/cli-service": "^3.9.3",
25 | "@vue/eslint-config-airbnb": "^3.0.5",
26 | "@vue/eslint-config-typescript": "^3.2.1",
27 | "@vue/test-utils": "1.0.0-beta.29",
28 | "babel-core": "7.0.0-bridge.0",
29 | "codecov": "^3.5.0",
30 | "sass": "^1.22.7",
31 | "sass-loader": "^7.1.0",
32 | "ts-jest": "^23.0.0",
33 | "typescript": "^3.5.3",
34 | "video.js": "^5.20.5",
35 | "vue": "^2.6.10",
36 | "vue-class-component": "^6.3.2",
37 | "vue-property-decorator": "^7.3.0",
38 | "vue-template-compiler": "^2.6.10"
39 | },
40 | "browserslist": [
41 | "> 1%",
42 | "last 2 versions",
43 | "not ie <= 8"
44 | ],
45 | "keywords": [
46 | "vue",
47 | "photoswipe"
48 | ],
49 | "license": "MIT",
50 | "repository": {
51 | "type": "git",
52 | "url": "https://github.com/GuoQichen/vue-pswipe.git"
53 | },
54 | "types": "types/index.d.ts"
55 | }
56 |
--------------------------------------------------------------------------------
/tests/unit/utils.spec.ts:
--------------------------------------------------------------------------------
1 | import '@/config'
2 | import { Event } from '@/utils'
3 |
4 | const MOCK_EVENT = 'mockEvent'
5 |
6 | describe('Event', () => {
7 | let mockFn: jest.Mock
8 | beforeEach(() => {
9 | mockFn = jest.fn()
10 | })
11 |
12 | afterEach(() => {
13 | mockFn.mockReset()
14 | Event.off(MOCK_EVENT)
15 | })
16 |
17 | describe('emit', () => {
18 | it('invoke register function (without args)', () => {
19 | Event.on(MOCK_EVENT, mockFn)
20 | Event.emit(MOCK_EVENT)
21 | expect(mockFn).toBeCalled()
22 | })
23 |
24 | it('invoke register function (with args)', () => {
25 | const args = [1, 2, 3]
26 | Event.on(MOCK_EVENT, mockFn)
27 | Event.emit(MOCK_EVENT, ...args)
28 | expect(mockFn).toBeCalledWith(...args)
29 | })
30 |
31 | it('no invoke unregister function (registered event)', () => {
32 | Event.emit(MOCK_EVENT, mockFn)
33 | expect(mockFn).not.toBeCalled()
34 | })
35 |
36 | it('no invoke unregister function (unregister event)', () => {
37 | Event.emit('otherMockEvent', mockFn)
38 | expect(mockFn).not.toBeCalled()
39 | })
40 | })
41 |
42 | describe('once', () => {
43 | it('invoke register function once', () => {
44 | Event.once(MOCK_EVENT, mockFn)
45 | Event.emit(MOCK_EVENT)
46 | Event.emit(MOCK_EVENT)
47 | expect(mockFn).toBeCalledTimes(1)
48 | })
49 | })
50 |
51 | describe('off', () => {
52 | it('clear all register function by event name', () => {
53 | const otherMockFn = jest.fn()
54 | Event.on(MOCK_EVENT, mockFn)
55 | Event.on(MOCK_EVENT, otherMockFn)
56 | Event.off(MOCK_EVENT)
57 | expect(mockFn).not.toBeCalled()
58 | expect(otherMockFn).not.toBeCalled()
59 | })
60 |
61 | it('clear register function by returned value by on', () => {
62 | Event.on(MOCK_EVENT, mockFn)()
63 | expect(mockFn).not.toBeCalled()
64 | })
65 |
66 | it('clear register function by function ref (correct ref)', () => {
67 | Event.on(MOCK_EVENT, mockFn)
68 | Event.off(MOCK_EVENT, mockFn)
69 | expect(mockFn).not.toBeCalled()
70 | })
71 |
72 | it('clear register function by function ref (incorrect ref)', () => {
73 | Event.on(MOCK_EVENT, mockFn)
74 | Event.off(MOCK_EVENT, jest.fn())
75 | Event.emit(MOCK_EVENT)
76 | expect(mockFn).toBeCalled()
77 | })
78 | })
79 | })
80 |
--------------------------------------------------------------------------------
/tests/unit/pswpUI.spec.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable import/first */
2 | import { PhotoSwipe, PhotoSwipeMock, createPswp, createPswpUI, mockImageOnload } from './util'
3 |
4 | import '@/config'
5 | import { transitionEndEventName } from '@/utils'
6 | import { CurrentPswpItem } from '@/type'
7 |
8 | describe('pswpUI.vue', () => {
9 | beforeEach(() => {
10 | expect(PhotoSwipe).not.toHaveBeenCalled()
11 | })
12 |
13 | afterEach(() => {
14 | PhotoSwipe.mockClear()
15 | })
16 |
17 | it('render PswpUI ', () => {
18 | expect(createPswpUI()).toMatchSnapshot()
19 | })
20 |
21 | describe('rotate function', () => {
22 | const createRotatePswp = () => {
23 | const pswpUIWrapper = createPswpUI()
24 |
25 | const pswpWrapper = createPswp({
26 | propsData: {
27 | rotate: true,
28 | },
29 | })
30 |
31 | const pswp = PhotoSwipeMock.getPswp()
32 |
33 | return {
34 | pswp,
35 | pswpWrapper,
36 | pswpUIWrapper,
37 | }
38 | }
39 |
40 | it('render rotate buttons', () => {
41 | const pswpUIWrapper = createPswpUI()
42 | createPswp()
43 | const getRotateButton = () => pswpUIWrapper.findAll('.pswp__button--rotation')
44 | const pswp = PhotoSwipeMock.getPswp()
45 |
46 | expect(getRotateButton().length).toBe(0)
47 |
48 | pswpUIWrapper.setData({
49 | rotate: true,
50 | })
51 | expect(getRotateButton().length).toBe(2)
52 |
53 | pswp.destroy()
54 | expect(getRotateButton().length).toBe(0)
55 | })
56 |
57 | it('handleRotate', () => {
58 | mockImageOnload.enable()
59 | const { pswp, pswpUIWrapper } = createRotatePswp()
60 | const currentItem: CurrentPswpItem = pswp.currItem as any
61 | const img: HTMLImageElement = currentItem.container.lastChild as any
62 |
63 | const rotate = (direction: 'left' | 'right') => {
64 | pswpUIWrapper.find(`.pswp__button--rotation--${direction}`).trigger('pswpTap')
65 | img.dispatchEvent(new Event(transitionEndEventName))
66 | }
67 | const expectRotateDeg = (deg: number) => {
68 | expect(img.style.transform).toContain(`rotate(${deg}deg)`)
69 | }
70 |
71 | expect(img.style.transform).toBeFalsy()
72 |
73 | rotate('right')
74 | expectRotateDeg(90)
75 |
76 | // vertical
77 | rotate('right')
78 | expectRotateDeg(180)
79 |
80 | rotate('left')
81 | expectRotateDeg(90)
82 | mockImageOnload.disable()
83 | })
84 | })
85 | })
86 |
--------------------------------------------------------------------------------
/src/type.ts:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import { Options, Item } from 'photoswipe/dist/photoswipe-ui-default'
3 |
4 | /**
5 | * v-pswp directive config options
6 | */
7 | export interface PswpDirectiveOptions {
8 | /**
9 | * path to image
10 | */
11 | src: string
12 | /**
13 | * image size, 'width x height', eg: '100x100'
14 | */
15 | size?: string
16 | /**
17 | * small image placeholder,
18 | * main (large) image loads on top of it,
19 | * if you skip this parameter - grey rectangle will be displayed,
20 | * try to define this property only when small image was loaded before
21 | */
22 | msrc?: string
23 | /**
24 | * used by Default PhotoSwipe UI
25 | * if you skip it, there won't be any caption
26 | */
27 | title?: string
28 | /**
29 | * to make URLs to a single image look like this: http://example.com/#&gid=1&pid=custom-first-id
30 | * instead of: http://example.com/#&gid=1&pid=1
31 | * enable options history:true, galleryPIDs:true and add pid (unique picture identifier)
32 | */
33 | pid?: string | number
34 | }
35 |
36 | export interface PswpItem extends Item {
37 | el: HTMLElement
38 | src: string
39 | msrc?: string
40 | pid?: number | string
41 | verticalRotated?: boolean
42 | }
43 |
44 | export interface ManualImgItem extends Partial
3 |
4 | ![]()
12 |
13 | ![]()
48 |
49 |
50 |
51 | ![]()
62 |
63 | ![]()
66 |
67 |
68 |
69 |
72 |
73 |
177 |
190 |
--------------------------------------------------------------------------------
/tests/unit/global.spec.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable import/first */
2 | import {
3 | PhotoSwipe,
4 | PhotoSwipeMock,
5 | createPswp,
6 | fakeSrc,
7 | CreatePswpOptions,
8 | createProtoPswp,
9 | } from './util'
10 |
11 | import { createLocalVue } from '@vue/test-utils'
12 | import VuePswipe from '@/main'
13 | import Vue, { ComponentOptions } from 'vue'
14 | import { PswpDirectiveOptions } from '@/type'
15 |
16 | describe('global function', () => {
17 | beforeEach(() => {
18 | expect(PhotoSwipe).not.toHaveBeenCalled()
19 | })
20 |
21 | afterEach(() => {
22 | PhotoSwipe.mockClear()
23 | })
24 |
25 | it('global options', () => {
26 | const bgOpacity = 0.5
27 | const optionsLocalVue = createLocalVue()
28 | optionsLocalVue.use(VuePswipe, {
29 | bgOpacity,
30 | })
31 |
32 | createPswp({
33 | localVue: optionsLocalVue,
34 | })
35 |
36 | const receiveOptions = PhotoSwipeMock.getReceiveOptions()
37 | expect(receiveOptions.bgOpacity).toBe(bgOpacity)
38 | })
39 |
40 | it('allow listening to the original PhotoSwipe event', () => {
41 | const mock = jest.fn()
42 |
43 | createPswp({
44 | listeners: {
45 | gettingData: mock,
46 | },
47 | })
48 |
49 | expect(mock).toBeCalled()
50 | })
51 |
52 | describe('history mode', () => {
53 | const createHashPswp = (hashPath: string, options?: CreatePswpOptions) => {
54 | window.history.pushState({}, '', hashPath)
55 |
56 | const wrapper = createPswp({
57 | withClick: false,
58 | attachToDocument: true,
59 | propsData: {
60 | options: {
61 | history: true,
62 | },
63 | },
64 | ...options,
65 | })
66 |
67 | document.body.appendChild(wrapper.vm.$el)
68 |
69 | return wrapper
70 | }
71 |
72 | it('with history hash', () => {
73 | const wrapper = createHashPswp('/#&gid=1&pid=1')
74 |
75 | expect(PhotoSwipe).toBeCalled()
76 | wrapper.destroy()
77 | })
78 |
79 | it('with custom hash', () => {
80 | const customPid = 'custom-first-id'
81 |
82 | const wrapper = createHashPswp(`/#&gid=1&pid=${customPid}`, {
83 | defaultSlots: `
84 | use img tag
5 |use background-image
14 | 21 | 22 |use batch
23 | 30 | 31 |use bubble mode
32 |
33 |
34 |
35 |
36 | dynamic property
37 | 38 | 39 | 40 |use msrc option
41 |use dynamic template
52 | 53 | 54 | 55 |use auto mode
56 |use beforeOpen hook
64 | 65 |manual open
70 | 71 |
3 |
5 |
6 |
7 |
229 |
238 |
--------------------------------------------------------------------------------
/tests/unit/photoswipe.spec.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable import/first */
2 | import {
3 | PhotoSwipe,
4 | PhotoSwipeMock,
5 | createPswp,
6 | createPswpUI,
7 | fakeSrc,
8 | mockImageOnload,
9 | getFakeImages,
10 | CreatePswpOptions,
11 | } from './util'
12 |
13 | import { BeforeOpenEvent, BeforeOpen } from '@/type'
14 |
15 | describe('photoswipe.vue', () => {
16 | beforeEach(() => {
17 | expect(PhotoSwipe).not.toHaveBeenCalled()
18 | })
19 |
20 | afterEach(() => {
21 | PhotoSwipe.mockClear()
22 | })
23 |
24 | it('render Photoswipe', () => {
25 | expect(
26 | createPswp({
27 | withClick: false,
28 | })
29 | ).toMatchSnapshot()
30 | })
31 |
32 | describe(':props', () => {
33 | describe(':options', () => {
34 | const createOptionsPswp = (options: Record
106 | 
107 |
108 | `,
109 | propsData: {
110 | bubble,
111 | },
112 | })
113 | }
114 |
115 | it('without bubble', () => {
116 | createBubblePswp(false)
117 | expect(PhotoSwipe).not.toBeCalled()
118 | })
119 |
120 | it('with bubble', () => {
121 | createBubblePswp(true)
122 | expect(PhotoSwipe).toBeCalled()
123 | })
124 | })
125 |
126 | describe(':rotate', () => {
127 | it('set pswpUI rotate', () => {
128 | const pswpUIWrapper = createPswpUI()
129 |
130 | createPswp({
131 | propsData: {
132 | rotate: true,
133 | },
134 | })
135 |
136 | expect(pswpUIWrapper.vm.$data.rotate).toBe(true)
137 | })
138 | })
139 |
140 | describe(':lazy', () => {
141 | const createLazyPswp = (lazy: boolean, fakeImageLength: number) => {
142 | const fakeImages = getFakeImages(fakeImageLength)
143 |
144 | const wrapper = createPswp({
145 | withClick: false,
146 | defaultSlots: fakeImages.map((src, index) => ({
147 | data: () => ({
148 | pswpItem: {
149 | src,
150 | },
151 | }),
152 | template: `
153 | The image could not be loaded.
',forceProgressiveLoading:!1,preload:[1,1],getNumItemsFn:function(){return Qe.length}},rn=function(){return{center:{x:0,y:0},max:{x:0,y:0},min:{x:0,y:0}}},an=function(t,e,n){var o=t.bounds;o.center.x=Math.round((en.x-e)/2),o.center.y=Math.round((en.y-n)/2)+t.vGap.top,o.max.x=e>en.x?Math.round(en.x-e):o.center.x,o.max.y=n>en.y?Math.round(en.y-n)+t.vGap.top:o.center.y,o.min.x=e>en.x?0:o.center.x,o.min.y=n>en.y?t.vGap.top:o.center.y},sn=function(t,e,n){if(t.src&&!t.loadError){var o=!n;if(o&&(t.vGap||(t.vGap={top:0,bottom:0}),Ct("parseVerticalMargin",t)),en.x=e.x,en.y=e.y-t.vGap.top-t.vGap.bottom,o){var i=en.x/t.w,r=en.y/t.h;t.fitRatio=i