https://www.argnord.ru/scripts/_partials/product-view/controllers/productViewItemController.js

1/*@ngInject*/
2function ProductViewItemCtrl($document, $q, $timeout, productViewService, $translate, $scope, $parse, urlHelper, $attrs, $http, $sce) {
3
4    var ctrl = this, controls = {}, needCarouselUpdate = false, requestGetPhotosInPending = false,
5        isPhotosStorageMutation = false, photosStorage;
6    var isMobile = $document[0].documentElement.classList.contains('mobile-version');
7    const styles = new Map();
8
9    ctrl.$onInit = function () {
10        ctrl.photosVisible = false;
11        ctrl.photos = [];
12        ctrl.picture = {};
13        ctrl.promisesGetPhotos = [];
14        ctrl.colorSelected = null;
15        ctrl.productId = $parse($attrs.productId)($scope);
16        ctrl.selectedOffer = 0;
17    };
18
19    ctrl.getOffersProduct = function (productId) {
20        return productViewService.getOfferId(productId).then(function (result) {
21            if (result != null) {
22                return result.Offers;
23            }
24        });
25    };
26
27    ctrl.getPhotos = function (productId) {
28        var defer = $q.defer(),
29            promise;
30        if (requestGetPhotosInPending === false && (photosStorage == null || needCarouselUpdate === true)) {
31            requestGetPhotosInPending = true;
32            promise = productViewService.getPhotos(ctrl.productId || productId).then(function (photos) {
33                isPhotosStorageMutation = true;
34
35                for (var i = 0, len = ctrl.promisesGetPhotos.length; i < len; i++) {
36                    ctrl.promisesGetPhotos[i].resolve(photos);
37                }
38
39                ctrl.promisesGetPhotos.length = 0;
40
41                requestGetPhotosInPending = false;
42
43                return photosStorage = photos;
44            });
45        } else if (requestGetPhotosInPending === true) {
46            promise = defer.promise;
47            ctrl.promisesGetPhotos.push(defer);
48        } else {
49            promise = defer.promise;
50            defer.resolve(photosStorage);
51        }
52        ctrl.gotPhotos = true;
53        return promise;
54    };
55
56    ctrl.numberals = function (num) {
57        if (num <= 0) return ctrl.textNumberals = num + ' ' + $translate.instant('Js.ProductView.Photos0');
58        num = num % 100;
59        var nums = num % 10;
60        if (num > 10 && num < 20) return ctrl.textNumberals = num + ' ' + $translate.instant('Js.ProductView.Photos5');
61        if (nums > 1 && nums < 5) return ctrl.textNumberals = num + ' ' + $translate.instant('Js.ProductView.Photos2');
62        return nums === 1 ? ctrl.textNumberals = num + ' ' + $translate.instant('Js.ProductView.Photos1')
63            : ctrl.textNumberals = num + ' ' + $translate.instant('Js.ProductView.Photos5');
64    };
65
66    ctrl.fill = function (photos) {
67        if (ctrl.getControl('colorsViewer') != null) {
68            ctrl.photos = ctrl.filterPhotos(photosStorage == null && isPhotosStorageMutation === false ? ctrl.getPhotos() : photos, ctrl.getControl('colorsViewer').colorSelected.ColorId, ctrl.onlyPhotoWithColor);
69        } else {
70            ctrl.photos = photos;
71
72        }
73
74        if (ctrl.photos.length === 0) {
75            ctrl.photos.length = 0;
76            ctrl.photos.push.apply(ctrl.photos, ctrl.getMainPhoto(photos));
77        }
78        if (ctrl.maxPhotoView != null) {
79            ctrl.photos = ctrl.photos.slice(0, ctrl.maxPhotoView);
80        }
81
82        ctrl.numberals(ctrl.photos.length);
83        return photos;
84    };
85
86    ctrl.process = function (productId) {
87
88        return ctrl.getPhotos(productId).then(function (photos) {
89
90            ctrl.fill(photos);
91            
92            $timeout(function () {
93
94                ctrl.carouselInit = true;
95
96                if (needCarouselUpdate === true && ctrl.getControl('photosCarousel') != null && ctrl.getControl('photosCarousel').carousel != null) {
97                    ctrl.getControl('photosCarousel').carousel.update();
98                    needCarouselUpdate = false;
99                }
100            }, 0);
101
102            return photos;
103        });
104    };
105
106    ctrl.clearPhotos = function () {
107        photosStorage = null;
108        needCarouselUpdate = true;
109    };
110
111    ctrl.enter = function () {
112
113        if (ctrl.photosVisible === true) {
114            return;
115        }
116
117        ctrl.photosVisible = true;
118       return ctrl.process(ctrl.productId);
119    };
120    ctrl.leave = function () {
121        ctrl.photosVisible = false;
122        ctrl.carouselInit = false;
123    };
124
125    ctrl.changePhoto = function (photo) {
126        ctrl.picture = photo;
127    };
128
129    ctrl.initColors = function (colorsViewer) {
130        ctrl.addControl('colorsViewer', colorsViewer);
131
132        if (colorsViewer.changeStartSelectedColor != null) {
133            setTimeout(function () {
134                colorsViewer.selectColorById(colorsViewer.changeStartSelectedColor);
135            }, 500);
136        }
137    };
138
139    ctrl.getSelectedColorId = function () {
140        var colorsViewer = ctrl.getControl('colorsViewer'),
141            colorId;
142
143        if (colorsViewer != null && colorsViewer.colorSelected != null && colorsViewer.getDirtyState() === true) {

144            colorId = colorsViewer.colorSelected.ColorId;
145        }
146
147        return colorId;
148    };
149
150    ctrl.scrollToStartImages = function () {
151        let photosScrollContent = ctrl.getControl('productViewScrollPhotos');
152
153        if (photosScrollContent != null) {
154            $timeout(() => photosScrollContent.scrollToStart(), 100);
155        }
156    }
157
158    ctrl.initColorsCarousel = function (carousel) {
159        ctrl.addControl('colorsViewerCarousel', carousel);
160    };
161
162    ctrl.changeColor = function (color) {
163        ctrl.getOffersProduct(ctrl.productId)
164            .then(function (result) {
165                ctrl.productOffers = result;
166                if (ctrl.productOffers != null && ctrl.productOffers.length > 0) {
167                    ctrl.selectedProductOffer = ctrl.productOffers.filter(function (offer) {
168                        return offer.Color.ColorId === color.ColorId;
169                    });
170                    ctrl.sizeDisabled();
171
172                    if (ctrl.selectedProductOffer != null && ctrl.selectedProductOffer.length > 0) {
173
174                        var o = null;
175                        for (var i = 0; i < ctrl.selectedProductOffer.length; i++) {
176                            if (ctrl.selectedProductOffer[i].Amount > 0) {
177                                o = ctrl.selectedProductOffer[i];
178                                break;
179                            }
180                        }
181
182                        ctrl.offer = o == null ? ctrl.selectedProductOffer[0] : o;
183                    }
184                }
185                var defaultPhoto;
186                if (photosStorage == null && isPhotosStorageMutation === false) {
187                    ctrl.getPhotos().then(function (result) {
188                        ctrl.photos = ctrl.filterPhotos(result, color.ColorId, ctrl.getControl('colorsViewer') != null ? ctrl.onlyPhotoWithColor : false);
189                        defaultPhoto = ctrl.getMainPhoto(ctrl.photos);
190                        //if (ctrl.photos.length === 0) {
191                        //    ctrl.photos = defaultPhoto;
192                        //}
193                        //if (ctrl.maxPhotoView != null) {
194                        //    ctrl.photos = ctrl.photos.slice(0, ctrl.maxPhotoView);
195                        //}
196                        ctrl.setColor(defaultPhoto);
197                    });
198                } else {
199                    defaultPhoto = ctrl.getMainPhoto(photosStorage != null && photosStorage.length !== 0 ? photosStorage : ctrl.photos);
200                    ctrl.photos = ctrl.filterPhotos(photosStorage, color.ColorId, ctrl.getControl('colorsViewer') != null ? ctrl.onlyPhotoWithColor : false);
201
202                    ctrl.setColor(defaultPhoto);
203                }
204                if (ctrl.onChangeColor != null) {
205                    $parse(ctrl.onChangeColor)($scope);
206                }
207
208                if (ctrl.photos.length === 0) {
209                    ctrl.photos.length = 0;
210                    ctrl.photos.push.apply(ctrl.photos, defaultPhoto);
211                    //ctrl.photos = ctrl.photos.concat(defaultPhoto);
212                }
213
214                if (ctrl.maxPhotoView != null) {
215                    ctrl.photos = ctrl.photos.slice(0, ctrl.maxPhotoView);
216                }
217
218                ctrl.scrollToStartImages();
219
220            }).catch(function (error) {
221            console.error(error);
222        });
223
224    };
225
226    ctrl.setColor = function (defaultPhoto) {
227
228        ctrl.picture = ctrl.photos.length === 0 && defaultPhoto != null ? defaultPhoto[0] : ctrl.photos[0];
229
230        ctrl.numberals(ctrl.photos.length);
231        var photosCarousel = ctrl.getControl('photosCarousel');
232        if (photosCarousel != null && photosCarousel.carousel != null) {
233            $timeout(function () {
234                photosCarousel.carousel.options.indexActive = 0;
235                photosCarousel.carousel.update();
236            });
237        }
238
239        if (ctrl.photoViewer != null) {
240            ctrl.photoViewer.reinit();
241        }
242    };
243
244    ctrl.addControl = function (name, scope) {
245        controls[name] = scope;
246    };
247
248    ctrl.getControl = function (name) {
249        return controls[name];
250    };
251
252    ctrl.filterPhotos = function (photos, colorId, onlyColorPhoto) {
253        return photos.filter(function (item) {
254            if (onlyColorPhoto) {
255                return item.ColorID === colorId;
256            }
257            return item.ColorID === colorId || item.ColorID == null;
258        });
259    };
260
261    ctrl.getUrl = function (url) {
262        var result = url,
263            colorId = ctrl.getSelectedColorId();
264
265        if (colorId != null) {
266            result = urlHelper.updateQueryStringParameter(result, 'color', colorId);
267        }
268
269        return result;
270    };
271
272    ctrl.addPhotoViewer = function (photoViewer) {
273        ctrl.photoViewer = photoViewer;
274    };
275
276    ctrl.getPictureByViewMode = function (photosItem, lazyLoadMode, sourceOnlyParameters) {
277
278        if (lazyLoadMode === 'Carousel' && ctrl.isCarouselImgVisible !== true || lazyLoadMode === 'Default' && ctrl.isImgVisible !== true) {
279            return null;
280        }
281
282        const picture = sourceOnlyParameters !== true && ctrl.picture != null && Object.keys(ctrl.picture).length > 0 ? ctrl.picture : (photosItem != null && photosItem.length > 0 ? photosItem[0] : null);
283        let size;
284
285        if(picture == null){
286            return null;
287        }
288        
289        if (ctrl.productViewMode != null) {
290            size = ['single'].includes(ctrl.productViewMode.viewName) ? 'PathBig' : (ctrl.productViewMode.isMobile ? 'PathMiddle' : 'PathSmall');
291        } else {
292            size = isMobile ? 'PathMiddle' : 'PathSmall';
293        }
294
295        return ctrl.getPictureBySize(size, picture);
296    };
297
298    ctrl.getStylePropByViewMode = function (prop, defaultValue, {viewName, value}) {
299        const currentViewName = ctrl.productViewMode?.viewName || 'tile';
300
301        let stylesItem = styles.get(prop) || {};
302
303        stylesItem[prop] = viewName == currentViewName ? value :  defaultValue;
304
305        styles.set(prop, stylesItem);
306        
307        return stylesItem;
308    }
309    
310    ctrl.lazyLoadImgInCarousel = function () {
311        ctrl.isCarouselImgVisible = true;
312    };
313
314    ctrl.lazyLoadImg = function () {
315        ctrl.isImgVisible = true;
316    };
317
318    ctrl.getPictureBySize = function (size, photos) {
319        return photos[size];
320    };
321
322    ctrl.getMainPhoto = function (photos) {
323        return photos.filter(function (photo) {
324            return photo.Main === true;
325        });
326    }
327
328    ctrl.getProductSize = (productId) =>
329    {
330        $http.post("Product/GetSizeByProductId", { productId: productId}).then((res) =>
331        {
332            ctrl.SizeProduct = res.data;
333            if (ctrl.colorSelected != undefined && ctrl.colorSelected.C

333olorId > 0) {
334                ctrl.changeColor(ctrl.colorSelected);
335            }
336        });
337    }
338
339    ctrl.changeSize = (size) =>
340    {
341        ctrl.sizeSelected = size;
342        if (ctrl.selectedProductOffer.length > 0)
343        {
344            let offers = ctrl.selectedProductOffer.filter((offer) => {
345                return offer.Size != undefined && offer.Size.SizeId == size.SizeId;
346            });
347            if (offers != undefined && offers.length > 0) {
348                ctrl.getPrice(offers[0].OfferId);
349            }
350        }
351    }
352
353    ctrl.sizeDisabled = () => {
354
355        ctrl.SizeProduct.forEach((size, i, arr) => {
356            if (ctrl.selectedProductOffer != undefined && ctrl.selectedProductOffer.length > 0)
357            {
358                let existsOffer = ctrl.selectedProductOffer.filter((offer) => {
359                    return offer.Size != undefined && offer.Size.SizeId == size.SizeId;
360                });
361                ctrl.SizeProduct[i].isDisabled = (existsOffer == undefined || existsOffer.length == 0);
362            }
363        });
364
365        let availibleSize = ctrl.SizeProduct.filter((size) => { return !size.isDisabled; });
366        if (availibleSize.length > 0) {
367            ctrl.changeSize(availibleSize[0]);
368        } 
369    }
370
371    ctrl.getPrice = function (offerId) {
372        ctrl.selectedOffer = offerId;
373        return $http.post('productExt/getofferprice', { offerId: offerId, attributesXml: null, lpBlockId: null, amount: 1 }).then(function (response) {
374            let price = response.data;
375            ctrl.Price = price;
376            ctrl.Price.PriceString = $sce.trustAsHtml(ctrl.Price.PriceString);
377        });
378    };
379};

380
381export default ProductViewItemCtrl;