[ckan-changes] [okfn/ckan] 7c7667: [2204] Move event handler to form submit event

• Previous message: [ckan-changes] [okfn/ckan] a245bf: [2302] Added support for editing about page, and a...
• Next message: [ckan-changes] [okfn/ckan] d2c443: remove extra fields from solr schema1.3
• Messages sorted by: [ date ] [ thread ] [ subject ] [ author ]

  Branch: refs/heads/feature-2204-related
  Home:   https://github.com/okfn/ckan
  Commit: 7c76678a35a48fa3f5d38c61145787733a9e1506
      https://github.com/okfn/ckan/commit/7c76678a35a48fa3f5d38c61145787733a9e1506
  Author: Aron Carroll <self at aroncarroll.com>
  Date:   2012-04-24 (Tue, 24 Apr 2012)

  Changed paths:
    M ckan/public/scripts/application.js
    M ckan/templates/_snippet/add-related.html

  Log Message:
  -----------
  [2204] Move event handler to form submit event

This picks up the other methods of submitting the form such as pressing
return in a form input.


diff --git a/ckan/public/scripts/application.js b/ckan/public/scripts/application.js
index 5ddbae9..3af0053 100644
--- a/ckan/public/scripts/application.js
+++ b/ckan/public/scripts/application.js
@@ -9,7 +9,7 @@ CKAN.Utils = CKAN.Utils || {};
 /* ================================= */
 (function ($) {
   $(document).ready(function () {
-    CKAN.Utils.relatedSetup($("#add-related-submit"));
+    CKAN.Utils.relatedSetup($("#form-add-related"));
     CKAN.Utils.setupUserAutocomplete($('input.autocomplete-user'));
     CKAN.Utils.setupOrganizationUserAutocomplete($('input.autocomplete-organization-user'));
     CKAN.Utils.setupGroupAutocomplete($('input.autocomplete-group'));
@@ -1103,8 +1103,8 @@ CKAN.Utils = function($, my) {
   };
 
 
-  my.relatedSetup = function(okBtn) {
-      $(okBtn).click(function(){
+  my.relatedSetup = function(form) {
+      $(form).submit(function(event){
           // Validate the form
           var data = {
               title: $("#related-title").val(),
@@ -1132,6 +1132,8 @@ CKAN.Utils = function($, my) {
                   console.log(w);
               }
           });
+
+          event.preventDefault();
       });
       return false;
   };
diff --git a/ckan/templates/_snippet/add-related.html b/ckan/templates/_snippet/add-related.html
index 5abe4ba..95c0338 100644
--- a/ckan/templates/_snippet/add-related.html
+++ b/ckan/templates/_snippet/add-related.html
@@ -12,7 +12,7 @@
     <h3 class="heading">Add related item</h3>
   </div>
   <div class="modal-body">
-    <form class="well">
+    <form id="form-add-related" action="" method="POST" class="well">
       <input id="related-dataset" type="hidden" value="${c.pkg.id}"/>
 
       <label for="related-title">Title</label>


================================================================
  Commit: 0dccd5fb5d9669c27eeecc0a83ac6ee77a009ce3
      https://github.com/okfn/ckan/commit/0dccd5fb5d9669c27eeecc0a83ac6ee77a009ce3
  Author: Aron Carroll <self at aroncarroll.com>
  Date:   2012-04-24 (Tue, 24 Apr 2012)

  Changed paths:
    M ckan/public/scripts/application.js
    M ckan/templates/_snippet/add-related.html

  Log Message:
  -----------
  [2204] Submit and cancel buttons now work as expected


diff --git a/ckan/public/scripts/application.js b/ckan/public/scripts/application.js
index 3af0053..b761178 100644
--- a/ckan/public/scripts/application.js
+++ b/ckan/public/scripts/application.js
@@ -1105,6 +1105,8 @@ CKAN.Utils = function($, my) {
 
   my.relatedSetup = function(form) {
       $(form).submit(function(event){
+          event.preventDefault();
+
           // Validate the form
           var data = {
               title: $("#related-title").val(),
@@ -1118,7 +1120,7 @@ CKAN.Utils = function($, my) {
           if ( ! data.title ) {
               // TODO: Fix this
               alert( "You must specify the title");
-              return true;
+              return;
           }
 
           $.ajax({
@@ -1131,9 +1133,7 @@ CKAN.Utils = function($, my) {
               error: function(err, txt,w) {
                   console.log(w);
               }
-          });
-
-          event.preventDefault();
+          }); 
       });
       return false;
   };
diff --git a/ckan/templates/_snippet/add-related.html b/ckan/templates/_snippet/add-related.html
index 95c0338..d3409aa 100644
--- a/ckan/templates/_snippet/add-related.html
+++ b/ckan/templates/_snippet/add-related.html
@@ -35,8 +35,8 @@ <h3 class="heading">Add related item</h3>
       <input id="related-image-url" type="text" class="span6" placeholder="Please add a link to the image"/>
 
       <div>
-        <button id='add-related-submit' type="submit" class="btn btn-primary">Submit</button>
-        <button class="btn">Cancel</button>
+        <button type="submit" class="btn btn-primary">Submit</button>
+        <button type="button" class="btn" data-dismiss="modal">Cancel</button>
       </div>
     </form>
   </div>


================================================================
  Commit: 82547a308bd26937c558b678a9d4f238825565ce
      https://github.com/okfn/ckan/commit/82547a308bd26937c558b678a9d4f238825565ce
  Author: Aron Carroll <self at aroncarroll.com>
  Date:   2012-04-24 (Tue, 24 Apr 2012)

  Changed paths:
    M ckan/public/scripts/application.js

  Log Message:
  -----------
  [2204] Bring Utils.relatedSetup() style inline with rest of code


diff --git a/ckan/public/scripts/application.js b/ckan/public/scripts/application.js
index b761178..4e2e41d 100644
--- a/ckan/public/scripts/application.js
+++ b/ckan/public/scripts/application.js
@@ -1104,38 +1104,37 @@ CKAN.Utils = function($, my) {
 
 
   my.relatedSetup = function(form) {
-      $(form).submit(function(event){
-          event.preventDefault();
+    $(form).submit(function (event) {
+      event.preventDefault();
+
+      // Validate the form
+      var data = {
+        title: $("#related-title").val(),
+        type:  $("#related-type").val(),
+        description: $("#related-description").val(),
+        url: $("#related-url").val(),
+        image_url: $("#related-image-url").val(),
+        dataset_id: $("#related-dataset").val()
+      };
 
-          // Validate the form
-          var data = {
-              title: $("#related-title").val(),
-              type:  $("#related-type").val(),
-              description: $("#related-description").val(),
-              url: $("#related-url").val(),
-              image_url: $("#related-image-url").val(),
-              dataset_id: $("#related-dataset").val(),
-          };
-
-          if ( ! data.title ) {
-              // TODO: Fix this
-              alert( "You must specify the title");
-              return;
-          }
+      if (!data.title) {
+        // TODO: Fix this
+        alert( "You must specify the title");
+        return;
+      }
 
-          $.ajax({
-              type: 'POST',
-              url: CKAN.SITE_URL + '/api/3/action/related_create',
-              data: JSON.stringify(data),
-              success: function(data){
-                  window.location.href=window.location.href;
-              },
-              error: function(err, txt,w) {
-                  console.log(w);
-              }
-          }); 
-      });
-      return false;
+      $.ajax({
+        type: this.method,
+        url: CKAN.SITE_URL + '/api/3/action/related_create',
+        data: JSON.stringify(data),
+        success: function (data) {
+          window.location.href = window.location.href;
+        },
+        error: function(err, txt, w) {
+          console.log(w);
+        }
+      }); 
+    });
   };
 
   // Attach authz group autocompletion to provided elements


================================================================
  Commit: 78a23dc1423a5cebc79757d8bd769681084be42c
      https://github.com/okfn/ckan/commit/78a23dc1423a5cebc79757d8bd769681084be42c
  Author: Aron Carroll <self at aroncarroll.com>
  Date:   2012-04-24 (Tue, 24 Apr 2012)

  Changed paths:
    M ckan/public/css/style.css

  Log Message:
  -----------
  Fix style bleed with visited links with "btn" class


diff --git a/ckan/public/css/style.css b/ckan/public/css/style.css
index 1f459d1..ca9ea82 100644
--- a/ckan/public/css/style.css
+++ b/ckan/public/css/style.css
@@ -148,6 +148,10 @@ a:hover {
   color: #183661;
 }
 
+a.btn-primary:visited {
+  color: #fff;
+}
+
 label.control-label {
   font-weight: bold;
 }


================================================================
  Commit: 869c094020a6a19446c0e62b7d2b58c3c9412e57
      https://github.com/okfn/ckan/commit/869c094020a6a19446c0e62b7d2b58c3c9412e57
  Author: Aron Carroll <self at aroncarroll.com>
  Date:   2012-04-24 (Tue, 24 Apr 2012)

  Changed paths:
    M ckan/public/scripts/application.js
    M ckan/templates/_snippet/add-related.html

  Log Message:
  -----------
  [2204] Moved field names into the html form

Also added some basic HTML validation attributes.


diff --git a/ckan/public/scripts/application.js b/ckan/public/scripts/application.js
index 4e2e41d..2d49e6e 100644
--- a/ckan/public/scripts/application.js
+++ b/ckan/public/scripts/application.js
@@ -1108,14 +1108,10 @@ CKAN.Utils = function($, my) {
       event.preventDefault();
 
       // Validate the form
-      var data = {
-        title: $("#related-title").val(),
-        type:  $("#related-type").val(),
-        description: $("#related-description").val(),
-        url: $("#related-url").val(),
-        image_url: $("#related-image-url").val(),
-        dataset_id: $("#related-dataset").val()
-      };
+      var data = {};
+      jQuery.each(jQuery(this).serializeArray(), function (name, value) {
+        data[name] = value;
+      });
 
       if (!data.title) {
         // TODO: Fix this
diff --git a/ckan/templates/_snippet/add-related.html b/ckan/templates/_snippet/add-related.html
index d3409aa..5ed2de3 100644
--- a/ckan/templates/_snippet/add-related.html
+++ b/ckan/templates/_snippet/add-related.html
@@ -13,26 +13,26 @@ <h3 class="heading">Add related item</h3>
   </div>
   <div class="modal-body">
     <form id="form-add-related" action="" method="POST" class="well">
-      <input id="related-dataset" type="hidden" value="${c.pkg.id}"/>
+      <input id="related-dataset" type="hidden" name="dataset_id" value="${c.pkg.id}"/>
 
       <label for="related-title">Title</label>
-      <input id="related-title" type="text" class="span6" placeholder="Please add the title for the item"/>
+      <input required="required" id="related-title" name="title" class="span6" placeholder="Please add the title for the item"/>
 
       <label for="related-type">Type of item</label>
-      <select id="related-type" class="span6 chzn-select">
+      <select id="related-type" name="type" class="span6 chzn-select">
         <option value="app">Application</option>
         <option value="idea">Idea</option>
         <option value="visualization">Visualization</option>
       </select>
 
       <label for="related-description">Description</label>
-      <textarea id="related-description" class="input-xlarge span6" rows="4" placeholder="Please describe the item"></textarea>
+      <textarea id="related-description" name="description" class="input-xlarge span6" rows="4" placeholder="Please describe the item"></textarea>
 
       <label for="related-url">URL</label>
-      <input id="related-url" type="text" class="span6" placeholder="Please add a url"/>
+      <input required="required" id="related-url" name="url" type="url" class="span6" placeholder="Please add a url"/>
 
       <label for="related-image-url">Image URL</label>
-      <input id="related-image-url" type="text" class="span6" placeholder="Please add a link to the image"/>
+      <input id="related-image-url" name="image_url" type="url" class="span6" placeholder="Please add a link to the image"/>
 
       <div>
         <button type="submit" class="btn btn-primary">Submit</button>


================================================================
  Commit: ad925afd00cf9ca6342edb35932879a6d9e65f8f
      https://github.com/okfn/ckan/commit/ad925afd00cf9ca6342edb35932879a6d9e65f8f
  Author: Aron Carroll <self at aroncarroll.com>
  Date:   2012-04-24 (Tue, 24 Apr 2012)

  Changed paths:
    M ckan/public/scripts/application.js
    M ckan/templates/_snippet/add-related.html

  Log Message:
  -----------
  [2204] Improve error handling of form


diff --git a/ckan/public/scripts/application.js b/ckan/public/scripts/application.js
index 2d49e6e..1e16451 100644
--- a/ckan/public/scripts/application.js
+++ b/ckan/public/scripts/application.js
@@ -1104,18 +1104,22 @@ CKAN.Utils = function($, my) {
 
 
   my.relatedSetup = function(form) {
+    function addAlert(msg) {
+      $('<div class="alert alert-error" />').html(msg).prependTo(form);
+    }
+
     $(form).submit(function (event) {
       event.preventDefault();
 
       // Validate the form
-      var data = {};
-      jQuery.each(jQuery(this).serializeArray(), function (name, value) {
+      var form = $(this), data = {};
+      jQuery.each(form.serializeArray(), function (name, value) {
         data[name] = value;
       });
 
       if (!data.title) {
-        // TODO: Fix this
-        alert( "You must specify the title");
+        addAlert('<strong>Missing field:</strong> A title is required');
+        $('[name=title]').parent().addClass('error');
         return;
       }
 
@@ -1124,10 +1128,11 @@ CKAN.Utils = function($, my) {
         url: CKAN.SITE_URL + '/api/3/action/related_create',
         data: JSON.stringify(data),
         success: function (data) {
-          window.location.href = window.location.href;
+          window.location.reload();
         },
         error: function(err, txt, w) {
-          console.log(w);
+          // This needs to be far more informative.
+          addAlert('<strong>Error:</strong> Unable to add related item');
         }
       }); 
     });
diff --git a/ckan/templates/_snippet/add-related.html b/ckan/templates/_snippet/add-related.html
index 5ed2de3..c508bff 100644
--- a/ckan/templates/_snippet/add-related.html
+++ b/ckan/templates/_snippet/add-related.html
@@ -13,11 +13,11 @@ <h3 class="heading">Add related item</h3>
   </div>
   <div class="modal-body">
     <form id="form-add-related" action="" method="POST" class="well">
-      <input id="related-dataset" type="hidden" name="dataset_id" value="${c.pkg.id}"/>
-
-      <label for="related-title">Title</label>
-      <input required="required" id="related-title" name="title" class="span6" placeholder="Please add the title for the item"/>
-
+      <div class="control-group">
+        <input id="related-dataset" type="hidden" name="dataset_id" value="${c.pkg.id}"/>
+        <label for="related-title">Title (required)</label>
+        <input id="related-title" name="title" class="span6" placeholder="Please add the title for the item"/>
+      </div>
       <label for="related-type">Type of item</label>
       <select id="related-type" name="type" class="span6 chzn-select">
         <option value="app">Application</option>
@@ -29,7 +29,7 @@ <h3 class="heading">Add related item</h3>
       <textarea id="related-description" name="description" class="input-xlarge span6" rows="4" placeholder="Please describe the item"></textarea>
 
       <label for="related-url">URL</label>
-      <input required="required" id="related-url" name="url" type="url" class="span6" placeholder="Please add a url"/>
+      <input id="related-url" name="url" type="url" class="span6" placeholder="Please add a url"/>
 
       <label for="related-image-url">Image URL</label>
       <input id="related-image-url" name="image_url" type="url" class="span6" placeholder="Please add a link to the image"/>


================================================================
  Commit: 008d12d9095d0e0b7179c4218e469a066fdb01e7
      https://github.com/okfn/ckan/commit/008d12d9095d0e0b7179c4218e469a066fdb01e7
  Author: Aron Carroll <self at aroncarroll.com>
  Date:   2012-04-24 (Tue, 24 Apr 2012)

  Changed paths:
    M ckan/public/css/style.css
    A ckan/public/images/photo-placeholder.png
    M ckan/public/scripts/application.js
    M ckan/templates/_util.html
    M ckan/templates/package/related_list.html

  Log Message:
  -----------
  [2204] Format the related items into a grid

This hopefully gives the greatest prominence to the images and will
encourage users to upload images. Also added a direct link to view
the item.


diff --git a/ckan/public/css/style.css b/ckan/public/css/style.css
index ca9ea82..ba29d43 100644
--- a/ckan/public/css/style.css
+++ b/ckan/public/css/style.css
@@ -1423,3 +1423,37 @@ body.editresources .error-explanation {
 .form-horizontal .chzn-select {
   margin-bottom: 0;
 }
+
+.thumbnails li:nth-of-type(5n) {
+  clear: left;
+}
+
+.thumbnail .heading {
+  font-weight: bold;
+}
+
+.thumbnail .image {
+  display: block;
+  width: 210px;
+  height: 180px;
+  overflow: hidden;
+  background: #ececec;
+  border: 1px solid #dedede;
+  margin: -1px;
+}
+
+.thumbnail .image img {
+  max-width: 100%;
+  width: auto;
+  height: auto;
+}
+
+.thumbnail .empty {
+  color: #ccc;
+}
+
+.thumbnail .read-more {
+  margin-top: 10px;
+  margin-bottom: 0;
+}
+
diff --git a/ckan/public/images/photo-placeholder.png b/ckan/public/images/photo-placeholder.png
new file mode 100644
index 0000000..efdea70
Binary files /dev/null and b/ckan/public/images/photo-placeholder.png differ
diff --git a/ckan/public/scripts/application.js b/ckan/public/scripts/application.js
index 1e16451..1d66e97 100644
--- a/ckan/public/scripts/application.js
+++ b/ckan/public/scripts/application.js
@@ -1105,18 +1105,34 @@ CKAN.Utils = function($, my) {
 
   my.relatedSetup = function(form) {
     function addAlert(msg) {
-      $('<div class="alert alert-error" />').html(msg).prependTo(form);
+      $('<div class="alert alert-error" />').html(msg).hide().prependTo(form).fadeIn();
     }
 
+    // Center thumbnails vertically.
+    $('.related-items img').each(function () {
+      function vertiallyAlign() {
+        var img = $(this),
+            height = img.height(),
+            parent = img.parent().height(),
+            top = (height - parent) / 2;
+
+        if (parent < height) {
+          img.css('margin-top', -top);
+        }
+      }
+      $(this).load(vertiallyAlign);
+    });
+
     $(form).submit(function (event) {
       event.preventDefault();
 
       // Validate the form
       var form = $(this), data = {};
-      jQuery.each(form.serializeArray(), function (name, value) {
-        data[name] = value;
+      jQuery.each(form.serializeArray(), function () {
+        data[this.name] = this.value;
       });
 
+      form.find('.alert').remove();
       if (!data.title) {
         addAlert('<strong>Missing field:</strong> A title is required');
         $('[name=title]').parent().addClass('error');
diff --git a/ckan/templates/_util.html b/ckan/templates/_util.html
index 1b3cec8..e20f09b 100644
--- a/ckan/templates/_util.html
+++ b/ckan/templates/_util.html
@@ -218,23 +218,20 @@
 
 
   <py:def function="related_summary(related)">
-    <table width="100%" border="0" cellpadding="4">
-        <tr>
-            <td rowspan="2" width="200px">
-                <a href="${related.url}" py:if="related.image_url">
-                    <img src="${related.image_url}" width="200px" border="0"/>
-                </a>
-                <a href="${related.url}" py:if="not related.image_url">
-                    DEFAULT IMAGE
-                </a>
-            </td>
-            <td><strong>${related.title}</strong></td>
-        </tr>
-        <tr>
-            <td valign="top">${related.description}</td>
-        </tr>
-    </table>
-    <hr/>
+    <li class="span3">
+      <div class="thumbnail">
+        <a href="${related.url}" class="image">
+          <img src="${related.image_url}" width="210" py:if="related.image_url" />
+          <img src="/images/photo-placeholder.png" width="210" py:if="not related.image_url" />
+        </a>
+        <div class="caption">
+          <h5 class="heading" title="${related.title}">${h.markdown_extract(related.title, extract_length=30)}</h5>
+          <div class="description" py:if="related.description">${h.markdown_extract(related.description, extract_length=60)}</div>
+          <i class="empty" py:if="not related.description">No description for this item</i>
+          <p class="read-more"><a href="${related.url}">View this related item</a></p>
+        </div>
+      </div>
+    </li>
   </py:def>
 
 
diff --git a/ckan/templates/package/related_list.html b/ckan/templates/package/related_list.html
index 33dd6e6..d9feed2 100644
--- a/ckan/templates/package/related_list.html
+++ b/ckan/templates/package/related_list.html
@@ -11,6 +11,7 @@
   about=""
   py:strip="">
 
+  <py:def function="body_class">no-sidebar</py:def>
   <xi:include href="../_snippet/add-related.html" />
 
   <py:def function="page_title">${c.pkg_dict.get('title', c.pkg_dict['name'])}
@@ -20,29 +21,19 @@
     ${c.pkg_dict['title']} - Related
   </py:def>
 
-  <py:match path="primarysidebar">
-    <li class="sidebar-section">
-      <h3>What are related items ....</h3>
-
-      <a class="btn btn-primary" data-toggle="modal" href=".modal-add-related">Add related item</a>
-    </li>
-  </py:match>
-
   <div py:match="content">
     ${add_related(c.pkg)}
-    <h3>Related items</h3>
-    <div class="row-fluid">
-      <div class="span12">
-          <div py:if="not c.pkg.related" class="span8">
-              There are no related items here yet, why not <a data-toggle="modal" href=".modal-add-related">add one</a>?
-          </div>
-
-          <py:for each="related in c.pkg.related">
-              <div class="span8 related_${related.type}">
-                  ${related_summary(related)}
-              </div>
-          </py:for>
+    <h3>Related items <a class="btn btn-small btn-primary pull-right" data-toggle="modal" href=".modal-add-related"><i class="icon-plus-sign icon-white"></i> Add related item</a></h3>
+    <div>
+      <div py:if="not c.pkg.related" class="span8">
+          There are no related items here yet, why not <a data-toggle="modal" href=".modal-add-related">add one</a>?
       </div>
+
+      <ul class="related-items thumbnails">
+        <py:for each="related in c.pkg.related">
+          ${related_summary(related)}
+        </py:for>
+      </ul>
     </div>
 
     <span class="insert-comment-thread"></span>


================================================================
Compare: https://github.com/okfn/ckan/compare/cb3b171...008d12d

• Previous message: [ckan-changes] [okfn/ckan] a245bf: [2302] Added support for editing about page, and a...
• Next message: [ckan-changes] [okfn/ckan] d2c443: remove extra fields from solr schema1.3
• Messages sorted by: [ date ] [ thread ] [ subject ] [ author ]