Differential D20191 Diff 48219 webroot/rsrc/js/core/behavior-oncopy.js

Changeset View

Standalone View

webroot/rsrc/js/core/behavior-oncopy.js

	/**			/**
	* @provides javelin-behavior-phabricator-oncopy			* @provides javelin-behavior-phabricator-oncopy
	* @requires javelin-behavior			* @requires javelin-behavior
	* javelin-dom			* javelin-dom
	*/			*/

	/**
	* Tools like Paste and Differential don't normally respond to the clipboard
	* 'copy' operation well, because when a user copies text they'll get line
	* numbers and other metadata.
	*
	* To improve this behavior, applications can embed markers that delimit
	* metadata (left of the marker) from content (right of the marker). When
	* we get a copy event, we strip out all the metadata and just copy the
	* actual text.
	*/
	JX.behavior('phabricator-oncopy', function() {			JX.behavior('phabricator-oncopy', function() {
				var copy_root;
				var copy_mode;

	var zws = '\u200B'; // Unicode Zero-Width Space			function onstartselect(e) {
				var target = e.getTarget();

	JX.enableDispatch(document.body, 'copy');			var container;
	JX.Stratcom.listen(			try {
	['copy'],			// NOTE: For now, all elements with custom oncopy behavior are tables,
	null,			// so this tag selection will hit everything we need it to.
	function(e) {			container = JX.DOM.findAbove(target, 'table', 'intercept-copy');
				} catch (ex) {
	var selection;			container = null;
	var text;			}
	if (window.getSelection) {
	selection = window.getSelection();			var old_mode = copy_mode;
	text = selection.toString();			clear_selection_mode();

				if (!container) {
				return;
				}

				// If the potential selection is starting inside an inline comment,
				// don't do anything special.
				try {
				if (JX.DOM.findAbove(target, 'div', 'differential-inline-comment')) {
				return;
				}
				} catch (ex) {
				// Continue.
				}

				// Find the row and cell we're copying from. If we don't find anything,
				// don't do anything special.
				var row;
				var cell;
				try {
				// The target may be the cell we're after, particularly if you click
				// in the white area to the right of the text, towards the end of a line.
				if (JX.DOM.isType(target, 'td')) {
				cell = target;
	} else {			} else {
	selection = document.selection;			cell = JX.DOM.findAbove(target, 'td');
	text = selection.createRange().text;			}
				row = JX.DOM.findAbove(target, 'tr');
				} catch (ex) {
				return;
	}			}

	if (text.indexOf(zws) == -1) {			// If the row doesn't have enough nodes, bail out. Note that it's okay
	// If there's no marker in the text, just let it copy normally.			// to begin a selection in the whitespace on the opposite side of an inline
				amckinleyUnsubmitted Not Done Inline Actions "begin begin" amckinley: "begin begin"
				// comment. For example, if there's an inline comment on the right side of
				// a diff, it's okay to start selecting the left side of the diff by
				// clicking the corresponding empty space on the left side.
				if (row.childNodes.length < 4) {
	return;			return;
	}			}

	var result = [];			// If the selection's cell is in the "old" diff or the "new" diff, we'll
				// activate an appropriate copy mode.
				var mode;
				if (cell === row.childNodes[1]) {
				mode = 'copy-l';
				} else if ((row.childNodes.length >= 4) && (cell === row.childNodes[4])) {
				mode = 'copy-r';
				} else {
				return;
				}

				// We found a copy mode, so set it as the current active mode.
				copy_root = container;
				copy_mode = mode;

				// If the user makes a selection, then clicks again inside the same
				// selection, browsers retain the selection. This is because the user may
				// want to drag-and-drop the text to another window.

				// Handle special cases when the click is inside an existing selection.

				var ranges = get_selected_ranges();
				if (ranges.length) {
				// We'll have an existing selection if the user selects text on the right
				// side of a diff, then clicks the selection on the left side of the
				// diff, even if the second click is clicking part of the selection
				// range where the selection highlight is currently invisible because
				// of CSS rules.

				// This behavior looks and feels glitchy: an invisible selection range
				// suddenly pops into existence and there's a bunch of flicker. If we're
				// switching selection modes, clear the old selection to avoid this:
				// assume the user is not trying to drag-and-drop text which is not
				// visually selected.

	// Strip everything before the marker (and the marker itself) out of the			if (old_mode !== copy_mode) {
	// text. If a line doesn't have the marker, throw it away (the assumption			window.getSelection().removeAllRanges();
	// is that it's a line number or part of some other meta-text).			}
	var lines = text.split('\n');
	var pos;			// In the more mundane case, if the user selects some text on one side
	for (var ii = 0; ii < lines.length; ii++) {			// of a diff and then clicks that same selection in a normal way (in
	pos = lines[ii].indexOf(zws);			// the visible part of the highlighted text), we may either be altering
	if (pos == -1 && ii !== 0) {			// the selection range or may be initiating a text drag depending on how
				// long they hold the button for. Regardless of what we're doing, we're
				// still in a selection mode, so keep the visual hints active.

				JX.DOM.alterClass(copy_root, copy_mode, true);
				}

				// We've chosen a mode and saved it now, but we don't actually update to
				// apply any visual changes until the user actually starts making some
				// kind of selection.
				}

				// When the selection range changes, apply CSS classes if the selection is
				// nonempty. We don't want to make visual changes to the document immediately
				// when the user press the mouse button, since we aren't yet sure that
				// they are starting a selection: instead, wait for them to actually select
				// something.
				function onchangeselect() {
				if (!copy_mode) {
				return;
				}

				var ranges = get_selected_ranges();
				JX.DOM.alterClass(copy_root, copy_mode, !!ranges.length);
				}

				// When the user releases the mouse, get rid of the selection mode if we
				// don't have a selection.
				function onendselect(e) {
				if (!copy_mode) {
				return;
				}

				var ranges = get_selected_ranges();
				if (!ranges.length) {
				clear_selection_mode();
				}
				}

				function get_selected_ranges() {
				var ranges = [];

				if (!window.getSelection) {
				return ranges;
				}

				var selection = window.getSelection();
				for (var ii = 0; ii < selection.rangeCount; ii++) {
				var range = selection.getRangeAt(ii);
				if (range.collapsed) {
	continue;			continue;
	}			}
	result.push(lines[ii].substring(pos + 1));
				ranges.push(range);
	}			}
	result = result.join('\n');
				return ranges;
				}

				function clear_selection_mode() {
				if (!copy_root) {
				return;
				}

				JX.DOM.alterClass(copy_root, copy_mode, false);
				copy_root = null;
				copy_mode = null;
				}

				function oncopy(e) {
				// If we aren't in a special copy mode, just fall back to default
				// behavior.
				if (!copy_mode) {
				return;
				}

				var ranges = get_selected_ranges();
				if (!ranges.length) {
				return;
				}

				var text_nodes = [];
				for (var ii = 0; ii < ranges.length; ii++) {
				var range = ranges[ii];

				var fragment = range.cloneContents();
				if (!fragment.children.length) {
				continue;
				}

				// In Chrome and Firefox, because we've already applied "user-select"
				// CSS to everything we don't intend to copy, the text in the selection
				// range is correct, and the range will include only the correct text
				// nodes.

				// However, in Safari, "user-select" does not apply to clipboard
				// operations, so we get everything in the document between the beginning
				// and end of the selection, even if it isn't visibly selected.

				// Even in Chrome and Firefox, we can get partial empty nodes: for
				// example, where a "<tr>" is selectable but no content in the node is
				// selectable. (We have to leave the "<tr>" itself selectable because
				// of how Firefox applies "user-select" rules.)

				// The nodes we get here can also start and end more or less anywhere.

				// One saving grace is that we use "content: attr(data-n);" to render
				// the line numbers and no browsers copy this content, so we don't have
				// to worry about figuring out when text is line numbers.

				for (var jj = 0; jj < fragment.childNodes.length; jj++) {
				var node = fragment.childNodes[jj];
				if (JX.DOM.isType(node, 'tr')) {
				// This is an inline comment row, so we never want to copy any
				// content inside of it.
				if (JX.Stratcom.hasSigil(node, 'inline-row')) {
				continue;
				}

				// Assume anything else is a source code row. Keep only "<td>" cells
				// with the correct mode.
				for (var kk = 0; kk < node.childNodes.length; kk++) {
				var child = node.childNodes[kk];

				var node_mode = child.getAttribute('data-copy-mode');
				if (node_mode === copy_mode) {
				text_nodes.push(child);
				}
				}
				} else {
				// For anything else, assume this is a text fragment or part of
				// a table cell or something and should be included in the selection
				// range.
				text_nodes.push(node);
				}
				}

				var text = [];
				for (ii = 0; ii < text_nodes.length; ii++) {
				text.push(text_nodes[ii].textContent);
				}
				text = text.join('');

	var rawEvent = e.getRawEvent();			var rawEvent = e.getRawEvent();
	var clipboardData = 'clipboardData' in rawEvent ?			var data;
	rawEvent.clipboardData :			if ('clipboardData' in rawEvent) {
	window.clipboardData;			data = rawEvent.clipboardData;
	clipboardData.setData('Text', result);			} else {
				data = window.clipboardData;
				}
				data.setData('Text', text);

	e.prevent();			e.prevent();
	});			}
				}

				JX.enableDispatch(document.body, 'copy');
				JX.enableDispatch(window, 'selectionchange');

				JX.Stratcom.listen('mousedown', null, onstartselect);
				JX.Stratcom.listen('selectionchange', null, onchangeselect);
				JX.Stratcom.listen('mouseup', null, onendselect);

				JX.Stratcom.listen('copy', null, oncopy);
	});			});