https://app.homeltd.jp/static/common/js/common.js?v=1685381247

1
2$(function(){
3
4    // ハンバーガーメニュー開閉
5    $('.navButton').on('click', function(){
6        $('.globalMenu__wrap').addClass('is-active')
7    });
8    $('.navCloseButton').on('click', function(){
9        $('.globalMenu__wrap').removeClass('is-active')
10    });
11
12    // leave スケジュール
13    $('.js-leaveDate').datepicker({
14        dateFormat: 'm月d日 DD',
15        dayNames: ['日', '月', '火', '水', '木', '金', '土'],
16    });
17    $('.js-nextDate').on('click', (e) => {
18        const parent = e.currentTarget.closest('.js-leaveSchedule');
19        const tag = $(parent).find('.js-leaveDate');
20        const d = tag.datepicker('getDate');
21        d.setDate(d.getDate() + 1);
22        const mm = (d.getMonth()+1);
23        const dd = (d.getDate());
24        const dayOfWeek = d.getDay();
25        const DD = [ "日", "月", "火", "水", "木", "金", "土" ][dayOfWeek];
26        // console.log(d);
27        // console.log(`${yy}/${mm}/${dd}`);
28        tag.datepicker('setDate', `${mm}月${dd}日 ${DD}`);
29    });
30    $('.js-prevDate').on('click', (e) => {
31        const parent = e.currentTarget.closest('.js-leaveSchedule');
32        const tag = $(parent).find('.js-leaveDate');
33        const d = tag.datepicker('getDate');
34        d.setDate(d.getDate() - 1);
35        const mm = (d.getMonth()+1);
36        const dd = (d.getDate());
37        const dayOfWeek = d.getDay();
38        const DD = [ "日", "月", "火", "水", "木", "金", "土" ][dayOfWeek];
39        // console.log(d);
40        // console.log(`${yy}/${mm}/${dd}`);
41        tag.datepicker('setDate', `${mm}月${dd}日 ${DD}`);
42    });
43
44
45    // タップするとフェードアウト
46    $('.js-information').on('click', function(){
47        console.log($(this)[0]);
48        $(this).removeClass('is-active');
49    });
50    // モーダル表示
51    $('.js-modalStart').on('click', (elem) => {
52        // 対象のモーダルを指定
53        const targetModal = elem.currentTarget.dataset.modal;
54        // console.log(elem.currentTarget.dataset.modal);
55
56        openModal(targetModal);
57    });
58    // モーダルコンテンツ変更
59    $('.js-modalChange').on('click', (elem) => {
60        // 対象のモーダルを指定
61        const targetModal = elem.currentTarget.dataset.modal;
62
63        changeModal(targetModal);
64    });
65    // モーダル非表示
66    $('.js-modalClose').on('click', () => {
67        closeModal();
68    });
69
70    // メッセージ表示
71    $('.js-messageStart').on('click', (elem) => {
72        // 対象のメッセージを指定
73        const targetMessage = elem.currentTarget.dataset.message;
74        openMessage(targetMessage);
75    });
76    // メッセージ非表示
77    $('.js-messageClose').on('click', () => {
78        closeMessage();
79    });
80
81    // セレクト表示
82    $('.js-selectStart').on('click', (elem) => {
83        // 対象のセレクトを指定
84        closeSelect();
85        const targetSelect = elem.currentTarget.dataset.select;
86        openSelect(targetSelect);
87    });
88    // セレクト非表示
89    $('.js-selectClose').on('click', (elem) => {
90
91        // オファー確認/未確認
92        const targetSelect = $(elem.currentTarget).parent()[0].dataset.select
93        if(targetSelect.indexOf('confirmSelect') != -1){
94            const value = $(elem.currentTarget).text();
95            $('[data-select="'+targetSelect+'"] .js-confirmSelectValue').text(value);
96        }
97
98        closeSelect();
99    });
100
101});
102
103// モーダル表示
104const openModal = (targetModal) => {
105    $('.js-modalContent[data-modal="'+targetModal+'"]').addClass('is-active');
106    $('.js-modal').addClass('is-active');
107};
108// モーダルコンテンツ変更
109const changeModal = (targetModal) => {
110    $('.js-modalContent').removeClass('is-active');
111    $('.js-modalContent[data-modal="'+targetModal+'"]').addClass('is-active');
112};
113// モーダル非表示
114const closeModal = () => {
115    $('.js-modalContent').removeClass('is-active');
116    $('.js-modal').removeClass('is-active');
117};
118
119// メッセージ表示
120const openMessage = (targetMessage) => {
121    $('.js-message[data-message="'+targetMessage+'"]').addClass('is-active');
122    // 2022.06.14 一定時間後に自動で消えるように修正
123    setTimeout(function(){
124        $('.js-message').delay(2000).removeClass('is-active');
125    }, 2000);
126};
127// メッセージ非表示
128const closeMessage = () => {
129    $('.js-message').removeClass('is-active');
130};
131
132// セレクト表示
133const openSelect = (targetSelect) => {

134    console.log(targetSelect);
135    $('.js-select[data-select="'+targetSelect+'"]').toggleClass('is-active');
136    console.log($('.js-select[data-select="'+targetSelect+'"]'));
137};
138// セレクト非表示
139const closeSelect = () => {
140    $('.js-select').removeClass('is-active');
141};
142
143// 日付
144const inputDate = (targetId) => {
145    $(targetId).datepicker({
146        dateFormat: 'yy.mm.dd',
147        changeMonth: true,
148        changeYear: true,
149        maxDate: '+1m',
150        yearRange: '-80:+1',
151    });
152};
153const inputDate_range = (targetId, max_date) => {
154    $(targetId).datepicker({
155        dateFormat: 'yy.mm.dd',
156        changeMonth: true,
157        changeYear: true,
158        maxDate: max_date,
159        yearRange: '-80:+1',
160    });
161};
162
163// 画像反映
164const inputImage = (startId, tagClass) => {
165    $(startId).on('change', function (e) {
166        var reader = new FileReader();
167        reader.onload = function (e) {
168            $(tagClass).attr('src', e.target.result).addClass('is-active');
169        }
170        reader.readAsDataURL(e.target.files[0]);
171    });
172};
173
174
175// iOS判定
176function is_iOS() {
177    return (navigator.userAgent.indexOf('iPhone;') > -1 || navigator.standalone != undefined ) ? true : false; 
178}
179
180
181// Validation
182const formValid = (e) => {
183    const form = $(e.currentTarget).parent();
184    console.log(form);
185
186    let result = [];
187
188    // InputのValue確認
189    const inputAry = form.find('input');
190    inputAry.each(i => {
191        result.push(validInput(inputAry[i]));
192    });
193
194    // textAreaのValue確認
195    const textAreaAry = form.find('textarea');
196    textAreaAry.each(i => {
197        result.push(validTextArea(textAreaAry[i]));
198    });
199
200    // SelectのValue確認
201    const selectAry = form.find('select');
202    selectAry.each(i => {
203        result.push(validSelect(selectAry[i]));
204    });
205
206    // Falseの場合エラーメッセージを表示する
207    result.forEach(item => {
208        // const item = result[i];
209        const text = '※必須項目です。';
210        if(!item['value']){
211            $(item['elem']).closest('.inputWrap').append(`<div class="valid"><div class="valid__innerWrap">${text}</div>`);
212        }
213    });
214
215    // console.log(result);
216    let returnResult = true;
217    result.forEach(item => {
218        if(item.value){
219            console.log('foreach TRUE',item.value);
220        }else{
221            console.log('foreach FALSE',item.value);
222            $(item.elem).closest('.inputWrap').addClass('is-valid');
223            returnResult = false;

224        }
225    });
226
227    return returnResult;
228};
229const validInput = (val) => {
230    if(val.required === true){
231        return {'elem': val, 'value': val.value != ''};
232    }else{
233        return {'elem': val, 'value': true};
234    }
235};
236const validTextArea = (val) => {
237    if(val.required === true){
238        return {'elem': val, 'value': val.value != ''};
239    }else{
240        return {'elem': val, 'value': true};
241    }
242};
243const validSelect = (val) => {
244    if(val.required === true){
245        return {'elem': val, 'value': val.value != ''};
246    }else{
247        return {'elem': val, 'value': true};
248    }
249};
250const removeValid = (e) => {
251    const tagWrap = e.currentTarget.closest('.inputWrap');
252    const tag = $(tagWrap).find('.valid');
253    tag.remove();
254    $(tagWrap).removeClass('is-valid');
255};
256
257
258var slideidx = 0;
259var slidecallback = null;
260// SLIDE
261const simpleSlider = (wrapClass, targetClass, itemClass, nextButton, prevButton, slideDot) => {
262    // スライド
263    $(`.${targetClass}`).css('transform', 'translateX(0px)');
264    $(`.${targetClass}`).css('transition', 'transform 0.2s ease');
265
266    var slideLength = $(`.${wrapClass} .${itemClass}`).length;
267    $(`.${nextButton}`).on('click', function(){
268        const targetWrap = $(this).parent().children(`.${targetClass}`);
269        nextSlide(targetWrap);
270    });
271    $(`.${prevButton}`).on('click', function(){
272        const targetWrap = $(this).parent().children(`.${targetClass}`);
273        prevSlide(targetWrap);
274    });
275
276/*
277    // フリックとボタンせんたくどうさがうまくいかなかったのでコメントアウト
278    $(`.${targetClass}`).on({
279
280        // フリック開始時
281        'touchstart': function(e) {
282            this.touchX = event.changedTouches[0].pageX;
283            this.slideX = $(this).position().left;
284            this.slidestart = this.slideX;
285            $(this).css('transition', 'none');
286        },
287        // フリック中
288        'touchmove': function(e) {
289            e.preventDefault();
290            this.slideX = this.slideX - (this.touchX - event.changedTouches[0].pageX );
291            this.touchX = event.changedTouches[0].pageX;
292            $(this).css('transform', `translateX(${this.slideX}px)`);
293        },
294        // フリック終了
295        'touchend': function(e) {
296            const slide = this.slidestart - this.slideX;
297            console.log("slide " + slide);
298
299            if(slide > 0){
300                nextSlide($(this));
301            }else{
302                prevSlide($(this));
303            }
304            $(this).css('transition', 'transform 0.2s ease');
305        }
306    });
307    */
308    const nextSlide = (e) => {
309    slideidx++;
310    slideLength = $(`.${wrapClass} .${itemClass}`).length;
311    console.log(slideidx + "/" + slideLength);
312        const slideWidth = e.width();
313        let matrix = matrix2d(e.css('transform'));
314        const nowScroll = Math.trunc(-matrix[4] / slideWidth);
315        let scroll
316        let dot
317
318        if(slideidx >= slideLength ){
319            scroll = 0;
320            dot = 0;
321            slideidx = 0;
322        }else{
323//            scroll = (nowScroll + 1) * slideWidth;
324            scroll = slideidx * slideWidth;
325            dot = nowScroll + 1;
326        }
327 //       dotChange(`${slideDot}`, dot);
328        e.css('transform', `translateX(-${scroll}px)`);
329
330        if(slidecallback!=null){
331            slidecallback(slideidx);
332        }
333    };
334    const prevSlide = (e) => {
335    slideidx--;
336    slideLength = $(`.${wrapClass} .${itemClass}`).length;
337    console.log(slideidx + "/" + slideLength);
338
339        const slideWidth = e.width();
340        let matrix = matrix2d(e.css('transform'));
341        const nowScroll = Math.ceil(-matrix[4] / slideWidth);
342        let scroll
343        let dot
344        if(slideidx < 0){
345//            slideidx--;
346            slideidx = slideLength-1;
347            scroll = slideidx * slideWidth * 1;
348            dot = slideLength - 1;
349
350        }else{
351            scroll = slideidx * slideWidth * 1;
352            dot = nowScroll - 1;
353//            slideidx--;
354        }
355//        dotChange(`${slideDot}`, dot);
356        console.log(slideidx + "/" + slideLength);
357        console.log("-scroll" + (-scroll));
358        e.css('transform', `translateX(-${scroll}px)`);
359        if(slidecallback!=null){
360            slidecallback(slideidx);
361        }
362
363    };
364    const dotChange = (className, i) => {
365        $(`.${className}`).removeClass('is-active');
366        $(`.${className}`).eq(i).addClass('is-active');
367    };
368
369    const matrix2d = (v) => {
370        val = v.split('(')[1];
371        val = val.split(')')[0];
372        val = val.split(', ');
373        return val;
374    };
375};