css
4 days ago
images
2 years ago
js
11 months ago
sounds
2 years ago
templates
2 weeks ago
viewer.html
4 days ago
viewer.html
326 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 | // The library reads several behaviours from the BOOK PROPS, not from |
| 234 | // top-level FlipBook(options) — FlipBook(options) only forwards a known |
| 235 | // key set, so e.g. options.rtl is silently dropped. The one reliable |
| 236 | // hook is `propertiesCallback`, which the lib invokes with the fully-built |
| 237 | // props right before constructing the Book; the returned object is what |
| 238 | // Book receives. Use a single callback for every prop-level override. |
| 239 | var wantRtl = params.flipbook_rtl === true || params.flipbook_rtl === "true"; |
| 240 | |
| 241 | // Link highlight (fbs-82452). The lib defaults highlightLinks:true and, |
| 242 | // when true, injects `.fb3d-link a { background-color: rgba(255,255,0,.1) }` |
| 243 | // — a yellow tint the standard PDF.js viewer never shows. It's now a user |
| 244 | // choice (default OFF), and we deliberately do NOT fall back to the lib's |
| 245 | // yellow: the highlight only appears when the user both enables the toggle |
| 246 | // AND picks a color. Toggle on with no color → no highlight (the flipbook |
| 247 | // library can't read per-link colors embedded in the PDF, so the single |
| 248 | // picked color is the only source — see the embedpress-pdf skill). |
| 249 | var wantToggle = params.flipbook_highlight_links === true || params.flipbook_highlight_links === "true"; |
| 250 | var highlightColor = params.flipbook_highlight_color || ""; |
| 251 | var wantHighlight = wantToggle && highlightColor !== ""; |
| 252 | |
| 253 | flipBookOptions.propertiesCallback = function (props) { |
| 254 | // Only let the lib build its link layer when we'll actually colour it; |
| 255 | // otherwise leave highlightLinks off so no yellow CSS is injected. |
| 256 | props.highlightLinks = wantHighlight; |
| 257 | |
| 258 | // Right-to-left page flipping for right-to-left reading direction — |
| 259 | // inverts flip direction, cover placement, and page numbering (fbs-82602). |
| 260 | if (wantRtl) { |
| 261 | props.rtl = true; |
| 262 | } |
| 263 | return props; |
| 264 | }; |
| 265 | |
| 266 | // Apply the chosen colour. The lib exposes no colour prop and injects its |
| 267 | // `.fb3d-link a` rule into the page CSS layer, so we override it two ways so |
| 268 | // it lands regardless of which scope the layer mounts in: |
| 269 | // 1. A CSS custom property `--ep-flipbook-highlight-color` on :root + body. |
| 270 | // ep-black-book-view.css (the template `styles` entry the lib concatenates |
| 271 | // AFTER its own layer CSS) reads it, so it wins on source order. |
| 272 | // 2. A direct `<style>` in the document head with !important — covers the |
| 273 | // case where the links render in the main viewer document. |
| 274 | if (wantHighlight) { |
| 275 | document.documentElement.style.setProperty("--ep-flipbook-highlight-color", highlightColor); |
| 276 | if (document.body) { |
| 277 | document.body.style.setProperty("--ep-flipbook-highlight-color", highlightColor); |
| 278 | } |
| 279 | var hlStyle = document.createElement("style"); |
| 280 | hlStyle.textContent = |
| 281 | ".fb3d-link a { background-color: " + highlightColor + " !important; }" + |
| 282 | ".fb3d-link a:hover { background-color: " + highlightColor + " !important; }"; |
| 283 | document.head.appendChild(hlStyle); |
| 284 | } |
| 285 | |
| 286 | // Set initial page via autoNavigation option |
| 287 | if (epPageNumber && epPageNumber > 1) { |
| 288 | flipBookOptions.autoNavigation = { |
| 289 | pageN: epPageNumber, |
| 290 | }; |
| 291 | } |
| 292 | |
| 293 | // Initialize FlipBook |
| 294 | jQuery("#viewer-container").FlipBook(flipBookOptions); |
| 295 | |
| 296 | |
| 297 | const newSettings = decodedString; |
| 298 | |
| 299 | let oldData = localStorage.getItem("flipbook_settings"); |
| 300 | let settingsArray; |
| 301 | |
| 302 | try { |
| 303 | settingsArray = oldData ? JSON.parse(oldData) : []; |
| 304 | if (!Array.isArray(settingsArray)) { |
| 305 | settingsArray = []; |
| 306 | } |
| 307 | } catch (e) { |
| 308 | settingsArray = []; |
| 309 | } |
| 310 | |
| 311 | settingsArray.push(newSettings); |
| 312 | |
| 313 | let newData = JSON.stringify(settingsArray); |
| 314 | localStorage.setItem("flipbook_settings", newData); |
| 315 | |
| 316 | let updatedData = localStorage.getItem("flipbook_settings"); |
| 317 | |
| 318 | |
| 319 | break; // Exit the loop once the matching iframe is found and processed |
| 320 | } |
| 321 | } |
| 322 | }; |
| 323 | </script> |
| 324 | </body> |
| 325 | |
| 326 | </html> |