Implement plugin dependencies

Allow plugin about page text selection

css/dialogs.css

@@ -1287,13 +1287,6 @@ dialog#edit_bedrock_binding > .dialog_wrapper > .dialog_content {
 		border-radius: 5px;
 		letter-spacing: normal;
 	}
-	#plugin_list .about {
-		overflow-y: auto;
-		max-height: 480px;
-		margin: 6px 0;
-		padding: 6px 12px;
-		background: var(--color-button);
-	}
 	dialog#plugins .author {
 		color: var(--color-subtle_text);
 		margin-top: -6px;
@@ -1362,6 +1355,21 @@ dialog#edit_bedrock_binding > .dialog_wrapper > .dialog_content {
 		font-size: 35px;
 		text-decoration: none;
 	}
+	.plugin_dependencies {
+		color: var(--color-subtle_text);
+		margin: 10px 0;
+	}
+	.plugin_dependencies > a {
+		background-color: var(--color-back);
+		color: var(--color-text);
+		cursor: pointer;
+		padding: 1px 4px;
+		border-radius: 5px;
+		margin-left: 4px;
+	}
+	.plugin_dependencies > a:hover {
+		color: var(--color-light);
+	}
 	.disabled_plugin {
 		color: var(--color-subtle_text);
 	}
@@ -1376,6 +1384,9 @@ dialog#edit_bedrock_binding > .dialog_wrapper > .dialog_content {
 	.plugin_browser_page_header h1 {
 		margin: 0;
 	}
+	#plugin_browser_page .about, #plugin_browser_page .description {
+		user-select: text;
+	}
 	#plugin_page_background_decoration {
 		pointer-events: none;
 		color: black;

css/setup.css

@@ -3,11 +3,17 @@
 	* {
 		margin: 0;
 		padding: 0;
-		user-select: none;
-		-webkit-user-select: none;
 		outline: none;
 		outline-color: rgba(0, 0, 0, 0);
 	}
+	body {
+		user-select: none;
+		-webkit-user-select: none;
+	}
+	body.is_mobile * {
+		user-select: none;
+		-webkit-user-select: none;
+	}
 	/*Webkit*/
 	a[href] {
 	    color: inherit;

js/plugin_loader.js

@@ -43,6 +43,7 @@ class Plugin {
 		this.about = '';
 		this.icon = '';
 		this.tags = [];
+		this.dependencies = [];
 		this.version = '0.0.1';
 		this.variant = 'both';
 		this.min_version = '';
@@ -72,6 +73,7 @@ class Plugin {
 		Merge.boolean(this, data, 'disabled');
 		if (data.creation_date) this.creation_date = Date.parse(data.creation_date);
 		if (data.tags instanceof Array) this.tags.safePush(...data.tags.slice(0, 3));
+		if (data.dependencies instanceof Array) this.dependencies.safePush(...data.dependencies);
 
 		this.new_repo_format = this.min_version != '' && !compareVersions('4.8.0', this.min_version);
 
@@ -85,6 +87,40 @@ class Plugin {
 		return this.title;
 	}
 	async install() {
+		let required_dependencies = this.dependencies
+			.map(id => (Plugins.all.find(p => p.id == id) || id))
+			.filter(p => (p instanceof Plugin == false || p.installed == false));
+		if (required_dependencies.length) {
+			let failed_dependency = required_dependencies.find(p => (!p.isInstallable || p.isInstallable() != true));
+			if (failed_dependency) {
+				let error_message = failed_dependency;
+				if (failed_dependency instanceof Plugin) {
+					error_message = `**${failed_dependency.title}**: ${failed_dependency.isInstallable()}`;
+				}
+				Blockbench.showMessageBox({
+					title: 'message.plugin_dependencies.title',
+					message: `${tl('message.plugin_dependencies.invalid')}\n\n${error_message}`,
+				});
+				return;
+			}
+
+			let list = required_dependencies.map(p => `**${p.title}** ${tl('dialog.plugins.author', [p.author])}`);
+			let response = await new Promise(resolve => {
+				Blockbench.showMessageBox({
+					title: 'message.plugin_dependencies.title',
+					message: `${tl('message.plugin_dependencies.message1')} \n\n* ${ list.join('\n* ') }\n\n${tl('message.plugin_dependencies.message2')}`,
+					buttons: ['dialog.continue', 'dialog.cancel'],
+					width: 512,
+				}, button => {
+					resolve(button == 0);
+				})
+			})
+			if (!response) return;
+
+			for (let dependency of required_dependencies) {
+				await dependency.install();
+			}
+		}
 		return await this.download(true);
 	}
 	async load(first, cb) {
@@ -342,6 +378,7 @@ class Plugin {
 
 		this.unload()
 		this.tags.empty();
+		this.dependencies.empty();
 		Plugins.all.remove(this)
 
 		if (this.source == 'file') {
@@ -475,12 +512,6 @@ Plugins.loading_promise = new Promise((resolve, reject) => {
 		dataType: 'json',
 		success(data) {
 			Plugins.json = data;
-			
-			// testing (todo: remove)
-			data.animation_sliders.icon = 'icon.png';
-			data.animation_sliders.about = '';
-			data.animation_sliders.min_version = '4.8.0';
-			data.animation_sliders.creation_date = '2023-06-23';
 				
 			resolve();
 			Plugins.loading_promise.resolved = true;
@@ -673,6 +704,20 @@ BARS.defineActions(function() {
 					plugin.fetchAbout();
 					this.selected_plugin = plugin;
 				},
+				showDependency(dependency) {
+					let plugin = Plugins.all.find(p => p.id == dependency);
+					if (plugin) {
+						this.selectPlugin(plugin);
+					}
+				},
+				getDependencyName(dependency) {
+					let plugin = Plugins.all.find(p => p.id == dependency);
+					return plugin ? (plugin.title + (plugin.installed ? ' ✓' : '')) : (dependency + ' ⚠');
+				},
+				isDependencyInstalled(dependency) {
+					let plugin = Plugins.all.find(p => p.id == dependency);
+					return plugin && plugin.installed;
+				},
 				getTagClass(tag) {
 					if (tag.match(/^(local|remote)$/i)) {
 						return 'plugin_tag_source'
@@ -771,7 +816,12 @@ BARS.defineActions(function() {
 
 						<div class="description" :class="{disabled_plugin: selected_plugin.disabled}">{{ selected_plugin.description }}</div>
 
-						<div class="button_bar tiny plugin_compatibility_issue" v-if="selected_plugin.isInstallable() != true">
+						<div class="plugin_dependencies" v-if="selected_plugin.dependencies.length">
+							${tl('dialog.plugins.dependencies')}
+							<a v-for="dep in selected_plugin.dependencies" @click="showDependency(dep)" :class="{installed: isDependencyInstalled(dep)}">{{ getDependencyName(dep) }}</a>
+						</div>
+
+						<div class="tiny plugin_compatibility_issue" v-if="selected_plugin.isInstallable() != true">
 							<i class="material-icons icon">error</i>
 							{{ selected_plugin.isInstallable() }}
 						</div>

lang/en.json

@@ -249,6 +249,10 @@
 	"message.add_reference_image.message": "Select where to load the reference image",
 	"message.add_reference_image.project": "Add to this project",
 	"message.add_reference_image.app": "Add to all projects",
+	"message.plugin_dependencies.title": "Plugin Dependencies",
+	"message.plugin_dependencies.message1": "The plugin requires these dependencies:",
+	"message.plugin_dependencies.message2": "Do you want to install them to continue?",
+	"message.plugin_dependencies.invalid": "Unfortunately the plugin cannot be installed, it has an invalid dependency:",
 
 	"message.unsaved_textures.title": "Unsaved Textures",
 	"message.unsaved_textures.message": "Your model has unsaved textures. Make sure to save them and paste them into your resource pack in the correct folder.",
@@ -529,6 +533,7 @@
 	"dialog.plugins.is_disabled": "Disabled",
 	"dialog.plugins.disable": "Disable",
 	"dialog.plugins.enable": "Enable",
+	"dialog.plugins.dependencies": "Depends on:",
 
 	"dialog.load_plugins_from_query.title": "Load Plugins",
 	"dialog.load_plugins_from_query.text": "You used a link that requires plugins to be installed. Would you like to install them?",