[ckan-changes] [okfn/ckan] 7c7667: [2204] Move event handler to form submit event
GitHub
noreply at github.com
Tue Apr 24 15:13:59 UTC 2012
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
More information about the ckan-changes
mailing list