slapos_jio: Implement Contextual Help on the left panel

master/bt5/slapos_jio/PathTemplateItem/web_page_module/rjs_gadget_slapos_panel_html.html

@@ -40,6 +40,16 @@
     <script id="panel-template-warning-link" type="text/x-handlebars-template">
       <li><a href="#" id="attention-point-link" class="ui-btn-icon-notext ui-icon-warning attention-point-link">Warnings ({{amount}})</a></li>
     </script>
+
+    <script id="panel-template-contextual-help" type="text/x-handlebars-template">
+        <dt class="ui-btn-icon-left ui-icon-question" data-i18n="Help">Help</dt>
+        {{#each contextual_help_list}}
+        <dd class="document-listview">
+          <a class="help" target="_blank" href="{{href}}">{{title}}</a>
+        </dd>
+        {{/each}}
+    </script>
+    
     <script id="panel-template-body" type="text/x-handlebars-template">
       <div class="ui-content">
         <ul data-role="listview" class="ui-listview" data-enhanced="true">
@@ -67,6 +77,8 @@
         <ul data-role="listview" class="ui-listview ul-attention-point" data-enhanced="true">
           <li></li>
         </ul>
+        <dl class="dl-contextual-help">
+        </dl> 
       </div>
     </script>
     <!-- custom script -->

master/bt5/slapos_jio/PathTemplateItem/web_page_module/rjs_gadget_slapos_panel_js.js

@@ -17,6 +17,9 @@
                          .innerHTML),
     panel_template_warning_link = Handlebars.compile(template_element
                          .getElementById("panel-template-warning-link")
+                         .innerHTML),
+    panel_template_contextual_help = Handlebars.compile(template_element
+                         .getElementById("panel-template-contextual-help")
                          .innerHTML);
 
   gadget_klass
@@ -38,18 +41,18 @@
     /////////////////////////////////////////////////////////////////
     // declared methods
     /////////////////////////////////////////////////////////////////
-    .declareMethod('toggle', function () {
+    .declareMethod('toggle', function toggle() {
       return this.changeState({
         visible: !this.state.visible
       });
     })
-    .declareMethod('close', function () {
+    .declareMethod('close', function close() {
       return this.changeState({
         visible: false
       });
     })
 
-    .declareMethod('render', function (options) {
+    .declareMethod('render', function render(options) {
       return this.changeState({
         global: true,
         editable: true,
@@ -131,6 +134,9 @@
       // Check for Alerts to pop
       if (!(jio_key === undefined || jio_key === null)) {
         queue
+          .push(function () {
+            return context.calculateContextualHelpList(jio_key);
+          })
           .push(function () {
             return context.calculateMyAttentionPointList(jio_key, false);
           });
@@ -142,7 +148,7 @@
     /////////////////////////////////////////////////////////////////
     // declared services
     /////////////////////////////////////////////////////////////////
-    .onEvent('click', function (evt) {
+    .onEvent('click', function click(evt) {
       if ((evt.target.nodeType === Node.ELEMENT_NODE) &&
           (evt.target.tagName === 'BUTTON')) {
         return this.toggle();
@@ -182,6 +188,33 @@
       return;
     })
 
+    .declareJob("calculateContextualHelpList", function (jio_key) {
+      var context = this,
+        queue = new RSVP.Queue(),
+        contextual_help_dl = document.querySelector('dl.dl-contextual-help');
+      return queue
+        .push(function () {
+          return context.getSetting('hateoas_url');
+        })
+        .push(function (hateoas_url) {
+          if (jio_key === false || jio_key === undefined || jio_key === null) {
+            return [];
+          }
+          return context.jio_getAttachment(
+            jio_key,
+            hateoas_url + jio_key + '/Base_getContextualHelpList'
+          );
+        })
+        .push(function (contextual_help_list) {
+          if (contextual_help_list.length > 0) {
+            if (!Boolean(document.querySelector('#contextual-help-link'))) {
+              contextual_help_dl.innerHTML = panel_template_contextual_help({
+                contextual_help_list: contextual_help_list
+              })
+              }
+          }
+        });
+     })
     .declareJob("calculateMyAttentionPointList", function (jio_key, force_open) {
       var context = this,
         queue = new RSVP.Queue(),

master/bt5/slapos_jio/SkinTemplateItem/portal_skins/slapos_hal_json_style/Base_getContextualHelpList.py

+import json
+
+contextual_help_list = []
+
+#contextual_help_list.append(
+#  {"title": "XX", "href": "LLLL"}
+#)
+
+return json.dumps(contextual_help_list)

master/bt5/slapos_jio/SkinTemplateItem/portal_skins/slapos_hal_json_style/Base_getContextualHelpList.xml

+<?xml version="1.0"?>
+<ZopeData>
+  <record id="1" aka="AAAAAAAAAAE=">
+    <pickle>
+      <global name="PythonScript" module="Products.PythonScripts.PythonScript"/>
+    </pickle>
+    <pickle>
+      <dictionary>
+        <item>
+            <key> <string>Script_magic</string> </key>
+            <value> <int>3</int> </value>
+        </item>
+        <item>
+            <key> <string>_bind_names</string> </key>
+            <value>
+              <object>
+                <klass>
+                  <global name="NameAssignments" module="Shared.DC.Scripts.Bindings"/>
+                </klass>
+                <tuple/>
+                <state>
+                  <dictionary>
+                    <item>
+                        <key> <string>_asgns</string> </key>
+                        <value>
+                          <dictionary>
+                            <item>
+                                <key> <string>name_container</string> </key>
+                                <value> <string>container</string> </value>
+                            </item>
+                            <item>
+                                <key> <string>name_context</string> </key>
+                                <value> <string>context</string> </value>
+                            </item>
+                            <item>
+                                <key> <string>name_m_self</string> </key>
+                                <value> <string>script</string> </value>
+                            </item>
+                            <item>
+                                <key> <string>name_subpath</string> </key>
+                                <value> <string>traverse_subpath</string> </value>
+                            </item>
+                          </dictionary>
+                        </value>
+                    </item>
+                  </dictionary>
+                </state>
+              </object>
+            </value>
+        </item>
+        <item>
+            <key> <string>_params</string> </key>
+            <value> <string></string> </value>
+        </item>
+        <item>
+            <key> <string>id</string> </key>
+            <value> <string>Base_getContextualHelpList</string> </value>
+        </item>
+      </dictionary>
+    </pickle>
+  </record>
+</ZopeData>