Implemented drag and drop for the new sticky notes view.

CSS and JavaScript are done; all that is left is to add the
ajax call to send the new coordinates to the server.

diff --git a/webcit/notes.c b/webcit/notes.c
index cea7121d5a377759edb545792649a84701d840f7..e1e3042a22616114595a5dbeed5d9db9fc957237 100644 (file)
--- a/webcit/notes.c
+++ b/webcit/notes.c
@@ -182,6 +182,7 @@ void display_vnote_div(struct vnote *v, long msgnum) {
 
        wprintf("<div id=\"titlebar%ld\" ", msgnum);
        wprintf("class=\"stickynote_titlebar\" ");
+       wprintf("onMouseDown=\"NotesDragMouseDown(event,%ld)\" ", msgnum);
        wprintf("style=\"");
        wprintf("background-color: #%02X%02X%02X ", v->color_red/2, v->color_green/2, v->color_blue/2);
        wprintf("\">");

diff --git a/webcit/static/wclib.js b/webcit/static/wclib.js
index 09a5c8ad44733ba70d3efeb2e4425a16a3fbb4f4..fca12b2fbe54a68e8db7cd9941e1fdf2ce1168b1 100644 (file)
--- a/webcit/static/wclib.js
+++ b/webcit/static/wclib.js
@@ -422,6 +422,83 @@ function CtdlResizeMsgListMouseDown(evt) {
 
 
 
+
+
+// These functions handle moving sticky notes around the screen by dragging them
+
+var msgnum_of_note_being_dragged = 0;
+var saved_cursor_style = 'default';
+var note_was_dragged = 0;
+
+function NotesDragMouseUp(evt) {
+       document.onmouseup = null;
+       document.onmousemove = null;
+       if (document.layers) {
+               document.releaseEvents(Event.MOUSEUP | Event.MOUSEMOVE);
+       }
+
+       d = $('note' + msgnum_of_note_being_dragged);
+       d.style.cursor = saved_cursor_style;
+
+       // Only submit the change if motion actually happened
+       if (note_was_dragged > 0) {
+               alert('FIXME do ajax call to move position x=' + d.style.left + ' y=' + d.style.top);
+       }
+
+       msgnum_of_note_being_dragged = 0;
+       return true;
+}
+
+function NotesDragMouseMove(evt) {
+       x = (ns6 ? evt.clientX : event.clientX);
+       x_increment = x - saved_x;
+       y = (ns6 ? evt.clientY : event.clientY);
+       y_increment = y - saved_y;
+
+       // Move the div
+       d = $('note' + msgnum_of_note_being_dragged);
+
+       divTop = parseInt(d.style.top);
+       divLeft = parseInt(d.style.left);
+
+       d.style.top = (divTop + y_increment) + 'px';
+       d.style.left = (divLeft + x_increment) + 'px';
+
+       saved_x = x;
+       saved_y = y;
+       note_was_dragged = 1;
+       return true;
+}
+
+
+function NotesDragMouseDown(evt, msgnum) {
+       saved_x = (ns6 ? evt.clientX : event.clientX);
+       saved_y = (ns6 ? evt.clientY : event.clientY);
+       document.onmouseup = NotesDragMouseUp;
+       document.onmousemove = NotesDragMouseMove;
+       if (document.layers) {
+               document.captureEvents(Event.MOUSEUP | Event.MOUSEMOVE);
+       }
+       msgnum_of_note_being_dragged = msgnum;
+       d = $('note' + msgnum_of_note_being_dragged);
+       saved_cursor_style = d.style.cursor;
+       d.style.cursor = 'move';
+       return false;           // disable the default action
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 // These functions handle drag and drop message moving
 
 var mm_div = null;

diff --git a/webcit/static/webcit.css b/webcit/static/webcit.css
index ed5efa299f849edc9c03bcbe82b901f6b49337b3..537a2ce7ff99b6c04ea9706a1c2a6b76a9c78727 100644 (file)
--- a/webcit/static/webcit.css
+++ b/webcit/static/webcit.css
@@ -1328,6 +1328,7 @@ li.event_unread span, a.event_read_title {
        height: 200px;
        border: 1px solid black;
        background-color: #ffff00;
+       overflow: hidden;
 }
 
 .stickynote_titlebar {