From ee58e2d7006e36ad9af81fe3f15d84027c0d6432 Mon Sep 17 00:00:00 2001 From: Rodrigo Fernandes Date: Sun, 9 Feb 2020 16:08:58 +0000 Subject: [PATCH] feature: Implement smart selection in CSS --- README.md | 3 - src/ui/css/diff2html.css | 39 +--------- src/ui/js/diff2html-ui-base.ts | 74 +++---------------- .../templates/pages/demo/content.handlebars | 2 +- 4 files changed, 16 insertions(+), 102 deletions(-) diff --git a/README.md b/README.md index c2097b8..b7eb053 100644 --- a/README.md +++ b/README.md @@ -308,7 +308,6 @@ draw(): void synchronisedScroll(): void fileListToggle(startVisible: boolean): void highlightCode(): void -smartSelection(): void ``` > Check out the [docs/demo.html](./docs/demo.html) for a demo example. @@ -319,8 +318,6 @@ smartSelection(): void - `highlight`: syntax highlight the code on the diff: `true` or `false`, default is `true` - `fileListToggle`: allow the file summary list to be toggled: `true` or `false`, default is `true` - `fileListStartVisible`: choose if the file summary list starts visible: `true` or `false`, default is `false` -- `smartSelection`: allow selection of the code without including line numbers of line prefixes: `true` or `false`, - default is `true` > NOTE: All the options from Diff2Html are also valid configurations in Diff2HtmlUI diff --git a/src/ui/css/diff2html.css b/src/ui/css/diff2html.css index bdfd56f..c501523 100644 --- a/src/ui/css/diff2html.css +++ b/src/ui/css/diff2html.css @@ -335,41 +335,8 @@ border: #3572b0 1px solid; } -/* - * Selection util. - */ - -.selecting-left .d2h-code-line, -.selecting-left .d2h-code-line *, -.selecting-right td.d2h-code-linenumber, -.selecting-right td.d2h-code-linenumber *, -.selecting-left .d2h-code-side-line, -.selecting-left .d2h-code-side-line *, -.selecting-right td.d2h-code-side-linenumber, -.selecting-right td.d2h-code-side-linenumber * { - -webkit-touch-callout: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; +.d2h-code-linenumber, +.d2h-code-side-linenumber, +.d2h-code-line-prefix { user-select: none; } - -.selecting-left .d2h-code-line::-moz-selection, -.selecting-left .d2h-code-line *::-moz-selection, -.selecting-right td.d2h-code-linenumber::-moz-selection, -.selecting-left .d2h-code-side-line::-moz-selection, -.selecting-left .d2h-code-side-line *::-moz-selection, -.selecting-right td.d2h-code-side-linenumber::-moz-selection, -.selecting-right td.d2h-code-side-linenumber *::-moz-selection { - background: transparent; -} - -.selecting-left .d2h-code-line::selection, -.selecting-left .d2h-code-line *::selection, -.selecting-right td.d2h-code-linenumber::selection, -.selecting-left .d2h-code-side-line::selection, -.selecting-left .d2h-code-side-line *::selection, -.selecting-right td.d2h-code-side-linenumber::selection, -.selecting-right td.d2h-code-side-linenumber *::selection { - background: transparent; -} diff --git a/src/ui/js/diff2html-ui-base.ts b/src/ui/js/diff2html-ui-base.ts index 20b10e8..e690e71 100644 --- a/src/ui/js/diff2html-ui-base.ts +++ b/src/ui/js/diff2html-ui-base.ts @@ -10,6 +10,10 @@ export interface Diff2HtmlUIConfig extends Diff2HtmlConfig { highlight?: boolean; fileListToggle?: boolean; fileListStartVisible?: boolean; + /** + * @deprecated since version 3.1.0 + * Smart selection is now enabled by default with vanilla CSS + */ smartSelection?: boolean; } @@ -19,6 +23,10 @@ export const defaultDiff2HtmlUIConfig = { highlight: true, fileListToggle: true, fileListStartVisible: false, + /** + * @deprecated since version 3.1.0 + * Smart selection is now enabled by default with vanilla CSS + */ smartSelection: true, }; @@ -44,7 +52,6 @@ export class Diff2HtmlUI { draw(): void { this.targetElement.innerHTML = this.diffHtml; - if (this.config.smartSelection) this.smartSelection(); if (this.config.synchronisedScroll) this.synchronisedScroll(); if (this.config.highlight) this.highlightCode(); if (this.config.fileListToggle) this.fileListToggle(this.config.fileListStartVisible); @@ -156,38 +163,11 @@ export class Diff2HtmlUI { }); } + /** + * @deprecated since version 3.1.0 + */ smartSelection(): void { - const body = document.getElementsByTagName('body')[0]; - const diffTable = body.getElementsByClassName('d2h-diff-table')[0]; - - diffTable.addEventListener('mousedown', event => { - if (event === null || !this.isElement(event.target)) return; - - const table = event.target.closest('.d2h-diff-table'); - if (table !== null) { - if (event.target.closest('.d2h-code-line,.d2h-code-side-line') !== null) { - table.classList.remove('selecting-left'); - table.classList.add('selecting-right'); - this.currentSelectionColumnId = 1; - } else if (event.target.closest('.d2h-code-linenumber,.d2h-code-side-linenumber') !== null) { - table.classList.remove('selecting-right'); - table.classList.add('selecting-left'); - this.currentSelectionColumnId = 0; - } - } - }); - - diffTable.addEventListener('copy', event => { - if (!this.isClipboardEvent(event)) return; - - const clipboardData = event.clipboardData; - const text = this.getSelectedText(); - - if (clipboardData === null || text === undefined) return; - - clipboardData.setData('text', text); - event.preventDefault(); - }); + console.warn('Smart selection is now enabled by default with CSS. No need to call this method anymore.'); } private instanceOfIHighlightResult(object: IHighlightResult | IAutoHighlightResult): object is IHighlightResult { @@ -206,37 +186,7 @@ export class Diff2HtmlUI { return hashTag; } - private getSelectedText(): string | undefined { - const sel = window.getSelection(); - - if (sel === null) return; - - const range = sel.getRangeAt(0); - const doc = range.cloneContents(); - const nodes = doc.querySelectorAll('tr'); - const idx = this.currentSelectionColumnId; - - let text = ''; - if (nodes.length === 0) { - text = doc.textContent || ''; - } else { - nodes.forEach((tr, i) => { - const td = tr.cells[tr.cells.length === 1 ? 0 : idx]; - - if (td === undefined || td.textContent === null) return; - - text += (i ? '\n' : '') + td.textContent.replace(/\r\n|\r|\n/g, ''); - }); - } - - return text; - } - private isElement(arg?: unknown): arg is Element { return arg !== null && (arg as Element)?.classList !== undefined; } - - private isClipboardEvent(arg?: unknown): arg is ClipboardEvent { - return arg !== null && (arg as ClipboardEvent)?.clipboardData !== undefined; - } } diff --git a/website/templates/pages/demo/content.handlebars b/website/templates/pages/demo/content.handlebars index 737e2a1..fac52fd 100644 --- a/website/templates/pages/demo/content.handlebars +++ b/website/templates/pages/demo/content.handlebars @@ -112,7 +112,7 @@

Just copy the url from the page, which should contain all the customizations and reference for the diff you introduced.

ex: https://diff2html.xyz/demo.html?matching=none&matchWordsThreshold=0.25&maxLineLengthHighlight=10000&diffStyle=word&renderNothingWhenEmpty=0&matchingMaxComparisons=2500&maxLineSizeInBlockForComparison=200&outputFormat=line-by-line&drawFileList=1&synchronisedScroll=1&highlight=1&fileListToggle=1&fileListStartVisible=0&smartSelection=1&diff=https://github.com/rtfpessoa/diff2html/pull/106 + href="demo.html?matching=none&matchWordsThreshold=0.25&maxLineLengthHighlight=10000&diffStyle=word&renderNothingWhenEmpty=0&matchingMaxComparisons=2500&maxLineSizeInBlockForComparison=200&outputFormat=line-by-line&drawFileList=1&synchronisedScroll=1&highlight=1&fileListToggle=1&fileListStartVisible=0&diff=https://github.com/rtfpessoa/diff2html/pull/106">https://diff2html.xyz/demo.html?matching=none&matchWordsThreshold=0.25&maxLineLengthHighlight=10000&diffStyle=word&renderNothingWhenEmpty=0&matchingMaxComparisons=2500&maxLineSizeInBlockForComparison=200&outputFormat=line-by-line&drawFileList=1&synchronisedScroll=1&highlight=1&fileListToggle=1&fileListStartVisible=0&diff=https://github.com/rtfpessoa/diff2html/pull/106