debugger.php 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
  1. <?php
  2. $files = glob("test/*.{html,htm,php}", GLOB_BRACE);
  3. ?>
  4. <!DOCTYPE html>
  5. <html lang="en">
  6. <head>
  7. <title>dompdf debugger</title>
  8. <script type="text/javascript" src="jquery-1.4.2.js"></script>
  9. <script type="text/javascript">
  10. function updateAddress(){
  11. var addressbar = $('#addressbar'),
  12. preview = $('#preview'),
  13. preview_html = $('#preview_html'),
  14. address = encodeURI(addressbar.val()),
  15. addressHTML = address,
  16. addressPDF = address,
  17. basePath = "";
  18. if ( !/[a-z]+:\/\//.test(address) ) {
  19. addressHTML = "test/"+address+"?"+(new Date).getTime();
  20. basePath = "www/test/";
  21. }
  22. // HTML file
  23. preview_html.attr("src", "about:blank");
  24. preview_html.attr("src", addressHTML);
  25. // PDF file
  26. preview.attr("src", "about:blank");
  27. setTimeout(function(){
  28. address = "../dompdf.php?base_path="+basePath+"&options[Attachment]=0&input_file="+addressPDF+"#toolbar=0&view=FitH&statusbar=0&messages=0&navpanes=0";
  29. preview.attr('src', address);
  30. }, 0.1);
  31. }
  32. function log(str){
  33. var console = $("#console");
  34. str = str || "(nothing)";
  35. console.html(console.html() + str + "<hr />");
  36. console.scrollTop(console[0].scrollHeight);
  37. }
  38. function resizePage(){
  39. var page = $("#page");
  40. var height = $(window).height() - page.offset().top - 40;
  41. $("iframe, #console").height(height);
  42. }
  43. function navigateExamples(way) {
  44. var select = $('#examples')[0],
  45. n = select.options.length;
  46. if (way == "previous")
  47. select.selectedIndex = (select.selectedIndex - 1) % n;
  48. else
  49. select.selectedIndex = (select.selectedIndex + 1) % n;
  50. $('#addressbar').val($("#examples").val());
  51. updateAddress();
  52. }
  53. $(function(){
  54. resizePage();
  55. $(window).resize(resizePage);
  56. $('#preview').load(function(){
  57. if (this.src == "about:blank") return;
  58. $.ajax({
  59. url: '../lib/fonts/log.htm',
  60. success: log,
  61. cache: false
  62. });
  63. });
  64. $('#addressbar').val($("#examples").val());
  65. // Catch F5 to reload the iframes, not the page itself
  66. $(document).keydown(function(event) {
  67. if (event.which == 116) {
  68. event.preventDefault();
  69. updateAddress();
  70. }
  71. });
  72. });
  73. </script>
  74. <style type="text/css">
  75. html, body {
  76. margin: 0;
  77. padding: 0;
  78. }
  79. td {
  80. padding: 0;
  81. }
  82. #page {
  83. width: 100%;
  84. border: none;
  85. border-spacing: 0;
  86. border-collapse: collapse;
  87. }
  88. iframe {
  89. width: 100%;
  90. }
  91. #output td {
  92. border: 1px solid #999;
  93. }
  94. #console-container {
  95. vertical-align: top;
  96. }
  97. #console {
  98. background: #eee;
  99. overflow: scroll;
  100. padding: 4px;
  101. }
  102. #console pre {
  103. margin: 2px 0;
  104. }
  105. #console, #console pre {
  106. font-size: 11px;
  107. font-family: Courier, "Courier new", monospace;
  108. white-space: pre-wrap;
  109. }
  110. </style>
  111. </head>
  112. <body>
  113. <table id="page">
  114. <tr>
  115. <td colspan="3">
  116. <button onclick="$('#console').html('')" style="float: right;">Reset</button>
  117. <button onclick="navigateExamples('previous')">&lt;</button>
  118. <select onchange="$('#addressbar').val($(this).val()); updateAddress()" id="examples">
  119. <?php foreach($files as $file) { ?>
  120. <option value="<?php echo basename($file); ?>"><?php echo basename($file); ?></option>
  121. <?php } ?>
  122. </select>
  123. <button onclick="navigateExamples('next')">&gt;</button>
  124. <input id="addressbar" type="text" size="100" value="" />
  125. <button onclick="updateAddress()">Go</button>
  126. </td>
  127. </tr>
  128. <tr id="output">
  129. <td style="width: 40%;">
  130. <iframe id="preview_html" name="preview_html" src="about:blank" frameborder="0" marginheight="0" marginwidth="0"></iframe>
  131. </td>
  132. <td style="width: 40%;">
  133. <iframe id="preview" name="preview" src="about:blank" frameborder="0" marginheight="0" marginwidth="0"></iframe>
  134. </td>
  135. <td style="min-width: 400px; width: 20%;" id="console-container">
  136. <div id="console"></div>
  137. </td>
  138. </tr>
  139. </table>