typescript
/
ievgennaida.animation-timeline-control
cermin dari https://github.com/ievgennaida/animation-timeline-control.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
							<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Animation timeline demo</title>
    <style>
      html,
      body {
        margin: 0px;
      }

      .app-container {
        background-color: #1e1e1e;
        scrollbar-color: gray #161616;
        color: #adadad;
        font-size: 12px;
        height: 100vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
      }

      #timeline {
        box-sizing: border-box;
        flex-grow: 8;
        width: 100%;
        height: 100%;
        scrollbar-color: gray #161616;
      }

      ::-webkit-scrollbar {
        background: #161616;
        color: gray;
      }

      ::-webkit-scrollbar-thumb {
        background: gray;
      }

      ::-webkit-scrollbar-corner {
        background: #161616;
      }

      main {
        display: grid;
        /*grid-template-columns: ;*/
        height: 100%;
        width: 100%;
      }

      .button {
        padding: 0px;
        width: 44px;
        min-width: 44px;
        margin-right: 5px;
        color: #adadad;
        background: transparent;
        border: none;
      }

      .button:focus {
        outline: 0;
        border: none;
      }

      .button:hover {
        background: #201616;
      }

      .button:focus {
        border: none;
      }

      main {
        flex-grow: 4;
        height: 0px;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto;
      }

      footer {
        display: flex;
        height: 45%;
        max-height: 70%;
      }

      .toolbar {
        background-color: #383838;
        padding-left: 44px;
        max-height: 36px;
        height: 36px;
        position: relative;
        overflow: hidden;
        display: flex;
        height: 36px;
        background-color: #3c3c3c;
      }

      .outline-header {
        height: 30px;
      }

      .outline-scroll-container {
        overflow: hidden;
      }

      .outline-node {
        padding-left: 20px;
        font-size: 12px !important;
        display: flex;
        align-items: center;
        width: 100%;
        font-family: Roboto, 'Helvetica Neue', sans-serif;
        color: white;
        -webkit-user-select: none;
        user-select: none;
        height: 30px;
      }

      .outline-node:hover {
        background-color: #3399ff;
      }

      .links {
        display: flex;
        align-items: center;
      }

      a {
        font-family: Roboto, 'Helvetica Neue', sans-serif;
        color: white;
        margin-right: 30px;
      }

      .logs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        height: 100%;
      }

      .output {
        height: 100%;
        width: 100%;
      }

      .outline {
        width: 250px;
        min-width: 150px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        height: 100%;
        align-items: stretch;
        align-content: stretch;
      }

      .content {
        overflow: scroll;
      }
    </style>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons&amp;display=block" rel="stylesheet" />
    <script src="./lib/animation-timeline.js?v=2" type="text/javascript"></script>
  </head>

  <body>
    <div class="app-container">
      <main>
        <aside></aside>
        <div class="content">
          <div id="currentTime"></div>
          <div class="logs">
            <div class="output" id="output1"></div>
            <div class="output" id="output2"></div>
          </div>
        </div>
      </main>
      <div class="toolbar">
        <button class="button mat-icon material-icons mat-icon-no-color" title="Timeline selection mode" onclick="selectMode()">tab_unselected</button>
        <button class="button mat-icon material-icons mat-icon-no-color" title="Timeline pan mode with the keyframe selection." onclick="panMode(true)">pan_tool_alt</button>
        <button class="button mat-icon material-icons mat-icon-no-color" title="Timeline pan mode non interactive" onclick="panMode(false)">pan_tool</button>
        <button class="button mat-icon material-icons mat-icon-no-color" title="Timeline zoom mode. Also ctrl + scroll can be used." onclick="zoomMode()">search</button>
        <button class="button mat-icon material-icons mat-icon-no-color" title="Only view mode." onclick="noneMode()">visibility</button>
        <div style="width: 1px; background: gray; height: 100%"></div>
        <button class="button mat-icon material-icons mat-icon-no-color" title="Use external player to play\stop the timeline. For the demo simple setInterval is used." onclick="onPlayClick()">
          play_arrow
        </button>
        <button class="button mat-icon material-icons mat-icon-no-color" title="Use external player to play\stop the timeline. For the demo simple setInterval is used." onclick="onPauseClick()">
          pause
        </button>
        <div style="flex: 1"></div>
        <button class="flex-left button mat-icon material-icons mat-icon-no-color" title="Remove selected keyframe" onclick="removeKeyframe()">close</button>
        <button class="flex-left button mat-icon material-icons mat-icon-no-color" title="Add new track with the keyframe" onclick="addKeyframe()">add</button>
        <div class="links">
          <a class="git-hub-link" href="https://github.com/ievgennaida/animation-timeline-control">GitHub</a>
        </div>
      </div>
      <footer>
        <div class="outline">
          <div class="outline-header" id="outline-header"></div>
          <div class="outline-scroll-container" id="outline-scroll-container" onwheel="outlineMouseWheel(arguments[0])">
            <div class="outline-items" id="outline-container"></div>
          </div>
        </div>
        <div id="timeline"></div>
      </footer>
    </div>
  </body>
  <script src="./demo/demo.js" type="text/javascript"></script>
</html>