Moving ui stuff

README.md

@@ -38,6 +38,12 @@ Include the timeliner.js file.
 <script src="timeliner.js"></script>
 ```
 
+or import via ES modules
+
+```js
+import { Timeliner } from './build/timeliner.min.js'
+```
+
 Load data by code, file upload or loading from saved localStorage.
 
 ```js
@@ -87,6 +93,9 @@ yarn run mini
 
 ## Releases
 
+2.0.0
+- Refactored using ES modules
+
 1.5.0
 - Fix package.json dependencies
 - Easy way to move keyframes (reimplemented block dragging)

src/timeliner.d.ts

@@ -8,7 +8,7 @@ export interface LayerProp {
 
 export class Timeliner {
     constructor(target: Object);
-    setTarget(target: Object);
+    setTarget(target: Object): void;
     openLocalSave(): void;
     save(): void;
     load(): void;

src/timeliner.js

@@ -11,12 +11,12 @@ import { LayoutConstants as Settings } from './layout_constants.js';
 import { utils } from './utils.js'
 import { LayerCabinet } from './view_layer_cabinet.js'
 import { TimelinePanel } from './view_panel.js'
-import { IconButton } from './ui_icon_button.js'
+import { IconButton } from './ui/ui_icon_button.js'
 var style = utils.style
 var saveToFile = utils.saveToFile
 var openAs = utils.openAs
 var STORAGE_PREFIX = utils.STORAGE_PREFIX
-import { ScrollBar } from './ui_scrollbar.js'
+import { ScrollBar } from './ui/ui_scrollbar.js'
 import { DataStore } from './util_datastore.js'
 import { DockingWindow } from './utils/docking_window.js'
 
@@ -720,7 +720,6 @@ function Timeliner(target) {
 		var scrollable_height = Settings.TIMELINE_SCROLL_HEIGHT;
 
 		scrollbar.setHeight(scrollable_height - 2);
-		// scrollbar.setThumb
 
 		style(scrollbar.dom, {
 			top: Settings.MARKER_TRACK_HEIGHT + 'px',

src/ui_canvas.js → src/ui/ui_canvas.js

@@ -1,4 +1,4 @@
-import { handleDrag } from './util_handle_drag.js';
+import { handleDrag } from '../util_handle_drag.js';
 
 function Canvas(w, h) {
 

src/ui_icon_button.js → src/ui/ui_icon_button.js

@@ -1,6 +1,6 @@
-import { font } from './font.js'
-import { Theme } from './theme.js'
-import { utils } from './utils.js'
+import { font } from '../font.js'
+import { Theme } from '../theme.js'
+import { utils } from '../utils.js'
 const { style } = utils
 
 function IconButton(size, icon, tooltip, dispatcher) {

src/ui_number.js → src/ui/ui_number.js

@@ -1,7 +1,7 @@
-import { Theme } from './theme.js'
-import { Do } from './utils/do.js'
-import { handleDrag } from './util_handle_drag.js'
-import { utils } from './utils.js'
+import { Theme } from '../theme.js'
+import { Do } from '../utils/do.js'
+import { handleDrag } from '../util_handle_drag.js'
+import { utils } from '../utils.js'
 const { firstDefined, style } = utils
 	;
 

src/ui_scrollbar.js → src/ui/ui_scrollbar.js

@@ -1,5 +1,5 @@
-import { Do } from './utils/do.js'
-import { utils } from './utils.js'
+import { Do } from '../utils/do.js'
+import { utils } from '../utils.js'
 
 // ********** class: ScrollBar ****************** //
 /*

src/view_layer.js

@@ -1,5 +1,5 @@
 import { Theme } from './theme.js'
-import { UINumber } from './ui_number.js'
+import { UINumber } from './ui/ui_number.js'
 import { Tweens } from './util_tween.js'
 import { LayoutConstants } from './layout_constants.js'
 import { utils } from './utils.js'

src/view_layer_cabinet.js

@@ -1,9 +1,9 @@
 import { LayoutConstants } from './layout_constants.js'
 import { LayerView } from './view_layer.js'
-import { IconButton } from './ui_icon_button.js'
+import { IconButton } from './ui/ui_icon_button.js'
 import { utils } from './utils.js'
 import { Theme } from './theme.js'
-import { UINumber } from './ui_number.js'
+import { UINumber } from './ui/ui_number.js'
 
 
 const { STORAGE_PREFIX, style } = utils

src/view_panel.js

@@ -4,7 +4,7 @@ import { utils }  from './utils.js'
 import { Tweens }  from './util_tween.js'
 import { handleDrag }  from './util_handle_drag.js'
 import { ScrollCanvas }  from './view_time_scroller.js'
-import { Canvas }  from './ui_canvas.js'
+import { Canvas }  from './ui/ui_canvas.js'
 
 const proxy_ctx  = utils.proxy_ctx;
 

test.html

@@ -42,12 +42,12 @@
 
 // timeliner.load({"version":"1.3.0","modified":"Tue Dec 16 2014 10:27:28 GMT+0800 (SGT)","title":"Untitled","layers":[{"name":"a","values":[],"_value":0,"_color":"#9ab426"}],"name":"simple"});
 
-var w2 = window.innerWidth / 2;
-var h2 = window.innerHeight / 2;
-
 function animate() {
 	requestAnimationFrame(animate);
 
+	var w2 = window.innerWidth / 2;
+	var h2 = window.innerHeight / 2;
+
 	box.style.transform = 'translateX(' +  (target.x * 100 + w2) + 'px) translateY(' + (target.y * 100 + h2) + 'px) rotate(' + target.rotate * 50 + 'deg)';
 }
 

test_module.html

@@ -29,29 +29,25 @@
 
 // initialize timeliner
 var timeliner = new Timeliner(target);
-// timeliner.addLayer('x');
-// timeliner.addLayer('y');
-// timeliner.addLayer('rotate');
-
-// var o = {"version":"1.2.0","modified":"Mon Dec 08 2014 10:41:11 GMT+0800 (SGT)","title":"Untitled", "layers": [{"name":"x","values":[],"tmpValue":0,"_color":"#10b00d"},{"name":"y","values":[{"time":0,"value":-1.2999770000000004,"_color":"#4a2392","tween":"quadEaseIn"},{"time":3.3,"value":-1.1999850000000003,"_color":"#cddfd8"}],"tmpValue":-1.2999770000000004,"_color":"#344260"},{"name":"rotate","values":[{"time":0,"value":4.200005,"_color":"#ec9bb5","tween":"quadEaseInOut"},{"time":2.1,"value":28.000009,"_color":"#ac8e14","tween":"quadEaseIn"},{"time":5,"value":50.400018,"_color":"#5c659"}],"tmpValue":50.400018,"_color":"#1fa995"}]};
-// timeliner.load(o);
-
+timeliner.addLayer('x');
+timeliner.addLayer('y');
+timeliner.addLayer('rotate');
 
 timeliner.load({"version":"1.2.0","modified":"Mon Dec 08 2014 10:41:11 GMT+0800 (SGT)","title":"Untitled","layers":[{"name":"x","values":[{"time":0.1,"value":0,"_color":"#893c0f","tween":"quadEaseIn"},{"time":3,"value":3.500023,"_color":"#b074a0"}],"tmpValue":3.500023,"_color":"#6ee167"},{"name":"y","values":[{"time":0.1,"value":0,"_color":"#abac31","tween":"quadEaseOut"},{"time":0.5,"value":-1.000001,"_color":"#355ce8","tween":"quadEaseIn"},{"time":1.1,"value":0,"_color":"#47e90","tween":"quadEaseOut"},{"time":1.7,"value":-0.5,"_color":"#f76bca","tween":"quadEaseOut"},{"time":2.3,"value":0,"_color":"#d59cfd"}],"tmpValue":-0.5,"_color":"#8bd589"},{"name":"rotate","values":[{"time":0.1,"value":-25.700014000000003,"_color":"#f50ae9","tween":"quadEaseInOut"},{"time":2.8,"value":0,"_color":"#2e3712"}],"tmpValue":-25.700014000000003,"_color":"#2d9f57"}]});
 
-// timeliner.load({"version":"1.3.0","modified":"Tue Dec 16 2014 10:27:28 GMT+0800 (SGT)","title":"Untitled","layers":[{"name":"a","values":[],"_value":0,"_color":"#9ab426"}],"name":"simple"});
-
-var w2 = window.innerWidth / 2;
-var h2 = window.innerHeight / 2;
 
 function animate() {
 	requestAnimationFrame(animate);
 
+	var w2 = window.innerWidth / 2;
+	var h2 = window.innerHeight / 2;
+
 	box.style.transform = 'translateX(' +  (target.x * 100 + w2) + 'px) translateY(' + (target.y * 100 + h2) + 'px) rotate(' + target.rotate * 50 + 'deg)';
 }
 
 animate();
 
+
 </script>
 </body>
 </html>