1/* DokuWiki MoaiEditor Preview.js file 2 Version : 0.5a (May 6, 2026) 3 Author : MoaiTools <info@moaitools.org> 4 License : GPL 3 (http://www.gnu.org/licenses/gpl.html) */ 5 6/* This class implements some methods for working with the preview. 7*/ 8MoaiEditor.Preview = class { 9 10 constructor () { 11 12 // Constants 13 this.name = 'Preview'; 14 15 // Variables 16 this.container = null; // Preview container element 17 18 // Objects 19 this.scroll = new MoaiEditor.PreviewScroll(this); 20 } 21 // ┌───────────────────────────────────┐ 22 // │ Public │ 23 // └───────────────────────────────────┘ 24 25 init() { 26 this.container = document.querySelector("#moaied__preview"); 27 // Create content div 28 this.content = moaiEditor.createHTML('<div id="moaied__preview_content"></div>'); 29 this.container.appendChild(this.content); 30 // Create flash box 31 this.flashbox = moaiEditor.createHTML('<div id="moaied__preview_flashbox" class="moaied-flashbox"></div>'); 32 } 33 // ──────────────────────────────────── 34 set pointerEvents(boolean) { 35 if (boolean) 36 this.container.style.pointerEvents = 'auto'; 37 else 38 this.container.style.pointerEvents = 'none'; 39 } 40 // ──────────────────────────────────── 41 flash(flash, data=null) { 42 if (flash == 'remove') { 43 this.flashbox.remove(); 44 return; 45 } 46 if (flash === null) 47 return; 48 this.flashbox.remove(); 49 this.flashbox = moaiEditor.createHTML('<div id="moaied__preview_flashbox" class="moaied-flashbox"></div>'); 50 if (flash === false) 51 this.flashbox.classList.add('red'); 52 const rect = moaiEditor.scroll.tools.getRectRelativeToParent(data.element); 53 this.flashbox.style.top = rect.top + 'px'; 54 this.flashbox.style.left = rect.left + 'px'; 55 this.flashbox.style.width = rect.width + 'px'; 56 this.flashbox.style.height = rect.height + 'px'; 57 this.container.appendChild(this.flashbox); 58 } 59 // ┌───────────────────────────────────┐ 60 // │ Input events │ 61 // └───────────────────────────────────┘ 62 63 onScroll() { 64 // Debugline 65 //this.scroll.debugLine(); 66 } 67}; // End Class 68// ▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆ 69// ▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆ 70 71/* This class implements the 'scroll.max', 'scroll.top' and 'scroll.smooth' 72 getters and setters. 73*/ 74MoaiEditor.PreviewScroll = class { 75 76 constructor (outer) { 77 this.outer = outer; 78 this.smoothvalue = false; 79 } 80 // ──────────────────────────────────── 81 get max() { 82 return moaiEditor.scroll.tools.getMaxScrollY(this.outer.container); 83 } 84 // ──────────────────────────────────── 85 get top() { 86 return this.outer.container.scrollTop; 87 } 88 set top(value) { 89 this.outer.container.scrollTop = value; 90 } 91 // ──────────────────────────────────── 92 get smooth() { 93 return this.smoothvalue; 94 } 95 set smooth(boolean) { 96 var value = 'auto'; 97 if (boolean) 98 value = 'smooth'; 99 this.smoothvalue = boolean; 100 this.outer.container.style.scrollBehavior = value; 101 } 102 // ──────────────────────────────────── 103 debugLine() { 104 // Exit if debugline is not enabled 105 const line = document.querySelector("#moai__debug div:nth-child(2)"); 106 if (!line) return; 107 // Debug line 108 const text = "scroll:"+Math.floor(this.top)+" maxScroll:"+this.max; 109 line.textContent = text; 110 } 111}; // End Class 112