partyvibes

lines.js

export default params => {
  const store = {};
  let string = '';
  if (params === undefined) {
    params = {count: 6, substract: 0, width: 12, height: 3, substractHeight: 0};
  }
  let {count, substract, width, height, substractHeight} = params;
  if (count === undefined) count = 6;
  if (substract === undefined) substract = 0;
  if (substractHeight === undefined) substractHeight = 0;
  if (width === undefined) width = 12;
  if (height === undefined) height = 3;

  const updateTemplate = i => {
    const span = document.createElement('span');
    span.style.width = `${store.width}px`;
    span.style.height =  `${store.height}px`;
    span.style.backgroundColor = '#FFF';
    span.style.display = 'block';

    store.previousWidth = store.width;
    store.previousheight = store.height;

    if (i === 0) {
      string += span.outerHTML;
    } else {
      string += `<span class="flex"></span>${span.outerHTML}`;
    }
  };

  if (Array.isArray(count)) {
      for (const item of count) {
        const i = count.indexOf(item);
        width = item.width || width;
        if (substract && i > 0) {
          if (substract[i]) store.width = store.previousWidth - substract[i];
          else store.width = store.previousWidth - substract;
        } else {
          store.width = item.width || width;
        }
        if (substractHeight && i > 0) {
          if (substractHeight[i]) store.height =  store.previousheight - substractHeight[i];
          else store.height = store.previousHeight - substractHeight;
        } else {
          store.height = item.height || height;
        }
        updateTemplate(i)
      }
  } else {
    for (var i = 0; i < count; i++) {
      if (substract && i > 0) {
        if (substract[i]) store.width = store.previousWidth - substract[i];
        else store.width = store.previousWidth - substract;
      } else {
        store.width = width;
      }
      if (substractHeight && i > 0) {
        if (substractHeight[i]) store.height =  store.previousheight - substractHeight[i];
        else store.height = store.previousHeight - substractHeight;
      } else {
        store.height = height;
      }
      updateTemplate(i)
    }
  }
  return string
}

party-mixer.js

import define from '../../node_modules/backed/src/utils/define';
import RenderMixin from '../../node_modules/custom-renderer-mixin/src/render-mixin';

import './party-slider';
import lines from './../utils/lines';
export default define(class PartyMixer extends RenderMixin(HTMLElement) {
  constructor() {
    super();
    this.attachShadow({mode: 'open'})
    this._change = this._change.bind(this)
  }

  connectedCallback() {
    if (super.connectedCallback) super.connectedCallback();
    const sliders = this.shadowRoot.querySelectorAll('party-slider');
    sliders.forEach(slider => slider.addEventListener('input', this._change));

    this.render({
      lines: lines({
        count: [
          {height: 2, width: 3},
          {height: 4, width: 3},
          {height: 6, width: 3},
          {height: 8, width: 3},
          {height: 10, width: 3},
          {height: 12, width: 3},
          {height: 14, width: 3},
          {height: 12, width: 3},
          {height: 10, width: 3},
          {height: 8, width: 3},
          {height: 6, width: 3},
          {height: 4, width: 3},
          {height: 2, width: 3}
        ]}),
      verticalLines: lines({
        count: [
          {width: 2, height: 3},
          {width: 4, height: 3},
          {width: 6, height: 3},
          {width: 8, height: 3},
          {width: 10, height: 3},
          {width: 12, height: 3},
          {width: 14, height: 3},
          {width: 12, height: 3},
          {width: 10, height: 3},
          {width: 8, height: 3},
          {width: 6, height: 3},
          {width: 4, height: 3},
          {width: 2, height: 3}
        ]
      })
    })
  }

  _change(event) {
    this.gainChanged(event.path[0]);
  }

  gainChanged(target) {
    this.dispatchEvent(new CustomEvent('gain-change', {
      detail: {
        value: target.value,
        target: target.name
      }})
    )
  }

  get template() {
    return html`
<style>
  :host {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    min-width: 180px;
    height: 100%;

    /* min-height: 256px; */
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
  }

  .gains {
    width: 100%;
  }

  .fade {
    padding: 0 8px;

  }

  .row {
    display: flex;
    flex-direction: row;
  }

  .column {
    display: flex;
    flex-direction: column;
  }

  .flex {
    flex: 1;
  }

  .flex2 {
    flex: 2;
  }

  .center, .center-center {
    align-items: center;
  }

  .center-center {
    justify-content: center;
  }

  .lines.top, .lines.left {
    align-items: flex-end;
  }

  .spacer {
    display: block;
    height: 1px;
    background: #FFF;
    width: 100%;
  }

  party-slider[vertical] {
    height: 76px;
  }
</style>
<span class="flex"></span>
<span class="row gains">
  <span class="flex"></span>

  <span class="column lines left">${'verticalLines'}</span>
  <party-slider vertical name="A"></party-slider>
  <span class="column lines">${'verticalLines'}</span>
  <span class="flex2"></span>

  <span class="column lines left">${'verticalLines'}</span>
  <party-slider vertical name="B"></party-slider>
  <span class="column lines">${'verticalLines'}</span>
  <span class="flex"></span>
</span>

<span class="flex"></span>
<span class="spacer"></span>
<span class="flex"></span>
<span class="fade column">
  <span class="row lines top">${'lines'}</span>
  <party-slider class="fader" name="fader"></party-slider>
  <span class="row lines">${'lines'}</span>
</span>
<span class="flex"></span>
    `;
  }
})