|
|
@@ -8,10 +8,22 @@
|
|
|
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: 50vh;
|
|
|
+ height: 100%;
|
|
|
scrollbar-color: gray #161616;
|
|
|
}
|
|
|
|
|
|
@@ -27,20 +39,143 @@
|
|
|
::-webkit-scrollbar-corner {
|
|
|
background: #161616;
|
|
|
}
|
|
|
- </style>
|
|
|
|
|
|
+ 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: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;
|
|
|
+ user-select: none;
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .outline-node:hover {
|
|
|
+ background-color: #3399ff
|
|
|
+ }
|
|
|
+
|
|
|
+ .git-hub-link {
|
|
|
+ color: white;
|
|
|
+ display: flex;
|
|
|
+ position: absolute;
|
|
|
+ right: 10px;
|
|
|
+ top: 10px;
|
|
|
+ align-items: center;
|
|
|
+ font-family: Roboto, "Helvetica Neue", sans-serif;
|
|
|
+ }
|
|
|
+
|
|
|
+ .outline {
|
|
|
+ width: 250px;
|
|
|
+ min-width: 150px;
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ height: 100%;
|
|
|
+ align-items: stretch;
|
|
|
+ align-content: stretch;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ <link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block" rel="stylesheet">
|
|
|
<script src="./lib/animation-timeline.js" type="text/javascript"></script>
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
- <div>
|
|
|
- <div id="timeline"></div>
|
|
|
- </div>
|
|
|
- <br />
|
|
|
|
|
|
- <div id="currentTime"></div>
|
|
|
- <div id="currentKeyframes"></div>
|
|
|
+ <div class="app-container">
|
|
|
+
|
|
|
+ <main>
|
|
|
+ <aside>
|
|
|
+ </aside>
|
|
|
+ <div class="content">
|
|
|
+ <div id="currentTime"></div>
|
|
|
+ <div id="currentKeyframes"></div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </main>
|
|
|
+ <div class="toolbar">
|
|
|
+ <button class="button mat-icon material-icons mat-icon-no-color" onclick="selectMode()">tab_unselected </button>
|
|
|
+ <button class="button mat-icon material-icons mat-icon-no-color" onclick="panMode()">pan_tool</button>
|
|
|
+ <a class="git-hub-link" href="https://github.com/ievgennaida/animation-timeline-control">GitHub</a>
|
|
|
+
|
|
|
+ </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>
|
|
|
<script type="text/javascript">
|
|
|
+
|
|
|
+ var outlineContainer = document.getElementById('outline-container');
|
|
|
+
|
|
|
let rows = [
|
|
|
{
|
|
|
keyframesStyle: {
|
|
|
@@ -130,11 +265,11 @@
|
|
|
}, {}, {}, {}, {}, {}, {}, {}, {}
|
|
|
];
|
|
|
|
|
|
- let timeline = new timelineModule.Timeline({ id: 'timeline' })
|
|
|
-
|
|
|
+ var timeline = new timelineModule.Timeline()
|
|
|
+ timeline.initialize({ id: 'timeline', headerHeight: 50 })
|
|
|
timeline.setModel({ rows: rows });
|
|
|
|
|
|
- timeline.on("timechanged", function (object) {
|
|
|
+ timeline.onTimeChanged(function (object) {
|
|
|
document.getElementById("currentTime").innerHTML = object.val + "ms";
|
|
|
});
|
|
|
|
|
|
@@ -147,8 +282,52 @@
|
|
|
timeline.onDragStarted(function (obj) { dragHandler(obj, 'dragstarted') });
|
|
|
timeline.onDrag(function (obj) { dragHandler(obj, 'drag') });
|
|
|
timeline.onDragFinished(function (obj) { dragHandler(obj, 'dragfinished') });
|
|
|
- timeline.on('doubleclick', function (obj) { alert(obj.val); });
|
|
|
+ timeline.onDoubleClick(function (obj) { alert(obj.val); });
|
|
|
+ timeline.onScroll(function (obj) {
|
|
|
+ var options = timeline.getOptions();
|
|
|
+ if (options) {
|
|
|
+ if (outlineContainer) {
|
|
|
+ document.getElementById('outline-scroll-container').scrollTop = obj.scrollTop;
|
|
|
+ const headerHeight = obj.scrollHeight - options.headerHeight;
|
|
|
+ outlineContainer.style.height = headerHeight + 'px';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ /* generate outline left nodes */
|
|
|
+ var options = timeline.getOptions();
|
|
|
+ var headerElement = document.getElementById('outline-header');
|
|
|
+ headerElement.style.maxHeight = headerElement.style.minHeight = options.headerHeight + 'px';
|
|
|
+ // headerElement.style.backgroundColor = options.headerFillColor;
|
|
|
+
|
|
|
+ rows.forEach(function (obj, index) {
|
|
|
+ var div = document.createElement('div');
|
|
|
+ div.classList.add('outline-node');
|
|
|
+ div.style.maxHeight = div.style.minHeight = options.rowsStyle.height + 'px';
|
|
|
+ div.style.marginBottom = options.rowsStyle.marginBottom + 'px';
|
|
|
+ div.innerText = "Track " + index;
|
|
|
+ outlineContainer.appendChild(div);
|
|
|
+ });
|
|
|
+ /*Handle events from html page*/
|
|
|
+ function selectMode() {
|
|
|
+ if (timeline) {
|
|
|
+ timeline.setInteractionMode('selector');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ function panMode() {
|
|
|
+ if (timeline) {
|
|
|
+ timeline.setInteractionMode('pan');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // Set scroll back to timeline when mouse scroll over the outline
|
|
|
+ function outlineMouseWheel(event) {
|
|
|
+ if (timeline) {
|
|
|
+ this.timeline._handleWheelEvent(event);
|
|
|
+ }
|
|
|
+ }
|
|
|
</script>
|
|
|
</body>
|
|
|
|
|
|
+
|
|
|
</html>
|
Ievgen Naida