Info-tips update

This commit is contained in:
Nick O'Leary
2017-01-05 23:33:19 +00:00
parent 59ffacb3df
commit 555f96cfaf
6 changed files with 121 additions and 30 deletions

View File

@@ -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?'&#8984;':'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>&nbsp;</td><td></td></tr>'+
'<tr><td><span class="help-key">&#x2190;</span> <span class="help-key">&#x2191;</span> <span class="help-key">&#x2192;</span> <span class="help-key">&#x2193;</span></td><td>'+RED._("keyboard.nudgeNode")+'</td></tr>'+
'<tr><td><span class="help-key">&#x2190</span> <span class="help-key">&#x2191;</span> <span class="help-key">&#x2192;</span> <span class="help-key">&#x2193;</span></td><td>'+RED._("keyboard.nudgeNode")+'</td></tr>'+
'<tr><td><span class="help-key">Shift</span> + <span class="help-key">&#x2190;</span> <span class="help-key">&#x2191;</span> <span class="help-key">&#x2192;</span> <span class="help-key">&#x2193;</span></td><td>'+RED._("keyboard.moveNode")+'</td></tr>'+
'<tr><td>&nbsp;</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-?/,"&#8984;"):key;
formattedKey = formattedKey.replace(/shift-?/,"&#8679;")
formattedKey = formattedKey.replace(/left/,"&#x2190;")
formattedKey = formattedKey.replace(/up/,"&#x2191;")
formattedKey = formattedKey.replace(/right/,"&#x2192;")
formattedKey = formattedKey.replace(/down/,"&#x2193;")
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
}
})();

View File

@@ -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) {

View File

@@ -37,4 +37,6 @@
font-family: Courier, monospace;
box-shadow: #999 1px 1px 1px;
}
.help-key-block {
white-space: nowrap;
}

View File

@@ -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;
}