-
Notifications
You must be signed in to change notification settings - Fork 0
/
dualCarousel.js
122 lines (103 loc) · 3.35 KB
/
dualCarousel.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
let zoomIndex = 0;
let sliders = [];
let activeSlider = 0;
const zoomContainerContainer = document.querySelector('.zoom-container-container');
const zoomContainer = document.querySelector('.zoom-container');
const zoomImage = document.querySelector('.zoom-image');
const srcEnd = '/hires/00.jpg';
const srcRoot = zoomImage.getAttribute('src').slice(0, -1 * srcEnd.length);
const hiResImgDir = srcRoot + '/hires/';
const loResImgDir = srcRoot + '/lores/';
let startTouches;
let zoomScale = 1.0;
//let zoomWidth = zoomImage.offsetWidth;
//let zoomHeight = zoomImage.offsetHeight;
let zoomTransX = 0.0;
let zoomTransY = 0.0;
const zoomScaleMult = 0.02;
//console.log(zoomOgWidth, zoomOgHeight);
sliders.push(new Slider('.dual-carousel .gallery-slider', SliderType.Gallery, galZoom));
sliders.push(new Slider('.dual-carousel .nav-slider', SliderType.Nav, doubleNavMove));
zoomContainer.addEventListener('pointerup', (e) =>
{
console.log("pointer up");
if(e.button == 0)
{
zoomOut();
}
zoomScale = 1.0;
zoomTransX = 0.0;
zoomTransY = 0.0;
zoomContainer.style.setProperty('--zoom-scale', zoomScale);
zoomContainer.style.setProperty('--zoom-origin-x', `${50}%`);
zoomContainer.style.setProperty('--zoom-origin-y', `${50}%`);
});
zoomContainer.addEventListener('wheel', (e) =>
{
console.log("wheel");
zoomOverride(e);
});
zoomContainer.addEventListener('touchstart', (e)=>
{
if(e.touches.length == 2)
{
startTouches = e.touches;
}
});
//zoomContainer.addEventListener('touchmove', handleTouch);
function handleTouch(e)
{
console.log(e.touches.length);
if(e.touches.length == 2)
{
console.log("doubleTouch");
e.preventDefault();
}
else
{
console.log("singleTouch");
}
}
window.addEventListener('pointerup', (e) =>
{
if(e.button != 0) return;
isPointerActive = false;
allowClick = false;
setTimeout(() => { allowClick = true}, 100); //prevents simultaneous click & pointerup/down
clickEnd(sliders[activeSlider], e); //click is needed for narrator
dragCount = 0;
});
for(let i = 0; i < sliders.length; i++)
{
setUpSliderListeners(sliders[i]);
}
setUpNavBulletListeners(sliders[0], doubleNavMove);
const doubleContainer = document.querySelector('.carousel-container');
setUpSliderFocus(doubleContainer, sliders[0]);
doubleContainer.addEventListener('keydown', e => keyboardNavigation(e, sliders[0]));
function doubleNavMove(i)
{
moveInnerSlider(sliders[0], i);
moveInnerSlider(sliders[1], i);
setActiveBullet(sliders[0], i);
focusedSlide = i;
}
function zoomOverride(e)
{
const rect = zoomContainer.getBoundingClientRect();
if(e.ctrlKey)
{
const cursorX = e.clientX - rect.left;
const cursorY = e.clientY - rect.top;
const newScale = Math.max(1.0, zoomScale - e.deltaY * zoomScaleMult);
const originX = (cursorX / rect.width) * 100 ;
const originY = (cursorY / rect.height) * 100;
//console.log(cursorX, rect.width, originX);
zoomContainer.style.setProperty('--zoom-origin-x', `${originX}%`);
zoomContainer.style.setProperty('--zoom-origin-y', `${originY}%`);
zoomContainer.style.setProperty('--zoom-scale', zoomScale);
e.stopPropagation();
e.preventDefault();
zoomScale = newScale;
}
}