[Summary view] [Print] [Text view]

   1  /**
   2   * @copyright  (C) 2018 Open Source Matters, Inc. <https://www.joomla.org>
   3   * @license    GNU General Public License version 2 or later; see LICENSE.txt
   4   */
   5  (() => {
   6  
   7    const decodeHtml = html => {
   8      const textarea = document.createElement('textarea');
   9      textarea.innerHTML = Joomla.sanitizeHtml(html);
  10      return textarea.value;
  11    };
  12  
  13    const compare = (original, changed) => {
  14      const display = changed.nextElementSibling;
  15      const diff = window.Diff.diffWords(original.innerHTML, changed.innerHTML);
  16      const fragment = document.createDocumentFragment();
  17      diff.forEach(part => {
  18        let color = '';
  19  
  20        if (part.added) {
  21          color = '#a6f3a6';
  22        }
  23  
  24        if (part.removed) {
  25          color = '#f8cbcb';
  26        } // @todo use the tag MARK here not SPAN
  27  
  28  
  29        const span = document.createElement('span');
  30        span.style.backgroundColor = color;
  31        span.style.borderRadius = '.2rem';
  32        span.appendChild(document.createTextNode(decodeHtml(part.value)));
  33        fragment.appendChild(span);
  34      });
  35      display.appendChild(fragment);
  36    };
  37  
  38    const onBoot = () => {
  39      const diffs = [].slice.call(document.querySelectorAll('.original'));
  40      diffs.forEach(fragment => {
  41        compare(fragment, fragment.nextElementSibling);
  42      }); // Cleanup
  43  
  44      document.removeEventListener('DOMContentLoaded', onBoot);
  45    };
  46  
  47    document.addEventListener('DOMContentLoaded', onBoot);
  48  })();