New Javascript address auto-completion interface.

Added focus in HTML editor when replying to a message.

Monotone-Parent: 521171d2e85cdfe0ddb7e31feca69143aae35be9
Monotone-Revision: fb56e362d93bce06baf63f26f919dedfbafe8a51

Monotone-Author: flachapelle@inverse.ca
Monotone-Date: 2009-09-01T14:12:53
Monotone-Branch: ca.inverse.sogo
This commit is contained in:
Francis Lachapelle committed 2009-09-01 14:12:53 +00:00
1 parent 1e8b478de3
commit 4999403a36
6 files changed
+324 -329

No files matched your search

+1 -1
View File
@@ -10,7 +10,7 @@
className="UIxPageFrame"
title="panelTitle"
const:popup="YES"
const:jsFiles="UIxMailToSelection.js,ckeditor/ckeditor.js">
const:jsFiles="UIxMailToSelection.js,ckeditor/ckeditor.js,SOGoAutoCompletion.js">
<script type="text/javascript">
var mailIsReply = <var:string value="isMailReply"/>;
</script>
+1 -1
View File
@@ -7,7 +7,7 @@
xmlns:label="OGo:label"
className="UIxPageFrame"
title="title"
const:jsFiles="dtree.js,MailerUIdTree.js">
const:jsFiles="dtree.js,MailerUIdTree.js,SOGoAutoCompletion.js">
<script type="text/javascript">
var textMailAccounts = '<var:string value="mailAccounts" const:escapeHTML="NO"/>';
var textDefaultColumnsOrder = '<var:string value="defaultColumnsOrder" const:escapeHTML="NO"/>';
@@ -6,6 +6,7 @@
xmlns:label="OGo:label"
className="UIxPageFrame"
title="title"
const:jsFiles="SOGoAutoCompletion.js"
const:popup="YES">
<script type="text/javascript">
var messageName = '<var:string value="clientObject.relativeImap4Name"/>';
+204
View File
@@ -0,0 +1,204 @@
/* -*- Mode: java; indent-tabs-mode: nil; c-basic-offset: 4 -*- */
// The popup menu with id "contactsMenu" must exist before
// using this interface.
var SOGoAutoCompletionInterface = {
uidField: "c_name",
animationParent: null,
selectedIndex: -1,
delay: 0.750,
delayedSearch: false,
menu: null,
bind: function () {
this.menu = $('contactsMenu');
this.writeAttribute("autocomplete", "off");
this.observe("keydown", this.onKeydown.bindAsEventListener(this));
this.observe("blur", this.onBlur.bindAsEventListener(this));
},
onKeydown: function (event) {
if (event.ctrlKey || event.metaKey) {
this.focussed = true;
return;
}
if (event.keyCode == Event.KEY_TAB) {
if (this.confirmedValue)
this.value = this.confirmedValue;
else
this.uid = null;
if (document.currentPopupMenu)
hideMenu(document.currentPopupMenu);
}
else if (event.keyCode == 0
|| event.keyCode == Event.KEY_BACKSPACE
|| event.keyCode == 32 // Space
|| event.keyCode > 47) {
this.confirmedValue = null;
this.selectedIndex = -1;
if (this.delayedSearch)
window.clearTimeout(this.delayedSearch);
this.delayedSearch = this.performSearch.delay(this.delay, this);
}
else if (event.keyCode == Event.KEY_RETURN) {
preventDefault(event);
if (this.confirmedValue)
this.value = this.confirmedValue;
$(this).select();
if (document.currentPopupMenu)
hideMenu(document.currentPopupMenu);
this.selectedIndex = -1;
}
else if (this.menu.getStyle('visibility') == 'visible') {
if (event.keyCode == Event.KEY_UP) { // Up arrow
if (this.selectedIndex > 0) {
var contacts = this.menu.select("li");
contacts[this.selectedIndex--].removeClassName("selected");
this.value = contacts[this.selectedIndex].readAttribute("address");
this.uid = contacts[this.selectedIndex].uid;
contacts[this.selectedIndex].addClassName("selected");
}
}
else if (event.keyCode == Event.KEY_DOWN) { // Down arrow
var contacts = this.menu.select("li");
if (contacts.size() - 1 > this.selectedIndex) {
if (this.selectedIndex >= 0)
contacts[this.selectedIndex].removeClassName("selected");
this.selectedIndex++;
this.value = contacts[this.selectedIndex].readAttribute("address");
this.uid = contacts[this.selectedIndex].uid;
contacts[this.selectedIndex].addClassName("selected");
}
}
}
},
onBlur: function (event) {
if (this.delayedSearch)
window.clearTimeout(this.delayedSearch);
if (this.confirmedValue)
this.value = this.confirmedValue;
else
this.uid = null;
},
performSearch: function (input) {
// Perform address completion
if (document.contactLookupAjaxRequest) {
// Abort any pending request
document.contactLookupAjaxRequest.aborted = true;
document.contactLookupAjaxRequest.abort();
}
if (input.value.trim().length > 2) {
var urlstr = (UserFolderURL + "Contacts/allContactSearch?search="
+ encodeURIComponent(input.value));
if (input.animationParent)
startAnimation(input.animationParent);
document.contactLookupAjaxRequest =
triggerAjaxRequest(urlstr, input.performSearchCallback.bind(input), input);
}
else {
if (document.currentPopupMenu)
hideMenu(document.currentPopupMenu);
}
},
performSearchCallback: function (http) {
if (http.readyState == 4) {
var list = this.menu.down("ul");
var input = http.callbackData;
if (http.status == 200) {
var start = input.value.length;
var data = http.responseText.evalJSON(true);
if (data.contacts.length > 1) {
list.select("li").each(function(item) {
item.stopObserving("mousedown");
item.remove();
});
// Populate popup menu
for (var i = 0; i < data.contacts.length; i++) {
var contact = data.contacts[i];
var completeEmail = contact["c_cn"] + " <" + contact["c_mail"] + ">";
var node = new Element('li', { 'address': completeEmail });
var matchPosition = completeEmail.toLowerCase().indexOf(data.searchText.toLowerCase());
var matchBefore = completeEmail.substring(0, matchPosition);
var matchText = completeEmail.substring(matchPosition, matchPosition + data.searchText.length);
var matchAfter = completeEmail.substring(matchPosition + data.searchText.length);
list.appendChild(node);
node.uid = contact["c_mail"];
node.appendChild(document.createTextNode(matchBefore));
node.appendChild(new Element('strong').update(matchText));
node.appendChild(document.createTextNode(matchAfter));
if (contact["contactInfo"])
node.appendChild(document.createTextNode(" (" + contact["contactInfo"] + ")"));
$(node).observe("mousedown", this.onAddressResultClick.bindAsEventListener(this));
}
// Show popup menu
var offsetScroll = Element.cumulativeScrollOffset(input);
var offset = Element.positionedOffset(input);
if (offset.top == 0)
offset = Element.cumulativeOffset(input);
var top = offset[1] - offsetScroll[1] + node.offsetHeight + 3;
var height = 'auto';
var heightDiff = window.height() - offset[1];
var nodeHeight = node.getHeight();
if ((data.contacts.length * nodeHeight) > heightDiff)
// Limit the size of the popup to the window height, minus 12 pixels
height = parseInt(heightDiff/nodeHeight) * nodeHeight - 12 + 'px';
this.menu.setStyle({ top: top + "px",
left: offset[0] + "px",
height: height,
visibility: "visible" });
this.menu.scrollTop = 0;
document.currentPopupMenu = this.menu;
$(document.body).stopObserving("click");
$(document.body).observe("click", onBodyClickMenuHandler);
}
else {
if (document.currentPopupMenu)
hideMenu(document.currentPopupMenu);
if (data.contacts.length == 1) {
// Single result
var contact = data.contacts[0];
input.uid = contact[this.uidField];
var completeEmail = contact["c_cn"] + " <" + contact["c_mail"] + ">";
if (contact["c_cn"].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);
this.selectedIndex = -1;
}
}
}
else
if (document.currentPopupMenu)
hideMenu(document.currentPopupMenu);
document.contactLookupAjaxRequest = null;
}
},
onAddressResultClick: function(event) {
var e = Event.element(event);
if (e.tagName != 'LI')
e = e.up('LI');
if (e) {
this.uid = e.uid;
this.value = e.readAttribute("address");
this.confirmedValue = this.value;
}
}
};
+15 -224
View File
@@ -139,11 +139,11 @@ function clickedEditorSend(sender) {
var lastRow = $("lastRow");
lastRow.down("select").name = "popup_last";
window.shouldPreserve = true;
document.pageform.action = "send";
document.pageform.submit();
return false;
}
@@ -299,233 +299,13 @@ function onTextMouseDown(event) {
}
}
/* address completion */
function onContactKeydown(event) {
if (event.ctrlKey || event.metaKey) {
this.focussed = true;
return;
}
if (event.keyCode == Event.KEY_TAB) {
if (this.confirmedValue)
this.value = this.confirmedValue;
if (document.currentPopupMenu)
hideMenu(document.currentPopupMenu);
}
else if (event.keyCode == 0
|| event.keyCode == Event.KEY_BACKSPACE
|| event.keyCode == 32 // Space
|| event.keyCode > 47) {
this.confirmedValue = null;
MailEditor.selectedIndex = -1;
MailEditor.currentField = this;
if (MailEditor.delayedSearch)
window.clearTimeout(MailEditor.delayedSearch);
MailEditor.delayedSearch = window.setTimeout("performSearch()", MailEditor.delay);
}
else if (event.keyCode == Event.KEY_RETURN) {
preventDefault(event);
if (this.confirmedValue)
this.value = this.confirmedValue;
$(this).select();
if (document.currentPopupMenu)
hideMenu(document.currentPopupMenu);
MailEditor.selectedIndex = -1;
}
else if ($('contactsMenu').getStyle('visibility') == 'visible') {
if (event.keyCode == Event.KEY_UP) { // Up arrow
if (MailEditor.selectedIndex > 0) {
var contacts = $('contactsMenu').select("li");
contacts[MailEditor.selectedIndex--].removeClassName("selected");
this.value = contacts[MailEditor.selectedIndex].readAttribute("address");
contacts[MailEditor.selectedIndex].addClassName("selected");
}
}
else if (event.keyCode == Event.KEY_DOWN) { // 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].readAttribute("address");
contacts[MailEditor.selectedIndex].addClassName("selected");
}
}
}
}
function onContactBlur(event) {
if (MailEditor.delayedSearch)
window.clearTimeout(MailEditor.delayedSearch);
MailEditor.currentField = null;
}
function findPos(obj) {
var curleft = curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
}
return [curleft,curtop];
}
function performSearch() {
// Perform address completion
var reference = $("referenceList");
if (reference) {
var field = reference.down ("TD.editing INPUT");
if (field && field.value.trim().length > 2) {
/*var pos = findPos (field);
$('contactsMenu').absolutize ();
$('contactsMenu').style.top = pos[1];*/
var urlstr = window.location.href + "/../../contactSearch?search="
+ encodeURIComponent (field.value.trim());
document.contactLookupAjaxRequest =
triggerAjaxRequest(urlstr, performSearchCallback, field);
}
}
else if (MailEditor.currentField) {
if (document.contactLookupAjaxRequest) {
// Abort any pending request
document.contactLookupAjaxRequest.aborted = true;
document.contactLookupAjaxRequest.abort();
}
if (MailEditor.currentField.value.trim().length > 2) {
var urlstr = (UserFolderURL + "Contacts/allContactSearch?search="
+ encodeURIComponent(MailEditor.currentField.value));
document.contactLookupAjaxRequest =
triggerAjaxRequest(urlstr, performSearchCallback, MailEditor.currentField);
}
else {
if (document.currentPopupMenu)
hideMenu(document.currentPopupMenu);
}
}
}
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;
var data = http.responseText.evalJSON(true);
if (data.contacts.length > 1) {
list.select("li").each(function(item) {
item.remove();
});
// Populate popup menu
for (var i = 0; i < data.contacts.length; i++) {
var contact = data.contacts[i];
var completeEmail = contact["c_cn"] + " <" + contact["c_mail"] + ">";
var node = new Element('li', { 'address': completeEmail });
node.writeAttribute("mail", contact["c_mail"]);
node.writeAttribute("name", contact["c_cn"]);
var matchPosition = completeEmail.toLowerCase().indexOf(data.searchText.toLowerCase());
var matchBefore = completeEmail.substring(0, matchPosition);
var matchText = completeEmail.substring(matchPosition, matchPosition + data.searchText.length);
var matchAfter = completeEmail.substring(matchPosition + data.searchText.length);
list.appendChild(node);
node.uid = contact["c_name"];
node.appendChild(document.createTextNode(matchBefore));
node.appendChild(new Element('strong').update(matchText));
node.appendChild(document.createTextNode(matchAfter));
if (contact["contactInfo"])
node.appendChild(document.createTextNode(" (" + contact["contactInfo"] + ")"));
$(node).observe("mousedown", onAddressResultClick);
}
// Show popup menu
var offsetScroll = Element.cumulativeScrollOffset(input);
var offset = Element.cumulativeOffset(input);
var top = offset[1] - offsetScroll[1] + node.offsetHeight + 3;
var height = 'auto';
var heightDiff = window.height() - offset[1];
var nodeHeight = node.getHeight();
if ((data.contacts.length * nodeHeight) > heightDiff)
// Limit the size of the popup to the window height, minus 12 pixels
height = parseInt(heightDiff/nodeHeight) * nodeHeight - 12 + '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.contacts.length == 1) {
// Single result
var contact = data.contacts[0];
input.uid = contact["c_name"];
if ($("referenceList")) {
var line = $(input).ancestors().first();
line.writeAttribute ("card", contact["c_name"]);
line.writeAttribute ("name", contact["c_cn"]);
line.writeAttribute ("mail", contact["c_mail"]);
}
var completeEmail = contact["c_cn"] + " <" + contact["c_mail"] + ">";
if (contact["c_cn"].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);
MailEditor.selectedIndex = -1;
}
}
}
else
if (document.currentPopupMenu)
hideMenu(document.currentPopupMenu);
document.contactLookupAjaxRequest = null;
}
}
function onAddressResultClick(event) {
var reference = $("referenceList");
if (reference) {
var field = reference.down ("TD.editing INPUT");
var td = reference.down ("TD.editing");
td.writeAttribute ("card", this.uid);
td.writeAttribute ("mail", this.readAttribute("mail"));
td.writeAttribute ("name", this.readAttribute("name"));
field.value = $(this).readAttribute("address");
endAllEditables ();
}
if (MailEditor.currentField) {
MailEditor.currentField.uid = this.uid;
MailEditor.currentField.value = $(this).readAttribute("address");
MailEditor.currentField.confirmedValue = MailEditor.currentField.value;
}
}
function initTabIndex(addressList, subjectField, msgArea) {
var i = 1;
addressList.select("input.textField").each(function (input) {
if (!input.readAttribute("readonly")) {
input.writeAttribute("tabindex", i++);
input.writeAttribute("autocomplete", "off");
input.observe("keydown", onContactKeydown); // bind listener for address completion
input.observe("blur", onContactBlur);
input.addInterface(SOGoAutoCompletionInterface);
input.uidField = "c_name";
}
});
subjectField.writeAttribute("tabindex", i++);
@@ -590,6 +370,8 @@ function initMailEditor() {
]
}
);
if (focusField == textarea)
focusCKEditor();
}
Event.observe(window, "resize", onWindowResize);
@@ -597,6 +379,15 @@ function initMailEditor() {
onWindowResize.defer();
}
function focusCKEditor(event) {
if (CKEDITOR.status != 'basic_ready')
setTimeout("focusCKEditor()", 100);
else
// CKEditor reports being ready but it's still not focusable;
// we wait for a few more milliseconds
setTimeout("CKEDITOR.instances.text.focus()", 500);
}
function initializePriorityMenu() {
var priority = $("priority").value.toUpperCase();
var priorityMenu = $("priority-menu").childNodesWithTag("ul")[0];
+102 -103
View File
@@ -32,163 +32,162 @@
var lastIndex = currentIndex;
function sanitizedCn(cn) {
var parts;
parts = cn.split(', ');
if(parts.length == 1)
return cn;
return parts[0];
var parts;
parts = cn.split(', ');
if(parts.length == 1)
return cn;
return parts[0];
}
function hasAddress(email) {
var e = $(email);
if(e)
return true;
return false;
var e = $(email);
if(e)
return true;
return false;
}
function checkAddresses() {
alert("addressCount: " + this.getAddressCount() + " currentIndex: " + currentIndex + " lastIndex: " + lastIndex);
alert("addressCount: " + this.getAddressCount() + " currentIndex: " + currentIndex + " lastIndex: " + lastIndex);
}
function fancyAddRow(shouldEdit, text, type) {
var addr = $('addr_' + lastIndex);
if (addr && addr.value == '') {
var input = $('subjectField');
if (input && input.value != '') {
input.focus();
input.select();
return;
var addr = $('addr_' + lastIndex);
if (addr && addr.value == '') {
var input = $('subjectField');
if (input && input.value != '') {
input.focus();
input.select();
return;
}
}
}
var addressList = $("addressList").tBodies[0];
var lastChild = $("lastRow");
var addressList = $("addressList").tBodies[0];
var lastChild = $("lastRow");
currentIndex++;
var proto = lastChild.previous("tr");
var row = proto.cloneNode(true);
row.writeAttribute("id", 'row_' + currentIndex);
var rowNodes = row.childNodesWithTag("td");
var select = $(rowNodes[0]).childNodesWithTag("select")[0];
select.name = 'popup_' + currentIndex;
select.value = (type? type : proto.down("select").value);
var input = $(rowNodes[1]).childNodesWithTag("input")[0];
input.name = 'addr_' + currentIndex;
input.id = 'addr_' + currentIndex;
input.value = text;
input.stopObserving("keydown", onContactKeydown);
currentIndex++;
var proto = lastChild.previous("tr");
var row = proto.cloneNode(true);
row.writeAttribute("id", 'row_' + currentIndex);
var rowNodes = row.childNodesWithTag("td");
var select = $(rowNodes[0]).childNodesWithTag("select")[0];
select.name = 'popup_' + currentIndex;
select.value = (type? type : proto.down("select").value);
var input = $(rowNodes[1]).childNodesWithTag("input")[0];
input.name = 'addr_' + currentIndex;
input.id = 'addr_' + currentIndex;
input.value = text;
input.stopObserving("keydown");
input.stopObserving("blur");
addressList.insertBefore(row, lastChild);
addressList.insertBefore(row, lastChild);
if (shouldEdit) {
input.writeAttribute("autocomplete", "off");
input.observe("keydown", onContactKeydown); // bind listener for address completion
input.observe("blur", onContactBlur);
input.focus();
input.select();
}
if (shouldEdit) {
input.addInterface(SOGoAutoCompletionInterface);
input.focus();
input.select();
}
}
function addressFieldGotFocus(sender) {
var idx;
var idx;
idx = this.getIndexFromIdentifier(sender.id);
if (lastIndex == idx) return;
this.removeLastEditedRowIfEmpty();
onWindowResize(null);
idx = this.getIndexFromIdentifier(sender.id);
if (lastIndex == idx) return;
this.removeLastEditedRowIfEmpty();
onWindowResize(null);
return false;
return false;
}
function addressFieldLostFocus(sender) {
lastIndex = this.getIndexFromIdentifier(sender.id);
lastIndex = this.getIndexFromIdentifier(sender.id);
if (sender.confirmedValue) {
sender.value = sender.confirmedValue;
sender.confirmedValue = false;
}
var addresses = sender.value.split(',');
if (addresses.length > 0) {
sender.value = addresses[0].strip();
for (var i = 1; i < addresses.length; i++) {
var addr = addresses[i].strip();
if (addr.length > 0)
fancyAddRow(false, addr, $(sender).up("tr").down("select").value);
if (sender.confirmedValue) {
sender.value = sender.confirmedValue;
sender.confirmedValue = false;
}
}
onWindowResize(null);
var addresses = sender.value.split(',');
if (addresses.length > 0) {
sender.value = addresses[0].strip();
for (var i = 1; i < addresses.length; i++) {
var addr = addresses[i].strip();
if (addr.length > 0)
fancyAddRow(false, addr, $(sender).up("tr").down("select").value);
}
}
onWindowResize(null);
return false;
return false;
}
function removeLastEditedRowIfEmpty() {
var addr, addressList, senderRow;
var addr, addressList, senderRow;
addressList = $("addressList").tBodies[0];
addressList = $("addressList").tBodies[0];
if (lastIndex == 0 && addressList.childNodes.length <= 2) return;
addr = $('addr_' + lastIndex);
if (!addr) return;
if (addr.value.strip() != '') return;
senderRow = $("row_" + lastIndex);
addressList.removeChild(senderRow);
if (lastIndex == 0 && addressList.childNodes.length <= 2) return;
addr = $('addr_' + lastIndex);
if (!addr) return;
if (addr.value.strip() != '') return;
senderRow = $("row_" + lastIndex);
addressList.removeChild(senderRow);
}
function getIndexFromIdentifier(id) {
return id.split('_')[1];
return id.split('_')[1];
}
function getAddressIDs() {
var addressList, rows, i, count, addressIDs;
var addressList, rows, i, count, addressIDs;
addressIDs = new Array();
addressIDs = new Array();
addressList = $("addressList").tBodies[0];
rows = addressList.childNodes;
count = rows.length;
addressList = $("addressList").tBodies[0];
rows = addressList.childNodes;
count = rows.length;
for (i = 0; i < count; i++) {
var row, rowId;
for (i = 0; i < count; i++) {
var row, rowId;
row = rows[i];
rowId = row.id;
if (rowId && rowId != 'lastRow') {
var idx;
row = rows[i];
rowId = row.id;
if (rowId && rowId != 'lastRow') {
var idx;
idx = this.getIndexFromIdentifier(rowId);
addressIDs.push(idx);
idx = this.getIndexFromIdentifier(rowId);
addressIDs.push(idx);
}
}
}
return addressIDs;
return addressIDs;
}
function getAddressCount() {
var addressCount, addressIDs, i, count;
var addressCount, addressIDs, i, count;
addressCount = 0;
addressIDs = this.getAddressIDs();
count = addressIDs.length;
for (i = 0; i < count; i++) {
var idx, input;
addressCount = 0;
addressIDs = this.getAddressIDs();
count = addressIDs.length;
for (i = 0; i < count; i++) {
var idx, input;
idx = addressIDs[i];
input = $('addr_' + idx);
if (input && input.value != '')
addressCount++;
}
return addressCount;
idx = addressIDs[i];
input = $('addr_' + idx);
if (input && input.value != '')
addressCount++;
}
return addressCount;
}
function hasRecipients() {
var count;
var count;
count = this.getAddressCount();
count = this.getAddressCount();
return (count > 0);
return (count > 0);
}
function initMailToSelection() {
currentIndex = lastIndex = $$("table#addressList tr").length - 2;
currentIndex = lastIndex = $$("table#addressList tr").length - 2;
}
document.observe("dom:loaded", initMailToSelection);