https://n-works.link/wp_2309/wp-content/themes/nworks/assets/js/pages/post.js

1import { CarouselForm, initCarouselFormrun } from '../forms/CarouselForm.js'
2import { DownloadBannerForm } from '../forms/DownloadBannerForm.js'
3import { MailMagazineForm } from '../forms/MailMagazineForm.js'
4import { InterstitialBanner } from '../modules/interstitialBanner.js'
5import { initBasicSlider } from '../modules/slider.js'
6import { PopupBanner } from '../modules/popupBanner.js'
7import { TOC } from '../modules/toc.js'
8
9document.addEventListener('DOMContentLoaded', () => {
10  initBasicSlider()
11
12  // Download Banner Form
13  const downloadBannerFormElement = document.querySelector(
14    '.js-download-banner-form'
15  )
16
17  if (downloadBannerFormElement) {
18    const submitButton = downloadBannerFormElement.querySelector(
19      '.js-download-banner-form__submit'
20    )
21
22    const downloadBannerForm = new DownloadBannerForm(
23      {
24        company: downloadBannerFormElement.querySelector(
25          '.js-download-banner-form__company'
26        ),
27        lastname: downloadBannerFormElement.querySelector(
28          '.js-download-banner-form__lastname'
29        ),
30        email: downloadBannerFormElement.querySelector(
31          '.js-download-banner-form__email'
32        ),
33        phone: downloadBannerFormElement.querySelector(
34          '.js-download-banner-form__phone'
35        ),
36        price_pulldown: downloadBannerFormElement.querySelector(
37          '.js-download-banner-form__price_pulldown'
38        ),
39      },
40      {
41        portalID: 7977366,
42        formID: downloadBannerInfo[1],
43      }
44    )
45
46    if (submitButton) {
47      submitButton.addEventListener('click', (event) => {
48        if (downloadBannerForm.checkInvalid()) return
49
50        submitButton.classList.add('loading')
51        document.querySelector('.download-banner-button__text').textContent =
52          '送信中。。'
53
54        downloadBannerForm.prepareFormData(
55          event,
56          downloadBannerInfo[0],
57          'thanks-pdf-download'
58        )
59      })
60    }
61  }
62
63  // toc
64  const toc = document.getElementById('toc_container')
65
66  if (toc) {
67    const handler = toc.querySelector('.toc_title')
68    const content = toc.querySelector('.toc_list')
69
70    new TOC(toc, handler, content)
71  }
72
73  // writer card
74  const writerCards = document.querySelectorAll('.js-author')
75
76  if (writerCards.length !== 0) {
77    writerCards.forEach((card) => {
78      const description = card.querySelector('.js-author__desc')
79      const moreButton = card.querySelector('.js-author__more')
80      if (description && description.getBoundingClientRect().height > 78) {
81        card.classList.add('hidden')
82      }
83
84      moreButton.addEventListener('click', () => {
85        card.classList.remove('hidden')
86      })
87    })
88  }
89
90  // ポップアップバナー
91  const popupBannerElement = document.querySelector('.js-popup-banner')
92
93  if (popupBannerElement) {
94    new PopupBanner(popupBannerElement)
95  }
96
97  // Interstitial banner
98  const interstitialBannerElement = document.querySelector(
99    '.js-interstitial-banner'
100  )
101  if (interstitialBannerElement) {
102    new InterstitialBanner(interstitialBannerElement)
103  }
104
105  // Carousel Form
106  const carouselFormElements = Array.from(
107    document.querySelectorAll('.js-carousel-form')
108  )
109
110  if (carouselFormElements.length !== 0) {
111    carouselFormElements.forEach((form) => {
112      const submitButton = form.querySelector('.js-carousel-form-submit')
113      const nextButton = form.querySelector('.js-carousel-form-next')
114      const returnButton = form.querySelector('.js-carousel-form-return')
115
116      const carouselForm = new CarouselForm(
117        form,
118        {
119          lastname: form.querySelector('.js-carousel-form__lastname'),
120          email: form.querySelector('.js-carousel-form__email'),
121          phone: form.querySelector('.js-carousel-form__phone'),
122          company: form.querySelector('.js-carousel-form__company'),
123          price_pulldown: form.querySelector('.js-carousel-form__price_pulldown'),
124        },
125        {
126          portalID: 7977366,
127          formID: form.dataset.formId,
128        }
129      )
130
131      if (returnButton) {
132        returnButton.addEventListener('click', () => {
133          carouselForm.return()
134          carouselForm.setTabindex()
135        })
136      }
137
138      if (nextButton) {
139        nextButton.addEventListener('click', () => {
140          const currentItem = carouselForm.validateItem()

141          if (!currentItem.invalid) {
142            carouselForm.next()
143            carouselForm.setTabindex()
144          }
145        })
146      }
147
148      if (submitButton) {
149        submitButton.addEventListener('click', (event) => {
150          const currentItem = carouselForm.validateItem()
151          if (!currentItem.invalid && !carouselForm.checkInvalid()) {
152            carouselForm.prepareFormData(
153              event,
154              form.dataset.formName,
155              'thanks-pdf-download'
156            )
157          }
158        })
159      }
160    })
161  }
162
163  // formrun版カルーセルフォーム（ステップ送りのみJS、送信はformrun SDK）
164  initCarouselFormrun()
165
166  // メールマガジンフォーム
167  const mailMagazineFormElements = document.querySelectorAll(
168    '.js-mail-magazine-form'
169  )
170
171  if (mailMagazineFormElements.length !== 0) {
172    mailMagazineFormElements.forEach((element) => {
173      const submitButton = element.querySelector('.js-mail-magazine-submit')
174      const mailMagazineForm = new MailMagazineForm(
175        { email: element.querySelector('.js-mail-magazine-form__email') },
176        {
177          portalID: 7977366,
178          formID: '02a524d4-ec57-49f9-b452-98dc3340dffe',
179        }
180      )
181
182      if (submitButton) {
183        submitButton.addEventListener('click', (event) => {
184          if (!mailMagazineForm.checkInvalid()) {
185            mailMagazineForm.prepareFormData(event, 'thanksweb-pro')
186          }
187        })
188      }
189    })
190  }
191
192  // Expandable Image
193  const expandableImages = Array.from(
194    document.querySelectorAll('.js-expandable-image')
195  )
196
197  if (expandableImages.length !== 0) {
198    expandableImages.forEach((element) => {
199      const showButtons = element.querySelectorAll(
200        '.js-expandable-image-action'
201      )
202      const dialog = element.querySelector('.js-expandable-image-dialog')
203
204      showButtons.forEach((button) => {
205        button.addEventListener('click', () => {
206          dialog.showModal()
207        })
208      })
209
210      dialog.addEventListener('click', () => {
211        dialog.close()
212      })
213    })
214  }
215})