
Property changes on: .
___________________________________________________________________
Modified: svn:externals
   - fluid-components https://source.fluidproject.org/svn/fluid/components/trunk/src/webapp/fluid-components/

   + fluid-components               https://source.fluidproject.org/svn/fluid/components/trunk/src/webapp/fluid-components/



Index: css/fluid.states.css
===================================================================
--- css/fluid.states.css	(revision 5410)
+++ css/fluid.states.css	(working copy)
@@ -56,4 +56,22 @@
     overflow        : hidden;
 }
 
+
 /*************************************/
+/* Inline Edit */
+/* hover effect over editable element */
+.inlineEdit-invitation {
+    border      : 1px solid #999;
+    background  : lightyellow;
+    cursor      : pointer;
+}
+.inlineEdit-tooltip {
+    position    : absolute;
+    background  : #CCC;
+    border      : 1px solid #999;
+    font        : normal 75% sans-serif;
+    padding     : 3px 5px;
+}
+.viewport-bottom {
+}
+
Index: InlineEdit/InlineEdit.css
===================================================================
--- InlineEdit/InlineEdit.css	(revision 0)
+++ InlineEdit/InlineEdit.css	(revision 0)
@@ -0,0 +1,26 @@
+/* CSS specifically for the examples document */
+h1 {
+    clear   : both; 
+    padding : 40px 0 0; 
+    margin  : 0px;
+}
+
+blockquote strong {
+    border: 1px solid #fff;
+}
+#customEditorContainer {
+}
+#customEdit .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: InlineEdit/InlineEdit.html
===================================================================
--- InlineEdit/InlineEdit.html	(revision 0)
+++ InlineEdit/InlineEdit.html	(revision 0)
@@ -0,0 +1,85 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+		<title>Inline Edit Examples</title>
+
+        <link rel="stylesheet" type="text/css" href="../css/fluid.presentation.css" />
+        <link rel="stylesheet" type="text/css" href="../css/fluid.states.css" />
+        <link rel="stylesheet" type="text/css" href="InlineEdit.css" />
+        
+        <script type="text/javascript" src="../fluid-components/js/jquery/jquery-1.2.6.js"></script>
+        <script type="text/javascript" src="../fluid-components/js/jquery/jARIA.js"></script>
+        <script type="text/javascript" src="../fluid-components/js/jquery/jquery.keyboard-a11y.js"></script>
+        <script type="text/javascript" src="../fluid-components/js/jquery/jquery.tooltip.js"></script>
+        <script type="text/javascript" src="../fluid-components/js/fluid/Fluid.js"></script>
+        <script type="text/javascript" src="../fluid-components/js/fluid/InlineEdit.js"></script>        
+        
+        <script type="text/javascript">
+            jQuery(document).ready(function () {
+                /* A single editable piece of text within a single container */
+                /* includes a custom tooltip that appears on hover after 500ms */
+                var simpleEdit = fluid.inlineEdit("#simpleEdit", {
+                    selectors : {
+                        text: ".editableText"
+                    },
+                    useTooltip : true,
+                    tooltipDelay : 500
+                });
+                
+                /* Same as example 1, but with a customized edit field */
+                var customEdit = fluid.inlineEdit("#customEdit", {
+                    selectors : {
+                        text: ".editableText",
+                        editContainer: "#customEditorContainer",
+                        edit: "#customizedEditField"
+                    }
+                });
+                
+                /* Example 3 - note the difference in the syntax */
+                /* multiple inline edit requires each editable text object to be wrapped again inside another element */                
+                var multiEdit = fluid.inlineEdits("#multipleEdit", {
+                    selectors : {
+                        text : ".editableText",
+                        editables : "p"
+                    }
+                });
+            });
+        </script>
+
+        
+    </head>
+    <body>
+    
+    <h1> Example 1. Simple Inline Edit</h1>
+    <p> The words in <strong>bold</strong> are editable. </p>    
+    <blockquote id="simpleEdit">
+        The quick brown fox jumped <strong class="editableText">over the lazy dogs</strong> and then...
+    </blockquote>
+
+    
+    <h1> Example 2. Customized edit field</h1>
+    <p> The words in <strong>bold</strong> are editable. with a maximum of 35 characters allowed. </p>    
+    <blockquote id="customEdit">    
+        The quick brown fox jumped 
+        <strong class="editableText">over the lazy dogs</strong>
+        <span id="customEditorContainer">
+            <input id="customizedEditField" type="text" maxlength="35" />
+        </span>
+        and then...
+    </blockquote>
+    
+
+    <h1> Example 3. Multiple Inline Edits</h1>
+    <p> The words in <strong>bold</strong> are editable.</p>    
+    <blockquote id="multipleEdit">
+        <p>The quick brown fox jumped <strong class="editableText">over the lazy dogs</strong> and then...</p>
+        <p>The quick brown fox <strong class="editableText">over jumped  the lazy</strong> dogs and then...</p>
+        <p>The quick <strong class="editableText">brown fox jumped over</strong> the lazy dogs and then...</p>
+        <p>The quick brown fox jumped over the <strong class="editableText">lazy dogs</strong> and then...</p>
+        <p>The over <strong class="editableText">quick</strong> brown fox jumped  the lazy dogs and then...</p>
+    </blockquote>
+
+
+    </body>
+</html>
\ No newline at end of file
Index: Reorderer/Reorderer.css
===================================================================
--- Reorderer/Reorderer.css	(revision 5410)
+++ Reorderer/Reorderer.css	(working copy)
@@ -1,4 +1,3 @@
-/* CSS for the example document */
 /* CSS specifically for the examples document */
 h1 {
     clear   : both; 
Index: Reorderer/Reorderer.html
===================================================================
--- Reorderer/Reorderer.html	(revision 5410)
+++ Reorderer/Reorderer.html	(working copy)
@@ -52,13 +52,13 @@
         <h1>Example 1. Semi-sortable List</h1>
         <p>This list only has a few sortable items</p>
         <ol id="myList" class="fluid-vertical-order">
-            <li class="orderable">Mysh bzi</li>
-            <li>Umsh bzi</li>
-            <li>Akwaaba</li>
-            <li class="orderable">Eli o</li>
-            <li class="orderable">Mshybzia</li>
-            <li>Mshybziakua</li>
-            <li class="orderable">Bziara ubaant</li>
+            <li class="orderable">I'm sortable</li>
+            <li>Not sortable</li>
+            <li>Not sortable</li>
+            <li class="orderable">I'm sortable</li>
+            <li class="orderable">I'm sortable</li>
+            <li>Not sortable</li>
+            <li class="orderable">I'm sortable</li>
         </ol>
 
         <h1>Example 2. Sortable Tabs</h1>
