1
0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
node-red/editor/js/ui/common/popover.js

172 lines
5.6 KiB
JavaScript
Raw Normal View History

2015-07-18 16:33:31 +02:00
/**
* Copyright JS Foundation and other contributors, http://js.foundation
2015-07-18 16:33:31 +02:00
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
**/
RED.popover = (function() {
var deltaSizes = {
"default": {
top: 10,
leftRight: 17,
2018-05-23 11:25:10 +02:00
leftLeft: 25,
leftBottom: 8,
},
"small": {
top: 5,
leftRight: 17,
2018-05-23 11:25:10 +02:00
leftLeft: 16,
leftBottom: 3,
}
}
2015-07-18 16:33:31 +02:00
function createPopover(options) {
var target = options.target;
var direction = options.direction || "right";
var trigger = options.trigger;
2015-07-18 16:33:31 +02:00
var content = options.content;
var delay = options.delay;
var autoClose = options.autoClose;
var width = options.width||"auto";
var size = options.size||"default";
if (!deltaSizes[size]) {
throw new Error("Invalid RED.popover size value:",size);
}
2015-07-18 16:33:31 +02:00
var timer = null;
var active;
var div;
var openPopup = function(instant) {
2015-07-18 16:33:31 +02:00
if (active) {
2018-07-03 22:18:15 +02:00
div = $('<div class="red-ui-popover red-ui-popover-'+direction+'"></div>');
if (size !== "default") {
div.addClass("red-ui-popover-size-"+size);
}
if (typeof content === 'function') {
var result = content.call(res);
2018-07-03 22:18:15 +02:00
if (result === null) {
return;
}
if (typeof result === 'string') {
div.text(result);
} else {
div.append(result);
}
} else {
div.html(content);
}
if (width !== "auto") {
div.width(width);
}
2018-07-03 22:18:15 +02:00
div.appendTo("body");
2015-07-18 16:33:31 +02:00
var targetPos = target.offset();
var targetWidth = target.outerWidth();
var targetHeight = target.outerHeight();
2015-07-18 16:33:31 +02:00
var divHeight = div.height();
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});
2018-05-23 11:25:10 +02:00
} else if (direction === 'bottom') {
div.css({top: targetPos.top+targetHeight+deltaSizes[size].top,left:targetPos.left+targetWidth/2-divWidth/2 - deltaSizes[size].leftBottom});
}
if (instant) {
div.show();
} else {
div.fadeIn("fast");
}
2015-07-18 16:33:31 +02:00
}
}
var closePopup = function(instant) {
2015-07-18 16:33:31 +02:00
if (!active) {
if (div) {
if (instant) {
2015-07-18 16:33:31 +02:00
$(this).remove();
} else {
div.fadeOut("fast",function() {
$(this).remove();
});
}
2015-07-18 16:33:31 +02:00
div = null;
}
}
}
if (trigger === 'hover') {
target.on('mouseenter',function(e) {
2015-07-18 16:33:31 +02:00
clearTimeout(timer);
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();
}
});
} else if (autoClose) {
setTimeout(function() {
active = false;
closePopup();
},autoClose);
}
2015-07-18 16:33:31 +02:00
var res = {
setContent: function(_content) {
content = _content;
return res;
},
open: function (instant) {
active = true;
openPopup(instant);
return res;
},
close: function (instant) {
active = false;
closePopup(instant);
return res;
2015-07-18 16:33:31 +02:00
}
}
return res;
}
return {
create: createPopover,
tooltip: function(target,content) {
RED.popover.create({
target:target,
trigger: "hover",
size: "small",
direction: "bottom",
content: content,
delay: { show: 550, hide: 10 }
});
}
2015-07-18 16:33:31 +02:00
}
})();