diff --git a/server/go/camlistored/ui/pics.css b/server/go/camlistored/ui/pics.css
index 08c2ba4fe..90e8d3883 100644
--- a/server/go/camlistored/ui/pics.css
+++ b/server/go/camlistored/ui/pics.css
@@ -62,11 +62,11 @@ li a span {
li input {
text-align: right;
}
-.camliadmin li a span:hover {
- border: 1px outset #ccc;
- background: #fff;
- color: #000;
- font-weight: normal;
- text-decoration: none;
-}
+a.pics-edit,
+a.pics-edit:hover {
+ font-size: 70%;
+ color: #f00;
+ margin-right: .5em;
+ font-weight: normal;
+}
diff --git a/server/go/camlistored/ui/pics.js b/server/go/camlistored/ui/pics.js
index c134c81e8..ffa929d81 100644
--- a/server/go/camlistored/ui/pics.js
+++ b/server/go/camlistored/ui/pics.js
@@ -22,60 +22,91 @@ function addColorboxen() {
});
}
+var titleInput, editLink;
function init() {
$(document).ready(function() {
+ // Before the images are loaded, rewrite the urls to include the square
+ // parameter.
+ $('li img').each(function() {
+ this.src = this.src + '&square=1';
+ });
+
if (camliViewIsOwner) {
$('body').addClass('camliadmin');
- var titleInput = $(document.createElement('input'));
- titleInput.blur(function() {
- var spanTitle = $(this).parent().find('a span');
- var spanText = spanTitle.text();
- var newVal = $(this).val();
- if (spanText != newVal) {
- spanTitle.text(newVal);
- var blobRef = $(this).parent().attr('id').replace(/^camli-/, '');
- window.console.log('blobRef', blobRef);
- camliNewSetAttributeClaim(
- blobRef,
- "title",
- newVal,
- {
- success: function() {
- var elapsedMs = new Date().getTime() - startTime.getTime();
- setTimeout(function() {
- inputTitle.disabled = false;
- btnSaveTitle.disabled = false;
- buildPermanodeUi();
- }, Math.max(250 - elapsedMs, 0));
- },
- fail: function(msg) {
- alert(msg);
- inputTitle.disabled = false;
- btnSaveTitle.disabled = false;
- }
- });
- }
- $(this).hide();
- spanTitle.show();
+ editLink = $(document.createElement('a'));
+ editLink.attr('#');
+ editLink.addClass('pics-edit');
+ editLink.html('edit title');
+ editLink.click(function(e) {
+ editTitle();
+ e.stopPropagation();
+ e.preventDefault();
});
- $('li a span').mouseover(function() {
- titleInput.val($(this).text());
- $(this).parent().after(titleInput);
- titleInput.show();
- titleInput.focus();
- titleInput.select();
- $(this).hide();
+ titleInput = $(document.createElement('input'));
+ titleInput.blur(function() {
+ saveImgTitle($(this));
+ });
+ titleInput.bind('keypress', function(e) {
+ if (e.keyCode == 13) {
+ saveImgTitle($(this));
+ }
+ });
+
+ $('li').mouseenter(function(e) {
+ $(this).find('img').after(editLink);
+ editLink.show();
+ });
+ $('li').mouseleave(function(e) {
+ editLink.hide();
});
}
});
}
+function editTitle() {
+ var titleSpan = editLink.next();
+ titleInput.val(titleSpan.text());
+ titleSpan.parent().after(titleInput);
+ titleInput.show();
+ titleInput.focus();
+ titleInput.select();
+ titleSpan.hide();
+ editLink.hide();
+}
+
+function saveImgTitle(titleInput) {
+ var spanTitle = titleInput.parent().find('a span');
+ var spanText = spanTitle.text();
+ var newVal = titleInput.val();
+ if (spanText != newVal) {
+ spanTitle.text(newVal);
+ var blobRef = titleInput.parent().attr('id').replace(/^camli-/, '');
+ camliNewSetAttributeClaim(
+ blobRef,
+ "title",
+ newVal,
+ {
+ success: function() {
+ titleInput.hide();
+ spanTitle.show();
+ spanTitle.effect('highlight', {}, 300);
+ },
+ fail: function(msg) {
+ alert(msg);
+ }
+ });
+ }
+ titleInput.hide();
+ spanTitle.show();
+}
+
// Installs jQuery and the colorbox library along with an onload listener
// to fire the init function above.
if (typeof window['jQuery'] == 'undefined') {
document.write('');
- document.write('');
+ document.write('');
+ document.write('');
document.write('');
}