Plugin to allow visitor contributions to WordPress posts, wiki style.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

247 lines
13 KiB

  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. <link rel="stylesheet" href="bower_components/tether/dist/css/tether.min.css">
  8. <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
  9. <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
  10. <link rel="stylesheet" href="bower_components/ng-ckeditor/ng-ckeditor.css">
  11. <link rel="stylesheet" href="bower_components/angular-ui/build/angular-ui.min.css">
  12. <link rel="stylesheet" href="bower_components/AngularJS-Toaster/toaster.min.css">
  13. <link rel="stylesheet" href="bower_components/angular-bootstrap/ui-bootstrap-csp.css">
  14. <link type="text/css" href="codes.css" rel="stylesheet">
  15. </head>
  16. <body ng-controller="DemoController as vm">
  17. <!-- Main Navigation -->
  18. <nav class="navbar navbar-light bg-faded">
  19. <a class="navbar-brand" href="#">caxy/php-htmldiff</a>
  20. <ul class="nav navbar-nav">
  21. <li class="nav-item active">
  22. <a class="nav-link" href="#">Demo <span class="sr-only">(current)</span></a>
  23. </li>
  24. </ul>
  25. </nav>
  26. <!-- Main Content -->
  27. <div class="container-fluid">
  28. <!-- diff controls and input -->
  29. <div class="card">
  30. <div class="card-header">
  31. <button class="btn btn-secondary btn-sm" type="button" data-toggle="collapse" data-target="#diffControls">
  32. <i class="fa fa-compress"></i>
  33. </button>
  34. Diff Controls
  35. <div class="pull-right">
  36. <div ng-if="vm.currentDemo">
  37. <p>
  38. Current Demo: {{ vm.currentDemo.name }}
  39. <button ng-if="!vm.currentDemo.isOverride" type="button" class="btn btn-primary btn-sm" ng-click="vm.updateDemo()">
  40. Update Demo
  41. </button>
  42. </p>
  43. </div>
  44. </div>
  45. </div>
  46. <div class="card-block collapse in" id="diffControls">
  47. <!-- Diff controls -->
  48. <div class="form-inline row">
  49. <!-- Reset button -->
  50. <div class="btn-group" role="group">
  51. <button type="button" class="btn btn-sm btn-danger-outline" ng-click="vm.reset()">RESET</button>
  52. </div>
  53. <!-- Load demo buttons w/ dropdowns -->
  54. <div class="btn-group" role="group">
  55. <div class="btn-group btn-group-sm">
  56. <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  57. Load Custom Demo
  58. </button>
  59. <div class="dropdown-menu">
  60. <a href ng-repeat="demo in vm.demos" type="button" class="dropdown-item" ng-class="{active: demo == vm.currentDemo}" ng-click="vm.diffDemo($index)">
  61. {{ demo.name }}
  62. </a>
  63. </div>
  64. </div>
  65. <div class="btn-group btn-group-sm" role="group">
  66. <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  67. Load Diff Override Demo
  68. </button>
  69. <div class="dropdown-menu">
  70. <a href class="dropdown-item" ng-repeat="override in vm.overrides" ng-class="{active: vm.currentDemo == override}" ng-click="vm.diffOverride(override, $index)">
  71. Override Demo {{ $index + 1 }}
  72. </a>
  73. </div>
  74. </div>
  75. </div>
  76. <!-- Load table diff button and input -->
  77. <div class="form-group">
  78. <div class="input-group input-group-sm" role="group">
  79. <span class="input-group-btn">
  80. <button ng-click="vm.diffTableDemo(vm.tableDiffNumber)" type="button" class="btn btn-secondary">Load Table Diff</button>
  81. </span>
  82. <input type="number" class="form-control" ng-model="vm.tableDiffNumber" />
  83. </div>
  84. </div>
  85. <!-- Match Threshold -->
  86. <div class="form-group">
  87. <label for="matchThreshold">Match Threshold</label>
  88. <input type="number" class="form-control form-control-sm" ng-model="vm.matchThreshold" id="matchThreshold" ng-change="vm.update()">
  89. </div>
  90. <!-- Table Diffing Checkbox -->
  91. <div class="form-group">
  92. <label class="checkbox-inline" for="tableDiffing">
  93. <input type="checkbox" ng-model="vm.tableDiffing" id="tableDiffing" ng-change="vm.update()"> Use Table Diffing
  94. </label>
  95. </div>
  96. <!-- Swap Text Button -->
  97. <button type="button" class="btn btn-secondary btn-sm" ng-click="vm.swapText()">Swap Text</button>
  98. <!-- Save as New Demo -->
  99. <div class="form-group">
  100. <div class="input-group input-group-sm">
  101. <input type="text" class="form-control" placeholder="Demo Name" ng-model="vm.diffName" />
  102. <span class="input-group-btn">
  103. <button class="btn btn-secondary" type="button" ng-click="vm.saveNewDemo()">Save as New Demo</button>
  104. </span>
  105. </div>
  106. </div>
  107. </div><!-- end of diff controls -->
  108. <!-- Diff Inputs (Old Text / New Text) -->
  109. <div class="form-group row m-t-2">
  110. <div class="col-sm-6">
  111. <label class="form-control-label" for="oldText">
  112. Old Text
  113. <button type="button" class="btn btn-sm btn-secondary clipboard" data-clipboard-target="#oldText">
  114. <i class="fa fa-clipboard"></i>
  115. </button>
  116. <a ng-click="vm.toggleCkEditor()">Toggle CK</a>
  117. </label>
  118. <div ng-if="vm.ckEditorEnabled">
  119. <textarea ckeditor="vm.editorOptions" ng-model="vm.oldText" id="oldText" ng-change="vm.update()"></textarea>
  120. </div>
  121. <textarea ng-if="!vm.ckEditorEnabled" class="form-control" ng-model="vm.oldText" name="old_text" ng-change="vm.update()" rows="15"></textarea>
  122. </div>
  123. <div class="col-sm-6">
  124. <label class="form-control-label" for="newText">
  125. New Text
  126. <button type="button" class="btn btn-sm btn-secondary clipboard" data-clipboard-target="#newText">
  127. <i class="fa fa-clipboard"></i>
  128. </button>
  129. <a ng-click="vm.toggleCkEditor()">Toggle CK</a>
  130. </label>
  131. <div ng-if="vm.ckEditorEnabled">
  132. <textarea ckeditor="vm.editorOptions" ng-model="vm.newText" id="newText" ng-change="vm.update()"></textarea>
  133. </div>
  134. <textarea ng-if="!vm.ckEditorEnabled" class="form-control" ng-model="vm.newText" name="new_text" ng-change="vm.update()" rows="15"></textarea>
  135. </div>
  136. </div><!-- end of diff inputs -->
  137. </div><!-- end of diff controls card-block -->
  138. </div><!-- end of diff controls card -->
  139. <!-- Diff Output -->
  140. <div class="card">
  141. <div class="card-header">
  142. <div class="btn-group">
  143. <button class="btn btn-secondary btn-sm" type="button" data-toggle="collapse" data-target="#diffBlock">
  144. <i class="fa fa-compress"></i>
  145. </button>
  146. <button type="button" class="btn btn-sm btn-secondary clipboard" data-clipboard-target="#diffPreview">
  147. <i class="fa fa-clipboard"></i>
  148. </button>
  149. <button type="button" class="btn btn-sm btn-secondary" ng-click="vm.update()">
  150. <i class="fa fa-refresh"></i>
  151. </button>
  152. </div>
  153. Diff Output
  154. <span ng-show="vm.loading || vm.waiting">- {{ vm.loading ? 'Loading' : 'Waiting' }}...</span>
  155. </div>
  156. <div class="card-block collapse in" id="diffBlock">
  157. <div class="form-group row">
  158. <div class="col-sm-12">
  159. <div id="diffPreview" class="html-preview" ng-bind-html="vm.trustHtml(vm.diff)"></div>
  160. </div>
  161. </div>
  162. </div>
  163. </div><!-- end of diff output -->
  164. <!-- Diff Output (HTML) -->
  165. <div class="card">
  166. <div class="card-header">
  167. <button class="btn btn-secondary btn-sm" type="button" data-toggle="collapse" data-target="#rawDiffBlock">
  168. <i class="fa fa-compress"></i>
  169. </button>
  170. <label class="form-control-label" for="rawDiff">
  171. Diff Output (HTML)
  172. <button type="button" class="btn btn-sm btn-secondary clipboard" data-clipboard-target="#rawDiff">
  173. <i class="fa fa-clipboard"></i>
  174. </button>
  175. </label>
  176. <span ng-show="vm.loading || vm.waiting">- {{ vm.loading ? 'Loading' : 'Waiting' }}...</span>
  177. </div>
  178. <div class="card-block collapse" id="rawDiffBlock">
  179. <div class="form-group row">
  180. <div class="col-sm-12">
  181. <textarea id="rawDiff" class="form-control" ng-model="vm.diff" name="diff" readonly ng-change="vm.update()" rows="15"></textarea>
  182. </div>
  183. </div>
  184. </div>
  185. </div><!-- end of diff output (html) -->
  186. <!-- Debug Output -->
  187. <div class="row">
  188. <div class="col-sm-6">
  189. <h3>Debug Output</h3>
  190. <div class="card" ng-repeat="(category, categoryMessages) in vm.debugOutput track by category">
  191. <div class="card-header">
  192. <h5>
  193. <a ng-click="categoryMessages.isCollapsed = !categoryMessages.isCollapsed">
  194. {{ category }}
  195. </a>
  196. </h5>
  197. </div>
  198. <div class="card-block" uib-collapse="categoryMessages.isCollapsed">
  199. <pre ng-repeat="message in categoryMessages.messages track by $index">
  200. {{ message }}
  201. </pre>
  202. </div>
  203. </div>
  204. </div>
  205. <div class="col-sm-6" ng-show="vm.legislativeOverride">
  206. <h3>Legislative Override</h3>
  207. <div class="html-preview" ng-bind-html="vm.trustHtml(vm.legislativeOverride)"></div>
  208. </div>
  209. </div><!-- end of debug output -->
  210. </div><!-- end of outer container div -->
  211. <script src="bower_components/jquery/dist/jquery.min.js"></script>
  212. <script src="bower_components/tether/dist/js/tether.min.js"></script>
  213. <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
  214. <script src="bower_components/angular/angular.min.js"></script>
  215. <script src="bower_components/angular-sanitize/angular-sanitize.min.js"></script>
  216. <script src="bower_components/clipboard/dist/clipboard.min.js"></script>
  217. <script src="bower_components/ckeditor/ckeditor.js"></script>
  218. <script src="bower_components/ng-ckeditor/ng-ckeditor.min.js"></script>
  219. <script src="bower_components/angular-ui/build/angular-ui.min.js"></script>
  220. <script src="bower_components/angular-animate/angular-animate.min.js"></script>
  221. <script src="bower_components/AngularJS-Toaster/toaster.min.js"></script>
  222. <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
  223. <script type="text/javascript" src="demo.module.js"></script>
  224. <script type="text/javascript" src="demo.controller.js"></script>
  225. <script>
  226. new Clipboard('.clipboard');
  227. </script>
  228. </body>
  229. </html>