46 lines
1.4 KiB
JavaScript
46 lines
1.4 KiB
JavaScript
/**
|
|
* @copyright (C) 2018 Open Source Matters, Inc. <https://www.joomla.org>
|
|
* @license GNU General Public License version 2 or later; see LICENSE.txt
|
|
*/
|
|
(() => {
|
|
|
|
// This method is used to decode HTML entities
|
|
const decodeHtml = html => {
|
|
const textarea = document.createElement('textarea');
|
|
textarea.innerHTML = Joomla.sanitizeHtml(html);
|
|
return textarea.value;
|
|
};
|
|
const compare = (original, changed) => {
|
|
const display = changed.nextElementSibling;
|
|
const diff = window.Diff.diffWords(original.innerHTML, changed.innerHTML);
|
|
const fragment = document.createDocumentFragment();
|
|
diff.forEach(part => {
|
|
let color = '';
|
|
if (part.added) {
|
|
color = '#a6f3a6';
|
|
}
|
|
if (part.removed) {
|
|
color = '#f8cbcb';
|
|
}
|
|
|
|
// @todo use the tag MARK here not SPAN
|
|
const span = document.createElement('span');
|
|
span.style.backgroundColor = color;
|
|
span.style.borderRadius = '.2rem';
|
|
span.appendChild(document.createTextNode(decodeHtml(part.value)));
|
|
fragment.appendChild(span);
|
|
});
|
|
display.appendChild(fragment);
|
|
};
|
|
const onBoot = () => {
|
|
const diffs = [].slice.call(document.querySelectorAll('.original'));
|
|
diffs.forEach(fragment => {
|
|
compare(fragment, fragment.nextElementSibling);
|
|
});
|
|
|
|
// Cleanup
|
|
document.removeEventListener('DOMContentLoaded', onBoot);
|
|
};
|
|
document.addEventListener('DOMContentLoaded', onBoot);
|
|
})();
|