osmos/osmos-custom-elements/osDropdown/osDropdown.js

OSMOS - Symbiosys

import {bindable} from 'aurelia-framework';

export class OsDropdownCustomElement {
  @bindable osTitle;
  @bindable osClass;
  @bindable osWidth;
  @bindable osPlacement;

  constructor() {
    this.osTitle = 'Titre collapse';
    this.definedSize = false;
  }

  attached() {
    document.addEventListener('click', (e) => {
      if(this.activeDrop) {
        this.activeDrop = false;
        return;
      }
      let drop = document.querySelector('os-dropdown .dropdown');
      let el = e.srcElement || e.target;
      if(el != drop) {
        let userbadge = document.querySelector('os-dropdown .os-dropdown > a');
        if(userbadge.classList.contains('visible')) {
          userbadge.classList.remove('visible');
        }
      }
    });
  }

  osDropdown(event) {
    let el = event.srcElement || event.target;
    let sibling = el.nextElementSibling || el.nextSibling;
    if(el.classList.contains('visible')) {
      el.classList.remove('visible');
    } else {
      this.activeDrop = true;
      el.classList.add('visible');
    }
    // placement
    if(this.osPlacement) {
      var parentWidth = el.parentElement.getBoundingClientRect();
      var eventWidth = el.getBoundingClientRect();
      if(this.osPlacement == "right") {
        sibling.style.right = (parentWidth.width - eventWidth.width) + 'px';
      }
    }
    // width
    if(this.osWidth) {
      sibling.style.width = this.osWidth;
    }
    
  }
}