first commit

media/com_contenthistory/js/admin-compare-compare.js

@@ -0,0 +1,45 @@
+/**
+ * @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);
+})();