Info-tips update

2025-03-01 10:36:34 +00:00 · 2017-01-05 23:33:19 +00:00
parent 59ffacb3df
commit 555f96cfaf
6 changed files with 121 additions and 30 deletions
--- a/editor/js/ui/keyboard.js
+++ b/editor/js/ui/keyboard.js
@@ -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
    }

 })();
--- a/editor/js/ui/tab-info.js
+++ b/editor/js/ui/tab-info.js
@@ -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) {
--- a/editor/sass/keyboard.scss
+++ b/editor/sass/keyboard.scss
@@ -37,4 +37,6 @@
    font-family: Courier, monospace;
    box-shadow: #999 1px 1px 1px;
 }
-
+.help-key-block {
+    white-space: nowrap;
+}
--- a/editor/sass/tab-info.scss
+++ b/editor/sass/tab-info.scss
@@ -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;
+
 }
--- a/red/api/locales/en-US/infotips.json
+++ b/red/api/locales/en-US/infotips.json
@@ -1,16 +1,32 @@
 {
    "info": {
-        "tip0" : "Use the <code>delete</code> key to remove a node.",
+        "tip0" : "You can remove the selected nodes or links with {{core:delete}}",
+        "tip1" : "Search for nodes using {{core:search}}",
+        "tip2" : "{{core:toggle-sidebar}} will toggle the view of this sidebar",
+        "tip3" : "You can manage your palette of nodes with {{core:manage-palette}}",
+        "tip4" : "Your flow configuration nodes are listed in the sidebar panel. It can been accessed from the menu or with {{core:show-config-tab}}",
+        "tip5" : "Enable or disable these tips from the option in the menu",
+        "tip6" : "Move the selected nodes using the [left] [up] [down] and [right] keys. Hold [shift] to nudge them further",
+        "tip7" : "Dragging a node onto a wire will splice it into the link",
+        "tip8" : "Export the selected nodes, or the current tab with {{core:export}}",
+        "tip9" : "Import a flow by dragging its JSON into the editor, or with {{core:import}}",
+        "tip10" : "[shift] [click] and drag on a node port to move all of the attached wires or just the selected one",
+        "tip11" : "Show the Info tab with {{core:show-info-tab}} or the Debug tab with {{core:show-debug-tab}}",
+        "tip12" : "[ctrl] [click] in the workspace to open the quick-add dialog",
+        "tip13" : "Hold down [ctrl] when you [click] on a node port to enable quick-wiring",
+        "tip14" : "Hold down [shift] when you [click] on a node to also select all of its connected nodes",
+        "tip15" : "Hold down [ctrl] when you [click] on a node to add or remove it from the current selection",
+        "tip16" : "Switch flow tabs with {{core:show-previous-tab}} and {{core:show-next-tab}}",
+        "tip17" : "You can confirm your changes in the node edit tray with {{core:confirm-edit-tray}} or cancel them with {{core:cancel-edit-tray}}"
+    },
+    "info-tbd": {
        "tip1" : "Press the <code>Deploy</code> button above to start the flow running. You can choose to deploy the whole flow or just the changes.",
        "tip2" : "Options like <b>Show grid</b> and <b>Snap to grid</b> are under the menu icon<br/><i class='fa fa-bars'></i> <i class='fa fa-caret-right'></i> <b>View</b>",
-        "tip3" : "<code>ctrl .</code> or <code>⌘ .</code> can be used to search for nodes and tabs.",
        "tip4" : "<i class='fa fa-bars'></i> <i class='fa fa-caret-right'></i> <b>Manage palette</b> can be used to find, add and remove extra nodes.",
        "tip5" : "Nodes may install examples under<br/><i class='fa fa-bars'></i> <i class='fa fa-caret-right'></i> <b>Import</b> <i class='fa fa-caret-right'></i> <b>Examples</b>",
        "tip6" : "Lots of example flows can be found on <a href='http://flows.nodered.org' target='_blank'>flows.nodered.org</a><br/>They can then be imported by drag and drop to the workspace.",
        "tip7" : "<b>Shift-click and drag</b> on a connector to move all the attached wires in one go.",
        "tip8" : "The <b>Node-RED Dashboard</b> package can be used to create simple User Interfaces.",
-        "tip9" : "<code>ctrl</code><code>space</code> will toggle the view of this sidebar.",
        "tip10": "Got a question?<br/>Join us on <a href='https://node-red.slack.com/' target='_blank'>Slack</a><br/>or the<br/><a href='https://groups.google.com/forum/#!forum/node-red' target='_blank'>Node-RED Google group</a>"
-    },
-    "infoLength": "11"
+    }
 }
--- a/red/runtime/i18n.js
+++ b/red/runtime/i18n.js
@@ -24,6 +24,13 @@ var defaultLang = "en-US";
 var resourceMap = {};
 var resourceCache = {};

+function registerMessageCatalogs(catalogs) {
+    var promises = catalogs.map(function(catalog) {
+        return registerMessageCatalog(catalog.namespace,catalog.dir,catalog.file);
+    });
+    return when.settle(promises);
+}
+
 function registerMessageCatalog(namespace,dir,file) {
    return when.promise(function(resolve,reject) {
        resourceMap[namespace] = { basedir:dir, file:file};
@@ -109,6 +116,7 @@ function getCatalog(namespace,lang) {
 var obj = module.exports = {
    init: init,
    registerMessageCatalog: registerMessageCatalog,
+    registerMessageCatalogs: registerMessageCatalogs,
    catalog: getCatalog,
    i: i18n,
    defaultLang: defaultLang