[pve-devel] [PATCH pve-manager 1/5] Add help button for PVE

[Emmanuel Kasper]

This help button is meant to be added on InputPanels, where a
link to an online documentation chapter or subschapter is available.

Clicking on the help button will open the help in a new
browser tab.

Original idea similar to the pfSense GUI.
---
 www/manager6/Makefile             |  1 +
 www/manager6/button/HelpButton.js | 32 ++++++++++++++++++++++++++++++++
 www/manager6/panel/InputPanel.js  | 11 ++++++++++-
 3 files changed, 43 insertions(+), 1 deletion(-)
 create mode 100644 www/manager6/button/HelpButton.js

diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index 5b7f4bb..d6a3389 100644
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -8,6 +8,7 @@ JSSRC= 				                 	\
 	button/Button.js				\
 	button/ConsoleButton.js				\
 	button/Split.js					\
+	button/HelpButton.js					\
 	qemu/SendKeyMenu.js				\
 	qemu/CmdMenu.js					\
 	qemu/TemplateMenu.js				\
diff --git a/www/manager6/button/HelpButton.js b/www/manager6/button/HelpButton.js
new file mode 100644
index 0000000..ea66bbd
--- /dev/null
+++ b/www/manager6/button/HelpButton.js
@@ -0,0 +1,32 @@
+/* help button pointing to an online documentation
+ * to use this you need to add 
+ *     listeners: {
+	afterrender: function() {
+	    this.onlineHelp && Ext.GlobalEvents.fireEvent('pveShowHelp', this.onlineHelp);
+	},
+    },
+   in the input panel you want to document
+ */
+Ext.define('PVE.button.Help', {
+    extend: 'Ext.button.Button',
+    alias: 'widget.pveHelpButton',
+    text: gettext('Help'),
+    iconCls: 'fa fa-question-circle',
+    hidden: true,
+    controller: {
+	xclass: 'Ext.app.ViewController',
+	listen: {
+	    global: {
+		pveShowHelp: 'onPveShowHelp'
+	    }
+	},
+	onPveShowHelp: function(helpLink) {
+	    this.getView().setHandler(function() {
+		var docsURI = window.location.origin +
+		'/pve-docs/' + helpLink;
+		window.open(docsURI);
+	    });
+	    this.getView().show();
+	}
+    }
+});
\ No newline at end of file
diff --git a/www/manager6/panel/InputPanel.js b/www/manager6/panel/InputPanel.js
index 8ab1e33..3168f67 100644
--- a/www/manager6/panel/InputPanel.js
+++ b/www/manager6/panel/InputPanel.js
@@ -1,9 +1,18 @@
 Ext.define('PVE.panel.InputPanel', {
     extend: 'Ext.panel.Panel',
     alias: ['widget.inputpanel'],
-
+    listeners: {
+	activate: function() {
+	    // notify owning container that it should display a help button
+	    this.onlineHelp && Ext.GlobalEvents.fireEvent('pveShowHelp', this.onlineHelp);
+	},
+    },
     border: false,
 
+    // override this with an URL to a relevant chapter of the pve manual
+    // setting this will display a help button in our parent panel
+    onlineHelp: undefined,
+
     // overwrite this to modify submit data
     onGetValues: function(values) {
 	return values;
-- 
2.1.4