https://f-photobook.jp/assets/js/commodity/lineup.js

1"use strict";
2
3FUJI.pageScript = FUJI.pageScript || {
4  init: {}
5};
6FUJI.pageScript = function () {
7  // コンストラクタ  =================================================================
8  function init() {
9    initPointSlide();
10    initPurposSlide();
11    initSizeSlide();
12    initSizeScrollBar();
13    FUJI.common.initMainvisual();
14    fireInview();
15  }
16
17  /*
18  * 
19  * インビュー
20  *
21  */
22  function fireInview() {
23    FUJI.data.$window.on('load', function () {
24      FUJI.common.initInView();
25    });
26  }
27
28  /*
29  * 
30  * Point スライダー
31  *
32  */
33  var pointSlide, vimeoPlayer;
34  function initPointSlide() {
35    var pointSlideOption = {
36      lazyLoad: 'progressive',
37      slidesToShow: 1,
38      autoplay: false,
39      fade: true,
40      centerPadding: '0',
41      arrows: true,
42      speed: 1,
43      dots: false,
44      pauseOnFocus: false,
45      focusOnSelect: false,
46      pauseOnHover: false,
47      adaptiveHeight: true
48    };
49    pointSlide = $('.js-pointSlide').slick(pointSlideOption);
50    $('.js-pointIndexList_node').on('click', changePointSlide);
51    pointSlide.on('beforeChange', changeSlideCurrentDots);
52    var $iframe = $('.pointSlide_node iframe');
53    if ($iframe.length && typeof Vimeo !== 'undefined') {
54      vimeoPlayer = new Vimeo.Player($iframe[0]);
55    }
56  }
57
58  /* ドットクリック時 */
59  function changePointSlide() {
60    var targetIndex = $(this).attr('data-slide-index');
61    if (!$(this).hasClass('is-current')) {
62      $('.js-pointIndexList_node').removeClass('is-current');
63      $(this).addClass('is-current');
64      pointSlide.slick('slickGoTo', targetIndex);
65    }
66  }
67
68  /* スライダーカレントの更新　*/
69  function changeSlideCurrentDots(event, slick, currentSlide, nextSlide) {
70    var $target = $(".js-pointIndexList_node[data-slide-index=\"".concat(nextSlide, "\"]"));
71    $('.js-pointIndexList_node').removeClass('is-current');
72    $target.addClass('is-current');
73    if (currentSlide === 0 && nextSlide !== 0 && vimeoPlayer) {
74      vimeoPlayer.setCurrentTime(0);
75    }
76  }
77
78  /*
79  * 
80  * ハードカバーへの想い スライダー
81  *
82  */
83  var purposeSlide, purposeInfoSlide;
84  function initPurposSlide() {
85    setPurposeSlideNumber();
86    setPurposSlide();
87    setPurposInfoSlide();
88    FUJI.data.$window.on('load', resetPurposeSlideOption);
89  }
90  function setPurposSlide() {
91    var purposeSlideOption = {
92      lazyLoad: 'progressive',
93      slidesToShow: 1,
94      autoplay: false,
95      autoplaySpeed: 4000,
96      centerPadding: '0',
97      arrows: true,
98      speed: 600,
99      dots: false,
100      infinite: false,
101      pauseOnFocus: false,
102      focusOnSelect: false,
103      pauseOnHover: false,
104      appendArrows: $('.js-purposeController_arrow'),
105      asNavFor: '.js-aboutPurpose_infoSlide'
106    };
107    purposeSlide = $('.js-aboutPurpose_slide').slick(purposeSlideOption);
108    purposeSlide.on('beforeChange', changePurposeSlideCurrentDots);
109  }
110  function setPurposInfoSlideOption() {
111    var adaptiveHeightStatus = FUJI.data.$MQ == 'LANDSCAPE' ? false : true;
112    var purposeSlideOption = {
113      slidesToShow: 1,
114      autoplay: false,
115      centerPadding: '0',
116      arrows: false,
117      fade: true,
118      speed: 600,
119      dots: false,
120      infinite: false,
121      pauseOnFocus: false,
122      focusOnSelect: false,
123      pauseOnHover: false,
124      adaptiveHeight: adaptiveHeightStatus,
125      appendArrows: $('.js-purposeController_arrow'),
126      asNavFor: '.js-aboutPurpose_slide'
127    };
128    return purposeSlideOption;
129  }
130  function setPurposInfoSlide() {
131    var purposeSlideOption = setPurposInfoSlideOption();
132    purposeInfoSlide = $('.js-aboutPurpose_infoSlide').slick(purposeSlideOption);
133    purposeInfoSlide.on('setPosition', function (event, slick) {
134      resetPurposeSlideOption();
135    });
136  }
137
138  /* スライダーインデックスの更新 */
139  function setPurposeSlideNumber() {
140    var sliderTotalLength = $('.js-aboutPurpose_slide_node').length;
141    $('.js-purposeSlideTotal').text(sliderTotalLength);
142  }
143
144  /* スライダーカレントの更新 */
145  function changePurposeSlideCurrentDots(event, slick, currentSlide, nextSlide) {
146    var nextSlideNumber = nextSlide + 1;
147    $('.js-purposeSlideCurrent').text(nextSlideNumber);
148  }
149  function resetPurposeSlideOption() {
150    var purposeSlideOption = setPurposInfoSlideOption();
151    purposeInfoSlide.slick('slickSetOption', purposeSlideOption);
152  }
153
154  /*
155  * 
156  * サイズバリエーション スライダー
157  *
158  */
159  var sizeImageSlide, sizeInfoSlide;
160  function initSizeSlide() {
161    setSizeImageSlide();
162    setSizeInfoSlide();
163  }
164  function setSizeImageSlide() {
165    var sizeImageSlideOption = {
166      lazyLoad: 'progressive',
167      slidesToShow: 1,
168      autoplay: false,
169      autoplaySpeed: 4000,
170      centerPadding: '0',
171      arrows: true,
172      speed: 600,

173      dots: false,
174      pauseOnFocus: false,
175      focusOnSelect: false,
176      pauseOnHover: false,
177      asNavFor: '.js-aboutSize_infoSlide'
178    };
179    sizeImageSlide = $('.js-aboutSize_imgSlide').slick(sizeImageSlideOption);
180  }
181  function setSizeInfoSlide() {
182    var sizeInfoSlideOption = {
183      slidesToShow: 1,
184      autoplay: false,
185      centerPadding: '0',
186      arrows: true,
187      speed: 600,
188      fade: true,
189      dots: false,
190      pauseOnFocus: false,
191      focusOnSelect: false,
192      pauseOnHover: false,
193      asNavFor: '.js-aboutSize_imgSlide',
194      adaptiveHeight: true
195    };
196    sizeInfoSlide = $('.js-aboutSize_infoSlide').slick(sizeInfoSlideOption);
197  }
198
199  /*
200  * 
201  * サイズバリエーション　スクロールバー
202  *
203  */
204  var $scrollWrap = $('.js-sizeScrollWrap'),
205    $scrollOuter = $('.js-scrollOuter'),
206    $scrollbar = $('.js-aboutSize_scrollBar'),
207    $scrollbarThumb = $('.js-aboutSize_scrollBar_thumb');
208  var contentWidth, adjustmentWidth, scrollBarWidth, scrollbarThumbWidth, scrollbarTrack;
209  function initSizeScrollBar() {
210    $scrollWrap.on('scroll resize', controllScrollBar);
211    FUJI.data.$window.on('onBreakpointChange resize', adjustBarWidth);
212    FUJI.data.$window.on('load', adjustBarWidth);
213  }
214  function adjustBarWidth() {
215    contentWidth = $scrollWrap.width();
216    scrollBarWidth = $scrollbar.width();
217    adjustmentWidth = $scrollWrap.get(0).scrollWidth;
218    scrollbarThumbWidth = parseInt(contentWidth * scrollBarWidth / adjustmentWidth);
219    var tableWidth = $('.js-scrollInner').get(0).scrollWidth;
220    if (FUJI.data.winW >= tableWidth + 20) {
221      $scrollOuter.addClass('hide-scrollBar');
222    } else {
223      $scrollOuter.removeClass('hide-scrollBar');
224    }
225    if (FUJI.data.$MQ == 'LANDSCAPE') return;
226    $scrollbarThumb.css('width', scrollbarThumbWidth);
227  }
228
229  /* スクロールに応じて位置変更 */
230  function controllScrollBar() {
231    scrollbarTrack = scrollBarWidth - scrollbarThumbWidth;
232    var offset = $(this).scrollLeft() / (adjustmentWidth - contentWidth) * scrollbarTrack;
233    $scrollbarThumb.css('transform', 'translateX(' + offset + 'px)');
234  }
235  return {
236    init: init
237  };
238}();
239FUJI.common.init(FUJI.pageScript.init);