@area17/a17-boilerplate/core_files/js/behaviors/dummyBehavior.js

The official AREA 17 boilerplate

import createBehavior from '../functions/createBehavior';

// see https://code.area17.com/a17/fe-boilerplate/wikis/js-functions-createBehavior

const dummyBehavior = createBehavior(
  'dummyBehavior',
  {
    updateCounter() {
      this.$counter.textContent = this.count;
      this.count++;
    },
    handleResetClick(e) {
      e.preventDefault();
      this.count = parseInt(this.options.start);
      this.$counter.textContent = this.count;
    },
    handleDeleteClick(e) {
      e.preventDefault();
      this.$counter.textContent = '😵';
      this.node.parentNode.removeChild(this.node);
    },
  },
  {
    init() {
      console.log('dummyBehavior - init');

      this.counterInterval;
      this.count = parseInt(this.options.start);
      this.$counter = this.getChild('counter');

      this.$resetBtn = this.getChild('reset');
      this.$resetBtn.addEventListener('click', this.handleResetClick);

      this.$deleteBtn = this.getChild('delete');
      this.$deleteBtn.addEventListener('click', this.handleDeleteClick);

      this.$li = this.getChildren('li');
      this.$li.forEach(($li, i)=>{
        $li.textContent = 'list index: ' + i;
      });

      this.$a17 = this.getChild('a17', document);
      console.log(this);
      console.log('/dummyBehavior - init');
    },
    enabled() {
      console.log('dummyBehavior - enabled');
      this.counterInterval = setInterval(this.updateCounter,250);
    },
    resized() {
      console.log('dummyBehavior - resized');
    },
    mediaQueryUpdated() {
      console.log('dummyBehavior - mediaQueryUpdated', A17.currentMediaQuery);
      // current media query is: A17.currentMediaQuery
    },
    disabled() {
      console.log('dummyBehavior - disabled');
      clearInterval(this.counterInterval);
    },
    destroy() {
      console.log('dummyBehavior - destroy');
      // remove any listeners, intervals etc.
      // any variables set to `this` will be automatically removed
      // eg. this.count will be removed automatically
      this.$resetBtn.removeEventListener('click', this.handleResetClick);
      this.$deleteBtn.removeEventListener('click', this.handleDeleteClick);
      clearInterval(this.counterInterval);
    },
  }
);

export default dummyBehavior;