' +
60 | '
' +
61 | '
' +
62 | '' +
63 | '
--body--
' +
64 | '' +
65 | '
'
66 | this.modalContent = this.modalContent.replace(/--header--/, "
" + _t.title + " ")
67 | this.modalContent = this.modalContent.replace(/--body--/,
68 | _t.body.replace(/--privacy-policy--/, linkPrivacyPolicy)
69 | )
70 | this.modalContent = this.modalContent.replace(/--footer--/,
71 | "
" +
72 | "" + _t.buttonAcceptTechnical + " " +
73 | "" + _t.buttonAcceptAll + " " +
74 | "
"
75 | )
76 |
77 | this.setCookie = function (name, value, days) {
78 | var expires = ""
79 | if (days) {
80 | var date = new Date()
81 | date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000))
82 | expires = "; expires=" + date.toUTCString()
83 | }
84 | document.cookie = name + "=" + (value || "") + expires + "; Path=/; SameSite=Strict;"
85 | }
86 |
87 | this.getCookie = function(name) {
88 | var nameEQ = name + "="
89 | var ca = document.cookie.split(';')
90 | for (var i = 0; i < ca.length; i++) {
91 | var c = ca[i]
92 | while (c.charAt(0) === ' ') {
93 | c = c.substring(1, c.length)
94 | }
95 | if (c.indexOf(nameEQ) === 0) {
96 | return c.substring(nameEQ.length, c.length)
97 | }
98 | }
99 | return undefined
100 | }
101 |
102 | this.removeCookie = function (name) {
103 | document.cookie = name + '=; Path=/; SameSite=Strict; Expires=Thu, 01 Jan 1970 00:00:01 GMT;'
104 | }
105 |
106 | this.documentReady = function (fn) {
107 | if (document.readyState !== 'loading') {
108 | fn()
109 | } else {
110 | document.addEventListener('DOMContentLoaded', fn)
111 | }
112 | }
113 |
114 | this.hideDialog = function () {
115 | this.modal.style.display = "none"
116 | }
117 |
118 | this.showDialog = function () {
119 | this.documentReady(function () {
120 | this.modal = document.getElementById(self.props.modalId)
121 | if (!this.modal) {
122 | this.modal = document.createElement("div")
123 | this.modal.id = self.props.modalId
124 | this.modal.innerHTML = self.modalContent
125 | document.body.append(this.modal)
126 | this.modal.querySelector(".btn-accept-necessary").addEventListener("click", function () {
127 | this.setCookie(self.props.cookieName, "false", 365)
128 | this.hideDialog()
129 | if (self.props.postSelectionCallback) {
130 | self.props.postSelectionCallback(false)
131 | }
132 | }.bind(this))
133 | this.modal.querySelector(".btn-accept-all").addEventListener("click", function () {
134 | this.setCookie(self.props.cookieName, "true", 365)
135 | this.hideDialog()
136 | if (self.props.postSelectionCallback) {
137 | self.props.postSelectionCallback(true)
138 | }
139 | }.bind(this))
140 | } else {
141 | this.modal.style.display = "block"
142 | }
143 | }.bind(this))
144 | }
145 |
146 | if (this.getCookie(this.props.cookieName) === undefined && this.props.autoShowModal) {
147 | this.showDialog()
148 | }
149 |
150 | // API
151 | this.reset = function () {
152 | this.removeCookie(this.props.cookieName)
153 | this.showDialog()
154 | }
155 |
156 | this.trackingAllowed = function () {
157 | return this.getCookie(this.props.cookieName) === "true"
158 | }
159 |
160 | }
161 |
--------------------------------------------------------------------------------
/src/vendors/image-zoom.d.ts:
--------------------------------------------------------------------------------
1 | import 'focus-options-polyfill';
2 | export interface ImageZoomOpts {
3 | closeText?: string;
4 | isControlled?: boolean;
5 | modalText?: string;
6 | onZoomChange?: (isZoomed: boolean) => void;
7 | openText?: string;
8 | overlayBgColor?: string;
9 | overlayOpacity?: number;
10 | transitionDuration?: number;
11 | zoomMargin?: number;
12 | zoomZindex?: number;
13 | }
14 | export interface ImageZoomUpdateOpts extends ImageZoomOpts {
15 | isZoomed?: boolean;
16 | }
17 | interface Update {
18 | (opts?: ImageZoomUpdateOpts): void;
19 | }
20 | export interface ImageZoomReturnType {
21 | cleanup: () => void;
22 | update: Update;
23 | }
24 | declare const ImageZoom: ({ closeText, isControlled, modalText, onZoomChange, openText, overlayBgColor, overlayOpacity, transitionDuration: _transitionDuration, zoomMargin, zoomZindex, }: ImageZoomOpts | undefined, targetEl: HTMLElement) => ImageZoomReturnType;
25 | export default ImageZoom;
26 |
--------------------------------------------------------------------------------
/src/vendors/image-zoom.js:
--------------------------------------------------------------------------------
1 | import 'focus-options-polyfill';
2 | import { focus, addEventListener, getBoundingClientRect, getScaleToWindowMax, getScaleToWindow, createElement, setAttribute, getComputedStyle, setStyleProperty, removeEventListener, removeChild, getParentNode, appendChild, getStyleProperty, getWindowInnerWidth, getWindowInnerHeight, blur, cloneElement, removeAttribute, forEachSibling, getAttribute } from '@rpearce/ts-dom-fns';
3 |
4 | var State;
5 | (function (State) {
6 | State["LOADED"] = "LOADED";
7 | State["UNLOADED"] = "UNLOADED";
8 | State["UNLOADING"] = "UNLOADING";
9 | })(State || (State = {}));
10 | var LOADED = State.LOADED, UNLOADED = State.UNLOADED, UNLOADING = State.UNLOADING;
11 | var focusPreventScroll = focus.bind(null, { preventScroll: true });
12 | var ABSOLUTE = 'absolute';
13 | var ARIA_HIDDEN = 'aria-hidden';
14 | var ARIA_LABEL = 'aria-label';
15 | var ARIA_MODAL = 'aria-modal';
16 | var BG_COLOR_CSS = 'background-color';
17 | var BLOCK = 'block';
18 | var BUTTON = 'button';
19 | var CLICK = 'click';
20 | var CURSOR = 'cursor';
21 | var DATA_RMIZ_OVERLAY = 'data-rmiz-overlay';
22 | var DATA_RMIZ_ZOOMED = 'data-rmiz-zoomed';
23 | var DIALOG = 'dialog';
24 | var DISPLAY = 'display';
25 | var DIV = 'div';
26 | var FOCUS = 'focus';
27 | var HEIGHT = 'height';
28 | var HIDDEN = 'hidden';
29 | var HUNDRED_PCT = '100%';
30 | var ID = 'id';
31 | var KEYDOWN = 'keydown';
32 | var LEFT = 'left';
33 | var LOAD = 'load';
34 | var MARGIN = 'margin';
35 | var MARGIN_LEFT_JS = MARGIN + "Left";
36 | var MARGIN_TOP_JS = MARGIN + "Top";
37 | var MAX_HEIGHT = 'maxHeight';
38 | var MAX_WIDTH = 'maxWidth';
39 | var NONE = 'none';
40 | var OPACITY = 'opacity';
41 | var POSITION = 'position';
42 | var RESIZE = 'resize';
43 | var ROLE = 'role';
44 | var SCROLL = 'scroll';
45 | var STYLE = 'style';
46 | var TABINDEX = 'tabindex';
47 | var TOP = 'top';
48 | var TRANSFORM = 'transform';
49 | var TRANSITION = 'transition';
50 | var TRANSITIONEND = 'transitionend';
51 | var TRUE_STR = 'true';
52 | var TYPE = 'type';
53 | var VISIBILITY = 'visibility';
54 | var WIDTH = 'width';
55 | var ZERO = '0';
56 | var Z_INDEX_CSS = 'z-index';
57 | var ImageZoom = function (_a, targetEl) {
58 |
59 | var _b = _a === void 0 ? {} : _a, _c = _b.closeText, closeText = _c === void 0 ? 'Unzoom image' : _c, _d = _b.isControlled, isControlled = _d === void 0 ? false : _d, _e = _b.modalText, modalText = _e === void 0 ? 'Zoomed item' : _e, onZoomChange = _b.onZoomChange, _g = _b.overlayBgColor, overlayBgColor = _g === void 0 ? '#fff' : _g, _h = _b.overlayOpacity, overlayOpacity = _h === void 0 ? 1 : _h, _j = _b.transitionDuration, _transitionDuration = _j === void 0 ? 300 : _j, _k = _b.zoomMargin, zoomMargin = _k === void 0 ? 0 : _k, _l = _b.zoomZindex, zoomZindex = _l === void 0 ? 2147483647 : _l;
60 | var isImgEl = targetEl.tagName === 'IMG';
61 | var isSvgSrc = isImgEl && SVG_REGEX.test(targetEl.currentSrc);
62 | var isImg = !isSvgSrc && isImgEl;
63 | var documentBody = document.body;
64 | var scrollableEl = window;
65 | var ariaHiddenSiblings = [];
66 | var boundaryDivFirst;
67 | var boundaryDivLast;
68 | var closeBtnEl;
69 | var modalEl;
70 | var motionPref;
71 | var openBtnEl;
72 | var overlayEl;
73 | var state = UNLOADED;
74 | var transitionDuration = _transitionDuration;
75 | var zoomableEl;
76 | var init = function () {
77 | addEventListener(RESIZE, handleResize, window);
78 | initMotionPref();
79 | if (isImgEl && !targetEl.complete) {
80 | addEventListener(LOAD, handleLoad, targetEl);
81 | }
82 | else {
83 | handleLoad();
84 | }
85 | };
86 | // START TARGET MUTATION OBSERVER
87 | var bodyObserver;
88 | var oldTargetEl = targetEl.cloneNode(true);
89 | var initMutationObservers = function () {
90 | var opts = {
91 | attributes: true,
92 | characterData: true,
93 | childList: true,
94 | subtree: true,
95 | };
96 | var bodyCb = function () {
97 | if (targetEl) {
98 | if (state === UNLOADED && !oldTargetEl.isEqualNode(targetEl)) {
99 | reset();
100 | oldTargetEl = targetEl.cloneNode(true);
101 | }
102 | }
103 | };
104 | bodyObserver = new MutationObserver(bodyCb);
105 | bodyObserver.observe(documentBody, opts);
106 | };
107 | var cleanupMutationObservers = function () {
108 | bodyObserver === null || bodyObserver === void 0 ? void 0 : bodyObserver.disconnect();
109 | bodyObserver = undefined;
110 | };
111 | // END TARGET MUTATION OBSERVER
112 | // START MOTION PREFS
113 | var initMotionPref = function () {
114 | motionPref = window.matchMedia('(prefers-reduced-motion:reduce)');
115 | motionPref.addListener(handleMotionPref); // NOT addEventListener because compatibility
116 | };
117 | var handleMotionPref = function () {
118 | transitionDuration = 0;
119 | };
120 | var cleanupMotionPref = function () {
121 | motionPref === null || motionPref === void 0 ? void 0 : motionPref.removeListener(handleMotionPref); // NOT removeEventListener because compatibility
122 | motionPref = undefined;
123 | };
124 | // END MOTION PREFS
125 | var handleLoad = function () {
126 | if (!targetEl || state !== UNLOADED)
127 | return;
128 | // create openBtnEl
129 | openBtnEl = createElement(DIV);
130 | setAttribute('aria-hidden', 'true', openBtnEl);
131 | setAttribute('tabindex', '-1', openBtnEl);
132 | setAttribute(STYLE, styleZoomBtnIn, openBtnEl);
133 | setAttribute('data-rmiz-trigger', 'true', openBtnEl)
134 | // setAttribute(TYPE, BUTTON, openBtnEl);
135 | adjustOpenBtnEl();
136 | addEventListener(CLICK, handleOpenBtnClick, openBtnEl);
137 | // insert openBtnEl after targetEl
138 | targetEl.insertAdjacentElement('afterend', openBtnEl);
139 |
140 | initMutationObservers();
141 | };
142 | var reset = function () {
143 | cleanup();
144 | init();
145 | };
146 | var adjustOpenBtnEl = function () {
147 | if (!openBtnEl)
148 | return;
149 | var _a = getBoundingClientRect(targetEl), height = _a.height, width = _a.width;
150 | var style = getComputedStyle(targetEl);
151 | var type = style[DISPLAY];
152 | var marginLeft = parseFloat(style[MARGIN_LEFT_JS]); // eslint-disable-line @typescript-eslint/no-explicit-any
153 | var marginTop = parseFloat(style[MARGIN_TOP_JS]); // eslint-disable-line @typescript-eslint/no-explicit-any
154 | setStyleProperty(WIDTH, width + "px", openBtnEl);
155 | setStyleProperty(HEIGHT, height + "px", openBtnEl);
156 | setStyleProperty(MARGIN_LEFT_JS, marginLeft + "px", openBtnEl);
157 | if (type === BLOCK ||
158 | type === 'flex' ||
159 | type === 'grid' ||
160 | type === 'table') {
161 | setStyleProperty(MARGIN_TOP_JS, "-" + (marginTop + height) + "px", openBtnEl);
162 | }
163 | else {
164 | setStyleProperty(MARGIN_LEFT_JS, marginLeft - width + "px", openBtnEl);
165 | }
166 | };
167 | var update = function (opts) {
168 | if (opts === void 0) { opts = {}; }
169 | if (opts.closeText)
170 | closeText = opts.closeText;
171 | if (opts.modalText)
172 | modalText = opts.modalText;
173 | if (opts.openText)
174 | if (opts.overlayBgColor)
175 | overlayBgColor = opts.overlayBgColor;
176 | if (opts.overlayOpacity)
177 | overlayOpacity = opts.overlayOpacity;
178 | if (opts.transitionDuration)
179 | transitionDuration = opts.transitionDuration;
180 | if (opts.zoomMargin)
181 | zoomMargin = opts.zoomMargin;
182 | if (opts.zoomZindex)
183 | zoomZindex = opts.zoomZindex;
184 | setZoomImgStyle(false);
185 | if (state === UNLOADED && opts.isZoomed) {
186 | zoom();
187 | }
188 | else if (state === LOADED && opts.isZoomed === false) {
189 | unzoom();
190 | }
191 | };
192 | // START CLEANUP
193 | var cleanup = function () {
194 | cleanupZoom();
195 | cleanupMutationObservers();
196 | cleanupTargetLoad();
197 | cleanupDOMMutations();
198 | cleanupMotionPref();
199 | removeEventListener(RESIZE, handleResize, window);
200 | };
201 | var cleanupTargetLoad = function () {
202 | if (isImg && targetEl) {
203 | removeEventListener(LOAD, handleLoad, targetEl);
204 | }
205 | };
206 | var cleanupDOMMutations = function () {
207 | if (openBtnEl) {
208 | removeEventListener(CLICK, handleOpenBtnClick, openBtnEl);
209 | removeChild(openBtnEl, getParentNode(openBtnEl));
210 | }
211 | openBtnEl = undefined;
212 | };
213 | var cleanupZoom = function () {
214 | removeEventListener(SCROLL, handleScroll, scrollableEl);
215 | removeEventListener(KEYDOWN, handleDocumentKeyDown, document);
216 | if (zoomableEl) {
217 | removeEventListener(LOAD, handleZoomImgLoad, zoomableEl);
218 | removeEventListener(TRANSITIONEND, handleUnzoomTransitionEnd, zoomableEl);
219 | removeEventListener(TRANSITIONEND, handleZoomTransitionEnd, zoomableEl);
220 | }
221 | if (closeBtnEl) {
222 | removeEventListener(CLICK, handleCloseBtnClick, closeBtnEl);
223 | }
224 | if (boundaryDivFirst) {
225 | removeEventListener(FOCUS, handleFocusBoundaryDiv, boundaryDivFirst);
226 | }
227 | if (boundaryDivLast) {
228 | removeEventListener(FOCUS, handleFocusBoundaryDiv, boundaryDivLast);
229 | }
230 | if (modalEl) {
231 | removeEventListener(CLICK, handleModalClick, modalEl);
232 | removeChild(modalEl, documentBody);
233 | }
234 | zoomableEl = undefined;
235 | closeBtnEl = undefined;
236 | boundaryDivFirst = undefined;
237 | boundaryDivLast = undefined;
238 | overlayEl = undefined;
239 | modalEl = undefined;
240 | };
241 | // END CLEANUP
242 | var handleOpenBtnClick = function () {
243 | if (onZoomChange) {
244 | onZoomChange(true);
245 | }
246 | if (!isControlled) {
247 | zoom();
248 | }
249 | };
250 | var handleCloseBtnClick = function () {
251 | if (onZoomChange) {
252 | onZoomChange(false);
253 | }
254 | if (!isControlled) {
255 | unzoom();
256 | }
257 | };
258 | var handleFocusBoundaryDiv = function () {
259 | focusPreventScroll(closeBtnEl);
260 | };
261 | var handleResize = function () {
262 | if (state === LOADED) {
263 | setZoomImgStyle(true);
264 | }
265 | else {
266 | reset();
267 | }
268 | };
269 | var handleZoomTransitionEnd = function () {
270 | focusPreventScroll(closeBtnEl);
271 | };
272 | var handleZoomImgLoad = function () {
273 | if (!zoomableEl)
274 | return;
275 | modalEl = createModal();
276 | if (!modalEl)
277 | return;
278 | appendChild(modalEl, documentBody);
279 | addEventListener(KEYDOWN, handleDocumentKeyDown, document);
280 | addEventListener(SCROLL, handleScroll, scrollableEl);
281 | if (targetEl) {
282 | setStyleProperty(VISIBILITY, HIDDEN, targetEl);
283 | }
284 | if (zoomableEl) {
285 | addEventListener(TRANSITIONEND, handleZoomTransitionEnd, zoomableEl);
286 | }
287 | state = LOADED;
288 | setZoomImgStyle(false);
289 | ariaHideOtherContent();
290 | if (overlayEl) {
291 | setAttribute(STYLE, stylePosAbsolute +
292 | styleAllDirsZero +
293 | (BG_COLOR_CSS + ":" + overlayBgColor + ";") +
294 | (TRANSITION + ":" + OPACITY + " " + transitionDuration + "ms " + styleTransitionTimingFn + ";") +
295 | (OPACITY + ":0;"), overlayEl);
296 | setStyleProperty(OPACITY, "" + overlayOpacity, overlayEl);
297 | }
298 | };
299 | var handleUnzoomTransitionEnd = function () {
300 | if (targetEl) {
301 | setStyleProperty(VISIBILITY, '', targetEl);
302 | }
303 | state = UNLOADED;
304 | setZoomImgStyle(true);
305 | cleanupZoom();
306 | focusPreventScroll(openBtnEl);
307 | };
308 | var handleModalClick = function () {
309 | if (onZoomChange) {
310 | onZoomChange(false);
311 | }
312 | if (!isControlled) {
313 | unzoom();
314 | }
315 | };
316 | var handleScroll = function () {
317 | if (state === LOADED) {
318 | if (onZoomChange) {
319 | onZoomChange(false);
320 | }
321 | if (!isControlled) {
322 | unzoom();
323 | }
324 | }
325 | else if (state === UNLOADING) {
326 | setZoomImgStyle(false);
327 | }
328 | };
329 | var handleDocumentKeyDown = function (e) {
330 | if (isEscapeKey(e)) {
331 | e.stopPropagation();
332 | if (onZoomChange) {
333 | onZoomChange(false);
334 | }
335 | if (!isControlled) {
336 | unzoom();
337 | }
338 | }
339 | };
340 | var setZoomImgStyle = function (instant) {
341 | if (!targetEl || !zoomableEl)
342 | return;
343 | var td = instant ? 0 : transitionDuration;
344 | var _a = targetEl.getBoundingClientRect(), height = _a.height, left = _a.left, top = _a.top, width = _a.width;
345 | var originalTransform = getStyleProperty(TRANSFORM, targetEl);
346 | var transform;
347 | if (state !== LOADED) {
348 | transform = 'scale(1) translate(0,0)' + (originalTransform ? " " + originalTransform : '');
349 | }
350 | else {
351 | var scale = getScaleToWindow(width, height, zoomMargin);
352 | if (isImg) {
353 | var _b = targetEl, naturalHeight = _b.naturalHeight, naturalWidth = _b.naturalWidth;
354 | if (naturalHeight && naturalWidth) {
355 | scale = getScaleToWindowMax(width, naturalWidth, height, naturalHeight, zoomMargin);
356 | }
357 | }
358 | // Get the the coords for center of the viewport
359 | var viewportX = getWindowInnerWidth() / 2;
360 | var viewportY = getWindowInnerHeight() / 2;
361 | // Get the coords for center of the parent item
362 | var childCenterX = left + width / 2;
363 | var childCenterY = top + height / 2;
364 | // Get offset amounts for item coords to be centered on screen
365 | var translateX = (viewportX - childCenterX) / scale;
366 | var translateY = (viewportY - childCenterY) / scale;
367 | // Build transform style, including any original transform
368 | transform =
369 | "scale(" + scale + ") translate(" + translateX + "px," + translateY + "px)" +
370 | (originalTransform ? " " + originalTransform : '');
371 | }
372 | setAttribute(STYLE, stylePosAbsolute +
373 | styleDisplayBlock +
374 | styleMaxWidth100pct +
375 | styleMaxHeight100pct +
376 | (WIDTH + ":" + width + "px;") +
377 | (HEIGHT + ":" + height + "px;") +
378 | (LEFT + ":" + left + "px;") +
379 | (TOP + ":" + top + "px;") +
380 | (TRANSITION + ":" + TRANSFORM + " " + td + "ms " + styleTransitionTimingFn + ";") +
381 | ("-webkit-" + TRANSFORM + ":" + transform + ";") +
382 | ("-ms-" + TRANSFORM + ":" + transform + ";") +
383 | (TRANSFORM + ":" + transform + ";"), zoomableEl);
384 | };
385 | var zoom = function () {
386 | if (isImgEl) {
387 | zoomImg();
388 | }
389 | else {
390 | zoomNonImg();
391 | }
392 | blur(openBtnEl);
393 | };
394 | var zoomImg = function () {
395 | if (!targetEl || state !== UNLOADED)
396 | return;
397 | zoomableEl = cloneElement(true, targetEl);
398 | removeAttribute(ID, zoomableEl);
399 | setAttribute(DATA_RMIZ_ZOOMED, '', zoomableEl);
400 | addEventListener(LOAD, handleZoomImgLoad, zoomableEl);
401 | };
402 | var zoomNonImg = function () {
403 | if (!targetEl || state !== UNLOADED)
404 | return;
405 | zoomableEl = createElement(DIV);
406 | setAttribute(DATA_RMIZ_ZOOMED, '', zoomableEl);
407 | setAttribute(STYLE, styleZoomStart, zoomableEl);
408 | var cloneEl = cloneElement(true, targetEl);
409 | removeAttribute(ID, cloneEl);
410 | setStyleProperty(MAX_WIDTH, NONE, cloneEl);
411 | setStyleProperty(MAX_HEIGHT, NONE, cloneEl);
412 | appendChild(cloneEl, zoomableEl);
413 | handleZoomImgLoad();
414 | };
415 | var createModal = function () {
416 | if (!zoomableEl)
417 | return;
418 | var el = createElement(DIV);
419 | setAttribute(ARIA_LABEL, modalText, el);
420 | setAttribute(ARIA_MODAL, TRUE_STR, el);
421 | setAttribute(DATA_RMIZ_OVERLAY, '', el);
422 | setAttribute(ROLE, DIALOG, el);
423 | setAttribute(STYLE, POSITION + ":fixed;" +
424 | styleAllDirsZero +
425 | styleWidth100pct +
426 | styleHeight100pct +
427 | (Z_INDEX_CSS + ":" + zoomZindex + ";"), el);
428 | addEventListener(CLICK, handleModalClick, el);
429 | overlayEl = createElement(DIV);
430 | boundaryDivFirst = createElement(DIV);
431 | setAttribute(TABINDEX, ZERO, boundaryDivFirst);
432 | addEventListener(FOCUS, handleFocusBoundaryDiv, boundaryDivFirst);
433 | boundaryDivLast = createElement(DIV);
434 | setAttribute(TABINDEX, ZERO, boundaryDivLast);
435 | addEventListener(FOCUS, handleFocusBoundaryDiv, boundaryDivLast);
436 | closeBtnEl = createElement(BUTTON);
437 | setAttribute(ARIA_LABEL, closeText, closeBtnEl);
438 | setAttribute(STYLE, styleZoomBtnOut, closeBtnEl);
439 | setAttribute(TYPE, BUTTON, el);
440 | addEventListener(CLICK, handleCloseBtnClick, closeBtnEl);
441 | appendChild(overlayEl, el);
442 | appendChild(boundaryDivFirst, el);
443 | appendChild(closeBtnEl, el);
444 | appendChild(zoomableEl, el);
445 | appendChild(boundaryDivLast, el);
446 | return el;
447 | };
448 | var ariaHideOtherContent = function () {
449 | if (modalEl) {
450 | forEachSibling(function (el) {
451 | if (isIgnoredElement(el))
452 | return;
453 | var ariaHiddenValue = getAttribute(ARIA_HIDDEN, el);
454 | if (ariaHiddenValue) {
455 | ariaHiddenSiblings.push([el, ariaHiddenValue]);
456 | }
457 | el.setAttribute(ARIA_HIDDEN, TRUE_STR);
458 | }, modalEl);
459 | }
460 | };
461 | var ariaResetOtherContent = function () {
462 | if (modalEl) {
463 | forEachSibling(function (el) {
464 | if (isIgnoredElement(el))
465 | return;
466 | removeAttribute(ARIA_HIDDEN, el);
467 | }, modalEl);
468 | }
469 | ariaHiddenSiblings.forEach(function (_a) {
470 | var el = _a[0], ariaHiddenValue = _a[1];
471 | if (el) {
472 | setAttribute(ARIA_HIDDEN, ariaHiddenValue, el);
473 | }
474 | });
475 | ariaHiddenSiblings = [];
476 | };
477 | var unzoom = function () {
478 | if (state === LOADED) {
479 | blur(closeBtnEl);
480 | ariaResetOtherContent();
481 | if (zoomableEl) {
482 | addEventListener(TRANSITIONEND, handleUnzoomTransitionEnd, zoomableEl);
483 | }
484 | state = UNLOADING;
485 | setZoomImgStyle(false);
486 | if (overlayEl) {
487 | setStyleProperty(OPACITY, ZERO, overlayEl);
488 | }
489 | }
490 | else {
491 | setZoomImgStyle(false);
492 | }
493 | };
494 | init();
495 | return { cleanup: cleanup, update: update };
496 | };
497 | //
498 | // STYLING
499 | //
500 | var styleAllDirsZero = TOP + ":0;right:0;bottom:0;" + LEFT + ":0;";
501 | var styleAppearanceNone = "-webkit-appearance:" + NONE + ";-moz-appearance:" + NONE + ";appearance:" + NONE + ";";
502 | var styleCursorPointer = CURSOR + ":pointer;";
503 | var styleCursorZoomIn = styleCursorPointer + (CURSOR + ":-webkit-zoom-in;cursor:zoom-in;");
504 | var styleCursorZoomOut = styleCursorPointer + (CURSOR + ":-webkit-zoom-out;cursor:zoom-out;");
505 | var styleDisplayBlock = DISPLAY + ":" + BLOCK + ";";
506 | var styleFastTap = 'touch-action:manipulation;';
507 | var styleHeight100pct = HEIGHT + ":" + HUNDRED_PCT + ";";
508 | var styleMaxHeight100pct = "max-height:" + HUNDRED_PCT + ";";
509 | var styleMaxWidth100pct = "max-width:" + HUNDRED_PCT + ";";
510 | var stylePosAbsolute = POSITION + ":" + ABSOLUTE + ";";
511 | var styleTransitionTimingFn = 'ease';
512 | var styleVisibilityHidden = VISIBILITY + ":" + HIDDEN + ";";
513 | var styleWidth100pct = WIDTH + ":" + HUNDRED_PCT + ";";
514 | var styleZoomBtnBase = stylePosAbsolute +
515 | styleFastTap +
516 | styleAppearanceNone +
517 | ("background:" + NONE + ";") +
518 | ("border:" + NONE + ";") +
519 | (MARGIN + ":0;") +
520 | 'padding:0;';
521 | var styleZoomBtnIn = styleZoomBtnBase + styleCursorZoomIn;
522 | var styleZoomBtnOut = styleZoomBtnBase +
523 | styleAllDirsZero +
524 | styleHeight100pct +
525 | styleWidth100pct +
526 | styleCursorZoomOut +
527 | (Z_INDEX_CSS + ":1;");
528 | var styleZoomStart = stylePosAbsolute + styleVisibilityHidden;
529 | //
530 | // HELPERS
531 | //
532 | var SVG_REGEX = /\.svg$/i;
533 | var isEscapeKey = function (e) { return e.key === 'Escape' || e.keyCode === 27; };
534 | var isIgnoredElement = function (_a) {
535 | var tagName = _a.tagName;
536 | return tagName === 'SCRIPT' || tagName === 'NOSCRIPT' || tagName === 'STYLE';
537 | };
538 |
539 | export default ImageZoom;
540 |
--------------------------------------------------------------------------------
/src/vendors/use-image-zoom.d.ts:
--------------------------------------------------------------------------------
1 | import { Ref } from 'react';
2 | import { ImageZoomOpts } from './image-zoom';
3 | interface UseImageZoom extends ImageZoomOpts {
4 | (opts?: ImageZoomOpts): {
5 | ref: Ref
;
6 | };
7 | }
8 | declare const useImageZoom: UseImageZoom;
9 | export default useImageZoom;
10 |
--------------------------------------------------------------------------------
/src/vendors/use-image-zoom.js:
--------------------------------------------------------------------------------
1 | import { useRef, useEffect } from 'react';
2 | import ImageZoom from './image-zoom';
3 |
4 | var useImageZoom = function (opts) {
5 | var ref = useRef(null);
6 | var savedOpts = useRef(opts);
7 | var imgZoom = useRef();
8 | useEffect(function () {
9 | var _a;
10 | savedOpts.current = opts;
11 | (_a = imgZoom.current) === null || _a === void 0 ? void 0 : _a.update(savedOpts.current);
12 | }, [opts]);
13 | useEffect(function () {
14 | var el = ref.current;
15 | if (!el)
16 | return;
17 | imgZoom.current = ImageZoom(savedOpts.current, el);
18 | return function () {
19 | var _a;
20 | (_a = imgZoom.current) === null || _a === void 0 ? void 0 : _a.cleanup();
21 | };
22 | }, []);
23 | return { ref: ref };
24 | };
25 |
26 | export default useImageZoom
27 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": [
5 | "dom",
6 | "dom.iterable",
7 | "esnext"
8 | ],
9 | "allowJs": true,
10 | "skipLibCheck": true,
11 | "esModuleInterop": true,
12 | "allowSyntheticDefaultImports": true,
13 | "strict": true,
14 | "forceConsistentCasingInFileNames": true,
15 | "noFallthroughCasesInSwitch": true,
16 | "module": "esnext",
17 | "moduleResolution": "node",
18 | "resolveJsonModule": true,
19 | "isolatedModules": true,
20 | "noEmit": true,
21 | "jsx": "react-jsx"
22 | },
23 | "include": [
24 | "src"
25 | ]
26 | }
27 |
--------------------------------------------------------------------------------
133 | 
136 | 
139 | 
173 |