https://www.lin-shiao-tung.com/assets/cache/4b716df781fc4a847b4e39adde0db81d.js

1;(function() {
2  'use strict';
3  
4  // Class className
5  function Recommend() {
6    this.init();
7  }
8
9  Recommend.prototype.init = function() {
10    var recommend = '.js-slider-3' ;
11    var recommendBooking = '.js-slider-6';
12
13    var recommendSwiper = new Swiper(recommend, {
14      slidesPerView: 2.2,
15      spaceBetween: 10,
16      pagination: false,
17      // freeMode: true,
18      breakpoints: {
19        1024: {
20          slidesPerView: 4.4
21        },
22
23        768: {
24          slidesPerView: 3.2
25        },
26
27        480: {
28          slidesPerView: 2.2
29        }
30      },
31    });
32
33    var recommendBookingSwiper = new Swiper(recommendBooking, {
34      slidesPerView: 2.2,
35      spaceBetween: 10,
36      pagination: false,
37      // freeMode: true,
38      breakpoints: {
39        1024: {
40          slidesPerView: 4.4
41        },
42
43        768: {
44          slidesPerView: 3.2
45        },
46
47        480: {
48          slidesPerView: 2.2
49        }
50      },
51    });
52  };
53
54  $(function() {
55    new Recommend();
56  });
57})();
58;(function() {
59  'use strict';
60
61  var productDetailThumbnail = '#js-productDetail-thumbnail';
62  var productDetailBigImageSwiper = '#js-productDetail-bigImage-swiper';
63  var productDetailImageSwiper = null;
64  
65  // Class className
66  function ProductDetail() {
67    var _this = this;
68    var resizeLock = true;
69
70    var runStickyInventoryAndThumbnail = function() {
71      if ($(window).width() >= 785)
72      {
73        if (resizeLock)
74        {
75          _this.initSticky();
76          resizeLock = false;
77        }
78      }
79      else
80      {
81        if (! resizeLock)
82        {
83          if (window.stickyThumbnail != undefined)
84          {
85            window.stickyThumbnail.kill();
86          }
87
88          if (window.stickyInventory != undefined)
89          {
90            window.stickyInventory.kill();
91          }
92
93          resizeLock = true;
94        }
95      }
96
97      _this.checkGalleryItemInView();
98    };
99
100    $(window).bind('resize', runStickyInventoryAndThumbnail);
101    $(window).bind('scroll', this.checkGalleryItemInView);
102
103    runStickyInventoryAndThumbnail();
104    this.init();
105  }
106
107  ProductDetail.prototype.init = function() {
108    var _this = this;
109
110    _this.checkGalleryItemInView();
111
112    setTimeout(function() {
113      if (productDetailImageSwiper == null)
114      {
115        _this.initSwiper();
116      }
117      else
118      {
119        _this.updateSwiper();
120      }
121
122      _this.initGallery();
123    }, 1);
124
125    $(window).scrollTop(0);
126  };
127
128  ProductDetail.prototype.initSwiper = function() {
129    var bigImageSwiperId = '#js-productDetail-bigImage-swiper';
130    var bigImageThumbsId = '#js-productDetail-thumbsSlider';
131
132    productDetailImageSwiper = new Swiper(bigImageSwiperId, {
133      pagination: {
134        el: bigImageSwiperId + ' .swiper-pagination',
135        clickable: true
136      },
137      observer: true,
138      thumbs: {
139        swiper: {
140          el : bigImageThumbsId,
141          spaceBetween: 10,
142          slidesPerView: 5,
143          freeMode: true,
144          watchSlidesProgress: true,
145          observer: true,
146        }
147      },
148      watchOverflow: true
149    });
150  };
151
152  ProductDetail.prototype.updateSwiper = function() {
153    productDetailImageSwiper.update();
154    productDetailImageSwiper.slideTo(0, 0);
155  };
156
157  ProductDetail.prototype.initSticky = function() {
158    var stickySpacing = '35px';
159
160    if ($('#js-productDetail-thumbnail-list').length)
161    {
162      window.stickyThumbnail = ScrollTrigger.create({
163        trigger: '._productDetail_bigImage',
164        start: 'top ' + stickySpacing,
165        end: (self) => '+=' + (document.querySelector('._productDetail_bigImage').offsetHeight - self.pin.offsetHeight),
166        pin: '#js-productDetail-thumbnail-list',
167        pinSpacing: true,
168        onUpdate: self => {
169          self.refresh();
170        }
171      });
172
173      // Fix ipad scroll lagging issue. @CLHOM
174      if (/iPad/i.test(navigator.userAgent) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1))
175      {
176        window.stickyThumbnail.kill();
177        window.stickyThumbnail = undefined;
178      }
179    }
180
181
182    if ($('#js-productDetail-inventory').length)
183    {
184      window.stickyInventory = ScrollTrigger.create({
185        trigger: '._productDetail_content__colLeft',
186        start: 'top ' + stickySpacing,
187        end: (self) => '+=' + (document.querySelector('#js-productDetail_content').offsetHeight - self.pin.offsetHeight),
188        pin: '#js-productDetail-inventory',
189        pinSpacing: true,
190        onUpdate: self => {
191          self.refresh();
192        }
193      });
194
195      // Fix ipad scroll lagging issue. @CLHOM
196      if (/iPad/i.test(navigator.userAgent) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1))
197      {
198        window.stickyInventory.kill();
199        window.stickyInventory = undefined;
200      }
201    }
202  };
203
204  ProductDetail.prototype.initGallery = function() {
205    $(productDetailThumbnail).find('.js-productDetail-thumbnail-item').each(function(idx) {
206      $(this).unbind('click').bind('click', function() {
207        var body = $('html, body');
208        var $productDetailBigImageItem = $(productDetailBigImageSwiper).find('.js-productDetail-bigImage-item');
209        var offset = ($(window).height() - $productDetailBigImageItem.eq(idx).height()) / 2;
210        var scrollPos = Math.ceil($productDetailBigImageItem.eq(idx).offset().top - offset);
211
212        body.stop().animate({
213          scrollTop: scrollPos
214        }, 300, 'swing');
215      });
216    });
217  };
218
219  ProductDetail.prototype.checkGalleryItemInView = function() {
220    var body = $(window);
221
222    var classActive = '_productDetail_thumbnail__item--active';
223
224    var bodyHeight = body.height();
225    var bodyScrollTop = body.scrollTop();
226
227    $(productDetailBigImageSwiper).find('.js-productDetail-bigImage-item').each(function(idx) {
228      var trigger = $(this).offset().top + $(this).height() / 2 + $('#js-header').height();
229
230      if (bodyScrollTop == 0) 
231      {
232        $(productDetailThumbnail).find('.js-productDetail-thumbnail-item').eq(0).addClass(classActive).siblings().removeClass(classActive);
233      }
234      else {
235        if (trigger >= bodyScrollTop && trigger < (bodyScrollTop + bodyHeight)) {
236          $(productDetailThumbnail).find('.js-productDetail-thumbnail-item').eq(idx).addClass(classActive).siblings().removeClass(classActive);
237        }
238      }
239    });
240  };
241
242  $(function() {
243    _productDetail = new ProductDetail();
244  });
245})();