[#1506][resourceedit][l]: Added icon querying API. Dynamically update…

… resource icon in editor.

ckan/config/routing.py

@@ -178,6 +178,8 @@ def make_map():
                 conditions=dict(method=['GET']))
     map.connect('/api/2/util/resource/format_autocomplete', controller='api', action='format_autocomplete',
                 conditions=dict(method=['GET']))
+    map.connect('/api/2/util/format_icon', controller='api', action='format_icon',
+                conditions=dict(method=['GET']))
 
     map.connect('/api/2/util/authorizationgroup/autocomplete', controller='api',
         action='authorizationgroup_autocomplete')

ckan/controllers/api.py

@@ -5,7 +5,7 @@
 from webob.multidict import UnicodeMultiDict
 
 from ckan.lib.base import BaseController, response, c, _, gettext, request
-from ckan.lib.helpers import json, date_str_to_datetime
+from ckan.lib.helpers import json, date_str_to_datetime, format_icon, icon_url
 import ckan.model as model
 import ckan.rating
 from ckan.lib.search import (query_for, QueryOptions, SearchIndexError, SearchError,
@@ -705,6 +705,14 @@ def munge_tag(self):
         munged_tag = munge_tag(tag)
         return self._finish_ok(munged_tag)
 
+    def format_icon(self):
+        f = request.params.get('format')
+        out = {
+            'format' : f, 
+            'icon'   : icon_url(format_icon(f))
+            }
+        return self._finish_ok(out)
+
     def status(self):
         context = {'model': model, 'session': model.Session}
         data_dict = {}

ckan/lib/helpers.py

@@ -321,19 +321,18 @@ def resource_icon(res):
     # also: 'page_white_link'
         return icon(icon_name)
     else:
-        return format_icon(res.get('format',''))
+        return icon(format_icon(res.get('format','')))
 
 def format_icon(_format):
-    icon_name = 'page_white'
     _format = _format.lower()
-    if ('json' in _format): icon_name = 'page_white_cup'
-    if ('csv' in _format): icon_name = 'page_white_gear'
-    if ('xls' in _format): icon_name = 'page_white_excel'
-    if ('zip' in _format): icon_name = 'page_white_compressed'
-    if ('api' in _format): icon_name = 'page_white_database'
-    if ('plain text' in _format): icon_name = 'page_white_text'
-    if ('xml' in _format): icon_name = 'page_white_code'
-    return icon(icon_name)
+    if ('json' in _format): return 'page_white_cup'
+    if ('csv' in _format): return 'page_white_gear'
+    if ('xls' in _format): return 'page_white_excel'
+    if ('zip' in _format): return 'page_white_compressed'
+    if ('api' in _format): return 'page_white_database'
+    if ('plain text' in _format): return 'page_white_text'
+    if ('xml' in _format): return 'page_white_code'
+    return 'page_white'
 
 def linked_gravatar(email_hash, size=100, default="identicon"):
     return literal('''<a href="https://gravatar.com/" target="_blank"

ckan/public/scripts/application.js

@@ -680,6 +680,7 @@ CKAN.View.ResourceEditList = Backbone.View.extend({
     var resource_object = { 
         resource: resource.toTemplateJSON(),
         num: position,
+        resource_icon: '/images/icons/page_white.png',
         resourceTypeOptions: [
           ['file', 'Data File']
           , ['api', 'API']
@@ -721,13 +722,21 @@ CKAN.View.ResourceEditList = Backbone.View.extend({
 
     // == Inner Functions: Update the name as you type == //
     var setName = function(newName) {
-      $link = $li.find('.js-resource-edit-open');
       newName = newName || ('<em>'+CKAN.Strings.noNameBrackets+'</em>');
       // Need to structurally modify the DOM to force a re-render of text
+      $link = $li.find('.js-resource-edit-open');
       $link.html('<span>'+newName+'</span>');
     };
-    var nameBoxChanged = function(e) {
-      setName($(e.target).val());
+    // == Inner function: Updates the icon as you type == //
+    var setFormat = function(newFormat) {
+      // Ask the server which icon to use
+      $.getJSON('/api/2/util/format_icon?format='+newFormat, function(data) {
+        if (data.icon) {
+          // Maybe I'll refactor the table to be inside the li
+          $li   .find('.js-resource-icon').attr('src',data.icon);
+          $table.find('.js-resource-icon').attr('src',data.icon);
+        }
+      });
     }
 
     // Trigger animation
@@ -736,12 +745,15 @@ CKAN.View.ResourceEditList = Backbone.View.extend({
     }
 
     var nameBox = $table.find('input.js-resource-edit-name');
-    CKAN.Utils.bindInputChanges(nameBox,nameBoxChanged);
+    CKAN.Utils.bindInputChanges(nameBox,function(e) { setName($(e.target).val()); });
+    var formatBox = $table.find('input.js-resource-edit-format');
+    CKAN.Utils.bindInputChanges(formatBox,function(e) { setFormat($(e.target).val()); });
 
     $li.find('.js-resource-edit-open').click(openTable);
     $li.find('.js-resource-edit-delete').click(deleteResource);
     // Initialise name
     setName(resource.attributes.name);
+    setFormat(resource.attributes.format);
   },
 
   removeResource: function(resource) {

ckan/public/scripts/templates.js

@@ -67,6 +67,7 @@ CKAN.Templates.resourceUpload = ' \
 CKAN.Templates.resourceEntry = ' \
   <li class="ui-state-default resource-edit"> \
     <div class="drag-bars">|||</div> \
+    <img class="js-resource-icon inline-icon resource-icon" src="${resource_icon}" /> \
     <a class="resource-edit-expand js-resource-edit-open" href="#">${resource.name}</a>\
   </li> \
   <!-- \
@@ -112,9 +113,11 @@ CKAN.Templates.resourceTable = ' \
           </td> \
         </tr> \
         </tr><tr> \
-          <td class="dataset-label" property="rdfs:label">'+CKAN.Strings.format+'</td> \
+          <td class="dataset-label" property="rdfs:label">'+CKAN.Strings.format +'\
+          &nbsp;&nbsp;<img class="js-resource-icon inline-icon resource-icon" src="${resource_icon}" /> \
+          </td> \
           <td class="dataset-details" property="rdf:value"> \
-            <input name="resources__${num}__format" type="text" value="${resource.format}" class="long autocomplete-format" /> \
+            <input name="resources__${num}__format" type="text" value="${resource.format}" class="long js-resource-edit-format autocomplete-format" /> \
           </td> \
         </tr> \
         </tr><tr> \

ckan/templates/facets.html

@@ -12,7 +12,7 @@ <h2>${title(code)}</h2>
             <li py:for="name, count in h.facet_items(c, code, limit=limit)"
                 py:if="not (code, name) in c.fields">
                 <a href="${c.drill_down_url(**{code: name})}">
-                  <span py:if="'format' in code.lower()">${h.format_icon(name)}</span>
+                  <span py:if="'format' in code.lower()">${h.icon(h.format_icon(name))}</span>
                   ${label(name)}</a> (${count})
             </li>
         </ul>