https://www.gresb.com/wp-content/themes/framework/assets/js/compon…/_2_off-canvas-navigation.js?ver=1790907449

1// File#: _2_off-canvas-navigation
2// Usage: codyhouse.co/license
3(function() {
4  var OffCanvasNav = function(element) {
5    this.element = element;
6    this.panel = this.element.getElementsByClassName('js-off-canvas__panel')[0];
7    this.trigger = document.querySelectorAll('[aria-controls="'+this.panel.getAttribute('id')+'"]')[0];
8    this.svgAnim = this.trigger.getElementsByTagName('circle');
9    initOffCanvasNav(this);
10  };
11
12  function initOffCanvasNav(canvas) {
13    if(transitionSupported) {
14      // do not allow click on menu icon while the navigation is animating
15      canvas.trigger.addEventListener('click', function(event){
16        canvas.trigger.style.setProperty('pointer-events', 'none');
17      });
18      canvas.panel.addEventListener('openPanel', function(event){
19        canvas.trigger.style.setProperty('pointer-events', 'none');
20      });
21      canvas.panel.addEventListener('transitionend', function(event){
22        if(event.propertyName == 'visibility') {
23          canvas.trigger.style.setProperty('pointer-events', '');
24        }
25      });
26    }
27
28    if(canvas.svgAnim.length > 0) { // create the circle fill-in effect
29      var circumference = (2*Math.PI*canvas.svgAnim[0].getAttribute('r')).toFixed(2);
30      canvas.svgAnim[0].setAttribute('stroke-dashoffset', circumference);
31      canvas.svgAnim[0].setAttribute('stroke-dasharray', circumference);
32      Util.addClass(canvas.trigger, 'offnav-control--ready-to-animate');
33    }
34    
35    canvas.panel.addEventListener('closePanel', function(event){
36      // if the navigation is closed using keyboard or a11y close btn -> change trigger icon appearance (from arrow to menu icon) 
37      if(event.detail == 'key' || event.detail == 'close-btn') {
38        canvas.trigger.click();
39      }
40    });
41  };
42
43  // init OffCanvasNav objects
44  var offCanvasNav = document.getElementsByClassName('js-off-canvas--nav'),
45    transitionSupported = Util.cssSupports('transition');
46	if( offCanvasNav.length > 0 ) {
47		for( var i = 0; i < offCanvasNav.length; i++) {
48			(function(i){new OffCanvasNav(offCanvasNav[i]);})(i);
49		}
50	}
51}());