2 <html lang="en" ng-app="demo">
5 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6 <meta http-equiv="x-ua-compatible" content="ie=edge">
8 <link rel="stylesheet" href="bower_components/tether/dist/css/tether.min.css">
9 <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
10 <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
11 <link rel="stylesheet" href="bower_components/ng-ckeditor/ng-ckeditor.css">
12 <link rel="stylesheet" href="bower_components/angular-ui/build/angular-ui.min.css">
13 <link rel="stylesheet" href="bower_components/AngularJS-Toaster/toaster.min.css">
14 <link rel="stylesheet" href="bower_components/angular-bootstrap/ui-bootstrap-csp.css">
16 <link type="text/css" href="codes.css" rel="stylesheet">
18 <body ng-controller="DemoController as vm">
19 <!-- Main Navigation -->
20 <nav class="navbar navbar-light bg-faded">
21 <a class="navbar-brand" href="#">caxy/php-htmldiff</a>
22 <ul class="nav navbar-nav">
23 <li class="nav-item active">
24 <a class="nav-link" href="#">Demo <span class="sr-only">(current)</span></a>
30 <div class="container-fluid">
31 <!-- diff controls and input -->
33 <div class="card-header">
34 <button class="btn btn-secondary btn-sm" type="button" data-toggle="collapse" data-target="#diffControls">
35 <i class="fa fa-compress"></i>
39 <div class="pull-right">
40 <div ng-if="vm.currentDemo">
42 Current Demo: {{ vm.currentDemo.name }}
43 <button ng-if="!vm.currentDemo.isOverride" type="button" class="btn btn-primary btn-sm" ng-click="vm.updateDemo()">
50 <div class="card-block collapse in" id="diffControls">
51 <!-- Diff controls -->
52 <div class="form-inline row">
54 <div class="btn-group" role="group">
55 <button type="button" class="btn btn-sm btn-danger-outline" ng-click="vm.reset()">RESET</button>
58 <!-- Load demo buttons w/ dropdowns -->
59 <div class="btn-group" role="group">
60 <div class="btn-group btn-group-sm">
61 <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
64 <div class="dropdown-menu">
65 <a href ng-repeat="demo in vm.demos" type="button" class="dropdown-item" ng-class="{active: demo == vm.currentDemo}" ng-click="vm.diffDemo($index)">
70 <div class="btn-group btn-group-sm" role="group">
71 <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
72 Load Diff Override Demo
74 <div class="dropdown-menu">
75 <a href class="dropdown-item" ng-repeat="override in vm.overrides" ng-class="{active: vm.currentDemo == override}" ng-click="vm.diffOverride(override, $index)">
76 Override Demo {{ $index + 1 }}
82 <!-- Load table diff button and input -->
83 <div class="form-group">
84 <div class="input-group input-group-sm" role="group">
85 <span class="input-group-btn">
86 <button ng-click="vm.diffTableDemo(vm.tableDiffNumber)" type="button" class="btn btn-secondary">Load Table Diff</button>
88 <input type="number" class="form-control" ng-model="vm.tableDiffNumber" />
92 <!-- Match Threshold -->
93 <div class="form-group">
94 <label for="matchThreshold">Match Threshold</label>
95 <input type="number" class="form-control form-control-sm" ng-model="vm.matchThreshold" id="matchThreshold" ng-change="vm.update()">
98 <!-- Table Diffing Checkbox -->
99 <div class="form-group">
100 <label class="checkbox-inline" for="tableDiffing">
101 <input type="checkbox" ng-model="vm.tableDiffing" id="tableDiffing" ng-change="vm.update()"> Use Table Diffing
105 <!-- Swap Text Button -->
106 <button type="button" class="btn btn-secondary btn-sm" ng-click="vm.swapText()">Swap Text</button>
108 <!-- Save as New Demo -->
109 <div class="form-group">
110 <div class="input-group input-group-sm">
111 <input type="text" class="form-control" placeholder="Demo Name" ng-model="vm.diffName" />
112 <span class="input-group-btn">
113 <button class="btn btn-secondary" type="button" ng-click="vm.saveNewDemo()">Save as New Demo</button>
117 </div><!-- end of diff controls -->
119 <!-- Diff Inputs (Old Text / New Text) -->
120 <div class="form-group row m-t-2">
121 <div class="col-sm-6">
122 <label class="form-control-label" for="oldText">
124 <button type="button" class="btn btn-sm btn-secondary clipboard" data-clipboard-target="#oldText">
125 <i class="fa fa-clipboard"></i>
127 <a ng-click="vm.toggleCkEditor()">Toggle CK</a>
129 <div ng-if="vm.ckEditorEnabled">
130 <textarea ckeditor="vm.editorOptions" ng-model="vm.oldText" id="oldText" ng-change="vm.update()"></textarea>
132 <textarea ng-if="!vm.ckEditorEnabled" class="form-control" ng-model="vm.oldText" name="old_text" ng-change="vm.update()" rows="15"></textarea>
134 <div class="col-sm-6">
135 <label class="form-control-label" for="newText">
137 <button type="button" class="btn btn-sm btn-secondary clipboard" data-clipboard-target="#newText">
138 <i class="fa fa-clipboard"></i>
140 <a ng-click="vm.toggleCkEditor()">Toggle CK</a>
142 <div ng-if="vm.ckEditorEnabled">
143 <textarea ckeditor="vm.editorOptions" ng-model="vm.newText" id="newText" ng-change="vm.update()"></textarea>
145 <textarea ng-if="!vm.ckEditorEnabled" class="form-control" ng-model="vm.newText" name="new_text" ng-change="vm.update()" rows="15"></textarea>
147 </div><!-- end of diff inputs -->
148 </div><!-- end of diff controls card-block -->
149 </div><!-- end of diff controls card -->
153 <div class="card-header">
154 <div class="btn-group">
155 <button class="btn btn-secondary btn-sm" type="button" data-toggle="collapse" data-target="#diffBlock">
156 <i class="fa fa-compress"></i>
158 <button type="button" class="btn btn-sm btn-secondary clipboard" data-clipboard-target="#diffPreview">
159 <i class="fa fa-clipboard"></i>
161 <button type="button" class="btn btn-sm btn-secondary" ng-click="vm.update()">
162 <i class="fa fa-refresh"></i>
166 <span ng-show="vm.loading || vm.waiting">- {{ vm.loading ? 'Loading' : 'Waiting' }}...</span>
168 <div class="card-block collapse in" id="diffBlock">
169 <div class="form-group row">
170 <div class="col-sm-12">
171 <div id="diffPreview" class="html-preview" ng-bind-html="vm.trustHtml(vm.diff)"></div>
175 </div><!-- end of diff output -->
177 <!-- Diff Output (HTML) -->
179 <div class="card-header">
180 <button class="btn btn-secondary btn-sm" type="button" data-toggle="collapse" data-target="#rawDiffBlock">
181 <i class="fa fa-compress"></i>
183 <label class="form-control-label" for="rawDiff">
185 <button type="button" class="btn btn-sm btn-secondary clipboard" data-clipboard-target="#rawDiff">
186 <i class="fa fa-clipboard"></i>
189 <span ng-show="vm.loading || vm.waiting">- {{ vm.loading ? 'Loading' : 'Waiting' }}...</span>
191 <div class="card-block collapse" id="rawDiffBlock">
192 <div class="form-group row">
193 <div class="col-sm-12">
194 <textarea id="rawDiff" class="form-control" ng-model="vm.diff" name="diff" readonly ng-change="vm.update()" rows="15"></textarea>
198 </div><!-- end of diff output (html) -->
200 <!-- Debug Output -->
202 <div class="col-sm-6">
203 <h3>Debug Output</h3>
204 <div class="card" ng-repeat="(category, categoryMessages) in vm.debugOutput track by category">
205 <div class="card-header">
207 <a ng-click="categoryMessages.isCollapsed = !categoryMessages.isCollapsed">
212 <div class="card-block" uib-collapse="categoryMessages.isCollapsed">
213 <pre ng-repeat="message in categoryMessages.messages track by $index">
219 <div class="col-sm-6" ng-show="vm.legislativeOverride">
220 <h3>Legislative Override</h3>
221 <div class="html-preview" ng-bind-html="vm.trustHtml(vm.legislativeOverride)"></div>
223 </div><!-- end of debug output -->
224 </div><!-- end of outer container div -->
226 <script src="bower_components/jquery/dist/jquery.min.js"></script>
227 <script src="bower_components/tether/dist/js/tether.min.js"></script>
228 <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
229 <script src="bower_components/angular/angular.min.js"></script>
230 <script src="bower_components/angular-sanitize/angular-sanitize.min.js"></script>
231 <script src="bower_components/clipboard/dist/clipboard.min.js"></script>
232 <script src="bower_components/ckeditor/ckeditor.js"></script>
233 <script src="bower_components/ng-ckeditor/ng-ckeditor.min.js"></script>
234 <script src="bower_components/angular-ui/build/angular-ui.min.js"></script>
235 <script src="bower_components/angular-animate/angular-animate.min.js"></script>
236 <script src="bower_components/AngularJS-Toaster/toaster.min.js"></script>
237 <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
239 <script type="text/javascript" src="demo.module.js"></script>
240 <script type="text/javascript" src="demo.controller.js"></script>
243 new Clipboard('.clipboard');