From 20a6696850a6e902ed3ce9351d1286b87da383a6 Mon Sep 17 00:00:00 2001
From: Wolfgang Sourdeau <wsourdeau@inverse.ca>
Date: Mon, 2 Aug 2010 20:42:40 +0000
Subject: [PATCH] Monotone-Parent: 76cddf6cb9e25f13d7e93aef3285f53fe726efcc
 Monotone-Revision: 4015c6e667a4a4ca4d9a5b2a8cb346ea6d784fe4

Monotone-Author: wsourdeau@inverse.ca
Monotone-Date: 2010-08-02T20:42:40
Monotone-Branch: ca.inverse.sogo
---
 ChangeLog                                     |   5 +-
 UI/Templates/PreferencesUI/UIxPreferences.wox |   2 +-
 UI/WebServerResources/RowEditionController.js | 129 ++++++++++++++++++
 UI/WebServerResources/UIxPreferences.js       |  60 +-------
 UI/WebServerResources/generic.css             |   4 +
 5 files changed, 142 insertions(+), 58 deletions(-)
 create mode 100644 UI/WebServerResources/RowEditionController.js

diff --git a/ChangeLog b/ChangeLog
index dc4887a6a..836658746 100644
--- a/ChangeLog
+++ b/ChangeLog
@@ -1,5 +1,8 @@
 2010-08-02  Wolfgang Sourdeau  <wsourdeau@inverse.ca>
 
+	* UI/WebServerResources/RowEditionController.js: new class module
+	that implements the handling of editable list items.
+
 	* SoObjects/SOGo/NSNumber+Utilities.m (-jsonRepresentation):
 	returns "true" or "false" when the initial return value is "YES"
 	or "NO".
@@ -17,7 +20,7 @@
 
 	* UI/WebServerResources/scriptaculous/dragdrop.js (initDrag):
 	avoid stopping the event propagation so the blur event is properly
-	fired on the search input field when it isfocused.	
+	fired on the search input field when it isfocused.
 
 2010-07-28  Francis Lachapelle  <flachapelle@inverse.ca>
 
diff --git a/UI/Templates/PreferencesUI/UIxPreferences.wox b/UI/Templates/PreferencesUI/UIxPreferences.wox
index bbcd0ee03..d337a5900 100644
--- a/UI/Templates/PreferencesUI/UIxPreferences.wox
+++ b/UI/Templates/PreferencesUI/UIxPreferences.wox
@@ -10,7 +10,7 @@
   className="UIxPageFrame"
   title="title"
   const:popup="YES"
-  const:jsFiles="PasswordPolicy.js,ckeditor/ckeditor.js"
+  const:jsFiles="RowEditionController.js,PasswordPolicy.js,ckeditor/ckeditor.js"
   >
   <script type="text/javascript">
     var localeCode = '<var:string value="localeCode"/>';
diff --git a/UI/WebServerResources/RowEditionController.js b/UI/WebServerResources/RowEditionController.js
new file mode 100644
index 000000000..d6b5e084f
--- /dev/null
+++ b/UI/WebServerResources/RowEditionController.js
@@ -0,0 +1,129 @@
+/* bind method: attachToRowElement(row: TD or LI)
+ * callback methods:
+     notifyStartEditingCallback(this)
+     notifyEndEditingCallback(this)
+     notifyNewValueCallback(this, newValue),
+ */
+
+function RowEditionController() {
+}
+
+RowEditionController.prototype = {
+    initialValue: null,
+    rowElement: null,
+    textField: null,
+
+    /*  notification callbacks */
+    notifyStartEditingCallback: null,
+    notifyEndEditingCallback: null,
+    notifyNewValueCallback: null,
+
+    /* bind method */
+    attachToRowElement: function REC_attachToRowElement(rowElement) {
+        var onRowDblClickBound = this.onRowDblClick.bindAsEventListener(this);
+        rowElement.observe("dblclick", onRowDblClickBound);
+        this.rowElement = rowElement;
+        rowElement.editionController = this;
+    },
+
+    /* internal */
+    emptyRow: function REC_emptyRow() {
+        var rowElement = this.rowElement;
+        while (rowElement.firstChild) {
+            rowElement.removeChild(rowElement.firstChild);
+        }
+    },
+
+    startEditing: function REC_startEditing() {
+        var rowElement = this.rowElement;
+        rowElement.previousClassName = rowElement.className;
+        rowElement.className = "editing";
+
+        var value = "";
+        for (var i = 0; i < rowElement.childNodes.length; i++) {
+            var child = rowElement.childNodes[i];
+            if (child.nodeType == Node.TEXT_NODE) {
+                value += child.nodeValue;
+            }
+        }
+        log("initial Value: " + value);
+        this.initialValue = value;
+        this.emptyRow();
+
+        this.showInputField(value);
+
+        this.onBodyMouseDownBound = this.onBodyMouseDown.bindAsEventListener(this);
+        $(document.body).observe("mousedown", this.onBodyMouseDownBound);
+
+        if (this.notifyStartEditingCallback) {
+            this.notifyStartEditingCallback(this);
+        }
+    },
+    showInputField: function REC_showInputField(value) {
+        var textField = createElement("input", null, null, {"type": "text"});
+        this.textField = textField;
+        if (value) {
+            textField.value = value;
+        }
+        this.rowElement.appendChild(textField);
+        var onInputKeyDownBound = this.onInputKeyDown.bindAsEventListener(this);
+        textField.observe("keydown", onInputKeyDownBound);
+        textField.focus();
+        textField.select();
+    },
+
+    stopEditing: function REC_stopEditing(accept) {
+        var displayValue = (accept ? this.textField.value : this.initialValue);
+        this.textField = null;
+        this.emptyRow();
+        var rowElement = this.rowElement;
+        rowElement.className = rowElement.previousClassName;
+        rowElement.previousClassName = null;
+        rowElement.appendChild(document.createTextNode(displayValue));
+        this.initialValue = null;
+
+        $(document.body).stopObserving("mousedown", this.onBodyMouseDownBound);
+        this.onBodyMouseDownBound = null;
+
+        if (this.notifyEndEditingCallback) {
+            this.notifyEndEditingCallback(this);
+        }
+    },
+
+    acceptEdition: function REC_acceptEdition() {
+        var newValue = this.textField.value;
+        if (this.initialValue != newValue
+            && this.notifyNewValueCallback) {
+            this.notifyNewValueCallback(this, value);
+        }
+        this.stopEditing(true);
+    },
+    cancelEdition: function REC_acceptEdition() {
+        this.stopEditing(false);
+    },
+
+    /* event handlers */
+    onRowDblClick: function REC_onRowDblClick(event) {
+        log("onRowDblClick");
+        if (!this.textField) {
+            this.startEditing();
+            event.stop();
+        }
+    },
+
+    onInputKeyDown: function REC_onInputKeyDown(event) {
+        if (event.keyCode == Event.KEY_ESC) {
+            this.cancelEdition();
+            event.stop();
+        }
+        else if (event.keyCode == Event.KEY_RETURN) {
+            this.acceptEdition();
+            event.stop();
+        }
+    },
+    onBodyMouseDown: function REC_onBodyMouseDown(event) {
+        if (event.target != this.textField) {
+            this.acceptEdition();
+        }
+    }
+};
diff --git a/UI/WebServerResources/UIxPreferences.js b/UI/WebServerResources/UIxPreferences.js
index 77fed756f..a48524063 100644
--- a/UI/WebServerResources/UIxPreferences.js
+++ b/UI/WebServerResources/UIxPreferences.js
@@ -11,7 +11,6 @@ function savePreferences(sender) {
         sigList.disabled = false;
 
     if ($("categoriesList")) {
-        endAllEditables();
         serializeCategories();
     }
 
@@ -383,56 +382,9 @@ function resetTableActions() {
         var row = $(r[i]);
         row.observe("mousedown", onRowClick);
         var tds = row.childElements();
-        tds[0].observe("mousedown", endAllEditables);
-        tds[0].observe("dblclick", onNameEdit);
-        tds[1].observe("mousedown", endAllEditables);
-        tds[1].childElements()[0].observe ("dblclick", onColorEdit);
-    }
-}
-
-function makeEditable (element) {
-    element.addClassName ("editing");
-    element.removeClassName ("categoryListCell");
-    var tmp = element.innerHTML;
-    element.innerHTML = "";
-    var textField = new Element ("input", {"type": "text"});
-    textField.value = tmp;
-    textField.setStyle({ width: '98%' });
-    textField.observe ("keydown", interceptEnter);
-    element.appendChild (textField);
-    textField.focus ();
-    textField.select ();
-}
-
-function interceptEnter (e) {
-    if (e.keyCode == Event.KEY_RETURN) {
-        endAllEditables (null);
-        preventDefault (e);
-        return false;
-    }
-}
-
-function endEditable (element) {
-    var tmp = element.childElements ().first ().value;
-    element.innerHTML = tmp;
-    element.removeClassName ("editing");
-    element.addClassName ("categoryListCell");
-    if (parseInt($("hasChanged").value) == 0)
-        onChoiceChanged(null);
-}
-
-function endAllEditables (e) {
-    var r = $$("TABLE#categoriesList tbody tr td");
-    for (var i=0; i<r.length; i++) {
-        if (r[i] != this && r[i].hasClassName ("editing"))
-            endEditable ($(r[i]));
-    }
-}
-
-function onNameEdit (e) {
-    endAllEditables ();
-    if (!this.hasClassName ("editing")) {
-        makeEditable (this);
+        var editionCtlr = new RowEditionController();
+        editionCtlr.attachToRowElement(tds[0]);
+        tds[1].childElements()[0].observe("dblclick", onColorEdit);
     }
 }
 
@@ -462,20 +414,16 @@ function onColorPickerChoice (newColor) {
         onChoiceChanged(null);
 }
 
-
 function onCategoryAdd (e) {
     var row = new Element ("tr");
     var nametd = new Element ("td").update ("");
     var colortd = new Element ("td");
     var colordiv = new Element ("div", {"class": "colorBox"});
 
-    endAllEditables();
-
     row.identify ();
     row.addClassName ("categoryListRow");
 
     nametd.addClassName ("categoryListCell");
-
     colortd.addClassName ("categoryListCell");
     colordiv.innerHTML = "&nbsp;";
     colordiv.showColor = "#F0F0F0";
@@ -485,9 +433,9 @@ function onCategoryAdd (e) {
     row.appendChild (nametd);
     row.appendChild (colortd);
     $("categoriesList").tBodies[0].appendChild (row);
-    makeEditable (nametd);
 
     resetTableActions ();
+    nametd.editionController.startEditing();
 }
 
 function onCategoryDelete (e) {
diff --git a/UI/WebServerResources/generic.css b/UI/WebServerResources/generic.css
index 31f47f4f4..5d5a342a3 100644
--- a/UI/WebServerResources/generic.css
+++ b/UI/WebServerResources/generic.css
@@ -925,3 +925,7 @@ DIV.bottomToolbar A.bottomButton SPAN
 { background: transparent url('thead_bg.png') repeat-x top right; }
 DIV.bottomToolbar A.bottomButton SPAN:active
 { background-position: bottom left; }
+
+/* row editing */
+.editing > INPUT[type="text"]
+{ width: 98%; }