Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • painel-pnld/ds-gov-componentes-react
1 result
Show changes
Commits on Source (5)
......@@ -20,10 +20,11 @@ import Select from './Components/Select';
import SignIn from './Components/SignIn';
import MagicButton from './Components/MagicButton';
import Switch from './Components/Switch';
import Upload from './Components/Upload';
import Tab from './Components/Tab';
import Tag from './Components/Tag';
import Textarea from './Components/Textarea';
import Wizard from './Components/Wizard';
import React, { useState, useEffect } from 'react';
......@@ -51,16 +52,16 @@ function App() {
const warn = <div>
{/* <span className="feedback danger" role="alert"><i className="fas fa-times-circle" aria-hidden="true"></i>Preenchimento Obrigatório</span> */}
</div>
</div>
let test_button = <button className="br-button circle small" type="button" aria-label="Mostrar senha"><i className="fas fa-eye" aria-hidden="true"></i>
</button>
let test_button2 = <div> <button className="br-button circle" type="button"><i className="fas fa-city" aria-hidden="true"></i>
</button>
</div>
let test_button3 = <button className="br-button" type="button">Cancelar
</button>
......@@ -113,6 +114,16 @@ function App() {
let test_count2={'type':'warning','ammo':182,'maxAmmo':999}
let test_count3={'type':'success','ammo':1266,'maxAmmo':999}
let wizard_text = <div className="text">Conteúdo aqui - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
let test_wizard = [
{'title':'Conteúdo 1', 'panel_content': [wizard_text], 'class': 'info', 'active': 'active', 'aria_label': 'label 1'},
{'title':'Conteúdo 2', 'panel_content': [wizard_text], 'class': 'info', 'active': '', 'aria_label': 'label 2'},
{'title':'Conteúdo 3', 'panel_content': ['texto 3'], 'class': 'info', 'active': '', 'aria_label': 'label 3'},
{'title':'Conteúdo 4', 'panel_content': ['texto 4'], 'class': 'info', 'active': '', 'disabled': 'disabled', 'aria_label': 'label 4'},
{'title':'Conteúdo 5', 'panel_content': ['texto 5'], 'class': 'info', 'active': '', 'aria_label': 'label 5'},
]
return (
<div className="App">
......@@ -152,19 +163,22 @@ function App() {
<h2>Pagination padrão</h2>
<Pagination npages={6} links={test_links} ></Pagination>
<h2>Select simples</h2>
<Select options={test_select} message={test_message} ></Select>
<h2>SignIn</h2>
<SignIn type={1} text={'Ontrar'} ></SignIn>
<h2>Magic Button</h2>
<MagicButton label={'Magic button'}></MagicButton>
<h2>Switch padrão</h2>
<Switch label={'switch label'} id={'switch-1'}></Switch>
<h2>Upload</h2>
<Upload id={'multiple-files'} multiple={'multiple'} ></Upload>
<h2>Tab</h2>
<Tab content={test_tab} ></Tab>
......@@ -174,14 +188,13 @@ function App() {
<h2>Textarea</h2>
<Textarea label={'LABEL'} placeholder={'texto placeholder'} aux_text={'texto auxiliar'} ></Textarea>
<h2>Wizard Vertical</h2>
<Wizard content={test_wizard} step='1' > </Wizard>
{/* <Footer image={'https://picsum.photos/id/826/400'} social={social} social2={social2} contents={content} legal={legal} inverted={'inverted'} ></Footer> */}
<h1>end of page</h1>
</div>
);
}
......
import BRUpload from './js-dsgov/Upload'
function Upload(props){
//TO-DO: o box de input aparece duas vezes
/*
id: 'single-file' 'multiple-files' 'disabled'
disable: '' 'disabled'
multiple: '' 'multiple'
*/
let id = props.id ? props.id : 'single-file'
let disabled = props.disabled ? props.disabled : ''
let multiple = props.multiple ? props.multiple : ''
let uploadTitle = props.uploadTitle ? props.uploadTitle : 'Envio de arquivo'
let uploadText = props.uploadText ? props.uploadText : 'Clique ou arraste o arquivo para realizar o Upload.'
const uploadList = []
for (const brUpload of window.document.querySelectorAll('.br-upload')) {
uploadList.push(new BRUpload('br-upload', brUpload, (function() {
//function uploadTimeout
return new Promise((resolve) => {
// Colocar aqui um upload para o servidor e retirar o timeout
return setTimeout(resolve, 3000)
})
})))
}
if(multiple == 'multiple'){
return(
<div className="row">
<div className="col-sm-4">
<div className="br-upload " disabled={disabled} multiple={multiple}>
<label className="upload-label" for={id} ><span>{uploadTitle}</span></label>
<input className="upload-input" id={id} multiple type="file"/>
<div className="upload-list"></div>
</div>
<p className="text-base mt-1">{uploadText}</p>
</div>
</div>
)
}
return(
<div className="row">
<div className="col-sm-4">
<div className="br-upload " disabled={disabled} multiple={multiple}>
<label className="upload-label" for={id} ><span>{uploadTitle}</span></label>
<input className="upload-input" id={id} type="file"/>
<div className="upload-list"></div>
</div>
<p className="text-base mt-1">{uploadText}</p>
</div>
</div>
)
}
export default Upload;
import BRWizard from './js-dsgov/Wizard'
function Wizard (props){
/*
**Parameters**
- layout: 'vertical' or 'horizontal' (default vertical)
- content: content of wich panel (title|panel_content|class|active|aria_label|buttons)
- step: 'int'
- collapsed: 'collapsed'
- scroll: 'scroll'
- disabled: 'disabled'
*/
const wizardList = []
for (const brWizard of window.document.querySelectorAll('.br-wizard')) {
wizardList.push(new BRWizard('br-wizard', brWizard))
}
let vertical = (props.layout == 'horizontal') ? undefined : 'vertical'
let collapsed = props.collapsed ? props.collapsed : undefined
let content = props.content ? props.content :[{'title':'Conteúdo 1','panel_content': ['texto 1'], 'class': 'info', 'active': 'active', 'aria_label': 'label 1' } ]
let step = props.step ? props.step : '1'
let disabled = props.desabled ? props.disabled : false
let scroll = props.scroll ? props.scroll : 'scroll'
let wizard_progress
content.map((cont, index) =>{
//set progress buttons
wizard_progress = `${wizard_progress} <button cm className="wizard-progress-btn" type="button" title=${cont.title} disabled=${cont.disabled} active=${cont.active}><span className=${cont.class}>${cont.title}</span></button>`
//set panel buttons
if (!cont.buttons){
switch (index) {
case 0:
cont.buttons =
<div className="wizard-panel-btn">
<button className="br-button wizard-btn-canc" type="button">Cancelar
</button>
<button className="br-button primary wizard-btn-next" type="button">Avançar
</button>
</div>
break;
case content.length-1:
cont.buttons =
<div className="wizard-panel-btn">
<button className="br-button wizard-btn-canc" type="button">Cancelar
</button>
<button className="br-button secondary wizard-btn-prev" type="button">Voltar
</button>
<button className="br-button primary wizard-btn" type="button">Concluir
</button>
</div>
break;
default:
cont.buttons =
<div className="wizard-panel-btn">
<button className="br-button wizard-btn-canc" type="button">Cancelar
</button>
<button className="br-button primary wizard-btn-next" type="button">Avançar
</button>
<button className="br-button secondary wizard-btn-prev" type="button">Voltar
</button>
</div>
}
cont.panel_content = cont.panel_content ? cont.panel_content : ''
}
})
return(
<div className="container-fluid">
<div className="br-wizard" collapsed={collapsed} scroll={scroll} vertical={vertical} step={step} disabled={disabled}>
<div className="wizard-progress">
{
content.map(cont =>
<button cm className="wizard-progress-btn" type="button" title={cont.title} disabled={cont.disabled} active={cont.active}><span className={cont.class}>{cont.title}</span></button>
)
}
</div>
<div className="wizard-form">
{
content.map(cont =>
<div className="wizard-panel" active={cont.active}>
<div className="wizard-panel-content" aria-label={cont.aria_label}>
<div className="h3">{cont.title}</div>
{
cont.panel_content.map(panelContent =>
<div className="">
{panelContent}
</div>
)
}
</div>
{cont.buttons}
</div>
)
}
</div>
</div>
</div>
)
}
export default Wizard;
class SwipeEventDispatcher {
constructor(element, options = {}) {
this.evtMap = {
SWIPE_DOWN: [],
SWIPE_LEFT: [],
SWIPE_RIGHT: [],
SWIPE_UP: [],
}
this.xDown = null
this.yDown = null
this.element = element
this.options = Object.assign({ triggerPercent: 0.3 }, options)
element.addEventListener(
'touchstart',
(evt) => {
return this.handleTouchStart(evt)
},
false
)
element.addEventListener(
'touchend',
(evt) => {
return this.handleTouchEnd(evt)
},
false
)
}
on(evt, cb) {
this.evtMap[evt].push(cb)
}
off(evt, lcb) {
this.evtMap[evt] = this.evtMap[evt].filter((cb) => {
return cb !== lcb
})
}
trigger(evt, data) {
this.evtMap[evt].map((handler) => {
return handler(data)
})
}
handleTouchStart(evt) {
this.xDown = evt.touches[0].clientX
this.yDown = evt.touches[0].clientY
}
handleTouchEnd(evt) {
const deltaX = evt.changedTouches[0].clientX - this.xDown
const deltaY = evt.changedTouches[0].clientY - this.yDown
const distMoved = Math.abs(
Math.abs(deltaX) > Math.abs(deltaY) ? deltaX : deltaY
)
const activePct = distMoved / this.element.offsetWidth
if (activePct > this.options.triggerPercent) {
if (Math.abs(deltaX) > Math.abs(deltaY)) {
deltaX < 0 ? this.trigger('SWIPE_LEFT') : this.trigger('SWIPE_RIGHT')
} else {
deltaY > 0 ? this.trigger('SWIPE_DOWN') : this.trigger('SWIPE_UP')
}
}
}
}
export default SwipeEventDispatcher
class BRUpload {
/*
*
* @param {*} name nome do componente
* @param {*} component componente
* @param {*} uploadFiles promisse de status do upload
*/
constructor(name, component, uploadFiles) {
this.name = name
this.component = component
this._inputElement = this.component.querySelector('.upload-input')
this._fileList = this.component.querySelector('.upload-list')
this._btnUpload = this.component.querySelector('.upload-button')
this._label = this.component.querySelector('label')
this._textHelp = document.querySelector('.text-base')
this._fileArray = []
this._uploadFiles = uploadFiles
this._setBehavior()
}
_setBehavior() {
this.component.addEventListener('dragover', (event) => {
event.stopPropagation()
event.preventDefault()
})
this.component.addEventListener('dragenter', () => {
this.component.classList.add('dragging')
})
this.component.addEventListener('dragleave', () => {
this.component.classList.remove('dragging')
})
this.component.addEventListener('drop', (event) => {
event.stopPropagation()
event.preventDefault()
this.component.classList.remove('dragging')
const dt = event.dataTransfer
const { files } = dt
this._handleFiles(files)
})
if (this._inputElement) {
const button = document.createElement('button')
button.className = 'br-button upload-button'
button.setAttribute('type', 'button')
if (this._inputElement.getAttribute('multiple'))
button.innerHTML =
'<i class="fas fa-upload" aria-hidden="true"></i><span>Selecione o(s) arquivo(s)</span>'
else
button.innerHTML =
'<i class="fas fa-upload" aria-hidden="true"></i><span>Selecione o arquivo</span>'
this.component.append(this._label)
this.component.append(this._inputElement)
this.component.appendChild(button)
this.component.append(this._fileList)
this._btnUpload = this.component.querySelector('.upload-button')
this._btnUpload.addEventListener(
'click',
() => {
this._clickUpload()
},
false
)
if (this.component.getAttribute('disabled')) {
const message = document.createElement('span')
message.classList.add('feedback', 'warning', 'mt-1')
message.setAttribute('role', 'alert')
message.innerHTML =
'<i class="fas fa-exclamation-triangle" aria-hidden="true"></i>Upload desabilitado'
this.component.after(message)
}
this._fileArray = Array.from(this._inputElement.files)
this._inputElement.addEventListener(
'change',
(event) => {
this._handleFiles(event)
},
false
)
}
}
_clickUpload() {
this._inputElement.click()
}
_removeMessage() {
for (const message of this.component.querySelectorAll('.feedback')) {
message.parentNode.removeChild(message)
message.innerHTML = ''
}
}
_removeStatus() {
const remStatus = ['danger', 'warning', 'info', 'success']
remStatus.forEach((el) => {
if (this.component.dataset.hasOwnProperty(el))
this.component.removeAttribute(`data-${el}`)
})
}
_feedback(status, text) {
const icone = `<i class="fas fa-times-circle" aria-hidden="true"></i>${text}`
const dataStatus = `data-${status}`
const message = document.createElement('span')
message.classList.add('feedback', status, 'mt-1')
message.setAttribute('role', 'alert')
switch (status) {
case 'danger':
message.innerHTML = icone
break
case 'info':
message.innerHTML = icone.replace('fa-times-circle', 'fa-info-circle')
break
case 'success':
message.innerHTML = icone.replace('fa-times-circle', 'fa-check-circle')
break
case 'warning':
message.innerHTML = icone.replace(
'fa-times-circle',
'fa-exclamation-triangle'
)
break
default:
message.innerHTML = ''
}
this._removeStatus()
this.component.setAttribute(dataStatus, dataStatus)
this._fileList.before(message)
}
_concatFiles(files) {
const newFiles = !files.length
? Array.from(this._inputElement.files)
: Array.from(files)
this._fileArray = this._fileArray.concat(newFiles)
}
_handleFiles(files) {
this._removeMessage()
if (!this._inputElement.multiple && files.length > 1) {
this._feedback('danger', 'É permitido o envio de somente um arquivo.')
} else if (!this._inputElement.multiple && this._fileArray.length > 0) {
this._fileArray = []
this._concatFiles(files)
this._updateFileList()
this._feedback(
'warning',
'O arquivo enviado anteriormente foi substituído'
)
} else {
this._concatFiles(files)
this._updateFileList()
}
}
_updateFileList() {
this._removeStatus()
if (this.component.nextElementSibling === this._textHelp) {
this._textHelp.style.display = 'none'
}
if (!this._fileArray.length) {
this._fileList.innerHTML = ''
if (this.component.nextElementSibling === this._textHelp) {
this._textHelp.style.display = ''
}
} else {
this._fileList.innerHTML = ''
for (let i = 0; i < this._fileArray.length; i++) {
if ('nowait' in this._fileArray[i]) {
if (this._fileArray[i].nowait) {
this._renderItem(i)
}
} else {
const loading = document.createElement('div')
const carga = document.createElement('span')
carga.classList.add('cargas')
carga.innerText = 'Carregando...'
loading.setAttribute('sm', '')
loading.classList.add('my-3')
loading.setAttribute('loading', '')
loading.appendChild(carga)
this._fileList.appendChild(loading)
if (this._uploadFiles()) {
// FIXME: Essa promise está repetindo essa ação exponencialmente
this._uploadFiles().then(() => {
this._fileArray[i].nowait = true
this._updateFileList()
})
}
}
}
}
}
_renderItem(position) {
const li = document.createElement('div')
li.className = 'br-item'
this._fileList.appendChild(li)
li.innerHTML = ''
const name = document.createElement('div')
name.className = 'name'
li.appendChild(name)
this._fileList.appendChild(li)
const info = document.createElement('div')
info.className = 'content'
info.innerHTML = this._fileArray[position].name
// const tooltip = document.createElement('div')
// tooltip.classList.add('br-tooltip')
// tooltip.setAttribute('role', 'tooltip')
// tooltip.setAttribute('place', 'top')
// tooltip.setAttribute('info', 'info')
// const textTooltip = document.createElement('span')
// textTooltip.classList.add('text')
// textTooltip.setAttribute('role', 'tooltip')
// textTooltip.innerHTML = this._fileArray[position].name
// tooltip.appendChild(textTooltip)
// li.appendChild(info)
// li.appendChild(name)
// li.appendChild(tooltip)
info.classList.add('text-primary-default', 'mr-auto')
const del = document.createElement('div')
del.className = 'support'
const btndel = document.createElement('button')
const spanSize = document.createElement('span')
spanSize.className = 'mr-1'
spanSize.innerHTML = this._calcSize(this._fileArray[position].size)
del.appendChild(spanSize)
btndel.className = 'br-button'
btndel.type = 'button'
btndel.setAttribute('circle', '')
btndel.addEventListener(
'click',
(event) => {
this._removeFile(position, event)
},
false
)
const img = document.createElement('i')
img.className = 'fa fa-trash'
btndel.appendChild(img)
del.appendChild(btndel)
li.appendChild(del)
this._fileArray[position].nowait = true
// const tooltipList = []
// for (const brTooltip of window.document.querySelectorAll('.br-tooltip')) {
// tooltipList.push(new _components_tooltip_tooltip__WEBPACK_IMPORTED_MODULE_0__["default"]('br-tooltip', brTooltip))
// }
}
_calcSize(nBytes) {
let sOutput = ''
for (
let aMultiples = ['KB', 'MB', 'GB', 'TB'],
nMultiple = 0,
nApprox = nBytes / 1024;
nApprox > 1;
nApprox /= 1024, nMultiple++
) {
sOutput = `${nApprox.toFixed(2)} ${aMultiples[nMultiple]}`
}
return sOutput
}
_removeFile(index, event) {
event.stopPropagation()
event.preventDefault()
this._removeStatus()
this._removeMessage()
this._fileArray.splice(index, 1)
this._updateFileList()
if (this._inputElement.multiple)
this._inputElement.files = this._updateFileListItems(this._fileArray)
if (!this._inputElement.multiple) this._inputElement.value = ''
}
_updateFileListItems(files) {
const fileInput = new ClipboardEvent('').clipboardData || new DataTransfer()
for (let i = 0, len = files.length; i < len; i++)
fileInput.items.add(files[i])
return fileInput.files
}
}
const uploadList = []
function uploadTimeout() {
return new Promise((resolve) => {
// Colocar aqui um upload para o servidor e retirar o timeout
return setTimeout(resolve, 3000)
})
}
for (const brUpload of window.document.querySelectorAll('.br-upload')) {
uploadList.push(new BRUpload('br-upload', brUpload, uploadTimeout))
}
export default BRUpload
import SwipeEventDispatcher from './Swipe.js'
class BRWizard {
constructor(name, component) {
this.name = name
this.component = component
// DOM elements
this.DOMstrings = {
stepFormPanelClass: 'wizard-panel',
// stepFormPanels: document.querySelectorAll('.wizard-panel'),
stepFormPanels: this.component.querySelectorAll('.wizard-panel'),
stepNextBtnClass: 'wizard-btn-next',
stepPrevBtnClass: 'wizard-btn-prev',
// stepsBar: document.querySelector('.wizard-progress'),
stepsBar: this.component.querySelector('.wizard-progress'),
stepsBarClass: 'wizard-progress',
stepsBtnClass: 'wizard-progress-btn',
// stepsBtns: document.querySelectorAll(`.wizard-progress-btn`),
stepsBtns: this.component.querySelectorAll('.wizard-progress-btn'),
// stepsForm: document.querySelector('.wizard-form'),
stepsForm: this.component.querySelector('.wizard-form'),
}
// remove class from a set of items
this.removeAttributes = (elemSet, attrName) => {
elemSet.forEach((elem) => {
elem.removeAttribute(attrName)
})
}
// return exect parent node of the element
this.findParent = (elem, parentClass) => {
let currentNode = elem
while (!currentNode.classList.contains(parentClass)) {
currentNode = currentNode.parentNode
}
return currentNode
}
// get active button step number
this.getActiveStep = (elem) => {
return Array.from(this.DOMstrings.stepsBtns).indexOf(elem)
}
// set all steps before clicked (and clicked too) to active
this.setActiveStep = (activeStepNum) => {
// remove active state from all the state
this.removeAttributes(this.DOMstrings.stepsBtns, 'active')
// this.removeAttributes(this.DOMstrings.stepsBtns, 'disabled')
// set picked items to active
this.DOMstrings.stepsBtns.forEach((elem, index) => {
if (index === activeStepNum) {
elem.removeAttribute('disabled')
elem.setAttribute('active', '')
}
// if (index > activeStepNum) {
// elem.setAttribute('disabled', 'disabled')
// }
})
}
// get active panel
this.getActivePanel = () => {
let activePanel
this.DOMstrings.stepFormPanels.forEach((elem) => {
if (elem.hasAttribute('active')) {
activePanel = elem
}
})
return activePanel
}
// open active panel (and close unactive panels)
this.setActivePanel = (activePanelNum) => {
// remove active class from all the panels
this.removeAttributes(this.DOMstrings.stepFormPanels, 'active')
// show active panel
this.DOMstrings.stepFormPanels.forEach((elem, index) => {
if (index === activePanelNum) {
elem.setAttribute('active', '')
}
})
}
this.setStepsNum = () => {
this.DOMstrings.stepsBtns.forEach((elem, index) => {
elem.setAttribute('step', index + 1)
})
}
this.setStep = (num) => {
const activeStep = num <= this.DOMstrings.stepsBtns.length ? num - 1 : 0
this.setActiveStep(activeStep)
this.setActivePanel(activeStep)
}
this.collapseSteps = () => {
this.component.setAttribute('collapsed', '')
}
this.expandSteps = () => {
this.component.removeAttribute('collapsed')
}
this._setBehavior()
}
_setBehavior() {
// STEPS BAR CLICK FUNCTION
this.DOMstrings.stepsBar.addEventListener('click', (e) => {
// check if click target is a step button
const eventTarget = e.target
if (!eventTarget.classList.contains(`${this.DOMstrings.stepsBtnClass}`)) {
e.target.parentNode.click()
return
}
// get active button step number
const activeStep = this.getActiveStep(eventTarget)
// set all steps before clicked (and clicked too) to active
this.setActiveStep(activeStep)
// open active panel
this.setActivePanel(activeStep)
})
// PREV/NEXT BTNS CLICK
this.DOMstrings.stepsForm.addEventListener('click', (e) => {
const eventTarget = e.target
// check if we clicked on `PREV` or NEXT` buttons
if (
!(
eventTarget.classList.contains(
`${this.DOMstrings.stepPrevBtnClass}`
) ||
eventTarget.classList.contains(`${this.DOMstrings.stepNextBtnClass}`)
)
) {
return
}
// find active panel
const activePanel = this.findParent(
eventTarget,
`${this.DOMstrings.stepFormPanelClass}`
)
let activePanelNum = Array.from(this.DOMstrings.stepFormPanels).indexOf(
activePanel
)
// set active step and active panel onclick
if (
eventTarget.classList.contains(`${this.DOMstrings.stepPrevBtnClass}`)
) {
activePanelNum -= 1
activePanel.style.left = '1%'
} else {
activePanelNum += 1
activePanel.style.left = '-1%'
}
this.setActiveStep(activePanelNum)
this.setActivePanel(activePanelNum)
})
// Set Steps label number
this.setStepsNum()
// Set default active step
if (this.component.hasAttribute('step')) {
this.setStep(this.component.getAttribute('step'))
}
// set steps buttons grid style if it needs to scroll horizontaly
if (
this.component.hasAttribute('scroll') &&
!this.component.hasAttribute('vertical')
) {
const stepsWidth =
Math.round(100 / this.DOMstrings.stepsBtns.length) - 0.5
this.DOMstrings.stepsBar.style.gridTemplateColumns = `repeat(auto-fit, minmax(100px, ${stepsWidth}% ))`
}
// Swipe
const dispatcher = new swipe(this.DOMstrings.stepsBar)
if (this.component.hasAttribute('vertical')) {
dispatcher.on('SWIPE_LEFT', () => {
this.collapseSteps()
})
dispatcher.on('SWIPE_RIGHT', () => {
this.expandSteps()
})
this.DOMstrings.stepsForm.ontouchstart = () => {
this.collapseSteps()
}
} else {
this.DOMstrings.stepsBar.ontouchstart = () => {
this.expandSteps()
}
this.DOMstrings.stepsForm.ontouchstart = () => {
this.collapseSteps()
}
}
}
}
const wizardList = []
for (const brWizard of window.document.querySelectorAll('.br-wizard')) {
wizardList.push(new BRWizard('br-wizard', brWizard))
}
var swipe = (SwipeEventDispatcher);
export default BRWizard