Append node configs to div rather than body

This commit is contained in:
Nick O'Leary 2019-05-03 21:32:12 +01:00
parent d8d37a66e4
commit 67f8ec7f87
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
21 changed files with 62 additions and 68 deletions

View File

@ -38,7 +38,7 @@ var RED = (function() {
newScript.onload = function() { newScript.onload = function() {
scriptCount--; scriptCount--;
if (scriptCount === 0) { if (scriptCount === 0) {
$("body").append(nodeConfigEls); $("#red-ui-editor-node-configs").append(nodeConfigEls);
done() done()
} }
} }
@ -58,7 +58,7 @@ var RED = (function() {
} }
}) })
if (!hasDeferred) { if (!hasDeferred) {
$("body").append(nodeConfigEls); $("#red-ui-editor-node-configs").append(nodeConfigEls);
done(); done();
} }
} catch(err) { } catch(err) {
@ -114,7 +114,7 @@ var RED = (function() {
var configs = data.trim().split(/(?=<!-- --- \[red-module:\S+\] --- -->)/); var configs = data.trim().split(/(?=<!-- --- \[red-module:\S+\] --- -->)/);
var stepConfig = function() { var stepConfig = function() {
if (configs.length === 0) { if (configs.length === 0) {
$("body").i18n(); $("#red-ui-editor").i18n();
$("#red-ui-palette > .red-ui-palette-spinner").hide(); $("#red-ui-palette > .red-ui-palette-spinner").hide();
$(".red-ui-palette-scroll").removeClass("hide"); $(".red-ui-palette-scroll").removeClass("hide");
$("#red-ui-palette-search").removeClass("hide"); $("#red-ui-palette-search").removeClass("hide");
@ -547,6 +547,7 @@ var RED = (function() {
'<div id="red-ui-sidebar"></div>'+ '<div id="red-ui-sidebar"></div>'+
'<div id="red-ui-sidebar-separator"></div>'+ '<div id="red-ui-sidebar-separator"></div>'+
'</div>').appendTo(options.target); '</div>').appendTo(options.target);
$('<div id="red-ui-editor-node-configs"></div>').appendTo(options.target);
$('<div id="red-ui-full-shade" class="hide"></div>').appendTo(options.target); $('<div id="red-ui-full-shade" class="hide"></div>').appendTo(options.target);
$.getJSON(options.apiRootUrl+"theme", function(theme) { $.getJSON(options.apiRootUrl+"theme", function(theme) {
if (theme.header) { if (theme.header) {

View File

@ -131,7 +131,7 @@ RED.popover = (function() {
} }
} }
var closePopup = function(instant) { var closePopup = function(instant) {
$(document).off('mousedown.modal-popover-close'); $(document).off('mousedown.red-ui-popover');
if (!active) { if (!active) {
if (div) { if (div) {
if (instant) { if (instant) {
@ -185,7 +185,7 @@ RED.popover = (function() {
} }
} else if (trigger === 'modal') { } else if (trigger === 'modal') {
$(document).on('mousedown.modal-popover-close', function (event) { $(document).on('mousedown.red-ui-popover', function (event) {
var target = event.target; var target = event.target;
while (target.nodeName !== 'BODY' && target !== div[0]) { while (target.nodeName !== 'BODY' && target !== div[0]) {
target = target.parentElement; target = target.parentElement;

View File

@ -60,7 +60,7 @@
}); });
this.element.on("focus",function() { this.element.on("focus",function() {
$("body").one("mousedown",function() { $(document).one("mousedown",function() {
that.element.blur(); that.element.blur();
}); });
}); });

View File

@ -148,11 +148,11 @@ RED.tabs = (function() {
left: (elementPos.left - collapsibleMenu.width() + selectButton.width())+"px" left: (elementPos.left - collapsibleMenu.width() + selectButton.width())+"px"
}) })
if (collapsibleMenu.is(":visible")) { if (collapsibleMenu.is(":visible")) {
$(document).off("click.tabmenu"); $(document).off("click.red-ui-tabmenu");
} else { } else {
$(".red-ui-menu").hide(); $(".red-ui-menu").hide();
$(document).on("click.tabmenu", function(evt) { $(document).on("click.red-ui-tabmenu", function(evt) {
$(document).off("click.tabmenu"); $(document).off("click.red-ui-tabmenu");
collapsibleMenu.hide(); collapsibleMenu.hide();
}); });
} }

View File

@ -272,7 +272,7 @@ RED.deploy = (function() {
$("#btn-deploy").addClass("disabled"); $("#btn-deploy").addClass("disabled");
deployInflight = true; deployInflight = true;
$("#red-ui-header-shade").show(); $("#red-ui-header-shade").show();
$("#editor-shade").show(); $("#red-ui-editor-shade").show();
$("#red-ui-palette-shade").show(); $("#red-ui-palette-shade").show();
$("#red-ui-sidebar-shade").show(); $("#red-ui-sidebar-shade").show();
@ -307,7 +307,7 @@ RED.deploy = (function() {
$(".deploy-button-content").css('opacity',1); $(".deploy-button-content").css('opacity',1);
$(".deploy-button-spinner").hide(); $(".deploy-button-spinner").hide();
$("#red-ui-header-shade").hide(); $("#red-ui-header-shade").hide();
$("#editor-shade").hide(); $("#red-ui-editor-shade").hide();
$("#red-ui-palette-shade").hide(); $("#red-ui-palette-shade").hide();
$("#red-ui-sidebar-shade").hide(); $("#red-ui-sidebar-shade").hide();
},delta); },delta);
@ -423,7 +423,7 @@ RED.deploy = (function() {
deployInflight = true; deployInflight = true;
$("#red-ui-header-shade").show(); $("#red-ui-header-shade").show();
$("#editor-shade").show(); $("#red-ui-editor-shade").show();
$("#red-ui-palette-shade").show(); $("#red-ui-palette-shade").show();
$("#red-ui-sidebar-shade").show(); $("#red-ui-sidebar-shade").show();
$.ajax({ $.ajax({
@ -493,7 +493,7 @@ RED.deploy = (function() {
$(".deploy-button-content").css('opacity',1); $(".deploy-button-content").css('opacity',1);
$(".deploy-button-spinner").hide(); $(".deploy-button-spinner").hide();
$("#red-ui-header-shade").hide(); $("#red-ui-header-shade").hide();
$("#editor-shade").hide(); $("#red-ui-editor-shade").hide();
$("#red-ui-palette-shade").hide(); $("#red-ui-palette-shade").hide();
$("#red-ui-sidebar-shade").hide(); $("#red-ui-sidebar-shade").hide();
},delta); },delta);

View File

@ -202,7 +202,7 @@
RED.tray.show(trayOptions); RED.tray.show(trayOptions);
} }
} }
$(template).appendTo(document.body); $(template).appendTo("#red-ui-editor-node-configs");
RED.editor.registerTypeEditor("_buffer", definition); RED.editor.registerTypeEditor("_buffer", definition);
})(); })();

View File

@ -346,6 +346,6 @@
RED.tray.show(trayOptions); RED.tray.show(trayOptions);
} }
} }
$(template).appendTo(document.body); $(template).appendTo("#red-ui-editor-node-configs");
RED.editor.registerTypeEditor("_expression", definition); RED.editor.registerTypeEditor("_expression", definition);
})(); })();

View File

@ -96,7 +96,7 @@
RED.tray.show(trayOptions); RED.tray.show(trayOptions);
} }
} }
$(template).appendTo(document.body); $(template).appendTo("#red-ui-editor-node-configs");
RED.editor.registerTypeEditor("_js", definition); RED.editor.registerTypeEditor("_js", definition);
})(); })();

View File

@ -112,6 +112,6 @@
RED.tray.show(trayOptions); RED.tray.show(trayOptions);
} }
} }
$(template).appendTo(document.body); $(template).appendTo("#red-ui-editor-node-configs");
RED.editor.registerTypeEditor("_json", definition); RED.editor.registerTypeEditor("_json", definition);
})(); })();

View File

@ -207,6 +207,6 @@
return toolbar; return toolbar;
} }
} }
$(template).appendTo(document.body); $(template).appendTo("#red-ui-editor-node-configs");
RED.editor.registerTypeEditor("_markdown", definition); RED.editor.registerTypeEditor("_markdown", definition);
})(); })();

View File

@ -36,7 +36,7 @@ RED.eventLog = (function() {
} }
return { return {
init: function() { init: function() {
$(template).appendTo(document.body); $(template).appendTo("#red-ui-editor-node-configs");
RED.actions.add("core:show-event-log",RED.eventLog.show); RED.actions.add("core:show-event-log",RED.eventLog.show);
}, },
show: function() { show: function() {

View File

@ -2227,13 +2227,13 @@ RED.projects = (function() {
open: function(e) { open: function(e) {
$(this).parent().find(".ui-dialog-titlebar-close").hide(); $(this).parent().find(".ui-dialog-titlebar-close").hide();
// $("#red-ui-header-shade").show(); // $("#red-ui-header-shade").show();
// $("#editor-shade").show(); // $("#red-ui-editor-shade").show();
// $("#red-ui-palette-shade").show(); // $("#red-ui-palette-shade").show();
// $("#red-ui-sidebar-shade").show(); // $("#red-ui-sidebar-shade").show();
}, },
close: function(e) { close: function(e) {
// $("#red-ui-header-shade").hide(); // $("#red-ui-header-shade").hide();
// $("#editor-shade").hide(); // $("#red-ui-editor-shade").hide();
// $("#red-ui-palette-shade").hide(); // $("#red-ui-palette-shade").hide();
// $("#red-ui-sidebar-shade").hide(); // $("#red-ui-sidebar-shade").hide();
} }

View File

@ -255,7 +255,7 @@ RED.search = (function() {
if (!visible) { if (!visible) {
RED.keyboard.add("*","escape",function(){hide()}); RED.keyboard.add("*","escape",function(){hide()});
$("#red-ui-header-shade").show(); $("#red-ui-header-shade").show();
$("#editor-shade").show(); $("#red-ui-editor-shade").show();
$("#red-ui-palette-shade").show(); $("#red-ui-palette-shade").show();
$("#red-ui-sidebar-shade").show(); $("#red-ui-sidebar-shade").show();
$("#red-ui-sidebar-separator").hide(); $("#red-ui-sidebar-separator").hide();
@ -276,7 +276,7 @@ RED.search = (function() {
RED.keyboard.remove("escape"); RED.keyboard.remove("escape");
visible = false; visible = false;
$("#red-ui-header-shade").hide(); $("#red-ui-header-shade").hide();
$("#editor-shade").hide(); $("#red-ui-editor-shade").hide();
$("#red-ui-palette-shade").hide(); $("#red-ui-palette-shade").hide();
$("#red-ui-sidebar-shade").hide(); $("#red-ui-sidebar-shade").hide();
$("#red-ui-sidebar-separator").show(); $("#red-ui-sidebar-separator").show();
@ -300,7 +300,7 @@ RED.search = (function() {
$("#red-ui-header-shade").on('mousedown',hide); $("#red-ui-header-shade").on('mousedown',hide);
$("#editor-shade").on('mousedown',hide); $("#red-ui-editor-shade").on('mousedown',hide);
$("#red-ui-palette-shade").on('mousedown',hide); $("#red-ui-palette-shade").on('mousedown',hide);
$("#red-ui-sidebar-shade").on('mousedown',hide); $("#red-ui-sidebar-shade").on('mousedown',hide);
} }

View File

@ -88,7 +88,7 @@ RED.sidebar = (function() {
start:function(event,ui) { start:function(event,ui) {
sidebarSeparator.closing = false; sidebarSeparator.closing = false;
sidebarSeparator.opening = false; sidebarSeparator.opening = false;
var winWidth = $(window).width(); var winWidth = $("#red-ui-editor").width();
sidebarSeparator.start = ui.position.left; sidebarSeparator.start = ui.position.left;
sidebarSeparator.chartWidth = $("#red-ui-workspace").width(); sidebarSeparator.chartWidth = $("#red-ui-workspace").width();
sidebarSeparator.chartRight = winWidth-$("#red-ui-workspace").width()-$("#red-ui-workspace").offset().left-2; sidebarSeparator.chartRight = winWidth-$("#red-ui-workspace").width()-$("#red-ui-workspace").offset().left-2;
@ -252,7 +252,7 @@ RED.sidebar = (function() {
RED.sidebar.config.init(); RED.sidebar.config.init();
RED.sidebar.context.init(); RED.sidebar.context.init();
// hide info bar at start if screen rather narrow... // hide info bar at start if screen rather narrow...
if ($(window).width() < 600) { RED.menu.setSelected("menu-item-sidebar",false); } if ($("#red-ui-editor").width() < 600) { RED.menu.setSelected("menu-item-sidebar",false); }
} }
return { return {

View File

@ -499,8 +499,8 @@ RED.subflow = (function() {
RED.actions.add("core:create-subflow",createSubflow); RED.actions.add("core:create-subflow",createSubflow);
RED.actions.add("core:convert-to-subflow",convertToSubflow); RED.actions.add("core:convert-to-subflow",convertToSubflow);
$(_subflowEditTemplate).appendTo(document.body); $(_subflowEditTemplate).appendTo("#red-ui-editor-node-configs");
$(_subflowTemplateEditTemplate).appendTo(document.body); $(_subflowTemplateEditTemplate).appendTo("#red-ui-editor-node-configs");
} }

View File

@ -16,20 +16,17 @@
RED.touch = RED.touch||{}; RED.touch = RED.touch||{};
RED.touch.radialMenu = (function() { RED.touch.radialMenu = (function() {
var touchMenu = null; var touchMenu = null;
var isActive = false; var isActive = false;
var isOutside = false; var isOutside = false;
var activeOption = null; var activeOption = null;
function createRadial(obj,pos,options) { function createRadial(obj,pos,options) {
isActive = true; isActive = true;
try { try {
var w = $("body").width();
var h = $("body").height();
touchMenu = d3.select("body").append("div") touchMenu = d3.select("body").append("div")
.style({ .style({
position:"absolute", position:"absolute",
@ -43,10 +40,7 @@ RED.touch.radialMenu = (function() {
hide(); hide();
d3.event.preventDefault(); d3.event.preventDefault();
}); });
var menu = touchMenu.append("div") var menu = touchMenu.append("div")
.style({ .style({
position: "absolute", position: "absolute",
@ -58,7 +52,7 @@ RED.touch.radialMenu = (function() {
background: "rgba(255,255,255,0.6)", background: "rgba(255,255,255,0.6)",
border: "1px solid #666" border: "1px solid #666"
}); });
var menuOpts = []; var menuOpts = [];
var createMenuOpt = function(x,y,opt) { var createMenuOpt = function(x,y,opt) {
opt.el = menu.append("div") opt.el = menu.append("div")
@ -74,16 +68,16 @@ RED.touch.radialMenu = (function() {
"text-align": "center", "text-align": "center",
"line-height":"50px" "line-height":"50px"
}); });
opt.el.html(opt.name); opt.el.html(opt.name);
if (opt.disabled) { if (opt.disabled) {
opt.el.style({"border-color":"#ccc",color:"#ccc"}); opt.el.style({"border-color":"#ccc",color:"#ccc"});
} }
opt.x = x; opt.x = x;
opt.y = y; opt.y = y;
menuOpts.push(opt); menuOpts.push(opt);
opt.el.on('touchstart',function() { opt.el.on('touchstart',function() {
opt.el.style("background","#999"); opt.el.style("background","#999");
d3.event.preventDefault(); d3.event.preventDefault();
@ -96,7 +90,7 @@ RED.touch.radialMenu = (function() {
d3.event.stopPropagation(); d3.event.stopPropagation();
}); });
} }
var n = options.length; var n = options.length;
var dang = Math.max(Math.PI/(n-1),Math.PI/4); var dang = Math.max(Math.PI/(n-1),Math.PI/4);
var ang = Math.PI; var ang = Math.PI;
@ -108,7 +102,7 @@ RED.touch.radialMenu = (function() {
} }
ang += dang; ang += dang;
} }
var hide = function() { var hide = function() {
isActive = false; isActive = false;
@ -116,11 +110,11 @@ RED.touch.radialMenu = (function() {
touchMenu.remove(); touchMenu.remove();
touchMenu = null; touchMenu = null;
} }
obj.on('touchend.radial',function() { obj.on('touchend.radial',function() {
obj.on('touchend.radial',null); obj.on('touchend.radial',null);
obj.on('touchmenu.radial',null); obj.on('touchmenu.radial',null);
if (activeOption) { if (activeOption) {
try { try {
activeOption.onselect(); activeOption.onselect();
@ -133,8 +127,6 @@ RED.touch.radialMenu = (function() {
} }
}); });
obj.on('touchmove.radial',function() { obj.on('touchmove.radial',function() {
try { try {
var touch0 = d3.event.touches.item(0); var touch0 = d3.event.touches.item(0);
@ -159,20 +151,20 @@ RED.touch.radialMenu = (function() {
var d = Math.abs((p[0]*p[0])+(p[1]*p[1])); var d = Math.abs((p[0]*p[0])+(p[1]*p[1]));
isOutside = (d > 80*80); isOutside = (d > 80*80);
} }
} catch(err) { } catch(err) {
RED._debug(err); RED._debug(err);
} }
}); });
} catch(err) { } catch(err) {
RED._debug(err); RED._debug(err);
} }
} }
return { return {
show: createRadial, show: createRadial,
active: function() { active: function() {
@ -181,4 +173,3 @@ RED.touch.radialMenu = (function() {
} }
})(); })();

View File

@ -116,7 +116,7 @@ RED.tray = (function() {
function finishBuild() { function finishBuild() {
$("#red-ui-header-shade").show(); $("#red-ui-header-shade").show();
$("#editor-shade").show(); $("#red-ui-editor-shade").show();
$("#red-ui-palette-shade").show(); $("#red-ui-palette-shade").show();
$(".red-ui-sidebar-shade").show(); $(".red-ui-sidebar-shade").show();
tray.preferredWidth = Math.max(el.width(),500); tray.preferredWidth = Math.max(el.width(),500);
@ -206,7 +206,7 @@ RED.tray = (function() {
editorStack = $("#red-ui-editor-stack"); editorStack = $("#red-ui-editor-stack");
$(window).on("resize", handleWindowResize); $(window).on("resize", handleWindowResize);
RED.events.on("sidebar:resize",handleWindowResize); RED.events.on("sidebar:resize",handleWindowResize);
$("#editor-shade").on("click", function() { $("#red-ui-editor-shade").on("click", function() {
if (!openingTray) { if (!openingTray) {
var tray = stack[stack.length-1]; var tray = stack[stack.length-1];
if (tray && tray.primaryButton) { if (tray && tray.primaryButton) {
@ -269,7 +269,7 @@ RED.tray = (function() {
} }
if (stack.length === 0) { if (stack.length === 0) {
$("#red-ui-header-shade").hide(); $("#red-ui-header-shade").hide();
$("#editor-shade").hide(); $("#red-ui-editor-shade").hide();
$("#red-ui-palette-shade").hide(); $("#red-ui-palette-shade").hide();
$(".red-ui-sidebar-shade").hide(); $(".red-ui-sidebar-shade").hide();
RED.events.emit("editor:close"); RED.events.emit("editor:close");

View File

@ -208,13 +208,13 @@ RED.typeSearch = (function() {
dialog.hide(); dialog.hide();
searchResultsDiv.hide(); searchResultsDiv.hide();
} }
$(document).off('mousedown.type-search'); $(document).off('mousedown.red-ui-type-search');
$(document).off('mouseup.type-search'); $(document).off('mouseup.red-ui-type-search');
$(document).off('click.type-search'); $(document).off('click.red-ui-type-search');
setTimeout(function() { setTimeout(function() {
$(document).on('mousedown.type-search',handleMouseActivity); $(document).on('mousedown.red-ui-type-search',handleMouseActivity);
$(document).on('mouseup.type-search',handleMouseActivity); $(document).on('mouseup.red-ui-type-search',handleMouseActivity);
$(document).on('click.type-search',handleMouseActivity); $(document).on('click.red-ui-type-search',handleMouseActivity);
},200); },200);
refreshTypeList(opts); refreshTypeList(opts);
@ -245,9 +245,9 @@ RED.typeSearch = (function() {
} }
RED.events.emit("type-search:close"); RED.events.emit("type-search:close");
RED.view.focus(); RED.view.focus();
$(document).off('mousedown.type-search'); $(document).off('mousedown.red-ui-type-search');
$(document).off('mouseup.type-search'); $(document).off('mouseup.red-ui-type-search');
$(document).off('click.type-search'); $(document).off('click.red-ui-type-search');
} }
} }
function getTypeLabel(type, def) { function getTypeLabel(type, def) {

View File

@ -331,7 +331,7 @@ RED.workspaces = (function() {
$('<div id="red-ui-workspace-chart" tabindex="1"></div>').appendTo("#red-ui-workspace"); $('<div id="red-ui-workspace-chart" tabindex="1"></div>').appendTo("#red-ui-workspace");
$('<div id="red-ui-workspace-toolbar"></div>').appendTo("#red-ui-workspace"); $('<div id="red-ui-workspace-toolbar"></div>').appendTo("#red-ui-workspace");
$('<div id="red-ui-workspace-footer" class="red-ui-component-footer"></div>').appendTo("#red-ui-workspace"); $('<div id="red-ui-workspace-footer" class="red-ui-component-footer"></div>').appendTo("#red-ui-workspace");
$('<div id="editor-shade" class="hide"></div>').appendTo("#red-ui-workspace"); $('<div id="red-ui-editor-shade" class="hide"></div>').appendTo("#red-ui-workspace");
createWorkspaceTabs(); createWorkspaceTabs();

View File

@ -28,7 +28,9 @@ body {
position: absolute; position: absolute;
top: 0; left: 0; bottom: 0; right: 0; top: 0; left: 0; bottom: 0; right: 0;
} }
#red-ui-editor-node-configs {
display: none;
}
#red-ui-main-container { #red-ui-main-container {
position: absolute; position: absolute;
top:40px; left:0; bottom: 0; right:0; top:40px; left:0; bottom: 0; right:0;

View File

@ -154,7 +154,7 @@
background: $background-color; background: $background-color;
color: $workspace-button-color; color: $workspace-button-color;
} }
#red-ui-palette-shade, #editor-shade, #red-ui-header-shade, #red-ui-sidebar-shade { #red-ui-palette-shade, #red-ui-editor-shade, #red-ui-header-shade, #red-ui-sidebar-shade {
@include shade; @include shade;
z-index: 2; z-index: 2;
} }