Timeline Playground

by Udi Talias

HTML

<script src="https://cdn.jsdelivr.net/npm/@udidu/[email protected]/umd/timeline.min.js"></script>
<h1>
  Present: <span></span>
</h1>
<div class="row">
  <button id="inc">Increment</button>
  <button id="dec">Decrement</button>
  <button id="undo">Undo</button>
  <button id="redo">Redo</button>
</div>

SCSS

h1 {
  padding: 20px 0;
  border-bottom: solid 1px #ccc;
}

.row {
  button {
    padding: 5px 10px;
    border: none;
    background-color: #ccc;
    
    & + button {
      margin-left: 10px;
    }
    
    &:disabled {
      opacity: 0.5;
    }
  }
}

JavaScript

const $ = document.querySelector.bind(document),
		  $present = $("h1 > span"),
		  $inc = $("#inc"),
      $dec = $("#dec"),
      $undo = $("#undo"),
      $redo = $("#redo");

const timeline = new Timeline({
	present: 1
});

updateUI();

function updateUI() {
	$present.innerText = timeline.present;
	$undo.disabled = !timeline.hasPast;
	$redo.disabled = !timeline.hasFuture;
}

function useUpdateUI(fn) {
	return () => {
  	fn();
    updateUI();
  }
}

$inc.addEventListener("click", useUpdateUI(() => {
	timeline.setPresent(timeline.present + 1);
}));

$dec.addEventListener("click", useUpdateUI(() => {
	timeline.setPresent(timeline.present - 1);
}));

$undo.addEventListener("click", useUpdateUI(() => {
	timeline.undo();
}));

$redo.addEventListener("click", useUpdateUI(() => {
	timeline.redo();
}));