feat(templates,css,js): better api examples;

- Aligned API examples with the new DataStore templating and styles.

ckanext/recombinant/assets/css/recombinant.css

@@ -0,0 +1,38 @@
+#api-access-accordion figure{
+  display: none;
+}
+#api-access-accordion figure.python{
+  display: none;
+}
+/* Default cURL display */
+#api-access-accordion figure.curl{
+  display: block;
+}
+#api-access-accordion figure.powershell{
+  display: none;
+}
+#api-access-example-code-control label::after{
+  content: none !important;
+}
+#api-access-example-code-control input[type="radio"]{
+  cursor: pointer !important;
+}
+#api-access-accordion figure{
+  margin-bottom: 12px !important;
+}
+#api-access-accordion pre{
+  margin-bottom: 0 !important;
+  border-bottom-left-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+#api-access-accordion figure figcaption{
+  padding: 4px 8px;
+  background-color: #335075;
+  color: white;
+  font-weight: 700 !important;
+  font-size: 14px;
+  line-height: 1.5 !important;
+  border-bottom-left-radius: 4px !important;
+  border-bottom-right-radius: 4px !important;
+  text-align: right !important;
+}

ckanext/recombinant/assets/js/code_block_buttons.js

@@ -0,0 +1,76 @@
+window.addEventListener('load', function(){
+  $(document).ready(function() {
+
+    // Code example switching
+    let codeExampleControl = $('#api-access-example-code-control');
+    let codeBlocks = $('#api-access-accordion').find('figure');
+
+    if( codeExampleControl.length > 0 ){
+
+      let controlButtons = $(codeExampleControl).find('input[name="api-access-example-code"]');
+
+      if( controlButtons.length > 0 ){
+
+        $(controlButtons).on('change', function(_event){
+
+          let selectedCode = $(codeExampleControl).find('input[name="api-access-example-code"]:checked').val();
+
+          $(codeBlocks).each(function(_index, _codeBlock){
+
+            if( $(_codeBlock).hasClass(selectedCode) ){
+
+              $(_codeBlock).show();
+
+            }else{
+
+              $(_codeBlock).hide();
+
+            }
+
+          });
+
+        });
+
+      }
+
+    }
+
+    // Activity tab link
+    let activityTab = $('#activity-lnk');
+
+    if( activityTab.length > 0 ){
+
+      let link = $('#activity').find('a').first().attr('href');
+
+      if( link && link.length > 0 ){
+
+        $(activityTab).attr('href', link);
+        $(activityTab).removeAttr('aria-controls');
+        $(activityTab).attr('tabindex', 0);
+
+        $(activityTab).off('click');
+        $(activityTab).off('keyup');
+
+        function _goto_activity(){
+          window.location = link;
+        }
+
+        $(activityTab).on('click.Link', function(_event){
+          _event.preventDefault();
+          _goto_activity();
+        });
+        $(activityTab).on('keyup.Link', function(_event){
+          let keyCode = _event.keyCode ? _event.keyCode : _event.which;
+          // space and enter keys required for a11y
+          if( keyCode == 32 || keyCode == 13 ){
+            _event.preventDefault();
+            _goto_activity();
+          }
+        });
+
+      }
+
+    }
+
+  });
+});

ckanext/recombinant/assets/webassets.yml

@@ -0,0 +1,9 @@
+code_block_buttons:
+  contents:
+    - js/code_block_buttons.js
+  output: recombinant/%(version)s_code_block_buttons.js
+
+main_css:
+  contents:
+    - css/recombinant.css
+  output: recombinant/%(version)s_recombinant.css

ckanext/recombinant/plugins.py

@@ -29,7 +29,7 @@ class RecombinantPlugin(
     def update_config(self, config):
         # add our templates
         p.toolkit.add_template_directory(config, 'templates')
-        p.toolkit.add_public_directory(config, 'public')
+        p.toolkit.add_resource('assets', 'recombinant')
 
         # read our configuration early
         self._tables_urls = config.get('recombinant.definitions', ""

ckanext/recombinant/templates/recombinant/resource_edit.html

@@ -81,8 +81,7 @@
               <summary><span class="glyphicon glyphicon-wrench"></span>
                 {{ _("API Access") }}
               </summary>
-              {% snippet "recombinant/snippets/api_access.html",
-                pkg=dataset, username=c.userobj.name, resource=resource %}
+              {% snippet "recombinant/snippets/api_access.html", resource_id=resource.id, resource_name=resource.name, is_modal=false %}
             </details>
             <details id="activity">
               <summary><span class="glyphicon glyphicon-time"></span>
@@ -142,18 +141,12 @@ <h3>{{_("Create and update records")}}</h3>
   {% endblock action_panels %}
 {% endblock %}
 
-{# syntax hilighting for API docs above #}
 {% block links %}
-{{ super() }}
-<style>
-.code-block pre {display: none}
-.code-block.lang-python pre.python {display: block}
-.code-block.lang-curl pre.curl {display: block}
-.code-block.lang-powershell pre.powershell {display: block}
-</style>
+  {{ super() }}
+  {% asset 'recombinant/main_css' %}
 {% endblock %}
 
-{%- block scripts %}
+{%- block scripts -%}
   {{ super() }}
- <script src="{{ h.url_for_static('js/code_block_buttons.js') }}"></script>
-{% endblock %}
+  {% asset 'recombinant/code_block_buttons' %}
+{%- endblock -%}