behavior-oncopy.js
b2d63d009cd2stable

behavior-oncopy.js
View Options

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

			JX.behavior('phabricator-oncopy', function() {
			var copy_root;
			var copy_mode;

			function onstartselect(e) {
			var target = e.getTarget();

			var container;
			try {
			// NOTE: For now, all elements with custom oncopy behavior are tables,
			// so this tag selection will hit everything we need it to.
			container = JX.DOM.findAbove(target, 'table', 'intercept-copy');
			} catch (ex) {
			container = null;
			}

			var old_mode = copy_mode;
			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 {
			cell = JX.DOM.findAbove(target, 'td');
			}
			row = JX.DOM.findAbove(target, 'tr');
			} catch (ex) {
			return;
			}

			// If the row doesn't have enough nodes, bail out. Note that it's okay
			// to begin a selection in the whitespace on the opposite side of an inline
			// 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;
			}

			// 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.

			if (old_mode !== copy_mode) {
			window.getSelection().removeAllRanges();
			}

			// In the more mundane case, if the user selects some text on one side
			// of a diff and then clicks that same selection in a normal way (in
			// the visible part of the highlighted text), we may either be altering
			// 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;
			}

			ranges.push(range);
			}

			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 = [];
			for (var ii = 0; ii < ranges.length; ii++) {
			var range = ranges[ii];

			var fragment = range.cloneContents();
			if (!fragment.childNodes.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];
			text.push(extract_text(node));
			}
			}

			text = flatten_list(text);
			text = text.join('');

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

			e.prevent();
			}

			function extract_text(node) {
			var ii;
			var text = [];

			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')) {
			return null;
			}

			// This is a "Show More Context" row, so we never want to copy any
			// of the content inside.
			if (JX.Stratcom.hasSigil(node, 'context-target')) {
			return null;
			}

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

			return text;
			}

			if (JX.DOM.isType(node, 'td')) {
			var node_mode = node.getAttribute('data-copy-mode');
			if (node_mode !== copy_mode) {
			return;
			}

			// Otherwise, fall through and extract this node's text normally.
			}

			if (node.getAttribute) {
			var copy_text = node.getAttribute('data-copy-text');
			if (copy_text) {
			return copy_text;
			}
			}

			if (!node.childNodes \|\| !node.childNodes.length) {
			return node.textContent;
			}

			for (ii = 0; ii < node.childNodes.length; ii++) {
			var child = node.childNodes[ii];
			text.push(extract_text(child));
			}

			return text;
			}

			function flatten_list(list) {
			var stack = [list];
			var result = [];
			while (stack.length) {
			var next = stack.pop();
			if (JX.isArray(next)) {
			for (var ii = 0; ii < next.length; ii++) {
			stack.push(next[ii]);
			}
			} else if (next === null) {
			continue;
			} else if (next === undefined) {
			continue;
			} else {
			result.push(next);
			}
			}

			return result.reverse();
			}

			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);
			});

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

behavior-oncopy.jsView Options

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

behavior-oncopy.js
View Options