The beginning of an export progress dialog

Author: SnaveSutit

src/index.ts

@@ -48,6 +48,7 @@ import { addTranslations, translate } from './util/translation'
 import * as VirtualFileSystem from './util/virtualFileSystem'
 import { openUnexpectedErrorDialog } from './ui/popups/unexpectedError'
 import * as minecraft from './minecraft'
+import { openAJExportInProgressDialog } from './ui/ajExportInProgress'
 
 Prism.languages.mcfunction = {}
 
@@ -70,6 +71,7 @@ globalThis.AnimatedJava = {
 	// Expose this plugin's events to other plugins
 	events,
 	openUnexpectedErrorDialog,
+	openAJExportInProgressDialog,
 
 	API: {
 		Settings: AJSettings,

src/lang/en.yaml

@@ -19,6 +19,9 @@ animated_java.dialog.close_button: Done
 ### About
 animated_java.dialog.about.title: About Animated Java
 
+### Export in Progress
+animated_java.dialog.export_in_progress.title: Exporting Project...
+
 ### Settings
 animated_java.settings.accessability_options_group: Accessability
 

src/ui/ajExportInProgress.ts

@@ -0,0 +1,16 @@
+import { translate } from '../util/translation'
+import { SvelteDialog } from './util/svelteDialog'
+import ExportInProgressComponent from './components/exportInProgress.svelte'
+
+export function openAJExportInProgressDialog() {
+	const dialog = new SvelteDialog({
+		title: translate('animated_java.dialog.export_in_progress.title'),
+		id: 'animated_java:export_in_progress',
+		width: 600,
+		buttons: [],
+		svelteComponent: ExportInProgressComponent,
+		svelteComponentProps: {},
+	}).show()
+	open_interface = {} as Dialog
+	return dialog
+}

src/ui/components/exportInProgress.svelte

@@ -0,0 +1,39 @@
+<script lang="ts" context="module">
+	import { tweened } from 'svelte/motion'
+	import { cubicOut } from 'svelte/easing'
+</script>
+
+<script lang="ts">
+	import { onDestroy } from 'svelte'
+
+	jQuery('.dialog_close_button').remove()
+
+	const progress = tweened(0, {
+		duration: 100,
+		easing: cubicOut,
+	})
+
+	const interval = setInterval(() => {
+		// @ts-ignore
+		progress.set(Prop.progress)
+	}, 16)
+
+	onDestroy(() => {
+		clearInterval(interval)
+	})
+</script>
+
+<div class="progress-bar-container">
+	<progress value={$progress} />
+</div>
+
+<style>
+	.progress-bar-container {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+	}
+	progress {
+		flex-grow: 1;
+	}
+</style>

src/ui/util/svelteDialog.ts

@@ -26,7 +26,6 @@ export class SvelteDialog extends Dialog {
 		this.onOpen = () => {
 			const parentElement = mount.parentElement
 			if (this.instance || !parentElement) return
-			// console.log('onOpen')
 			parentElement.style.overflow = 'visible'
 			this.instance = new options.svelteComponent({
 				target: parentElement,
@@ -43,19 +42,19 @@ export class SvelteDialog extends Dialog {
 		this.onButton = (...args) => {
 			if (!this.instance) return
 			// console.log('onButton')
-			this.instance.$destroy()
-			this.instance = undefined
 			if (super.onButton) super.onButton(...args)
 			if (options.onClose) options.onClose()
+			this.instance.$destroy()
+			this.instance = undefined
 		}
 
 		this.onCancel = (...args) => {
 			if (!this.instance) return
 			// console.log('onCancel')
-			this.instance.$destroy()
-			this.instance = undefined
 			if (super.onCancel) super.onCancel(...args)
 			if (options.onClose) options.onClose()
+			this.instance.$destroy()
+			this.instance = undefined
 		}
 	}
 }