Skip to content

Commit 1da01a1

Browse files
committed
Add wheel="zoom"
1 parent d946293 commit 1da01a1

File tree

4 files changed

+46
-21
lines changed

4 files changed

+46
-21
lines changed

README.md

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ Defaults to 500.
9595

9696
### `zooms`
9797

98-
Array of possible magnifications.
98+
Array of possible magnifications.
9999
`null` is equivalent to `[1]` (no zoom).
100100
Defaults to `[1, 2, 4]`. _NOTE_ : Do **NOT** pass an empty array.
101101

@@ -157,6 +157,11 @@ Zoom in or out on click or tap. Default is `true`.
157157

158158
Flip page by dragging/swiping. Default is `true`.
159159

160+
### `wheel`
161+
162+
When set to `'zoom'`, mouse wheel events zoom in/out the page.
163+
Default is `'scroll'`, wheel events and touch pad scroll gestures scroll the zoomed page.
164+
160165
## Events
161166

162167
### `flip-left-start`

examples/demo/src/App.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
:pages="pages"
1111
:pagesHiRes="pagesHiRes"
1212
:startPage="pageNum"
13+
wheel="zoom"
1314
v-slot="flipbook"
1415
ref="flipbook"
1516
@flip-left-start="onFlipLeftStart"

src/Flipbook.vue

Lines changed: 27 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -180,6 +180,9 @@ export default
180180
dragToFlip:
181181
type: Boolean
182182
default: true
183+
wheel:
184+
type: String
185+
default: 'scroll'
183186
184187
data: ->
185188
viewWidth: 0
@@ -646,24 +649,29 @@ export default
646649
@imageLoadCallback()
647650
@imageLoadCallback = null
648651
649-
zoomIn: ->
652+
zoomIn: (zoomAt=null) ->
650653
return unless @canZoomIn
651654
@zoomIndex += 1
652-
@zoomTo @zooms_[@zoomIndex]
655+
@zoomTo @zooms_[@zoomIndex], zoomAt
653656
654-
zoomOut: ->
657+
zoomOut: (zoomAt=null) ->
655658
return unless @canZoomOut
656659
@zoomIndex -= 1
657-
@zoomTo @zooms_[@zoomIndex]
660+
@zoomTo @zooms_[@zoomIndex], zoomAt
658661
659-
zoomTo: (zoom, fixedX, fixedY) ->
662+
zoomTo: (zoom, zoomAt=null) ->
663+
viewport = @$refs.viewport
664+
if zoomAt
665+
rect = viewport.getBoundingClientRect()
666+
fixedX = zoomAt.pageX - rect.left
667+
fixedY = zoomAt.pageY - rect.top
668+
else
669+
fixedX = viewport.clientWidth / 2
670+
fixedY = viewport.clientHeight / 2
660671
start = @zoom
661672
end = zoom
662-
viewport = @$refs.viewport
663673
startX = viewport.scrollLeft
664674
startY = viewport.scrollTop
665-
fixedX or= viewport.clientWidth / 2
666-
fixedY or= viewport.clientHeight / 2
667675
containerFixedX = fixedX + startX
668676
containerFixedY = fixedY + startY
669677
endX = containerFixedX / start * end - fixedX
@@ -692,12 +700,9 @@ export default
692700
if end > 1
693701
@preloadImages true
694702
695-
zoomAt: (touch) ->
696-
rect = @$refs.viewport.getBoundingClientRect()
697-
x = touch.pageX - rect.left
698-
y = touch.pageY - rect.top
703+
zoomAt: (zoomAt) ->
699704
@zoomIndex = (@zoomIndex + 1) % @zooms_.length
700-
@zoomTo @zooms_[@zoomIndex], x, y
705+
@zoomTo @zooms_[@zoomIndex], zoomAt
701706
702707
swipeStart: (touch) ->
703708
@touchStartX = touch.pageX
@@ -788,11 +793,19 @@ export default
788793
@scrollTop = @startScrollTop - y
789794
790795
onWheel: (ev) ->
791-
if @zoom > 1 and @dragToScroll
796+
if @wheel == 'scroll' and @zoom > 1 and @dragToScroll
792797
@scrollLeft = @$refs.viewport.scrollLeft + ev.deltaX
793798
@scrollTop = @$refs.viewport.scrollTop + ev.deltaY
794799
ev.preventDefault() if ev.cancelable
795800
801+
if @wheel == 'zoom'
802+
if ev.deltaY >= 100
803+
@zoomOut(ev)
804+
ev.preventDefault()
805+
else if ev.deltaY <= -100
806+
@zoomIn(ev)
807+
ev.preventDefault()
808+
796809
preloadImages: (hiRes = false) ->
797810
for i in [@currentPage - 3 .. @currentPage + 3]
798811
@pageUrlLoading i # this preloads image

types/flipbook.d.ts

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,11 @@ import Vue from 'vue'
22
export type Direction = 'left' | 'right'
33
export type Face = 'front' | 'back'
44

5+
export interface ZoomAt {
6+
pageX: number
7+
pageY: number
8+
}
9+
510
export type ImageLoadCallback = () => unknown
611
export interface SlotScope {
712
canFlipLeft: boolean
@@ -12,8 +17,8 @@ export interface SlotScope {
1217
numPages: number
1318
flipLeft(): void
1419
flipRight(): void
15-
zoomIn(): void
16-
zoomOut(): void
20+
zoomIn(zoomAt?: ZoomAt): void
21+
zoomOut(zoomAt?: ZoomAt): void
1722
}
1823
declare const component: Vue.DefineComponent<
1924
{
@@ -34,6 +39,7 @@ declare const component: Vue.DefineComponent<
3439
loadingImage?: string
3540
clickToZoom?: boolean
3641
dragToFlip?: boolean
42+
wheel?: 'scroll' | 'zoom'
3743
},
3844
{},
3945
{},
@@ -52,10 +58,10 @@ declare const component: Vue.DefineComponent<
5258
flipRevert(): number
5359
onImageLoad(trigger: number, cb: ImageLoadCallback): ImageLoadCallback
5460
didLoadImage(ev: Event): undefined | null
55-
zoomIn(): number
56-
zoomOut(): number
57-
zoomTo(zoom: number, fixedX: number, fixedY: number): number
58-
zoomAt(touch: TouchInit): number
61+
zoomIn(zoomAt?: ZoomAt): number
62+
zoomOut(zoomAt?: ZoomZt): number
63+
zoomTo(zoom: number, zoomAt?: ZoomAt): number
64+
zoomAt(touch: ZoomAt): number
5965
swipeStart(touch: TouchInit): 'grab' | 'all-scroll'
6066
swipeMove(touch: TouchInit): true | undefined
6167
swipeEnd(touch: TouchInit): null | undefined

0 commit comments

Comments
 (0)