Index: /Users/team/fluid-repos/FLUID-755/src/webapp/fluid-components/js/fluid/InlineEdit.js =================================================================== --- /Users/team/fluid-repos/FLUID-755/src/webapp/fluid-components/js/fluid/InlineEdit.js (revision 5227) +++ /Users/team/fluid-repos/FLUID-755/src/webapp/fluid-components/js/fluid/InlineEdit.js (working copy) @@ -41,16 +41,27 @@ text.show(); } - function finish(editContainer, editField, text, finishedFn, invitationText, invitationTextStyle) { + function finish(editContainer, editField, text, finishedFn, invitationText, useInvitationText, invitationTextStyle, existingPadding) { finishedFn(editField[0], text[0]); var editVal = editField.val(); if (!editVal) { - text.text(invitationText); - text.addClass(invitationTextStyle); + if (useInvitationText) { + text.text(invitationText); + text.addClass(invitationTextStyle); + } else { + text.text(""); + var paddingDiff = fluid.InlineEdit.prototype.defaults.minimumPadding - existingPadding; + // if there is a positive diff, make the total = the required amount of padding + if (paddingDiff > 0) { + text.css('padding-right', existingPadding + paddingDiff); + } + } } else { text.text(editVal); text.removeClass(invitationTextStyle); + text.css('padding-right', existingPadding); } + view(editContainer, text); text.focus(); } @@ -96,7 +107,7 @@ text.activatable(editHandler(text, editContainer, editField, styles.invitation, styles.focus, paddings, invitationText, selectOnEdit)); } - function bindEditFinish(editContainer, editField, text, finishedFn, invitationText, invitationTextStyle) { + function bindEditFinish(editContainer, editField, text, finishedFn, invitationText, useInvitationText, invitationTextStyle, existingPadding) { var finishHandler = function (evt) { // Fix for handling arrow key presses see FLUID-760 var code = (evt.keyCode ? evt.keyCode : (evt.which ? evt.which : 0)); @@ -104,7 +115,7 @@ return true; } - finish(editContainer, editField, text, finishedFn, invitationText, invitationTextStyle); + finish(editContainer, editField, text, finishedFn, invitationText, useInvitationText, invitationTextStyle, existingPadding); return false; }; @@ -111,9 +122,9 @@ editContainer.keypress(finishHandler); } - function bindBlurHandler(editContainer, editField, text, finishedFn, invitationText, invitationTextStyle) { + function bindBlurHandler(editContainer, editField, text, finishedFn, invitationText, useInvitationText, invitationTextStyle, existingPadding) { var blurHandler = function (evt) { - finish(editContainer, editField, text, finishedFn, invitationText, invitationTextStyle); + finish(editContainer, editField, text, finishedFn, invitationText, useInvitationText, invitationTextStyle, existingPadding); return false; }; @@ -131,6 +142,7 @@ instance.finishedEditing = options.finishedEditing || function () {}; instance.editModeInjector = options.editModeInjector || defaults.editModeInjector; instance.invitationText = options.invitationText || defaults.invitationText; + instance.useInvitationText = (options.useInvitationText !== undefined ? options.useInvitationText : defaults.useInvitationText); }; var bindToDom = function (instance, container) { @@ -138,9 +150,18 @@ instance.container = fluid.container(container); instance.text = $(instance.selectors.text, instance.container); var displayText = instance.text.text(); + instance.existingPadding = parseFloat(instance.text.css("padding-right")); if (!displayText) { - instance.text.text(instance.invitationText); - instance.text.addClass(instance.styles.invitationText); + if (instance.useInvitationText) { + instance.text.text(instance.invitationText); + instance.text.addClass(instance.styles.invitationText); + } else { + var paddingDiff = fluid.InlineEdit.prototype.defaults.minimumPadding - instance.existingPadding; + // if there is a positive diff, make the total = the required amount of padding + if (paddingDiff > 0) { + instance.text.css('padding-right',instance.existingPadding + paddingDiff); + } + } } // If an edit container is found in the markup, use it. Otherwise generate one based on the view text. @@ -199,8 +220,8 @@ // Add event handlers. mouse(this.text, this.editContainer, this.editField, this.styles, this.paddings, this.finishedEditing, this.invitationText, options.selectOnEdit); keyNav(this.text, this.editContainer, this.editField, this.styles, this.paddings, this.invitationText, options.selectOnEdit); - bindEditFinish(this.editContainer, this.editField, this.text, this.finishedEditing, this.invitationText, this.styles.invitationText); - bindBlurHandler(this.editContainer, this.editField, this.text, this.finishedEditing, this.invitationText, this.styles.invitationText); + bindEditFinish(this.editContainer, this.editField, this.text, this.finishedEditing, this.invitationText, this.useInvitationText, this.styles.invitationText, this.existingPadding); + bindBlurHandler(this.editContainer, this.editField, this.text, this.finishedEditing, this.invitationText, this.useInvitationText, this.styles.invitationText, this.existingPadding); // Add ARIA support. aria(this.text, this.editContainer); @@ -214,7 +235,8 @@ }; fluid.InlineEdit.prototype.finish = function () { - finish(this.editContainer, this.editField, this.text, this.finishedEditing, this.invitationText, this.styles.invitationText); + finish(this.editContainer, this.editField, this.text, this.finishedEditing, this.invitationText, + this.useInvitationText, this.styles.invitationText, this.existingPadding); }; fluid.InlineEdit.prototype.defaults = { @@ -235,6 +257,8 @@ minimum: 80 }, + minimumPadding: 60, + editModeInjector: defaultEditModeInjector, invitationText: "Click here to edit", @@ -239,6 +263,8 @@ invitationText: "Click here to edit", + useInvitationText: true, + selectOnEdit: false }; Index: /Users/team/fluid-repos/FLUID-755/src/webapp/sample-code/inline-edit/announcements/announcements.css =================================================================== --- /Users/team/fluid-repos/FLUID-755/src/webapp/sample-code/inline-edit/announcements/announcements.css (revision 5227) +++ /Users/team/fluid-repos/FLUID-755/src/webapp/sample-code/inline-edit/announcements/announcements.css (working copy) @@ -435,3 +435,7 @@ border: 2px solid #777777; } +.invitation-text { + color: #999999; +} + Index: /Users/team/fluid-repos/FLUID-755/src/webapp/tests/fluid-tests/InlineEdit-test.html =================================================================== --- /Users/team/fluid-repos/FLUID-755/src/webapp/tests/fluid-tests/InlineEdit-test.html (revision 5227) +++ /Users/team/fluid-repos/FLUID-755/src/webapp/tests/fluid-tests/InlineEdit-test.html (working copy) @@ -57,9 +57,9 @@
Click me to edit...
- +
-
+
Index: /Users/team/fluid-repos/FLUID-755/src/webapp/tests/fluid-tests/js/InlineEditTests.js =================================================================== --- /Users/team/fluid-repos/FLUID-755/src/webapp/tests/fluid-tests/js/InlineEditTests.js (revision 5227) +++ /Users/team/fluid-repos/FLUID-755/src/webapp/tests/fluid-tests/js/InlineEditTests.js (working copy) @@ -115,6 +115,34 @@ jqUnit.assertEquals("After initialization, display has custom invitation text.", customInvitation, display.text()); }); + inlineEditTests.test("Invitation text (none)", function () { + jqUnit.expect(10); + + var display = $("#empty-display"); + jqUnit.assertFalse("Before initialization, display is empty", display.text()); + jqUnit.assertFalse("The display field has no padding.", display.css("padding")); + + var inlineEditor = new fluid.InlineEdit("empty-inline-edit", {useInvitationText: false}); + jqUnit.assertEquals("After initialization, display is still empty", "", display.text()); + jqUnit.assertEquals("The display field padding is ", fluid.InlineEdit.prototype.defaults.minimumPadding, parseFloat(display.css("padding-right"))); + + var testText = "This is test text that is a bit long."; + var edit = $("#empty-inline-edit-edit"); + inlineEditor.edit(); + jqUnit.assertFalse("Upon entering edit mode, edit field should be fully empty", edit.attr("value")); + edit.attr("value", testText); + inlineEditor.finish(); + jqUnit.assertEquals("After editing the field, display should have test text ", testText, display.text()); + jqUnit.assertEquals("The display field has no padding.", 0, parseFloat(display.css("padding-right"))); + + inlineEditor.edit(); + jqUnit.assertEquals("Upon entering edit mode but before clearing, edit field should be have test text", testText, edit.attr("value")); + edit.attr("value", ""); + inlineEditor.finish(); + jqUnit.assertEquals("After clearing the field, display should be empty again: ", "", display.text()); + jqUnit.assertEquals("The display field padding is ", fluid.InlineEdit.prototype.defaults.minimumPadding, parseFloat(display.css("padding-right"))); + }); + inlineEditTests.test("Edit-Finish", function () { jqUnit.expect(8); Index: /Users/team/fluid-repos/FLUID-755/src/webapp/tests/fluid-tests/manual/inline-edit/InlineEdit.html =================================================================== --- /Users/team/fluid-repos/FLUID-755/src/webapp/tests/fluid-tests/manual/inline-edit/InlineEdit.html (revision 5227) +++ /Users/team/fluid-repos/FLUID-755/src/webapp/tests/fluid-tests/manual/inline-edit/InlineEdit.html (working copy) @@ -55,7 +55,13 @@ selectOnEdit true.

+

The following text is an empty inline edit 'span' with NO invitation text: + + This text is after the inline edit. +

+