[PoC] org-chart-editor-2 for next release

index.html

<style>

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
  font-size: 16px;
  outline: 1px solid #333;
}

.active-accordion, .accordion:hover {
  background-color: #ccc;
}


.accordion:after {
  content: '\02795'; 
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}

.active-accordion:after {
  content: "\2796"; 
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

a, figure {
    display: inline-block;
}

figcaption {
    margin: 5px 0 0 0;
    font-variant: small-caps;
    font-family: Arial;
    font-weight: bold;
    color: #666;
    text-align: center;
}

figure {
    padding: 5px;
    margin: 20px 10px;
}

img:hover {
    transform: scale(0.978);
}
img {
    transition: transform 0.2s;
}

#imageContainer {
	padding: 20px;
	overflow-y: scroll;
	height: 250px;
	margin-bottom: 12px;
}

#imageContainer  input[type="radio"] {
	display: none;
}
  
#imageContainer  img {
	padding: 5px;
	margin: 5px;
}
  
#imageContainer input[type="radio"]:checked + figure img {
	background-color: #999;
}

#imageContainer input[type="radio"]:checked + figure figcaption {
	color: #333;
}

</style>
<div id="imageContainer"></div>

<script>
  var element = []
  const registerElement = (e) => {element.push(e)}

  var button = []
  const registerButton = (e) => {button.push(e)}

  const hide = (pos) => {
    element[pos].style.display = 'none'
    button[pos].classList.remove('active-accordion')
  }

  const openElement = (pos) => {
    element[pos].style.display = 'block'
    button[pos].classList.add('active-accordion')
  }

  const accordionHook = (i) => {
    // Is the accordion already opened?
    if (element[i].style.display === 'block') {
      hide(i)
      return;
    }

    openElement(i)
    button[i].scrollIntoView(true)
  }

  const showImages = (data, container, isFirst = false) => {
    let content = document.createElement('div');

    if (isFirst)
      content.style.display = 'block'
    else 
      content.style.display = 'none'

    data.forEach((e, i) => {
      let label = document.createElement('label');
	
			let input = document.createElement('input');
			input.type = 'radio';
			input.name = 'images';
			input.value = i;
      
      let figure = document.createElement('figure')
      
      let imageContent = new Image()
      imageContent.src = e["photo"]
      imageContent.width = 80  // Testing purposes

      let name = document.createElement('figcaption')
      name.innerText = e['name']

      let position = document.createElement('figcaption')
      position.innerText = e['position']

      figure.appendChild(imageContent)
      figure.appendChild(name)
      figure.appendChild(position)
      
      label.appendChild(input)
      label.appendChild(figure)

      content.appendChild(label)
    })
    container.appendChild(content)

    // Register content
    registerElement(content)
  }

  let data = {"High Quality":[{"name":"NAME_1","position":"POSITION_1","photo":"https://via.placeholder.com/80"},{"name":"NAME_2","position":"POSITION_2","photo":"https://via.placeholder.com/120"},{"name":"NAME_3","position":"POSITION_3","photo":"https://via.placeholder.com/400"},{"name":"NAME_4","position":"POSITON_4","photo":"https://via.placeholder.com/300"}],"Low Quality":[{"name":"NAME_1","position":"POSITION_1","photo":"https://via.placeholder.com/80"},{"name":"NAME_2","position":"POSITION_2","photo":"https://via.placeholder.com/120"},{"name":"NAME_3","position":"POSITION_3","photo":"https://via.placeholder.com/400"},{"name":"NAME_4","position":"POSITON_4","photo":"https://via.placeholder.com/300"}]}

  Array("Low Quality", 'High Quality').forEach((e, i) => {
    let contentWrapper = document.createElement('div')

    let abtn = document.createElement('button')
    abtn.classList.add('accordion')
    abtn.style.width = '100%'
    abtn.setAttribute('id', i)
    abtn.innerText = e;

    abtn.addEventListener('click', (j) => {
      if (j.target.getAttribute('content-loaded') === '0') {
        showImages(data[e], contentWrapper)
        j.target.setAttribute('content-loaded', 1)
      }
      accordionHook(i)
    })

    contentWrapper.appendChild(abtn)

    // Content of accordion only get loaded at the first time
    // on the first category.
    if (i == 0) {
      showImages(data[e], contentWrapper, true)
      abtn.classList.add('active-accordion')
      abtn.setAttribute('content-loaded', 1)
    } else
      abtn.setAttribute('content-loaded', 0)

    document.getElementById('imageContainer').appendChild(contentWrapper);
    registerButton(abtn)
  })
</script>

demo-video.mp4