Sticky notes can now be moved and resized by dragging

[citadel.git] / webcit / static / wclib.js

diff --git a/webcit/static/wclib.js b/webcit/static/wclib.js
index fca12b2fbe54a68e8db7cd9941e1fdf2ce1168b1..581903e09e0eae62ea912189dfbc044d66334c16 100644 (file)
--- a/webcit/static/wclib.js
+++ b/webcit/static/wclib.js
@@ -426,7 +426,7 @@ function CtdlResizeMsgListMouseDown(evt) {
 
 // These functions handle moving sticky notes around the screen by dragging them
 
-var msgnum_of_note_being_dragged = 0;
+var uid_of_note_being_dragged = 0;
 var saved_cursor_style = 'default';
 var note_was_dragged = 0;
 
@@ -437,15 +437,25 @@ function NotesDragMouseUp(evt) {
                document.releaseEvents(Event.MOUSEUP | Event.MOUSEMOVE);
        }
 
-       d = $('note' + msgnum_of_note_being_dragged);
+       d = $('note-' + uid_of_note_being_dragged);
        d.style.cursor = saved_cursor_style;
 
-       // Only submit the change if motion actually happened
+       // If any motion actually occurred, submit an ajax http call to record it to the server
        if (note_was_dragged > 0) {
-               alert('FIXME do ajax call to move position x=' + d.style.left + ' y=' + d.style.top);
+               p = 'note_uid=' + uid_of_note_being_dragged
+                       + '&left=' + d.style.left
+                       + '&top=' + d.style.top
+                       + '&r=' + CtdlRandomString();
+               new Ajax.Request(
+                       'ajax_update_note',
+                       {
+                               method: 'post',
+                               parameters: p
+                       }
+               );
        }
 
-       msgnum_of_note_being_dragged = 0;
+       uid_of_note_being_dragged = '';
        return true;
 }
 
@@ -456,7 +466,7 @@ function NotesDragMouseMove(evt) {
        y_increment = y - saved_y;
 
        // Move the div
-       d = $('note' + msgnum_of_note_being_dragged);
+       d = $('note-' + uid_of_note_being_dragged);
 
        divTop = parseInt(d.style.top);
        divLeft = parseInt(d.style.left);
@@ -471,7 +481,7 @@ function NotesDragMouseMove(evt) {
 }
 
 
-function NotesDragMouseDown(evt, msgnum) {
+function NotesDragMouseDown(evt, uid) {
        saved_x = (ns6 ? evt.clientX : event.clientX);
        saved_y = (ns6 ? evt.clientY : event.clientY);
        document.onmouseup = NotesDragMouseUp;
@@ -479,8 +489,8 @@ function NotesDragMouseDown(evt, msgnum) {
        if (document.layers) {
                document.captureEvents(Event.MOUSEUP | Event.MOUSEMOVE);
        }
-       msgnum_of_note_being_dragged = msgnum;
-       d = $('note' + msgnum_of_note_being_dragged);
+       uid_of_note_being_dragged = uid;
+       d = $('note-' + uid_of_note_being_dragged);
        saved_cursor_style = d.style.cursor;
        d.style.cursor = 'move';
        return false;           // disable the default action
@@ -488,6 +498,90 @@ function NotesDragMouseDown(evt, msgnum) {
 
 
 
+// These functions handle resizing sticky notes by dragging the resize handle
+
+var uid_of_note_being_resized = 0;
+var saved_cursor_style = 'default';
+var note_was_resized = 0;
+
+function NotesResizeMouseUp(evt) {
+       document.onmouseup = null;
+       document.onmousemove = null;
+       if (document.layers) {
+               document.releaseEvents(Event.MOUSEUP | Event.MOUSEMOVE);
+       }
+
+       d = $('note-' + uid_of_note_being_resized);
+       d.style.cursor = saved_cursor_style;
+
+       // If any motion actually occurred, submit an ajax http call to record it to the server
+       if (note_was_resized > 0) {
+               p = 'note_uid=' + uid_of_note_being_resized
+                       + '&width=' + d.style.width
+                       + '&height=' + d.style.height
+                       + '&r=' + CtdlRandomString();
+               new Ajax.Request(
+                       'ajax_update_note',
+                       {
+                               method: 'post',
+                               parameters: p
+                       }
+               );
+       }
+
+       uid_of_note_being_resized = '';
+       return true;
+}
+
+function NotesResizeMouseMove(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-' + uid_of_note_being_resized);
+
+       divTop = parseInt(d.style.height);
+       divLeft = parseInt(d.style.width);
+
+       d.style.height = (divTop + y_increment) + 'px';
+       d.style.width = (divLeft + x_increment) + 'px';
+
+       saved_x = x;
+       saved_y = y;
+       note_was_resized = 1;
+       return true;
+}
+
+
+function NotesResizeMouseDown(evt, uid) {
+       saved_x = (ns6 ? evt.clientX : event.clientX);
+       saved_y = (ns6 ? evt.clientY : event.clientY);
+       document.onmouseup = NotesResizeMouseUp;
+       document.onmousemove = NotesResizeMouseMove;
+       if (document.layers) {
+               document.captureEvents(Event.MOUSEUP | Event.MOUSEMOVE);
+       }
+       uid_of_note_being_resized = uid;
+       d = $('note-' + uid_of_note_being_resized);
+       saved_cursor_style = d.style.cursor;
+       d.style.cursor = 'move';
+       return false;           // disable the default action
+}
+
+
+
+
+
+
+
+
+
+
+
+
+