%PDF-
%PDF-
Mini Shell
Mini Shell
import 'regenerator-runtime/runtime.js'
import { ajax, htmlToElement, toggleClass } from '../utils/helpers'
import PrivacyPolicyForm from './privacy-policy-form'
import ExtendCodeMirror from '../utils/codemirror'
export default class Wizard {
constructor (mirror) {
this.setProperties()
this.codeMirror = mirror
const self = this
window.addEventListener('load', () => {
self.init()
this.PrivacyPolicyForm = new PrivacyPolicyForm()
})
}
setProperties () {
this.activeClass = 'active'
this.hideClass = 'hide'
this.root = document.querySelector('#wp-gdpr-fts')
this.stepContainer = document.querySelector('#step-container')
this.buttonConatiner = document.querySelector('#step-to-buttons')
this.nextButtons = document.querySelectorAll('button[data-step="next"]')
this.prevButtons = document.querySelectorAll('button[data-step="prev"]')
this.doneButtons = document.querySelectorAll('a[data-step="done"]')
this.userTypeRadios = document.querySelectorAll('input[type="radio"]')
this.signup = document.querySelector('#signup')
this.signUpLink = document.querySelector('#signuplink')
this.forType = document.querySelectorAll('[data-for="personal"], [data-for="business"]')
this.doneBar = document.querySelector('.wizard--bar--done')
this.wizardBar = document.querySelector('.wizard--bar')
// Elements have to be created first.
this.stepButtons = []
this.activeStep = 0
this.numberOfsteps = 0
this.activeStepElement = null
}
/**
* check if everything is where it is supposed to be and start the slider.
*/
init () {
if (!this.root) {
// Stopped because root element does not exist in the current dom.
return
}
if (!window.wpgdprcAdmin) {
console.dir('Stopped because localization data was not found.')
return
}
this.ajaxUrl = wpgdprcAdmin.ajaxUrl
this.ajaxNonce = wpgdprcAdmin.ajaxNonce
this.ajaxArg = wpgdprcAdmin.ajaxArg
this.locale = wpgdprcAdmin.locale
this.initSteps()
this.initStepButtons()
this.initNext()
this.initPrev()
this.initBar()
this.checkHash()
this.userType()
window.addEventListener('popstate', () => {
this.checkHash()
})
}
/**
* Initialize all the steps and generate the step to buttons.
*/
initSteps () {
const steps = this.stepContainer.querySelectorAll('.step')
this.numberOfsteps = steps.length - 1
steps.forEach((el, i) => {
el.dataset.stepId = i
this.buttonConatiner.appendChild(htmlToElement(`
<button class="btn" data-step-to="${i}">
${el.dataset.title || ''}
</button>
`))
})
this.stepButtons = document.querySelectorAll('button[data-step-to]')
}
/**
* Click actions for the step to buttons.
*/
initStepButtons () {
this.stepButtons.forEach(pageLink => {
pageLink.addEventListener('click', event => {
event.preventDefault()
const link = event.currentTarget
const stepId = link.dataset.stepTo
if (!Number.isInteger(parseInt(stepId, 10))) {
console.dir(`Could not go to step ${stepId} because that is not a valid id.`)
return
}
this.stepTo(stepId)
})
})
}
/**
* Init next buttons.
*/
initNext () {
const self = this
self.nextButtons.forEach((nextButton) => {
nextButton.addEventListener('click', async event => {
event.preventDefault()
// Handle form submission
const canContinue = await this.handleForms()
if (!canContinue) {
return
}
const goto = parseInt(self.activeStep, 10) + 1
if (goto > self.numberOfsteps) {
console.dir(`Could not go to id ${goto} there are only ${self.numberOfsteps} steps`)
return
}
self.stepTo(goto)
})
})
}
/**
* Init the prev buttons. No form check needed.
*/
initPrev () {
this.prevButtons.forEach((prevButton) => {
prevButton.addEventListener('click', event => {
event.preventDefault()
const goto = parseInt(this.activeStep, 10) - 1
if (goto < 0) {
console.dir(`Could not goto step ${goto} because here are not that many pages.`)
return
}
this.stepTo(goto)
})
})
}
/**
* User type switch.
*/
userType () {
this.userTypeRadios.forEach((radio) => {
radio.addEventListener('change', () => {
this.signup.classList.remove('hide')
this.setNextButtonDisabled(radio.value !== 'personal')
this.forType.forEach((element) => {
if (radio.value === element.dataset.for) {
element.classList.remove('hide')
} else {
element.classList.add('hide')
}
})
})
})
this.signUpLink.addEventListener('click', () => {
this.setNextButtonDisabled(false)
})
}
/**
* Look for form and try to submit them
* @returns {boolean|*}
*/
async handleForms () {
const form = this.getActiveStepElement().querySelector('form')
const formWrapper = this.getActiveStepElement().querySelector('.step__form-wrapper')
if (!form || !formWrapper) {
return true
}
const action = formWrapper.dataset.action
if (!action) {
return true
}
if (!form.reportValidity()) {
return false
}
this.codeMirror.saveMirrors()
return await this.submitForm(form, action)
}
/**
* Submit form via ajax instead of doc request.
* @param form
* @param action
* @returns {Promise<boolean>}
*/
async submitForm (form, action) {
const data = jQuery(form).serializeArray()
// eslint-disable-next-line no-param-reassign
.reduce((a, x) => {
a[x.name] = x.value
return a
}, {})
this.setLoading(true)
return await ajax(this.ajaxUrl, {
[this.ajaxArg]: this.ajaxNonce,
locale: this.locale,
action,
...data
}, 'POST').then(response => {
return response.json()
}).then(response => {
this.setLoading(false)
const success = typeof response.success !== 'undefined' ? response.success : false
if (!success) {
throw new Error()
}
this.setActiveFormContent(response.form)
this.resetElements()
return true
}).catch(error => {
console.error(error)
alert('Something went wrong please try again later.')
this.setLoading(false)
return false
})
}
/**
* Replace the active form
* @param content
*/
setActiveFormContent (content) {
const formWrapper = this.getActiveStepElement().querySelector('.step__form-wrapper')
formWrapper.textContent = ''
formWrapper.appendChild(htmlToElement(content))
}
/**
* Reset all form elements which need some js handles to function properly.
*/
resetElements () {
this.codeMirror = new ExtendCodeMirror()
this.PrivacyPolicyForm = new PrivacyPolicyForm()
}
/**
* Change all elements to reflect the new loading state.
* @param status
* @returns {*}
*/
setLoading (status) {
const spinners = Array.from(this.nextButtons).map(button => button.querySelector('.spinner'))
spinners.forEach((spinner) => {
toggleClass(spinner, this.hideClass, !status)
})
if (status === false) {
return this.updateButtons()
}
const buttons = [].concat(this.nextButtons, this.prevButtons, this.stepButtons)
buttons.forEach((button) => {
button.disabled = status
})
}
/**
* @returns {null|*}
*/
getActiveStepElement () {
return this.activeStepElement
}
/**
* Try to goto the hash in the url if it is an valid page id.
*/
checkHash () {
if (!window.location.hash) {
this.stepTo(0)
return
}
let hashId = window.location.hash
hashId = hashId.replace('#', '')
hashId = parseInt(hashId, 10)
if (!Number.isInteger(hashId)) {
hashId = 0
}
this.stepTo(hashId, true)
}
/**
* Step to the id.
*
* When it is via a history back event dont update the hash because that has already been done.
*
* @param id
* @param ignoreHash
*/
stepTo (id, ignoreHash = false) {
// step to next page.
const step = document.querySelector(`[data-step-id='${id}']`)
if (!step) {
console.dir(`Step ${id} does not exist.`)
return
}
this.setActiveStep(step)
this.updateButtons(parseInt(id, 10))
this.stepToAction(step)
this.codeMirror.refreshMirrors()
// add id to the url for page reloads.
if (!ignoreHash) {
window.history.pushState({ id }, '', '#' + id)
}
this.activeStep = id
this.setDone()
}
/**
* Check the action on step to.
* @param step
*/
stepToAction (step) {
if (step.dataset.action === 'disable') {
this.setNextButtonDisabled(true)
}
}
/**
* Set disabled status for all next buttons.
* @param status
*/
setNextButtonDisabled (status) {
this.nextButtons.forEach((button) => {
button.disabled = status
})
}
/**
* Set the active hash to the current step.
* @param element
*/
setActiveStep (element) {
const activeSteps = document.querySelectorAll(`[data-step-id].${this.activeClass}`)
activeSteps.forEach(el => {
el.classList.remove(this.activeClass)
})
element.classList.add(this.activeClass)
this.activeStepElement = element
}
/**
* Update all the buttons statuses and display props.
* @param id
*/
updateButtons (id = -1) {
if (id === -1) {
id = this.activeStep
}
const disabled = document.querySelectorAll('button[data-step-id][disabled],button[data-step][disabled],button[data-step].hide,button[data-step-to][disabled]')
disabled.forEach(element => {
element.disabled = false
element.classList.remove(this.hideClass)
})
const active = document.querySelectorAll(`button[data-step-to].${this.activeClass}`)
active.forEach(element => {
element.classList.remove(this.activeClass)
})
this.doneButtons.forEach(element => {
element.classList.add(this.hideClass)
})
if (id === 0) {
this.prevButtons.forEach(element => {
element.disabled = true
})
}
if (id === this.numberOfsteps) {
this.nextButtons.forEach(element => {
element.classList.add(this.hideClass)
})
this.doneButtons.forEach(element => {
element.classList.remove(this.hideClass)
})
}
const current = document.querySelectorAll(`button[data-step-to="${id}"]`)
current.forEach(element => {
element.classList.add(this.activeClass)
})
const afterButtons = document.querySelectorAll('button.active[data-step-to] ~ button[data-step-to]')
afterButtons.forEach(element => {
element.disabled = true
})
}
/**
* Set the loading bar percentage
*/
setDone () {
this.doneBar.style.width = `${(this.activeStep / this.numberOfsteps) * 100}%`
}
/**
* Set the with of the bar based on the number of steps.
*/
initBar () {
this.wizardBar.style.width = `${this.numberOfsteps === 4 ? 80 : 75}%`
}
}
Zerion Mini Shell 1.0