1/* DokuWiki MoaiEditor Start.js file 2 Author : MoaiTools <info@moaitools.org> 3 License : GPL 3 (http://www.gnu.org/licenses/gpl.html) */ 4 5/* Handles the button that starts the editor. 6 7 It creates two button options, so you can use the one you prefer in your template: 8 a) A small PNG image (intended to be put in the '#size__ctl' element of the native 9 Dokuwiki editor, next to the other small buttons). 10 b) A proper button with an SVG icon (which by default goes next to the submit buttons 11 save, cancel and preview), but you can of course place it anywhere else. 12*/ 13MoaiEditor.StartButton = class { 14 15 constructor() { 16 this.png = this.createPNG(); 17 this.button = this.createButton(); 18 } 19 20 createPNG () { 21 22 const baseurl = JSINFO.plugin_moaieditor.base_url; 23 const png = moaiEditor.createHTML(`<img id="moaied-start-png" src="${baseurl}/icons/start.png"></button>`); 24 png.addEventListener("click", this.onClick.bind(this)); 25 return png; 26 } 27 28 createButton () { 29 const html = ` 30 <svg xmlns = "http://www.w3.org/2000/svg" 31 viewBox = "0 0 24 22" width="24" height="22" 32 style = "fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:butt;"> 33 <path d=" M 2 5 v 13 a 2 2 0 0 0 2 2 h 16 a 2 2 0 0 0 2 -2 v -13"/> 34 <path fill="currentColor" d=" M 2 5 v -0.5 a 2 2 0 0 1 2 -2 h 16 a 2 2 0 0 1 2 2 v 0.5"/> 35 <path stroke-width="1" d=" M 12 5 v 15"/> 36 </svg>`; 37 const button = moaiEditor.createHTML('<button id="moaied-start-button" type="submit"> '+html+' </button>'); 38 button.addEventListener("click", this.onClick.bind(this)); 39 return button; 40 } 41 42 onClick () { 43 event.preventDefault(); // Prevent click from submitting the form 44 moaiEditor.startEditor(); // Start the editor now 45 } 46}; // End Class 47 48 49 50 51 52 53