openrat-cms

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README

merge.html (4181B)

      1 <!doctype html>
      2 
      3 <title>CodeMirror: merge view demo</title>
      4 <meta charset="utf-8"/>
      5 <link rel=stylesheet href="../doc/docs.css">
      6 
      7 <link rel=stylesheet href="../lib/codemirror.css">
      8 <link rel=stylesheet href="../addon/merge/merge.css">
      9 <script src="../lib/codemirror.js"></script>
     10 <script src="../mode/xml/xml.js"></script>
     11 <script src="../mode/css/css.js"></script>
     12 <script src="../mode/javascript/javascript.js"></script>
     13 <script src="../mode/htmlmixed/htmlmixed.js"></script>
     14 <script src="https://cdnjs.cloudflare.com/ajax/libs/diff_match_patch/20121119/diff_match_patch.js"></script>
     15 <script src="../addon/merge/merge.js"></script>
     16 <style>
     17     .CodeMirror { line-height: 1.2; }
     18     @media screen and (min-width: 1300px) {
     19       article { max-width: 1000px; }
     20       #nav { border-right: 499px solid transparent; }
     21     }
     22     span.clicky {
     23       cursor: pointer;
     24       background: #d70;
     25       color: white;
     26       padding: 0 3px;
     27       border-radius: 3px;
     28     }
     29   </style>
     30 <div id=nav>
     31   <a href="http://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
     32 
     33   <ul>
     34     <li><a href="../index.html">Home</a>
     35     <li><a href="../doc/manual.html">Manual</a>
     36     <li><a href="https://github.com/codemirror/codemirror">Code</a>
     37   </ul>
     38   <ul>
     39     <li><a class=active href="#">merge view</a>
     40   </ul>
     41 </div>
     42 
     43 <article>
     44 <h2>merge view demo</h2>
     45 
     46 
     47 <div id=view></div>
     48 
     49 <p>The <a href="../doc/manual.html#addon_merge"><code>merge</code></a>
     50 addon provides an interface for displaying and merging diffs,
     51 either <span class=clicky onclick="panes = 2; initUI()">two-way</span>
     52 or <span class=clicky onclick="panes = 3; initUI()">three-way</span>.
     53 The left (or center) pane is editable, and the differences with the
     54 other pane(s) are <span class=clicky
     55 onclick="toggleDifferences()">optionally</span> shown live as you edit
     56 it. In the two-way configuration, there are also options to pad changed
     57 sections to <span class=clicky onclick="connect = connect ? null :
     58 'align'; initUI()">align</span> them, and to <span class=clicky
     59 onclick="collapse = !collapse; initUI()">collapse</span> unchanged
     60 stretches of text.</p>
     61 
     62 <p>This addon depends on
     63 the <a href="https://code.google.com/p/google-diff-match-patch/">google-diff-match-patch</a>
     64 library to compute the diffs.</p>
     65 
     66 <script>
     67 var value, orig1, orig2, dv, panes = 2, highlight = true, connect = "align", collapse = false;
     68 function initUI() {
     69   if (value == null) return;
     70   var target = document.getElementById("view");
     71   target.innerHTML = "";
     72   dv = CodeMirror.MergeView(target, {
     73     value: value,
     74     origLeft: panes == 3 ? orig1 : null,
     75     orig: orig2,
     76     lineNumbers: true,
     77     mode: "text/html",
     78     highlightDifferences: highlight,
     79     connect: connect,
     80     collapseIdentical: collapse
     81   });
     82 }
     83 
     84 function toggleDifferences() {
     85   dv.setShowDifferences(highlight = !highlight);
     86 }
     87 
     88 window.onload = function() {
     89   value = document.documentElement.innerHTML;
     90   orig1 = "<!doctype html>\n\n" + value.replace(/\.\.\//g, "codemirror/").replace("yellow", "orange");
     91   orig2 = value.replace(/\u003cscript/g, "\u003cscript type=text/javascript ")
     92     .replace("white", "purple;\n      font: comic sans;\n      text-decoration: underline;\n      height: 15em");
     93   initUI();
     94   let d = document.createElement("div"); d.style.cssText = "width: 50px; margin: 7px; height: 14px"; dv.editor().addLineWidget(57, d)
     95 };
     96 
     97 function mergeViewHeight(mergeView) {
     98   function editorHeight(editor) {
     99     if (!editor) return 0;
    100     return editor.getScrollInfo().height;
    101   }
    102   return Math.max(editorHeight(mergeView.leftOriginal()),
    103                   editorHeight(mergeView.editor()),
    104                   editorHeight(mergeView.rightOriginal()));
    105 }
    106 
    107 function resize(mergeView) {
    108   var height = mergeViewHeight(mergeView);
    109   for(;;) {
    110     if (mergeView.leftOriginal())
    111       mergeView.leftOriginal().setSize(null, height);
    112     mergeView.editor().setSize(null, height);
    113     if (mergeView.rightOriginal())
    114       mergeView.rightOriginal().setSize(null, height);
    115 
    116     var newHeight = mergeViewHeight(mergeView);
    117     if (newHeight >= height) break;
    118     else height = newHeight;
    119   }
    120   mergeView.wrap.style.height = height + "px";
    121 }
    122 </script>
    123 </article>