From 56e490745d6552e1ac233b5637b83642d9f18cf5 Mon Sep 17 00:00:00 2001 From: Jamie Peabody Date: Sun, 28 Nov 2021 14:14:09 +0000 Subject: [PATCH] refactor(es6): Refactoring for es6 mostly var => const/let changes --- CONTRIBUTING.md | 5 + examples/app.js | 1 - src/diff-view.js | 1099 ++++++++++++++++++++++++---------------------- src/mergely.css | 73 +-- src/mergely.js | 6 +- 5 files changed, 609 insertions(+), 575 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index ab78fef..0e0b0d3 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -9,3 +9,8 @@ npm run test ## Conventional commits Mergely is using [conventional commits](https://www.conventionalcommits.org/en/v1.0.0). + +To create a commit, run: +```bash +npx commit +``` diff --git a/examples/app.js b/examples/app.js index 464c2de..3656ef4 100644 --- a/examples/app.js +++ b/examples/app.js @@ -19,7 +19,6 @@ $(document).ready(function () { cmsettings: { readOnly: false }, - _debug: '', lhs: function(setValue) { setValue(lhs); }, diff --git a/src/diff-view.js b/src/diff-view.js index 114219a..719ab90 100644 --- a/src/diff-view.js +++ b/src/diff-view.js @@ -3,9 +3,31 @@ const diff = require('./diff'); const DiffParser = require('./diff-parser'); const LCS = require('./lcs'); +/** +CHANGES: + +BREAKING: +Added `.mergely-editor` to the DOM to scope all the CSS changes. +CSS now prefixes `.mergely-editor`. +Current active change gutter line number style changed from `.CodeMirror-linenumber` to `.CodeMirror-gutter-background`. + +FEATURE: +Gutter click now scrolls to any line. +FIX: +Fixed issue where canvas markup was not rendered when `viewport` enabled. +*/ +const MERGELY_ICON = 'data:image/png;base64,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'; + +const NOTICES = [ + 'lgpl-separate-notice', + 'gpl-separate-notice', + 'mpl-separate-notice', + 'commercial' +]; + function CodeMirrorDiffView(el, options, { jQuery, CodeMirror }) { CodeMirror.defineExtension('centerOnCursor', function() { - var coords = this.cursorCoords(null, 'local'); + const coords = this.cursorCoords(null, 'local'); this.scrollTo(null, (coords.top + coords.bottom) / 2 - (this.getScrollerElement().clientHeight / 2)); }); @@ -36,7 +58,7 @@ CodeMirrorDiffView.prototype.init = function(el, options) { ca:'#4b73ff',cc:'#434343',cd:'#ff4f4f'}, // color for currently active difference (bright color) bgcolor: '#eee', vpcolor: 'rgba(0, 0, 200, 0.5)', - license: '', + license: 'lgpl', width: 'auto', height: 'auto', cmsettings: { @@ -147,7 +169,7 @@ CodeMirrorDiffView.prototype.rhs = function(text) { }; CodeMirrorDiffView.prototype.update = function() { - this._changing(this.id + '-lhs', this.id + '-rhs'); + this._changing(); }; CodeMirrorDiffView.prototype.unmarkup = function() { @@ -156,14 +178,14 @@ CodeMirrorDiffView.prototype.unmarkup = function() { CodeMirrorDiffView.prototype.scrollToDiff = function(direction) { if (!this.changes.length) return; - if (direction == 'next') { + if (direction === 'next') { if (this._current_diff == this.changes.length - 1) { this._current_diff = 0; } else { this._current_diff = Math.min(++this._current_diff, this.changes.length - 1); } } - else if (direction == 'prev') { + else if (direction === 'prev') { if (this._current_diff == 0) { this._current_diff = this.changes.length - 1; } else { @@ -171,7 +193,7 @@ CodeMirrorDiffView.prototype.scrollToDiff = function(direction) { } } this._scroll_to_change(this.changes[this._current_diff]); - this._changed(this.id + '-lhs', this.id + '-rhs'); + this._changed(); }; CodeMirrorDiffView.prototype.mergeCurrentChange = function(side) { @@ -185,16 +207,9 @@ CodeMirrorDiffView.prototype.mergeCurrentChange = function(side) { }; CodeMirrorDiffView.prototype.scrollTo = function(side, num) { - var le = this.editor[this.id + '-lhs']; - var re = this.editor[this.id + '-rhs']; - if (side == 'lhs') { - le.setCursor(num); - le.centerOnCursor(); - } - else { - re.setCursor(num); - re.centerOnCursor(); - } + const ed = this.editor[`${this.id}-${side}`]; + ed.setCursor(num); + ed.centerOnCursor(); }; CodeMirrorDiffView.prototype._setOptions = function(opts) { @@ -210,7 +225,7 @@ CodeMirrorDiffView.prototype._setOptions = function(opts) { this.element.find('.mergely-canvas')); } else { - var target = this.element.find('.mergely-margin').last(); + const target = this.element.find('.mergely-margin').last(); target.appendTo(target.parent()); } } @@ -223,19 +238,15 @@ CodeMirrorDiffView.prototype._setOptions = function(opts) { this.element.find('.mergely-margin').css({display: 'none'}); } } - var le, re; - if (this.settings.hasOwnProperty('wrap_lines')) { - if (this.editor) { - le = this.editor[this.id + '-lhs']; - re = this.editor[this.id + '-rhs']; + // if options set after init + if (this.editor) { + const le = this.editor[`${this.id}-lhs`]; + const re = this.editor[`${this.id}-rhs`]; + if (this.settings.hasOwnProperty('wrap_lines')) { le.setOption('lineWrapping', this.settings.wrap_lines); re.setOption('lineWrapping', this.settings.wrap_lines); } - } - if (this.settings.hasOwnProperty('line_numbers')) { - if (this.editor) { - le = this.editor[this.id + '-lhs']; - re = this.editor[this.id + '-rhs']; + if (this.settings.hasOwnProperty('line_numbers')) { le.setOption('lineNumbers', this.settings.line_numbers); re.setOption('lineNumbers', this.settings.line_numbers); } @@ -254,26 +265,33 @@ CodeMirrorDiffView.prototype.options = function(opts) { }; CodeMirrorDiffView.prototype.swap = function() { - if (this.lhs_cmsettings.readOnly || this.rhs_cmsettings.readOnly) return; - var le = this.editor[this.id + '-lhs']; - var re = this.editor[this.id + '-rhs']; - var tmp = re.getValue(); + if (this.lhs_cmsettings.readOnly || this.rhs_cmsettings.readOnly) { + return; + } + const le = this.editor[`${this.id}-lhs`]; + const re = this.editor[`${this.id}-rhs`]; re.setValue(le.getValue()); - le.setValue(tmp); + le.setValue(re.getValue()); }; CodeMirrorDiffView.prototype.merge = function(side) { - var le = this.editor[this.id + '-lhs']; - var re = this.editor[this.id + '-rhs']; - if (side == 'lhs' && !this.lhs_cmsettings.readOnly) le.setValue(re.getValue()); - else if (!this.rhs_cmsettings.readOnly) re.setValue(le.getValue()); + const le = this.editor[`${this.id}-lhs`]; + const re = this.editor[`${this.id}-rhs`]; + if (side == 'lhs' && !this.lhs_cmsettings.readOnly) { + le.setValue(re.getValue()); + } else if (!this.rhs_cmsettings.readOnly) { + re.setValue(le.getValue()); + } }; CodeMirrorDiffView.prototype.summary = function() { + const le = this.editor[`${this.id}-lhs`]; + const re = this.editor[`${this.id}-rhs`]; + return { numChanges: this.changes.length, - lhsLength: this.editor[this.id + '-lhs'].getValue().length, - rhsLength: this.editor[this.id + '-rhs'].getValue().length, + lhsLength: le.getValue().length, + rhsLength: re.getValue().length, c: this.changes.filter(function (a) { return a.op === 'c'; }).length, @@ -287,42 +305,41 @@ CodeMirrorDiffView.prototype.summary = function() { }; CodeMirrorDiffView.prototype.get = function(side) { - var ed = this.editor[this.id + '-' + side]; - var t = ed.getValue(); - if (t == undefined) return ''; - return t; + const ed = this.editor[`${this.id}-${side}`]; + const value = ed.getValue(); + if (value === undefined) { + return ''; + } + return value; }; CodeMirrorDiffView.prototype.clear = function(side) { if (side == 'lhs' && this.lhs_cmsettings.readOnly) return; if (side == 'rhs' && this.rhs_cmsettings.readOnly) return; - var ed = this.editor[this.id + '-' + side]; + const ed = this.editor[`${this.id}-${side}`]; ed.setValue(''); delete this._current_diff; }; CodeMirrorDiffView.prototype.cm = function(side) { - return this.editor[this.id + '-' + side]; + return this.editor[`${this.id}-${side}`]; }; CodeMirrorDiffView.prototype.search = function(side, query, direction) { - var le = this.editor[this.id + '-lhs']; - var re = this.editor[this.id + '-rhs']; - var editor; - if (side == 'lhs') editor = le; - else editor = re; - direction = (direction == 'prev') ? 'findPrevious' : 'findNext'; + const editor = this.editor[`${this.id}-${side}`]; + const searchDirection = (direction === 'prev') + ? 'findPrevious' : 'findNext'; + const start = { line: 0, ch: 0 }; if ((editor.getSelection().length == 0) || (this.prev_query[side] != query)) { - this.cursor[this.id] = editor.getSearchCursor(query, { line: 0, ch: 0 }, false); + this.cursor[this.id] = editor.getSearchCursor(query, start, false); this.prev_query[side] = query; } - var cursor = this.cursor[this.id]; - - if (cursor[direction]()) { + const cursor = this.cursor[this.id]; + if (cursor[searchDirection]()) { editor.setSelection(cursor.from(), cursor.to()); } else { - cursor = editor.getSearchCursor(query, { line: 0, ch: 0 }, false); + cursor = editor.getSearchCursor(query, start, false); } }; @@ -330,15 +347,17 @@ CodeMirrorDiffView.prototype.resize = function() { // recalculate line height as it may be zoomed this.em_height = null; this.settings.resize(); - this._changing(this.id + '-lhs', this.id + '-rhs'); + this._changing(); this._set_top_offset(this.id + '-lhs'); }; CodeMirrorDiffView.prototype.diff = function() { - var lhs = this.editor[this.id + '-lhs'].getValue(); - var rhs = this.editor[this.id + '-rhs'].getValue(); - var d = new diff(lhs, rhs, this.settings); - return d.normal_form(); + const le = this.editor[`${this.id}-lhs`]; + const re = this.editor[`${this.id}-rhs`]; + const lhs = le.getValue(); + const rhs = re.getValue(); + const comparison = new diff(lhs, rhs, this.settings); + return comparison.normal_form(); }; CodeMirrorDiffView.prototype.bind = function(el) { @@ -346,6 +365,8 @@ CodeMirrorDiffView.prototype.bind = function(el) { this.trace('init', 'bind'); this.element.hide(); this.id = jQuery(el).attr('id'); + this.lhsId = `${this.id}-lhs`; + this.rhsId = `${this.id}-rhs`; try { // ensure the id is valid for jQuery jQuery(`#${this.id}`); @@ -355,155 +376,154 @@ CodeMirrorDiffView.prototype.bind = function(el) { } this.changed_timeout = null; this.chfns = {}; - this.chfns[this.id + '-lhs'] = []; - this.chfns[this.id + '-rhs'] = []; + this.chfns[this.lhsId] = []; + this.chfns[this.rhsId] = []; this.prev_query = []; this.cursor = []; this._skipscroll = {}; this.change_exp = new RegExp(/(\d+(?:,\d+)?)([acd])(\d+(?:,\d+)?)/); - var merge_lhs_button; - var merge_rhs_button; - if (jQuery.button != undefined) { + if (jQuery.button !== undefined) { //jquery ui - merge_lhs_button = ''; - merge_rhs_button = ''; + this.merge_lhs_button = document.createElement('button'); + this.merge_lhs_button.title = 'Merge left'; + this.merge_rhs_button = document.createElement('button'); + this.merge_rhs_button.title = 'Merge right'; } else { // homebrew - var style = 'opacity:0.6;height:16px;background-color:#bfbfbf;cursor:pointer;text-align:center;color:#eee;border:1px solid #848484;margin-right:-15px;margin-top:-2px;'; - merge_lhs_button = '
<
'; - merge_rhs_button = '
>
'; + const style = 'opacity:0.6;height:16px;background-color:#bfbfbf;cursor:pointer;text-align:center;color:#eee;border:1px solid #848484;margin-right:-15px;margin-top:-2px;'; + const lhsTemplate = `
<
`; + const rhsTemplate = `
>
`; + this.merge_lhs_button = htmlToElement(lhsTemplate); + this.merge_rhs_button = htmlToElement(rhsTemplate); } - this.merge_rhs_button = jQuery(merge_rhs_button); - this.merge_lhs_button = jQuery(merge_lhs_button); // create the textarea and canvas elements - var height = '10px'; - var width = '10px'; + const height = '10px'; + const width = '10px'; - var splash = jQuery('
'); - var canvasLhs = jQuery(`
`); - canvasLhs.find('#lhs-margin').attr('id', `${this.id}-lhs-margin`); - var editorLhs = jQuery(`
`); - editorLhs.eq(0).attr('id', `${this.id}-editor-lhs`); - editorLhs.find('#text-lhs').attr('id', `${this.id}-lhs`); - var canvasMid = jQuery(`
`); - canvasMid.find('#mergely-canvas').attr('id', `${this.id}-mergely-canvas`); - canvasMid.find('#lhs-rhs-canvas').attr('id', `${this.id}-lhs-${this.id}-rhs-canvas`); + this.element.get(0).className += ' mergely-editor'; + const canvasLhs = htmlToElement(getMarginTemplate({ + id: this.id, + side: 'lhs' + })); + const canvasRhs = htmlToElement(getMarginTemplate({ + id: this.id, + side: 'rhs' + })); + const editorLhs = htmlToElement(getEditorTemplate({ + id: this.id, + side: 'lhs' + })); + const editorRhs = htmlToElement(getEditorTemplate({ + id: this.id, + side: 'rhs' + })); + const canvasMid = htmlToElement(getCenterCanvasTemplate({ + id: this.id + })); - this.element.append(splash); this.element.append(canvasLhs); this.element.append(editorLhs); this.element.append(canvasMid); - var canvasRhs = jQuery(`
`); - canvasRhs.find('#rhs-margin').attr('id', `${this.id}-rhs-margin`); if (this.settings.rhs_margin == 'left') { this.element.append(canvasRhs); } - var editorRhs = jQuery(`
`); - editorRhs.eq(0).attr('id', `${this.id}-editor-rhs`); - editorRhs.find('#text-rhs').attr('id', `${this.id}-rhs`); this.element.append(editorRhs); if (this.settings.rhs_margin != 'left') { this.element.append(canvasRhs); } if (!this.settings.sidebar) { - this.element.find('.mergely-margin').css({display: 'none'}); + this.element.find('.mergely-margin').css({ display: 'none' }); } - if (['lgpl-separate-notice', 'gpl-separate-notice', 'mpl-separate-notice', 'commercial'].indexOf(this.settings.license) < 0) { - const _lic = { + if (NOTICES.indexOf(this.settings.license) < 0) { + const noticeTypes = { 'lgpl': 'GNU LGPL v3.0', 'gpl': 'GNU GPL v3.0', 'mpl': 'MPL 1.1' }; - var lic = _lic[this.settings.license]; - if (!lic) { - lic = _lic['lgpl']; + const notice = noticeTypes[this.settings.license]; + if (!notice) { + notice = noticeTypes.lgpl; } - - const parenth = this.element.parent().height(); - const parentw = this.element.parent().width(); - const icon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG4AAABuCAIAAABJObGsAAAAFXRFWHRDcmVhdGlvbiBUaW1lAAfbCw8UOxvjZ6kDAAAAB3RJTUUH2wsPFQESa9FGmQAAAAlwSFlzAAAOwwAADsMBx2+oZAAAFDBJREFUeNrtXQtQVFeavk2DvF/yZlUetg+EJIqPIvgIEo1xIxArcWqiMZWqsVK1Mbprand0NVuVrY1WnN2NW8ZNzWasqawmupPAqMRdFDdG81BGGYIjLKiooA4QQUF5N4/ezz7w9+He233PbRoaCX9R1Onbp/9z/u/8/3/+87wGi8UijZMryMPdFRg75OnuCtglmEtLS8tDK+FjkJUCAwMNBoO7q6ZOowLKurq68vLySitVVFRcu3atubm5tbVV6XyAY0BAQEhIyLRp05KSkmZaKTk5OSYmxt1CSAY3+sqSkpJjx47l5+eXlpYOkdXs2bOzs7NzcnJSU1PdJc4jOxpJMpvNhYWFGzdunDx58nCIA7ZgjiJQ0AiLNkJaCa93/Phx6GBBQQHzfQ7I09MTbtF7gCZMmICHgKZrgMChp6fHMRNwWLlyJfR01apV8LAjIOOwQwnJP/roo507d967d89enrCwMJPJFB4eHmYloOC4b0GdgeY9KzU2NlZVVTlmvmPHjjfffBOt8rhC2dfXd+jQoXfeeaempkalYIMhNjaW9RsRERFDLKuhoYH1WrW1taoSxcXFvffee2vXrvXwGK74b7igPHHixLZt2y5duiR7bjQa4+PjGYLDYXfwJAzT6urq3t5e2bdPPfXU+++///zzzw+HyK6Hsri4eOvWradPn5Y9R7ySnp6OIMbHx2c4JJFRZ2cngqpz584h0pJ9lZmZuXv37nnz5rm2RFdCCePasmXLF198IeMZGhqK2qekpIx8dI2alJWVoV2bmpoGiW0wrFmzZs+ePXAyrirLZVBeuHBh9erVQJN/6Ofnt2TJkvnz58OuRwQ6dYKlX7x48Ztvvmlvb+efA8cjR44sWLDAJaW4BsrPPvtsw4YNsCl64uXllZaWtnDhwpExZxFC9b7//vuioqLu7m56iOrt379/3bp1Q+c/VCjRTSPUgC+nJ+giMfbIyMhATOM+3OwSoqgzZ85gfIWa00M49127dg2xcx8SlOgu0Z5ffvklPfH19X355ZenTp3qbsQ06Pr167m5uR0dHfQkKysLtjWUoMJ5KG/cuIFhb3l5OT1BjP3KK68gJHY3UEKEqP7w4cOI8OlJcnJyfn5+YmKicwydhPLrr79GD8iPMRDlvPTSS6PHM4oQvGdeXh5iJnoCPUAEsnTpUie4OQMlcFyxYgXvvBEwLl++fNTOJDogiH/q1CmEn/QEHebJkyedQFM3lLBrRA+kj56envAyGEW4G5MhEUZl8Pg0RQLdRGyn19L1QYl+5umnnyb/6O/vD+c4adIkd0PhArpz5w5cZ1tbG/sIv3n+/HldvZCO7h/RA/prwhH6OGZwBEEQiAOh2EeICWH5gEmTdEC5fft2Pu6BXY8ZHBlBHAhFHyEsQmbxn4saOGKuV199lT6in3nuuefcLfuwUGFhId8Lffrpp4JjISEo4YOfeeYZGhci7lm7du3j2F+LEAA5dOgQRUgI786ePSsyTtc28Nra2tWrVxOOiMMRP45VHCXrpBEEhJjsIwRXTtOokjaUW7ZsIUYYF8I3P15xuBMEASEmhGUf2eSh5q80DLy4uBi6zfJgtA+vMfrH164ijNPRQ7BOHKoKL+d4tlhDK7du3UpYz549+6eDIwjCQmSWBgiAwnF+R7szTpw4QesKGE5lZGQ4yEyIswT+91lJss68Go1GDysZBkjiluCRDcNQs9mM8QZ8Ew1JUainldgSLhL8z5UVYAQmKBHcwAppe9xQGdTKHjdGEPny5cuMA6AAIA7WhewaOMRLTU2lda7Fixc/++yzDgRgqOE/E4OBgsEDSYKhEQYPfn5+EInNDDIE29vbMYhqamq6fft2XV1dfX09zz84ODg2NjYqKiomJgZpMIEjk0HAKoByGTcMau/fv3/r1i34uAcPHvDcUDSCx7i4uHArgRswxUMHgH711VfffvstS2N8XFJSYm9a0y6UiKfWr1/P0pB/8+bNst6GwcdUAAIwbQJ2wOXu3btKUFDjlJSUmTNnYoQLvcCv8BNIi7CjoqJCEqDo6GgIk5CQEBQUBG60yMFYATU0xtWrV2/evCnCDQ0zZ84ck8mEBGseVYzAee/evbSScfDgQT6+1oayq6trxowZtH4NrU5LS+MzMO0jAaACVVVV/FyRA4IAkZGRKKKyslIGtyCgixYtwn80MOSHBaD9AF9RUZFMB0UITZKZmYlIGRZD5iIjcIZpszQ0+sqVK6q7E9Sh3LNnz9tvv83SoaGhb731Fr/OxQwT2geFggfRRNDoE+A7JcXoG/Dg0v86yDYhbFLQk896R0xBAn995g5zw62uxludtVcflJ6y9A4qBe2BbgHCw5bhhZRN4m+a5zt5lk+0ySfG5BkY1tPW3Nt6v7P2WtuNkraq4t7OVhm3uXPnRkREqKIJpdm3bx+tWX7wwQeqsZEKlMAIRkTTaIhXn3jiCfqW+XW0f1lZ2ZkzZ+y2dnBk8FPLg2cvD5y12DsyAdEEfvmnzckdd+S2bPQPCVv08/DFryCnZMdhdT+423j6k7unftNZV+W42YBa+NLXIp97w/cvZtrLg0ZqKjry48lft/zft/QwKSlp4cKF9tBE55OXl8fScFAwAuWkkQqUhw8fxriQpeHs33jjDd4lQyVh1zdu3MjNze3Hwi/YL/5J/4TZPrHTvUJj8DdhYqx3RJwSlys7s5qLj3OFe0Qu+8XkV3d5BoVLImTpqzv6L7cP/YOlx6wCYsDEya/tDs9Y7+Elujfo/rncmt9uMd+7Q2hifAykWKgwqGSL5eOPP6bdCRhZIoaXV0BZwLFjxyidnp6uZAofTFNt0/7ui4npLwtWHRBTGloz9W8O+JvmC/6WQR+z+pcBM9Ov/NNf9na08N+ELshJ+Ktfe4VE6+AmSah5YNLCyn9c0V5zGR/R+yFUQCwJjZMt3AMEQEGKCYiUUMo1GY6voKCApcEO/liGI7QSHoD1uWh/cRwlqzdkicjlG1L+9Y/6cBygwKRFM3YcB6z9lfQJMG35bPrfH9WLIyPYUNJ7Z30nJbGPcFnwifBgSmMFFIQvIFL2EHIowYv2P8bHxyuH24ASnWZ/ururt11jsyRP6FLgGU1/+7uEN3/j4e3nhOT9aCYvic7660e19/KZvj0/bMlap1lJjzxDaOKm31LbIJzq6OhQQgkoAAhLs8V0DSh560YMqFo23yDdTXWSMAXOWvLk3vKwhT8biuSMYlf/Eo0xbdvvg55wZnVQRgHT0yKWvsbSxcXFra2t6LWVaPKA8ECpQ5mfn88S8A72oOTJ3KwjMPSOSuDd5VAI5pzyqwshqStdwg0UtqR/fheK0tzcrLoUAUCo5yCgiAZBiVER4m2WxnBNZJGou0l3jO0q8p2S7EJuQSkZcD4s3djYyLayy/IAENr5BqAAF//tIChFrFuyjhAo3a1HK0czGYyePtH9816ImpXbXJWwyGx8EJS80tqDEuEr22fPyI1a6XJCb84SMHDVTlwGi8zGbVAi/qTzMwhTHewPH5NaKVm7cpbgt2XJCLDQpijAxW8ptkHJb6QymUyqjOB0oZUYDBCaY0krLb39uzMApYPDLDw4PGi20U5lZSWlaZHIHvn5+bFpmJ7W+87V29x4u/6/97ZWnu9qqEGEHDLvhegXNkvOrr71tjXX5X/QUv5NZ32Vd/TU4CeXYVwkPoIcgFJoZosHB6AtW7bMEZSON/ZBK319fRmUfeYOSSehxrcObP3xf/6dhtIYBT+4dOph+dnpW3/vBI73z+dVf7yxu/nHAW5/BqZ4mPyrIsTwOirWIwQlDw4Pms3A+flXzT2StBqnF8q+rvaru3Lq8/copySaio4AUL04Nv3h6LV//hnhSNRefak2731drMjAxaHkQbNBSYvo7FycPUZwl8hAA0q9UN7+dHtzSYG9b++e/A9d3DrrrlXtWSdZ1Hf23Pvuv3RCKaSVAIe2FvF7M21QIgKgrJo7BjgoOyVxsljuffc7/kF0dDQfDyhnMx1T4+n/hJrTRy8r0ceuuqq+7i4noITNEVhKAjikagSaRL4SMRQGniyt6yygLq3s6+nig6eMjIyYmJi2tjYK0MwNt3RB2cTNfiYlJSUnJ2OUQtM2lr7e7vt/9o4S3SYp6Ct5iNihdaZ5/VrZ0tJCEakmlEaj0UmtlGzKHhwcjKgiKioqMjIyISGBPeztbNWlR3z8ABwnTZqEgV1KSgo95HVWG0oxX8lDZLFepcDS/VDyB4v1nVC19Am6GMlqGpROTExEe8CU2K0DtkzC8kicTcBRIEbBMAw80UjKDGJQ2gxcEEoeOhUo+XGhCC/JqYMBkJn8ET8rCqt0AsrQ0FBwM1qJr1uvPq0U1QkeIjmUQyLxuJrLCYHZ0rNMeEufDq0k78YaRoWbvm5HR9FK6oeSj35oklyYxIco2jl1aSUZhL3NdRaLjh3QfLejXCnjiYeIoFOBsqtLR0u6nvSphpZv0eN8yMA1dz3yEMmh5O/v0Q2lUwbO0yCTFI5IZEipH+7Vo5XighBEAI0myD3oEXpSWT7hCojWgM9pr5Q+Yd8v2bHfQd2mHq00ePR3g/wRYlWiygM0EsrW7VBEgi5J57koV26mVt0uYD+3Ret7PVAaPUV+yy5BYWk+jLNBSUvePT09mvfXDK6CS7udoXWjkqzbdBZKB/OV/NU8/D4BG5QYeFHawV0zQyIB0A0GPfGZVmaZorkkMw8OD5qtKvyqxXBBKSKPl/YAwVZ7z/7JC3g31YUtg6eXODdpwFc6WJCQgcODpg4lf0palWydht55b06P1IU36hBeM7PBU0fDCGolD446lMnJtmXlqqoqEaaSXnu0093zvbk+KBVKJ2senQ0jBCUPDg+aDYiYmBg6EAAdbmhoECtf59BTS4t1GbhM6diWCr5hPFytlYCFDBxw8Zc9DgIiOzub0vyqxVCgUeQfVKJyP4mHUwbODkOoZNDjKw2cr7TXg/Ow8HBJMihzcnJUf+OoeFcYuCo6Qty0kHK5gfOw8HBJMihTU1PpWsna2lqa1HSMjXhdrfm1wpchGLgTGQZl1oISgNAZRQAlu3ZULhgpLWJ6IcXUezePa7VSuwfXEwxpQQlAaAgks25JCaWgjdMEhEHvqHEASjZfqYBG393DHmpI8ZMj+rqdAV9pb5nMgXWrQMnfWlVdXa06sB80vapTK8m3Mg7sLAKVqMseJU4rMRamqV9+OsM5X6m6IAEoAAhLo8LKY4pyILy8vFau7N//iRiNX+cdwMKA6tq2XjobDLGt80x4f3//AWb6bsEj6CEb03Gem6RnjYGHMjo6Wjn1CygoaAVE/CqxOpTSYNU9d+6ccoIE8kMLGK/e9ofiq3q9bc3sZAN+Cw688GxtC9/S0Q8RoswTJ06kE6nQKVrCbL12QZwbrcJHRETIFrgAAn8LhNK6JdXDJqtWrQoLC2OBaF1dXVlZGX8Eim1mCwgImDdv3vnz5yVL35WdqwKTFhv9gjy8/Yze/vjv4ePv4eVt6enu6zFburssPWbrAYAHzT+cYFM1+C04sJbHf6TnzJnDNspf2ZkVuiBHZA607WZp191qyTqngAqzU5+oGxoGFWYnHa//2/qoFzZ5h0/xDAp/tBvL6AmHCN239PVarHV7VENr9Voqvmu7/kfJqpKRkZGMG5UFEGj/H8oCREJQwvR27NhBB/NOnz49a9YsvotAGWj56dOno7r19fUPL3+NP/HGR13xW3Cg865Im0ymmpoaMGy/WYo/cW5QZ4w62HlHxtDHxyc2NhZt88MPP0DNa3N3iXMDLVq0CDwZN/YEds1fEgtwVLeWG999913lU0RMBw8eZHvV4G5RUdk9OKzGAMVsNmvOffAE01u8eHFUVBS6HXY8XLJ6DGhBeHg4EroOkILb0qVLARwagz9sDvMEHLBKXdzwkxUrVsTFxVHDsOcXLlyAVrI0vj1w4IBq/64OJbJCsCNHjrCPiEvnzp1Lv2fVZXs0MAiFJBADuDu44AhIzZgxA0ygQWgAklwaGP8wbnBS8fHxrHOnjTeqMicmJqanp8OQ8RNITtwY4SO4ocGmTJkCbhgIOl5lQZXgc9LS0hB4gxvf50CTPv/8czpfs2/fPnsvBHD+aL3sQDs7Dw4llR2zAojs+Dpkg1TKg/FKbsoLBmQM2VY6hr69mwbYMWviBjSVdWPc4FvBkB2zZxEVz80FR+sl64UPFBihyE2bNik3CypvKVDyYWXLbntQJeJmjxXPUJybg7oxblQ3afAswcOHDz/88ENqgIKCAmcufGAETSSPCyVVjpbGNuXn59PhnMzMTGiog8waAfbu3buplUpLS69fv+5u6UaOICwdGQEIgMJxfg0o4YzXrFnD0jCQ3NxcNy77jCRBTAhLPgEgaF5Jr30nG7rv+fPn0+QSevYNGzaM7Quw0E3t37+fgjyEKBcvXtS8jF57BM3uYSfsUEBeXt7IvFrGLQTRICDhCMEhvsil/kKTEQsWLEAr0UcM7E+d0n2U4XEhiMZP4kBwwev8Red11q1bx9+khbG98q0lY4AgFD9tsW3bNvGL/HXc9Qsf/OKLL9LFqohmX3/99bF0seqdO3c++eQTWiDLyso6evSo+BX+49cm99PQr00ev8z7EbnhMm9G41fMq9L4iw/c+uIDRuOv45DR+Eti+smdL4lhNP7qIqLxF2qNmhdqEY2/5m385YOj7+WDROOvxHQxjb+o1ZU0/vpgF9P4S61dTD+FV63bFotHhoBIYWHhxo0baae2awlswRxFsFsTR5JGSCtVqaSkBHqKYS+tkTpNGF9lZ2dDB+3tQhkBcieURIhXysvLWb9RUVGBIKa5uZndOyOvrvWwdUhICIKqpKQk1mslJyfz52fcRaMCSlWyWO+deWglyer7QPwVAKONRi+Ujx0NV5D1E6T/BwkHUltwIapAAAAAAElFTkSuQmCC'; - this.element.find('#mergely-splash').css({ - position: 'absolute', - zIndex: '100', - backgroundColor: '#fff', - border: '1px solid black', - height: '70px', - width: '300px', - left: (parentw - 300) / 2, - padding: '10px 10px 0 10px', - fontFamily: 'arial', - fontSize: '11px' - }).append('

mergelyThis software is a Combined Work using Mergely and is covered by the ' + lic + ' license. For the full license, see http://www.mergely.com/license.

'); + const splash = htmlToElement(getSplash({ + icon: MERGELY_ICON, + notice, + left: (this.element.parent().width() - 300) / 2 + })); + // FIXME: use editor jQuery('body').one('click', function () { - jQuery('#mergely-splash').fadeOut(100, 'linear', function () { - jQuery('#mergely-splash').remove(); - }); + splash.style.cssText += 'visibility: hidden; opacity: 0; transition: visibility 0s 100ms, opacity 100ms linear;'; + setTimeout(() => splash.remove(), 110); }); + this.element.append(splash); } // check initialization - var rhstx; - try { - rhstx = this.element.find(`#${this.id}-rhs`).get(0); - } catch (ex) { + const lhstx = document.querySelector(`#${this.id}-lhs`); + const rhstx = document.querySelector(`#${this.id}-rhs`); + if (!lhstx) { + console.error('lhs textarea not defined - Mergely not initialized properly'); } if (!rhstx) { console.error('rhs textarea not defined - Mergely not initialized properly'); - return; - } - var lhstx; - try { - lhstx = this.element.find(`#${this.id}-lhs`).get(0); - } catch (ex) { - } - if (!lhstx) { - console.error('lhs textarea not defined - Mergely not initialized properly'); - return; } - // get current diff border color - var color = jQuery('