Update a bunch of libraries to typescript

svelte/src/file_viewer/viewers/Image.svelte

@@ -1,6 +1,6 @@
 <script>
 import { createEventDispatcher } from "svelte"
-import { swipe_nav } from "./SwipeNavigate.svelte";
+import { swipe_nav } from "./SwipeNavigate";
 let dispatch = createEventDispatcher()
 
 export const set_file = f => {
@@ -65,11 +65,7 @@ const mouseup = (e) => {
 	}
 }
 
-let swipe_style = ""
-const on_load = () => {
-	dispatch("loading", false)
-	swipe_style = ""
-}
+const on_load = () => dispatch("loading", false)
 </script>
 
 <svelte:window on:mousemove={mousemove} on:mouseup={mouseup} />
@@ -78,8 +74,7 @@ const on_load = () => {
 	bind:this={container}
 	class="container"
 	class:zoom
-	use:swipe_nav={!zoom && is_list}
-	on:style={e => swipe_style = e.detail}
+	use:swipe_nav={{enabled: !zoom && is_list}}
 	on:prev
 	on:next
 >
@@ -92,9 +87,9 @@ const on_load = () => {
 		on:mousedown={mousedown}
 		class="image"
 		class:zoom
-		style={swipe_style}
 		src={file.get_href}
-		alt={file.name} />
+		alt={file.name}
+	/>
 </div>
 
 <style>

svelte/src/file_viewer/viewers/SwipeNavigate.ts

@@ -1,41 +1,42 @@
-<script context="module">
 // Dead zone before the swipe action gets detected
 const swipe_inital_offset = 25
 // Amount of pixels after which the navigation triggers
 const swipe_trigger_offset = 75
 
-export const swipe_nav = (node, swipe_enabled) => {
+export const swipe_nav = (node: HTMLElement, props: { enabled: boolean, previous: boolean, next: boolean }) => {
 	let start_x = 0
 	let start_y = 0
 	let render_offset = 0
-	let enabled = swipe_enabled
+	let enabled = props.enabled === undefined ? true : props.enabled
+	let previous = props.previous === undefined ? true : props.previous
+	let next = props.next === undefined ? true : props.next
 
-	const touchstart = e => {
+	const touchstart = (e: TouchEvent) => {
 		start_x = e.touches[0].clientX
 		start_y = e.touches[0].clientY
 		render_offset = 0
 	}
 
-	const touchmove = e => {
-		if (!enabled) {
+	const touchmove = (e: TouchEvent) => {
+		const offset_x = e.touches[0].clientX - start_x
+		if (!enabled || (offset_x < 0 && !next) || (offset_x > 0 && !previous)) {
 			return
 		}
 
-		const offset_x = e.touches[0].clientX - start_x
 		const abs_x = Math.abs(offset_x)
 		const abs_y = Math.abs(e.touches[0].clientY - start_y)
 		const neg = offset_x < 0 ? -1 : 1
 
 		// The cursor must have moved at least 50 pixels and three times as much
 		// on the x axis than the y axis for it to count as a swipe
-		if (abs_x > swipe_inital_offset && abs_y < abs_x/3) {
-			set_offset((abs_x-swipe_inital_offset)*neg, false)
+		if (abs_x > swipe_inital_offset && abs_y < abs_x / 3) {
+			set_offset((abs_x - swipe_inital_offset) * neg, false)
 		} else {
 			set_offset(0, true)
 		}
 	}
 
-	const touchend = e => {
+	const touchend = (e: TouchEvent) => {
 		if (!enabled) {
 			return
 		}
@@ -51,32 +52,39 @@ export const swipe_nav = (node, swipe_enabled) => {
 		}
 	}
 
-	const set_offset = (off, animate) => {
+	const set_offset = (off: number, animate: boolean) => {
 		render_offset = off
 
-		let detail = "transform: translateX("+off+"px);"
-		if (animate) {
-			detail += "transition: transform 400ms;"
-		}
-
-		// Clear the transformation if the offset is zero
 		if (off === 0) {
-			detail = ""
+			// Clear the transformation if the offset is zero
+			node.style.transform = ""
+			node.style.transition = ""
+		} else {
+			node.style.transform = "translateX(" + off + "px)"
+			if (animate) {
+				node.style.transition = "transform 400ms"
+			}
 		}
-
-		node.dispatchEvent(new CustomEvent("style", {detail: detail}))
 	}
 
 	node.addEventListener("touchstart", touchstart)
 	node.addEventListener("touchmove", touchmove)
 	node.addEventListener("touchend", touchend)
 
+	// Get the child image so we can listen for the loaded event. When the
+	// loaded event fires we clear the transformations so that the image appears
+	// in the original position again
+	for (let i = 0; i < node.childNodes.length; i++) {
+		const child = node.childNodes.item(i)
+		if (child instanceof HTMLImageElement) {
+			child.addEventListener("load", () => set_offset(0, false))
+		}
+	}
+
 	return {
-		update(swipe_enabled) {
-			enabled = swipe_enabled
-			if (!enabled) {
-				render_offset = 0
-			}
+		update(enabled: boolean) {
+			// enabled = swipe_enabled
+			set_offset(0, false)
 		},
 		destroy() {
 			node.removeEventListener("touchstart", touchstart)
@@ -85,4 +93,3 @@ export const swipe_nav = (node, swipe_enabled) => {
 		}
 	}
 }
-</script>