Refactor showMessageBox

Reduce jquery usage
Remove some legacy dialog code

js/api.js

@@ -100,19 +100,14 @@ const Blockbench = {
 		}
 		return node
 	},
-	showQuickMessage(message, time) {
-		$('#quick_message_box').remove()
-		var quick_message_box = $('<div id="quick_message_box" class="hidden"></div>') 
-		$('body').append(quick_message_box)
-		
-		quick_message_box.text(tl(message))
-		quick_message_box.fadeIn(0)
+	showQuickMessage(message, time = 1000) {
+		document.getElementById('quick_message_box').remove()
+		let quick_message_box = Interface.createElement('div', {id: 'quick_message_box'}, tl(message));
+		document.body.append(quick_message_box);
+
 		setTimeout(function() {
-			quick_message_box.fadeOut(0)
-			setTimeout(function() {
-				quick_message_box.remove()
-			}, 1)
-		}, time ? time : 1000)
+			quick_message_box.remove()
+		}, time);
 	},
 	/**
 	 * 
@@ -196,114 +191,7 @@ const Blockbench = {
 		}
 	},
 	showMessageBox(options = 0, cb) {
-
-		if (options.confirm === undefined) options.confirm = 0
-		if (options.cancel === undefined) options.cancel = (options.buttons && options.buttons.length) ? options.buttons.length-1 : 0;
-		if (!options.buttons) options.buttons = [tl('dialog.ok')]
-
-		if (options.translateKey) {
-			if (!options.title) options.title = tl('message.'+options.translateKey+'.title')
-			if (!options.message) options.message = tl('message.'+options.translateKey+'.message')
-		}
-
-		var jq_dialog = $(`
-			<dialog class="dialog" style="width: auto;" id="message_box">
-				<div class="dialog_handle"><div class="dialog_title">${tl(options.title)}</div></div>
-				<div class="dialog_close_button" onclick="open_interface.cancel()"><i class="material-icons">clear</i></div>
-			</dialog>`)
-
-		let content = $('<div class="dialog_content"></div>');
-		jq_dialog.append(content);
-
-		if (options.message) {
-			content.append('<div class="dialog_bar markdown" style="height: auto; min-height: 56px; margin-bottom: 16px;">'+
-				marked(tl(options.message))+
-			'</div></div>')
-		}
-		if (options.icon) {
-			jq_dialog.find('.dialog_bar').prepend($(Blockbench.getIconNode(options.icon)).addClass('message_box_icon'))
-		}
-
-		if (options.commands) {
-			let list = Interface.createElement('ul');
-			for (let id in options.commands) {
-				let command = options.commands[id];
-				if (!Condition(command.condition)) continue;
-				let text = tl(typeof command == 'string' ? command : command.text);
-				let entry = Interface.createElement('li', {class: 'dialog_message_box_command'}, text)
-				entry.addEventListener('click', e => {
-					close(id);
-				})
-				list.append(entry);
-			}
-			content.append(list);
-		}
-
-		function close(button) {
-			hideDialog();
-			setTimeout(function() {
-				jq_dialog.remove();
-			},200)
-			if (cb) {
-				cb(button);
-			}
-		}
-
-		var buttons = []
-
-		options.buttons.forEach(function(b, i) {
-			var btn = $('<button type="button">'+tl(b)+'</button>')
-			btn.click(function(e) {
-				close(i);
-			})
-			buttons.push(btn);
-		})
-		jq_dialog.hide = function() {
-			$(jq_dialog.find('button').get(options.cancel)).click()
-		}
-		buttons[options.confirm].addClass('confirm_btn')
-		buttons[options.cancel].addClass('cancel_btn')
-		jq_dialog.append($('<div class="dialog_bar button_bar"></div>').append(buttons))
-		buttons.forEach(b => {
-			b.after('&nbsp;')
-		})
-
-
-		jq_dialog.addClass('draggable')
-		jq_dialog.draggable({
-			handle: ".dialog_handle",
-			containment: '#page_wrapper'
-		})
-		var x = (window.innerWidth-540)/2
-		jq_dialog.css('left', x+'px')
-		jq_dialog.css('position', 'absolute')
-
-		$('#dialog_wrapper').append(jq_dialog)
-		jq_dialog.show()
-
-		jq_dialog[0].style.zIndex = 21 + Dialog.stack.length * 2;
-		
-		let blackout = document.getElementById('blackout');
-		blackout.style.display = 'block';
-		blackout.classList.toggle('darken', true);
-		blackout.style.zIndex = 20 + Dialog.stack.length * 2;
-
-		jq_dialog.css('top', limitNumber(window.innerHeight/2-jq_dialog.height()/2 - 140, 0, 2000)+'px')
-		if (options.width) {
-			jq_dialog.css('width', options.width+'px')
-		} else {
-			jq_dialog.css('width', limitNumber(options.buttons.length*170+44, 380, 894)+'px')
-		}
-		open_dialog = 'message_box'
-		open_interface = {
-			confirm() {
-				close(options.confirm);
-			},
-			cancel() {
-				close(options.cancel);
-			}
-		}
-		return jq_dialog
+		new MessageBox(options, cb).show();
 	},
 	async textPrompt(title, value, callback, placeholder = null) {
 		let answer = await new Promise((resolve) => {

js/edit_sessions.js

@@ -97,7 +97,7 @@ class EditSession {
 					translateKey: 'invalid_session',
 					icon: 'cloud_off',
 				}, result => {
-					showDialog('edit_sessions');
+					BarItems.edit_session.click();
 				})
 				return;
 			}
@@ -113,7 +113,7 @@ class EditSession {
 				this.quit()
 			})
 			conn.on('open', () => {
-				hideDialog()
+				if (Dialog.open && Dialog.open.id == 'edit_session') Dialog.open.cancel();
 				this.host = conn;
 				this.setState(true);
 				this.initConnection(conn)

js/interface/actions.js

@@ -1158,7 +1158,7 @@ class BarText extends Widget {
 		super(id, data);
 		this.type = 'bar_text'
 		this.icon = 'text_format'
-		this.node = $('<div class="tool widget bar_text">'+data.text||''+'</div>').get(0)
+		this.node = Interface.createElement('div', {class: 'tool widget bar_text'}, data.text);
 		if (data.right) {
 			this.node.classList.add('f_right');
 		}
@@ -1195,8 +1195,10 @@ class ColorPicker extends Widget {
 		var scope = this;
 		this.type = 'color_picker'
 		this.icon = 'color_lens'
-		this.node = $('<div class="tool widget"><input class="f_left" type="text"></div>').get(0)
-		this.addLabel()
+		this.node = Interface.createElement('div', {class: 'tool widget'}, [
+			Interface.createElement('input', {class: 'f_left', type: 'text'})
+		]);
+		this.addLabel();
 		this.jq = $(this.node).find('input')
 		if (typeof data.onChange === 'function') {
 			this.onChange = data.onChange

js/interface/dialog.js

@@ -286,7 +286,7 @@ function buildLines(dialog) {
 	dialog.lines.forEach(l => {
 		if (typeof l === 'object' && (l.label || l.widget)) {
 
-			let bar = $('<div class="dialog_bar"></div>')
+			let bar = Interface.createElement('div', {class: 'dialog_bar'});
 			if (l.label) {
 				label = Interface.createElement('label', {class: 'name_space_left'}, tl(l.label)+(l.nocolon?'':':'))
 				bar.append(label);
@@ -795,12 +795,6 @@ window.ShapelessDialog = class ShapelessDialog extends Dialog {
 
 		if (options.build) this.build = options.build;
 	}
-	confirm(event) {
-		this.close(this.confirmIndex, event);
-	}
-	cancel(event) {
-		this.close(this.cancelIndex, event);
-	}
 	close(button, event) {
 		if (button == this.confirmIndex && typeof this.onConfirm == 'function') {
 			let result = this.onConfirm(event);
@@ -824,7 +818,107 @@ window.ShapelessDialog = class ShapelessDialog extends Dialog {
 		}
 	}
 	delete() {
-		$(this.object).remove()
+		this.object.remove()
+	}
+}
+
+window.MessageBox = class MessageBox extends Dialog {
+	constructor(options, callback) {
+		super(options.id, options);
+		this.options = options;
+		if (!options.buttons) this.buttons = ['dialog.ok'];
+		this.callback = callback;
+	}
+	close(button, event) {
+		if (this.callback) this.callback(button, event);
+		this.hide();
+		this.delete();
+	}
+	build() {
+		let options = this.options;
+
+		if (options.translateKey) {
+			if (!options.title) options.title = tl('message.'+options.translateKey+'.title')
+			if (!options.message) options.message = tl('message.'+options.translateKey+'.message')
+		}
+		let content = Interface.createElement('div', {class: 'dialog_content'});
+		this.object = Interface.createElement('dialog', {class: 'dialog', style: 'width: auto;', id: 'message_box'}, [
+			Interface.createElement('div', {class: 'dialog_handle'}, Interface.createElement('div', {class: 'dialog_title'}, tl(options.title))),
+			Interface.createElement('div', {class: 'dialog_close_button', onclick: 'Dialog.open.cancel()'}, Blockbench.getIconNode('clear')),
+			content
+		]);
+		let jq_dialog = $(this.object);
+
+		if (options.message) {
+			content.append($('<div class="dialog_bar markdown" style="height: auto; min-height: 56px; margin-bottom: 16px;">'+
+				marked(tl(options.message))+
+			'</div></div>')[0]);
+		}
+		if (options.icon) {
+			jq_dialog.find('.dialog_bar').prepend($(Blockbench.getIconNode(options.icon)).addClass('message_box_icon'))
+		}
+
+		if (options.commands) {
+			let list = Interface.createElement('ul');
+			for (let id in options.commands) {
+				let command = options.commands[id];
+				if (!Condition(command.condition)) continue;
+				let text = tl(typeof command == 'string' ? command : command.text);
+				let entry = Interface.createElement('li', {class: 'dialog_message_box_command'}, text)
+				entry.addEventListener('click', e => {
+					this.close(id);
+				})
+				list.append(entry);
+			}
+			content.append(list);
+		}
+
+		// Buttons
+		if (this.buttons.length) {
+
+			let buttons = []
+			this.buttons.forEach((b, i) => {
+				let btn = $('<button type="button">'+tl(b)+'</button> ')
+				buttons.push(btn)
+				btn.on('click', (event) => {
+					this.close(i, event);
+				})
+			})
+			buttons[this.confirmIndex] && buttons[this.confirmIndex].addClass('confirm_btn')
+			buttons[this.cancelIndex] && buttons[this.cancelIndex].addClass('cancel_btn')
+			let button_bar = $('<div class="dialog_bar button_bar"></div>');
+
+			buttons.forEach((button, i) => {
+				if (i) button_bar.append('&nbsp;')
+				button_bar.append(button)
+			})
+
+			jq_dialog.append(button_bar[0]);
+		}
+
+		//Draggable
+		if (this.draggable !== false) {
+			jq_dialog.addClass('draggable')
+			jq_dialog.draggable({
+				handle: ".dialog_handle",
+				containment: '#page_wrapper'
+			})
+			this.object.style.position = 'absolute';
+		}
+
+		let x = (window.innerWidth-540)/2
+		this.object.style.left = x+'px';
+		this.object.style.position = 'absolute';
+
+		this.object.style.top = limitNumber(window.innerHeight/2-jq_dialog.height()/2 - 140, 0, 2000)+'px';
+		if (options.width) {
+			this.object.style.width = options.width+'px'
+		} else {
+			this.object.style.width = limitNumber((options.buttons ? options.buttons.length : 1) * 170+44, 380, 894)+'px';
+		}
+	}
+	delete() {
+		this.object.remove()
 	}
 }
 

js/interface/menu_bar.js

@@ -7,7 +7,8 @@ class BarMenu extends Menu {
 		this.id = id
 		this.children = [];
 		this.condition = options.condition
-		this.node = $('<ul class="contextMenu"></ul>')[0]
+		this.node = document.createElement('ul');
+		this.node.className = 'contextMenu';
 		this.node.style.minHeight = '8px';
 		this.node.style.minWidth = '150px';
 		this.name = tl(options.name || `menu.${id}`);

js/io/formats/bedrock.js

@@ -691,16 +691,6 @@ function calculateVisibleBox() {
 		group.addTo(parent_group)
 	}
 	function parseGeometry(data) {
-		if (data === undefined) {
-			pe_list_data.forEach(function(s) {
-				if (s.selected === true) {
-					data = s
-				}
-			})
-			if (data == undefined) {
-				data = pe_list_data[0]
-			}
-		}
 
 		let {description} = data.object;
 		let geometry_name = (description.identifier && description.identifier.replace(/^geometry\./, '')) || '';
@@ -712,8 +702,7 @@ function calculateVisibleBox() {
 			Project.close().then(() =>  {
 				existing_tab.select();
 			});
-			pe_list_data.length = 0;
-			hideDialog()
+			if (Dialog.open) Dialog.open.hide();
 			return;
 		}
 
@@ -754,8 +743,7 @@ function calculateVisibleBox() {
 
 		codec.dispatchEvent('parsed', {model: data.object});
 
-		pe_list_data.length = 0;
-		hideDialog()
+		if (Dialog.open) Dialog.open.hide();
 
 		loadTextureDraggable()
 		Canvas.updateAllBones()

js/io/formats/bedrock_old.js

@@ -1,17 +1,6 @@
 (function() {
 
 function parseGeometry(data) {
-	if (data === undefined) {
-		pe_list_data.forEach(function(s) {
-			if (s.selected === true) {
-				data = s
-			}
-		})
-		if (data == undefined) {
-			data = pe_list_data[0]
-		}
-	}
-
 	let geometry_name = data.name.replace(/^geometry\./, '');
 
 	let existing_tab = isApp && ModelProject.all.find(project => (
@@ -21,8 +10,7 @@ function parseGeometry(data) {
 		Project.close().then(() =>  {
 			existing_tab.select();
 		});
-		pe_list_data.length = 0;
-		hideDialog()
+		if (Dialog.open) Dialog.open.hide();
 		return;
 	}
 
@@ -127,8 +115,7 @@ function parseGeometry(data) {
 
 	codec.dispatchEvent('parsed', {model: data.object});
 
-	pe_list_data.length = 0;
-	hideDialog()
+	if (Dialog.open) Dialog.open.hide();
 
 	loadTextureDraggable()
 	Canvas.updateAllBones()

js/misc.js

@@ -1,6 +1,5 @@
 var osfs = '/'
 var uv_clipboard;
-var pe_list_data = []
 var open_dialog = false;
 var open_interface = false;
 var tex_version = 1;

js/preview/preview.js

@@ -1460,7 +1460,7 @@ class Preview {
 		quad_previews.enabled = false;
 		$('#preview > .quad_canvas_wrapper, #preview > .single_canvas_wrapper').remove()
 
-		var wrapper = $('<div class="single_canvas_wrapper"></div>')
+		var wrapper = Interface.createElement('div', {class: 'single_canvas_wrapper'});
 		wrapper.append(this.node)
 		$('#preview').append(wrapper)
 

js/texturing/textures.js

@@ -804,7 +804,6 @@ class Texture {
 		if (!no_update) {
 			Canvas.updateAllFaces()
 			TextureAnimator.updateButton()
-			hideDialog()
 			if (UVEditor.texture == this) {
 				UVEditor.vue.updateTexture();
 			}