From 79461130e9a72ecd0cb99673595cbe6746fb1573 Mon Sep 17 00:00:00 2001
From: Joshua Koo <zz85nus@gmail.com>
Date: Sun, 17 May 2020 17:52:50 -0700
Subject: [PATCH] Make docking window dock at bottom by default

---
 README.md                   | 17 ++++++++++++
 rollup.config.js            | 15 +----------
 src/utils/docking_window.js | 52 +++++++++++++++++++++++--------------
 3 files changed, 51 insertions(+), 33 deletions(-)

diff --git a/README.md b/README.md
index 174cafa..432b92d 100644
--- a/README.md
+++ b/README.md
@@ -68,6 +68,23 @@ or
 1. Select time between 2 keyframes
 2. Select easing type from the dropdown
 
+### Development
+
+To test without compiling, open test_module.html in the browser.
+
+Format code
+
+```
+yarn run fix
+```
+
+Generate Build
+
+```
+yarn run mini
+```
+
+
 ## Releases
 
 1.5.0
diff --git a/rollup.config.js b/rollup.config.js
index 72c128f..22830a0 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -1,17 +1,4 @@
-/*
-import commonjs from '@rollup/plugin-commonjs';
-
-export default {
-	input: 'src/timeliner.js',
-	output: {
-		dir: 'build',
-		format: 'cjs'
-	},
-	plugins: [commonjs()]
-};
-*/
-
-import { terser } from "rollup-plugin-terser";
+simport { terser } from "rollup-plugin-terser";
 
 export default {
 	input: 'src/timeliner.js',
diff --git a/src/utils/docking_window.js b/src/utils/docking_window.js
index 623d67a..d045673 100644
--- a/src/utils/docking_window.js
+++ b/src/utils/docking_window.js
@@ -6,6 +6,7 @@ const SNAP_TOP_EDGE = 'snap-top-edge' // or actually top half
 const SNAP_LEFT_EDGE = 'snap-left-edge'
 const SNAP_RIGHT_EDGE = 'snap-right-edge'
 const SNAP_BOTTOM_EDGE = 'snap-bottom-edge'
+const SNAP_DOCK_BOTTOM = 'dock-bottom'
 
 function setBounds(element, x, y, w, h) {
 	element.style.left = x + 'px';
@@ -108,10 +109,6 @@ function DockingWindow(pane, ghostpane) {
 
 	this.resizes = new Do();
 
-	window.addEventListener('resize', function() {
-		resizeEdges();
-	});
-
 	/* DOM Utils */
 	function hideGhostPane() {
 		// hide the hinter, animatating to the pane's bounds
@@ -119,19 +116,6 @@ function DockingWindow(pane, ghostpane) {
 		ghostpane.style.opacity = 0;
 	}
 
-	setBounds(pane, 0, 0, LayoutConstants.width, LayoutConstants.height);
-	setBounds(ghostpane, 0, 0, LayoutConstants.width, LayoutConstants.height);
-
-	// Mouse events
-	pane.addEventListener('mousedown', onMouseDown);
-	document.addEventListener('mousemove', onMove);
-	document.addEventListener('mouseup', onMouseUp);
-
-	// Touch events
-	pane.addEventListener('touchstart', onTouchDown);
-	document.addEventListener('touchmove', onTouchMove);
-	document.addEventListener('touchend', onTouchEnd);
-
 	function onTouchDown(e) {
 		onDown(e.touches[0]);
 		e.preventDefault();
@@ -304,8 +288,6 @@ function DockingWindow(pane, ghostpane) {
 
 	}
 
-	animate();
-
 	var self = this;
 
 	var snapBounds = {}
@@ -346,6 +328,11 @@ function DockingWindow(pane, ghostpane) {
 			left = 0
 			top = window.innerHeight - height
 			break;
+		case SNAP_DOCK_BOTTOM:
+			width = bounds.width
+			height = bounds.height
+			left = (window.innerWidth - width) * 0.5
+			top = window.innerHeight - height
 		}
 
 		Object.assign(snapBounds, { left, top, width, height });
@@ -385,6 +372,33 @@ function DockingWindow(pane, ghostpane) {
 
 		pointerStart = null;
 	}
+
+	function init() {
+		window.addEventListener('resize', function() {
+			resizeEdges();
+		});
+
+		setBounds(pane, 0, 0, LayoutConstants.width, LayoutConstants.height);
+		setBounds(ghostpane, 0, 0, LayoutConstants.width, LayoutConstants.height);
+
+		// Mouse events
+		pane.addEventListener('mousedown', onMouseDown);
+		document.addEventListener('mousemove', onMove);
+		document.addEventListener('mouseup', onMouseUp);
+
+		// Touch events
+		pane.addEventListener('touchstart', onTouchDown);
+		document.addEventListener('touchmove', onTouchMove);
+		document.addEventListener('touchend', onTouchEnd);
+
+		bounds = pane.getBoundingClientRect();
+		snapType = SNAP_DOCK_BOTTOM
+		resizeEdges();
+
+		animate();
+	}
+
+	init();
 }