From 0f88fd6031fb1738a49982f0bee067a602eb41a6 Mon Sep 17 00:00:00 2001 From: JannisX11 Date: Sat, 24 Dec 2022 14:33:40 +0100 Subject: [PATCH] Refactor showMessageBox Reduce jquery usage Remove some legacy dialog code --- js/api.js | 128 +++-------------------------------- js/edit_sessions.js | 4 +- js/interface/actions.js | 8 ++- js/interface/dialog.js | 110 +++++++++++++++++++++++++++--- js/interface/menu_bar.js | 3 +- js/io/formats/bedrock.js | 16 +---- js/io/formats/bedrock_old.js | 17 +---- js/misc.js | 1 - js/preview/preview.js | 2 +- js/texturing/textures.js | 1 - 10 files changed, 124 insertions(+), 166 deletions(-) diff --git a/js/api.js b/js/api.js index e1051e06..4f99a751 100644 --- a/js/api.js +++ b/js/api.js @@ -100,19 +100,14 @@ const Blockbench = { } return node }, - showQuickMessage(message, time) { - $('#quick_message_box').remove() - var quick_message_box = $('') - $('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 = $(` - -
${tl(options.title)}
-
clear
- `) - - let content = $('
'); - jq_dialog.append(content); - - if (options.message) { - content.append('
'+ - marked(tl(options.message))+ - '
') - } - 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 = $('') - 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($('
').append(buttons)) - buttons.forEach(b => { - b.after(' ') - }) - - - 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) => { diff --git a/js/edit_sessions.js b/js/edit_sessions.js index 80678a3e..df485999 100644 --- a/js/edit_sessions.js +++ b/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) diff --git a/js/interface/actions.js b/js/interface/actions.js index dd5acfc7..8611dce4 100644 --- a/js/interface/actions.js +++ b/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 = $('
'+data.text||''+'
').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 = $('
').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 diff --git a/js/interface/dialog.js b/js/interface/dialog.js index e7c950d3..1577edbd 100644 --- a/js/interface/dialog.js +++ b/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 = $('
') + 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($('
'+ + marked(tl(options.message))+ + '
')[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 = $(' ') + 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 = $('
'); + + buttons.forEach((button, i) => { + if (i) button_bar.append(' ') + 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() } } diff --git a/js/interface/menu_bar.js b/js/interface/menu_bar.js index 272ad946..ce356078 100644 --- a/js/interface/menu_bar.js +++ b/js/interface/menu_bar.js @@ -7,7 +7,8 @@ class BarMenu extends Menu { this.id = id this.children = []; this.condition = options.condition - this.node = $('')[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}`); diff --git a/js/io/formats/bedrock.js b/js/io/formats/bedrock.js index 9e966d14..da12631f 100644 --- a/js/io/formats/bedrock.js +++ b/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() diff --git a/js/io/formats/bedrock_old.js b/js/io/formats/bedrock_old.js index 8d6ad1e4..5d2355f2 100644 --- a/js/io/formats/bedrock_old.js +++ b/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() diff --git a/js/misc.js b/js/misc.js index 415e2d10..82668fa1 100644 --- a/js/misc.js +++ b/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; diff --git a/js/preview/preview.js b/js/preview/preview.js index 35e0c327..7546ecaa 100644 --- a/js/preview/preview.js +++ b/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 = $('
') + var wrapper = Interface.createElement('div', {class: 'single_canvas_wrapper'}); wrapper.append(this.node) $('#preview').append(wrapper) diff --git a/js/texturing/textures.js b/js/texturing/textures.js index bf1f2a40..ca00cfab 100644 --- a/js/texturing/textures.js +++ b/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(); }