https://izna-official.jp/files/4/n196/assets/js/izna.common.js

1'use strict';
2const SCRIPT_UTILITY = {
3  $window: $(window),
4  $document: $(document),
5  $html: $('html'),
6  $body: $('body'),
7
8  vh: window.innerHeight,
9  svh: window.innerHeight,
10  lvh: window.outerHeight,
11  vw: window.innerWidth,
12  documentRoot: document.documentElement,
13  mq: {
14    hov: () => {
15      return matchMedia('(hover: hover) and (pointer: fine)').matches;
16    },
17    land: () => {
18      return matchMedia('(orientation: landscape)').matches;
19    },
20    pc: function () {
21      let breakpoint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 961;
22      return matchMedia('(min-width:'.concat(breakpoint, 'px)')).matches;
23    },
24  },
25  zeroPadding(num) {
26    let length = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
27    return String(num).padStart(length, '0');
28  },
29  getParameterByName(name) {
30    let url = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : location.search;
31    const searchParams = new URLSearchParams(url);
32    return searchParams.get(name);
33  },
34  userAgent: {
35    setup() {
36      var _navigator;
37      const ua = (_navigator = navigator) === null || _navigator === void 0 || (_navigator = _navigator.userAgent) === null || _navigator === void 0 ? void 0 : _navigator.toLowerCase();
38      if (ua.indexOf('iphone') > 0 || (ua.indexOf('android') > 0 && ua.indexOf('mobile') > 0)) {
39        this.ua = 'sp';
40        if (ua.indexOf('iphone') > 0) {
41          this.os = 'iOS';
42        }
43        if (ua.indexOf('android') > 0) {
44          this.os = 'android';
45        }
46      } else if (ua.indexOf('ipad') > 0 || ua.indexOf('android') > 0) {
47        this.ua = 'sp';
48        if (ua.indexOf('ipad') > 0) {
49          this.os = 'iOS';
50        }
51        if (ua.indexOf('android') > 0) {
52          this.os = 'android';
53        }
54      } else {
55        this.ua = 'pc';
56        this.os = 'pc';
57      }
58      if (ua.indexOf('windows nt') !== -1) {
59        this.os = 'win';
60      } else if (this.ua === 'pc' && ua.indexOf('mac os x') !== -1) {
61        this.os = 'mac';
62      }
63
64      if (ua.indexOf('msie') !== -1 || ua.indexOf('trident') !== -1) {
65        this.browser = 'ie';
66      } else if (ua.indexOf('edge') !== -1) {
67        this.browser = 'html_edge';
68      } else if (ua.indexOf('edg') !== -1) {
69        this.browser = 'edge';
70      } else if (ua.indexOf('chrome') !== -1) {
71        this.browser = 'chrome';
72      } else if (ua.indexOf('safari') !== -1) {
73        this.browser = 'safari';
74      } else if (ua.indexOf('firefox') !== -1) {
75        this.browser = 'firefox';
76      } else {
77        this.browser = 'other';
78      }
79
80      SCRIPT_UTILITY.$html.attr('data-ua', this.ua);
81      SCRIPT_UTILITY.$html.attr('data-os', this.os);
82      SCRIPT_UTILITY.$html.attr('data-browser', this.browser);
83    },
84  },
85  setHeight() {
86    let forced = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
87    if (forced || SCRIPT_UTILITY.userAgent.ua === 'pc' || SCRIPT_UTILITY.vw !== window.innerWidth) {
88      SCRIPT_UTILITY.svh = window.innerHeight;
89    }
90    SCRIPT_UTILITY.vh = window.innerHeight;
91    SCRIPT_UTILITY.vw = window.innerWidth;
92    SCRIPT_UTILITY.lvh = window.outerHeight;
93    // SCRIPT_UTILITY.documentRoot.style.setProperty('--vw', `${SCRIPT_UTILITY.vw}px`);
94    SCRIPT_UTILITY.documentRoot.style.setProperty('--vh', ''.concat(SCRIPT_UTILITY.vh, 'px'));
95    SCRIPT_UTILITY.documentRoot.style.setProperty('--svh', ''.concat(SCRIPT_UTILITY.svh, 'px'));
96    // SCRIPT_UTILITY.documentRoot.style.setProperty('--lvh', `${SCRIPT_UTILITY.lvh}px`);
97  },
98  delay: function () {
99    let time = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 100;
100    return new Promise((resolve) => setTimeout(async () => resolve(), time));
101  },
102  init() {
103    this.userAgent.setup();
104    this.setHeight();
105    window.addEventListener('load', () => {
106      this.setHeight();
107    });
108    window.addEventListener('resize', () => {
109      this.setHeight();
110    });
111    window.addEventListener('orientationchange', () => {
112      this.setHeight(true);
113    });

114  },
115};
116SCRIPT_UTILITY.init();
117
118(() => {
119  const {$document, $window, $body, $html, vh, svh, lvh, vw, mq, documentRoot, zeroPadding, getParameterByName, userAgent, setHeight, delay} = SCRIPT_UTILITY;
120
121  $document.ready(() => {
122    $body.addClass('is-ready');
123  });
124
125  $window
126    .on('load', () => {
127      $body.addClass('is-load');
128      setHeight();
129
130      Menu.init();
131      Scroll.init();
132      Title.init();
133      ScrollEffect.init();
134      Drawer.init();
135    })
136    .on('resize', () => {
137      setHeight();
138    })
139    .on('orientationchange', () => {
140      setHeight(true);
141    });
142
143  const Menu = {
144    config: {
145      wrap: '.js-wrap',
146      btn: '.js-menu',
147      area: 'js-menu-area',
148      open: '.js-menu-open',
149      close: '.js-menu-close',
150    },
151    param: {
152      timer: 500,
153      duration: 500,
154    },
155    state: {
156      isDone: true,
157      open: false,
158    },
159    timer: undefined,
160    toggle() {
161      if (!this.state.open) {
162        this.open();
163      } else {
164        this.close();
165      }
166    },
167    open() {
168      if (!this.state.open) {
169        clearTimeout(this.timer);
170        this.state.open = true;
171        $body.addClass('is-menu-show');
172        setTimeout(() => {
173          $body.addClass('is-menu-open');
174        }, 10);
175      }
176    },
177    close() {
178      if (this.state.open) {
179        this.state.open = false;
180        $body.addClass('is-menu-close');
181        $body.removeClass('is-menu-open');
182        this.timer = setTimeout(() => {
183          $body.removeClass('is-menu-close');
184          $body.removeClass('is-menu-show');
185        }, this.param.duration);
186      }
187    },
188    closeLeave() {
189      if (this.state.open) {
190        $body.removeClass('is-menu-open');
191        this.timer = setTimeout(() => {
192          $body.removeClass('is-menu-show');
193        }, this.param.duration);
194      }
195    },
196    closeBg() {
197      if (this.state.open) {
198        this.state.open = false;
199        $body.addClass('is-menu-close');
200        this.timer = setTimeout(() => {
201          $body.removeClass('is-menu-close');
202        }, this.param.duration);
203      }
204    },
205    click() {
206      $($body).on('click keydown', '.js-menu', (e) => {
207        if (e.type === 'click' || e.key === 'Enter') this.toggle();
208      });
209      $($body).on('click keydown', '.js-menu-open', (e) => {
210        if (e.type === 'click' || e.key === 'Enter') this.open();
211      });
212      $($body).on('click keydown', '.js-menu-close', (e) => {
213        if (e.type === 'click' || e.key === 'Enter') this.close();
214      });
215    },
216    init() {
217      this.click();
218    },
219  };
220  const Scroll = {
221    config: {
222      elem: '[data-anchor]',
223      hasClass: 'js-scroll-animation',
224    },
225    parameter: {
226      speed: 1000,
227      easing: 'easeOutQuart',
228    },
229    data(e) {
230      const dataScroll = typeof e === 'string' ? e : e.attr('data-anchor');
231      const offsetData = typeof e === 'string' ? 0 : isNaN(parseFloat(e.attr('data-anchor-offset'))) ? e.attr('data-anchor-offset') : parseFloat(e.attr('data-anchor-offset'));
232      let offset = 0;
233      if (typeof offsetData === 'string') {
234        offset = $(offsetData).innerHeight();
235      } else if (typeof offsetData === 'number') {
236        offset = offsetData;
237      }
238      let destination = dataScroll;
239      if (dataScroll === 'top') {
240        destination = 'body';
241      }
242      if ($(destination).length > 0) {
243        const scrollHeight = $(destination).offset().top;
244        this.scroll(scrollHeight, offset);
245      }
246    },
247    hash(e) {
248      let href = $(e).attr('href');
249      let target = $(href == '#' || href === '' ? 'html' : href);
250      let position = target.offset().top;
251      this.scroll(position);
252    },
253    scroll(position, offset) {
254      $body.addClass('is-scroll');
255      $('html,body')
256        .stop()
257        .animate(
258          {
259            scrollTop: position,
260          },
261          this.parameter.speed,
262          this.parameter.easing,
263          () => {
264            $body.removeClass('is-scroll');
265          }
266        );
267    },
268    click() {
269      $body.on('click keydown', this.config.elem, (e) => {
270        if (e.type === 'click' || e.key === 'Enter') this.data($(e.currentTarget));
271      });
272    },
273    anchor() {
274      const _anchor = getParameterByName('scroll');
275      if (_anchor) {
276        this.data('#'.concat(_anchor));
277      }
278    },
279    init() {
280      this.anchor();
281      this.click();
282    },
283  };
284  const Drawer = {
285    setup() {
286      this.$area.each((i, el) => {
287        $(el)
288          .find('.js-drawer_btn')
289          .on('click', () => {
290            this.open(el);
291          });
292      });
293    },
294    open(el) {
295      clearTimeout(this.timer);
296      $(el).find('.js-drawer_content').stop().slideToggle(400);
297      $(el).toggleClass('is-drawer-open');
298    },
299    init() {
300      this.$area = $('.js-drawer');
301      if (this.$area.length > 0) {
302        this.setup();
303      }
304    },
305  };
306  const ScrollEffect = {
307    app: undefined,
308    setup() {
309      this.app = new SCROLL_EFFECT_MODULE({
310        target: '[data-scroll-point]',
311        classNameInview: 'is-scroll-active',
312        ratio: 0.9, // 判定する比率を指定（ウィンドウ高さを1として指定）
313        reverse: true, // スクロールを戻した時にクラスを削除するかどうか
314        ratioReverse: 1, // 戻る際の判定比率を指定（ウィンドウ高さを1として指定）

315        firstDelay: 100, // 初回動作までの遅延時間（ms）
316        autoStart: true, // 自動でスタートするかどうか
317        autoStartType: 'load', // ready, load, scroll
318        throttleInterval: 5,
319        on: {
320          Change: (obj, index, name) => {},
321          In: (obj, index, name) => {},
322          Out: (obj, index, name) => {},
323          Scroll: (_y) => {},
324        },
325      });
326    },
327    init() {
328      this.setup();
329    },
330  };
331  const Title = {
332    separateSpan: (text, cls) => {
333      let _text = '';
334      text.split('').forEach((t) => {
335        _text += '<span>'.concat(t.replace(/\s/g, '&nbsp;'), '</span>');
336      });
337      return _text;
338    },
339    setup() {
340      this.$title.each((i, el) => {
341        const $el = $(el);
342        const text = $el.text();
343        $el.html(this.separateSpan(text));
344        setTimeout(() => {
345          $el.addClass('is-title-load');
346        }, 500);
347      });
348    },
349    init() {
350      this.$title = $('.js-title');
351      this.setup();
352    },
353  };
354})();