From e3e3fa93d5c140a45ac5a28fd485b136f3475c64 Mon Sep 17 00:00:00 2001 From: Dan Helfman Date: Fri, 6 Feb 2009 14:01:44 -0800 Subject: [PATCH] Got note dragging working. Now I just need to imlement drop! --- static/css/style.css | 22 ++++++++++ static/images/note_shadow.png | Bin 0 -> 158 bytes static/js/Editor.js | 79 ++++++++++++++++++++++++++++++++++ static/js/Wiki.js | 1 + view/Main_page.py | 7 +++ 5 files changed, 109 insertions(+) create mode 100644 static/images/note_shadow.png diff --git a/static/css/style.css b/static/css/style.css index 98e8389..3ae4f48 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -555,6 +555,28 @@ h1 { border-style: none; } +.note_holder_dragging { + position: absolute; + z-index: 2; +} + +.note_drop_target { + margin-bottom: 0.75em; +} + +.note_shadow { + background: url(/static/images/note_shadow.png) left top repeat-x; + height: 3px; + filter:alpha(opacity=50); + opacity: 0.5; +} + +.note_shadow_corner { + background-color: #fafafa; + height: 3px; + width: 4px; +} + .note_grabber { -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; diff --git a/static/images/note_shadow.png b/static/images/note_shadow.png new file mode 100644 index 0000000000000000000000000000000000000000..4315b872ccf77cfae538cac9ea4b01c0376fa4af GIT binary patch literal 158 zcmeAS@N?(olHy`uVBq!ia0vp^j6lrH!2~4l?*DWZNO2Z;L>4nJa0`PlBg3pY5H=O_M1#>qU?e*gKR>9Lb4^U5hc#~xw)x%B@E6*sfi`2DGKG8B^e4K8L0~Hp1uL^ yQ&jVS3Pn6!978y+Cr9ikP@LS;!!x;O4G)9p5~hiEIfsGL3=E#GelF{r5}E+4Lns{p literal 0 HcmV?d00001 diff --git a/static/js/Editor.js b/static/js/Editor.js index 94deddd..7d4d62f 100644 --- a/static/js/Editor.js +++ b/static/js/Editor.js @@ -128,6 +128,9 @@ Editor.prototype.create_div = function ( position_after ) { createDOM( "tr", {}, createDOM( "td", { "width": "100%" }, this.div ), this.grabber + ), + createDOM( "tr", { "id": "note_shadow_" + this.id, "class": "note_shadow undisplayed" }, + createDOM( "div", { "class": "note_shadow_corner" } ) ) ); @@ -238,6 +241,11 @@ Editor.prototype.connect_note_controls = function ( store_control_buttons ) { disconnectAll( this.hide_button ); connect( this.hide_button, "onclick", function ( event ) { signal( self, "hide_clicked", event ); } ); } + + if ( this.grabber ) { + disconnectAll( this.grabber ); + connect( this.grabber, "onmousedown", function ( event ) { self.pop_out( event ); } ); + } } Editor.prototype.claim_iframe = function ( position_after ) { @@ -675,6 +683,76 @@ Editor.prototype.reposition = function ( repeat ) { setTimeout( function () { self.reposition( true ); }, 50 ); } +Editor.prototype.pop_out = function ( event ) { + var size = { "h": 100 }; + this.drag_mouse_position = event.mouse().page; + + if ( getElementDimensions( this.div ).h > size.h ) { + if ( this.iframe ) + setElementDimensions( this.iframe, size ); + setElementDimensions( this.div, size ); + } + + // add a blank div to the area where the editor is popping out from. this lets the user easily + // see where the editor came from + var blank_div = createDOM( "div", { "class": "note_drop_target" } ); + insertSiblingNodesAfter( this.holder, blank_div ); + setElementDimensions( blank_div, getElementDimensions( this.holder ) ); + + // vertically reposition the editor so that at least some part of it is under the mouse cursor + var position = getElementPosition( this.div ); + var new_position = null; + setElementDimensions( this.holder, { "w": getElementDimensions( this.holder ).w } ); + + // if the click position is above the editor, then move the top of the editor up to it + if ( this.drag_mouse_position.y < position.y ) + new_position = { "y": this.drag_mouse_position.y }; + // if the click position is below the editor, then move the bottom of the editor down to it + else if ( this.drag_mouse_position.y > position.y + size.h ) + new_position = { "y": this.drag_mouse_position.y - size.h }; + + if ( new_position ) { + new_position.y -= getElementPosition( "center_content_area" ).y; + + if ( this.iframe ) + setElementPosition( this.iframe, new_position ); + setElementPosition( this.holder, new_position ); + } + + addElementClass( this.holder, "note_holder_dragging" ); + addElementClass( this.note_controls, "invisible" ); + addElementClass( this.grabber, "note_grabber_focused" ); + removeElementClass( getElement( "note_shadow_" + this.id ), "undisplayed" ); + signal( this, "grabber_pressed", event ); + + var self = this; + connect( window, "onmousemove", function ( event ) { self.drag( event ) } ); +} + +Editor.prototype.drag = function( event ) { + if ( !this.drag_mouse_position ) + return; + + var new_mouse_position = event.mouse().page; + var delta = { + "x": new_mouse_position.x - this.drag_mouse_position.x, + "y": new_mouse_position.y - this.drag_mouse_position.y + } + + if ( delta.x == 0 && delta.y == 0 ) + return; + + // move the editor based on how far the mouse has moved from its previous position + var position = getElementPosition( this.holder ); + var container_position = getElementPosition( "center_content_area" ); + setElementPosition( this.holder, { + "x": position.x + delta.x - container_position.x, + "y": position.y + delta.y - container_position.y + } ); + + this.drag_mouse_position = new_mouse_position; +} + Editor.prototype.key_pressed = function ( event ) { signal( this, "key_pressed", this, event ); @@ -1202,6 +1280,7 @@ Editor.prototype.shutdown = function( event ) { disconnectAll( this.changes_button ); disconnectAll( this.options_button ); disconnectAll( this.hide_button ); + disconnectAll( this.grabber ); disconnectAll( iframe ); } diff --git a/static/js/Wiki.js b/static/js/Wiki.js index ebb4058..3bfde6f 100644 --- a/static/js/Wiki.js +++ b/static/js/Wiki.js @@ -845,6 +845,7 @@ Wiki.prototype.create_editor = function ( id, note_text, deleted_from_id, revisi connect( editor, "options_clicked", function ( event ) { self.toggle_editor_options( event, editor ) } ); connect( editor, "focused", this, "editor_focused" ); connect( editor, "mouse_hovered", function ( target ) { self.editor_mouse_hovered( editor, target ) } ); + connect( editor, "grabber_pressed", function ( event ) { self.editor_focused( null ); } ); } connect( editor, "load_editor", this, "load_editor" ); diff --git a/view/Main_page.py b/view/Main_page.py index 7f4d58e..377fe40 100644 --- a/view/Main_page.py +++ b/view/Main_page.py @@ -111,6 +111,13 @@ class Main_page( Page ): class_ = u"note_grabber", ), ), + Tr( + Td( + Div( class_ = "note_shadow_corner" ), + id = u"note_shadow_%s" % note.object_id, + class_ = u"note_shadow undisplayed", + ), + ), id = u"note_holder_%s" % note.object_id, class_ = u"note_holder", ) for note in notes ]