Animator Layout

by amindunited

HTML

<div class="app">
  <div class="container">
    
  </div>
  <div class="frames-container">
    
  </div>
  <div class="editor-controls">
    
  </div>
</div>

CSS

.app {
  border-radius: 1rem;
  border: solid 1px gray;
  background-color: white;
  min-height: 50vh;
  padding: 1rem;
}
.container {
  border-radius: 1rem;
  border: solid 1px gray;
  height: 25vw;
}
.frames-container {
  height: 2rem;
  border-radius: 1rem;
  border: solid 1px gray;
  overflow: hidden;
  display: flex;
  gap: 0.1rem;
}
.frame-icon {
  height: 1.8rem;
  border-radius: 0.5rem;
  border: solid 1px gray;
  width: 1rem;
  display: inline-block;
}

.key-frame {
  background-color: rgba(127, 127, 127, 0.5)
}

JavaScript

const keyFrames = {
  0: {
    id: 123445,
    index: 0,
		name: ''
  },
  8: {
    id: 1123445,
    index: 8,
		name: ''
  },
  32: {
    id: 223445,
    index: 32,
		name: ''
  }
};


class FrameMarker extends HTMLElement {
	constructor () {
  	super();
    console.log('???');
  }
  connectedCallback () {
  	this.addEventListener('click', () => {
    	console.log('clicky');
    })
  }
  
}


const redrawFramesView = (keyFrames) => {
  const keyKeys = Object.keys(keyFrames);
  const totalFrames = (+keyKeys[keyKeys.length - 1]) + 1
  const container = document.querySelector('.frames-container');
  const framesClass = `frame-icon`;
  const childElements = Array.from({length: totalFrames}, (v, i) => {
		const isKeyFrame = keyFrames[i]
    let className = `frame-icon-${i+1}`
    const elType = isKeyFrame ? 'frame-marker' : 'div'
    const el = document.createElement(elType);
    el.classList.add(framesClass);
    el.classList.add(className);
    if (isKeyFrame) {
    	el.classList.add('key-frame')
    }
    container.appendChild(el);
    return el;
  });
}

customElements.define("frame-marker", FrameMarker);

redrawFramesView(keyFrames);