Got note dragging working. Now I just need to imlement drop!
This commit is contained in:
parent
e358b0c2b6
commit
e3e3fa93d5
|
@ -555,6 +555,28 @@ h1 {
|
||||||
border-style: none;
|
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 {
|
.note_grabber {
|
||||||
-moz-border-radius-topright: 5px;
|
-moz-border-radius-topright: 5px;
|
||||||
-moz-border-radius-bottomright: 5px;
|
-moz-border-radius-bottomright: 5px;
|
||||||
|
|
Binary file not shown.
After Width: | Height: | Size: 158 B |
|
@ -128,6 +128,9 @@ Editor.prototype.create_div = function ( position_after ) {
|
||||||
createDOM( "tr", {},
|
createDOM( "tr", {},
|
||||||
createDOM( "td", { "width": "100%" }, this.div ),
|
createDOM( "td", { "width": "100%" }, this.div ),
|
||||||
this.grabber
|
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 );
|
disconnectAll( this.hide_button );
|
||||||
connect( this.hide_button, "onclick", function ( event ) { signal( self, "hide_clicked", event ); } );
|
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 ) {
|
Editor.prototype.claim_iframe = function ( position_after ) {
|
||||||
|
@ -675,6 +683,76 @@ Editor.prototype.reposition = function ( repeat ) {
|
||||||
setTimeout( function () { self.reposition( true ); }, 50 );
|
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 ) {
|
Editor.prototype.key_pressed = function ( event ) {
|
||||||
signal( this, "key_pressed", this, event );
|
signal( this, "key_pressed", this, event );
|
||||||
|
|
||||||
|
@ -1202,6 +1280,7 @@ Editor.prototype.shutdown = function( event ) {
|
||||||
disconnectAll( this.changes_button );
|
disconnectAll( this.changes_button );
|
||||||
disconnectAll( this.options_button );
|
disconnectAll( this.options_button );
|
||||||
disconnectAll( this.hide_button );
|
disconnectAll( this.hide_button );
|
||||||
|
disconnectAll( this.grabber );
|
||||||
disconnectAll( iframe );
|
disconnectAll( iframe );
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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, "options_clicked", function ( event ) { self.toggle_editor_options( event, editor ) } );
|
||||||
connect( editor, "focused", this, "editor_focused" );
|
connect( editor, "focused", this, "editor_focused" );
|
||||||
connect( editor, "mouse_hovered", function ( target ) { self.editor_mouse_hovered( editor, target ) } );
|
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" );
|
connect( editor, "load_editor", this, "load_editor" );
|
||||||
|
|
|
@ -111,6 +111,13 @@ class Main_page( Page ):
|
||||||
class_ = u"note_grabber",
|
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,
|
id = u"note_holder_%s" % note.object_id,
|
||||||
class_ = u"note_holder",
|
class_ = u"note_holder",
|
||||||
) for note in notes ]
|
) for note in notes ]
|
||||||
|
|
Reference in New Issue