Mergely demo

by Nofiden Noble

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.11.0/codemirror.min.js"></script>
<script src="//cdn.rawgit.com/wickedest/Mergely/3.4.1/lib/mergely.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.11.0/codemirror.min.css">
<link rel="stylesheet" href="//cdn.rawgit.com/wickedest/Mergely/3.4.0/lib/mergely.css">
<div class="container">

    <div class="diffs">
        <header>
            <h1>Visualized Diffs</h1>
            <button id="prev" title="Previous diff">▲</button>
            <button id="next" title="Next diff">▼</button>
            <button id="wrap" title="Toggle line wrapping">
                <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 10 10"><path d="M1 2h8M1 4.5h6A1 1 0 0 1 7 7H5v-.3l-.3.3.3.3V7M1 7h1.5" stroke-width="1.1" fill="none" stroke="#000"/></svg>
            </button>
        </header>
        <div class="compare-wrapper">
            <div id="compare">
            </div>
        </div>
    </div>

    <div class="sources">
        <h1>Source files</h1>
        <ul>
            <li><a id="file1" href="http://chubbeta.homebox.com/iw/cci/meta/no-injection/iw-mount/broadband/main/svodx-direct/WORKAREA/content/BBOD_ATT_HBO/meta/meta-PMRS1155681-634424-1_1-VOD_1_1_HAHD.xml">File 1</a></li>
            <li><a id="file2" href="https://gist.githubusercontent.com/quotient/a9baf2c58972aa22c621/raw/c8f6caf22d330cb34fc6f70ece44699312b2b7b4/gistfile1.txt">File 2</a></li>
        </ul>
    </div>

</div>

CSS

h1, ul {
  margin: .3em 0;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0 .5em;
}

.diffs {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.diffs header * {
  display: inline-block;
  vertical-align: middle;
}
.diffs .compare-wrapper {
  flex: 1 1 auto;
  position: relative;
}
.diffs .compare-wrapper #compare {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

/* Auto-height fix */
.mergely-column .CodeMirror {
  height: 100%;
}

JavaScript

var comp = $('#compare');

function downloadJSON(url, callback) {
  $.get(url, function(data) {
    var json = JSON.parse(data);
    var formattedText = JSON.stringify(json, null, 2);
    callback(formattedText);
  });
}

comp.mergely({
  cmsettings: {
    readOnly: false,
    lineWrapping: true
  },
  wrap_lines: true,

  //Doesn't do anything?
  //autoresize: true,

  editor_width: 'calc(50% - 25px)',
  editor_height: '100%',

  lhs: function(setValue) {
    downloadJSON($("#file1").attr('href'), setValue);
  },
  rhs: function(setValue) {
    downloadJSON($("#file2").attr('href'), setValue);
  }
});

function changeOptions(changer) {
  var options = comp.mergely('options');
  changer(options);

  comp.mergely('options', options);
  //comp.mergely('update');
}

$('#prev').click(function() { comp.mergely('scrollToDiff', 'prev'); });
$('#next').click(function() { comp.mergely('scrollToDiff', 'next'); });
$('#wrap').click(function() { changeOptions(function(x) { x.wrap_lines = !x.wrap_lines; }); });