diff --git a/editor/js/main.js b/editor/js/main.js index 110ac2e35..d6197f82d 100644 --- a/editor/js/main.js +++ b/editor/js/main.js @@ -160,7 +160,10 @@ var RED = (function() { function loadEditor() { RED.menu.init({id:"btn-sidemenu", options: [ - {id:"menu-item-sidebar",label:RED._("menu.label.sidebar"),toggle:true,onselect:RED.sidebar.toggleSidebar, selected: true}, + {id:"menu-item-sidebar-menu",label:RED._("menu.label.sidebar.sidebar"),options:[ + {id:"menu-item-sidebar",label:RED._("menu.label.sidebar.show"),toggle:true,onselect:RED.sidebar.toggleSidebar, selected: true}, + null + ]}, {id:"menu-item-status",label:RED._("menu.label.displayStatus"),toggle:true,onselect:toggleStatus, selected: true}, null, {id:"menu-item-import",label:RED._("menu.label.import"),options:[ @@ -172,8 +175,6 @@ var RED = (function() { {id:"menu-item-export-library",label:RED._("menu.label.library"),disabled:true,onselect:RED.library.export} ]}, null, - {id:"menu-item-config-nodes",label:RED._("menu.label.configurationNodes"),onselect:RED.sidebar.config.show}, - null, {id:"menu-item-subflow",label:RED._("menu.label.subflows"), options: [ {id:"menu-item-subflow-create",label:RED._("menu.label.createSubflow"),onselect:RED.subflow.createSubflow}, {id:"menu-item-subflow-convert",label:RED._("menu.label.selectionToSubflow"),disabled:true,onselect:RED.subflow.convertToSubflow}, diff --git a/editor/js/ui/sidebar.js b/editor/js/ui/sidebar.js index e6f93a5f7..b50b54c67 100644 --- a/editor/js/ui/sidebar.js +++ b/editor/js/ui/sidebar.js @@ -20,26 +20,67 @@ RED.sidebar = (function() { id:"sidebar-tabs", onchange:function(tab) { $("#sidebar-content").children().hide(); - $("#"+tab.id).show(); + if (tab.onchange) { + tab.onchange.call(tab); + } + $(tab.content).show(); }, onremove: function(tab) { - $("#"+tab.id).remove(); + $(tab.content).remove(); + if (tab.onremove) { + tab.onremove.call(tab); + } } }); - - function addTab(title,content,closeable) { - $("#sidebar-content").append(content); - $(content).hide(); - var id = content.id || "tab-"+title.replace(/([;&,\.\+\*\~':"\!\^#$%@\[\]\(\)=>\|])/g, "\\$1" ); - sidebar_tabs.addTab({id:id,label:title,closeable:closeable}); - //content.style.position = "absolute"; - //$('#sidebar').tabs("refresh"); + + var knownTabs = { + + }; + + function addTab(title,content,closeable,visible) { + var options; + if (typeof title === "string") { + // TODO: legacy support in case anyone uses this... + options = { + id: content.id, + label: title, + name: title, + content: content, + closeable: closeable, + visible: visible + } + } else if (typeof title === "object") { + options = title; + } + + + + $("#sidebar-content").append(options.content); + $(options.content).hide(); + var id = options.id; + + RED.menu.addItem("menu-item-sidebar-menu",{ + id:"menu-item-sidebar-menu-"+options.id, + label:options.name, + onselect:function() { + showSidebar(options.id); + } + }); + + knownTabs[options.id] = options; + + if (options.visible !== false) { + sidebar_tabs.addTab(knownTabs[options.id]); + } } - function removeTab(title) { - sidebar_tabs.removeTab("tab-"+title); + function removeTab(id) { + sidebar_tabs.removeTab(id); + delete knownTabs[id]; + RED.menu.removeItem("menu-item-sidebar-menu-"+id); + //TODO: remove menu item } - + var sidebarSeparator = {}; $("#sidebar-separator").draggable({ axis: "x", @@ -70,7 +111,7 @@ RED.sidebar = (function() { if (sidebarSeparator.opening) { newSidebarWidth -= 13; } - + if (newSidebarWidth > 150) { if (sidebarSeparator.chartWidth+d < 200) { ui.position.left = 200+sidebarSeparator.start-sidebarSeparator.chartWidth; @@ -78,7 +119,7 @@ RED.sidebar = (function() { newSidebarWidth = sidebarSeparator.width-d; } } - + if (newSidebarWidth < 150) { if (!sidebarSeparator.closing) { $("#sidebar").addClass("closing"); @@ -117,7 +158,7 @@ RED.sidebar = (function() { eventHandler.emit("resize"); } }); - + function toggleSidebar(state) { if (!state) { $("#main-container").addClass("sidebar-closed"); @@ -127,28 +168,35 @@ RED.sidebar = (function() { } eventHandler.emit("resize"); } - + function showSidebar(id) { if (id) { - sidebar_tabs.activateTab("tab-"+id); + if (!containsTab(id)) { + sidebar_tabs.addTab(knownTabs[id]); + } + sidebar_tabs.activateTab(id); + if (!RED.menu.isSelected("menu-item-sidebar")) { + RED.menu.setSelected("menu-item-sidebar",true); + } } } - + function containsTab(id) { - return sidebar_tabs.contains("tab-"+id); + return sidebar_tabs.contains(id); } - + function init () { RED.keyboard.add(/* SPACE */ 32,{ctrl:true},function(){RED.menu.setSelected("menu-item-sidebar",!RED.menu.isSelected("menu-item-sidebar"));d3.event.preventDefault();}); showSidebar(); - RED.sidebar.info.show(); + RED.sidebar.info.init(); + RED.sidebar.config.init(); // hide info bar at start if screen rather narrow... if ($(window).width() < 600) { toggleSidebar(); } } - + var eventHandler = (function() { var handlers = {}; - + return { on: function(evt,func) { handlers[evt] = handlers[evt]||[]; @@ -159,12 +207,12 @@ RED.sidebar = (function() { for (var i=0;i",{class:"tab-config-list"}).appendTo(content); + function init() { + RED.sidebar.addTab({ + id: "config", + label: RED._("sidebar.config.label"), + name: RED._("sidebar.config.name"), + content: content, + closeable: true, + visible: false, + onchange: function() { refresh(); } + }); + } function show() { - if (!RED.sidebar.containsTab("config")) { - RED.sidebar.addTab(RED._("sidebar.config.title"),content,true); - } refresh(); RED.sidebar.show("config"); } @@ -78,6 +85,7 @@ RED.sidebar.config = (function() { }); } return { + init:init, show:show, refresh:refresh } diff --git a/editor/js/ui/tab-info.js b/editor/js/ui/tab-info.js index c07a3c266..933227d84 100644 --- a/editor/js/ui/tab-info.js +++ b/editor/js/ui/tab-info.js @@ -27,17 +27,23 @@ RED.sidebar.info = (function() { }); var content = document.createElement("div"); - content.id = "tab-info"; content.style.paddingTop = "4px"; content.style.paddingLeft = "4px"; content.style.paddingRight = "4px"; var propertiesExpanded = false; + function init() { + RED.sidebar.addTab({ + id: "info", + label: RED._("sidebar.info.label"), + name: RED._("sidebar.info.name"), + content: content + }); + + } + function show() { - if (!RED.sidebar.containsTab("info")) { - RED.sidebar.addTab(RED._("sidebar.info.title"),content,false); - } RED.sidebar.show("info"); } @@ -184,6 +190,7 @@ RED.sidebar.info = (function() { }); return { + init: init, show: show, refresh:refresh, clear: clear diff --git a/editor/js/ui/tabs.js b/editor/js/ui/tabs.js index 10f710cca..28b222f4e 100644 --- a/editor/js/ui/tabs.js +++ b/editor/js/ui/tabs.js @@ -13,32 +13,32 @@ * See the License for the specific language governing permissions and * limitations under the License. **/ - + RED.tabs = (function() { - - + + function createTabs(options) { var tabs = {}; - + var ul = $("#"+options.id) ul.addClass("red-ui-tabs"); ul.children().first().addClass("active"); ul.children().addClass("red-ui-tab"); - + function onTabClick() { activateTab($(this)); return false; } - + function onTabDblClick() { if (options.ondblclick) { options.ondblclick(tabs[$(this).attr('href').slice(1)]); } return false; } - + function activateTab(link) { if (typeof link === "string") { link = ul.find("a[href='#"+link+"']"); @@ -51,7 +51,7 @@ RED.tabs = (function() { } } } - + function updateTabWidths() { var tabs = ul.find("li.red-ui-tab"); var width = ul.width(); @@ -60,11 +60,11 @@ RED.tabs = (function() { var pct = 100*tabWidth/width; tabs.css({width:pct+"%"}); } - + ul.find("li.red-ui-tab a").on("click",onTabClick).on("dblclick",onTabDblClick); updateTabWidths(); - - + + function removeTab(id) { var li = ul.find("a[href='#"+id+"']").parent(); if (li.hasClass("active")) { @@ -81,20 +81,20 @@ RED.tabs = (function() { delete tabs[id]; updateTabWidths(); } - + return { addTab: function(tab) { tabs[tab.id] = tab; var li = $("
  • ",{class:"red-ui-tab"}).appendTo(ul); var link = $("",{href:"#"+tab.id, class:"red-ui-tab-label"}).appendTo(li); link.html(tab.label); - + link.on("click",onTabClick); link.on("dblclick",onTabDblClick); if (tab.closeable) { var closeLink = $("",{href:"#",class:"red-ui-tab-close"}).appendTo(li); closeLink.html(''); - + closeLink.on("click",function(event) { removeTab(tab.id); }); @@ -127,7 +127,7 @@ RED.tabs = (function() { } } - + return { create: createTabs } diff --git a/editor/js/ui/workspaces.js b/editor/js/ui/workspaces.js index 66447c6b9..b8cb23725 100644 --- a/editor/js/ui/workspaces.js +++ b/editor/js/ui/workspaces.js @@ -28,6 +28,7 @@ RED.workspaces = (function() { var tabId = RED.nodes.id(); do { workspaceIndex += 1; + //TODO: nls of Sheet } while($("#workspace-tabs a[title='Sheet "+workspaceIndex+"']").size() !== 0); ws = {type:"tab",id:tabId,label:"Sheet "+workspaceIndex}; diff --git a/locales/en-US/editor.json b/locales/en-US/editor.json index 5785dbe60..de6d5981a 100644 --- a/locales/en-US/editor.json +++ b/locales/en-US/editor.json @@ -16,16 +16,18 @@ }, "menu": { "label": { - "sidebar": "Sidebar", - "displayStatus": "Display node status", + "sidebar": { + "sidebar": "Sidebar", + "show": "Toggle Sidebar" + }, + "displayStatus": "Display Node Status", "import": "Import", "export": "Export", "clipboard": "Clipboard", "library": "Library", - "configurationNodes": "Configuration nodes", "subflows": "Subflows", - "createSubflow": "Create subflow", - "selectionToSubflow": "Selection to subflow", + "createSubflow": "Create Subflow", + "selectionToSubflow": "Selection to Subflow", "workspaces": "Workspaces", "add": "Add", "rename": "Rename", @@ -175,7 +177,8 @@ }, "sidebar": { "info": { - "title": "info", + "name": "Node Information", + "label": "info", "node": "Node", "type": "Type", "id": "ID", @@ -186,7 +189,8 @@ "arrayItems": "__count__ items" }, "config": { - "title": "config" + "name": "Configuration nodes", + "label": "config" } } } diff --git a/nodes/core/core/58-debug.html b/nodes/core/core/58-debug.html index 330801474..249cecf73 100644 --- a/nodes/core/core/58-debug.html +++ b/nodes/core/core/58-debug.html @@ -128,7 +128,6 @@ }, onpaletteadd: function() { var content = document.createElement("div"); - content.id = "tab-debug"; var toolbar = document.createElement("div"); toolbar.id = "debug-toolbar"; @@ -140,7 +139,12 @@ messages.id = "debug-content"; content.appendChild(messages); - RED.sidebar.addTab(this._("debug.sidebarTitle"),content); + RED.sidebar.addTab({ + id: "debug", + label: this._("debug.sidebar.label"), + name: this._("debug.sidebar.name"), + content: content + }); function getTimestamp() { var d = new Date(); diff --git a/nodes/core/locales/en-US/messages.json b/nodes/core/locales/en-US/messages.json index 040b4a959..4e08191b0 100644 --- a/nodes/core/locales/en-US/messages.json +++ b/nodes/core/locales/en-US/messages.json @@ -81,7 +81,10 @@ "activated": "Successfully activated: __label__", "deactivated": "Successfully deactivated: __label__" }, - "sidebarTitle": "debug" + "sidebar": { + "label": "debug", + "name": "Debug messages" + } }, "exec": { "spawnerr": "Spawn command must be just the command - no spaces or extra parameters",