archive/phabricator
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Improve insert behavior for drag-and-drop and paste uploads

Browse Source 
Summary: In Safari, Firefox and Chrome, respect cursor position and selection ranges.

Test Plan: Dragged-and-dropped files into the middle of text, end of text, and a selected text range in Safari, Firefox and Chrome. Copy/pasted files into similar cases in Chrome. Got expected, normal behavior in all cases.

Reviewers: btrahan, vrana, jungejason

Reviewed By: btrahan

CC: aran

Maniphest Tasks: T1016

Differential Revision: https://secure.phabricator.com/D2155
This commit is contained in:
epriestley
2012-04-08 15:05:40 -07:00
parent 23fd936b47
commit 06367c4801
2 changed files with 57 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
webroot/rsrc/js/application/core/behavior-drag-and-drop-textarea.js
View File

@@ -8,31 +8,51 @@
JX.behavior('aphront-drag-and-drop-textarea', function(config) {
var target = JX.$(config.target);
function onupload(f) {
var v = target.value;
var insert = '{F' + f.id + '}';
// NOTE: This works well in Safari, Firefox and Chrome. We'll probably get
// less-good behavior on IE, but I think IE doesn't support drag-and-drop
// or paste uploads anyway.
// Set the insert position to the end of the text, so we get reasonable
// default behavior.
var s = v.length;
var e = v.length;
// If possible, refine the insert position based on the current selection.
if ('selectionStart' in target) {
s = target.selectionStart;
e = target.selectionEnd;
}
// Build the new text.
v = v.substring(0, s) + insert + v.substring(e, v.length);
// Replace the current value with the new text.
target.value = v;
// If possible, place the cursor after the inserted text.
if ('setSelectionRange' in target) {
target.focus();
target.setSelectionRange(s + insert.length, s + insert.length);
}
}
if (JX.PhabricatorDragAndDropFileUpload.isSupported()) {
var target = JX.$(config.target);
var drop = new JX.PhabricatorDragAndDropFileUpload(target)
.setActivatedClass(config.activatedClass)
.setURI(config.uri);
drop.listen('didUpload', function(f) {
// TODO: Implement some fancy cursor position stuff in Javelin so we
// can drop it in wherever the cursor is.
target.value = target.value + "\n{F" + f.id + "}";
});
drop.listen('didUpload', onupload);
drop.start();
}
if (JX.PhabricatorPasteFileUpload.isSupported()) {
var target = JX.$(config.target);
var paste = new JX.PhabricatorPasteFileUpload(target).setURI(config.uri);
paste.listen('didUpload', function(f) {
// TODO: Implement some fancy cursor position stuff in Javelin so we
// can drop it in wherever the cursor is.
target.value = target.value + '{F' + f.id + '}';
});
var paste = new JX.PhabricatorPasteFileUpload(target)
.setURI(config.uri);
paste.listen('didUpload', onupload);
paste.start();
}