JS for a front-end prototype (ES6, Vue.js)

app.js

// ----
// Components
// ----

const Modal = {
  template: '#modal'
}

const ShareModal = {
  template: '#share-modal',
  props: {
    points: '',
    prompt: '',
    fb_title: '',
    fb_blurb: '',
    img: '',
    twitter_blurb: '',
    points: ''
  }
}


// These are basically static

Vue.component('rewards-slider', {
  template: `#rewards-slider`,
  data() {
    return rewardsSliderData
  }
});

Vue.component('dropdown', {
  template:
  `<div class="dropdown">
    <slot></slot>
  </div>`
});




// ----
// Main App
// ----

// This is being used for site-wide JS and plugins
// Possibly should be done differently and abstracted
// into components, but I'm learning.

var vm = new Vue({
  el: '#app',
  mounted() {

    // --- Flickity

    // All carousels have the same settings
    const carousels = document.querySelectorAll('.js-carousel');

    for( let el of carousels ) {
      let flkty = new Flickity( el, {
        contain: true,
        wrapAround: true,
        imagesLoaded: true,
        cellSelector: '.js-slide',
        autoPlay: true,
        groupCells: true,
        bgLazyLoad: true
      });
    }


    // --- Misc Plugins

    var myLazyLoad = new LazyLoad();
    AOS.init({
      duration: 1000,
      once: true
    });


    // --- Mark Current Nav Item
    // Reference: https://css-tricks.com/snippets/jquery/add-active-navigation-class-based-on-url/#comment-181869

    const mainNav = document.querySelector('.main-nav'),
        anchor = mainNav.getElementsByTagName('a'),
        current = window.location.pathname.split('/')[3];

    for (var i = 0; i < anchor.length; i++) {
      if(anchor[i].href == current) {
        console.log(anchor[i].href);
        anchor[i].className = "is-current";
      }
    }


    // --- Sticky Nav
    // Reference: https://codepen.io/elifitch/pen/Cobzr

    const header = document.querySelector('.js-header');
    const nav = document.querySelector('.js-sticky-nav');
    const stickPoint = getNavDistanceFromTop();

    let stuck = false;

    function getNavDistanceFromTop() {
      let topDist = nav.offsetTop;
      return topDist;
    }

    const scrollFunction = (e) => {
      let offset = window.pageYOffset;
      let dist = getNavDistanceFromTop() - offset;

      // Stick the nav and add padding bottom to the header to
      // account for removal from DOM
      if( (dist <= 0) && !stuck ) {
        nav.classList.add('is-stuck');
        header.style.paddingBottom = nav.clientHeight + 'px';
        stuck = true;
      } else if( stuck && (offset <= stickPoint) ) {
        nav.classList.remove('is-stuck');
        header.style.paddingBottom = '0';
        stuck = false;
      }
    }

    window.addEventListener('scroll', scrollFunction);

    // Create a property for 'playing' on videos
    // https://stackoverflow.com/questions/6877403/how-to-tell-if-a-video-element-is-currently-playing
    Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
      get: function(){
        return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
      }
    });

    // Load Quiz Modal (Wufoo code)
    var z1n5himl1sfqs1o;
      (function(d, t) {
        var s = d.createElement(t),
          options = {
            'userName': 'basisworldwide',
            'formHash': 'z1n5himl1sfqs1o',
            'autoResize': true,
            'height': '886',
            'async': true,
            'host': 'wufoo.com',
            'header': 'show',
            'ssl': true
          };
        s.src = ('https:' == d.location.protocol ? 'https://' : 'http://') + 'www.wufoo.com/scripts/embed/form.js';
        s.onload = s.onreadystatechange = function() {
          var rs = this.readyState;
          if (rs)
            if (rs != 'complete')
              if (rs != 'loaded') return;
          try {
            z1n5himl1sfqs1o = new WufooForm();
            z1n5himl1sfqs1o.initialize(options);
            z1n5himl1sfqs1o.display();
          } catch (e) {}
        };
        var scr = d.getElementsByTagName(t)[0],
          par = scr.parentNode;
        par.insertBefore(s, scr);
      })(document, 'script');

  },
  data() {
    return {
      isShowing: false,
      isVideoShowing: false,
      isShareShowing: false,
      isQuizShowing: false,
      isShared: false,

      // This is static data
      dropdowns: dropdownData,
      biggly: featuredBiggly,
      challenges: challengesData,
      social: socialData,


      img: '',
      prompt: '',
      points: '',
      fb_title: '',
      fb_blurb: '',
      twitter_blurb: '',

      share_modal: {
        prompt: 'Our new collection is out! Tell your friends and you can earn points for your next purchase.',
        fb_title: 'Accessorize with geometric patterns',
        fb_blurb: 'Share your link with your friends and when they join you’ll get +300 points.',
        twitter_blurb: 'Share your link with your friends and when they join you’ll get +300 points.',
        img: 'challenge-recruit2',
        points: '124'
      },

    }
  },
  methods: {
    findFeatured(items) {
      // Only return featured items
      for( let item of items ) {
        if (item.isFeatured == true) {
          return item;
        }
      }
    },
    // Code for modals, TODO: optimize this for non-prototype
    toggleShow() {
      this.isShowing = !this.isShowing;
    },
    toggleVideo() {
      this.isVideoShowing = !this.isVideoShowing;
    },
    toggleShare() {
      this.isShareShowing = !this.isShareShowing;
    },
    toggleQuiz() {
      this.isQuizShowing = !this.isQuizShowing;
    },
    toggleShareStatus() {
      this.isShared = !this.isShared;

      // Hide and show shared/pre-shared content
      if (this.isShared) {
        document.querySelector('.js-shared').style.display = 'block';
        document.querySelector('.js-pre-shared').style.display = 'none';
      } else {
        document.querySelector('.js-pre-shared').style.display = 'block';
        document.querySelector('.js-shared').style.display = 'none';

      }
    },
    delay(func) {
      setTimeout(func, 2000);
    },
    playVideo() {
      const modalVideo = document.querySelector('.modal-video');
      const progressBar = document.querySelector('.-video .bar-inner');

      // Toggle animation and play/pause on video click
      if (modalVideo.playing) {
        modalVideo.pause();
        progressBar.style.webkitAnimationPlayState = "paused";
      } else {
        modalVideo.play();
        progressBar.style.webkitAnimationPlayState = "running";
      }

    }
  },
  components: {
    'modal': Modal,
    'shareModal': ShareModal
  }
});