BigW Consortium Gitlab

group_name.js 1.8 KB
Newer Older
1 2

import _ from 'underscore';
3 4 5

export default class GroupName {
  constructor() {
6 7 8
    this.titleContainer = document.querySelector('.title-container');
    this.title = document.querySelector('.title');
    this.titleWidth = this.title.offsetWidth;
9
    this.groupTitle = document.querySelector('.group-title');
10
    this.groups = document.querySelectorAll('.group-path');
11 12 13 14 15 16
    this.toggle = null;
    this.isHidden = false;
    this.init();
  }

  init() {
17
    if (this.groups.length > 0) {
18
      this.groups[this.groups.length - 1].classList.remove('hidable');
19 20
      this.toggleHandler();
      window.addEventListener('resize', _.debounce(this.toggleHandler.bind(this), 100));
21 22 23 24
    }
    this.render();
  }

25 26 27 28 29 30 31 32 33 34
  toggleHandler() {
    if (this.titleWidth > this.titleContainer.offsetWidth) {
      if (!this.toggle) this.createToggle();
      this.showToggle();
    } else if (this.toggle) {
      this.hideToggle();
    }
  }

  createToggle() {
35 36 37 38 39
    this.toggle = document.createElement('button');
    this.toggle.className = 'text-expander group-name-toggle';
    this.toggle.setAttribute('aria-label', 'Toggle full path');
    this.toggle.innerHTML = '...';
    this.toggle.addEventListener('click', this.toggleGroups.bind(this));
40
    this.titleContainer.insertBefore(this.toggle, this.title);
41 42 43
    this.toggleGroups();
  }

44 45 46 47 48 49 50 51 52 53 54 55
  showToggle() {
    this.title.classList.add('wrap');
    this.toggle.classList.remove('hidden');
    if (this.isHidden) this.groupTitle.classList.add('is-hidden');
  }

  hideToggle() {
    this.title.classList.remove('wrap');
    this.toggle.classList.add('hidden');
    if (this.isHidden) this.groupTitle.classList.remove('is-hidden');
  }

56 57 58 59 60 61
  toggleGroups() {
    this.isHidden = !this.isHidden;
    this.groupTitle.classList.toggle('is-hidden');
  }

  render() {
62
    this.title.classList.remove('initializing');
63 64
  }
}