File modules/editor/codemirror/demo/merge.html

Last commit: Tue May 22 22:39:49 2018 +0200	Jan Dankert	Fix für PHP 7.2: 'Object' darf nun nicht mehr als Klassennamen verwendet werden. AUCH NICHT IN EINEM NAMESPACE! WTF, wozu habe ich das in einen verfickten Namespace gepackt? Wozu soll der sonst da sein??? Amateure. Daher nun notgedrungen unbenannt in 'BaseObject'.


     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>



Download modules/editor/codemirror/demo/merge.html


History
Tue, 22 May 2018 22:39:49 +0200	Jan Dankert	Fix für PHP 7.2: 'Object' darf nun nicht mehr als Klassennamen verwendet werden. AUCH NICHT IN EINEM NAMESPACE! WTF, wozu habe ich das in einen verfickten Namespace gepackt? Wozu soll der sonst da sein??? Amateure. Daher nun notgedrungen unbenannt in 'BaseObject'.