From 9b758a687527a00975f25ae9e0937a72c96abf5e Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Thu, 3 Jul 2008 21:26:05 +0000
Subject: [PATCH] Monotone-Parent: 4237da1c46aa8fc93100964f3c0b79c40b83ea1b
 Monotone-Revision: 9a36073d1afa7838c5d2980e533a408ede5d3fdb

Monotone-Author: flachapelle@inverse.ca
Monotone-Date: 2008-07-03T21:26:05
Monotone-Branch: ca.inverse.sogo
---
 NEWS                                        |   1 +
 UI/Templates/MailerUI/UIxMailEditor.wox     |   3 +
 UI/WebServerResources/UIxAttendeesEditor.js |  77 +++++----
 UI/WebServerResources/UIxMailEditor.js      | 165 +++++++++++++++++++-
 UI/WebServerResources/UIxMailToSelection.js |   4 +-
 UI/WebServerResources/generic.css           |   2 +-
 6 files changed, 219 insertions(+), 33 deletions(-)

diff --git a/NEWS b/NEWS
index 98cdcd1a2..08379186a 100644
--- a/NEWS
+++ b/NEWS
@@ -4,6 +4,7 @@
 - fixed tab index in mail composition window
 - fixed default privacy selection for new events
 - fixed a bug where concurrent versions of SOGo would create the user's personal folders table twice
+- added address completion in the web mail editor
 
 0.9.0-20080520 (1.0 rc6)
 ------------------------
diff --git a/UI/Templates/MailerUI/UIxMailEditor.wox b/UI/Templates/MailerUI/UIxMailEditor.wox
index 7753c0b3d..bba37d7fa 100644
--- a/UI/Templates/MailerUI/UIxMailEditor.wox
+++ b/UI/Templates/MailerUI/UIxMailEditor.wox
@@ -14,6 +14,9 @@
   <script type="text/javascript">
     var mailIsReply = <var:string value="isMailReply"/>;
   </script>
+  <div class="menu" id="contactsMenu">
+    <ul></ul>
+  </div>
   <div class="menu" id="attachmentsMenu">
     <ul>
       <li><var:string label:value="Open"/></li>
diff --git a/UI/WebServerResources/UIxAttendeesEditor.js b/UI/WebServerResources/UIxAttendeesEditor.js
index 0cd557253..d2f0d6fc6 100644
--- a/UI/WebServerResources/UIxAttendeesEditor.js
+++ b/UI/WebServerResources/UIxAttendeesEditor.js
@@ -1,7 +1,5 @@
 var resultsDiv;
 var address;
-var delayedSearch = false;
-var currentField;
 var awaitingFreeBusyRequests = new Array();
 var additionalDays = 2;
 
@@ -10,6 +8,9 @@ var dayEndHour = 18;
 
 var attendeesEditor = {
  delay: 500,
+ delayedSearch: false,
+ currentField: null,
+ selectedIndex: -1,
  names: null,
  UIDs: null,
  emails: null,
@@ -44,9 +45,9 @@ function onContactKeydown(event) {
       this.confirmedValue = null;
       this.uid = null;
       this.hasfreebusy = false;
-      currentField = this;
-      if (this.value.length > 0 && !delayedSearch) {
-	delayedSearch = true;
+      attendeesEditor.currentField = this;
+      if (this.value.length > 0 && !attendeesEditor.delayedSearch) {
+	attendeesEditor.delayedSearch = true;
 	setTimeout("performSearch()", attendeesEditor.delay);
       }
       else if (this.value.length == 0) {
@@ -54,26 +55,50 @@ function onContactKeydown(event) {
 	  hideMenu(document.currentPopupMenu);
       }
   }
-  else if (this.confirmedValue)
-    if (event.keyCode == 13) // Enter
-      $(this).setCaretTo(this.value.length);
+  else if (event.keyCode == 38) { // Up arrow
+    if (attendeesEditor.selectedIndex > 0) {
+      var attendees = $('attendeesMenu').select("li");
+      attendees[attendeesEditor.selectedIndex--].removeClassName("selected");
+      this.value = attendees[attendeesEditor.selectedIndex].firstChild.nodeValue.trim();
+      attendees[attendeesEditor.selectedIndex].addClassName("selected");
+    }
+  }
+  else if (event.keyCode == 40) { // Down arrow
+    var attendees = $('attendeesMenu').select("li");
+    if (attendees.size() - 1 > attendeesEditor.selectedIndex) {
+      if (attendeesEditor.selectedIndex >= 0)
+	attendees[attendeesEditor.selectedIndex].removeClassName("selected");
+      attendeesEditor.selectedIndex++;
+      this.value = attendees[attendeesEditor.selectedIndex].firstChild.nodeValue.trim();
+      attendees[attendeesEditor.selectedIndex].addClassName("selected");
+    }
+  }
+  else if (event.keyCode == 13) {
+    preventDefault(event);
+    if (this.confirmedValue)
+      this.value = this.confirmedValue;
+    $(this).selectText(0, this.value.length);
+    if (document.currentPopupMenu)
+      hideMenu(document.currentPopupMenu);
+    attendeesEditor.selectedIndex = -1;
+  }
 }
 
 function performSearch() {
-   if (currentField) {
+   if (attendeesEditor.currentField) {
       if (document.contactLookupAjaxRequest) {
          // Abort any pending request
          document.contactLookupAjaxRequest.aborted = true;
          document.contactLookupAjaxRequest.abort();
       }
-      if (currentField.value.trim().length > 0) {
+      if (attendeesEditor.currentField.value.trim().length > 0) {
          var urlstr = ( UserFolderURL + "Contacts/contactSearch?search="
-                        + escape(currentField.value) );
+                        + escape(attendeesEditor.currentField.value) );
          document.contactLookupAjaxRequest =
-            triggerAjaxRequest(urlstr, performSearchCallback, currentField);
+            triggerAjaxRequest(urlstr, performSearchCallback, attendeesEditor.currentField);
       }
    }
-   delayedSearch = false;
+   attendeesEditor.delayedSearch = false;
 }
 
 function performSearchCallback(http) {
@@ -103,8 +128,8 @@ function performSearchCallback(http) {
 	}
 
 	// Show popup menu
-	var offsetScroll = Element.cumulativeScrollOffset(currentField);
-	var offset = Element.cumulativeOffset(currentField);
+	var offsetScroll = Element.cumulativeScrollOffset(attendeesEditor.currentField);
+	var offset = Element.cumulativeOffset(attendeesEditor.currentField);
 	var top = offset[1] - offsetScroll[1] + node.offsetHeight + 3;
 	var height = 'auto';
 	if (data.length > 5) {
@@ -136,12 +161,8 @@ function performSearchCallback(http) {
 	    // The result matches email address, not user name
 	    input.value += ' >> ' + completeEmail;
 	  input.confirmedValue = completeEmail;
-	  if (input.focussed) {
-	    var end = input.value.length;
-	    $(input).selectText(start, end);
-	  }
-	  else
-	    input.value = contact["name"];
+	  var end = input.value.length;
+	  $(input).selectText(start, end);
 	}
       }
     }
@@ -153,11 +174,11 @@ function performSearchCallback(http) {
 }
 
 function onAttendeeResultClick(event) {
-  if (currentField) {
-    currentField.uid = this.uid;
-    currentField.value = this.firstChild.nodeValue.trim();
-    currentField.confirmedValue = currentField.value;
-    currentField.blur(); // triggers checkAttendee function call
+  if (attendeesEditor.currentField) {
+    attendeesEditor.currentField.uid = this.uid;
+    attendeesEditor.currentField.value = this.firstChild.nodeValue.trim();
+    attendeesEditor.currentField.confirmedValue = attendeesEditor.currentField.value;
+    attendeesEditor.currentField.blur(); // triggers checkAttendee function call
   }
 }
 
@@ -302,7 +323,7 @@ function checkAttendee() {
     this.setAttribute("modified", "0");
   }
   
-  currentField = null;
+  attendeesEditor.currentField = null;
 }
 
 function displayFreeBusyForNode(input) {
@@ -662,7 +683,7 @@ function onFreeBusyLoadHandler() {
    synchronizeWithParent("startTime", "startTime");
    synchronizeWithParent("endTime", "endTime");
 
-   initTimeWidgets(widgets);   
+   initTimeWidgets(widgets);
    initializeWindowButtons();
    prepareTableHeaders();
    prepareTableRows();
diff --git a/UI/WebServerResources/UIxMailEditor.js b/UI/WebServerResources/UIxMailEditor.js
index 9c9152f4a..dff3220b7 100644
--- a/UI/WebServerResources/UIxMailEditor.js
+++ b/UI/WebServerResources/UIxMailEditor.js
@@ -3,7 +3,11 @@ var signatureLength = 0;
 
 var attachmentCount = 0;
 var MailEditor = {
- addressBook: null
+ addressBook: null,
+ currentField: null,
+ selectedIndex: -1,
+ delay: 500,
+ delayedSearch: false
 };
 
 function onContactAdd() {
@@ -285,12 +289,169 @@ function onTextMouseDown(event) {
   }
 }
 
+function onContactKeydown(event) {
+  if (event.ctrlKey || event.metaKey) {
+    this.focussed = true;
+    return;
+  }
+  if (event.keyCode == 9) { // Tab
+    if (this.confirmedValue)
+      this.value = this.confirmedValue;
+    if (document.currentPopupMenu)
+      hideMenu(document.currentPopupMenu);
+  }
+  else if (event.keyCode == 0
+	|| event.keyCode == 8 // Backspace
+        || event.keyCode == 32  // Space
+        || event.keyCode > 47) {
+      this.confirmedValue = null;
+      MailEditor.selectedIndex = -1;
+      MailEditor.currentField = this;
+      if (this.value.length > 0 && !MailEditor.delayedSearch) {
+	MailEditor.delayedSearch = true;
+	setTimeout("performSearch()", MailEditor.delay);
+      }
+      else if (this.value.length == 0) {
+	if (document.currentPopupMenu)
+	  hideMenu(document.currentPopupMenu);
+      }
+  }
+  else if (event.keyCode == 38) { // Up arrow
+    if (MailEditor.selectedIndex > 0) {
+      var contacts = $('contactsMenu').select("li");
+      contacts[MailEditor.selectedIndex--].removeClassName("selected");
+      this.value = contacts[MailEditor.selectedIndex].firstChild.nodeValue.trim();
+      contacts[MailEditor.selectedIndex].addClassName("selected");
+    }
+  }
+  else if (event.keyCode == 40) { // Down arrow
+    var contacts = $('contactsMenu').select("li");
+    if (contacts.size() - 1 > MailEditor.selectedIndex) {
+      if (MailEditor.selectedIndex >= 0)
+	contacts[MailEditor.selectedIndex].removeClassName("selected");
+      MailEditor.selectedIndex++;
+      this.value = contacts[MailEditor.selectedIndex].firstChild.nodeValue.trim();
+      contacts[MailEditor.selectedIndex].addClassName("selected");
+    }
+  }
+  else if (event.keyCode == 13) {
+    preventDefault(event);
+    if (this.confirmedValue)
+      this.value = this.confirmedValue;
+    $(this).selectText(0, this.value.length);
+    if (document.currentPopupMenu)
+      hideMenu(document.currentPopupMenu);
+    MailEditor.selectedIndex = -1;
+  }
+}
+
+function performSearch() {
+  // Perform address completion
+  if (MailEditor.currentField) {
+    if (document.contactLookupAjaxRequest) {
+      // Abort any pending request
+      document.contactLookupAjaxRequest.aborted = true;
+      document.contactLookupAjaxRequest.abort();
+    }
+    if (MailEditor.currentField.value.trim().length > 0) {
+      var urlstr = ( UserFolderURL + "Contacts/contactSearch?search="
+		     + escape(MailEditor.currentField.value) );
+      document.contactLookupAjaxRequest =
+	triggerAjaxRequest(urlstr, performSearchCallback, MailEditor.currentField);
+    }
+  }
+  MailEditor.delayedSearch = false;
+}
+
+function performSearchCallback(http) {
+  if (http.readyState == 4) {
+    var menu = $('contactsMenu');
+    var list = menu.down("ul");
+    
+    var input = http.callbackData;
+    
+    if (http.status == 200) {
+      var start = input.value.length; log(http.responseText);
+      var data = http.responseText.evalJSON(true);
+      if (data.length > 1) {
+	$(list.childNodesWithTag("li")).each(function(item) {
+	    item.remove();
+	  });
+	
+	// Populate popup menu
+	for (var i = 0; i < data.length; i++) {
+	  var contact = data[i];
+	  var completeEmail = contact["name"] + " <" + contact["email"] + ">";
+	  var node = document.createElement("li");
+	  list.appendChild(node);
+	  node.uid = contact["uid"];
+	  node.appendChild(document.createTextNode(completeEmail));
+	  $(node).observe("mousedown", onAddressResultClick);
+	}
+
+	// Show popup menu
+	var offsetScroll = Element.cumulativeScrollOffset(MailEditor.currentField);
+	var offset = Element.cumulativeOffset(MailEditor.currentField);
+	var top = offset[1] - offsetScroll[1] + node.offsetHeight + 3;
+	var height = 'auto';
+	if (data.length > 5) {
+	  height = 5 * node.getHeight() + 'px';
+	}
+	menu.setStyle({ top: top + "px",
+	      left: offset[0] + "px",
+	      height: height,
+	      visibility: "visible" });
+	menu.scrollTop = 0;
+
+	document.currentPopupMenu = menu;
+	$(document.body).observe("click", onBodyClickMenuHandler);
+      }
+      else {
+	if (document.currentPopupMenu)
+	  hideMenu(document.currentPopupMenu);
+
+	if (data.length == 1) {
+	  // Single result
+	  var contact = data[0];
+	  if (contact["uid"].length > 0)
+	    input.uid = contact["uid"];
+	  var completeEmail = contact["name"] + " <" + contact["email"] + ">";
+	  if (contact["name"].substring(0, input.value.length).toUpperCase()
+	      == input.value.toUpperCase())
+	    input.value = completeEmail;
+	  else
+	    // The result matches email address, not user name
+	    input.value += ' >> ' + completeEmail;
+	  input.confirmedValue = completeEmail;
+	  var end = input.value.length;
+	  $(input).selectText(start, end);
+	}
+      }
+    }
+    else
+      if (document.currentPopupMenu)
+	hideMenu(document.currentPopupMenu);
+    document.contactLookupAjaxRequest = null;
+  }
+}
+
+function onAddressResultClick(event) {
+  if (MailEditor.currentField) {
+    MailEditor.currentField.uid = this.uid;
+    MailEditor.currentField.value = this.firstChild.nodeValue.trim();
+    MailEditor.currentField.confirmedValue = currentField.value;
+  }
+}
+
 function initTabIndex(addressList, subjectField, msgArea) {
   
   var i = 1;
   addressList.select("input.textField").each(function (input) {
-      if (!input.readAttribute("readonly"))
+      if (!input.readAttribute("readonly")) {
 	input.writeAttribute("tabindex", i++);
+	input.writeAttribute("autocomplete", "off");
+	input.observe("keydown", onContactKeydown); // bind listener for address completion
+      }
     });
   subjectField.writeAttribute("tabindex", i++);
   msgArea.writeAttribute("tabindex", i);
diff --git a/UI/WebServerResources/UIxMailToSelection.js b/UI/WebServerResources/UIxMailToSelection.js
index 17ede265c..21bf1d2df 100644
--- a/UI/WebServerResources/UIxMailToSelection.js
+++ b/UI/WebServerResources/UIxMailToSelection.js
@@ -81,10 +81,10 @@ function fancyAddRow(shouldEdit, text, type) {
   addressList.insertBefore(row, lastChild);
 
   if (shouldEdit) {
-    input.setAttribute('autocomplete', 'off');
+    input.setAttribute("autocomplete", "off");
+    input.observe("keydown", onContactKeydown); // bind listener for address completion
     input.focus();
     input.select();
-    input.setAttribute('autocomplete', 'on');
   }
 }
 
diff --git a/UI/WebServerResources/generic.css b/UI/WebServerResources/generic.css
index 05b62c6b9..594dca268 100644
--- a/UI/WebServerResources/generic.css
+++ b/UI/WebServerResources/generic.css
@@ -354,7 +354,7 @@ UL.choiceMenu LI._chosen
 UL.choiceMenu LI._chosen:hover
 { list-style-image: url("menu-check-hover.gif"); }
 
-.menu LI:hover, .menu LI.submenu-selected
+.menu LI:hover, .menu LI.selected, .menu LI.submenu-selected
 { background-color: #4b6983;
   color: #fff; }