Skip to content

Instantly share code, notes, and snippets.

@rafibomb

rafibomb/DisplayToggle.js

Created December 22, 2021 19:21
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save rafibomb/9c0b07ce8838d1edf19d6674e50047b4 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save rafibomb/9c0b07ce8838d1edf19d6674e50047b4 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. rafibomb created this gist Dec 22, 2021.
    63 changes: 63 additions & 0 deletions DisplayToggle.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,63 @@
    constructor(options){
    super(options);
    this.scrollGroup = this.anim.getGroupForTarget(this.el);

    this.toggle = document.getElementById('toggleControl');
    this.toggleS7 = document.querySelector('.toggle-label-s7');
    this.toggleS3 = document.querySelector('.toggle-label-s3');
    this.hardware = document.querySelector('.tile-image-wrapper');
    this.imageS7 = this.hardware.querySelector('.image-display-s7');
    this.imageS3 = this.hardware.querySelector('.image-display-s3');
    }

    /**
    * Component has been mounted to the HTMLElement,
    * at this point all other components have been created so they can safely be accessed
    */
    mounted(){
    // DOM things
    let keyframe = this.scrollGroup.addKeyframe(this.el, {
    anchors: this.hardware,
    start: 'b - 125vh', end:'b',
    event: 'autoToggeEvent'
    })

    keyframe.controller.on('autoToggeEvent:enter', (e) => this.setS7Active())

    this.scrollGroup.addKeyframe(this.el, {
    anchors: this.el,
    start: videoConstants.willChange.start,
    end: videoConstants.willChange.end,
    cssClass: videoConstants.willChange.class,
    toggle: true,
    disabledWhen: ['static-layout','prefers-reduced-motion'],
    });

    this.handleToggle(event);
    }

    handleToggle(event) {
    this.toggle.addEventListener('click', (event) => {
    if (event.target === this.toggleS7) {
    this.setS7Active();
    } else {
    this.setS3Active();
    }
    });
    }

    setS7Active() {
    this.el.classList.add('is-showing-s7');
    this.toggleS7.setAttribute('aria-pressed', true);
    this.toggleS3.setAttribute('aria-pressed', false);
    this.imageS7.setAttribute('aria-hidden', false);
    this.imageS3.setAttribute('aria-hidden', true);
    }

    setS3Active() {
    this.el.classList.remove('is-showing-s7');
    this.toggleS7.setAttribute('aria-pressed', false);
    this.toggleS3.setAttribute('aria-pressed', true);
    this.imageS7.setAttribute('aria-hidden', true);
    this.imageS3.setAttribute('aria-hidden', false);
    }