From bfc1f9012b4cb229f30c6c59a3eb2d984e6ffd20 Mon Sep 17 00:00:00 2001 From: Wolfgang Sourdeau Date: Fri, 10 Nov 2006 22:58:25 +0000 Subject: [PATCH] Monotone-Parent: 12bd2da2143e884691df4530016c9e5725370d74 Monotone-Revision: 53a9a0c604dc0d44347247cc86a74a8d746c3c4b Monotone-Author: wsourdeau@inverse.ca Monotone-Date: 2006-11-10T22:58:25 Monotone-Branch: ca.inverse.sogo --- ChangeLog | 4 + UI/Templates/UIxPageFrame.wox | 1 + UI/WebServerResources/HTMLTableElement.js | 41 ---- UI/WebServerResources/SOGoDragAndDrop.js | 264 ++++++++++++++++++++++ UI/WebServerResources/generic.js | 188 +-------------- 5 files changed, 270 insertions(+), 228 deletions(-) create mode 100644 UI/WebServerResources/SOGoDragAndDrop.js diff --git a/ChangeLog b/ChangeLog index 6e8fc040a..1567dc8a5 100644 --- a/ChangeLog +++ b/ChangeLog @@ -1,5 +1,9 @@ 2006-11-10 Wolfgang Sourdeau + * UI/WebServerResources/SOGoDragAndDrop.js: new file containing + the drag and drop manager as well as the interface to HTMLElement + to trigger drag and drop events. + * UI/MailerUI/UIxMailView.m ([UIxMailView -moveAction]): new action to move the current message to the mailbox named after the value of parameter "tofolder". diff --git a/UI/Templates/UIxPageFrame.wox b/UI/Templates/UIxPageFrame.wox index 58fd3c035..d5361d580 100644 --- a/UI/Templates/UIxPageFrame.wox +++ b/UI/Templates/UIxPageFrame.wox @@ -43,6 +43,7 @@ + 10) { - this.removeEventListener("mousemove", this._dragGestureMouseMoveHandler, false); - this.removeEventListener("mousedown", this._dragGestureMouseUpHandler, false); - this._dragGestureStartPoint = null; - var dragStart = document.createEvent("MouseEvents"); - dragStart.initMouseEvent("draggesture-hack", true, true, window, - event.detail, event.screenX, event.screenY, - event.clientX, event.clientY, event.ctrlKey, - event.altKey, event.shiftKey, event.metaKey, - event.button, null); - this.dispatchEvent(dragStart); - window.addEventListener("mouseup", document.DNDManager.destinationDrop, false); - window.addEventListener("mouseover", document.DNDManager.destinationEnter, false); - window.addEventListener("mousemove", document.DNDManager.destinationOver, false); - window.addEventListener("mouseout", document.DNDManager.destinationExit, false); - event.returnValue = false; - } -} diff --git a/UI/WebServerResources/SOGoDragAndDrop.js b/UI/WebServerResources/SOGoDragAndDrop.js new file mode 100644 index 000000000..804671c5f --- /dev/null +++ b/UI/WebServerResources/SOGoDragAndDrop.js @@ -0,0 +1,264 @@ +/* drag and drop */ + +/* HTMLElement interface */ +var SOGODragAndDropSourceInterface = { + _removeGestureHandlers: function () { + window.removeEventListener("mousemove", this.dragGestureMouseMoveHandler, false); + window.removeEventListener("mouseup", this.dragGestureMouseUpHandler, false); + document._dragGestureStartPoint = null; + document._currentMouseGestureObject = null; + }, + bind: function() { + this.addEventListener("mousedown", this.dragGestureMouseDownHandler, false); + }, + dragGestureMouseDownHandler: function (event) { + document._dragGestureStartPoint = new Array(event.clientX, event.clientY); + document._currentMouseGestureObject = this; + window.addEventListener("mousemove", this.dragGestureMouseMoveHandler, false); + window.addEventListener("mouseup", this.dragGestureMouseUpHandler, false); + }, + dragGestureMouseUpHandler: function (event) { + document._currentMouseGestureObject._removeGestureHandlers(); + }, + dragGestureMouseMoveHandler: function (event) { + log("source mouse move (target: " + event.target + ")"); + var deltaX = event.clientX - document._dragGestureStartPoint[0]; + var deltaY = event.clientY - document._dragGestureStartPoint[1]; + if (Math.sqrt((deltaX * deltaX) + (deltaY * deltaY)) > 10) { + event.stopPropagation(); + event.preventDefault(); + event.returnValue = false; + event.cancelBubble = false; + var object = document._currentMouseGestureObject; + var point = document._dragGestureStartPoint; + document._currentMouseGestureObject._removeGestureHandlers(); + document.DNDManager.startDragging(object, point); +// var dragStart = document.createEvent("MouseEvents"); +// dragStart.initMouseEvent("draggesture-hack", true, true, window, +// event.detail, event.screenX, event.screenY, +// event.clientX, event.clientY, event.ctrlKey, +// event.altKey, event.shiftKey, event.metaKey, +// event.button, null); +// this.dispatchEvent(dragStart); + } + } +} + +/* DNDManager */ +document.DNDManager = { + lastSource: 0, + lastDestination: 0, + sources: new Array(), + destinations: new Array(), + registerSource: function (source) { + var id = source.getAttribute("id"); + if (!id) { + id = "_dndSource" + (this.lastSource + 1); + source.setAttribute("id", id); + } + this.sources[id] = source; + this.lastSource++; + source.addInterface(SOGODragAndDropSourceInterface); + }, + registerDestination: function (destination) { + var id = destination.getAttribute("id"); + if (!id) { + id = "_dndDestination" + (this.lastDestination + 1); + destination.setAttribute("id", id); + } + this.destinations[id] = destination; + this.lastDestination++; + }, + _lookupSource: function (target) { + var source = null; + var id = target.getAttribute("id"); + if (id) + source = document.DNDManager.sources[id]; + return source; + }, + _lookupDestination: function (target) { + var destination = null; + var id = target.getAttribute("id"); + if (id) + destination = document.DNDManager.destinations[id]; + return destination; + }, + startDragging: function (object, point) { +// log("source gesture intercepted (source: " + object + ")"); + var source = document.DNDManager._lookupSource (object); + if (source) { +// log("source known"); + document.DNDManager.currentDndOperation + = new document.DNDOperation (source, point); + window.addEventListener("mouseup", + document.DNDManager.destinationDrop, false); + window.addEventListener("mouseover", + document.DNDManager.destinationEnter, false); + window.addEventListener("mousemove", + document.DNDManager.destinationOver, false); + window.addEventListener("mouseout", + document.DNDManager.destinationExit, false); + } + }, + destinationEnter: function (event) { + var operation = document.DNDManager.currentDndOperation; + var destination = document.DNDManager._lookupDestination (event.target); + if (operation && destination && destination.dndAcceptType) { +// log("enter: " + event.target); + operation.type = null; + var i = 0; + while (operation.type == null + && i < operation.types.length) { + if (destination.dndAcceptType(operation.types[i])) { + operation.type = operation.types[i]; + operation.setDestination(destination); + if (destination.dndEnter) + destination.dndEnter(event, operation.source, operation.type); + } + else + i++; + } + } + }, + destinationExit: function (event) { + var operation = document.DNDManager.currentDndOperation; + if (operation + && operation.destination == event.target) { +// log("exit: " + event.target); + if (operation.destination.dndExit) + event.target.dndExit(); + operation.setDestination(null); + } + }, + destinationOver: function (event) { +// log("over: " + event.target); +// var operation = document.DNDManager.currentDndOperation; +// if (operation +// && operation.destination == event.target) +// log("over: " + event.target); + }, + destinationDrop: function (event) { + var operation = document.DNDManager.currentDndOperation; + if (operation) { + window.removeEventListener("mouseup", + document.DNDManager.destinationDrop, false); + window.removeEventListener("mouseover", + document.DNDManager.destinationEnter, false); + window.removeEventListener("mousemove", + document.DNDManager.destinationOver, false); + window.removeEventListener("mouseout", + document.DNDManager.destinationExit, false); + if (operation.destination == event.target) { + log("drag / drop: " + operation.source + " to " + operation.destination); + if (operation.destination.dndExit) + event.target.dndExit(); + if (operation.destination.dndDrop) { + var data = null; + if (operation.source.dndDataForType) + data = operation.source.dndDataForType(operation.type); + var result = event.target.dndDrop(data); + if (operation.ghost) { + if (result) + operation.bustGhost(); + else + operation.chaseGhost(); + } + } + else + if (operation.ghost) + operation.chaseGhost(); + } else { + if (operation.ghost) + operation.chaseGhost(); + } + document.DNDManager.currentDndOperation = null; + } + }, + currentDndOperation: null, +} + +/* DNDOperation */ +document.DNDOperation = function (source, point) { + this.startPoint = point; + this.source = source; + if (source.dndTypes) { + this.types = source.dndTypes(); + } + this.type = null; + this.destination = null; + if (source.dndGhost) { + var ghost = source.dndGhost(); + ghost.style.position = "absolute;"; + ghost.style.zIndex = 10000; + ghost.style.MozOpacity = 0.8; + document.body.appendChild(ghost); + this.ghost = ghost; + + document.addEventListener("mousemove", this.moveGhost, false); + } + + return this; +}; + +document.DNDOperation.prototype.setDestination = function(destination) { + this.destination = destination; +} + +document.DNDOperation.prototype.moveGhost = function(event) { + var offsetX = event.clientX; + var offsetY = event.clientY; + if (document.DNDManager.currentDndOperation.ghost.ghostOffsetX) + offsetX += document.DNDManager.currentDndOperation.ghost.ghostOffsetX; + if (document.DNDManager.currentDndOperation.ghost.ghostOffsetY) + offsetY += document.DNDManager.currentDndOperation.ghost.ghostOffsetY; + + document.DNDManager.currentDndOperation.ghost.style.left = offsetX + "px;"; + document.DNDManager.currentDndOperation.ghost.style.top = offsetY + "px;"; +} + +document.DNDOperation.prototype.bustGhost = function() { + document._dyingOperation = this; + document.removeEventListener("mousemove", this.moveGhost, false); + this.ghost.bustStep = 10; + setTimeout("document._dyingOperation._fadeGhost();", 50); +} + +document.DNDOperation.prototype.chaseGhost = function() { + document._dyingOperation = this; + document.removeEventListener("mousemove", this.moveGhost, false); + this.ghost.bustStep = 25; + this.ghost.chaseStep = 25; + this.ghost.chaseDeltaX = ((this.ghost.cascadeLeftOffset() - this.startPoint[0]) + / this.ghost.chaseStep); + this.ghost.chaseDeltaY = ((this.ghost.cascadeTopOffset() - this.startPoint[1]) + / this.ghost.chaseStep); + setTimeout("document._dyingOperation._chaseGhost();", 20); +} + +document.DNDOperation.prototype._chaseGhost = function() { + if (this.ghost.chaseStep) { + var newLeft = this.ghost.cascadeLeftOffset() - this.ghost.chaseDeltaX; + var newTop = this.ghost.cascadeTopOffset() - this.ghost.chaseDeltaY; + this.ghost.style.MozOpacity = (0.04 * this.ghost.chaseStep); + this.ghost.style.left = newLeft + "px;"; + this.ghost.style.top = newTop + "px;"; + this.ghost.chaseStep--; + setTimeout("document._dyingOperation._chaseGhost();", 20); + } + else { + document.body.removeChild(this.ghost); + this.ghost = null; + } +} + +document.DNDOperation.prototype._fadeGhost = function() { + if (this.ghost.bustStep) { + this.ghost.style.MozOpacity = (0.1 * this.ghost.bustStep); + this.ghost.bustStep--; + setTimeout("document._dyingOperation._fadeGhost();", 50); + } + else { + document.body.removeChild(this.ghost); + this.ghost = null; + } +} diff --git a/UI/WebServerResources/generic.js b/UI/WebServerResources/generic.js index ce3dcced3..18494b9ae 100644 --- a/UI/WebServerResources/generic.js +++ b/UI/WebServerResources/generic.js @@ -441,7 +441,7 @@ function onMenuClick(event, menuId) function setupMenuTarget(menu, target) { menu.menuTarget = target; - var menus = getElementsByClassName("menu", menu); + var menus = document.getElementsByClassName("menu", menu); for (var i = 0; i < menus.length; i++) { menus[i].menuTarget = target; } @@ -941,17 +941,14 @@ var onLoadHandler = { initTabs(); configureDragHandles(); configureSortableTableHeaders(); -// genericInitDnd(); } } function configureSortableTableHeaders() { var headers = document.getElementsByClassName("sortableTableHeader"); - log("length: " + headers.length); for (var i = 0; i < headers.length; i++) { var anchor = headers[i].childNodesWithTag("a")[0]; if (!anchor.link) { - log("anchor " + i); anchor.link = anchor.getAttribute("href"); anchor.href = "#"; anchor.addEventListener("click", onHeaderClick, true); @@ -961,189 +958,6 @@ function configureSortableTableHeaders() { window.addEventListener("load", onLoadHandler, false); -/* drag and drop */ -document.DNDManager = { - lastSource: 0, - lastDestination: 0, - sources: new Array(), - destinations: new Array(), - registerSource: function (source) { - var id = source.getAttribute("id"); - if (!id) { - id = "_dndSource" + (this.lastSource + 1); - source.setAttribute("id", id); - } - this.sources[id] = source; - this.lastSource++; - if (source instanceof HTMLTableElement) { - source.addEventListener("draggesture-hack", - document.DNDManager.sourceGesture, false); - } - }, - registerDestination: function (destination) { - var id = destination.getAttribute("id"); - if (!id) { - id = "_dndDestination" + (this.lastDestination + 1); - destination.setAttribute("id", id); - } - this.destinations[id] = destination; - this.lastDestination++; - }, - _lookupSource: function (target) { - var source = null; - var id = target.getAttribute("id"); - if (id) - source = document.DNDManager.sources[id]; - return source; - }, - _lookupDestination: function (target) { - var destination = null; - var id = target.getAttribute("id"); - if (id) - destination = document.DNDManager.destinations[id]; - return destination; - }, - sourceGesture: function (event) { - var source = document.DNDManager._lookupSource (event.target); - if (source) - document.DNDManager.currentDndOperation = new document.DNDOperation (source); - }, - destinationEnter: function (event) { - var operation = document.DNDManager.currentDndOperation; - var destination = document.DNDManager._lookupDestination (event.target); - if (operation && destination && destination.dndAcceptType) { - operation.type = null; - var i = 0; - while (operation.type == null - && i < operation.types.length) { - if (destination.dndAcceptType(operation.types[i])) { - operation.type = operation.types[i]; - operation.setDestination(destination); - if (destination.dndEnter) - destination.dndEnter(event, operation.source, operation.type); - } - else - i++; - } - } - }, - destinationExit: function (event) { - var operation = document.DNDManager.currentDndOperation; - if (operation - && operation.destination == event.target) { -// log("exit: " + event.target); - if (operation.destination.dndExit) - event.target.dndExit(); - operation.setDestination(null); - } - }, - destinationOver: function (event) { -// var operation = document.DNDManager.currentDndOperation; -// if (operation -// && operation.destination == event.target) -// log("over: " + event.target); - }, - destinationDrop: function (event) { - var operation = document.DNDManager.currentDndOperation; - if (operation) { - if (operation.ghost) - operation.bustGhost(); - if (operation.source instanceof HTMLTableElement) { - window.removeEventListener("mouseup", - document.DNDManager.destinationDrop, false); - window.removeEventListener("mouseover", - document.DNDManager.destinationEnter, false); - window.removeEventListener("mousemove", - document.DNDManager.destinationOver, false); - window.removeEventListener("mouseout", - document.DNDManager.destinationExit, false); - } - if (operation.destination == event.target) { - log("drag / drop: " + operation.source + " to " + operation.destination); - if (operation.destination.dndExit) - event.target.dndExit(); - if (operation.destination.dndDrop) { - var data = operation.source.dndDataForType(operation.type); - event.target.dndDrop(data); - } - } - document.DNDManager.currentDndOperation = null; - } - }, - currentDndOperation: null, -} - -document.DNDOperation = function (source) { - this.source = source; - if (source.dndTypes) { - this.types = source.dndTypes(); - } - this.type = null; - this.destination = null; - if (source.dndGhost) { - var ghost = source.dndGhost(); - ghost.style.position = "absolute;"; - ghost.style.zIndex = 10000; - ghost.style.MozOpacity = 0.8; - document.body.appendChild(ghost); - this.ghost = ghost; - - document.addEventListener("mousemove", this.moveGhost, false); - } - - return this; -}; - -document.DNDOperation.prototype.setDestination = function(destination) { - this.destination = destination; -} - -document.DNDOperation.prototype.moveGhost = function(event) { - var offsetX = event.clientX; - var offsetY = event.clientY; - if (document.DNDManager.currentDndOperation.ghost.ghostOffsetX) - offsetX += document.DNDManager.currentDndOperation.ghost.ghostOffsetX; - if (document.DNDManager.currentDndOperation.ghost.ghostOffsetY) - offsetY += document.DNDManager.currentDndOperation.ghost.ghostOffsetY; - - document.DNDManager.currentDndOperation.ghost.style.left = offsetX + "px;"; - document.DNDManager.currentDndOperation.ghost.style.top = offsetY + "px;"; -} - -document.DNDOperation.prototype.bustGhost = function() { - document._dyingOperation = this; - document.removeEventListener("mousemove", this.moveGhost, false); - this.ghost.bustStep = 10; - setTimeout("document._dyingOperation._fadeGhost();", 50); -} - -document.DNDOperation.prototype._fadeGhost = function() { - if (this.ghost.bustStep) { - this.ghost.style.MozOpacity = (0.1 * this.ghost.bustStep); - this.ghost.bustStep--; - setTimeout("document._dyingOperation._fadeGhost();", 50); - } - else { - document.body.removeChild(this.ghost); - this.ghost = null; - } -} - -function genericInitDnd() { - log ("generic initDnd"); -// var tables = document.getElementsByTagName("table"); - window.addEventListener("draggesture", document.DNDManager.sourceGesture, false); - window.addEventListener("dragenter", document.DNDManager.destinationEnter, false); - window.addEventListener("dragexit", document.DNDManager.destinationExit, false); - window.addEventListener("dragover", document.DNDManager.destinationOver, false); - window.addEventListener("dragdrop", document.DNDManager.destinationDrop, false); -// for (var i = 0; i < tables.length; i++) { -// tables[i].addEventListener("draggesture", document.DNDManager.sourceGesture, false); -// tables[i].addEventListener("dragstart", document.DNDManager.sourceStart, false); -// tables[i].addEventListener("dragstop", document.DNDManager.sourceStop, false); -// } -} - /* stubs */ function configureDragHandles() { }