@get-set/gs-zoom 0.0.2 → 0.0.4

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 (13) 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/dist/constants/icons.js +2 -0
  13. 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/dist/constants/icons.js CHANGED
@@ -1,5 +1,7 @@
1
1
  const icons = {
2
2
  // zoomIn: '<svg width="20px" height="20px" viewBox="0 -0.5 21 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Dribbble-Light-Preview" class="btn-icon btn-icon-plus" transform="translate(-379.000000, -240.000000)" fill="none"><g id="icons" transform="translate(56.000000, 160.000000)"><polygon id="plus-[#1512]" points="344 89 344 91 334.55 91 334.55 100 332.45 100 332.45 91 323 91 323 89 332.45 89 332.45 80 334.55 80 334.55 89"></polygon></g></g></g></svg>',
3
+ loading:
4
+ '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 150"><path fill="none" stroke="#000000" stroke-width="15" stroke-linecap="round" stroke-dasharray="300 385" stroke-dashoffset="0" d="M275 75c0 31-27 50-50 50-58 0-92-100-150-100-28 0-50 22-50 50s23 50 50 50c58 0 92-100 150-100 24 0 50 19 50 50Z"><animate attributeName="stroke-dashoffset" calcMode="spline" dur="2" values="685;-685" keySplines="0 0 1 1" repeatCount="indefinite"></animate></path></svg>',
3
5
  zoomIn:
4
6
  '<svg width="20px" height="20px" viewBox="0 0 30 30"><path class="fslightbox-svg-path" d="M 13 3 C 7.4889971 3 3 7.4889971 3 13 C 3 18.511003 7.4889971 23 13 23 C 15.396508 23 17.597385 22.148986 19.322266 20.736328 L 25.292969 26.707031 A 1.0001 1.0001 0 1 0 26.707031 25.292969 L 20.736328 19.322266 C 22.148986 17.597385 23 15.396508 23 13 C 23 7.4889971 18.511003 3 13 3 z M 13 5 C 17.430123 5 21 8.5698774 21 13 C 21 17.430123 17.430123 21 13 21 C 8.5698774 21 5 17.430123 5 13 C 5 8.5698774 8.5698774 5 13 5 z M 12.984375 7.9863281 A 1.0001 1.0001 0 0 0 12 9 L 12 12 L 9 12 A 1.0001 1.0001 0 1 0 9 14 L 12 14 L 12 17 A 1.0001 1.0001 0 1 0 14 17 L 14 14 L 17 14 A 1.0001 1.0001 0 1 0 17 12 L 14 12 L 14 9 A 1.0001 1.0001 0 0 0 12.984375 7.9863281 z"></path></svg>',
5
7
  //zoomOut: '<svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path class="btn-icon btn-icon-minus" d="M2 12C2 11.4477 2.44772 11 3 11H21C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13H3C2.44772 13 2 12.5523 2 12Z" fill="none"></path></svg>',
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.4",
4
4
  "description": "Get-Set Zoom",
5
5
  "main": "index.js",
6
6
  "author": "Get-Set",