css
3 months ago
images
2 years ago
js
1 year ago
sounds
2 years ago
templates
3 months ago
viewer.html
3 months ago
viewer.html
273 lines
| 1 | <!DOCTYPE html> |
| 2 | <html> |
| 3 | |
| 4 | <head> |
| 5 | <title>Debugging</title> |
| 6 | <meta charset="utf-8" /> |
| 7 | </head> |
| 8 | |
| 9 | <body> |
| 10 | <style type="text/css"> |
| 11 | body { |
| 12 | margin: 0; |
| 13 | padding: 0; |
| 14 | } |
| 15 | |
| 16 | .viewer-container { |
| 17 | height: 100vh; |
| 18 | width: 100%; |
| 19 | overflow: hidden; |
| 20 | } |
| 21 | |
| 22 | .fullscreen { |
| 23 | background-color: #333; |
| 24 | } |
| 25 | </style> |
| 26 | |
| 27 | <div class="viewer-container" id="viewer-container"></div> |
| 28 | |
| 29 | <script src="../../../../../wp-includes/js/jquery/jquery.js"></script> |
| 30 | <script src="js/html2canvas.min.js"></script> |
| 31 | <script src="js/three.min.js"></script> |
| 32 | <script src="js/pdf.min.js"></script> |
| 33 | |
| 34 | <!-- Watermark: intercept WebGL texImage2D to stamp watermark on PDF page |
| 35 | canvases just before Three.js uploads them as GPU textures --> |
| 36 | <script> |
| 37 | (function() { |
| 38 | window._epWmConfig = null; |
| 39 | |
| 40 | var hexToRgba = function(hex, alpha) { |
| 41 | if (!hex || hex === 'transparent') { |
| 42 | return 'rgba(0, 0, 0, ' + alpha + ')'; |
| 43 | } |
| 44 | // Support 3 and 6 character hex |
| 45 | hex = hex.replace(/^#/, ''); |
| 46 | if (hex.length === 3) { |
| 47 | hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]; |
| 48 | } |
| 49 | if (!/^[0-9A-Fa-f]{6}$/.test(hex)) { |
| 50 | return 'rgba(0, 0, 0, ' + alpha + ')'; |
| 51 | } |
| 52 | var r = parseInt(hex.slice(0, 2), 16); |
| 53 | var g = parseInt(hex.slice(2, 4), 16); |
| 54 | var b = parseInt(hex.slice(4, 6), 16); |
| 55 | return 'rgba(' + r + ',' + g + ',' + b + ',' + alpha + ')'; |
| 56 | }; |
| 57 | |
| 58 | var drawWm = function(canvas) { |
| 59 | var wm = window._epWmConfig; |
| 60 | if (!wm || !wm.text || !canvas) return; |
| 61 | var ctx = canvas.getContext('2d'); |
| 62 | if (!ctx) return; |
| 63 | ctx.save(); |
| 64 | ctx.setTransform(1, 0, 0, 1, 0, 0); |
| 65 | ctx.fillStyle = hexToRgba(wm.color, wm.opacity); |
| 66 | ctx.font = 'bold ' + wm.fontSize + 'px sans-serif'; |
| 67 | ctx.textAlign = 'center'; |
| 68 | ctx.textBaseline = 'middle'; |
| 69 | |
| 70 | if (wm.style === 'tiled') { |
| 71 | var tw = ctx.measureText(wm.text).width; |
| 72 | var stepX = tw + 80; |
| 73 | var stepY = wm.fontSize * 3; |
| 74 | var diag = Math.sqrt(canvas.width * canvas.width + canvas.height * canvas.height); |
| 75 | ctx.translate(canvas.width / 2, canvas.height / 2); |
| 76 | ctx.rotate(-Math.PI / 6); |
| 77 | for (var y = -diag; y < diag; y += stepY) { |
| 78 | for (var x = -diag; x < diag; x += stepX) { |
| 79 | ctx.fillText(wm.text, x, y); |
| 80 | } |
| 81 | } |
| 82 | } else { |
| 83 | ctx.translate(canvas.width / 2, canvas.height / 2); |
| 84 | ctx.rotate(-Math.atan2(canvas.height, canvas.width)); |
| 85 | var tw2 = ctx.measureText(wm.text).width; |
| 86 | var maxW = Math.sqrt(canvas.width * canvas.width + canvas.height * canvas.height) * 0.8; |
| 87 | if (tw2 > maxW) { |
| 88 | ctx.font = 'bold ' + Math.floor(wm.fontSize * (maxW / tw2)) + 'px sans-serif'; |
| 89 | } |
| 90 | ctx.fillText(wm.text, 0, 0); |
| 91 | } |
| 92 | ctx.restore(); |
| 93 | }; |
| 94 | |
| 95 | // Intercept WebGL texImage2D — Three.js calls this to upload canvas content |
| 96 | // as a GPU texture. Draw watermark on the canvas just before upload. |
| 97 | // This bypasses all pdfjsLib patching issues (non-configurable getters). |
| 98 | var patchTexImage2D = function(proto) { |
| 99 | if (!proto || !proto.texImage2D) return; |
| 100 | var orig = proto.texImage2D; |
| 101 | proto.texImage2D = function() { |
| 102 | var lastArg = arguments[arguments.length - 1]; |
| 103 | if (lastArg instanceof HTMLCanvasElement && window._epWmConfig && lastArg.width >= 300 && lastArg.height >= 300) { |
| 104 | drawWm(lastArg); |
| 105 | } |
| 106 | return orig.apply(this, arguments); |
| 107 | }; |
| 108 | }; |
| 109 | |
| 110 | var patchTexSubImage2D = function(proto) { |
| 111 | if (!proto || !proto.texSubImage2D) return; |
| 112 | var orig = proto.texSubImage2D; |
| 113 | proto.texSubImage2D = function() { |
| 114 | var lastArg = arguments[arguments.length - 1]; |
| 115 | if (lastArg instanceof HTMLCanvasElement && window._epWmConfig && lastArg.width >= 300 && lastArg.height >= 300) { |
| 116 | drawWm(lastArg); |
| 117 | } |
| 118 | return orig.apply(this, arguments); |
| 119 | }; |
| 120 | }; |
| 121 | |
| 122 | if (typeof WebGLRenderingContext !== 'undefined') { |
| 123 | patchTexImage2D(WebGLRenderingContext.prototype); |
| 124 | patchTexSubImage2D(WebGLRenderingContext.prototype); |
| 125 | } |
| 126 | if (typeof WebGL2RenderingContext !== 'undefined') { |
| 127 | patchTexImage2D(WebGL2RenderingContext.prototype); |
| 128 | patchTexSubImage2D(WebGL2RenderingContext.prototype); |
| 129 | } |
| 130 | })(); |
| 131 | </script> |
| 132 | |
| 133 | <script src="js/3dflipbook.min.js"></script> |
| 134 | |
| 135 | <script type="text/javascript"> |
| 136 | var template = { |
| 137 | html: "templates/book-view.html", |
| 138 | links: [], |
| 139 | styles: ["css/ep-black-book-view.css"], |
| 140 | script: "js/default-book-view.js", |
| 141 | sounds: { |
| 142 | startFlip: "sounds/start-flip.mp3", |
| 143 | endFlip: "sounds/end-flip.mp3", |
| 144 | }, |
| 145 | }; |
| 146 | </script> |
| 147 | |
| 148 | <script> |
| 149 | // Ensure the script runs after the page has fully loaded |
| 150 | |
| 151 | // Function to extract the file URL from the query parameters |
| 152 | function extractFileParamData(src, $param) { |
| 153 | // Parse the URL |
| 154 | var url = new URL(src); |
| 155 | // Extract the 'file' parameter from the query string |
| 156 | var fileUrl = url.searchParams.get($param); |
| 157 | return fileUrl; |
| 158 | } |
| 159 | |
| 160 | var parentIframeSrc; |
| 161 | |
| 162 | var params = {}; |
| 163 | |
| 164 | window.onload = function () { |
| 165 | // Access the parent window |
| 166 | var parentWindow = window.parent; |
| 167 | |
| 168 | // Get the iframes within the parent window |
| 169 | var iframes = parentWindow.document.getElementsByTagName("iframe"); |
| 170 | |
| 171 | for (var i = 0; i < iframes.length; i++) { |
| 172 | if (iframes[i].contentWindow === window) { |
| 173 | // Get the src attribute of the iframe |
| 174 | parentIframeSrc = iframes[i].src; |
| 175 | |
| 176 | // The encoded string you want to decode |
| 177 | const encodedString = extractFileParamData(parentIframeSrc, "key"); |
| 178 | |
| 179 | // Step 1: Base64 Decode |
| 180 | const decodedString = atob(encodedString); |
| 181 | |
| 182 | // Step 1: Create URLSearchParams object |
| 183 | const urlParams = new URLSearchParams(decodedString); |
| 184 | |
| 185 | // Step 2: Convert URLSearchParams to Object |
| 186 | const paramsObject = {}; |
| 187 | for (const [key, value] of urlParams.entries()) { |
| 188 | params[key] = |
| 189 | value == "yes" || value == "true" |
| 190 | ? true |
| 191 | : value == "no" |
| 192 | ? false |
| 193 | : value; |
| 194 | } |
| 195 | |
| 196 | // Apply sound setting to template |
| 197 | if (params.sound === false || params.sound === "false") { |
| 198 | template.sounds = {}; |
| 199 | } |
| 200 | |
| 201 | // Determine the page number to open at |
| 202 | var epPageNumber = null; |
| 203 | try { |
| 204 | var topUrl = new URL(window.top.location.href); |
| 205 | var urlPage = topUrl.searchParams.get('eppage'); |
| 206 | if (urlPage && parseInt(urlPage, 10) > 0) { |
| 207 | epPageNumber = parseInt(urlPage, 10); |
| 208 | } |
| 209 | } catch (e) { |
| 210 | // Cross-origin access may fail, ignore |
| 211 | } |
| 212 | if (!epPageNumber && params.pageNumber && parseInt(params.pageNumber, 10) > 1) { |
| 213 | epPageNumber = parseInt(params.pageNumber, 10); |
| 214 | } |
| 215 | |
| 216 | // Set watermark config (the pdfjsLib patch was applied before 3dflipbook loaded) |
| 217 | if (params.watermark_text) { |
| 218 | window._epWmConfig = { |
| 219 | text: params.watermark_text, |
| 220 | fontSize: parseInt(params.watermark_font_size, 10) || 48, |
| 221 | color: (function() { var c = params.watermark_color; if (c && c.charAt(0) !== '#') c = '#' + c; return c || '#000000'; })(), |
| 222 | opacity: (parseInt(params.watermark_opacity, 10) || 15) / 100, |
| 223 | style: params.watermark_style || 'center' |
| 224 | }; |
| 225 | } |
| 226 | |
| 227 | // Build FlipBook options |
| 228 | var flipBookOptions = { |
| 229 | pdf: extractFileParamData(parentIframeSrc, "file"), |
| 230 | template: template, |
| 231 | }; |
| 232 | |
| 233 | // Set initial page via autoNavigation option |
| 234 | if (epPageNumber && epPageNumber > 1) { |
| 235 | flipBookOptions.autoNavigation = { |
| 236 | pageN: epPageNumber, |
| 237 | }; |
| 238 | } |
| 239 | |
| 240 | // Initialize FlipBook |
| 241 | jQuery("#viewer-container").FlipBook(flipBookOptions); |
| 242 | |
| 243 | |
| 244 | const newSettings = decodedString; |
| 245 | |
| 246 | let oldData = localStorage.getItem("flipbook_settings"); |
| 247 | let settingsArray; |
| 248 | |
| 249 | try { |
| 250 | settingsArray = oldData ? JSON.parse(oldData) : []; |
| 251 | if (!Array.isArray(settingsArray)) { |
| 252 | settingsArray = []; |
| 253 | } |
| 254 | } catch (e) { |
| 255 | settingsArray = []; |
| 256 | } |
| 257 | |
| 258 | settingsArray.push(newSettings); |
| 259 | |
| 260 | let newData = JSON.stringify(settingsArray); |
| 261 | localStorage.setItem("flipbook_settings", newData); |
| 262 | |
| 263 | let updatedData = localStorage.getItem("flipbook_settings"); |
| 264 | |
| 265 | |
| 266 | break; // Exit the loop once the matching iframe is found and processed |
| 267 | } |
| 268 | } |
| 269 | }; |
| 270 | </script> |
| 271 | </body> |
| 272 | |
| 273 | </html> |