@@ -1,5 +1,8 @@
* Before release 0.20 [0/8]
- - [ ] inplace editor doesn't handle escape correctly
+ - [ ] null titles break taboo
+ - [ ] make sure re-clicking the taboo button doesn't overwrite data?
+ - [ ] inplace editor doesn't handle escape key correctly:
+ click to edit, save changes, then click escape again to change
- [ ] inplace editor breaks if you change textarea while it is in edit mode
- [ ] deleting from grid mode doesn't show the undelete box
- [ ] undelete / delete all isn't show correctly on trash.js
README
@@ -48,20 +48,15 @@
* @name editInPlace
* @type jQuery
* @param Hash options additional options
- * @param String options[url] POST URL to send edited content
- * @param String options[params] paramters sent via the post request to the server; string; ex: name=dave&last_name=hauenstein
* @param String options[field_type] can be: text, textarea, select; default: text
- * @param String options[select_options] this is a string seperated by commas for the dropdown options, if field_type is dropdown
* @param String options[textarea_cols] number of columns textarea will have, if field_type is textarea; default: 25
* @param String options[textarea_rows] number of rows textarea will have, if field_type is textarea; default: 10
* @param String options[bg_over] background color of editable elements on HOVER
* @param String options[bg_out] background color of editable elements on RESTORE from hover
- * @param String options[saving_text] text to be used when server is saving information; default: 'Saving...'
- * @param String options[saving_image] specify an image location instead of text while server is saving; default: uses saving text
+ * @param String options[default_text] text to be used when element has no value
* @param String options[value_required] if set to true, the element will not be saved unless a value is entered
* @param String options[element_id] name of parameter holding element_id; default: element_id
* @param String options[update_value] name of parameter holding update_value; default: update_value
- * @param String options[original_html] name of parameter holding original_html; default: original_html
* @param String options[save_button] image button tag to use as "Save" button
* @param String options[cancel_button] image button tag to use as "Cancel" button
* @param String options[callback] call function instead of submitting to url
@@ -73,22 +68,15 @@ jQuery.fn.editInPlace = function(options) {
//#######################################################################
//DEFINE THE DEFAULT SETTINGS, SWITCH THEM WITH THE OPTIONS USER PROVIDES
var settings = {
- url: "",
- params: "",
field_type: "text",
- select_options: "",
textarea_cols: "25",
textarea_rows: "10",
bg_over: "#ffc",
bg_out: "transparent",
- saving_text: "Saving...",
- saving_image: "",
default_text: "(Click here to add text)",
- select_text: "Choose new value",
value_required: null,
element_id: "element_id",
update_value: "update_value",
- original_html: "original_html",
save_button: '<input type="submit" class="inplace_save" value="Save"/>',
cancel_button: '<input type="submit" class="inplace_cancel" value="Cancel"/>',
callback: null,
@@ -102,23 +90,8 @@ jQuery.fn.editInPlace = function(options) {
jQuery.extend(settings, options);
}
- //#######################################################################
- //preload the loading icon if it exists
- if (settings.saving_image != ""){
- var loading_image = new Image();
- loading_image.src = settings.saving_image;
- }
-
- //#######################################################################
- //THIS FUNCTION WILL TRIM WHITESPACE FROM BEFORE/AFTER A STRING
- String.prototype.trim = function() {
- return this.replace(/^\s+/, '').replace(/\s+$/, '');
- };
-
- //#######################################################################
- //THIS FUNCTION WILL ESCAPE ANY HTML ENTITIES SO "Quoted Values" work
- String.prototype.escape_html = function() {
- return this.replace(/&/g, "&").replace(/</g, "<")
+ function escape_html(str) {
+ return str.replace(/&/g, "&").replace(/</g, "<")
.replace(/>/g, ">")
.replace(/\"/g, """);
};
@@ -127,162 +100,104 @@ jQuery.fn.editInPlace = function(options) {
//CREATE THE INPLACE EDITOR
return this.each(function(){
- if(jQuery(this).html() == "") jQuery(this).html(settings.default_text);
-
+ var element = jQuery(this);
+ var value;
var editing = false;
+ var click_count = 0;
- //save the original element - for change of scope
- var original_element = jQuery(this);
+ element.bind('update', function(event, val) {
+ if (val == null || val == "") {
+ element.text(settings.default_text);
+ }
+ else {
+ element.text(val);
+ }
+ });
- var click_count = 0;
+ element.bind('cancel', function() {
+ editing = false;
+ click_count = 0;
+
+ //put the original background color in
+ element.css("background", settings.bg_out);
+
+ //put back the original text
+ element.trigger('update', [value]);
+ });
+
+ element.bind('save', function() {
+ editing = false;
+ click_count = 0;
- jQuery(this).mouseover(function(){
- jQuery(this).css("background", settings.bg_over);
+ //put the original background color in
+ element.css("background", settings.bg_out);
+
+ value = element.children('form').children('.inplace_field').val();
+ element.trigger('callback', [value]);
+ element.trigger('update', [value]);
+ });
+
+ element.mouseover(function(){
+ element.css("background", settings.bg_over);
}).mouseout(function(){
- jQuery(this).css("background", settings.bg_out);
+ element.css("background", settings.bg_out);
}).click(function(){
click_count++;
if (!editing) {
editing = true;
-
- //save original text - for cancellation functionality
- var original_html = jQuery(this).html();
+ value = element.text();
var buttons_code = settings.save_button + ' ' + settings.cancel_button;
- //if html is our default text, clear it out to prevent saving accidentally
- if (original_html == settings.default_text) jQuery(this).html('');
+ // if html is our default text, clear it out to prevent saving accidentally
+ // FIXME: I think original_html should be set to '' as well
+ if (value == settings.default_text) element.text('');
if (settings.field_type == "textarea") {
- var use_field_type = '<textarea name="inplace_value" class="inplace_field" rows="' +
+ var use_field_type = '<textarea class="inplace_field" rows="' +
settings.textarea_rows +
'" cols="' + settings.textarea_cols + '">' +
- jQuery(this).text().trim().escape_html() +
+ escape_html(element.text()) +
'</textarea>';
}
else if (settings.field_type == "text") {
- var use_field_type = '<input type="text" name="inplace_value" class="inplace_field" value="' +
- jQuery(this).text().trim().escape_html() + '" />';
- }
- else if (settings.field_type == "select") {
- var optionsArray = settings.select_options.split(',');
- var use_field_type = '<select name="inplace_value" class="inplace_field"><option value="">' +
- settings.select_text + '</option>';
- for (var i=0; i<optionsArray.length; i++) {
- var optionsValuesArray = optionsArray[i].split(':');
- var use_value = optionsValuesArray[1] || optionsValuesArray[0];
- var selected = use_value == original_html ? 'selected="selected" ' : '';
- use_field_type += '<option ' + selected + 'value="' +
- use_value.trim().escape_html() + '">' +
- optionsValuesArray[0].trim().escape_html() + '</option>';
- }
- use_field_type += '</select>';
+ var use_field_type = '<input type="text" class="inplace_field" value="' +
+ escape_html(element.text()) + '" />';
}
//insert the new in place form after the element they click, then empty out the original element
- jQuery(this).html('<form class="inplace_form" style="display: inline; margin: 0; padding: 0;">' +
+ element.html('<form class="inplace_form" style="display: inline; margin: 0; padding: 0;">' +
use_field_type + ' ' + buttons_code + '</form>');
- }//END- if(!editing) -END
+ }
- if(click_count == 1) {
+ if (click_count == 1) {
//set the focus to the new input element
- original_element.children("form").children(".inplace_field").focus().select();
-
- function cancel() {
- editing = false;
- click_count = 0;
-
- //put the original background color in
- original_element.css("background", settings.bg_out);
-
- //put back the original text
- original_element.html(original_html);
+ element.children("form").children(".inplace_field").focus().select();
- return false;
- }
//HIT ESC KEY
+ // FIXME: this is kinda evil since each inplace editor creation adds another binding
$(document).keyup(function(event){
- if (event.keyCode == 27) {
- cancel();
+ if (editing && event.keyCode == 27) {
+ element.trigger('cancel');
}
});
//CLICK CANCEL BUTTON functionality
- original_element.children("form").children(".inplace_cancel").click(cancel);
+ element.children("form").children(".inplace_cancel").click(function() {
+ element.trigger('cancel');
+ return false;
+ });
//CLICK SAVE BUTTON functionality
- original_element.children("form").children(".inplace_save").click(function(){
- //put the original background color in
- original_element.css("background", settings.bg_out);
-
- var new_html = jQuery(this).parent().children(0).val();
-
- //set saving message
- if (settings.saving_image != ""){
- var saving_message = '<img src="' + settings.saving_image + '" alt="Saving..." />';
- } else {
- var saving_message = settings.saving_text;
- }
-
- //place the saving text/image in the original element
- original_element.html(saving_message);
-
- if (settings.params != ""){
- settings.params = "&" + settings.params;
- }
-
- if (settings.callback) {
- html = settings.callback(original_element.attr("id"), new_html, original_html, settings.params);
- editing = false;
- click_count = 0;
- if (html) {
- // put the newly updated info into the original element
- original_element.html(html || new_html);
- } else {
- // failure; put original back
- alert("Failed to save value: " + new_html);
- original_element.html(original_html);
- }
- } else if (settings.value_required && new_html == "") {
- editing = false;
- click_count = 0;
- original_element.html(original_html);
- alert("Error: You must enter a value to save this field");
- } else {
- jQuery.ajax({
- url: settings.url,
- type: "POST",
- data: settings.update_value + '=' + new_html + '&' + settings.element_id + '=' +
- original_element.attr("id") + settings.params +
- '&' + settings.original_html + '=' + original_html,
- dataType: "html",
- complete: function(request) {
- editing = false;
- click_count = 0;
- },
- success: function(html) {
- // if the text returned by the server is empty,
- // put a marker as text in the original element
- var new_text = html || settings.default_text;
-
- // put the newly updated info into the original element
- original_element.html(new_text);
- if (settings.success) settings.success(html, original_element);
- },
- error: function(request) {
- original_element.html(original_html);
- if (settings.error) settings.error(request, original_element);
- }
- });
- }
-
- return false;
- });
- }//END- if(click_count == 1) -END
+ element.children("form").children(".inplace_save").click(function(){
+ element.trigger('save');
+ return false;
+ });
+ }
});
});
-};
\ No newline at end of file
+};
chrome/content/jquery.inplace.source.js
@@ -26,23 +26,22 @@ function Mosaic(container) {
container.appendChild(DIV({id: 'main'}, img, url, title, description));
- $(title).editInPlace({
- callback: function(original_element, html) {
- SVC.update(currentUrl, html, null);
- return html.replace(/</g, '<');
- }
- });
+ $(title).editInPlace();
+
+ $(title).bind('callback', function(e, value) {
+ SVC.update(currentUrl, value, null);
+ });
$(description).editInPlace({
- field_type: "textarea",
- textarea_rows: "5",
- textarea_cols: "35",
- bg_out: '#fff',
- callback: function(original_element, html) {
- SVC.update(currentUrl, null, html);
- return html.replace(/</g, '<');
- }
- });
+ field_type: "textarea",
+ textarea_rows: "5",
+ textarea_cols: "35",
+ bg_out: '#fff'
+ });
+
+ $(description).bind('callback', function(e, value) {
+ SVC.update(currentUrl, null, value);
+ });
function openCurrent(event) {
SVC.open(currentUrl, whereToOpenLink(event));
@@ -53,14 +52,14 @@ function Mosaic(container) {
var list = document.createElement('div');
list.setAttribute('id', 'list');
- container.appendChild(list)
+ container.appendChild(list);
this.start = function() {
currentUrl = null;
list.innerHTML = '';
- }
+ };
- this.finish = function() {}
+ this.finish = function() {};
var currentUrl = null;
@@ -78,9 +77,9 @@ function Mosaic(container) {
box.onclick = function(event) {
currentUrl = tab.url;
img.setAttribute('src', tab.imageURL);
+ $(title).trigger('update', [tab.title]);
+ $(description).trigger('update', [tab.description]);
setText(url, tab.url);
- setText(title, tab.title);
- setText(description, tab.description);
};
box.onmouseover = function(event) {
chrome/content/mosaic.js
43d5c35b987e28ee2681012543b54adcf4eb5495
Jesse Andrews
anotherjesse@gmail.com
http://github.com/anotherjesse/taboo/commit/2fb2024fd7118be3148f9d065a70cbbf38b00c85
2fb2024fd7118be3148f9d065a70cbbf38b00c85
2008-06-18T02:31:23-07:00
2008-06-18T02:31:23-07:00
rewrite jquery inplace editor - and adapt mosaic code to use it
9131255e810fa6ebd5b0cdbfd6b6e5ccc78981ed
Jesse Andrews
anotherjesse@gmail.com