@get-set/gs-zoom 0.0.2 → 0.0.3

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.
Files changed (12) hide show
  1. package/dist/actions/initActionEvents.js +55 -21
  2. package/dist/actions/initAdditionals.js +0 -1
  3. package/dist/actions/initChange.js +93 -29
  4. package/dist/actions/initDraw.js +17 -6
  5. package/dist/actions/initDrawItem.js +68 -72
  6. package/dist/actions/initLightBox.js +5 -26
  7. package/dist/actions/initMagnifier.js +6 -6
  8. package/dist/actions/initOpen.js +28 -0
  9. package/dist/actions/initWheel.js +6 -8
  10. package/dist/components/GSZoom.js +82 -20
  11. package/dist/constants/defaultParams.js +0 -1
  12. package/package.json +1 -1
package/dist/actions/initActionEvents.js CHANGED
@@ -1,7 +1,10 @@
1
- import icons from '../constants/icons';
2
- import { initAutoplay, stopAutoplay } from './initAutoplay';
3
- import { exitFullScreen } from './initFullScreen';
4
- import setStyles from './setStyles';
1
+ import icons from "../constants/icons";
2
+ import { getTranslateCoord } from "./general";
3
+ import getAdjustTransform from "./getAdjustTransform";
4
+ import getTranslateCoordToPoint from "./getTranslateCoordToPoint";
5
+ import { initAutoplay, stopAutoplay } from "./initAutoplay";
6
+ import { exitFullScreen } from "./initFullScreen";
7
+ import setStyles from "./setStyles";
5
8
 
6
9
  const initActionEvents = (ref) => {
7
10
  const params = ref.currentParams;
@@ -13,24 +16,24 @@ const initActionEvents = (ref) => {
13
16
  const $btnZoomOut = ref.$btnZoomOut;
14
17
 
15
18
  if ($btnAdditionals != null) {
16
- $btnAdditionals.addEventListener('click', () => {
19
+ $btnAdditionals.addEventListener("click", () => {
17
20
  if (
18
21
  $container
19
- .querySelector('.gs-zoom-additionals')
20
- .classList.contains('gs-zoom-hidden')
22
+ .querySelector(".gs-zoom-additionals")
23
+ .classList.contains("gs-zoom-hidden")
21
24
  ) {
22
25
  $container
23
- .querySelector('.gs-zoom-additionals')
24
- .classList.remove('gs-zoom-hidden');
26
+ .querySelector(".gs-zoom-additionals")
27
+ .classList.remove("gs-zoom-hidden");
25
28
  } else {
26
29
  $container
27
- .querySelector('.gs-zoom-additionals')
28
- .classList.add('gs-zoom-hidden');
30
+ .querySelector(".gs-zoom-additionals")
31
+ .classList.add("gs-zoom-hidden");
29
32
  }
30
33
  });
31
34
  }
32
35
  if ($btnAutoplay != null) {
33
- $btnAutoplay.addEventListener('click', () => {
36
+ $btnAutoplay.addEventListener("click", () => {
34
37
  if (ref.autoplay == undefined) {
35
38
  initAutoplay(ref);
36
39
  $btnAutoplay.innerHTML = icons.autoplayPause;
@@ -40,12 +43,12 @@ const initActionEvents = (ref) => {
40
43
  });
41
44
  }
42
45
  if ($btnClose != null) {
43
- $btnClose.addEventListener('click', () => {
46
+ $btnClose.addEventListener("click", () => {
44
47
  exitFullScreen();
45
48
  });
46
49
  }
47
50
  if ($btnZoomIn != null) {
48
- $btnZoomIn.addEventListener('click', () => {
51
+ $btnZoomIn.addEventListener("click", () => {
49
52
  const $img = ref.$img;
50
53
  const scale =
51
54
  $img.dataset.scale != undefined ? parseFloat($img.dataset.scale) : 1;
@@ -54,20 +57,36 @@ const initActionEvents = (ref) => {
54
57
  clearTimeout(window.timeout);
55
58
  const newScale = Math.min(scale + 0.4, params.maxZoom);
56
59
  $img.dataset.scale = newScale;
60
+ let [newTranslatex, newTranslatey] = getTranslateCoordToPoint(
61
+ $img,
62
+ $container,
63
+ scale,
64
+ newScale,
65
+ $container.clientWidth / 2,
66
+ $container.clientHeight / 2
67
+ );
68
+ [newTranslatex, newTranslatey] = getAdjustTransform(
69
+ newScale,
70
+ newTranslatex,
71
+ newTranslatey,
72
+ $img,
73
+ $container
74
+ );
75
+
57
76
  setStyles(ref, $img, {
58
- transition: '.3s ease-in-out',
59
- transform: `scale(${newScale})`,
77
+ transition: ".3s ease-in-out",
78
+ transform: `scale(${newScale}) translate(${newTranslatex}px, ${newTranslatey}px)`,
60
79
  });
61
80
  window.timeout = setTimeout(function () {
62
81
  setStyles(ref, $img, {
63
- transition: 'unset',
82
+ transition: "unset",
64
83
  });
65
84
  }, 300);
66
85
  }
67
86
  });
68
87
  }
69
88
  if ($btnZoomOut != null) {
70
- $btnZoomOut.addEventListener('click', () => {
89
+ $btnZoomOut.addEventListener("click", () => {
71
90
  const $img = ref.$img;
72
91
  const scale =
73
92
  $img.dataset.scale != undefined ? parseFloat($img.dataset.scale) : 1;
@@ -76,13 +95,28 @@ const initActionEvents = (ref) => {
76
95
  clearTimeout(window.timeout);
77
96
  const newScale = Math.max(1, scale - 0.4);
78
97
  $img.dataset.scale = newScale;
98
+ let [newTranslatex, newTranslatey] = getTranslateCoordToPoint(
99
+ $img,
100
+ $container,
101
+ scale,
102
+ newScale,
103
+ $container.clientWidth / 2,
104
+ $container.clientHeight / 2
105
+ );
106
+ [newTranslatex, newTranslatey] = getAdjustTransform(
107
+ newScale,
108
+ newTranslatex,
109
+ newTranslatey,
110
+ $img,
111
+ $container
112
+ );
79
113
  setStyles(ref, $img, {
80
- transition: '.3s ease-in-out',
81
- transform: `scale(${newScale})`,
114
+ transition: ".3s ease-in-out",
115
+ transform: `scale(${newScale}) translate(${newTranslatex}px, ${newTranslatey}px)`,
82
116
  });
83
117
  window.timeout = setTimeout(function () {
84
118
  setStyles(ref, $img, {
85
- transition: 'unset',
119
+ transition: "unset",
86
120
  });
87
121
  }, 300);
88
122
  }
package/dist/actions/initAdditionals.js CHANGED
@@ -34,7 +34,6 @@ const initAdditionals = (ref) => {
34
34
  $item.append($itemImg);
35
35
  $addList.append($item);
36
36
  $item.addEventListener("click", () => {
37
- ref.currentIndex = index;
38
37
  initChange(ref, index);
39
38
  });
40
39
  });
package/dist/actions/initChange.js CHANGED
@@ -1,12 +1,11 @@
1
- import initAdjustAdditionalActive from "./initAdjustAdditionalActive";
2
- import { initAutoplay, stopAutoplay } from "./initAutoplay";
3
- import initDraggle from "./initDraggle";
4
- import initDrawItem from "./initDrawItem";
5
- import initWheel from "./initWheel";
6
- import setStyles from "./setStyles";
1
+ import initAdjustAdditionalActive from './initAdjustAdditionalActive';
2
+ import { initAutoplay, stopAutoplay } from './initAutoplay';
3
+ import initDraggle from './initDraggle';
4
+ import initDrawItem from './initDrawItem';
5
+ import setStyles from './setStyles';
7
6
 
8
7
  const initChange = (ref, index, isAutoplay = false) => {
9
- if (!ref.inProcess) {
8
+ if (ref.inProcess === undefined || !ref.inProcess) {
10
9
  ref.inProcess = true;
11
10
  const params = ref.currentParams;
12
11
  const $img = ref.$img;
@@ -16,51 +15,116 @@ const initChange = (ref, index, isAutoplay = false) => {
16
15
  $img.dataset.translatex = 0;
17
16
  $img.dataset.translatey = 0;
18
17
 
19
- $container.classList.remove("gs-zoom-is-zoomed");
20
- $imgList.style.transition = ".3s ease-in-out";
21
- $imgList.style.transform = `translateX(-${
22
- $container.clientWidth * index
23
- }px)`;
18
+ $container.classList.remove('gs-zoom-is-zoomed');
19
+ $imgList.style.transition = '.3s ease-in-out';
24
20
 
25
21
  if (params.showAdditionals && ref.list.length > 1) {
26
22
  const $active = $container.querySelector(
27
- ".gs-zoom-additionals .gs-add-list .gs-add-item.active"
23
+ '.gs-zoom-additionals .gs-add-list .gs-add-item.active',
28
24
  );
29
25
  if ($active != null) {
30
- $active.classList.remove("active");
26
+ $active.classList.remove('active');
31
27
  }
32
28
  $container
33
29
  .querySelector(
34
- `.gs-zoom-additionals .gs-add-list .gs-add-item[data-index='${index}']`
30
+ `.gs-zoom-additionals .gs-add-list .gs-add-item[data-index='${index}']`,
35
31
  )
36
- .classList.add("active");
32
+ .classList.add('active');
37
33
  }
38
34
  initAdjustAdditionalActive(ref);
35
+
36
+ if (ref.currentIndex == index) {
37
+ let drawed = $imgList.querySelectorAll('.gs-zoom-main-img').length;
38
+ if (drawed == 1) {
39
+ $imgList.style.transform = 'translate(0%)';
40
+ } else if (drawed == 2) {
41
+ if (ref.currentIndex == 0) {
42
+ $imgList.style.transform = 'translate(0%)';
43
+ } else {
44
+ $imgList.style.transform = 'translate(-50%)';
45
+ }
46
+ } else {
47
+ $imgList.style.transform = 'translate(-33.3333%)';
48
+ }
49
+ } else {
50
+ if (index > ref.currentIndex) {
51
+ if ($imgList.querySelectorAll('.gs-zoom-main-img').length === 3) {
52
+ $imgList.style.transform = 'translate(-66.6666%)';
53
+ } else {
54
+ $imgList.style.transform = 'translate(-50%)';
55
+ }
56
+ } else {
57
+ $imgList.style.transform = 'translate(0%)';
58
+ }
59
+ }
60
+ if (ref.currentIndex != index && Math.abs(index - ref.currentIndex) != 1) {
61
+ const $el = $imgList.querySelector(
62
+ `.gs-zoom-main-img[data-index='${
63
+ ref.currentIndex + (index > ref.currentIndex ? 1 : -1)
64
+ }']`,
65
+ );
66
+ if ($el != null) {
67
+ $el.dataset.index = index;
68
+ initDrawItem(ref, index);
69
+ }
70
+ }
39
71
  setTimeout(() => {
40
72
  ref.isZoomed = false;
41
- $imgList.style.transition = "unset";
73
+ $imgList.style.transition = 'unset';
42
74
  setStyles(ref, $img, {
43
- transform: "scale(1) translate(0, 0)",
75
+ transform: 'scale(1) translate(0, 0)',
44
76
  });
45
- ref.$mainImg = [...$imgList.querySelectorAll(".gs-zoom-main-img")][index];
46
- ref.$imgTouch = ref.$mainImg.querySelector(".gs-zoom-img-touch");
47
- ref.$img = ref.$mainImg.querySelector(".gs-zoom-img");
48
- ref.currentIndex = index;
49
- [...$imgList.querySelectorAll(".gs-zoom-main-img")].map((item, i) => {
50
- if (i <= index + 1 && i >= index - 1) {
51
- initDrawItem(ref, i);
77
+ ref.$mainImg = $imgList.querySelector(
78
+ `.gs-zoom-main-img[data-index='${index}']`,
79
+ );
80
+ ref.$imgTouch = ref.$mainImg.querySelector('.gs-zoom-img-touch');
81
+ ref.$img = ref.$mainImg.querySelector('.gs-zoom-img');
82
+ if (ref.list.length > 2 && ref.currentIndex !== index) {
83
+ [
84
+ ...$imgList.querySelectorAll(
85
+ `.gs-zoom-main-img:not([data-index='${index}'])`,
86
+ ),
87
+ ].map(el => {
88
+ el.remove();
89
+ });
90
+ ref.currentIndex = index;
91
+ if (index < ref.list.length - 1) {
92
+ const $mainImg = document.createElement('div');
93
+ $mainImg.classList.add('gs-zoom-main-img');
94
+ $mainImg.dataset.index = index + 1;
95
+ $imgList.append($mainImg);
96
+ initDrawItem(ref, index + 1);
97
+ }
98
+ if (index > 0) {
99
+ const $mainImg = document.createElement('div');
100
+ $mainImg.classList.add('gs-zoom-main-img');
101
+ $mainImg.dataset.index = index - 1;
102
+ $imgList.prepend($mainImg);
103
+ initDrawItem(ref, index - 1);
104
+ }
105
+ } else {
106
+ ref.currentIndex = index;
107
+ }
108
+ let drawed = $imgList.querySelectorAll('.gs-zoom-main-img').length;
109
+ if (drawed == 1) {
110
+ $imgList.style.transform = 'translate(0%)';
111
+ } else if (drawed == 2) {
112
+ if (ref.currentIndex == 0) {
113
+ $imgList.style.transform = 'translate(0%)';
52
114
  } else {
53
- item.innerHTML = "";
115
+ $imgList.style.transform = 'translate(-50%)';
54
116
  }
55
- });
117
+ } else {
118
+ $imgList.style.transform = 'translate(-33.3333%)';
119
+ }
56
120
  ref.inProcess = false;
57
- if (typeof params.afterChange === "function") {
121
+ if (typeof params.afterChange === 'function') {
58
122
  params.afterChange();
59
123
  }
60
124
 
61
125
  initDraggle(ref, index);
62
126
  }, 300);
63
- $imgList.classList.remove("gs-zoom-listisdragging");
127
+ $imgList.classList.remove('gs-zoom-listisdragging');
64
128
 
65
129
  if (isAutoplay) {
66
130
  initAutoplay(ref);
package/dist/actions/initDraw.js CHANGED
@@ -17,17 +17,28 @@ const initDraw = (ref) => {
17
17
  ref.$container = $container;
18
18
  ref.$imgList = $imgList;
19
19
 
20
- //$imgList.style.width = `${2 * window.innerWidth}px`;
21
-
20
+ let drawed = 0;
22
21
  list.map((_, index) => {
23
- const $mainImg = document.createElement("div");
24
- $mainImg.classList.add("gs-zoom-main-img");
25
- $mainImg.dataset.index = index;
26
- $imgList.append($mainImg);
27
22
  if (index <= ref.currentIndex + 1 && index >= ref.currentIndex - 1) {
23
+ drawed++;
24
+ const $mainImg = document.createElement("div");
25
+ $mainImg.classList.add("gs-zoom-main-img");
26
+ $mainImg.dataset.index = index;
27
+ $imgList.append($mainImg);
28
28
  initDrawItem(ref, index);
29
29
  }
30
30
  });
31
+ if (drawed == 1) {
32
+ $imgList.style.transform = "translate(0%)";
33
+ } else if (drawed == 2) {
34
+ if (ref.currentIndex == 0) {
35
+ $imgList.style.transform = "translate(0%)";
36
+ } else {
37
+ $imgList.style.transform = "translate(-50%)";
38
+ }
39
+ } else {
40
+ $imgList.style.transform = "translate(-33.3333%)";
41
+ }
31
42
 
32
43
  //#region Actions
33
44
  const $actions = document.createElement("div");
package/dist/actions/initDrawItem.js CHANGED
@@ -1,83 +1,79 @@
1
- import initDraggle from "./initDraggle";
2
- import initWheel from "./initWheel";
1
+ import initDraggle from './initDraggle';
2
+ import initWheel from './initWheel';
3
3
 
4
4
  const initDrawItem = (ref, index) => {
5
5
  const params = ref.currentParams;
6
6
  const $imgList = ref.$imgList;
7
7
  const $mainImg = $imgList.querySelector(
8
- `.gs-zoom-main-img[data-index='${index}']`
8
+ `.gs-zoom-main-img[data-index='${index}']`,
9
9
  );
10
- if ($mainImg.querySelector("img") === null) {
11
- const $imgTouch = document.createElement("div");
12
- const $imgloading = document.createElement("div");
13
- const $img = document.createElement("img");
14
- const item = [...ref.list][index];
15
- $imgloading.classList.add("gz-zoom-loading-container");
16
- $img.src = item.src.split("?")[0] + params.mainImageQueryParameters;
17
- $img.classList.add("gs-zoom-img");
18
- $img.dataset.scale = 1;
19
- $img.dataset.translatex = 0;
20
- $img.dataset.translatey = 0;
21
- $imgTouch.classList.add("gs-zoom-img-touch");
22
- $img.onload = () => {
23
- $mainImg.classList.remove("gz-zoom-is-loading");
24
- };
25
- $mainImg.classList.add("gz-zoom-is-loading");
26
- $mainImg.append($img);
27
- $imgloading.innerHTML = params.imgLoading;
28
- $mainImg.append($imgloading);
29
- $mainImg.append($imgTouch);
30
- $imgList.style.transform = `translateX(-${
31
- ref.currentIndex * window.innerWidth
32
- }px)`;
33
- if (
34
- (item.dataset.gstitle != undefined &&
35
- item.dataset.gstitle.trim().length > 0) ||
36
- (item.dataset.gssubtitle != undefined &&
37
- item.dataset.gssubtitle.trim().length > 0) ||
38
- (item.dataset.gsdescription != undefined &&
39
- item.dataset.gsdescription.trim().length > 0)
40
- ) {
41
- const $txtarea = document.createElement("div");
42
- $txtarea.classList.add("gs-zoom-hide-inzoomed");
43
- $txtarea.classList.add("gs-zoom-info-data");
44
- if (
45
- item.dataset.gstitle != undefined &&
46
- item.dataset.gstitle.trim().length > 0
47
- ) {
48
- const $title = document.createElement("div");
49
- $title.classList.add("gs-zoom-info-title");
50
- $title.innerHTML = item.dataset.gstitle;
51
- $txtarea.append($title);
52
- }
53
- if (
54
- item.dataset.gssubtitle != undefined &&
55
- item.dataset.gssubtitle.trim().length > 0
56
- ) {
57
- const $subtitle = document.createElement("div");
58
- $subtitle.classList.add("gs-zoom-info-subtitle");
59
- $subtitle.innerHTML = item.dataset.gssubtitle;
60
- $txtarea.append($subtitle);
61
- }
62
- if (
63
- item.dataset.gsdescription != undefined &&
64
- item.dataset.gsdescription.trim().length > 0
65
- ) {
66
- const $description = document.createElement("div");
67
- $description.classList.add("gs-zoom-info-description");
68
- $description.innerHTML = item.dataset.gsdescription;
69
- $txtarea.append($description);
70
- }
71
- $mainImg.append($txtarea);
72
- }
10
+ $mainImg.innerHTML = '';
11
+ const $imgTouch = document.createElement('div');
12
+ const $imgloading = document.createElement('div');
13
+ const $img = document.createElement('img');
14
+ const item = [...ref.list][index];
15
+ $imgloading.classList.add('gz-zoom-loading-container');
16
+ $img.src = item.src.split('?')[0] + params.mainImageQueryParameters;
17
+ $img.classList.add('gs-zoom-img');
18
+ $img.dataset.scale = 1;
19
+ $img.dataset.translatex = 0;
20
+ $img.dataset.translatey = 0;
21
+ $imgTouch.classList.add('gs-zoom-img-touch');
22
+ $img.onload = () => {
23
+ $mainImg.classList.remove('gz-zoom-is-loading');
24
+ };
25
+ $mainImg.classList.add('gz-zoom-is-loading');
26
+ $mainImg.append($img);
27
+ $imgloading.innerHTML = params.imgLoading;
28
+ $mainImg.append($imgloading);
29
+ $mainImg.append($imgTouch);
30
+ // if (
31
+ // (item.dataset.gstitle != undefined &&
32
+ // item.dataset.gstitle.trim().length > 0) ||
33
+ // (item.dataset.gssubtitle != undefined &&
34
+ // item.dataset.gssubtitle.trim().length > 0) ||
35
+ // (item.dataset.gsdescription != undefined &&
36
+ // item.dataset.gsdescription.trim().length > 0)
37
+ // ) {
38
+ // const $txtarea = document.createElement("div");
39
+ // $txtarea.classList.add("gs-zoom-hide-inzoomed");
40
+ // $txtarea.classList.add("gs-zoom-info-data");
41
+ // if (
42
+ // item.dataset.gstitle != undefined &&
43
+ // item.dataset.gstitle.trim().length > 0
44
+ // ) {
45
+ // const $title = document.createElement("div");
46
+ // $title.classList.add("gs-zoom-info-title");
47
+ // $title.innerHTML = item.dataset.gstitle;
48
+ // $txtarea.append($title);
49
+ // }
50
+ // if (
51
+ // item.dataset.gssubtitle != undefined &&
52
+ // item.dataset.gssubtitle.trim().length > 0
53
+ // ) {
54
+ // const $subtitle = document.createElement("div");
55
+ // $subtitle.classList.add("gs-zoom-info-subtitle");
56
+ // $subtitle.innerHTML = item.dataset.gssubtitle;
57
+ // $txtarea.append($subtitle);
58
+ // }
59
+ // if (
60
+ // item.dataset.gsdescription != undefined &&
61
+ // item.dataset.gsdescription.trim().length > 0
62
+ // ) {
63
+ // const $description = document.createElement("div");
64
+ // $description.classList.add("gs-zoom-info-description");
65
+ // $description.innerHTML = item.dataset.gsdescription;
66
+ // $txtarea.append($description);
67
+ // }
68
+ // $mainImg.append($txtarea);
69
+ // }
73
70
 
74
- if (index == ref.currentIndex) {
75
- ref.$mainImg = $mainImg;
76
- ref.$imgTouch = $imgTouch;
77
- ref.$img = $img;
78
- }
79
- initWheel(ref, index);
71
+ if (index == ref.currentIndex) {
72
+ ref.$mainImg = $mainImg;
73
+ ref.$imgTouch = $imgTouch;
74
+ ref.$img = $img;
80
75
  }
76
+ initWheel(ref, index);
81
77
  };
82
78
 
83
79
  export default initDrawItem;
package/dist/actions/initLightBox.js CHANGED
@@ -1,31 +1,10 @@
1
- import initActionEvents from "./initActionEvents";
2
- import initAdditionals from "./initAdditionals";
3
- import initArrows from "./initArrows";
4
- import initDraggle from "./initDraggle";
5
- import initDraw from "./initDraw";
6
- import { initFullScreen } from "./initFullScreen";
7
- import initNavigateWithKeys from "./initNavigateWithKeys";
1
+ import initOpen from './initOpen';
8
2
 
9
- const initLightBox = (ref) => {
3
+ const initLightBox = ref => {
10
4
  [...ref.list].map((item, index) => {
11
- item.dataset.index = index;
12
- item.addEventListener("click", function () {
13
- window.GSZoomConfigue.openedZoom = ref.currentParams.reference;
14
- if (typeof ref.currentParams.beforeLightBoxOpen === "function") {
15
- ref.currentParams.beforeLightBoxOpen();
16
- }
17
- ref.currentIndex = index;
18
- document.querySelector("html").classList.add("gs-zoom-opened");
19
- initDraw(ref);
20
- initAdditionals(ref);
21
- initFullScreen(ref);
22
- initNavigateWithKeys(ref);
23
- initArrows(ref);
24
- initActionEvents(ref);
25
- if (typeof ref.currentParams.afterLightBoxOpen === "function") {
26
- ref.currentParams.afterLightBoxOpen();
27
- }
28
- initDraggle(ref, index);
5
+ //item.dataset.index = index;
6
+ item.addEventListener('click', function () {
7
+ initOpen(ref, index);
29
8
  });
30
9
  });
31
10
  };
package/dist/actions/initMagnifier.js CHANGED
@@ -1,8 +1,8 @@
1
- const initMagnifier = (ref) => {
2
- [...ref.list].map((item, index) => {
1
+ const initMagnifier = (ref, images) => {
2
+ const params = ref.currentParams.magnifier;
3
+ images.map(item => {
3
4
  item.classList.add('gs-zoom-magnifier-instance');
4
- const params = ref.currentParams.magnifier;
5
- item.onmouseenter = (e) => {
5
+ item.onmouseenter = e => {
6
6
  const clientX = e.clientX;
7
7
  const clientY = e.clientY;
8
8
  const $magnifier = document.createElement('div');
@@ -27,7 +27,7 @@ const initMagnifier = (ref) => {
27
27
  ref.$img = $img;
28
28
  document.querySelector('body').append($magnifier);
29
29
  };
30
- item.onmousemove = (e) => {
30
+ item.onmousemove = e => {
31
31
  const $img = ref.$img;
32
32
  const imgRect = item.getBoundingClientRect();
33
33
  const clientX = e.clientX;
@@ -43,7 +43,7 @@ const initMagnifier = (ref) => {
43
43
  $img.style.left = `${params.size / 2 - distanceFromLeft * params.zoom}px`;
44
44
  $img.style.transform = `scale(${params.zoom})`;
45
45
  };
46
- item.onmouseleave = (e) => {
46
+ item.onmouseleave = () => {
47
47
  if (ref.$magnifier != null) {
48
48
  ref.$magnifier.remove();
49
49
  }
package/dist/actions/initOpen.js ADDED
@@ -0,0 +1,28 @@
1
+ import initActionEvents from "./initActionEvents";
2
+ import initAdditionals from "./initAdditionals";
3
+ import initArrows from "./initArrows";
4
+ import initDraggle from "./initDraggle";
5
+ import initDraw from "./initDraw";
6
+ import { initFullScreen } from "./initFullScreen";
7
+ import initNavigateWithKeys from "./initNavigateWithKeys";
8
+
9
+ const initOpen = (ref, index) => {
10
+ window.GSZoomConfigue.openedZoom = ref.currentParams.reference;
11
+ if (typeof ref.currentParams.beforeLightBoxOpen === "function") {
12
+ ref.currentParams.beforeLightBoxOpen();
13
+ }
14
+ ref.currentIndex = index;
15
+ document.querySelector("html").classList.add("gs-zoom-opened");
16
+ initDraw(ref);
17
+ initAdditionals(ref);
18
+ initFullScreen(ref);
19
+ initNavigateWithKeys(ref);
20
+ initArrows(ref);
21
+ initActionEvents(ref);
22
+ if (typeof ref.currentParams.afterLightBoxOpen === "function") {
23
+ ref.currentParams.afterLightBoxOpen();
24
+ }
25
+ initDraggle(ref, index);
26
+ };
27
+
28
+ export default initOpen;
package/dist/actions/initWheel.js CHANGED
@@ -5,16 +5,15 @@ import setStyles from './setStyles';
5
5
  const initWheel = (ref, index) => {
6
6
  const params = ref.currentParams;
7
7
  const $container = ref.$container;
8
- //[...ref.$imgList.querySelectorAll(".gs-zoom-main-img")].map((item) => {
9
8
  const item = ref.$imgList.querySelector(
10
- `.gs-zoom-main-img[data-index='${index}']`
9
+ `.gs-zoom-main-img[data-index='${index}']`,
11
10
  );
12
11
  if (item != null) {
13
12
  const $mainImg = item;
14
- const $img = $mainImg.querySelector('.gs-zoom-img');
15
13
 
16
14
  if (params.zoomOnWheel) {
17
- $mainImg.addEventListener('wheel', (e) => {
15
+ $mainImg.addEventListener('wheel', function (e) {
16
+ const $img = this.querySelector('.gs-zoom-img');
18
17
  const scale =
19
18
  $img.dataset.scale != undefined ? parseFloat($img.dataset.scale) : 1;
20
19
 
@@ -22,8 +21,8 @@ const initWheel = (ref, index) => {
22
21
  e.deltaY < 0 && scale < params.maxZoom
23
22
  ? Math.min(scale + 0.1, params.maxZoom)
24
23
  : e.deltaY > 0 && scale > 1
25
- ? Math.max(1, scale - 0.1)
26
- : scale;
24
+ ? Math.max(1, scale - 0.1)
25
+ : scale;
27
26
 
28
27
  const [newTranslatex, newTranslatey] = getTranslateCoordToPoint(
29
28
  $img,
@@ -31,7 +30,7 @@ const initWheel = (ref, index) => {
31
30
  scale,
32
31
  newScale,
33
32
  e.pageX,
34
- e.pageY
33
+ e.pageY,
35
34
  );
36
35
 
37
36
  $img.dataset.scale = newScale;
@@ -45,7 +44,6 @@ const initWheel = (ref, index) => {
45
44
  });
46
45
  }
47
46
  }
48
- //});
49
47
  };
50
48
 
51
49
  export default initWheel;
package/dist/components/GSZoom.js CHANGED
@@ -1,7 +1,9 @@
1
- import { useEffect, useState } from 'react';
1
+ import { useEffect, useRef, useState } from 'react';
2
2
  import NewGuid from '../helpers/uihelpers';
3
3
  import getCurrentParams from '../actions/getCurrentParams';
4
- import init from '../actions/init';
4
+ import initOpen from '../actions/initOpen';
5
+ import initMagnifier from '../actions/initMagnifier';
6
+ import types from '../constants/types';
5
7
  import PropTypes from 'prop-types';
6
8
  import '../GSZoom.css';
7
9
 
@@ -27,8 +29,12 @@ const zoomParams = {
27
29
  * @param {Object} props - The props object.
28
30
  * @param {'lightbox' | 'magnifier'} props.type - Type of zoom effect.
29
31
  * @param {string} props.reference - Unique key for each slideshow.
32
+ * @param {string} props.src - This is the src of image if src has value thet means component return just image.
30
33
  * @param {boolean} props.arrows - Allows to control arrows visiblity.
31
34
  * @param {boolean} props.navigateWithKeys - Enable or disable control via keys.
35
+ * @param {number} props.magnifier.zoom - magnifier zoom size.
36
+ * @param {'circle' | 'magnifier'} props.magnifier.form - showes magnifier form.
37
+ * @param {number} props.magnifier.size - magnifier size.
32
38
  * @param {boolean} props.showAdditionals - Control additionla images visibility.
33
39
  * @param {boolean} props.zoomOnWheel - Control zoom via mousewheel.
34
40
  * @param {number} props.maxZoom - Shows zoom max percent.
@@ -43,9 +49,12 @@ const zoomParams = {
43
49
  * @returns {JSX.Element} The rendered zoom component.
44
50
  */
45
51
 
46
- const GSZoom = ({ list, ...rest }) => {
52
+ const GSZoom = ({ children, ...rest }) => {
47
53
  const params = { ...rest };
48
54
  const [componentKey, setComponentKey] = useState(null);
55
+ const [indexes, setIndexes] = useState([]);
56
+ const zoomRef = useRef(null);
57
+ const singleImageRef = useRef(null);
49
58
 
50
59
  useEffect(() => {
51
60
  if (componentKey != null) {
@@ -61,43 +70,96 @@ const GSZoom = ({ list, ...rest }) => {
61
70
  return instance.ref;
62
71
  }
63
72
  }
64
- return `GSZoomInstance by '${ref}' reference not found`;
65
73
  },
66
74
  };
67
75
  }
68
- if (
69
- window.GSZoomConfigue.references.find(x => x.key == componentKey) ==
70
- undefined
71
- ) {
76
+ if (window.GSZoomConfigue.instance(componentKey) === undefined) {
72
77
  const currentParams = getCurrentParams(params);
73
-
78
+ console.log('window.GSZoomConfigue', window.GSZoomConfigue);
74
79
  window.GSZoomConfigue.references.push({
75
80
  key: componentKey,
76
81
  ref: {
77
- list,
82
+ list: [],
78
83
  currentParams,
79
84
  },
80
85
  });
86
+ }
87
+ const instance = window.GSZoomConfigue.instance(componentKey);
88
+ if (params.src != undefined && params.src != null && params.src != '') {
89
+ setIndexes([instance.list.length]);
90
+ instance.list.push({
91
+ src: params.src,
92
+ index: instance.list.length,
93
+ });
94
+ if (singleImageRef != null) {
95
+ if (instance.currentParams.type === types.lightbox) {
96
+ singleImageRef.current.addEventListener('click', () => {
97
+ initOpen(instance, +singleImageRef.current.dataset.index);
98
+ });
99
+ } else if (instance.currentParams.type === types.magnifier) {
100
+ initMagnifier(instance, [singleImageRef.current]);
101
+ }
102
+ }
103
+ } else {
104
+ const images = zoomRef.current.querySelectorAll('img');
105
+ const newList = [];
106
+ [...images].map(img => {
107
+ const index = instance.list.length;
108
+ instance.list.push({
109
+ src: img.src,
110
+ index: index,
111
+ });
112
+ newList.push(index);
113
+ img.dataset.index = index;
114
+ if (instance.currentParams.type == types.lightbox) {
115
+ img.addEventListener('click', () => {
116
+ initOpen(instance, index);
117
+ });
118
+ }
119
+ });
81
120
 
82
- init(
83
- window.GSZoomConfigue.references.find(x => x.key === componentKey)
84
- .ref,
85
- );
121
+ if (instance.currentParams.type == types.magnifier) {
122
+ initMagnifier(instance, [...images]);
123
+ }
124
+ setIndexes(newList);
125
+ console.log(images);
86
126
  }
87
127
  }
88
128
  }, [componentKey]);
89
129
 
90
130
  useEffect(() => {
131
+ console.log('start');
91
132
  setComponentKey(
92
133
  params.reference != undefined ? params.reference : NewGuid(),
93
134
  );
94
- return () => {
95
- if (window.GSZoomConfigue != undefined) {
96
- window.GSZoomConfigue.references =
97
- window.GSZoomConfigue.references.filter(x => x.key !== componentKey);
98
- }
99
- };
100
135
  }, []);
136
+
137
+ useEffect(() => {
138
+ if (indexes.length > 0) {
139
+ return () => {
140
+ if (window.GSZoomConfigue != undefined) {
141
+ const instance = window.GSZoomConfigue.instance(componentKey);
142
+ if (instance != undefined) {
143
+ instance.list = instance.list.filter(
144
+ x => !indexes.includes(x.index),
145
+ );
146
+ }
147
+ }
148
+ };
149
+ }
150
+ }, [indexes]);
151
+
152
+ return (
153
+ <>
154
+ {params.src != undefined && params.src != null && params.src != '' ? (
155
+ <img ref={singleImageRef} data-index={indexes[0]} {...rest} />
156
+ ) : (
157
+ <div className='gs-zoom-collection' ref={zoomRef}>
158
+ {children}
159
+ </div>
160
+ )}
161
+ </>
162
+ );
101
163
  };
102
164
 
103
165
  GSZoom.propTypes = {
package/dist/constants/defaultParams.js CHANGED
@@ -4,7 +4,6 @@ const defaultParams = {
4
4
  reference: "",
5
5
  arrows: true,
6
6
  navigateWithKeys: true,
7
- allowArrowNavigation: true,
8
7
  showAdditionals: true,
9
8
  zoomOnWheel: true,
10
9
  maxZoom: 5,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@get-set/gs-zoom",
3
- "version": "0.0.2",
3
+ "version": "0.0.3",
4
4
  "description": "Get-Set Zoom",
5
5
  "main": "index.js",
6
6
  "author": "Get-Set",