https://www.zenrosai.coop/library/js/index_renew_2024.js

1/*!
2 * @fileOverview Common functions.
3 */
4
5(function ($) {
6  "use strict";
7
8  /**
9   * Common functions Variable
10   */
11  var resizeTimer;
12
13  /**
14   * @module Common.
15   */
16  var Common = {
17    // Add Events ////////////////////////////////////
18    /**
19     * Initialize.
20     * @return {Object}
21     */
22    initialize: function () {
23      return this;
24    },
25
26    /**
27     * Render.
28     * @return {Object}
29     */
30    render: function () {
31      Common.setUpMainSliderSaigai();
32      Common.susSlider();
33      Common.setUpTab();
34
35      return this;
36    },
37
38    /**
39     * On load.
40     * @return {Object}
41     */
42    onLoad: function () {
43      // Common.setUpKeyVisual01();
44      Common.setUpKeyVisual02();
45
46      return this;
47    },
48
49    /**
50     * Scroll.
51     * @return {Object}
52     */
53    scroll: function () {
54      return this;
55    },
56
57    /**
58     * Resized(Set Timer).
59     * @return {Object}
60     */
61    resized: function () {
62      return Common;
63    },
64    resizedTimer: function () {
65      clearTimeout(resizeTimer);
66      resizeTimer = setTimeout(Common.resized, 150);
67    },
68
69    /**
70     * Resize.
71     * @return {Object}
72     */
73    resize: function () {
74      Common.resizedTimer();
75
76      return this;
77    },
78
79    // modules ////////////////////////////////////
80    /**
81     * check device
82     */
83    checkDevice: function () {
84      return $(".pbPage").innerWidth() === 800 ? "sp" : "pc";
85    },
86
87    /**
88     * Set up tab.
89     */
90    setUpTab: function () {
91      var triggerWrapClass = ".js-tab";
92
93      if ($(triggerWrapClass).length === 0) {
94        return false;
95      }
96
97      var targetClass = ".js-tab-content";
98      var triggerFlag = "is-current";
99
100      //初期化
101      var initialize = function () {
102        $(triggerWrapClass).find("a").first().addClass(triggerFlag);
103
104        $(targetClass).hide().first().show();
105      };
106
107      //タブの表示切替
108      var switchTimer;
109      var switchTab = function (trigger) {
110        clearTimeout(switchTimer);
111        var target = $(trigger.attr("href"));
112
113        $(targetClass).stop();
114
115        switchTimer = setTimeout(function () {
116          $(targetClass).hide();
117          target.show();
118        });
119      };
120
121      //タブのactive判定
122      var isActive = function (target) {
123        if (!target.hasClass(triggerFlag)) {
124          target.closest(triggerWrapClass).find("a").removeClass(triggerFlag);
125          target.addClass(triggerFlag);
126          return true;
127        } else {
128          return false;
129        }
130      };
131
132      //ロードイベント
133      initialize();
134
135      // クリックイベント
136      $(document).on("click", ".js-tab .js-tab-handle li a", function () {
137        if (isActive($(this))) {
138          switchTab($(this));
139        }
140        return false;
141      });
142    },
143
144    /**
145     * Set Slider index-active
146     */
147    susSlider: function () {
148      var slider = document.querySelectorAll(".js-active-slider");
149      var device = Common.checkDevice();
150      var maxHeight = 0;
151      if (slider.length > 0) {
152        Array.prototype.forEach.call(slider, function (item, index) {
153          slickSlider(item);
154        });
155        function slickSlider(item) {
156          var slides = item.children;
157          if (device === "sp") {
158            if (slides.length > 1) {
159              $(item).slick({
160                dots: true,
161                draggable: true,
162                centerMode: true,
163                autoplay: true,
164                autoplaySpeed: 4000,
165                slidesToShow: 1,
166                slidesToScroll: 1,
167                infinite: true,
168                variableWidth: false,
169              });
170              slideDots(item);
171            }
172          } else {
173            if (slides.length > 3) {
174              $(item).slick({
175                dots: true,
176                centerMode: true,
177                autoplay: true,
178                autoplaySpeed: 4000,
179                slidesToShow: 3,
180                infinite: true,
181                variableWidth: true,
182              });
183              slideDots(item);
184            }
185          }
186          function slideDots(item) {
187            var pagenation = item.querySelector(".slick-dots");
188            var new_element = document.createElement("div");
189            new_element.classList.add("buttons");
190            new_element.setAttribute("data-play", "stop");
191            pagenation.appendChild(new_element);
192            var flag = "stop";
193            new_element.addEventListener("click", function () {
194              flag = this.getAttribute("data-play");
195              if (flag == "stop") {
196                this.setAttribute("data-play", "play");
197                $(slider).slick("slickPause");
198              } else {
199                this.setAttribute("data-play", "stop");
200                $(slider).slick("slickPlay");
201              }
202            });
203          }
204        }
205
206        $(".txt-wrapper").each(function (idx, elem) {
207          var height = $(elem).height();
208          if (maxHeight < height) {
209            maxHeight = height;
210          }
211        });
212        $(".txt-wrapper").height(maxHeight);
213      }
214    },
215
216    // /**
217    //  * Set up Key Visual01.
218    //  */
219    // setUpKeyVisual01: function () {
220    //   let kvList = $('.top_kv_area.kv-01 .top_kv_area-image-list').find('li');
221    //   kvList.addClass('fade-in-img');
222    // },
223
224    /**
225     * Set up Key Visual02.
226     */
227    setUpKeyVisual02: function () {
228      $(".lead-txt01, .lead-txt02, .lead-txt03, .lead-txt04, .lead-txt05, .lead-txt06, .kv-pitkun").addClass("fade-in");
229    },
230
231    /**
232     * Set up Main Slider.
233     */
234    setUpMainSliderSaigai: function () {
235      var trigger = ".js-sagai-slider";
236      var device = Common.checkDevice();
237      if (!$(trigger).length) {
238        return false;

239      }
240
241      var setSlider = function () {
242        if (device === "sp") {
243          $(trigger).slick({
244            autoplay: true,
245            autoplaySpeed: 5000,
246            draggable: true,
247            speed: 800,
248            fade: true,
249            infinite: true,
250          });
251        } else if (device === "pc") {
252          $(trigger).slick({
253            autoplay: true,
254            autoplaySpeed: 5000,
255            speed: 800,
256            fade: true,
257            infinite: true,
258            dots: true,
259          });
260        }
261      };
262      $(trigger).each(setSlider);
263    },
264  };
265
266  /* DOMContentLoaded. */
267  $(document).ready(Common.initialize().render, Common);
268  $(window).on({
269    /* Window on loaded. */
270    load: Common.initialize().onLoad,
271    /* Window on scroll. */
272    scroll: Common.initialize().scroll,
273    /* Window resized. */
274    resize: Common.initialize().resize,
275  });
276
277  $(function () {
278    //文字数制限
279    function textCut(selector, size) {
280      var afterTxt = "･･･";
281      selector.each(function () {
282        var textLength = $(this).text().length;
283        if (size < textLength) {
284          var textTrim = $(this).text().substr(0, size);
285          $(this).html(textTrim + afterTxt);
286        }
287      });
288    }
289    textCut($(".index_announce a"), "80");
290  });
291
292  $(function () {
293    $(".top_kv_area-image-list li:not(:first-child)").hide();
294    setInterval(function () {
295      $(".top_kv_area-image-list li:first-child").fadeOut("slow").next("li").fadeIn("slow").end().appendTo(".top_kv_area-image-list");
296    }, 4000);
297  });
298})(window.jQuery);