diff --git a/editor/js/ui/clipboard.js b/editor/js/ui/clipboard.js index 6db81f22e..72d06e2c6 100644 --- a/editor/js/ui/clipboard.js +++ b/editor/js/ui/clipboard.js @@ -270,10 +270,44 @@ RED.clipboard = (function() { $("#dropTarget").hide(); RED.keyboard.remove("escape"); } - + function copyText(value,element,msg) { + var truncated = false; + if (typeof value !== "string" ) { + value = JSON.stringify(value, function(key,value) { + if (value !== null && typeof value === 'object') { + if (value.__encoded__ && value.hasOwnProperty('data') && value.hasOwnProperty('length')) { + truncated = value.data.length !== value.length; + return value.data; + } + } + return value; + }); + } + if (truncated) { + msg += "_truncated"; + } + $("#clipboard-hidden").val(value).select(); + var result = document.execCommand("copy"); + if (result && element) { + var popover = RED.popover.create({ + target: element, + direction: 'left', + size: 'small', + content: RED._(msg) + }); + setTimeout(function() { + popover.close(); + },1000); + popover.open(); + } + return result; + } return { init: function() { setupDialogs(); + + $('').appendTo("body"); + RED.events.on("view:selection-changed",function(selection) { if (!selection.nodes) { RED.menu.setDisabled("menu-item-export",true); @@ -339,6 +373,7 @@ RED.clipboard = (function() { }, import: importNodes, - export: exportNodes + export: exportNodes, + copyText: copyText } })(); diff --git a/editor/js/ui/common/popover.js b/editor/js/ui/common/popover.js index 1ae3b8f45..df586f668 100644 --- a/editor/js/ui/common/popover.js +++ b/editor/js/ui/common/popover.js @@ -15,26 +15,61 @@ **/ RED.popover = (function() { - - + var deltaSizes = { + "default": { + top: 10, + leftRight: 17, + leftLeft: 25 + }, + "small": { + top: 5, + leftRight: 8, + leftLeft: 16 + } + } function createPopover(options) { var target = options.target; - + var direction = options.direction || "right"; + var trigger = options.trigger; var content = options.content; var delay = options.delay; + var width = options.width||"auto"; + var size = options.size||"default"; + if (!deltaSizes[size]) { + throw new Error("Invalid RED.popover size value:",size); + } + var timer = null; var active; var div; var openPopup = function() { if (active) { - div = $('
').html(content).appendTo("body"); + div = $('
').appendTo("body"); + if (size !== "default") { + div.addClass("red-ui-popover-size-"+size); + } + if (typeof content === 'function') { + content.call(res).appendTo(div); + } else { + div.html(content); + } + if (width !== "auto") { + div.width(width); + } + + var targetPos = target.offset(); var targetWidth = target.width(); var targetHeight = target.height(); var divHeight = div.height(); - div.css({top: targetPos.top+targetHeight/2-divHeight/2-10,left:targetPos.left+targetWidth+17}); + var divWidth = div.width(); + if (direction === 'right') { + div.css({top: targetPos.top+targetHeight/2-divHeight/2-deltaSizes[size].top,left:targetPos.left+targetWidth+deltaSizes[size].leftRight}); + } else if (direction === 'left') { + div.css({top: targetPos.top+targetHeight/2-divHeight/2-deltaSizes[size].top,left:targetPos.left-deltaSizes[size].leftLeft-divWidth}); + } div.fadeIn("fast"); } @@ -50,24 +85,45 @@ RED.popover = (function() { } } - target.on('mouseenter',function(e) { - clearTimeout(timer); - active = true; - timer = setTimeout(openPopup,delay.show); - }); - target.on('mouseleave', function(e) { - if (timer) { + if (trigger === 'hover') { + + target.on('mouseenter',function(e) { clearTimeout(timer); - } - active = false; - setTimeout(closePopup,delay.hide); - }); + active = true; + timer = setTimeout(openPopup,delay.show); + }); + target.on('mouseleave', function(e) { + if (timer) { + clearTimeout(timer); + } + active = false; + setTimeout(closePopup,delay.hide); + }); + } else if (trigger === 'click') { + target.click(function(e) { + e.preventDefault(); + e.stopPropagation(); + active = !active; + if (!active) { + closePopup(); + } else { + openPopup(); + } + }); + } var res = { setContent: function(_content) { content = _content; + }, + open: function () { + active = true; + openPopup(); + }, + close: function () { + active = false; + closePopup(); } } - target.data('popover',res); return res; } diff --git a/editor/js/ui/palette.js b/editor/js/ui/palette.js index b657b101c..b7c1b58a5 100644 --- a/editor/js/ui/palette.js +++ b/editor/js/ui/palette.js @@ -185,11 +185,14 @@ RED.palette = (function() { $("#palette-"+category).append(d); d.onmousedown = function(e) { e.preventDefault(); }; - RED.popover.create({ + var popover = RED.popover.create({ target:$(d), + trigger: "hover", + width: "300px", content: "hi", delay: { show: 750, hide: 50 } }); + $(d).data('popover',popover); // $(d).popover({ // title:d.type, diff --git a/editor/js/ui/utils.js b/editor/js/ui/utils.js index 371698ac0..d7c151604 100644 --- a/editor/js/ui/utils.js +++ b/editor/js/ui/utils.js @@ -31,7 +31,7 @@ RED.utils = (function() { result = $('null'); } else if (typeof value === 'object') { if (value.hasOwnProperty('type') && value.type === 'Buffer' && value.hasOwnProperty('data')) { - result = $('').html('buffer['+value.data.length+']'); + result = $('').html('buffer['+value.length+']'); } else if (value.hasOwnProperty('type') && value.type === 'array' && value.hasOwnProperty('data')) { result = $('').html('array['+value.length+']'); } else { @@ -66,8 +66,22 @@ RED.utils = (function() { e.preventDefault(); }); } + function addMessageControls(obj,key,msg) { + var tools = $('').appendTo(obj); + var copyPath = $('').appendTo(tools).click(function(e) { + e.preventDefault(); + e.stopPropagation(); + RED.clipboard.copyText(key,copyPath,"clipboard.copyMessagePath"); + }) + var copyPayload = $('').appendTo(tools).click(function(e) { + e.preventDefault(); + e.stopPropagation(); + RED.clipboard.copyText(msg,copyPayload,"clipboard.copyMessageValue"); + }) - function buildMessageElement(obj,key,typeHint,hideKey) { + } + + function buildMessageElement(obj,key,typeHint,hideKey,path) { var i; var e; var entryObj; @@ -75,15 +89,15 @@ RED.utils = (function() { var headerHead; var value; var element = $(''); + header = $('').appendTo(element); + addMessageControls(header,path,obj); if (!key) { element.addClass("debug-message-top-level"); - } - - header = $('').appendTo(element); - - if (key && !hideKey) { - $('').text(key).appendTo(header); - $(': ').appendTo(header); + } else { + if (!hideKey) { + $('').text(key).appendTo(header); + $(': ').appendTo(header); + } } entryObj = $('').appendTo(header); @@ -166,6 +180,7 @@ RED.utils = (function() { if (type === 'buffer') { var stringRow = $('
').appendTo(element); var sr = $('').appendTo(stringRow); + var stringEncoding = ""; try { stringEncoding = String.fromCharCode.apply(null, new Uint16Array(data)) @@ -190,7 +205,7 @@ RED.utils = (function() { if (fullLength <= 10) { for (i=0;i