+ The quick brown fox jumped over the lazy dogs and then...
+
+
+
+
Example 2. Customized edit field
+
The words in bold are editable. with a maximum of 35 characters allowed.
+
+ The quick brown fox jumped
+ over the lazy dogs
+
+
+
+ and then...
+
+
+
+
Example 3. Multiple Inline Edits
+
The words in bold are editable.
+
+
+
The quick brown fox jumped over the lazy dogs and then...
+
The quick brown fox over jumped the lazy dogs and then...
+
The quick brown fox jumped over the lazy dogs and then...
+
+
The quick brown fox jumped over the lazy dogs and then...
+
The over quick brown fox jumped the lazy dogs and then...
+
+
+
+
Example 5: Rich Text Inline Edit (using Tiny_MCE editor)
+
+
+
After a hiatus, Portishead is back with their first studio
+ album in 6 years. Third brings back the familiar and
+ the new, and none of this is best exemplified than in the track
+ Machine Gun. It seems that regardless of how Portishead
+ sounds now, the one thing that has stayed constant is their refusal to be ordinary.
+
+
+
+
+
+
+
+
+
+
Example 6: Rich Text Inline Edit (using FCKEditor)
+
+
+
After a hiatus, Portishead is back with their first studio
+ album in 6 years. Third brings back the familiar and
+ the new, and none of this is best exemplified than in the track
+ Machine Gun. It seems that regardless of how Portishead
+ sounds now, the one thing that has stayed constant is their refusal to be ordinary.
+
+
+
+
+
+
+
+
+
+
+
Example 7: Mist Themed Combination of Various Inline Editors
+
+
+
Artist
+
Album
+
Year
+
Genre
+
Play Length
+
Label
+
Review 1
+
Review 2
+
+
+
+ Portishead
+
+
Third
+
2008
+
Triphop
+
49 min 13 s
+
Universal Music
+
+
+
+
After a hiatus, Portishead is back with their first studio
+ album in 6 years. Third brings back the familiar and
+ the new, and none of this is best exemplified than in the track
+ Machine Gun. It seems that regardless of how Portishead
+ sounds now, the one thing that has stayed constant is their refusal to be ordinary.
+
+
+
+
+
+
+
+
+
+
+
+
...It feels like a staggering transformation and a return to
+ form that was never lost, an ideal adaptation by a group that many
+ people didn't know they needed to hear again.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Example 8: HC Themed Combination of Various Inline Editors
+
+
+
Artist
+
Album
+
Year
+
Genre
+
Play Length
+
Label
+
Review 1
+
Review 2
+
+
+
+ Portishead
+
+
Third
+
2008
+
Triphop
+
49 min 13 s
+
Universal Music
+
+
+
+
After a hiatus, Portishead is back with their first studio
+ album in 6 years. Third brings back the familiar and
+ the new, and none of this is best exemplified than in the track
+ Machine Gun. It seems that regardless of how Portishead
+ sounds now, the one thing that has stayed constant is their refusal to be ordinary.
+
+
+
+
+
+
+
+
+
+
+
+
...It feels like a staggering transformation and a return to
+ form that was never lost, an ideal adaptation by a group that many
+ people didn't know they needed to hear again.
+
After a hiatus, Portishead is back with their first studio
+ album in 6 years. Third brings back the familiar and
+ the new, and none of this is best exemplified than in the track
+ Machine Gun. It seems that regardless of how Portishead
+ sounds now, the one thing that has stayed constant is their refusal to be ordinary.
+
+
+
+
+
+
+
+
Review 2
+
+
+
...It feels like a staggering transformation and a return to
+ form that was never lost, an ideal adaptation by a group that many
+ people didn't know they needed to hear again.
+
+
+
+
+
+
+
+
+
+
+
Index: src/webapp/standalone-demos/inline-edit/html/inline-edit.css
===================================================================
--- src/webapp/standalone-demos/inline-edit/html/inline-edit.css (revision 0)
+++ src/webapp/standalone-demos/inline-edit/html/inline-edit.css (revision 0)
@@ -0,0 +1,24 @@
+.combination-table {
+
+}
+.combination-table td{
+ vertical-align: top;
+}
+.review1, .review2{
+ width: 400px;
+}
+
+#customEdit .fl-inlineEdit-invitation {
+ border : 1px solid red;
+ font : bold 12px "Arial";
+ background : yellow;
+ color : red;
+ padding : 2px;
+}
+
+#customizedEditField {
+ border : 1px dashed #999;
+ font : bold 12px "Arial";
+ color : #999;
+ padding : 2px;
+}
\ No newline at end of file
Index: src/webapp/standalone-demos/inline-edit/js/inline-edit-example.js
===================================================================
--- src/webapp/standalone-demos/inline-edit/js/inline-edit-example.js (revision 0)
+++ src/webapp/standalone-demos/inline-edit/js/inline-edit-example.js (revision 0)
@@ -0,0 +1,106 @@
+/*
+Copyright 2008-2009 University of Cambridge
+Copyright 2008-2009 University of Toronto
+Copyright 2007-2009 University of California, Berkeley
+
+Licensed under the Educational Community License (ECL), Version 2.0 or the New
+BSD license. You may not use this file except in compliance with one these
+Licenses.
+
+You may obtain a copy of the ECL 2.0 License and BSD License at
+https://source.fluidproject.org/svn/LICENSE.txt
+*/
+
+/*global jQuery*/
+/*global fluid*/
+/*global demo*/
+
+var demo = demo || {};
+(function ($, fluid) {
+ demo.initInlineEdit = function () {
+
+ /**
+ * Initialize all inline edit components present on the inline-edit
+ * demo.
+ */
+ var inlineEditSetup = function () {
+
+ /**
+ * Create cancel and save buttons for a rich inline editor.
+ * @param {Object} editor
+ */
+ var makeButtons = function (editor) {
+ $(".save", editor.container).click(function(){
+ editor.finish();
+ return false;
+ });
+
+ $(".cancel", editor.container).click(function(){
+ editor.cancel();
+ return false;
+ });
+ };
+
+ /**
+ * Simple inline edit example.
+ */
+ fluid.inlineEdit("#simpleEdit");
+
+ /**
+ * Customized simple inline edit.
+ */
+ fluid.inlineEdit("#customEdit", {
+ selectors: {
+ editContainer: "#customEditorContainer",
+ edit: "#customizedEditField"
+ }
+ });
+
+ /**
+ * Multiple inline text editors.
+ */
+ fluid.inlineEdits("#multipleEdit", {
+ selectors: {
+ text: ".editableText",
+ editables : "p"
+ }
+ });
+
+ /**
+ * Tiny MCE rich inline text editor example.
+ */
+ var richEditor1 = fluid.inlineEdit.tinyMCE("#richEdit1", {tinyMCE: {width: 1024}});
+ makeButtons(richEditor1);
+
+ /**
+ * FCK Editor rich inline text editor example.
+ */
+ var richEditor2 = fluid.inlineEdit.FCKEditor("#richEdit2", {FCKEditor: {BasePath: "../../../tests/manual-tests/lib/fckeditor/"}});
+ makeButtons(richEditor2);
+
+ /**
+ * Mist theme block.
+ */
+ fluid.inlineEdit("#artistName");
+
+ var richEditor3 = fluid.inlineEdit.tinyMCE("#cd-review1", {tinyMCE: {width: 300}});
+ makeButtons(richEditor3);
+
+ var richEditor4 = fluid.inlineEdit.FCKEditor("#cd-review2", {FCKEditor: {BasePath: "../../../tests/manual-tests/lib/fckeditor/"}});
+ makeButtons(richEditor4);
+
+ /**
+ * High Contrast theme block.
+ */
+ fluid.inlineEdit("#artistNameHC");
+
+ var richEditor5 = fluid.inlineEdit.tinyMCE("#cd-review1HC", {tinyMCE: {width: 300}});
+ makeButtons(richEditor5);
+
+ var richEditor6 = fluid.inlineEdit.FCKEditor("#cd-review2HC", {FCKEditor: {BasePath: "../../../tests/manual-tests/lib/fckeditor/"}});
+ makeButtons(richEditor6);
+ };
+
+ inlineEditSetup();
+ };
+})(jQuery, fluid);
\ No newline at end of file