wp-visitor-contributions/vendor/caxy/php-htmldiff/demo/demo.html

247 lines
13 KiB
HTML

2016-07-12 16:58:19 -05:00
<!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>