improved TOC resizer logic

gui/app/components/document/document-toc.js

@@ -53,6 +53,8 @@ export default Component.extend(NotifierMixin, {
 
 		this.eventBus.subscribe('documentPageAdded', this, 'onDocumentPageAdded');
 		this.eventBus.subscribe('resized', this, 'onResize');
+
+		this.attachResizer();
 	},
 
 	willDestroyElement() {
@@ -90,20 +92,38 @@ export default Component.extend(NotifierMixin, {
 				let l = i.left - 100;
 				if (l > 350) l = 350;
 				$("#doc-toc").width(l);
-			}
-		}
 
+				$("#doc-toc").css({
+					'display': 'inline-block',
+					'position': 'fixed',
+					'width': l+'px',
+					'height': 'auto',
+					'transform': '',
+				});
+			}
+		} else {
+			$("#doc-toc").css({
+				'display': 'block',
+				'position': 'relative',
+				'width': '100%',
+				'height': '500px',
+				'transform': 'none',
+			});
+		}
+	},
+
+	attachResizer() {
 		schedule('afterRender', () => {
 			interact('#doc-toc')
 				.draggable({
 					autoScroll: true,
+					inertia: false,
 					onmove: dragMoveListener,
-					// inertia: true,
+					// restrict: {
-					restrict: {
+					// 	restriction: "body",
-						// restriction: ".body",
+					// 	endOnly: true,
-						// endOnly: true,
+					// 	elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
-						// elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
+					// }
-					}
 				})
 				.resizable({
 					// resize from all edges and corners
@@ -114,9 +134,9 @@ export default Component.extend(NotifierMixin, {
 					// 	endOnly: true,
 					// },
 					// minimum size
-					restrictSize: {
+					// restrictSize: {
-						min: { width: 250, height: 65 },
+					// 	min: { width: 250, height: 65 },
-					}
+					// }
 				})
 				.on('resizemove', function (event) {
 					var target = event.target,
@@ -155,7 +175,7 @@ export default Component.extend(NotifierMixin, {
 		}
 
 		// this is used later in the resizing and gesture demos
-		window.dragMoveListener = dragMoveListener;
+		// window.dragMoveListener = dragMoveListener;
 	},
 
 	// Controls what user can do with the toc (left sidebar)

gui/app/styles/view/document/doc-toc.scss

@@ -8,6 +8,11 @@
     overflow: scroll;
     box-sizing: border-box; // ensures width/height properties (and min/max properties) includes content, padding and border
     z-index: 777;
+    display: block;
+    position: relative; //
+    width: 100%; //
+    height: 500px;
+    transform: none; //
 
     > .header {
         @include sticky();
@@ -87,12 +92,3 @@
     -webkit-transform: translate(0px, 0px);
     transform: translate(0px, 0px);
 }
-
-.document-toc-small {
-    display: inline-block;
-    position: relative !important;
-    margin: 0;
-    width: 100% !important;
-    height: 500px;
-    transform: none !important;
-}

gui/app/templates/components/document/document-toc.hbs

@@ -1,4 +1,4 @@
-<div id="doc-toc" class="document-toc {{if isDesktop 'document-toc-desktop' 'document-toc-small'}}">
+<div id="doc-toc" class="document-toc {{if isDesktop 'document-toc-desktop'}}">
     <div class="header">
         <div class="title">Table of contents</div>
         {{#if session.authenticated}}