nestiq-component-library 1.1.142 → 1.1.143
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/dist/index.es.js +27 -20
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +27 -20
- package/dist/index.js.map +1 -1
- package/nestiq-component-library-1.1.143.tgz +0 -0
- package/package.json +1 -1
- package/src/components/PropertyImageList/PropertyImageList.css +24 -6
- package/src/components/PropertyImageList/PropertyImageList.tsx +213 -206
package/dist/index.es.js
CHANGED
|
@@ -178,7 +178,7 @@ var iconMap = "/static/media/icon_map.2318ec664c3e615e.svg";
|
|
|
178
178
|
|
|
179
179
|
var iconLayers$1 = "/static/media/layer_icon.9b56c187199c44b5.svg";
|
|
180
180
|
|
|
181
|
-
var css_248z$6 = ".mainImage {\r\n height: 80%;\r\n}\r\n\r\n.secondList {\r\n height: 20%;\r\n max-height: 121.6px;\r\n}\r\n\r\n.listImageButton {\r\n background-image: linear-gradient(to top, #000, #666);\r\n align-items: center !important;\r\n justify-content: center !important;\r\n min-height: 121px;\r\n}\r\n\r\n.listImgText {\r\n height: 30px;\r\n font-size: 14px;\r\n line-height: 2.14;\r\n color: #fff;\r\n}\r\n\r\n.arroIconColour {\r\n height: 30px;\r\n fill: #fff !important;\r\n}\r\n\r\n.onImageArrow {\r\n width: 50px;\r\n height: 50px;\r\n padding: 23px 8px;\r\n background-color: rgba(255, 255, 255, 0.8);\r\n}\r\n\r\n.blackArrow {\r\n width: 20px;\r\n height: 20px;\r\n}\r\n\r\n\r\n.imagesArray {\r\n background-size:
|
|
181
|
+
var css_248z$6 = ".mainImage {\r\n height: 80%;\r\n}\r\n\r\n.secondList {\r\n height: 20%;\r\n max-height: 121.6px;\r\n}\r\n\r\n.listImageButton {\r\n background-image: linear-gradient(to top, #000, #666);\r\n align-items: center !important;\r\n justify-content: center !important;\r\n min-height: 121px;\r\n}\r\n\r\n.listImgText {\r\n height: 30px;\r\n font-size: 14px;\r\n line-height: 2.14;\r\n color: #fff;\r\n}\r\n\r\n.arroIconColour {\r\n height: 30px;\r\n fill: #fff !important;\r\n}\r\n\r\n.onImageArrow {\r\n width: 50px;\r\n height: 50px;\r\n padding: 23px 8px;\r\n background-color: rgba(255, 255, 255, 0.8);\r\n}\r\n\r\n.blackArrow {\r\n width: 20px;\r\n height: 20px;\r\n}\r\n\r\n\r\n.imagesArray {\r\n background-size: cover !important;\r\n}\r\n@media (max-width: 450px) {\r\n .Pimagelist {\r\n }\r\n .mainImage {\r\n height: 500px;\r\n width: 88vw;\r\n }\r\n}\r\n\r\n/* @media (min-width: 390px) and (max-width: 850px) {\r\n .Pimagelist {\r\n }\r\n .mainImage {\r\n height: 500px;\r\n width: 58vw;\r\n }\r\n} */\r\n@media (min-width: 768px) and (max-width: 819px) {\r\n .Pimagelist {\r\n }\r\n .mainImage {\r\n height: 80%;\r\n width: 58vw;\r\n }\r\n}\r\n@media (min-width: 820px) and (max-width: 850px) {\r\n .Pimagelist {\r\n }\r\n .mainImage {\r\n height: 80%;\r\n width: 58vw;\r\n }\r\n}\r\n\r\n.image-thumbnail {\r\n position: relative;\r\n transition: opacity 0.3s ease-in-out;\r\n height: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.image-thumbnail img {\r\n height: 100%;\r\n object-fit: cover;\r\n border-radius: 8px;\r\n}\r\n\r\n.image-thumbnail.greyed-out img {\r\n filter: grayscale(100%) brightness(50%);\r\n}\r\n\r\n.image-thumbnail.selected img {\r\n filter: none;\r\n border: 2px solid #007bff; /* Highlight border for selected image */\r\n}";
|
|
182
182
|
styleInject(css_248z$6);
|
|
183
183
|
|
|
184
184
|
var css_248z$5 = ".popup-header {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n padding: 1rem;\n position: absolute;\n top: 0;\n}\n\n.popup-title {\n color: white;\n font-size: 24px;\n font-weight: bold;\n}\n\n.btn-close {\n position: absolute;\n right: 1rem;\n top: 1rem;\n background: none;\n border: none;\n color: white;\n font-size: 24px;\n cursor: pointer;\n}\n\n.popup-body {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 1rem;\n position: relative;\n flex: 1;\n}\n\n.main-image {\n max-width: 100%;\n max-height: 80vh;\n border-radius: 8px;\n}\n\n.btn-prev,\n.btn-next {\n background: none;\n border: none;\n color: white;\n font-size: 48px;\n cursor: pointer;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n}\n\n.btn-prev {\n left: 10px;\n}\n\n.btn-next {\n right: 10px;\n}\n\n.popup-thumbnails {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 10px;\n padding: 1rem;\n}\n\n.thumbnail {\n width: 60px;\n height: 60px;\n object-fit: cover;\n border-radius: 8px;\n cursor: pointer;\n opacity: 0.6;\n}\n\n.thumbnail.active {\n border: 2px solid white;\n opacity: 1;\n}\n";
|
|
@@ -299,20 +299,21 @@ function PropertyImageList(prop) {
|
|
|
299
299
|
var _d = useState(false), isFloorPlanPopupOpen = _d[0], setIsFloorPlanPopupOpen = _d[1];
|
|
300
300
|
var imageListRef = useRef(null);
|
|
301
301
|
var handleArrowClickInMainImage = function (direction) {
|
|
302
|
-
if (prop.pictureUrls.length
|
|
302
|
+
if (!prop.pictureUrls.length)
|
|
303
303
|
return;
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
prop.pictureUrls.length;
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
304
|
+
setCurrentImageIndex(function (prevIndex) {
|
|
305
|
+
var newIndex;
|
|
306
|
+
if (direction === "left") {
|
|
307
|
+
newIndex =
|
|
308
|
+
(prevIndex - 1 + prop.pictureUrls.length) % prop.pictureUrls.length;
|
|
309
|
+
}
|
|
310
|
+
else if (direction === "right") {
|
|
311
|
+
newIndex = (prevIndex + 1) % prop.pictureUrls.length;
|
|
312
|
+
}
|
|
313
|
+
return newIndex || 0;
|
|
314
|
+
});
|
|
314
315
|
imageListRef.current.scrollTo({
|
|
315
|
-
left:
|
|
316
|
+
left: currentImageIndex * (direction === "left" ? -150 : 150),
|
|
316
317
|
behavior: "smooth",
|
|
317
318
|
});
|
|
318
319
|
};
|
|
@@ -338,13 +339,19 @@ function PropertyImageList(prop) {
|
|
|
338
339
|
React.createElement("div", { role: "button", className: "rounded-circle border onImageArrow d-flex position-absolute end-0 me-2 align-items-center justify-content-center", onClick: function () { return handleArrowClickInMainImage("right"); } },
|
|
339
340
|
React.createElement("img", { src: blcIconArrowRight, className: "blackArrow", alt: "Right Arrow" }))),
|
|
340
341
|
React.createElement("div", { className: "d-none d-md-block" },
|
|
341
|
-
React.createElement("div", { className: "mt-1 d-flex flex-row gap-1 col-12
|
|
342
|
-
React.createElement("div", { className: "\tcol-lg-6 col-6 d-flex flex-row
|
|
342
|
+
React.createElement("div", { className: "mt-1 d-flex flex-row gap-1 col-12 secondList" },
|
|
343
|
+
React.createElement("div", { className: "\tcol-lg-6 col-6 d-flex flex-row py-0 px-1" },
|
|
343
344
|
React.createElement("div", { className: "\t col-12 position-relative d-flex justify-content-center" },
|
|
344
345
|
React.createElement("div", { className: "col-1 h-100 d-flex position-absolute start-0", onClick: function () { return handleArrowClickInMainImage("left"); }, role: "button" },
|
|
345
346
|
React.createElement("div", { className: "col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3" },
|
|
346
347
|
React.createElement("img", { src: iconArrowLeft, className: "arroIconColour", alt: "Left Arrow" }))),
|
|
347
|
-
React.createElement("div", { className: "col-lg-10 rounded-3 h-100 d-flex flex-row gap-2 overflow-
|
|
348
|
+
React.createElement("div", { className: "col-lg-10 rounded-3 h-100 d-flex flex-row gap-2 overflow-hidden", ref: imageListRef }, prop.pictureUrls.length > 0 && (React.createElement("div", { className: "col-lg-5 h-100 d-flex gap-2 flex-row rounded-3" }, prop.pictureUrls.map(function (picture, index) { return (React.createElement("div", { key: index, className: "col-lg-12 h-100 d-flex image-thumbnail ".concat(index === currentImageIndex
|
|
349
|
+
? "selected"
|
|
350
|
+
: "greyed-out", " ").concat(index === 0
|
|
351
|
+
? "ms-1"
|
|
352
|
+
: index === prop.pictureUrls.length - 1
|
|
353
|
+
? "me-1"
|
|
354
|
+
: ""), onClick: function () {
|
|
348
355
|
setCurrentImageIndex(index);
|
|
349
356
|
imageListRef.current.scrollTo({
|
|
350
357
|
left: index * 150,
|
|
@@ -353,18 +360,18 @@ function PropertyImageList(prop) {
|
|
|
353
360
|
}, role: "button" },
|
|
354
361
|
React.createElement("img", { src: picture.url, alt: "Image ".concat(index + 1), className: "col-12 h-100 rounded-3 object-fit-cover" }))); })))),
|
|
355
362
|
React.createElement("div", { className: "col-1 h-100 d-flex position-absolute end-0 top-0", onClick: function () { return handleArrowClickInMainImage("right"); }, role: "button" },
|
|
356
|
-
React.createElement("div", { className: "col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3
|
|
363
|
+
React.createElement("div", { className: "col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3" },
|
|
357
364
|
React.createElement("img", { src: iconArrowRight, className: "arroIconColour ", alt: "Right Arrow" }))))),
|
|
358
365
|
React.createElement("div", { className: "col-7 col-lg-6 d-flex flex-row" },
|
|
359
|
-
React.createElement("div", { className: "col-lg-4 col-4
|
|
366
|
+
React.createElement("div", { className: "col-lg-4 col-4 py-0 px-1", role: "button", onClick: toggleAllPhotos },
|
|
360
367
|
React.createElement("div", { className: "border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3" },
|
|
361
368
|
React.createElement("img", { src: iconGallery, alt: "Gallery Icon" }),
|
|
362
369
|
React.createElement("span", { className: "listImgText" }, "Alle Fotos"))),
|
|
363
|
-
React.createElement("div", { className: "col-lg-4 col-3
|
|
370
|
+
React.createElement("div", { className: "col-lg-4 col-3 py-0 px-1", role: "button", onClick: floorPlanClickHandler },
|
|
364
371
|
React.createElement("div", { className: "border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3" },
|
|
365
372
|
React.createElement("img", { src: iconLayers$1, alt: "Layers Icon" }),
|
|
366
373
|
React.createElement("span", { className: "listImgText" }, "Grundriss"))),
|
|
367
|
-
React.createElement("div", { className: "col-lg-4 col-3
|
|
374
|
+
React.createElement("div", { className: "col-lg-4 col-3 py-0 px-1", role: "button", onClick: function () {
|
|
368
375
|
return window.scrollTo({
|
|
369
376
|
top: document.documentElement.scrollHeight,
|
|
370
377
|
});
|