aleph1.co.uk Git - yaffs-website/blob - vendor/caxy/php-htmldiff/demo/demo.html

   1 <!DOCTYPE html>
   2 <html lang="en" ng-app="demo">
   3 <head>
   4     <meta charset="utf-8">
   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">
   7
   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">
  15
  16     <link type="text/css" href="codes.css" rel="stylesheet">
  17 </head>
  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>
  25             </li>
  26         </ul>
  27     </nav>
  28
  29     <!-- Main Content -->
  30     <div class="container-fluid">
  31         <!-- diff controls and input -->
  32         <div class="card">
  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>
  36                 </button>
  37                 Diff Controls
  38
  39                 <div class="pull-right">
  40                     <div ng-if="vm.currentDemo">
  41                         <p>
  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()">
  44                                 Update Demo
  45                             </button>
  46                         </p>
  47                     </div>
  48                 </div>
  49             </div>
  50             <div class="card-block collapse in" id="diffControls">
  51                 <!-- Diff controls -->
  52                 <div class="form-inline row">
  53                     <!-- Reset button -->
  54                     <div class="btn-group" role="group">
  55                         <button type="button" class="btn btn-sm btn-danger-outline" ng-click="vm.reset()">RESET</button>
  56                     </div>
  57
  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">
  62                                 Load Custom Demo
  63                             </button>
  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)">
  66                                     {{ demo.name }}
  67                                 </a>
  68                             </div>
  69                         </div>
  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
  73                             </button>
  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 }}
  77                                 </a>
  78                             </div>
  79                         </div>
  80                     </div>
  81
  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>
  87                             </span>
  88                             <input type="number" class="form-control" ng-model="vm.tableDiffNumber" />
  89                         </div>
  90                     </div>
  91
  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()">
  96                     </div>
  97
  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
 102                         </label>
 103                     </div>
 104
 105                     <!-- Swap Text Button -->
 106                     <button type="button" class="btn btn-secondary btn-sm" ng-click="vm.swapText()">Swap Text</button>
 107
 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>
 114                             </span>
 115                         </div>
 116                     </div>
 117                 </div><!-- end of diff controls -->
 118
 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">
 123                             Old Text
 124                             <button type="button" class="btn btn-sm btn-secondary clipboard" data-clipboard-target="#oldText">
 125                                 <i class="fa fa-clipboard"></i>
 126                             </button>
 127                             <a ng-click="vm.toggleCkEditor()">Toggle CK</a>
 128                         </label>
 129                         <div ng-if="vm.ckEditorEnabled">
 130                             <textarea ckeditor="vm.editorOptions" ng-model="vm.oldText" id="oldText" ng-change="vm.update()"></textarea>
 131                         </div>
 132                         <textarea ng-if="!vm.ckEditorEnabled" class="form-control" ng-model="vm.oldText" name="old_text" ng-change="vm.update()" rows="15"></textarea>
 133                     </div>
 134                     <div class="col-sm-6">
 135                         <label class="form-control-label" for="newText">
 136                             New Text
 137                             <button type="button" class="btn btn-sm btn-secondary clipboard" data-clipboard-target="#newText">
 138                                 <i class="fa fa-clipboard"></i>
 139                             </button>
 140                             <a ng-click="vm.toggleCkEditor()">Toggle CK</a>
 141                         </label>
 142                         <div ng-if="vm.ckEditorEnabled">
 143                             <textarea ckeditor="vm.editorOptions" ng-model="vm.newText" id="newText" ng-change="vm.update()"></textarea>
 144                         </div>
 145                         <textarea ng-if="!vm.ckEditorEnabled" class="form-control" ng-model="vm.newText" name="new_text" ng-change="vm.update()" rows="15"></textarea>
 146                     </div>
 147                 </div><!-- end of diff inputs -->
 148             </div><!-- end of diff controls card-block -->
 149         </div><!-- end of diff controls card -->
 150
 151         <!-- Diff Output -->
 152         <div class="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>
 157                     </button>
 158                     <button type="button" class="btn btn-sm btn-secondary clipboard" data-clipboard-target="#diffPreview">
 159                         <i class="fa fa-clipboard"></i>
 160                     </button>
 161                     <button type="button" class="btn btn-sm btn-secondary" ng-click="vm.update()">
 162                         <i class="fa fa-refresh"></i>
 163                     </button>
 164                 </div>
 165                 Diff Output
 166                 <span ng-show="vm.loading || vm.waiting">- {{ vm.loading ? 'Loading' : 'Waiting' }}...</span>
 167             </div>
 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>
 172                     </div>
 173                 </div>
 174             </div>
 175         </div><!-- end of diff output -->
 176
 177         <!-- Diff Output (HTML) -->
 178         <div class="card">
 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>
 182                 </button>
 183                 <label class="form-control-label" for="rawDiff">
 184                     Diff Output (HTML)
 185                     <button type="button" class="btn btn-sm btn-secondary clipboard" data-clipboard-target="#rawDiff">
 186                         <i class="fa fa-clipboard"></i>
 187                     </button>
 188                 </label>
 189                 <span ng-show="vm.loading || vm.waiting">- {{ vm.loading ? 'Loading' : 'Waiting' }}...</span>
 190             </div>
 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>
 195                     </div>
 196                 </div>
 197             </div>
 198         </div><!-- end of diff output (html) -->
 199
 200         <!-- Debug Output -->
 201         <div class="row">
 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">
 206                         <h5>
 207                             <a ng-click="categoryMessages.isCollapsed = !categoryMessages.isCollapsed">
 208                                 {{ category }}
 209                             </a>
 210                         </h5>
 211                     </div>
 212                     <div class="card-block" uib-collapse="categoryMessages.isCollapsed">
 213                         <pre ng-repeat="message in categoryMessages.messages track by $index">
 214                             {{ message }}
 215                         </pre>
 216                     </div>
 217                 </div>
 218             </div>
 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>
 222             </div>
 223         </div><!-- end of debug output -->
 224     </div><!-- end of outer container div -->
 225
 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>
 238
 239     <script type="text/javascript" src="demo.module.js"></script>
 240     <script type="text/javascript" src="demo.controller.js"></script>
 241
 242     <script>
 243         new Clipboard('.clipboard');
 244     </script>
 245 </body>
 246 </html>