247 lines
13 KiB
HTML
247 lines
13 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en" ng-app="demo">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="bower_components/tether/dist/css/tether.min.css">
|
||
|
|
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
|
||
|
|
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
|
||
|
|
<link rel="stylesheet" href="bower_components/ng-ckeditor/ng-ckeditor.css">
|
||
|
|
<link rel="stylesheet" href="bower_components/angular-ui/build/angular-ui.min.css">
|
||
|
|
<link rel="stylesheet" href="bower_components/AngularJS-Toaster/toaster.min.css">
|
||
|
|
<link rel="stylesheet" href="bower_components/angular-bootstrap/ui-bootstrap-csp.css">
|
||
|
|
|
||
|
|
<link type="text/css" href="codes.css" rel="stylesheet">
|
||
|
|
</head>
|
||
|
|
<body ng-controller="DemoController as vm">
|
||
|
|
<!-- Main Navigation -->
|
||
|
|
<nav class="navbar navbar-light bg-faded">
|
||
|
|
<a class="navbar-brand" href="#">caxy/php-htmldiff</a>
|
||
|
|
<ul class="nav navbar-nav">
|
||
|
|
<li class="nav-item active">
|
||
|
|
<a class="nav-link" href="#">Demo <span class="sr-only">(current)</span></a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<!-- Main Content -->
|
||
|
|
<div class="container-fluid">
|
||
|
|
<!-- diff controls and input -->
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-header">
|
||
|
|
<button class="btn btn-secondary btn-sm" type="button" data-toggle="collapse" data-target="#diffControls">
|
||
|
|
<i class="fa fa-compress"></i>
|
||
|
|
</button>
|
||
|
|
Diff Controls
|
||
|
|
|
||
|
|
<div class="pull-right">
|
||
|
|
<div ng-if="vm.currentDemo">
|
||
|
|
<p>
|
||
|
|
Current Demo: {{ vm.currentDemo.name }}
|
||
|
|
<button ng-if="!vm.currentDemo.isOverride" type="button" class="btn btn-primary btn-sm" ng-click="vm.updateDemo()">
|
||
|
|
Update Demo
|
||
|
|
</button>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="card-block collapse in" id="diffControls">
|
||
|
|
<!-- Diff controls -->
|
||
|
|
<div class="form-inline row">
|
||
|
|
<!-- Reset button -->
|
||
|
|
<div class="btn-group" role="group">
|
||
|
|
<button type="button" class="btn btn-sm btn-danger-outline" ng-click="vm.reset()">RESET</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Load demo buttons w/ dropdowns -->
|
||
|
|
<div class="btn-group" role="group">
|
||
|
|
<div class="btn-group btn-group-sm">
|
||
|
|
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
|
|
Load Custom Demo
|
||
|
|
</button>
|
||
|
|
<div class="dropdown-menu">
|
||
|
|
<a href ng-repeat="demo in vm.demos" type="button" class="dropdown-item" ng-class="{active: demo == vm.currentDemo}" ng-click="vm.diffDemo($index)">
|
||
|
|
{{ demo.name }}
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="btn-group btn-group-sm" role="group">
|
||
|
|
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
|
|
Load Diff Override Demo
|
||
|
|
</button>
|
||
|
|
<div class="dropdown-menu">
|
||
|
|
<a href class="dropdown-item" ng-repeat="override in vm.overrides" ng-class="{active: vm.currentDemo == override}" ng-click="vm.diffOverride(override, $index)">
|
||
|
|
Override Demo {{ $index + 1 }}
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Load table diff button and input -->
|
||
|
|
<div class="form-group">
|
||
|
|
<div class="input-group input-group-sm" role="group">
|
||
|
|
<span class="input-group-btn">
|
||
|
|
<button ng-click="vm.diffTableDemo(vm.tableDiffNumber)" type="button" class="btn btn-secondary">Load Table Diff</button>
|
||
|
|
</span>
|
||
|
|
<input type="number" class="form-control" ng-model="vm.tableDiffNumber" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Match Threshold -->
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="matchThreshold">Match Threshold</label>
|
||
|
|
<input type="number" class="form-control form-control-sm" ng-model="vm.matchThreshold" id="matchThreshold" ng-change="vm.update()">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Table Diffing Checkbox -->
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="checkbox-inline" for="tableDiffing">
|
||
|
|
<input type="checkbox" ng-model="vm.tableDiffing" id="tableDiffing" ng-change="vm.update()"> Use Table Diffing
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Swap Text Button -->
|
||
|
|
<button type="button" class="btn btn-secondary btn-sm" ng-click="vm.swapText()">Swap Text</button>
|
||
|
|
|
||
|
|
<!-- Save as New Demo -->
|
||
|
|
<div class="form-group">
|
||
|
|
<div class="input-group input-group-sm">
|
||
|
|
<input type="text" class="form-control" placeholder="Demo Name" ng-model="vm.diffName" />
|
||
|
|
<span class="input-group-btn">
|
||
|
|
<button class="btn btn-secondary" type="button" ng-click="vm.saveNewDemo()">Save as New Demo</button>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div><!-- end of diff controls -->
|
||
|
|
|
||
|
|
<!-- Diff Inputs (Old Text / New Text) -->
|
||
|
|
<div class="form-group row m-t-2">
|
||
|
|
<div class="col-sm-6">
|
||
|
|
<label class="form-control-label" for="oldText">
|
||
|
|
Old Text
|
||
|
|
<button type="button" class="btn btn-sm btn-secondary clipboard" data-clipboard-target="#oldText">
|
||
|
|
<i class="fa fa-clipboard"></i>
|
||
|
|
</button>
|
||
|
|
<a ng-click="vm.toggleCkEditor()">Toggle CK</a>
|
||
|
|
</label>
|
||
|
|
<div ng-if="vm.ckEditorEnabled">
|
||
|
|
<textarea ckeditor="vm.editorOptions" ng-model="vm.oldText" id="oldText" ng-change="vm.update()"></textarea>
|
||
|
|
</div>
|
||
|
|
<textarea ng-if="!vm.ckEditorEnabled" class="form-control" ng-model="vm.oldText" name="old_text" ng-change="vm.update()" rows="15"></textarea>
|
||
|
|
</div>
|
||
|
|
<div class="col-sm-6">
|
||
|
|
<label class="form-control-label" for="newText">
|
||
|
|
New Text
|
||
|
|
<button type="button" class="btn btn-sm btn-secondary clipboard" data-clipboard-target="#newText">
|
||
|
|
<i class="fa fa-clipboard"></i>
|
||
|
|
</button>
|
||
|
|
<a ng-click="vm.toggleCkEditor()">Toggle CK</a>
|
||
|
|
</label>
|
||
|
|
<div ng-if="vm.ckEditorEnabled">
|
||
|
|
<textarea ckeditor="vm.editorOptions" ng-model="vm.newText" id="newText" ng-change="vm.update()"></textarea>
|
||
|
|
</div>
|
||
|
|
<textarea ng-if="!vm.ckEditorEnabled" class="form-control" ng-model="vm.newText" name="new_text" ng-change="vm.update()" rows="15"></textarea>
|
||
|
|
</div>
|
||
|
|
</div><!-- end of diff inputs -->
|
||
|
|
</div><!-- end of diff controls card-block -->
|
||
|
|
</div><!-- end of diff controls card -->
|
||
|
|
|
||
|
|
<!-- Diff Output -->
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-header">
|
||
|
|
<div class="btn-group">
|
||
|
|
<button class="btn btn-secondary btn-sm" type="button" data-toggle="collapse" data-target="#diffBlock">
|
||
|
|
<i class="fa fa-compress"></i>
|
||
|
|
</button>
|
||
|
|
<button type="button" class="btn btn-sm btn-secondary clipboard" data-clipboard-target="#diffPreview">
|
||
|
|
<i class="fa fa-clipboard"></i>
|
||
|
|
</button>
|
||
|
|
<button type="button" class="btn btn-sm btn-secondary" ng-click="vm.update()">
|
||
|
|
<i class="fa fa-refresh"></i>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
Diff Output
|
||
|
|
<span ng-show="vm.loading || vm.waiting">- {{ vm.loading ? 'Loading' : 'Waiting' }}...</span>
|
||
|
|
</div>
|
||
|
|
<div class="card-block collapse in" id="diffBlock">
|
||
|
|
<div class="form-group row">
|
||
|
|
<div class="col-sm-12">
|
||
|
|
<div id="diffPreview" class="html-preview" ng-bind-html="vm.trustHtml(vm.diff)"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div><!-- end of diff output -->
|
||
|
|
|
||
|
|
<!-- Diff Output (HTML) -->
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-header">
|
||
|
|
<button class="btn btn-secondary btn-sm" type="button" data-toggle="collapse" data-target="#rawDiffBlock">
|
||
|
|
<i class="fa fa-compress"></i>
|
||
|
|
</button>
|
||
|
|
<label class="form-control-label" for="rawDiff">
|
||
|
|
Diff Output (HTML)
|
||
|
|
<button type="button" class="btn btn-sm btn-secondary clipboard" data-clipboard-target="#rawDiff">
|
||
|
|
<i class="fa fa-clipboard"></i>
|
||
|
|
</button>
|
||
|
|
</label>
|
||
|
|
<span ng-show="vm.loading || vm.waiting">- {{ vm.loading ? 'Loading' : 'Waiting' }}...</span>
|
||
|
|
</div>
|
||
|
|
<div class="card-block collapse" id="rawDiffBlock">
|
||
|
|
<div class="form-group row">
|
||
|
|
<div class="col-sm-12">
|
||
|
|
<textarea id="rawDiff" class="form-control" ng-model="vm.diff" name="diff" readonly ng-change="vm.update()" rows="15"></textarea>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div><!-- end of diff output (html) -->
|
||
|
|
|
||
|
|
<!-- Debug Output -->
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-sm-6">
|
||
|
|
<h3>Debug Output</h3>
|
||
|
|
<div class="card" ng-repeat="(category, categoryMessages) in vm.debugOutput track by category">
|
||
|
|
<div class="card-header">
|
||
|
|
<h5>
|
||
|
|
<a ng-click="categoryMessages.isCollapsed = !categoryMessages.isCollapsed">
|
||
|
|
{{ category }}
|
||
|
|
</a>
|
||
|
|
</h5>
|
||
|
|
</div>
|
||
|
|
<div class="card-block" uib-collapse="categoryMessages.isCollapsed">
|
||
|
|
<pre ng-repeat="message in categoryMessages.messages track by $index">
|
||
|
|
{{ message }}
|
||
|
|
</pre>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-sm-6" ng-show="vm.legislativeOverride">
|
||
|
|
<h3>Legislative Override</h3>
|
||
|
|
<div class="html-preview" ng-bind-html="vm.trustHtml(vm.legislativeOverride)"></div>
|
||
|
|
</div>
|
||
|
|
</div><!-- end of debug output -->
|
||
|
|
</div><!-- end of outer container div -->
|
||
|
|
|
||
|
|
<script src="bower_components/jquery/dist/jquery.min.js"></script>
|
||
|
|
<script src="bower_components/tether/dist/js/tether.min.js"></script>
|
||
|
|
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
|
||
|
|
<script src="bower_components/angular/angular.min.js"></script>
|
||
|
|
<script src="bower_components/angular-sanitize/angular-sanitize.min.js"></script>
|
||
|
|
<script src="bower_components/clipboard/dist/clipboard.min.js"></script>
|
||
|
|
<script src="bower_components/ckeditor/ckeditor.js"></script>
|
||
|
|
<script src="bower_components/ng-ckeditor/ng-ckeditor.min.js"></script>
|
||
|
|
<script src="bower_components/angular-ui/build/angular-ui.min.js"></script>
|
||
|
|
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
|
||
|
|
<script src="bower_components/AngularJS-Toaster/toaster.min.js"></script>
|
||
|
|
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
|
||
|
|
|
||
|
|
<script type="text/javascript" src="demo.module.js"></script>
|
||
|
|
<script type="text/javascript" src="demo.controller.js"></script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
new Clipboard('.clipboard');
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|