<div>
    <h2>Primarynav JS</h2>
    <p>Under assets finner du Javascriptkoden.</p>
    <p>För en utökad syntax används <a href="https://babeljs.io/">Babel</a> som kompilerare för JavaScript (JS). Konkatenering av JavaScript sker med <a href="https://webpack.js.org/">Webpack</a>, beskrivningarna nedan bygger på Webpacks metoder och struktur.
        Läs mer under Javascript i dokumentationen i vänstermenyn.</p>
</div>
<div>
  <h2>Primarynav JS</h2>
  <p>Under assets finner du Javascriptkoden.</p>
  <p>För en utökad syntax används <a href="https://babeljs.io/">Babel</a> som kompilerare för JavaScript (JS). Konkatenering av JavaScript sker med <a href="https://webpack.js.org/">Webpack</a>, beskrivningarna nedan bygger på Webpacks metoder och struktur. Läs mer under Javascript i dokumentationen i vänstermenyn.</p>
</div>
/* No context defined for this component. */
  • Content:
    export default class PrimaryNav {
      constructor(element) {
    
        let that = this
    
        let toggleClassName = element.getAttribute('data-toggle-class')
        let toggleBtnClassName = element.getAttribute('data-trigger')
    
        this.toggleClassName = toggleClassName
        this.toggleBtn = element.getElementsByClassName(toggleBtnClassName)
    
        if (!this.toggleClassName || !this.toggleBtn) { return }
    
        for (var i = 0; i < this.toggleBtn.length; i++) {
          this.toggleBtn[i].addEventListener('mouseenter', function() {
            that.open(this)
          })
          this.toggleBtn[i].addEventListener('mouseout', function() {
            that.close(this)
          })
        }
      }
    
      open(btn) {
        if(btn.nextElementSibling) {
          let target = btn.nextElementSibling
          target.classList.add(this.toggleClassName)
        }
        btn.classList.add(this.toggleClassName)
        btn.setAttribute('aria-expanded', true)
        btn.setAttribute('aria-hidden', false)
      }
    
      close(btn) {
        if(btn.nextElementSibling) {
          let target = btn.nextElementSibling
          target.classList.remove(this.toggleClassName)
        }
        btn.classList.remove(this.toggleClassName)
        btn.setAttribute('aria-expanded', false)
        btn.setAttribute('aria-hidden', true)
      }
    }
    
    
    
    
  • URL: /components/raw/primarynav-js/primarynav.js
  • Filesystem Path: components/assets/javascript/primarynav-js/primarynav.js
  • Size: 1.2 KB
  • Handle: @primarynav-js
  • Preview:
  • Filesystem Path: components/assets/javascript/primarynav-js/primarynav-js.html
Under assets finner du Javascriptkoden.

För en utökad syntax används Babel som kompilerare för JavaScript (JS). Konkatenering av JavaScript sker med Webpack, beskrivningarna nedan bygger på Webpacks metoder och struktur. Läs mer under Javascript i dokumentationen i vänstermenyn.