Last active
December 29, 2022 14:56
-
-
Save afifabroory/0dd686dfdc1ff30c864b202f2ebeefde to your computer and use it in GitHub Desktop.
[PoC] org-chart-editor-2 for next release
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
demo-video.mp4