1define( () => { 2 3 class RotativeDOM { 4 constructor( cntnr ) { 5 this.cntnr = cntnr 6 // this.rotElems = cntnr.querySelectorAll( '[rotElem]' ) 7 // this.dotsCntnr = cntnr.querySelector ( '[dotsCntnr]' ) 8 // this.elemsCntnr = cntnr.querySelector( '[elemsCntnr]' ) 9 // this.arrow = cntnr.querySelectorAll( '[feedArrow]' ) 10 // this.arrowLeft = cntnr.querySelector( '[feedLeft]' ) 11 // this.arrowRight = cntnr.querySelector( '[feedRight]' ) 12 // this.arrowLR = cntnr.querySelectorAll( '[feedLeft],[feedRight]' ) 13 // this.singleDot = cntnr.querySelectorAll( '[singleDot]' ) 14 // this.hidingCls = cntnr.getAttribute( 'hidingClass' ) || 'hidingClassNotDefined' 15 // this.maxVisElems = Number( cntnr.getAttribute( 'maxVisibleElems' ) || this.MaxVisElemDefault ) 16 this.rotElems = cntnr.querySelectorAll( '.rotatingCard' ) 17 this.dotsCntnr = cntnr.querySelector ( '.slickDotsCntnr' ) 18 this.elemsCntnr = cntnr.querySelector( '.elemsCntnr' ) 19 this.arrow = cntnr.querySelectorAll( '.feed-arrow' ) 20 this.arrowLeft = cntnr.querySelector( '.feedLeft' ) 21 this.arrowRight = cntnr.querySelector( '.feedRight' ) 22 this.arrowLR = cntnr.querySelectorAll( '.feedLeft,.feedRight' ) 23 this.singleDot = cntnr.querySelectorAll( '.slickDots' ) 24 this.hidingCls = 'oculta' 25 this.maxVisElems = 3 26 this.cntnrPadBotDef = getComputedStyle( cntnr ).paddingBottom 27 // this.rangeRotElemsIdx = this.rangeAttr( this.rotElems ) 28 this.rangeRotElemsIdx = this.getRangeRotElemsIdx() 29 this.rotElemsQty = this.rotElems.length 30 } 31 MaxVisElemDefault = 1 32 33 get visElems() { return this.cntnr.querySelectorAll( `.rotatingCard:not(.${this.hidingCls})` )} 34 35 // Solucao temporaria ate eliminar diferenca entre o TinyMCE de desenvolvimento e o de homologacao 36 // TinyMCE de homologacao nao aceita datasets na definicao de um novo modelo 37 getRangeRotElemsIdx() {
38 this.rotElems.forEach(( elem, idx ) => elem.setAttribute( 'idx', String( idx ))) 39 return [ 0, this.rotElems.length - 1 ]} 40 41 rangeAttr( node = this.visElems , attr = 'idx' ) { 42 return [ Number( node[0].getAttribute( attr )), Number( node[ node.length - 1 ].getAttribute( attr )) ]} 43 } 44 45 46 return { 47 main: ( selector ) => { 48 for( cntnr of document.querySelectorAll( selector )) { 49 dom = new RotativeDOM( cntnr ) 50 visibleOnOff( dom ) 51 onWindowResize( dom ) 52 onHorizScroll( dom ) 53 }}, 54 } 55 56 57 // Converte medidas do CSS em px 58 function toPx ( measure ) { 59 const measArray = measure.match(/^(\d+(\.\d+)?)([a-zA-Z%]+)/) 60 if ( ! measArray ) return 0 61 const measConv = { 62 'px': () => { return ( parseFloat( value ) )}, 63 'rem': () => { return ( parseFloat( value ) * parseFloat( getComputedStyle( document.documentElement ).fontSize ) )}, 64 'em': () => { return ( parseFloat( value ) * parseFloat( getComputedStyle( document.body ).fontSize ) )}, 65 'vw': () => { return (( parseFloat( value ) / 100 ) * window.innerWidth )}, 66 'vh': () => { return (( parseFloat( value ) / 100 ) * window.innerHeight )}, 67 '%': () => { return ( parseFloat( value ) / 100 )}} 68 const value = measArray[1] 69 let meas = measArray[3] 70 if ( ! value || ! meas ) return 71 meas = ( ! Object.keys( measConv ).some( key => key.includes( meas ))) && 'px' || meas 72 return ( measConv[ meas ]() ) 73 } 74 75 76 // Gerencia a visibilidade dos elementos 77 function visibleOnOff( dom ) { 78 // Determina o numero de elementos navegaveis que poderao ficar visiveis ao mesmo tempo em funcao de sua largura minima 79 calcVisElems = ( qtyElems ) => { 80 if ( qtyElems <= 1 ) return 1 81 const gapSize = parseFloat( window.getComputedStyle( dom.elemsCntnr ).gap, 10 ) 82 let provisionalQty = Math.trunc( viewPort - (( rotElemMinWidth * qtyElems ) + ( gapSize * ( qtyElems - 1 ))) ) >= 0 ? qtyElems : calcVisElems( qtyElems - 1 ) 83 if ( provisionalQty > dom.maxVisElems ) provisionalQty = dom.maxVisElems 84 return ( provisionalQty )} 85 86 // Determina o espaco horizontal disponivel de um informado container em pixel 87 availableHorzSpace = ( cntnr, styles ) => { 88 return ( cntnr.getBoundingClientRect().width - ( 89 toPx( styles.paddingLeft ) + toPx ( styles.paddingRight ) + 90 toPx( styles.borderLeft ) + toPx( styles.borderRight ) + 91 toPx( styles.marginLeft ) + toPx( styles.marginRight )))} 92 93 const cntnr = dom.cntnr 94 if ( ! cntnr ) return 95 const rotElems = dom.rotElems 96 if ( ! rotElems ) return 97 const rotElemMinWidth = toPx( getComputedStyle( rotElems[0] ).minWidth ) 98 const viewPort = availableHorzSpace( cntnr, window.getComputedStyle( cntnr ) ) 99 const maxRotElems = calcVisElems( Math.trunc( viewPort / rotElemMinWidth ))
100 rotElems.forEach (( elem, index ) => 101 elem.classList[ index >= 0 && index < maxRotElems && 'remove' || 'add' ]( dom.hidingCls )) 102 arrowVisibility( dom ) 103 slickDotsMgmt( dom ) 104 } 105 106 107 // Determina se o usuario esta utilizando um desktop ou um equipamento mobile (nao ha precisao) 108 function isMobile() { 109 const isTouch = 'ontouchstart' in window || navigator.maxTouchPoints 110 const isMobile = window.matchMedia( '(max-width: 820px)' ).matches 111 return isTouch > 0 && isMobile 112 } 113 114 115 // Exibe elementos rotativos conforme o incremento definido (incr) 116 function displaysRotElems( dom, incr = 0 ) { 117 const rangeVis = dom.rangeAttr() 118 const rangeRot = dom.rangeRotElemsIdx 119 const [ first, last ] = [ rangeVis[0] + incr, rangeVis[1] + incr ] 120 if ( first < 0 || last > rangeRot[1] ) return 121 const rotElems = dom.rotElems 122 const [ rmvCls, addCls ] = incr < 0 && [ rotElems[ rangeVis[0] + incr ], rotElems[ rangeVis[1]]] || [ rotElems[ rangeVis[1] + incr ], rotElems[ rangeVis[0] ]] 123 rmvCls.classList.remove( dom.hidingCls ) 124 addCls.classList.add( dom.hidingCls ) 125 } 126 127 128 // Gerencia a aparencia dos 'bullets' da barra de navegacao. O numero de bullets devera ser igual ao numero de elementos navegaveis (rotacionaveis) 129 function slickDotsMgmt( dom ) { 130 setTimeout(() => { 131 const visElems = dom.visElems 132 if ( ! visElems ) return 133 const dots = dom.singleDot 134 if ( ! dots || dots.length == visElems.length ) { 135 dom.dotsCntnr.classList.add( dom.hidingCls ) 136 return } 137 const [ firstIdx, lastIdx ] = [ Number( visElems[0].getAttribute( 'idx' )), Number( visElems[ visElems.length - 1 ].getAttribute( 'idx' ))] 138 dom.dotsCntnr.classList[ isMobile() && 'remove' || 'add' ]( dom.hidingCls ) 139 dots.forEach (( dot, idx ) => 140 dot.classList[ idx >= firstIdx && idx <= lastIdx && 'add' || 'remove' ]( 'slickDotsBlue' )) 141 }, 10 ) 142 } 143 144 145 // Gerencia a possibilidade de visualizacao das setas de navegacao do container 146 function arrowVisibility( dom ) { 147 setTimeout(() => { 148 const visElems = dom.visElems 149 if ( ! visElems ) return 150 const rotElemsQty = dom.rotElemsQty 151 const isMob = isMobile() 152 dom.arrow.forEach( arrow => arrow.classList[ isMob && 'add' || 'remove' ]( dom.hidingCls )) 153 const arrowLR = dom.arrowLR 154 const visElemsLen = visElems.length 155 arrowLR[0].classList[ ( visElemsLen !== rotElemsQty ) && ( Number( visElems[0].getAttribute( 'idx' )) > 0 ) && ( ! isMob ) && 'add' || 'remove' ]( 'visible' ) 156 arrowLR[1].classList[ ( visElemsLen !== rotElemsQty ) && ( Number( visElems[ visElemsLen - 1 ].getAttribute( 'idx' )) < ( rotElemsQty - 1 )) && ( ! isMob ) && 'add' || 'remove' ]( 'visible' ) 157 }, 10 ) 158 } 159 160 161 // Se janela do Windows for redimensionada, executara 'visibleOnOff()' para cada um dos containers existentes na pagina 162 function onWindowResize( dom ) { 163 window.addEventListener( 'resize', () => visibleOnOff( dom )) 164 } 165 166 167 // Rotinas a serem executadas ao mover os elementos em seu container (arrastar, movimentar) 168 function actionsAfterScroll( dom, incr ) { 169 displaysRotElems( dom, incr ) 170 slickDotsMgmt( dom ) 171 arrowVisibility( dom ) 172 } 173 174 175 // Gerencia a rolagem horizontal dos elementos navegaveis em seu container 176 function onHorizScroll( dom ) { 177 const cntnr = dom.cntnr 178 let startX = 0 179 let isDown = false 180 const [ left, right ] = [ -1, 1 ] 181 const amplitude = 10 182 const movement = ( delta ) => { 183 isDown = false 184 if ( delta > amplitude ) actionsAfterScroll( dom, left ) 185 else if ( delta < -amplitude ) actionsAfterScroll( dom, right )} 186 187 // Scroll horizontal dos elementos por meio de mouse 188 cntnr.addEventListener( 'dragstart', ( event ) => { 189 isDown = true 190 startX = event.clientX }) 191 cntnr.addEventListener( 'dragover', ( event ) => isDown && movement( event.clientX - startX )) 192 // Scroll horizontal dos elementos por meio de touch 193 cntnr.addEventListener( 'touchstart', ( event ) => { 194 isDown = true 195 startX = event.changedTouches[0].clientX }) 196 cntnr.addEventListener( 'touchend', ( event ) => isDown && movement( event.changedTouches[0].clientX - startX )) 197 // Scroll horizontal por meio das setas de navegacao (desktop) 198 dom.arrowLeft.addEventListener( 'click', ( event ) => { 199 event.preventDefault() 200 actionsAfterScroll( dom, left ) }) 201 dom.arrowRight.addEventListener( 'click', ( event ) => { 202 event.preventDefault() 203 actionsAfterScroll( dom, right ) }) 204 } 205})
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.