mirror of
https://github.com/node-red/node-red.git
synced 2025-03-01 10:36:34 +00:00
Info-tips update
This commit is contained in:
@@ -15,6 +15,8 @@
|
||||
**/
|
||||
RED.keyboard = (function() {
|
||||
|
||||
var isMac = /Mac/i.test(window.navigator.platform);
|
||||
|
||||
var handlers = {};
|
||||
var partialState;
|
||||
|
||||
@@ -253,7 +255,6 @@ RED.keyboard = (function() {
|
||||
|
||||
var dialog = null;
|
||||
|
||||
var isMac = /Mac/i.test(window.navigator.platform);
|
||||
var cmdCtrlKey = '<span class="help-key">'+(isMac?'⌘':'Ctrl')+'</span>';
|
||||
|
||||
function showKeyboardHelp() {
|
||||
@@ -281,7 +282,7 @@ RED.keyboard = (function() {
|
||||
'<tr><td>'+cmdCtrlKey+' + <span class="help-key">f</span></td><td>'+RED._("keyboard.searchBox")+'</td></tr>'+
|
||||
'<tr><td>'+cmdCtrlKey+' + <span class="help-key">Shift</span> + <span class="help-key">p</span></td><td>'+RED._("keyboard.managePalette")+'</td></tr>'+
|
||||
'<tr><td> </td><td></td></tr>'+
|
||||
'<tr><td><span class="help-key">←</span> <span class="help-key">↑</span> <span class="help-key">→</span> <span class="help-key">↓</span></td><td>'+RED._("keyboard.nudgeNode")+'</td></tr>'+
|
||||
'<tr><td><span class="help-key">←</span> <span class="help-key">↑</span> <span class="help-key">→</span> <span class="help-key">↓</span></td><td>'+RED._("keyboard.nudgeNode")+'</td></tr>'+
|
||||
'<tr><td><span class="help-key">Shift</span> + <span class="help-key">←</span> <span class="help-key">↑</span> <span class="help-key">→</span> <span class="help-key">↓</span></td><td>'+RED._("keyboard.moveNode")+'</td></tr>'+
|
||||
'<tr><td> </td><td></td></tr>'+
|
||||
'<tr><td>'+cmdCtrlKey+' + <span class="help-key">c</span></td><td>'+RED._("keyboard.copyNode")+'</td></tr>'+
|
||||
@@ -303,6 +304,15 @@ RED.keyboard = (function() {
|
||||
|
||||
dialog.dialog("open");
|
||||
}
|
||||
function formatKey(key) {
|
||||
var formattedKey = isMac?key.replace(/ctrl-?/,"⌘"):key;
|
||||
formattedKey = formattedKey.replace(/shift-?/,"⇧")
|
||||
formattedKey = formattedKey.replace(/left/,"←")
|
||||
formattedKey = formattedKey.replace(/up/,"↑")
|
||||
formattedKey = formattedKey.replace(/right/,"→")
|
||||
formattedKey = formattedKey.replace(/down/,"↓")
|
||||
return '<span class="help-key-block"><span class="help-key">'+formattedKey.split(" ").join('</span> <span class="help-key">')+'</span></span>';
|
||||
}
|
||||
|
||||
return {
|
||||
init: init,
|
||||
@@ -310,7 +320,8 @@ RED.keyboard = (function() {
|
||||
remove: removeHandler,
|
||||
getShortcut: function(actionName) {
|
||||
return actionToKeyMap[actionName];
|
||||
}
|
||||
},
|
||||
formatKey: formatKey
|
||||
}
|
||||
|
||||
})();
|
||||
|
@@ -67,6 +67,7 @@ RED.sidebar.info = (function() {
|
||||
}
|
||||
|
||||
function refresh(node) {
|
||||
tips.stop();
|
||||
$(content).empty();
|
||||
var table = $('<table class="node-info"></table>');
|
||||
var tableBody = $('<tbody>').appendTo(table);
|
||||
@@ -145,20 +146,76 @@ RED.sidebar.info = (function() {
|
||||
});
|
||||
}
|
||||
|
||||
var infotimeout;
|
||||
function clear() {
|
||||
//$(content).html("");
|
||||
if (!infotimeout) {
|
||||
var r = parseInt(Math.random() * RED._("infotips:infoLength"));
|
||||
$(content).html('<div class="node-info-tip">'+RED._("infotips:info.tip"+r)+'</div>');
|
||||
infotimeout = setTimeout(function() { infotimeout=null; }, 20000);
|
||||
|
||||
var tips = (function() {
|
||||
var startDelay = 2000;
|
||||
var cycleDelay = 10000;
|
||||
var startTimeout;
|
||||
var refreshTimeout;
|
||||
var tipCount = -1;
|
||||
|
||||
|
||||
function setTip() {
|
||||
|
||||
var r = Math.floor(Math.random() * tipCount);
|
||||
var tip = RED._("infotips:info.tip"+r);
|
||||
|
||||
var m;
|
||||
while ((m=/({{(.*?)}})/.exec(tip))) {
|
||||
var shortcut = RED.keyboard.getShortcut(m[2]);
|
||||
if (shortcut) {
|
||||
tip = tip.replace(m[1],RED.keyboard.formatKey(shortcut.key));
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
}
|
||||
while ((m=/(\[(.*?)\])/.exec(tip))) {
|
||||
tip = tip.replace(m[1],RED.keyboard.formatKey(m[2]));
|
||||
}
|
||||
$('<div class="node-info-tip hide">'+tip+'</div>').appendTo(content).fadeIn(200);
|
||||
if (startTimeout) {
|
||||
startTimeout = null;
|
||||
refreshTimeout = setInterval(cycleTips,cycleDelay);
|
||||
}
|
||||
}
|
||||
function cycleTips() {
|
||||
$(".node-info-tip").fadeOut(300,function() {
|
||||
$(this).remove();
|
||||
setTip();
|
||||
})
|
||||
}
|
||||
return {
|
||||
start: function() {
|
||||
if (!startTimeout && !refreshTimeout) {
|
||||
$(content).html("");
|
||||
if (tipCount === -1) {
|
||||
do {
|
||||
tipCount++;
|
||||
} while(RED._("infotips:info.tip"+tipCount)!=="infotips:info.tip"+tipCount);
|
||||
}
|
||||
startTimeout = setTimeout(setTip,startDelay);
|
||||
}
|
||||
},
|
||||
stop: function() {
|
||||
clearInterval(refreshTimeout);
|
||||
clearTimeout(startTimeout);
|
||||
refreshTimeout = null;
|
||||
startTimeout = null;
|
||||
}
|
||||
}
|
||||
})();
|
||||
|
||||
function clear() {
|
||||
tips.start();
|
||||
}
|
||||
|
||||
function set(html) {
|
||||
tips.stop();
|
||||
$(content).html(html);
|
||||
}
|
||||
|
||||
|
||||
|
||||
RED.events.on("view:selection-changed",function(selection) {
|
||||
if (selection.nodes) {
|
||||
if (selection.nodes.length == 1) {
|
||||
|
@@ -37,4 +37,6 @@
|
||||
font-family: Courier, monospace;
|
||||
box-shadow: #999 1px 1px 1px;
|
||||
}
|
||||
|
||||
.help-key-block {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
@@ -82,20 +82,17 @@ div.node-info {
|
||||
}
|
||||
}
|
||||
.node-info-tip {
|
||||
margin: 10px;
|
||||
margin-top: 30px;
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
font-size: 18px;
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left:0;
|
||||
right:0;
|
||||
padding: 20px;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
color : #aaa;
|
||||
line-height: 1.9em;
|
||||
color : #bbb;
|
||||
background-color: #fff;
|
||||
code {
|
||||
font-size: 16px;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-weight: 700;
|
||||
padding: 3px 8px 3px 8px;
|
||||
border-radius: 4px;
|
||||
color: #aaa;
|
||||
}
|
||||
@include disable-selection;
|
||||
cursor: default;
|
||||
|
||||
}
|
||||
|
Reference in New Issue
Block a user