zumly 0.9.11 → 0.92.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +325 -133
- package/dist/zumly.css +309 -22
- package/dist/zumly.js +7 -0
- package/dist/zumly.min.css +1 -5
- package/dist/zumly.mjs +6 -770
- package/docs/DRIVER_API.md +340 -0
- package/package.json +52 -41
- package/src/drivers/driver-helpers.js +315 -0
- package/src/drivers/index.js +49 -0
- package/dist/zumly.min.mjs +0 -6
- package/dist/zumly.umd.js +0 -809
package/dist/zumly.mjs
CHANGED
|
@@ -1,771 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
* zumly
|
|
3
|
-
*
|
|
4
|
-
*
|
|
1
|
+
/*
|
|
2
|
+
* zumly
|
|
3
|
+
* v.0.92.0
|
|
4
|
+
* Author Juan Martin Muda - Zumerlab
|
|
5
|
+
* License MIT
|
|
5
6
|
*/
|
|
6
|
-
function checkArray (array) {
|
|
7
|
-
// remove duplicates and map
|
|
8
|
-
if (array !== undefined && array[0].toLowerCase() === 'none') {
|
|
9
|
-
return true
|
|
10
|
-
}
|
|
11
|
-
if (array !== undefined && array.length > 0) {
|
|
12
|
-
const unique = array => [...new Set(array)];
|
|
13
|
-
const lowerArray = array.map(e => e.toLowerCase());
|
|
14
|
-
return unique(lowerArray).every(value => ['blur', 'sepia', 'saturate'].indexOf(value) !== -1)
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
function setFx (values) {
|
|
19
|
-
var start = '';
|
|
20
|
-
var end = '';
|
|
21
|
-
if (values !== undefined) {
|
|
22
|
-
values.map(effect => {
|
|
23
|
-
start += `${effect.toLowerCase() === 'blur' ? 'blur(0px) ' : effect.toLowerCase() === 'sepia' ? 'sepia(0) ' : effect.toLowerCase() === 'saturate' ? 'saturate(0) ' : 'none'}`;
|
|
24
|
-
end += `${effect.toLowerCase() === 'blur' ? 'blur(0.8px) ' : effect.toLowerCase() === 'sepia' ? 'sepia(5) ' : effect.toLowerCase() === 'saturate' ? 'saturate(8) ' : 'none'}`;
|
|
25
|
-
});
|
|
26
|
-
return [start, end]
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
function assignProperty (instance, propertiesToAdd, value) {
|
|
30
|
-
instance[propertiesToAdd] = value;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
function validate (instance, name, value, type, options = { isRequired: false, defaultValue: 0, allowedValues: 0, hasValidation: 0, hasAssignFunction: 0 }) {
|
|
34
|
-
var msg = `'${name}' property is required when instance is defined`;
|
|
35
|
-
var msg1 = `'${name}' property has problems`;
|
|
36
|
-
var checkValue = value !== undefined;
|
|
37
|
-
var checkDefault = options.defaultValue !== undefined;
|
|
38
|
-
var checkCustomValidation = options.hasValidation !== undefined;
|
|
39
|
-
var checkCustomAssign = options.hasAssignFunction !== undefined;
|
|
40
|
-
if (type === 'string' || type === 'object' || type === 'boolean') {
|
|
41
|
-
var checkTypeof = typeof value === type; // eslint-disable-line
|
|
42
|
-
// value = checkTypeof && type === 'string' ? value.toLowerCase() : value
|
|
43
|
-
} else if (type === 'array') {
|
|
44
|
-
checkTypeof = Array.isArray(value);
|
|
45
|
-
}
|
|
46
|
-
if (options.isRequired) {
|
|
47
|
-
checkValue && checkTypeof ? assignProperty(instance, name, value) : notification(false, msg, 'error');
|
|
48
|
-
}
|
|
49
|
-
if (checkDefault && !checkCustomValidation && !checkCustomAssign) {
|
|
50
|
-
checkValue && checkTypeof ? assignProperty(instance, name, value) : value === undefined ? assignProperty(instance, name, options.defaultValue) : notification(false, msg1, 'error');
|
|
51
|
-
}
|
|
52
|
-
if (checkCustomValidation && checkDefault && !checkCustomAssign) {
|
|
53
|
-
checkValue && checkTypeof && options.hasValidation ? assignProperty(instance, name, value) : value === undefined ? assignProperty(instance, name, options.defaultValue) : notification(false, msg1, 'error');
|
|
54
|
-
}
|
|
55
|
-
// console.log(name, checkCustomValidation, checkDefault, checkCustomAssign)
|
|
56
|
-
if (checkCustomValidation && checkDefault && checkCustomAssign) {
|
|
57
|
-
checkValue && checkTypeof && options.hasValidation ? assignProperty(instance, name, options.hasAssignFunction) : value === undefined ? assignProperty(instance, name, options.defaultValue) : notification(false, msg1, 'error');
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
function shimIdleCallBack (cb) {
|
|
62
|
-
var start = Date.now();
|
|
63
|
-
return setTimeout(() => {
|
|
64
|
-
cb({ didTimeout: false, timeRemaining () { return Math.max(0, 50 - (Date.now() - start)) } }); // eslint-disable-line
|
|
65
|
-
}, 1)
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
function prepareCSS (instance) {
|
|
69
|
-
var instanceStyle = document.createElement('style');
|
|
70
|
-
const views = ['current-view', 'previous-view', 'last-view'];
|
|
71
|
-
let result = '';
|
|
72
|
-
views.map(view => {
|
|
73
|
-
result += `
|
|
74
|
-
.zoom-${view}-${instance} {
|
|
75
|
-
animation-name: zoom-${view}-${instance};
|
|
76
|
-
animation-duration: var(--zoom-duration-${instance});
|
|
77
|
-
animation-timing-function: var(--zoom-ease-${instance});
|
|
78
|
-
}
|
|
79
|
-
@keyframes zoom-${view}-${instance} {
|
|
80
|
-
0% {
|
|
81
|
-
transform-origin: var(--${view}-transformOrigin-start-${instance});
|
|
82
|
-
transform: var(--${view}-transform-start-${instance});
|
|
83
|
-
opacity: var(--${view}-opacity-start-${instance});
|
|
84
|
-
filter: var(--${view}-filter-start-${instance})
|
|
85
|
-
}
|
|
86
|
-
100% {
|
|
87
|
-
transform-origin: var(--${view}-transformOrigin-end-${instance});
|
|
88
|
-
transform: var(--${view}-transform-end-${instance});
|
|
89
|
-
opacity: var(--${view}-opacity-end-${instance});
|
|
90
|
-
filter: var(--${view}-filter-end-${instance})
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
`;
|
|
94
|
-
});
|
|
95
|
-
instanceStyle.innerHTML = result;
|
|
96
|
-
document.head.appendChild(instanceStyle);
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
function setCSSVariables (transition, currentStage, instance) {
|
|
100
|
-
const viewStage = currentStage;
|
|
101
|
-
const current = viewStage.views[0];
|
|
102
|
-
const previous = viewStage.views[1];
|
|
103
|
-
const last = viewStage.views[2];
|
|
104
|
-
const views = [{ name: 'current-view', stage: current }, { name: 'previous-view', stage: previous }, { name: 'last-view', stage: last }];
|
|
105
|
-
views.map(view => {
|
|
106
|
-
if (transition === 'zoomOut' && view.stage !== undefined) {
|
|
107
|
-
document.documentElement.style.setProperty(`--${view.name}-transform-start-${instance}`, view.stage.forwardState.transform);
|
|
108
|
-
document.documentElement.style.setProperty(`--${view.name}-transform-end-${instance}`, view.stage.backwardState.transform);
|
|
109
|
-
document.documentElement.style.setProperty(`--${view.name}-transformOrigin-start-${instance}`, view.stage.forwardState.origin);
|
|
110
|
-
document.documentElement.style.setProperty(`--${view.name}-transformOrigin-end-${instance}`, view.stage.backwardState.origin);
|
|
111
|
-
document.documentElement.style.setProperty(`--${view.name}-opacity-start-${instance}`, 1);
|
|
112
|
-
document.documentElement.style.setProperty(`--${view.name}-filter-start-${instance}`, view.stage.forwardState.filter);
|
|
113
|
-
document.documentElement.style.setProperty(`--${view.name}-filter-end-${instance}`, view.stage.backwardState.filter);
|
|
114
|
-
if (view.name === 'current-view') {
|
|
115
|
-
document.documentElement.style.setProperty(`--zoom-duration-${instance}`, view.stage.backwardState.duration);
|
|
116
|
-
document.documentElement.style.setProperty(`--zoom-ease-${instance}`, view.stage.backwardState.ease);
|
|
117
|
-
document.documentElement.style.setProperty(`--${view.name}-opacity-end-${instance}`, 0);
|
|
118
|
-
document.documentElement.style.setProperty(`--${view.name}-filter-start-${instance}`, 'none');
|
|
119
|
-
document.documentElement.style.setProperty(`--${view.name}-filter-end-${instance}`, 'none');
|
|
120
|
-
} else {
|
|
121
|
-
document.documentElement.style.setProperty(`--${view.name}-opacity-end-${instance}`, 1);
|
|
122
|
-
}
|
|
123
|
-
}
|
|
124
|
-
if (transition === 'zoomIn' && view.stage !== undefined) {
|
|
125
|
-
document.documentElement.style.setProperty(`--${view.name}-transform-start-${instance}`, view.stage.backwardState.transform);
|
|
126
|
-
document.documentElement.style.setProperty(`--${view.name}-transform-end-${instance}`, view.stage.forwardState.transform);
|
|
127
|
-
document.documentElement.style.setProperty(`--${view.name}-transformOrigin-start-${instance}`, view.stage.backwardState.origin);
|
|
128
|
-
document.documentElement.style.setProperty(`--${view.name}-transformOrigin-end-${instance}`, view.stage.forwardState.origin);
|
|
129
|
-
document.documentElement.style.setProperty(`--${view.name}-filter-start-${instance}`, view.stage.backwardState.filter);
|
|
130
|
-
document.documentElement.style.setProperty(`--${view.name}-filter-end-${instance}`, view.stage.forwardState.filter);
|
|
131
|
-
if (view.name === 'current-view') {
|
|
132
|
-
document.documentElement.style.setProperty(`--zoom-duration-${instance}`, view.stage.forwardState.duration);
|
|
133
|
-
document.documentElement.style.setProperty(`--zoom-ease-${instance}`, view.stage.forwardState.ease);
|
|
134
|
-
document.documentElement.style.setProperty(`--${view.name}-opacity-start-${instance}`, 0);
|
|
135
|
-
document.documentElement.style.setProperty(`--${view.name}-filter-start-${instance}`, 'none');
|
|
136
|
-
document.documentElement.style.setProperty(`--${view.name}-filter-end-${instance}`, 'none');
|
|
137
|
-
} else {
|
|
138
|
-
document.documentElement.style.setProperty(`--${view.name}-opacity-start-${instance}`, 1);
|
|
139
|
-
}
|
|
140
|
-
document.documentElement.style.setProperty(`--${view.name}-opacity-end-${instance}`, 1);
|
|
141
|
-
}
|
|
142
|
-
});
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
async function renderView (el, canvas, views, init, componentContext) {
|
|
146
|
-
var viewName = null;
|
|
147
|
-
init ? viewName = el : viewName = el.dataset.to;
|
|
148
|
-
var newView = document.createElement('template');
|
|
149
|
-
|
|
150
|
-
if(typeof views[viewName] === 'object' && views[viewName].render !== undefined) {
|
|
151
|
-
// makes optional de 'render' function
|
|
152
|
-
newView.innerHTML = await views[viewName].render();
|
|
153
|
-
} else if(typeof views[viewName] === 'function') {
|
|
154
|
-
// view is a component constructor
|
|
155
|
-
var newViewInner = document.createElement('div');
|
|
156
|
-
let comp = new views[viewName]({
|
|
157
|
-
target: newViewInner,
|
|
158
|
-
context: componentContext,
|
|
159
|
-
props: el.dataset
|
|
160
|
-
});
|
|
161
|
-
newViewInner.classList.add('z-view');
|
|
162
|
-
newView.content.appendChild(newViewInner);
|
|
163
|
-
} else {
|
|
164
|
-
// view is plain HTML
|
|
165
|
-
newView.innerHTML = views[viewName];
|
|
166
|
-
}
|
|
167
|
-
|
|
168
|
-
let vv = newView.content.querySelector('.z-view');
|
|
169
|
-
|
|
170
|
-
if (!init) {
|
|
171
|
-
vv.classList.add('is-new-current-view');
|
|
172
|
-
vv.classList.add('has-no-events');
|
|
173
|
-
vv.classList.add('hide');
|
|
174
|
-
vv.classList.add('performance');
|
|
175
|
-
} else {
|
|
176
|
-
vv.classList.add('is-current-view');
|
|
177
|
-
}
|
|
178
|
-
vv.style.transformOrigin = '0 0';
|
|
179
|
-
vv.dataset.viewName = viewName;
|
|
180
|
-
|
|
181
|
-
var appendedView = await canvas.append(newView.content);
|
|
182
|
-
// makes optional de 'mounted' hook
|
|
183
|
-
if (typeof views[viewName] === 'object' && views[viewName].mounted !== undefined && typeof views[viewName].mounted() === 'function') await views[viewName].mounted();
|
|
184
|
-
}
|
|
185
|
-
|
|
186
|
-
function notification (debug, msg, type) {
|
|
187
|
-
if (msg && type === 'welcome') {
|
|
188
|
-
console.info(`%c Zumly %c ${msg}`, 'background: #424085; color: white; border-radius: 3px;', 'color: #424085'); // eslint-disable-line no-console
|
|
189
|
-
}
|
|
190
|
-
if (msg && debug && (type === 'info' || type === undefined)) {
|
|
191
|
-
console.info(`%c Zumly %c ${msg}`, 'background: #6679A3; color: #304157; border-radius: 3px;', 'color: #6679A3'); // eslint-disable-line no-console
|
|
192
|
-
}
|
|
193
|
-
if (msg && type === 'warn') {
|
|
194
|
-
console.warn(`%c Zumly %c ${msg}`, 'background: #DCBF53; color: #424085; border-radius: 3px;', 'color: #424085'); // eslint-disable-line no-console
|
|
195
|
-
}
|
|
196
|
-
if (msg && type === 'error') {
|
|
197
|
-
console.error(`%c Zumly %c ${msg}`, 'background: #BE4747; color: white; border-radius: 3px;', 'color: #424085'); // eslint-disable-line no-console
|
|
198
|
-
}
|
|
199
|
-
}
|
|
200
|
-
|
|
201
|
-
function checkParameters (parameters, instance) {
|
|
202
|
-
// First check if options are provided
|
|
203
|
-
if (parameters && typeof parameters === 'object') {
|
|
204
|
-
assignProperty(instance, 'options', true);
|
|
205
|
-
// Then check its properties
|
|
206
|
-
// mount property. String DOM element. Required
|
|
207
|
-
validate(instance, 'mount', parameters.mount, 'string', { isRequired: true });
|
|
208
|
-
// initialView property. Strng view name. Required
|
|
209
|
-
validate(instance, 'initialView', parameters.initialView, 'string', { isRequired: true });
|
|
210
|
-
// views property. Object with views. Required
|
|
211
|
-
validate(instance, 'views', parameters.views, 'object', { isRequired: true });
|
|
212
|
-
// debug property. Boolean. Optional. Default false
|
|
213
|
-
validate(instance, 'debug', parameters.debug, 'boolean', { defaultValue: false });
|
|
214
|
-
// Svelte component context
|
|
215
|
-
validate(instance, 'componentContext', parameters.componentContext, 'object', { isRequired: false, defaultValue: new Map() });
|
|
216
|
-
// Check transtions
|
|
217
|
-
if (parameters.transitions && typeof parameters.transitions === 'object') {
|
|
218
|
-
// value exist; type, allowed, deafult
|
|
219
|
-
validate(instance, 'cover', parameters.transitions.cover, 'string', { defaultValue: 'width', hasValidation: () => { ['height', 'width'].indexOf(parameters.transitions.cover.toLowerCase()) !== -1; } }); // eslint-disable-line
|
|
220
|
-
// value, type, , default
|
|
221
|
-
validate(instance, 'duration', parameters.transitions.duration, 'string', { defaultValue: '1s' });
|
|
222
|
-
// value, type, ,default
|
|
223
|
-
validate(instance, 'ease', parameters.transitions.ease, 'string', { defaultValue: 'ease-in-out' });
|
|
224
|
-
// value, type, custom validation, custom asignament, default
|
|
225
|
-
validate(instance, 'effects', parameters.transitions.effects, 'array', { defaultValue: ['none', 'none'], hasValidation: checkArray(parameters.transitions.effects), hasAssignFunction: setFx(parameters.transitions.effects) });
|
|
226
|
-
} else {
|
|
227
|
-
// assign deafult values
|
|
228
|
-
assignProperty(instance, 'cover', 'width');
|
|
229
|
-
assignProperty(instance, 'duration', '1s');
|
|
230
|
-
assignProperty(instance, 'ease', 'ease-in-out');
|
|
231
|
-
assignProperty(instance, 'effects', ['none', 'none']);
|
|
232
|
-
}
|
|
233
|
-
} else {
|
|
234
|
-
notification(false, '\'options\' object has to be provided when instance is defined', 'error');
|
|
235
|
-
}
|
|
236
|
-
}
|
|
237
|
-
|
|
238
|
-
window.requestIdleCallback = window.requestIdleCallback || shimIdleCallBack;
|
|
239
|
-
|
|
240
|
-
/**
|
|
241
|
-
* Zumly
|
|
242
|
-
* Powers your apps with a zoomable user interface (ZUI) taste.
|
|
243
|
-
* @class
|
|
244
|
-
*/
|
|
245
|
-
class Zumly {
|
|
246
|
-
/**
|
|
247
|
-
* Creates a Zumly instance
|
|
248
|
-
* @constructor
|
|
249
|
-
* @params {Objet} options
|
|
250
|
-
* @example
|
|
251
|
-
* new Zumly({
|
|
252
|
-
* mount: '.mount',
|
|
253
|
-
* initialView: 'home',
|
|
254
|
-
* views: {
|
|
255
|
-
* home,
|
|
256
|
-
* contact,
|
|
257
|
-
* ...
|
|
258
|
-
* }
|
|
259
|
-
*
|
|
260
|
-
*/
|
|
261
|
-
constructor (options) {
|
|
262
|
-
// Internal state:
|
|
263
|
-
// Register global instances of Zumly
|
|
264
|
-
this.instance = Zumly.counter;
|
|
265
|
-
// Store snapshots of each zoom transition
|
|
266
|
-
this.storedViews = [];
|
|
267
|
-
// Show current zoom level properties
|
|
268
|
-
this.currentStage = null;
|
|
269
|
-
// Store the scale of previous zoom transition
|
|
270
|
-
this.storedPreviousScale = [1];
|
|
271
|
-
// Array of events useful for debugging
|
|
272
|
-
this.trace = [];
|
|
273
|
-
// Deactive events during transtions
|
|
274
|
-
this.blockEvents = false;
|
|
275
|
-
// Initial values for gesture events
|
|
276
|
-
this.touchstartX = 0;
|
|
277
|
-
this.touchstartY = 0;
|
|
278
|
-
this.touchendX = 0;
|
|
279
|
-
this.touchendY = 0;
|
|
280
|
-
this.touching = false;
|
|
281
|
-
// Check if user options exist
|
|
282
|
-
checkParameters(options, this);
|
|
283
|
-
if (this.options) {
|
|
284
|
-
// Event bindings:
|
|
285
|
-
this._onZoom = this.onZoom.bind(this);
|
|
286
|
-
this._onZoomInHandlerStart = this.onZoomInHandlerStart.bind(this);
|
|
287
|
-
this._onZoomInHandlerEnd = this.onZoomInHandlerEnd.bind(this);
|
|
288
|
-
this._onZoomOutHandlerStart = this.onZoomOutHandlerStart.bind(this);
|
|
289
|
-
this._onZoomOutHandlerEnd = this.onZoomOutHandlerEnd.bind(this);
|
|
290
|
-
this._onTouchStart = this.onTouchStart.bind(this);
|
|
291
|
-
this._onTouchEnd = this.onTouchEnd.bind(this);
|
|
292
|
-
this._onKeyUp = this.onKeyUp.bind(this);
|
|
293
|
-
this._onWeel = this.onWeel.bind(this);
|
|
294
|
-
// Prepare the instance:
|
|
295
|
-
this.canvas = document.querySelector(this.mount);
|
|
296
|
-
this.canvas.setAttribute('tabindex', 0);
|
|
297
|
-
this.canvas.addEventListener('mouseup', this._onZoom, false);
|
|
298
|
-
this.canvas.addEventListener('touchend', this._onZoom, false);
|
|
299
|
-
this.canvas.addEventListener('touchstart', this._onTouchStart, { passive: true });
|
|
300
|
-
this.canvas.addEventListener('touchend', this._onTouchEnd, false);
|
|
301
|
-
this.canvas.addEventListener('keyup', this._onKeyUp, false);
|
|
302
|
-
this.canvas.addEventListener('wheel', this._onWeel, { passive: true });
|
|
303
|
-
} else {
|
|
304
|
-
this.notify('is unable to start: no {options} have been passed to the Zumly\'s instance.', 'error');
|
|
305
|
-
}
|
|
306
|
-
}
|
|
307
|
-
|
|
308
|
-
/**
|
|
309
|
-
* Helpers
|
|
310
|
-
*/
|
|
311
|
-
storeViews (data) {
|
|
312
|
-
this.tracing('storedViews()');
|
|
313
|
-
this.storedViews.push(data);
|
|
314
|
-
}
|
|
315
|
-
|
|
316
|
-
setPreviousScale (scale) {
|
|
317
|
-
this.tracing('setPreviousScale()');
|
|
318
|
-
this.storedPreviousScale.push(scale);
|
|
319
|
-
}
|
|
320
|
-
|
|
321
|
-
tracing (data) {
|
|
322
|
-
if (data === 'ended') {
|
|
323
|
-
const parse = this.trace.map((task, index) => `${index === 0 ? `Instance ${this.instance}: ${task}` : `${task}`}`).join(' > ');
|
|
324
|
-
this.notify(parse);
|
|
325
|
-
this.trace = [];
|
|
326
|
-
} else {
|
|
327
|
-
this.trace.push(data);
|
|
328
|
-
}
|
|
329
|
-
}
|
|
330
|
-
|
|
331
|
-
/**
|
|
332
|
-
* Private methods
|
|
333
|
-
*/
|
|
334
|
-
static get counter () {
|
|
335
|
-
Zumly._counter = (Zumly._counter || 0) + 1;
|
|
336
|
-
return Zumly._counter
|
|
337
|
-
}
|
|
338
|
-
|
|
339
|
-
notify (msg, type) {
|
|
340
|
-
return notification(this.debug, msg, type)
|
|
341
|
-
}
|
|
342
|
-
|
|
343
|
-
/**
|
|
344
|
-
* Public methods
|
|
345
|
-
*/
|
|
346
|
-
zoomLevel () {
|
|
347
|
-
return this.storedViews.length
|
|
348
|
-
}
|
|
349
|
-
|
|
350
|
-
async init () {
|
|
351
|
-
if (this.options) {
|
|
352
|
-
// add instance style
|
|
353
|
-
this.tracing('init()');
|
|
354
|
-
prepareCSS(this.instance);
|
|
355
|
-
await renderView(this.initialView, this.canvas, this.views, 'init', this.componentContext);
|
|
356
|
-
// add to storage. OPTIMIZAR
|
|
357
|
-
this.storeViews({
|
|
358
|
-
zoomLevel: this.storedViews.length,
|
|
359
|
-
views: [{
|
|
360
|
-
viewName: this.initialView,
|
|
361
|
-
backwardState: {
|
|
362
|
-
origin: '0 0',
|
|
363
|
-
transform: ''
|
|
364
|
-
}
|
|
365
|
-
}]
|
|
366
|
-
});
|
|
367
|
-
//
|
|
368
|
-
this.notify(`${this.instance > 1
|
|
369
|
-
? `instance nº ${this.instance} is active.`
|
|
370
|
-
: `is running! Instance nº ${this.instance} is active. ${this.debug
|
|
371
|
-
? 'Debug is active, can be deactivate by setting \'debug: false\' when you define the instance.' : ''}
|
|
372
|
-
More tips & docs at https://zumly.org`}`, 'welcome');
|
|
373
|
-
}
|
|
374
|
-
}
|
|
375
|
-
|
|
376
|
-
/**
|
|
377
|
-
* Main methods
|
|
378
|
-
*/
|
|
379
|
-
async zoomIn (el) {
|
|
380
|
-
this.tracing('zoomIn()');
|
|
381
|
-
var instance = this.instance;
|
|
382
|
-
const canvas = this.canvas;
|
|
383
|
-
const coordenadasCanvas = canvas.getBoundingClientRect();
|
|
384
|
-
var offsetX = coordenadasCanvas.left;
|
|
385
|
-
var offsetY = coordenadasCanvas.top;
|
|
386
|
-
const preScale = this.storedPreviousScale[this.storedPreviousScale.length - 1];
|
|
387
|
-
// generated new view from activated .zoom-me element
|
|
388
|
-
// generateNewView(el)
|
|
389
|
-
this.tracing('renderView()');
|
|
390
|
-
await renderView(el, canvas, this.views, false, this.componentContext);
|
|
391
|
-
el.classList.add('zoomed');
|
|
392
|
-
const coordenadasEl = el.getBoundingClientRect();
|
|
393
|
-
// create new view in a template tag
|
|
394
|
-
// select VIEWS from DOM
|
|
395
|
-
var currentView = canvas.querySelector('.is-new-current-view');
|
|
396
|
-
var previousView = canvas.querySelector('.is-current-view');
|
|
397
|
-
var lastView = canvas.querySelector('.is-previous-view');
|
|
398
|
-
var removeView = canvas.querySelector('.is-last-view');
|
|
399
|
-
if (removeView !== null) canvas.removeChild(removeView);
|
|
400
|
-
// do changes
|
|
401
|
-
const cc = currentView.getBoundingClientRect();
|
|
402
|
-
const scale = cc.width / coordenadasEl.width;
|
|
403
|
-
const scaleInv = 1 / scale;
|
|
404
|
-
const scaleh = cc.height / coordenadasEl.height;
|
|
405
|
-
const scaleInvh = 1 / scaleh;
|
|
406
|
-
// muy interesante featura... usar el zoom de acuardo a la h o w mayor y agra
|
|
407
|
-
var duration = el.dataset.withDuration || this.duration;
|
|
408
|
-
var ease = el.dataset.withEease || this.ease;
|
|
409
|
-
var filterIn = this.effects[0];
|
|
410
|
-
var filterOut = this.effects[1];
|
|
411
|
-
var cover = this.cover;
|
|
412
|
-
|
|
413
|
-
if (cover === 'width') {
|
|
414
|
-
var laScala = scale;
|
|
415
|
-
var laScalaInv = scaleInv;
|
|
416
|
-
} else if (cover === 'height') {
|
|
417
|
-
laScala = scaleh;
|
|
418
|
-
laScalaInv = scaleInvh;
|
|
419
|
-
}
|
|
420
|
-
|
|
421
|
-
this.setPreviousScale(laScala);
|
|
422
|
-
var transformCurrentView0 = `translate(${coordenadasEl.x - offsetX + (coordenadasEl.width - cc.width * laScalaInv) / 2}px, ${coordenadasEl.y - offsetY + (coordenadasEl.height - cc.height * laScalaInv) / 2}px) scale(${laScalaInv})`;
|
|
423
|
-
currentView.style.transform = transformCurrentView0;
|
|
424
|
-
//
|
|
425
|
-
previousView.classList.add('is-previous-view');
|
|
426
|
-
previousView.classList.remove('is-current-view');
|
|
427
|
-
const coordenadasPreviousView = previousView.getBoundingClientRect();
|
|
428
|
-
// PREVIOUS VIEW EXACTAMENTE ONDE ESTANA ANTES COMO CURRENT
|
|
429
|
-
var transformPreviousView0 = previousView.style.transform;
|
|
430
|
-
previousView.style.transformOrigin = `${coordenadasEl.x + coordenadasEl.width / 2 - coordenadasPreviousView.x}px ${coordenadasEl.y + coordenadasEl.height / 2 - coordenadasPreviousView.y}px`;
|
|
431
|
-
|
|
432
|
-
const x = coordenadasCanvas.width / 2 - coordenadasEl.width / 2 - coordenadasEl.x + coordenadasPreviousView.x;
|
|
433
|
-
const y = coordenadasCanvas.height / 2 - coordenadasEl.height / 2 - coordenadasEl.y + coordenadasPreviousView.y;
|
|
434
|
-
|
|
435
|
-
const transformPreviousView1 = `translate(${x}px, ${y}px) scale(${laScala})`;
|
|
436
|
-
// PREVIOUS VIEW FINAL STAGE
|
|
437
|
-
previousView.style.transform = transformPreviousView1;
|
|
438
|
-
// ACA CAMBIA LA COSA, LEVANTO LAS COORDENADAS DEL ELEMENTO CLICLEADO QUE ESTBA DNRO DE PREVIOUS VIEW
|
|
439
|
-
var newcoordenadasEl = el.getBoundingClientRect();
|
|
440
|
-
// LO QUE DETERMINA LA POSICINES FONAL DEL CURRENT VIEW
|
|
441
|
-
var transformCurrentView1 = `translate(${newcoordenadasEl.x - offsetX + (newcoordenadasEl.width - cc.width) / 2}px, ${newcoordenadasEl.y - offsetY + (newcoordenadasEl.height - cc.height) / 2}px)`;
|
|
442
|
-
|
|
443
|
-
if (lastView !== null) {
|
|
444
|
-
lastView.classList.remove('is-previous-view');
|
|
445
|
-
lastView.classList.add('is-last-view');
|
|
446
|
-
var transformLastView0 = lastView.style.transform;
|
|
447
|
-
var newcoordenadasPV = previousView.getBoundingClientRect();
|
|
448
|
-
lastView.style.transform = `translate(${x - offsetX}px, ${y - offsetY}px) scale(${laScala * preScale})`;
|
|
449
|
-
const last = lastView.querySelector('.zoomed');
|
|
450
|
-
var coorLast = last.getBoundingClientRect();
|
|
451
|
-
lastView.style.transform = transformLastView0;
|
|
452
|
-
previousView.style.transform = transformPreviousView0;
|
|
453
|
-
var coorPrev = previousView.getBoundingClientRect();
|
|
454
|
-
var transformLastView1 = `translate(${coordenadasCanvas.width / 2 - coordenadasEl.width / 2 - coordenadasEl.x + (coorPrev.x - coorLast.x) + newcoordenadasPV.x - offsetX + (newcoordenadasPV.width - coorLast.width) / 2}px, ${coordenadasCanvas.height / 2 - coordenadasEl.height / 2 - coordenadasEl.y + (coorPrev.y - coorLast.y) + newcoordenadasPV.y - offsetY +
|
|
455
|
-
(newcoordenadasPV.height - coorLast.height) / 2}px) scale(${laScala * preScale})`;
|
|
456
|
-
} else {
|
|
457
|
-
previousView.style.transform = transformPreviousView0;
|
|
458
|
-
}
|
|
459
|
-
// arrays
|
|
460
|
-
var snapShoot = {
|
|
461
|
-
zoomLevel: this.storedViews.length,
|
|
462
|
-
views: []
|
|
463
|
-
};
|
|
464
|
-
const currentv = currentView ? {
|
|
465
|
-
viewName: currentView.dataset.viewName,
|
|
466
|
-
backwardState: {
|
|
467
|
-
origin: currentView.style.transformOrigin,
|
|
468
|
-
duration: duration,
|
|
469
|
-
ease: ease,
|
|
470
|
-
transform: transformCurrentView0,
|
|
471
|
-
filter: filterIn
|
|
472
|
-
},
|
|
473
|
-
forwardState: {
|
|
474
|
-
origin: currentView.style.transformOrigin,
|
|
475
|
-
duration: duration,
|
|
476
|
-
ease: ease,
|
|
477
|
-
transform: transformCurrentView1,
|
|
478
|
-
filter: filterOut
|
|
479
|
-
}
|
|
480
|
-
} : null;
|
|
481
|
-
const previousv = previousView ? {
|
|
482
|
-
viewName: previousView.dataset.viewName,
|
|
483
|
-
backwardState: {
|
|
484
|
-
origin: previousView.style.transformOrigin,
|
|
485
|
-
duration: duration,
|
|
486
|
-
ease: ease,
|
|
487
|
-
transform: transformPreviousView0,
|
|
488
|
-
filter: window.getComputedStyle(document.documentElement).getPropertyValue(`--previous-view-filter-end-${instance}`)
|
|
489
|
-
},
|
|
490
|
-
forwardState: {
|
|
491
|
-
origin: previousView.style.transformOrigin,
|
|
492
|
-
duration: duration,
|
|
493
|
-
ease: ease,
|
|
494
|
-
transform: transformPreviousView1,
|
|
495
|
-
filter: filterOut
|
|
496
|
-
}
|
|
497
|
-
} : null;
|
|
498
|
-
const lastv = lastView ? {
|
|
499
|
-
viewName: lastView.dataset.viewName,
|
|
500
|
-
backwardState: {
|
|
501
|
-
origin: lastView.style.transformOrigin,
|
|
502
|
-
duration: duration,
|
|
503
|
-
ease: ease,
|
|
504
|
-
transform: transformLastView0,
|
|
505
|
-
filter: window.getComputedStyle(document.documentElement).getPropertyValue(`--previous-view-filter-end-${instance}`)
|
|
506
|
-
},
|
|
507
|
-
forwardState: {
|
|
508
|
-
origin: lastView.style.transformOrigin,
|
|
509
|
-
duration: duration,
|
|
510
|
-
ease: ease,
|
|
511
|
-
transform: transformLastView1,
|
|
512
|
-
filter: filterOut
|
|
513
|
-
}
|
|
514
|
-
} : null;
|
|
515
|
-
const gonev = removeView ? { // ACA VA LA VISTA ENTERA FALTA REALIZAR UN ZOOM IGUAL ANTES DE SACARLA DE JUEGO
|
|
516
|
-
viewName: removeView
|
|
517
|
-
} : null;
|
|
518
|
-
if (currentv !== null) snapShoot.views.push(currentv);
|
|
519
|
-
if (previousv !== null) snapShoot.views.push(previousv);
|
|
520
|
-
if (lastv !== null) snapShoot.views.push(lastv);
|
|
521
|
-
if (gonev !== null) snapShoot.views.push(gonev);
|
|
522
|
-
this.storeViews(snapShoot);
|
|
523
|
-
this.currentStage = this.storedViews[this.storedViews.length - 1];
|
|
524
|
-
// animation
|
|
525
|
-
this.tracing('setCSSVariables()');
|
|
526
|
-
setCSSVariables('zoomIn', this.currentStage, this.instance);
|
|
527
|
-
previousView.classList.add('performance');
|
|
528
|
-
if (lastView !== null) lastView.classList.add('performance');
|
|
529
|
-
//
|
|
530
|
-
currentView.classList.remove('hide');
|
|
531
|
-
currentView.addEventListener('animationstart', this._onZoomInHandlerStart);
|
|
532
|
-
currentView.addEventListener('animationend', this._onZoomInHandlerEnd);
|
|
533
|
-
previousView.addEventListener('animationend', this._onZoomInHandlerEnd);
|
|
534
|
-
if (lastView !== null) lastView.addEventListener('animationend', this._onZoomInHandlerEnd);
|
|
535
|
-
//
|
|
536
|
-
currentView.classList.add(`zoom-current-view-${instance}`);
|
|
537
|
-
previousView.classList.add(`zoom-previous-view-${instance}`);
|
|
538
|
-
if (lastView !== null) lastView.classList.add(`zoom-last-view-${instance}`);
|
|
539
|
-
}
|
|
540
|
-
|
|
541
|
-
zoomOut () {
|
|
542
|
-
this.tracing('zoomOut()');
|
|
543
|
-
this.blockEvents = true;
|
|
544
|
-
this.storedPreviousScale.pop();
|
|
545
|
-
var instance = this.instance;
|
|
546
|
-
const canvas = this.canvas;
|
|
547
|
-
this.currentStage = this.storedViews[this.storedViews.length - 1];
|
|
548
|
-
const reAttachView = this.currentStage.views[3];
|
|
549
|
-
var currentView = canvas.querySelector('.is-current-view');
|
|
550
|
-
var previousView = canvas.querySelector('.is-previous-view');
|
|
551
|
-
var lastView = canvas.querySelector('.is-last-view');
|
|
552
|
-
//
|
|
553
|
-
this.tracing('setCSSVariables()');
|
|
554
|
-
setCSSVariables('zoomOut', this.currentStage, this.instance);
|
|
555
|
-
//
|
|
556
|
-
//
|
|
557
|
-
currentView.classList.remove('performance');
|
|
558
|
-
//
|
|
559
|
-
previousView.querySelector('.zoomed').classList.remove('zoomed');
|
|
560
|
-
previousView.classList.remove('is-previous-view');
|
|
561
|
-
previousView.classList.add('is-current-view');
|
|
562
|
-
previousView.classList.remove('performance');
|
|
563
|
-
//
|
|
564
|
-
if (lastView !== null) {
|
|
565
|
-
lastView.classList.add('performance');
|
|
566
|
-
lastView.classList.add('is-previous-view');
|
|
567
|
-
lastView.classList.remove('is-last-view');
|
|
568
|
-
lastView.classList.remove('hide');
|
|
569
|
-
}
|
|
570
|
-
//
|
|
571
|
-
if (reAttachView !== undefined) {
|
|
572
|
-
canvas.prepend(reAttachView.viewName);
|
|
573
|
-
var newlastView = canvas.querySelector('.z-view:first-child');
|
|
574
|
-
newlastView.classList.add('hide');
|
|
575
|
-
}
|
|
576
|
-
//
|
|
577
|
-
currentView.addEventListener('animationstart', this._onZoomOutHandlerStart);
|
|
578
|
-
currentView.addEventListener('animationend', this._onZoomOutHandlerEnd);
|
|
579
|
-
previousView.addEventListener('animationend', this._onZoomOutHandlerEnd);
|
|
580
|
-
if (lastView !== null) lastView.addEventListener('animationend', this._onZoomOutHandlerEnd);
|
|
581
|
-
//
|
|
582
|
-
currentView.classList.add(`zoom-current-view-${instance}`);
|
|
583
|
-
previousView.classList.add(`zoom-previous-view-${instance}`);
|
|
584
|
-
if (lastView !== null) lastView.classList.add(`zoom-last-view-${instance}`);
|
|
585
|
-
this.storedViews.pop();
|
|
586
|
-
}
|
|
587
|
-
|
|
588
|
-
/**
|
|
589
|
-
* Event hangling
|
|
590
|
-
*/
|
|
591
|
-
onZoom (event) {
|
|
592
|
-
if (this.storedViews.length > 1 && !this.blockEvents && !event.target.classList.contains('zoom-me') && event.target.closest('.is-current-view') === null && !this.touching) {
|
|
593
|
-
this.tracing('onZoom()');
|
|
594
|
-
event.stopPropagation();
|
|
595
|
-
this.zoomOut();
|
|
596
|
-
}
|
|
597
|
-
if (!this.blockEvents && event.target.classList.contains('zoom-me') && !this.touching) {
|
|
598
|
-
this.tracing('onZoom()');
|
|
599
|
-
event.stopPropagation();
|
|
600
|
-
this.zoomIn(event.target);
|
|
601
|
-
}
|
|
602
|
-
}
|
|
603
|
-
|
|
604
|
-
onKeyUp (event) {
|
|
605
|
-
this.tracing('onKeyUp()');
|
|
606
|
-
// Possible conflict with usar inputs
|
|
607
|
-
if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {
|
|
608
|
-
event.preventDefault();
|
|
609
|
-
if (this.storedViews.length > 1 && !this.blockEvents) {
|
|
610
|
-
this.zoomOut();
|
|
611
|
-
} else {
|
|
612
|
-
this.notify(`is on level zero. Can't zoom out. Trigger: ${event.key}`, 'warn');
|
|
613
|
-
}
|
|
614
|
-
}
|
|
615
|
-
if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {
|
|
616
|
-
event.preventDefault();
|
|
617
|
-
this.notify(event.key + 'has not actions defined');
|
|
618
|
-
}
|
|
619
|
-
}
|
|
620
|
-
|
|
621
|
-
onWeel (event) {
|
|
622
|
-
// inertia need to be fixed
|
|
623
|
-
if (!this.blockEvents) {
|
|
624
|
-
this.tracing('onWeel()');
|
|
625
|
-
if (event.deltaY < 0) ;
|
|
626
|
-
if (event.deltaY > 0) {
|
|
627
|
-
if (this.storedViews.length > 1 && !this.blockEvents) {
|
|
628
|
-
this.zoomOut();
|
|
629
|
-
}
|
|
630
|
-
}
|
|
631
|
-
}
|
|
632
|
-
}
|
|
633
|
-
|
|
634
|
-
onTouchStart (event) {
|
|
635
|
-
this.tracing('onTouchStart()');
|
|
636
|
-
this.touching = true;
|
|
637
|
-
this.touchstartX = event.changedTouches[0].screenX;
|
|
638
|
-
this.touchstartY = event.changedTouches[0].screenY;
|
|
639
|
-
}
|
|
640
|
-
|
|
641
|
-
onTouchEnd (event) {
|
|
642
|
-
if (!this.blockEvents) {
|
|
643
|
-
this.tracing('onTouchEnd()');
|
|
644
|
-
this.touchendX = event.changedTouches[0].screenX;
|
|
645
|
-
this.touchendY = event.changedTouches[0].screenY;
|
|
646
|
-
this.handleGesture(event);
|
|
647
|
-
// event.preventDefault()
|
|
648
|
-
}
|
|
649
|
-
}
|
|
650
|
-
|
|
651
|
-
handleGesture (event) {
|
|
652
|
-
event.stopPropagation();
|
|
653
|
-
this.tracing('handleGesture()');
|
|
654
|
-
if (this.touchendX < this.touchstartX - 30) {
|
|
655
|
-
if (this.storedViews.length > 1 && !this.blockEvents) {
|
|
656
|
-
this.tracing('swipe left');
|
|
657
|
-
this.zoomOut();
|
|
658
|
-
} else {
|
|
659
|
-
this.notify("is on level zero. Can't zoom out. Trigger: Swipe left", 'warn');
|
|
660
|
-
}
|
|
661
|
-
}
|
|
662
|
-
if (this.touchendY < this.touchstartY - 10) {
|
|
663
|
-
if (this.storedViews.length > 1 && !this.blockEvents) {
|
|
664
|
-
this.tracing('swipe up');
|
|
665
|
-
// Disabled. In near future enable if Zumly is full screen
|
|
666
|
-
// this.zoomOut()
|
|
667
|
-
} else {
|
|
668
|
-
this.notify("is on level zero. Can't zoom out. Trigger: Swipe up", 'warn');
|
|
669
|
-
}
|
|
670
|
-
}
|
|
671
|
-
if (this.touchendY === this.touchstartY && !this.blockEvents && event.target.classList.contains('zoom-me') && this.touching) {
|
|
672
|
-
this.touching = false;
|
|
673
|
-
this.tracing('tap');
|
|
674
|
-
event.preventDefault();
|
|
675
|
-
this.zoomIn(event.target);
|
|
676
|
-
}
|
|
677
|
-
if (this.touchendY === this.touchstartY && this.storedViews.length > 1 && !this.blockEvents && !event.target.classList.contains('zoom-me') && event.target.closest('.is-current-view') === null && this.touching) {
|
|
678
|
-
this.touching = false;
|
|
679
|
-
this.tracing('tap');
|
|
680
|
-
this.zoomOut();
|
|
681
|
-
}
|
|
682
|
-
}
|
|
683
|
-
|
|
684
|
-
onZoomOutHandlerStart (event) {
|
|
685
|
-
this.tracing('onZoomOutHandlerStart()');
|
|
686
|
-
this.blockEvents = true;
|
|
687
|
-
event.target.removeEventListener('animationstart', this._onZoomOutHandlerStart);
|
|
688
|
-
}
|
|
689
|
-
|
|
690
|
-
onZoomOutHandlerEnd (event) {
|
|
691
|
-
this.tracing('onZoomOutHandlerEnd()');
|
|
692
|
-
const element = event.target;
|
|
693
|
-
var currentZoomLevel = this.currentStage;
|
|
694
|
-
element.removeEventListener('animationend', this._onZoomOutHandlerEnd);
|
|
695
|
-
// current
|
|
696
|
-
if (element.classList.contains(`zoom-current-view-${this.instance}`)) {
|
|
697
|
-
try {
|
|
698
|
-
this.canvas.removeChild(element);
|
|
699
|
-
} catch(e) {
|
|
700
|
-
console.debug("Error when trying to remove element after zoom out. Trying to remove its parent instead...");
|
|
701
|
-
try {
|
|
702
|
-
this.canvas.removeChild(element.parentElement);
|
|
703
|
-
} catch(e) {
|
|
704
|
-
console.debug("Error when trying to remove elemont after zoom out:", e);
|
|
705
|
-
console.debug("Element to remove was:", element);
|
|
706
|
-
}
|
|
707
|
-
|
|
708
|
-
}
|
|
709
|
-
|
|
710
|
-
this.blockEvents = false;
|
|
711
|
-
}
|
|
712
|
-
if (element.classList.contains(`zoom-previous-view-${this.instance}`)) {
|
|
713
|
-
var origin = currentZoomLevel.views[1].backwardState.origin;
|
|
714
|
-
var transform = currentZoomLevel.views[1].backwardState.transform;
|
|
715
|
-
element.classList.remove('performance');
|
|
716
|
-
element.classList.remove(`zoom-previous-view-${this.instance}`);
|
|
717
|
-
element.style.transformOrigin = origin;
|
|
718
|
-
element.style.transform = transform;
|
|
719
|
-
element.style.filter = 'none';
|
|
720
|
-
if (currentZoomLevel.views.length === 2) this.tracing('ended');
|
|
721
|
-
}
|
|
722
|
-
if (element.classList.contains(`zoom-last-view-${this.instance}`)) {
|
|
723
|
-
origin = currentZoomLevel.views[2].backwardState.origin;
|
|
724
|
-
transform = currentZoomLevel.views[2].backwardState.transform;
|
|
725
|
-
element.classList.remove('performance');
|
|
726
|
-
element.classList.remove(`zoom-last-view-${this.instance}`);
|
|
727
|
-
element.style.transformOrigin = origin;
|
|
728
|
-
element.style.transform = transform;
|
|
729
|
-
if (currentZoomLevel.views.length > 2) this.tracing('ended');
|
|
730
|
-
}
|
|
731
|
-
}
|
|
732
|
-
|
|
733
|
-
onZoomInHandlerStart (event) {
|
|
734
|
-
this.tracing('onZoomInHandlerStart()');
|
|
735
|
-
this.blockEvents = true;
|
|
736
|
-
event.target.removeEventListener('animationstart', this._onZoomInHandlerStart);
|
|
737
|
-
}
|
|
738
|
-
|
|
739
|
-
onZoomInHandlerEnd (event) {
|
|
740
|
-
this.tracing('onZoomInHandlerEnd()');
|
|
741
|
-
const element = event.target;
|
|
742
|
-
var currentZoomLevel = this.currentStage;
|
|
743
|
-
if (event.target.classList.contains('is-new-current-view')) {
|
|
744
|
-
this.blockEvents = false;
|
|
745
|
-
var viewName = 'current-view';
|
|
746
|
-
var transform = currentZoomLevel.views[0].forwardState.transform;
|
|
747
|
-
var origin = currentZoomLevel.views[0].forwardState.origin;
|
|
748
|
-
element.classList.remove('is-new-current-view');
|
|
749
|
-
element.classList.add('is-current-view');
|
|
750
|
-
} else if (event.target.classList.contains('is-previous-view')) {
|
|
751
|
-
viewName = 'previous-view';
|
|
752
|
-
transform = currentZoomLevel.views[1].forwardState.transform;
|
|
753
|
-
origin = currentZoomLevel.views[1].forwardState.origin;
|
|
754
|
-
if (currentZoomLevel.views.length === 2) this.tracing('ended');
|
|
755
|
-
} else {
|
|
756
|
-
viewName = 'last-view';
|
|
757
|
-
transform = currentZoomLevel.views[2].forwardState.transform;
|
|
758
|
-
origin = currentZoomLevel.views[2].forwardState.origin;
|
|
759
|
-
if (currentZoomLevel.views.length > 2) this.tracing('ended');
|
|
760
|
-
}
|
|
761
|
-
element.classList.remove('performance');
|
|
762
|
-
element.classList.remove(`zoom-${viewName}-${this.instance}`);
|
|
763
|
-
element.classList.remove('has-no-events');
|
|
764
|
-
element.style.transformOrigin = origin;
|
|
765
|
-
element.style.transform = transform;
|
|
766
|
-
element.style.filter = window.getComputedStyle(document.documentElement).getPropertyValue(`--${viewName}-filter-end-${this.instance}`);
|
|
767
|
-
element.removeEventListener('animationend', this._onZoomInHandlerEnd);
|
|
768
|
-
}
|
|
769
|
-
}
|
|
770
|
-
|
|
771
|
-
export default Zumly;
|
|
7
|
+
var ot=class{#t={};constructor(t={}){this.#t=t}#e(t){return typeof t=="function"?"function":t instanceof HTMLElement?"element":typeof t=="object"&&t!==null&&typeof t.render=="function"?"object":typeof t!="string"?"unknown":/^https?:\/\/|^\/|\.html$|\.php$/i.test(t)?"url":t.includes("<")?"html":t.includes("-")?"webcomponent":"unknown"}async resolve(t,e=null){if(typeof t=="string"&&Object.prototype.hasOwnProperty.call(this.#t,t)){let o=this.#t[t];return this.resolve(o,e)}switch(this.#e(t)){case"html":{let o=document.createElement("div");o.innerHTML=t.trim();let n=o.firstElementChild;if(!n)throw new Error("Zumly: view produced no element (html)");return n}case"url":{let o=new AbortController,n=setTimeout(()=>o.abort(),1e4),i;try{i=await fetch(t,{signal:o.signal})}finally{clearTimeout(n)}if(!i.ok)throw new Error(`Zumly: fetch failed for "${t}" (${i.status})`);let a=await i.text(),f=document.createElement("div");f.innerHTML=a.trim();let l=f.firstElementChild;if(!l)throw new Error("Zumly: view produced no element (url)");return l}case"function":{let o=e&&e.target||document.createElement("div"),n=await t({...e,target:o});if(typeof n=="string")return this.resolve(n,e);if(n instanceof HTMLElement)return n;let i=o.firstElementChild||o;return i.classList.contains("z-view")||i.classList.add("z-view"),i}case"object":{let o=await t.render(e);if(typeof o!="string")throw new Error("Zumly: view render() must return string");return this.resolve(o,e)}case"element":return t.cloneNode(!0);case"webcomponent":return await customElements.whenDefined(t),document.createElement(t);default:throw new Error("Zumly: unknown view type for source")}}};async function K(s,t,e,r,o,n){if(!s||!s.classList){let i=document.createElement("div");i.classList.add("z-view"),s&&i.appendChild(s),s=i}else s.classList.contains("z-view")||s.classList.add("z-view");return s.dataset.viewName=t,s.getAttribute("aria-label")||s.setAttribute("aria-label",`View: ${t}`),s.style.transformOrigin="0 0",s.style.position="absolute",r?s.classList.add("is-current-view"):s.classList.add("is-new-current-view","has-no-events","hide"),e.append(s),typeof o[t]=="object"&&typeof o[t].mounted=="function"&&await o[t].mounted(),s}function z(s,t,e){t&&e==="welcome"&&console.info(`%c Zumly %c ${t}`,"background: #424085; color: white; border-radius: 3px;","color: #424085"),t&&s&&(e==="info"||e===void 0)&&console.info(`%c Zumly %c ${t}`,"background: #6679A3; color: #304157; border-radius: 3px;","color: #6679A3"),t&&e==="warn"&&console.warn(`%c Zumly %c ${t}`,"background: #DCBF53; color: #424085; border-radius: 3px;","color: #424085"),t&&e==="error"&&console.error(`%c Zumly %c ${t}`,"background: #BE4747; color: white; border-radius: 3px;","color: #424085")}function It(s,t){if(t.isValid=!1,!s||typeof s!="object"){z(!1,"'options' object has to be provided when instance is defined","error");return}if(typeof s.mount!="string"){z(!1,"'mount' must be a string selector","error");return}if(t.mount=s.mount,typeof s.initialView!="string"){z(!1,"'initialView' must be a string","error");return}if(t.initialView=s.initialView,!s.views||typeof s.views!="object"){z(!1,"'views' must be an object","error");return}t.views=s.views,t.isValid=!0,t.preload=Array.isArray(s.preload)?s.preload:[],t.debug=typeof s.debug=="boolean"?s.debug:!1,t.componentContext=s.componentContext&&typeof s.componentContext=="object"?s.componentContext:new Map;let e=s.transitions&&typeof s.transitions=="object"?s.transitions:null,r=e&&e.cover,o=typeof r=="string"?r.toLowerCase():null,n=o==="width"||o==="height";t.cover=n?o:"width",!n&&e&&r!==void 0&&z(!1,`'transitions.cover' must be either "width" or "height". Falling back to "width".`,"warn"),t.duration=e&&typeof e.duration=="string"?e.duration:"1s",t.ease=e&&typeof e.ease=="string"?e.ease:"ease-in-out",t.deferred=typeof s.deferred=="boolean"?s.deferred:!1;let i=e&&e.hideTrigger;i===!0||i==="fade"?t.hideTrigger=i:(t.hideTrigger=!1,i!=null&&i!==!1&&z(!1,`'transitions.hideTrigger' must be true or "fade". Falling back to false.`,"warn"));let a=e&&e.effects;Array.isArray(a)&&a.length>=2&&typeof a[0]=="string"&&typeof a[1]=="string"?t.effects=[a[0],a[1]]:Array.isArray(a)&&a.length===1&&typeof a[0]=="string"?t.effects=[a[0],a[0]]:(t.effects=["none","none"],a!=null&&z(!1,`'transitions.effects' must be an array of 1-2 CSS filter strings (e.g. ["blur(3px)", "blur(8px) saturate(0)"]). Falling back to no effects.`,"warn"));let f=e&&e.driver,l=typeof f=="string"?f.toLowerCase():null,u=typeof f=="function"?f:null;if(l!==null){let g=["css","waapi","none","anime","gsap","motion"];t.transitionDriver=g.includes(l)?l:"css",g.includes(l)||z(!1,`'transitions.driver' must be "css", "waapi", "none", "anime", "gsap", "motion", or a function. Got "${f}". Falling back to "css".`,"warn")}else u!==null?t.transitionDriver=u:t.transitionDriver="css";let c=e&&e.stagger;typeof c=="number"&&c>0?t.stagger=c:(t.stagger=0,c!=null&&c!==0&&z(!1,"'transitions.stagger' must be a positive number (ms). Falling back to 0 (disabled).","warn")),t.parallax=0,t.threshold=null;let h=e&&e.threshold;h&&typeof h=="object"&&h.enabled&&(t.threshold={duration:typeof h.duration=="number"&&h.duration>0?h.duration:300,commitAt:typeof h.commitAt=="number"&&h.commitAt>0&&h.commitAt<=1?h.commitAt:.5});let d=s.lateralNav;if(d===!1)t.lateralNav=!1;else if(d&&typeof d=="object"){let g=typeof d.mode=="string"?d.mode.toLowerCase():null,w=g==="auto"||g==="always";g&&!w&&z(!1,`'lateralNav.mode' must be "auto" or "always". Falling back to "auto".`,"warn"),t.lateralNav={mode:w?g:"auto",arrows:typeof d.arrows=="boolean"?d.arrows:!0,dots:typeof d.dots=="boolean"?d.dots:!0,keepAlive:d.keepAlive===!0||d.keepAlive==="visible"?d.keepAlive:!1}}else t.lateralNav={mode:"auto",arrows:!0,dots:!0,keepAlive:!1};let m=s.depthNav;m===!1?t.depthNav=!1:m&&typeof m=="object"?t.depthNav={button:typeof m.button=="boolean"?m.button:!0,indicator:typeof m.indicator=="boolean"?m.indicator:!0}:t.depthNav={button:!0,indicator:!0};let p=s.navPosition,v=["bottom-center","bottom-left","bottom-right","top-center","top-left","top-right","middle-left","middle-right"];typeof p=="string"&&v.includes(p)?t.navPosition=p:(t.navPosition="bottom-center",p!=null&&z(!1,`'navPosition' must be one of: ${v.join(", ")}. Falling back to "bottom-center".`,"warn"));let y=s.inputs;y&&typeof y=="object"?t.inputs={wheel:typeof y.wheel=="boolean"?y.wheel:!0,keyboard:typeof y.keyboard=="boolean"?y.keyboard:!0,click:typeof y.click=="boolean"?y.click:!0,touch:typeof y.touch=="boolean"?y.touch:!0}:t.inputs={wheel:!0,keyboard:!0,click:!0,touch:!0}}function Zt(s,t,e,r,o){let n=e/s,i=r/t;return o==="height"?{scale:i,scaleInv:1/i}:{scale:n,scaleInv:1/n}}function $t(s,t,e,r){let o=t.left,n=t.top,i=s.x-o+(s.width-e.width*r)/2,a=s.y-n+(s.height-e.height*r)/2;return`translate(${i}px, ${a}px) scale(${r})`}function Nt(s,t,e){let r=t.left,o=t.top,n=s.x-r+(s.width-e.width)/2,i=s.y-o+(s.height-e.height)/2;return`translate(${n}px, ${i}px)`}function Mt(s,t){let e=s.x+s.width/2-t.x,r=s.y+s.height/2-t.y;return`${e}px ${r}px`}function Ft(s,t,e,r,o=0){let n=s.width/2-t.width/2-t.x+e.x,i=s.height/2-t.height/2-t.y+e.y,a=1-o,f=n*a,l=i*a;return{x:n,y:i,transform:`translate(${f}px, ${l}px) scale(${r})`}}function Dt({canvasRect:s,canvasOffset:t,triggerRect:e,previousViewRectAtBaseTransform:r,lastViewZoomedElementRect:o,previousViewRectWithPreviousAtEndTransform:n,scale:i,preScale:a,parallax:f=0}){let l=t.left,u=t.top,c=s.width/2-e.width/2-e.x,h=s.height/2-e.height/2-e.y,d=c+(r.x-o.x)+n.x-l+(n.width-o.width)/2,m=h+(r.y-o.y)+n.y-u+(n.height-o.height)/2,p=1-Math.min(f*2,.9);return`translate(${d*p}px, ${m*p}px) scale(${i*a})`}function Ht(s,t,e,r,o){return`translate(${s-e.left}px, ${t-e.top}px) scale(${r*o})`}function nt(s){let t=s.split(/\s+/);return{x:parseFloat(t[0])||0,y:parseFloat(t[1])||0}}function G(s){let t=s.match(/translate\(\s*([-\d.]+)px[,\s]+([-\d.]+)px\s*\)/),e=s.match(/scale\(\s*([-\d.]+)\s*\)/);return{tx:t?parseFloat(t[1]):0,ty:t?parseFloat(t[2]):0,scale:e?parseFloat(e[1]):1}}function it(s,t,e,r,o,n,i,a,f,l){let u=t.x-e.x*(1-n)-r,c=t.y-e.y*(1-n)-o,h=t.width/n,d=t.height/n,m=u+e.x+(s.x-u-e.x-r)/n,p=c+e.y+(s.y-c-e.y-o)/n,v=s.width/n,y=s.height/n,g=u+i.x+a+l*(m-u-i.x),w=c+i.y+f+l*(p-c-i.y),b=v*l,L=y*l;return{x:g,y:w,width:b,height:L,left:g,top:w,right:g+b,bottom:w+L}}function Q(s,t,e){return{viewName:s,backwardState:t,forwardState:e}}function jt(s){return{detachedNode:s}}function Rt(s,t,e,r,o){let n=[];return t!==null&&n.push(t),e!==null&&n.push(e),r!==null&&n.push(r),o!==null&&n.push(o),{zoomLevel:s,views:n}}function qt(s){let t=s.views?.[3];if(!(!t||!(t.detachedNode instanceof Node)))return t.detachedNode}var at=class{#t=new Map;set(t,e,r=null){this.#t.set(t,{node:e,expires:r?Date.now()+r:null})}get(t){let e=this.#t.get(t);return e?e.expires!==null&&Date.now()>e.expires?(this.#t.delete(t),null):e.node.cloneNode(!0):null}has(t){let e=this.#t.get(t);return e?e.expires!==null&&Date.now()>e.expires?(this.#t.delete(t),!1):!0:!1}invalidate(t){this.#t.delete(t)}clear(){this.#t.clear()}};var Ee=300*1e3,_e=/^https?:\/\/|^\/|\.html$|\.php$/i,lt=class{#t;#e;#r;#s=new Map;constructor(t={}){this.#r=t,this.#t=new ot(t),this.#e=new at}#o(t){return typeof this.#r[t]=="string"}#n(t){return _e.test(t)?Ee:null}async get(t,e=null){if(this.#o(t)){let r=this.#e.get(t);if(r)return r;if(this.#s.has(t))return this.#s.get(t);let o=(async()=>{let n=await this.#t.resolve(t,e),i=this.#r[t],a=this.#n(i);return this.#e.set(t,n,a),this.#s.delete(t),n})();return this.#s.set(t,o),o}return this.#t.resolve(t,e)}async preloadEager(t,e=null){!Array.isArray(t)||t.length===0||await Promise.all(t.map(r=>this.get(r,e)))}prefetch(t,e=null){this.get(t,e).catch(()=>{})}prefetchOnHover(t,e=null){this.prefetch(t,e)}scanAndPrefetch(t,e=null){if(!t||!t.querySelectorAll)return;t.querySelectorAll(".zoom-me[data-to]").forEach(o=>{let n=o.dataset.to;n&&(o.hasAttribute("role")||o.setAttribute("role","button"),o.hasAttribute("aria-label")||o.setAttribute("aria-label",`Zoom to ${n}`),this.prefetch(n,e))})}};function V(s){s&&(s.style.contentVisibility="hidden")}function R(s){s&&(s.style.contentVisibility="visible")}function $(s){if(typeof s=="number"&&!Number.isNaN(s))return Math.max(0,s);let e=String(s).match(/^(\d+(?:\.\d+)?)\s*(ms|s)?$/i);if(!e)return 500;let r=parseFloat(e[1]);return(e[2]||"s").toLowerCase()==="ms"?Math.max(0,r):Math.max(0,r*1e3)}function ct(s){return $(s)/1e3}function S(s,t){if(s.classList.contains("is-new-current-view")){let e=t.views[0].forwardState;s.classList.replace("is-new-current-view","is-current-view"),s.classList.remove("zoom-current-view","has-no-events"),s.style.transformOrigin=e.origin,s.style.transform=e.transform;return}if(s.classList.contains("is-previous-view")){let e=t.views[1].forwardState;s.classList.remove("zoom-previous-view","has-no-events"),s.style.transformOrigin=e.origin,s.style.transform=e.transform;return}if(s.classList.contains("is-last-view")){let e=t.views[2].forwardState;s.classList.remove("zoom-last-view","has-no-events"),s.style.transformOrigin=e.origin,s.style.transform=e.transform}}function k(s,t){s.classList.remove("zoom-previous-view-reverse","has-no-events","has-effect","has-effect-reverse"),s.style.removeProperty("--z-effect-filter"),s.style.transformOrigin="0 0",s.style.transform=t.transform}function C(s,t){s.classList.remove("zoom-last-view-reverse","has-no-events","has-effect","has-effect-reverse"),s.style.removeProperty("--z-effect-filter"),s.style.transformOrigin=t.origin,s.style.transform=t.transform}function T(s,t){try{t&&t.removeChild(s)}catch{try{s.parentElement&&t.removeChild(s.parentElement)}catch{}}}function x(...s){for(let t of s)t&&(t.classList.remove("hide"),R(t))}function M(s,t){let{currentView:e,previousView:r,backView:o,backViewState:n,lastView:i,lastViewState:a,incomingTransformEnd:f,currentStage:l,canvas:u}=s,c=l.views[0];x(e),e.classList.replace("is-new-current-view","is-current-view"),e.classList.remove("zoom-current-view","has-no-events"),e.style.transformOrigin=c.forwardState.origin,e.style.transform=f||c.forwardState.transform,o&&n&&(o.style.transform=n.transformEnd),i&&a&&(i.style.transform=a.transformEnd),s.keepAlive||T(r,u),t()}var F=150;function D(s,t){let e=!1,r=setTimeout(()=>{e||(e=!0,s())},t);return{finish(){e||(e=!0,clearTimeout(r),s())},safetyTimer:r}}function Bt(){return{a:1,b:0,c:0,d:1,e:0,f:0}}function xe(s){if(!s||s==="none")return Bt();let t=String(s).match(/matrix\(([-\d.eE]+),\s*([-\d.eE]+),\s*([-\d.eE]+),\s*([-\d.eE]+),\s*([-\d.eE]+),\s*([-\d.eE]+)\)/);return t?{a:parseFloat(t[1])||1,b:parseFloat(t[2])||0,c:parseFloat(t[3])||0,d:parseFloat(t[4])||1,e:parseFloat(t[5])||0,f:parseFloat(t[6])||0}:Bt()}function Y(s){return`matrix(${s.a}, ${s.b}, ${s.c}, ${s.d}, ${s.e}, ${s.f})`}function X(s,t,e){return s+(t-s)*e}function U(s,t,e){let r=Math.max(0,Math.min(1,e));return{a:X(s.a,t.a,r),b:X(s.b,t.b,r),c:X(s.c,t.c,r),d:X(s.d,t.d,r),e:X(s.e,t.e,r),f:X(s.f,t.f,r)}}function P(s,t,e){s.style.transformOrigin=t,s.style.transform=e;try{s.getBoundingClientRect()}catch{}return xe(getComputedStyle(s).transform)}function Vt(s,t){let{type:e,currentView:r,previousView:o,lastView:n,currentStage:i,duration:a,ease:f,canvas:l}=s;if(!r||!o||!i){t();return}e==="lateral"?Le(s,t):e==="zoomIn"?Te(r,o,n,i,a,f,t):e==="zoomOut"?ze(r,o,n,i,a,f,l,t):t()}function Le(s,t){let{currentView:e,previousView:r,backView:o,backViewState:n,lastView:i,lastViewState:a,incomingTransformStart:f,incomingTransformEnd:l,outgoingTransform:u,outgoingTransformEnd:c,currentStage:h,duration:d,ease:m,canvas:p}=s,v=$(d),y=h.views[0];x(e),e.classList.replace("is-new-current-view","is-current-view"),e.classList.remove("zoom-current-view","has-no-events"),e.style.transformOrigin=y.forwardState.origin,o&&n&&(I(o,d,m,{"--lateral-from":n.transformStart,"--lateral-to":n.transformEnd}),o.classList.add("zoom-lateral-back")),i&&a&&(I(i,d,m,{"--lateral-from":a.transformStart,"--lateral-to":a.transformEnd}),i.classList.add("zoom-lateral-back")),s.keepAlive!=="visible"&&(I(r,d,m,{"--lateral-out-from":u,"--lateral-out-to":c}),r.classList.add("zoom-lateral-out")),I(e,d,m,{"--lateral-in-from":f,"--lateral-in-to":l}),e.classList.add("zoom-lateral-in");let g=s.keepAlive==="visible"?[e]:[r,e];o&&n&&g.push(o),i&&a&&g.push(i);let w=g.length,{finish:b}=D(()=>{vt(g,L),s.keepAlive?(r.classList.remove("zoom-lateral-out"),r.style.opacity=""):T(r,p),o&&(o.classList.remove("zoom-lateral-back"),o.style.transform=n?.transformEnd||o.style.transform),i&&(i.classList.remove("zoom-lateral-back"),i.style.transform=a?.transformEnd||i.style.transform),e.classList.remove("zoom-lateral-in"),e.style.transform=l,t()},v+F);function L(Z){let H=Z?.target;H&&H.removeEventListener("animationend",L),w--,w<=0&&b()}g.forEach(Z=>Z.addEventListener("animationend",L))}function Te(s,t,e,r,o,n,i){x(s,t,e);let a=r.stagger||0;I(s,o,n,{"--current-view-transform-start":r.views[0].backwardState.transform,"--current-view-transform-end":r.views[0].forwardState.transform}),a>0&&s.style.setProperty("animation-delay","0ms"),I(t,o,n,{"--previous-view-transform-start":r.views[1].backwardState.transform,"--previous-view-transform-end":r.views[1].forwardState.transform}),a>0&&t.style.setProperty("animation-delay",`${a}ms`),e&&(I(e,o,n,{"--last-view-transform-start":r.views[2].backwardState.transform,"--last-view-transform-end":r.views[2].forwardState.transform}),a>0&&e.style.setProperty("animation-delay",`${a*2}ms`)),s.classList.add("zoom-current-view"),t.classList.add("zoom-previous-view"),e&&e.classList.add("zoom-last-view");let f=e?[s,t,e]:[s,t],l=f.length,u=$(o),c=e?a*2:a,{finish:h}=D(()=>{vt(f,d),f.forEach(m=>m.style.removeProperty("animation-delay")),i()},u+c+F);function d(m){let p=m?.target;if(p&&p.removeEventListener("animationend",d),p?.isConnected)try{S(p,r)}catch{}l--,l<=0&&h()}f.forEach(m=>m.addEventListener("animationend",d))}function ze(s,t,e,r,o,n,i,a){let f=r.views[0],l=r.views[1],u=e&&r.views[2]?r.views[2]:null,c=r.stagger||0;I(s,o,n,{"--current-view-transform-start":f.backwardState.transform,"--current-view-transform-end":f.forwardState.transform}),c>0&&s.style.setProperty("animation-delay","0ms"),I(t,o,n,{"--previous-view-transform-start":l.backwardState.transform,"--previous-view-transform-end":l.forwardState.transform}),c>0&&t.style.setProperty("animation-delay",`${c}ms`),e&&u&&(I(e,o,n,{"--last-view-transform-start":u.backwardState.transform,"--last-view-transform-end":u.forwardState.transform}),c>0&&e.style.setProperty("animation-delay",`${c*2}ms`)),s.classList.add("zoom-current-view-reverse"),t.classList.add("zoom-previous-view-reverse"),e&&e.classList.add("zoom-last-view-reverse");let h=e?[s,t,e]:[s,t],d=h.length,m=$(o),p=e?c*2:c,{finish:v}=D(()=>{vt(h,y),h.forEach(g=>g.style.removeProperty("animation-delay")),a()},m+p+F);function y(g){let w=g?.target;if(w&&w.removeEventListener("animationend",y),w?.isConnected)try{ke(w,r,i)}catch{}d--,d<=0&&v()}h.forEach(g=>g.addEventListener("animationend",y))}function ke(s,t,e){if(s.classList.contains("zoom-current-view-reverse")){T(s,e);return}if(s.classList.contains("zoom-previous-view-reverse")){k(s,t.views[1].backwardState);return}s.classList.contains("zoom-last-view-reverse")&&C(s,t.views[2].backwardState)}function I(s,t,e,r){s.style.setProperty("--zoom-duration",t),s.style.setProperty("--zoom-ease",e);for(let[o,n]of Object.entries(r))s.style.setProperty(o,n)}function vt(s,t){for(let e of s)e?.removeEventListener&&e.removeEventListener("animationend",t)}function Xt(s,t){let{type:e,currentView:r,previousView:o,lastView:n,currentStage:i,canvas:a}=s;if(!r||!o||!i){t();return}if(e==="lateral"){M(s,t);return}if(e==="zoomIn"){x(r,o,n),S(r,i),S(o,i),n&&S(n,i),t();return}if(e==="zoomOut"){T(r,a),x(o,n),k(o,i.views[1].backwardState),n&&C(n,i.views[2].backwardState),t();return}t()}function Yt(s,t){let{type:e,currentView:r,previousView:o,lastView:n,currentStage:i,duration:a,ease:f,canvas:l}=s;if(!r||!o||!i){t();return}let u=$(a);if(e==="lateral"){Ae(s,u,f,t);return}if(e==="zoomIn"){Ce(r,o,n,i,u,f,t);return}if(e==="zoomOut"){Oe(r,o,n,i,u,f,l,t);return}t()}function Ce(s,t,e,r,o,n,i){x(s,t,e);let a=r.views[0],f=r.views[1],l=e&&r.views[2]?r.views[2]:null;s.style.transformOrigin=a.backwardState.origin,s.style.transform=a.backwardState.transform,t.style.transformOrigin=f.backwardState.origin,t.style.transform=f.backwardState.transform,l&&(e.style.transformOrigin=l.backwardState.origin,e.style.transform=l.backwardState.transform);let u=r.stagger||0,c=[];c.push(s.animate([{transform:a.backwardState.transform},{transform:a.forwardState.transform}],{duration:o,easing:n,fill:"forwards"})),c.push(t.animate([{transform:f.backwardState.transform},{transform:f.forwardState.transform}],{duration:o,delay:u,easing:n,fill:"forwards"})),l&&c.push(e.animate([{transform:l.backwardState.transform},{transform:l.forwardState.transform}],{duration:o,delay:u*2,easing:n,fill:"forwards"}));let h=l?u*2:u,{finish:d}=D(()=>{yt(c);try{S(s,r),S(t,r),e&&S(e,r)}catch{}i()},o+h+F);Promise.all(c.map(m=>m.finished)).then(d).catch(d)}function Oe(s,t,e,r,o,n,i,a){let f=r.views[0],l=r.views[1],u=e&&r.views[2]?r.views[2]:null,c=l.backwardState,h=u?u.backwardState:null;s.style.transformOrigin=f.forwardState.origin,s.style.transform=f.forwardState.transform,requestAnimationFrame(()=>{requestAnimationFrame(()=>{t.style.transformOrigin=l.forwardState.origin,e&&u&&(e.style.transformOrigin=u.forwardState.origin);let d=t.style.transform||getComputedStyle(t).transform||l.forwardState.transform,m=e&&u?e.style.transform||getComputedStyle(e).transform||u.forwardState.transform:null,p=r.stagger||0,v=[];v.push(s.animate([{transform:f.forwardState.transform},{transform:f.backwardState.transform}],{duration:o,easing:n,fill:"forwards"})),v.push(t.animate([{transform:d},{transform:c.transform}],{duration:o,delay:p,easing:n,fill:"both"})),e&&h&&v.push(e.animate([{transform:m},{transform:h.transform}],{duration:o,delay:p*2,easing:n,fill:"both"})),t.style.removeProperty("transform"),e&&e.style.removeProperty("transform");let y=e&&h?p*2:p,{finish:g}=D(()=>{yt(v);try{T(s,i),k(t,c),e&&h&&C(e,h)}catch{}a()},o+y+F);Promise.all(v.map(w=>w.finished)).then(g).catch(g)})})}function Ae(s,t,e,r){let{currentView:o,previousView:n,backView:i,backViewState:a,lastView:f,lastViewState:l,incomingTransformStart:u,incomingTransformEnd:c,outgoingTransform:h,outgoingTransformEnd:d,currentStage:m,canvas:p}=s,v=m.views[0];x(o),o.classList.replace("is-new-current-view","is-current-view"),o.classList.remove("zoom-current-view","has-no-events"),o.style.transformOrigin=v.forwardState.origin;let y=[];y.push(o.animate([{transform:u,opacity:0},{transform:c,opacity:1}],{duration:t,easing:e,fill:"forwards"})),s.keepAlive!=="visible"&&y.push(n.animate([{transform:h,opacity:1},{transform:d,opacity:0}],{duration:t,easing:e,fill:"forwards"})),i&&a&&y.push(i.animate([{transform:a.transformStart},{transform:a.transformEnd}],{duration:t,easing:e,fill:"forwards"})),f&&l&&y.push(f.animate([{transform:l.transformStart},{transform:l.transformEnd}],{duration:t,easing:e,fill:"forwards"}));let{finish:g}=D(()=>{yt(y),o.style.transform=c||v.forwardState.transform,i&&a&&(i.style.transform=a.transformEnd),f&&l&&(f.style.transform=l.transformEnd),s.keepAlive?(n.style.opacity="",n.style.transform=d):T(n,p),r()},t+F);Promise.all(y.map(w=>w.finished)).then(g).catch(g)}function yt(s){for(let t of s)try{t.cancel()}catch{}}function Ut(s,t){let e=typeof globalThis<"u"&&globalThis.anime;if(!e||typeof e!="function"){console.warn('Zumly anime driver: Anime.js not loaded. Add <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.2/anime.min.js"><\/script>'),t();return}let{type:r,currentView:o,previousView:n,lastView:i,currentStage:a,duration:f,ease:l,canvas:u}=s;if(!o||!n||!a){t();return}let c=$(f);r==="lateral"?M(s,t):r==="zoomIn"?Pe(e,o,n,i,a,c,l,t):r==="zoomOut"?Ie(e,o,n,i,a,c,l,u,t):t()}function Pe(s,t,e,r,o,n,i,a){x(t,e,r);let f=o.views[0],l=o.views[1],u=r&&o.views[2]?o.views[2]:null,c=Wt([{el:t,backward:f.backwardState,forward:f.forwardState},{el:e,backward:l.backwardState,forward:l.forwardState},...u?[{el:r,backward:u.backwardState,forward:u.forwardState}]:[]],"forward");Kt(c,0);let h=o.stagger||0,d=n+(u?h*2:h),m={value:0};s({targets:m,value:1,duration:d,easing:Qt(i),update:()=>{let p=m.value*d;Gt(c,p,n,h)},complete:()=>{S(t,o),S(e,o),r&&S(r,o),a()}})}function Ie(s,t,e,r,o,n,i,a,f){let l=o.views[0],u=o.views[1],c=r&&o.views[2]?o.views[2]:null,h=u.backwardState,d=c?c.backwardState:null,m=Wt([{el:t,backward:l.backwardState,forward:l.forwardState},{el:e,backward:u.backwardState,forward:u.forwardState},...c?[{el:r,backward:c.backwardState,forward:c.forwardState}]:[]],"backward");Kt(m,0);let p=o.stagger||0,v=n+(c?p*2:p),y={value:0};s({targets:y,value:1,duration:v,easing:Qt(i),update:()=>{let g=y.value*v;Gt(m,g,n,p)},complete:()=>{T(t,a),k(e,h),r&&d&&C(r,d),f()}})}function Wt(s,t){return s.map(({el:e,backward:r,forward:o})=>{if(t==="forward"){let n=P(e,r.origin,r.transform),i=P(e,r.origin,o.transform);return{el:e,from:n,to:i}}else{let n=P(e,o.origin,o.transform),i=P(e,o.origin,r.transform);return{el:e,from:n,to:i}}})}function Kt(s,t){for(let{el:e,from:r,to:o}of s)e.style.transform=Y(U(r,o,t))}function Gt(s,t,e,r){for(let o=0;o<s.length;o++){let{el:n,from:i,to:a}=s[o],f=o*r,l=Math.max(0,t-f),u=e>0?Math.min(1,l/e):1;n.style.transform=Y(U(i,a,u))}}function Qt(s){if(typeof s!="string")return"easeInOutQuad";let t=s.toLowerCase();return t==="linear"?"linear":t.includes("ease-in-out")?"easeInOutQuad":t.includes("ease-in")?"easeInQuad":t.includes("ease-out")?"easeOutQuad":t}function Jt(s,t){let e=typeof globalThis<"u"&&globalThis.gsap;if(!e||typeof e.to!="function"){console.warn('Zumly GSAP driver: GSAP not loaded. Add <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"><\/script>'),t();return}let{type:r,currentView:o,previousView:n,lastView:i,currentStage:a,duration:f,ease:l,canvas:u}=s;if(!o||!n||!a){t();return}let c=ct(f);r==="lateral"?M(s,t):r==="zoomIn"?Ze(e,o,n,i,a,c,l,t):r==="zoomOut"?$e(e,o,n,i,a,c,l,u,t):t()}function Ze(s,t,e,r,o,n,i,a){x(t,e,r);let f=o.views[0],l=o.views[1],u=r&&o.views[2]?o.views[2]:null;ft(t,f.backwardState),ft(e,l.backwardState),u&&ft(r,u.backwardState);let c=s.timeline({onComplete:()=>{S(t,o),S(e,o),r&&S(r,o),a()}}),h=te(i),d=(o.stagger||0)/1e3;c.to(t,{transform:f.forwardState.transform,duration:n,ease:h},0),c.to(e,{transform:l.forwardState.transform,duration:n,ease:h},d),u&&c.to(r,{transform:u.forwardState.transform,duration:n,ease:h},d*2)}function $e(s,t,e,r,o,n,i,a,f){let l=o.views[0],u=o.views[1],c=r&&o.views[2]?o.views[2]:null,h=u.backwardState,d=c?c.backwardState:null;ft(t,l.forwardState);let m=e.style.transform||getComputedStyle(e).transform||u.forwardState.transform,p=r&&c?r.style.transform||getComputedStyle(r).transform||c.forwardState.transform:null;e.style.transformOrigin=u.forwardState.origin,r&&c&&(r.style.transformOrigin=c.forwardState.origin);let v=te(i),y=s.timeline({onComplete:()=>{T(t,a),k(e,h),r&&d&&C(r,d),f()}}),g=(o.stagger||0)/1e3;s.set(e,{transform:m}),r&&p&&s.set(r,{transform:p}),y.fromTo(t,{transform:l.forwardState.transform},{transform:l.backwardState.transform,duration:n,ease:v},0),y.fromTo(e,{transform:m},{transform:h.transform,duration:n,ease:v},g),r&&d&&y.fromTo(r,{transform:p},{transform:d.transform,duration:n,ease:v},g*2)}function ft(s,t){s.style.transformOrigin=t.origin,s.style.transform=t.transform}function te(s){if(typeof s!="string")return"power2.inOut";let t=s.toLowerCase();return t==="linear"?"none":t.includes("ease-in-out")?"power2.inOut":t.includes("ease-in")?"power2.in":t.includes("ease-out")?"power2.out":t}function ee(s,t){let e=Fe();if(!e||typeof e!="function"){console.warn('Zumly Motion driver: Motion not loaded. Add <script src="https://cdn.jsdelivr.net/npm/motion@11/dist/motion.min.js"><\/script>'),t();return}let{type:r,currentView:o,previousView:n,lastView:i,currentStage:a,duration:f,ease:l,canvas:u}=s;if(!o||!n||!a){t();return}let c=ct(f);r==="lateral"?M(s,t):r==="zoomIn"?Ne(e,o,n,i,a,c,l,t):r==="zoomOut"?Me(e,o,n,i,a,c,l,u,t):t()}function Ne(s,t,e,r,o,n,i,a){x(t,e,r);let f=se(t,e,r,o,"forward");re(f,0);let l=o.stagger||0,u=l/1e3,c=n*1e3,h=n+(f.length>2?u*2:u);s(0,1,{duration:h,ease:ne(i),onUpdate:m=>{let p=m*h*1e3;oe(f,p,c,l)}}).then(()=>{S(t,o),S(e,o),r&&S(r,o),a()}).catch(()=>a())}function Me(s,t,e,r,o,n,i,a,f){let l=o.views[1],u=r&&o.views[2]?o.views[2]:null,c=l.backwardState,h=u?u.backwardState:null,d=se(t,e,r,o,"backward");re(d,0);let m=o.stagger||0,p=m/1e3,v=n*1e3,y=n+(d.length>2?p*2:p);s(0,1,{duration:y,ease:ne(i),onUpdate:w=>{let b=w*y*1e3;oe(d,b,v,m)}}).then(()=>{T(t,a),k(e,c),r&&h&&C(r,h),f()}).catch(()=>f())}function se(s,t,e,r,o){let n=r.views[0],i=r.views[1],a=e&&r.views[2]?r.views[2]:null,f=[{el:s,backward:n.backwardState,forward:n.forwardState},{el:t,backward:i.backwardState,forward:i.forwardState}];return a&&f.push({el:e,backward:a.backwardState,forward:a.forwardState}),f.map(({el:l,backward:u,forward:c})=>o==="forward"?{el:l,from:P(l,u.origin,u.transform),to:P(l,u.origin,c.transform)}:{el:l,from:P(l,c.origin,c.transform),to:P(l,c.origin,u.transform)})}function re(s,t){for(let{el:e,from:r,to:o}of s)e.style.transform=Y(U(r,o,t))}function oe(s,t,e,r){for(let o=0;o<s.length;o++){let{el:n,from:i,to:a}=s[o],f=o*r,l=Math.max(0,t-f),u=e>0?Math.min(1,l/e):1;n.style.transform=Y(U(i,a,u))}}function Fe(){let s=typeof globalThis<"u"?globalThis:typeof window<"u"?window:{};return s.motion?.animate||s.Motion?.animate||s.animate}function ne(s){if(typeof s!="string")return"easeInOut";let t=s.toLowerCase();return t==="linear"?"linear":t.includes("ease-in-out")?"easeInOut":t.includes("ease-in")?"easeIn":t.includes("ease-out")?"easeOut":s}var ie={css:Vt,waapi:Yt,none:Xt,anime:Ut,gsap:Jt,motion:ee};function ae(s){if(typeof s=="function")return{runTransition(r,o){s(r,o)}};let t=typeof s=="string"?s.toLowerCase():"css";return{runTransition:ie[t]||ie.css}}function De(s){if(typeof s!="string"||s.trim()==="")return{tx:0,ty:0,rest:""};let t=s.match(/translate\s*\(\s*([-\d.eE]+)px\s*,\s*([-\d.eE]+)px\s*\)/);if(!t)return null;let e=parseFloat(t[1]),r=parseFloat(t[2]),o=s.replace(/translate\s*\([^)]+\)\s*/,"").trim();return{tx:e,ty:r,rest:o}}function wt(s,t,e){let r=De(s);if(r===null)return s;let o=r.tx*t,n=r.ty*e,i=r.rest?` ${r.rest}`:"";return`translate(${o}px, ${n}px)${i}`.trim()}function He(s){if(typeof s!="string"||!s.trim())return null;let t=s.trim().match(/^([-\d.eE]+)px\s+([-\d.eE]+)px$/);return t?{x:parseFloat(t[1]),y:parseFloat(t[2])}:null}function gt(s,t,e){let r=He(s);return r===null?s:`${r.x*t}px ${r.y*e}px`}function bt(s,t,e,r,o){if(!s.storedViews?.length||!s.canvas||t<=0||e<=0)return;let n=r/t,i=o/e;for(let d of s.storedViews){let m=d.views;if(Array.isArray(m))for(let p=0;p<m.length;p++){let v=m[p];!v||v.detachedNode||(v.backwardState&&(v.backwardState.transform=wt(v.backwardState.transform,n,i),v.backwardState.origin!=null&&(v.backwardState.origin=gt(v.backwardState.origin,n,i))),v.forwardState&&(v.forwardState.transform=wt(v.forwardState.transform,n,i),v.forwardState.origin!=null&&(v.forwardState.origin=gt(v.forwardState.origin,n,i))))}}let a=s.canvas,f=a.querySelector(".is-current-view"),l=a.querySelector(".is-previous-view"),u=a.querySelector(".is-last-view"),c=a.querySelector(".is-new-current-view"),h=[f,l,u,c].filter(Boolean);for(let d of h){if(!d.style)continue;let m=d.style.transform;m!=null&&m!==""&&(d.style.transform=wt(m,n,i));let p=d.style.transformOrigin;p!=null&&p!==""&&(d.style.transformOrigin=gt(p,n,i))}}var je=8e3,tt=class{constructor(t){if(this.storedViews=[],this.currentStage=null,this.debug=!1,this.trace=[],this.blockEvents=!1,this._blockEventsSafetyTimer=null,this.touchstartX=0,this.touchstartY=0,this.touchendX=0,this.touchendY=0,this.touching=!1,this.lateralHistory=[],this._lastCanvasWidth=0,this._lastCanvasHeight=0,this._pendingResizeCorrection=!1,this._destroyed=!1,this._hooks={},this._plugins=[],It(t,this),!this.isValid){this.notify("is unable to start: invalid or missing required options (mount, initialView, views).","error");return}if(this.canvas=document.querySelector(this.mount),!this.canvas){this.notify(`mount selector "${this.mount}" did not match any element.`,"error"),this.isValid=!1;return}this.transitionDriver=ae(this.transitionDriver),this._onZoom=this.onZoom.bind(this),this._onTouchStart=this.onTouchStart.bind(this),this._onTouchEnd=this.onTouchEnd.bind(this),this._onKeyUp=this.onKeyUp.bind(this),this._onWheel=this.onWheel.bind(this),this._wheelCooldown=!1,this._onPrefetchTrigger=e=>{e.target.classList.contains("zoom-me")&&e.target.dataset.to&&this.prefetcher.prefetch(e.target.dataset.to,{trigger:e.target,...e.target.dataset})},this._onResize=this._handleResize.bind(this),this._resizeDebounceTimer=null,this._RESIZE_DEBOUNCE_MS=80,this.prefetcher=new lt(this.views),this._bindEvents()}_bindEvents(){let t=this.canvas;t&&(t.setAttribute("tabindex","0"),t.setAttribute("role","application"),t.setAttribute("aria-roledescription","zoomable interface"),t.setAttribute("aria-live","polite"),t.addEventListener("mouseup",this._onZoom,!1),t.addEventListener("touchend",this._onZoom,!1),t.addEventListener("touchstart",this._onTouchStart,{passive:!0}),t.addEventListener("touchend",this._onTouchEnd,!1),t.addEventListener("keyup",this._onKeyUp,!1),t.addEventListener("wheel",this._onWheel,{passive:!1}),t.addEventListener("mouseover",this._onPrefetchTrigger,{passive:!0}),t.addEventListener("focusin",this._onPrefetchTrigger,{passive:!0}),window.addEventListener("resize",this._onResize,{passive:!0}),typeof ResizeObserver<"u"&&(this._resizeObserver=new ResizeObserver(()=>this._handleResize()),this._resizeObserver.observe(t)))}_unbindEvents(){let t=this.canvas;t&&(t.removeEventListener("mouseup",this._onZoom,!1),t.removeEventListener("touchend",this._onZoom,!1),t.removeEventListener("touchstart",this._onTouchStart),t.removeEventListener("touchend",this._onTouchEnd,!1),t.removeEventListener("keyup",this._onKeyUp,!1),t.removeEventListener("wheel",this._onWheel),t.removeEventListener("mouseover",this._onPrefetchTrigger),t.removeEventListener("focusin",this._onPrefetchTrigger)),window.removeEventListener("resize",this._onResize),this._resizeObserver&&(this._resizeObserver.disconnect(),this._resizeObserver=null)}_setBlockEvents(){this.blockEvents=!0,this._clearBlockEventsSafety(),this._blockEventsSafetyTimer=setTimeout(()=>{this.blockEvents&&!this._destroyed&&(this.notify("blockEvents safety timeout: driver did not call onComplete. Force-resetting.","warn"),this.blockEvents=!1,this._onTransitionComplete())},je)}_clearBlockEventsSafety(){this._blockEventsSafetyTimer!==null&&(clearTimeout(this._blockEventsSafetyTimer),this._blockEventsSafetyTimer=null)}storeViews(t){this.tracing("storedViews()"),this.storedViews.push(t),this.debug&&console.debug("Zumly storedViews",t)}tracing(t){if(this.debug)if(t==="ended"){let e=this.trace.map((r,o)=>`${o===0?`Instance ${this.instance}: ${r}`:`${r}`}`).join(" > ");this.notify(e),this.trace=[]}else this.trace.push(t)}notify(t,e){return z(this.debug,t,e)}_recordCanvasSize(){if(!this.canvas)return;let t=this.canvas.getBoundingClientRect();this._lastCanvasWidth=t.width,this._lastCanvasHeight=t.height}_handleResize(){this._destroyed||(this._resizeDebounceTimer&&clearTimeout(this._resizeDebounceTimer),this._resizeDebounceTimer=setTimeout(()=>{if(this._resizeDebounceTimer=null,!this.isValid||!this.canvas||this._lastCanvasWidth===0)return;let t=this.canvas.getBoundingClientRect(),e=t.width,r=t.height;if(!(e===this._lastCanvasWidth&&r===this._lastCanvasHeight)){if(this.blockEvents){this._pendingResizeCorrection=!0;return}bt(this,this._lastCanvasWidth,this._lastCanvasHeight,e,r),this._lastCanvasWidth=e,this._lastCanvasHeight=r}},this._RESIZE_DEBOUNCE_MS))}_onTransitionComplete(){if(this._clearBlockEventsSafety(),this._pendingResizeCorrection&&!this.blockEvents){this._pendingResizeCorrection=!1;let t=this.canvas?.getBoundingClientRect();if(t&&this._lastCanvasWidth>0){let e=t.width,r=t.height;(e!==this._lastCanvasWidth||r!==this._lastCanvasHeight)&&bt(this,this._lastCanvasWidth,this._lastCanvasHeight,e,r),this._lastCanvasWidth=e,this._lastCanvasHeight=r}}else this._recordCanvasSize();this._manageFocus()}_manageFocus(){if(!this.canvas)return;let t=this.canvas.querySelector(".is-current-view");if(!t)return;let e=t.querySelector('a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])');e?e.focus({preventScroll:!0}):(t.setAttribute("tabindex","-1"),t.focus({preventScroll:!0}))}_resolveEffects(t){let e=t?.dataset?.withEffects;if(e&&typeof e=="string"){let r=e.split("|").map(o=>o.trim());return[r[0]||"none",r[1]||r[0]||"none"]}return this.effects}_applyEffects(t,e,r,o,n){!r||r[0]==="none"&&r[1]==="none"||(t&&r[0]!=="none"&&(t.style.setProperty("--z-effect-filter",r[0]),t.style.setProperty("--zoom-duration",o),t.style.setProperty("--zoom-ease",n),t.classList.add("has-effect")),e&&r[1]!=="none"&&(e.style.setProperty("--z-effect-filter",r[1]),e.style.setProperty("--zoom-duration",o),e.style.setProperty("--zoom-ease",n),e.classList.add("has-effect")))}_removeEffect(t){if(!t||!t.classList.contains("has-effect"))return;t.classList.remove("has-effect"),t.classList.add("has-effect-reverse");let e=()=>{t.classList.remove("has-effect-reverse"),t.style.removeProperty("--z-effect-filter"),t.removeEventListener("transitionend",e)};t.addEventListener("transitionend",e,{once:!0});let r=t.style.getPropertyValue("--zoom-duration");setTimeout(e,r?parseFloat(r)*(r.includes("ms")?1:1e3)+100:1100)}_resolveHideTrigger(t){return t?.dataset?.hideTrigger!==void 0?t.dataset.hideTrigger==="fade"?"fade":!0:this.hideTrigger}_applyHideTrigger(t,e,r,o,n){!r||!t||(r==="fade"?(t.style.setProperty("--zoom-duration",o),t.style.setProperty("--zoom-ease",n),t.classList.add("z-trigger-fade"),e.style.setProperty("--zoom-duration",o),e.style.setProperty("--zoom-ease",n),e.classList.add("z-view-fade-in"),e.offsetHeight,e.classList.remove("hide")):t.classList.add("z-trigger-hidden"))}_restoreHideTrigger(t,e,r,o){if(!(!e||!t))if(e==="fade"){t.classList.remove("z-trigger-fade"),t.style.setProperty("--zoom-duration",r),t.style.setProperty("--zoom-ease",o),t.classList.add("z-trigger-fade-reverse");let n=()=>{t.classList.remove("z-trigger-fade-reverse"),t.style.removeProperty("--zoom-duration"),t.style.removeProperty("--zoom-ease"),t.removeEventListener("transitionend",n)};t.addEventListener("transitionend",n,{once:!0}),setTimeout(n,parseFloat(r)*(r.includes("ms")?1:1e3)+100)}else t.classList.remove("z-trigger-hidden")}on(t,e){return typeof e!="function"?this:((this._hooks[t]||=[]).push(e),this)}use(t,e){if(!t)return this;let r={plugin:t,options:e};return this._plugins.push(r),this._initialized&&this._installPlugin(r),this}_installPlugin(t){let{plugin:e,options:r}=t;try{typeof e=="function"?e(this,r):typeof e.install=="function"&&e.install(this,r)}catch(o){this.notify(`plugin install error: ${o.message}`,"error")}}off(t,e){return e?this._hooks[t]&&(this._hooks[t]=this._hooks[t].filter(r=>r!==e)):delete this._hooks[t],this}_emit(t,e={}){let r=this._hooks[t];if(!(!r||r.length===0))for(let o of r)try{o(e)}catch(n){this.debug&&console.error(`Zumly hook "${t}" threw:`,n)}}zoomLevel(){return this.storedViews.length}getZoomLevel(){return this.zoomLevel()}getCurrentViewName(){return!this.storedViews||this.storedViews.length===0?null:this.storedViews[this.storedViews.length-1]?.views?.[0]?.viewName??null}back(){if(!this._destroyed){if(this.lateralHistory&&this.lateralHistory.length>0){let t=this.lateralHistory.pop(),e=t&&typeof t=="object"?t.name:t,r=t&&typeof t=="object"?t.entry:void 0,o=t&&typeof t=="object"?t.node:void 0;return this._doLateral(e,!0,{savedEntry:r,keepAliveNode:o})}this.zoomOut()}}async goTo(t,e={}){return this._destroyed?void 0:(e.mode==="lateral"?"lateral":"depth")==="depth"?this.zoomTo(t,e):this._doLateral(t,!1,e)}async zoomTo(t,e={}){if(this._destroyed)return;if(!this.isValid||!this.canvas){this.notify("zoomTo() cannot run: instance is invalid or canvas not found.","error");return}if(typeof t!="string"||!t){this.notify("zoomTo() requires a non-empty view name.","warn");return}if(!Object.prototype.hasOwnProperty.call(this.views,t)){this.notify(`zoomTo("${t}"): view not found in views. Available: ${Object.keys(this.views).join(", ")}`,"warn");return}if(this.getCurrentViewName()===t)return;let o=this.canvas.getBoundingClientRect(),n=Math.max(40,o.width*.1),i=Math.max(40,o.height*.1),f={rect:{x:o.left+(o.width-n)/2,y:o.top+(o.height-i)/2,width:n,height:i},duration:e.duration??this.duration,ease:e.ease??this.ease,props:e.props??{}};await this._doZoomIn(t,f)}async init(){if(this._destroyed)return;if(!this.isValid||!this.canvas){this.notify("init() cannot run: instance is invalid or canvas element was not found.","error");return}this.tracing("init()"),this.preload&&this.preload.length&&await this.prefetcher.preloadEager(this.preload,null);let t=await this.prefetcher.get(this.initialView,null),e=await K(t,this.initialView,this.canvas,!0,this.views,this.componentContext);this._emit("viewMounted",{viewName:this.initialView,node:e}),this.prefetcher.scanAndPrefetch(e,null),this.storeViews({zoomLevel:this.storedViews.length,scale:1,views:[{viewName:this.initialView,backwardState:{origin:"0 0",transform:""}}]}),this.currentStage=this.storedViews[this.storedViews.length-1],this._recordCanvasSize(),this._initialized=!0;for(let r of this._plugins)this._installPlugin(r)}destroy(){this._destroyed||(this._emit("destroy"),this._destroyed=!0,this._clearBlockEventsSafety(),this._resizeDebounceTimer&&(clearTimeout(this._resizeDebounceTimer),this._resizeDebounceTimer=null),this._unbindEvents(),this._removeNav(),this._cleanupLateralKeepAlive(),this.blockEvents=!1,this.storedViews=[],this.currentStage=null,this.lateralHistory=[],this.trace=[],this._hooks={},this.prefetcher=null,this.transitionDriver=null,this.canvas&&(this.canvas.removeAttribute("tabindex"),this.canvas.removeAttribute("role"),this.canvas.removeAttribute("aria-roledescription"),this.canvas.removeAttribute("aria-live")),this.isValid=!1)}async _doZoomIn(t,e){if(this._destroyed)return;this._removeNav(),this._cleanupLateralKeepAlive(),this.lateralHistory=[],this._emit("beforeZoomIn",{viewName:t}),this.tracing("zoomIn()");let r=this.canvas,o=e.el,n=r.getBoundingClientRect(),i=n.left,a=n.top,l=(this.storedViews.length>0?this.storedViews[this.storedViews.length-1]:null)?.scale??1;this.tracing("getView()");let u=o?{trigger:o,target:document.createElement("div"),context:this.componentContext,props:Object.assign({},o.dataset)}:{target:document.createElement("div"),context:this.componentContext,props:e.props??{}},c=o?.dataset?.deferred!==void 0?!0:this.deferred,h,d=null;if(c){let E=await this.prefetcher.get(t,u);if(this._destroyed)return;for(d=document.createDocumentFragment();E.firstChild;)d.appendChild(E.firstChild);h=await K(E,t,r,!1,{},this.componentContext)}else{let E=await this.prefetcher.get(t,u);if(this._destroyed)return;this.prefetcher.scanAndPrefetch(E,u),h=await K(E,t,r,!1,this.views,this.componentContext)}if(!h)return;c||this._emit("viewMounted",{viewName:t,node:h}),o&&o.classList.add("zoomed");let m=o?(()=>{let E=o.getBoundingClientRect();return{x:E.x,y:E.y,width:E.width,height:E.height}})():e.rect,p=o?o.dataset.withDuration||this.duration:e.duration??this.duration,v=o?o.dataset.withEase||this.ease:e.ease??this.ease,y=o?o.dataset.withCover||this.cover:e.cover??this.cover,g=o?parseInt(o.dataset.withStagger,10)||this.stagger:e.stagger??this.stagger,w=r.querySelector(".is-current-view"),b=r.querySelector(".is-previous-view"),L=r.querySelector(".is-last-view");V(h),V(w),V(b),L&&(V(L),r.removeChild(L));let Z,H,W,_,O,N,A,fe=w.style.transform,Et=w.style.transformOrigin,ue=b?b.style.transform:null,_t=b?b.style.transformOrigin:null;try{w.classList.replace("is-current-view","is-previous-view"),b&&b.classList.replace("is-previous-view","is-last-view");let E=h.getBoundingClientRect(),j=w.getBoundingClientRect(),dt=null,xt=null,st=null;b&&(dt=b.getBoundingClientRect(),st=b.querySelector(".zoomed"),xt=st&&st.getBoundingClientRect?st.getBoundingClientRect():dt);let rt={left:i,top:a},Lt={width:n.width,height:n.height},Tt={width:E.width,height:E.height},zt=Zt(m.width,m.height,E.width,E.height,y);A=zt.scale;let we=zt.scaleInv;Z=$t(m,rt,Tt,we),W=w.style.transform;let kt=Mt(m,j);_=Ft(Lt,m,j,A,this.parallax);let Ct=nt(Et||"0 0"),q=G(W||""),Ot=nt(kt),B=G(_.transform),At=m;if(o&&(At=it(m,j,Ct,q.tx,q.ty,q.scale,Ot,B.tx,B.ty,B.scale)),H=Nt(At,rt,Tt),b){O=b.style.transform;let ge=it(j,j,Ct,q.tx,q.ty,q.scale,Ot,B.tx,B.ty,B.scale),be=Ht(_.x,_.y,rt,A,l),Pt=nt(_t||"0 0"),mt=G(O||""),pt=G(be),Se=it(xt,dt,Pt,mt.tx,mt.ty,mt.scale,Pt,pt.tx,pt.ty,pt.scale);N=Dt({canvasRect:Lt,canvasOffset:rt,triggerRect:m,previousViewRectAtBaseTransform:j,lastViewZoomedElementRect:Se,previousViewRectWithPreviousAtEndTransform:ge,scale:A,preScale:l,parallax:this.parallax})}h.style.transform=Z,w.style.transformOrigin=kt}catch(E){this.notify(`zoomIn geometry computation failed: ${E.message}. Aborting zoom.`,"error"),this.debug&&console.error("Zumly _doZoomIn error:",E),w.style.transform=fe,w.style.transformOrigin=Et,w.classList.contains("is-previous-view")&&w.classList.replace("is-previous-view","is-current-view"),b&&(b.style.transform=ue,b.style.transformOrigin=_t,b.classList.contains("is-last-view")&&b.classList.replace("is-last-view","is-previous-view"));try{r.removeChild(h)}catch{}R(w),R(b);return}let he=Q(h.dataset.viewName,{origin:h.style.transformOrigin,duration:p,ease:v,transform:Z},{origin:h.style.transformOrigin,duration:p,ease:v,transform:H}),de=Q(w.dataset.viewName,{origin:w.style.transformOrigin,duration:p,ease:v,transform:W},{origin:w.style.transformOrigin,duration:p,ease:v,transform:_.transform}),me=b?Q(b.dataset.viewName,{origin:b.style.transformOrigin,duration:p,ease:v,transform:O},{origin:b.style.transformOrigin,duration:p,ease:v,transform:N}):null,pe=L?jt(L):null,et=Rt(this.storedViews.length,he,de,me,pe);et.scale=A,et.stagger=g||0,this.storeViews(et),this.currentStage=this.storedViews[this.storedViews.length-1],this.tracing("setCSSVariables()");let ve=this._resolveEffects(o);this._applyEffects(w,b,ve,p,v);let ht=this._resolveHideTrigger(o);this._applyHideTrigger(o,h,ht,p,v),ht&&(et.hideTriggerMode=ht),this._setBlockEvents();let ye={type:"zoomIn",currentView:h,previousView:w,lastView:b,currentStage:this.currentStage,duration:p,ease:v};this.transitionDriver.runTransition(ye,async()=>{c&&d&&h&&!this._destroyed&&(h.appendChild(d),this.prefetcher.scanAndPrefetch(h,u),typeof this.views[t]=="object"&&typeof this.views[t].mounted=="function"&&await this.views[t].mounted(),this._emit("viewMounted",{viewName:t,node:h})),this.blockEvents=!1,this._onTransitionComplete(),this._updateNav(),this._emit("afterZoomIn",{viewName:t,zoomLevel:this.zoomLevel()}),this.tracing("ended")})}async zoomIn(t){this._destroyed||t?.dataset?.to&&await this._doZoomIn(t.dataset.to,{el:t})}async _doLateral(t,e=!1,r={}){if(this._destroyed||(this._removeNav(),!this.isValid||!this.canvas))return;if(!Object.prototype.hasOwnProperty.call(this.views,t)){this.notify(`goTo("${t}", { mode: 'lateral' }): view not found in views. Available: ${Object.keys(this.views).join(", ")}`,"warn");return}let o=this.canvas.querySelector(".is-current-view");if(!o)return;let n=o.dataset?.viewName;if(n===t)return;this._emit("beforeLateral",{viewName:t,from:n,isBack:e});let i=this.lateralNav&&this.lateralNav.keepAlive;if(!e){this.lateralHistory=this.lateralHistory||[];let _=this.storedViews[this.storedViews.length-1];this.lateralHistory.push({name:n,entry:_.views[0],node:i?o:null})}this.tracing("lateral()");let a=r.duration??this.duration,f=r.ease??this.ease,l=this.canvas.querySelector(".is-previous-view"),u=this.canvas.querySelector(".is-last-view"),c=0,h=0;if(l){let _=l.querySelector(`.zoom-me[data-to="${n}"]`),O=l.querySelector(`.zoom-me[data-to="${t}"]`);if(_&&O){let N=_.getBoundingClientRect(),A=O.getBoundingClientRect();c=N.left+N.width/2-(A.left+A.width/2),h=N.top+N.height/2-(A.top+A.height/2)}else c=this.canvas.getBoundingClientRect().width*.15}let d=null,m=null;if(i&&(e&&r.keepAliveNode?m=r.keepAliveNode:m=this.canvas.querySelector(`.is-lateral-hidden[data-view-name="${t}"]`)),m){if(m.style.display="",m.style.opacity="",m.classList.remove("is-lateral-hidden","zoom-lateral-out"),m.classList.add("is-new-current-view","has-no-events"),d=m,!e&&this.lateralHistory){let _=this.lateralHistory.findIndex(O=>O.node===m);_!==-1&&this.lateralHistory.splice(_,1)}}else{let _={target:document.createElement("div"),context:this.componentContext,props:r.props??{}},O=await this.prefetcher.get(t,_);if(this._destroyed||(this.prefetcher.scanAndPrefetch(O,_),d=await K(O,t,this.canvas,!1,this.views,this.componentContext),!d))return;this._emit("viewMounted",{viewName:t,node:d})}V(d);let p=o.style.transform||"",v=o.style.transformOrigin||"0 0";d.style.transform=p,d.style.transformOrigin=v;let y=this.storedViews[this.storedViews.length-1],g=e&&r.savedEntry?{...r.savedEntry,viewName:t}:Q(t,{origin:v,duration:a,ease:f,transform:p},{origin:v,duration:a,ease:f,transform:p});y.views[0]=g,this.currentStage=y;let w=l?{transformStart:l.style.transform||"",transformEnd:this._computeLateralBackTransform(l.style.transform||"",c,h)}:null,b=u&&y.views[2]?{transformStart:u.style.transform||"",transformEnd:this._computeLateralBackTransform(u.style.transform||"",c*.7,h*.7)}:null;w&&y.views[1]&&(y.views[1].forwardState={...y.views[1].forwardState,transform:w.transformEnd}),b&&y.views[2]&&(y.views[2].forwardState={...y.views[2].forwardState,transform:b.transformEnd});let L=p,Z=this._computeLateralBackTransform(L,-c,-h),H=this._computeLateralBackTransform(p,c,h);this._setBlockEvents();let W={type:"lateral",currentView:d,previousView:o,lastView:u||null,backView:l||null,backViewState:w,lastViewState:b,incomingTransformStart:Z,incomingTransformEnd:L,outgoingTransform:p,outgoingTransformEnd:H,currentStage:this.currentStage,duration:a,ease:f,canvas:this.canvas,slideDeltaX:c,slideDeltaY:h,keepAlive:i&&!e?i:!1};this.transitionDriver.runTransition(W,()=>{i&&!e&&(o.classList.remove("is-current-view","is-new-current-view","has-no-events"),o.classList.add("is-lateral-hidden"),i!=="visible"?o.style.display="none":(o.style.transform=p,o.style.opacity="")),this.blockEvents=!1,this._onTransitionComplete(),this._updateNav(),this._emit("afterLateral",{viewName:t,from:n,isBack:e}),this.tracing("ended")})}_computeLateralBackTransform(t,e,r){let o=t.match(/translate\s*\(\s*([-\d.eE]+)px\s*,\s*([-\d.eE]+)px\s*\)/);if(o){let n=parseFloat(o[1])+e,i=parseFloat(o[2])+r,a=t.replace(/translate\s*\([^)]+\)\s*/,"");return`translate(${n}px, ${i}px) ${a}`.trim()}return`translate(${e}px, ${r}px) ${t}`.trim()}zoomOut(){if(this._destroyed)return;this._removeNav(),this._cleanupLateralKeepAlive(),this.lateralHistory=[],this._emit("beforeZoomOut",{zoomLevel:this.zoomLevel()}),this.tracing("zoomOut()");let t=this.canvas,e=t.querySelector(".is-current-view"),r=t.querySelector(".is-previous-view");if(!e||!r){this.notify("zoomOut: current or previous view not found (animation may still be running)","warn");return}this._setBlockEvents(),this.currentStage=this.storedViews[this.storedViews.length-1];let o=t.querySelector(".is-last-view");this.tracing("setCSSVariables()");let n=this.currentStage.views[0]?.forwardState?.duration??this.duration,i=this.currentStage.views[0]?.forwardState?.ease??this.ease,a=r.querySelector(".zoomed");a&&a.classList.remove("zoomed");let f=this.currentStage.hideTriggerMode;f&&a&&this._restoreHideTrigger(a,f,n,i),f==="fade"?(e.classList.remove("z-view-fade-in"),e.style.setProperty("--zoom-duration",n),e.style.setProperty("--zoom-ease",i),e.classList.add("z-view-fade-out")):(e.classList.remove("z-view-fade-in"),e.style.removeProperty("opacity")),this._removeEffect(r),r.classList.replace("is-previous-view","is-current-view"),o!==null&&(o.classList.contains("has-effect")&&this.effects[0]!=="none"&&o.style.setProperty("--z-effect-filter",this.effects[0]),o.classList.replace("is-last-view","is-previous-view"),o.classList.remove("hide"),R(o));let l=qt(this.currentStage);if(l){t.prepend(l);let c=t.querySelector(".z-view:first-child");c&&(R(c),c.classList.add("hide"))}let u={type:"zoomOut",currentView:e,previousView:r,lastView:o,currentStage:this.currentStage,duration:n,ease:i,canvas:t};this.transitionDriver.runTransition(u,()=>{this.blockEvents=!1,this._onTransitionComplete(),this._updateNav(),this._emit("afterZoomOut",{zoomLevel:this.zoomLevel()}),this.tracing("ended")}),this.storedViews.pop()}onZoom(t){if(this._destroyed||t.type==="mouseup"&&!this.inputs.click||t.type==="touchend"&&!this.inputs.touch)return;let e=t.target;if(e.closest(".z-nav"))return;let r=e.classList.contains("zoom-me")||e.closest(".zoom-me");if(!this.blockEvents&&r&&!this.touching){this.tracing("onZoom() \u2192 zoomIn"),t.stopPropagation();let o=e.classList.contains("zoom-me")?e:e.closest(".zoom-me");this.zoomIn(o);return}if(this.storedViews.length>1&&!this.blockEvents&&!r&&!this.touching){let o=this.canvas.querySelector(".is-current-view");if(o&&o.contains(e))return;let n=this._findSiblingTriggerAtPoint(t.clientX,t.clientY);if(n){this.tracing("onZoom() \u2192 lateral"),t.stopPropagation(),this._doLateral(n.dataset.to);return}this.tracing("onZoom() \u2192 zoomOut"),t.stopPropagation(),this.zoomOut()}}_findSiblingTriggerAtPoint(t,e){let r=this.canvas.querySelector(".is-previous-view");if(!r)return null;let n=this.canvas.querySelector(".is-current-view")?.dataset?.viewName;if(!n)return null;let i=r.querySelectorAll(".zoom-me[data-to]");for(let a of i){if(a.dataset.to===n)continue;let f=a.getBoundingClientRect();if(t>=f.left&&t<=f.right&&e>=f.top&&e<=f.bottom)return a}return null}_getSiblings(){let t=this.canvas.querySelector(".is-previous-view");if(!t)return{siblings:[],currentIndex:-1};let r=this.canvas.querySelector(".is-current-view")?.dataset?.viewName,o=t.querySelectorAll(".zoom-me[data-to]"),n=[];for(let a of o)a.dataset.to&&n.push(a.dataset.to);let i=n.indexOf(r);return{siblings:n,currentIndex:i}}_updateNav(){if(this._destroyed)return;this._removeNav();let t=this.storedViews.length-1,e=this.depthNav&&t>=1,r=this.lateralNav,o=null;if(r&&(o=this._getSiblings(),o.siblings.length<2&&(o=null),o&&this.lateralNav.mode==="auto"&&t>=1)){let i=this.canvas.querySelector(".z-view.is-current-view");i&&i.offsetWidth>=this.canvas.offsetWidth&&i.offsetHeight>=this.canvas.offsetHeight&&(o=null)}if(!e&&!o)return;let n=document.createElement("div");if(n.className="z-nav z-nav--"+this.navPosition,e){let i=document.createElement("div");if(i.className="z-nav-depth",this.depthNav.button!==!1){let a=document.createElement("button");a.className="z-nav-back",a.setAttribute("aria-label","Zoom out (go back)"),a.innerHTML="‹",a.addEventListener("mouseup",f=>{f.stopPropagation(),!this.blockEvents&&this.storedViews.length>1&&this.zoomOut()}),i.appendChild(a)}if(this.depthNav.indicator){let a=document.createElement("div");a.className="z-nav-depth-dots";for(let f=0;f<=t;f++){let l=document.createElement("span");l.className="z-nav-dot"+(f===t?" is-active":""),a.appendChild(l)}i.appendChild(a)}n.appendChild(i)}if(e&&o){let i=document.createElement("div");i.className="z-nav-sep",n.appendChild(i)}if(o){let{siblings:i,currentIndex:a}=o,f=document.createElement("div");if(f.className="z-nav-lateral",this.lateralNav.arrows){let l=document.createElement("button");l.className="z-nav-arrow z-nav-prev",l.setAttribute("aria-label","Previous sibling view"),l.innerHTML="‹",l.disabled=a<=0,l.addEventListener("mouseup",u=>{u.stopPropagation(),a>0&&this._doLateral(i[a-1])}),f.appendChild(l)}if(this.lateralNav.dots){let l=document.createElement("div");l.className="z-nav-lateral-dots";for(let u=0;u<i.length;u++){let c=document.createElement("button");c.className="z-nav-dot z-nav-lat-dot"+(u===a?" is-active":""),c.setAttribute("aria-label",`Go to ${i[u]}`),c.dataset.to=i[u],c.addEventListener("mouseup",(h=>d=>{d.stopPropagation(),h!==a&&this._doLateral(i[h])})(u)),l.appendChild(c)}f.appendChild(l)}if(this.lateralNav.arrows){let l=document.createElement("button");l.className="z-nav-arrow z-nav-next",l.setAttribute("aria-label","Next sibling view"),l.innerHTML="›",l.disabled=a>=i.length-1,l.addEventListener("mouseup",u=>{u.stopPropagation(),a<i.length-1&&this._doLateral(i[a+1])}),f.appendChild(l)}n.appendChild(f)}this.canvas.appendChild(n)}_removeNav(){this.canvas&&this.canvas.querySelectorAll(".z-nav").forEach(t=>t.remove())}_cleanupLateralKeepAlive(){if(!this.canvas)return;let t=this.canvas.querySelectorAll(".is-lateral-hidden");for(let e of t)e.remove()}onKeyUp(t){this._destroyed||this.inputs.keyboard&&(this.tracing("onKeyUp()"),(t.key==="ArrowLeft"||t.key==="ArrowDown")&&(t.preventDefault(),this.storedViews.length>1&&!this.blockEvents?this.zoomOut():this.notify(`is on level zero. Can't zoom out. Trigger: ${t.key}`,"warn")),(t.key==="ArrowRight"||t.key==="ArrowUp")&&(t.preventDefault(),this.notify(t.key+" has no actions defined")))}onWheel(t){this._destroyed||this.inputs.wheel&&(this._isInsideScrollable(t.target,t.deltaY)||(t.preventDefault(),!(this.blockEvents||this._wheelCooldown)&&t.deltaY>0&&this.storedViews.length>1&&(this.tracing("onWheel() \u2192 zoomOut"),this._wheelCooldown=!0,setTimeout(()=>{this._wheelCooldown=!1},500),this.zoomOut())))}_isInsideScrollable(t,e){let r=t,o=this.canvas.querySelector(".is-current-view");for(;r&&r!==this.canvas;){if(r===o||o&&o.contains(r)){let{overflowY:n}=window.getComputedStyle(r);if((n==="auto"||n==="scroll")&&(e>0?r.scrollTop+r.clientHeight<r.scrollHeight-1:r.scrollTop>0))return!0}r=r.parentElement}return!1}onTouchStart(t){this._destroyed||this.inputs.touch&&(this.tracing("onTouchStart()"),this.touching=!0,this.touchstartX=t.changedTouches[0].screenX,this.touchstartY=t.changedTouches[0].screenY)}onTouchEnd(t){this._destroyed||this.inputs.touch&&(this.blockEvents||(this.tracing("onTouchEnd()"),this.touchendX=t.changedTouches[0].screenX,this.touchendY=t.changedTouches[0].screenY,this.handleGesture(t)))}handleGesture(t){t.stopPropagation(),this.tracing("handleGesture()");let e=this.touchendX-this.touchstartX,r=this.touchendY-this.touchstartY,o=Math.abs(e)<10&&Math.abs(r)<10;e<-30&&(this.storedViews.length>1&&!this.blockEvents?(this.tracing("swipe left"),this.zoomOut()):this.notify("is on level zero. Can't zoom out. Trigger: Swipe left","warn")),o&&!this.blockEvents&&t.target.classList.contains("zoom-me")&&this.touching&&(this.touching=!1,this.tracing("tap"),t.preventDefault(),this.zoomIn(t.target)),o&&this.storedViews.length>1&&!this.blockEvents&&!t.target.classList.contains("zoom-me")&&t.target.closest(".is-current-view")===null&&this.touching&&(this.touching=!1,this.tracing("tap"),this.zoomOut())}};var Re={separator:"/",prefix:"/"};function le(s,t){let e=[];for(let r of s.storedViews){let o=r.views&&r.views[0];o&&o.viewName&&e.push(o.viewName)}return e.join(t)}function qe(s,t){let e=window.location.hash.slice(1);return e.startsWith(s)&&(e=e.slice(s.length)),e?e.split(t).filter(Boolean):[]}var ce={install(s,t){let e=Object.assign({},Re,t),r=e.separator,o=e.prefix,n=!1;function i(u){if(n)return;let c=le(s,r),h="#"+o+c;window.location.hash!==h&&(n=!0,window.history[u](null,"",h),n=!1)}function a(){i("pushState")}function f(){i("replaceState")}s.on("afterZoomIn",a),s.on("afterLateral",a),s.on("afterZoomOut",f);function l(){if(n)return;n=!0;let u=qe(o,r),c=le(s,r).split(r).filter(Boolean);if(u.join(r)===c.join(r)){n=!1;return}if(u.length<c.length){let h=c.length-u.length;for(let d=0;d<h;d++)s.zoomOut()}else if(u.length===c.length&&u.length>0){let h=u[u.length-1];h!==c[c.length-1]&&s.goTo(h,{mode:"lateral"})}else u.length>c.length&&window.history.back();n=!1}window.addEventListener("popstate",l),f(),s.on("destroy",function(){s.off("afterZoomIn",a),s.off("afterLateral",a),s.off("afterZoomOut",f),window.removeEventListener("popstate",l)})}};tt.Router=ce;var Zs=tt;export{tt as Zumly,ce as ZumlyRouter,Zs as default};
|