/* DokuWiki MoaiEditor Default.js file Version : 0.5 (May 5, 2026) Author : MoaiTools License : GPL 3 (http://www.gnu.org/licenses/gpl.html) */ /* Template class ‾‾‾‾‾‾‾‾‾‾‾‾‾‾ This is the class for handling templates. It serves 2 purposes: 1. Add a button to the edit page of Dokuwiki in order to start the editor. 2. Find all the necessary elements in the page needed by the editor (e.g. textarea, toolbar, save and cancel buttons, etc). If you are using a template that has the HTML elements in different locations in the DOM tree or they have different ids, the elements might not be found by this class, and in that case you can create a new class that overrides specific methods in order to support you template. Also you can override the method that positions the toggle button that starts MoaiEditor, to put it anywhere you want in the page. See 'templates/sprintdoc.js' for an example of such a class. If you want to style MoaiEditor according to specific needs of your template, you can add a CSS file with the same name of your template file in this folder. See 'templates/sprintdoc.css' for an example of such a css file. See 'README' to learn how to support a new template. */ MoaiEditor.Template = class { constructor(name) { // Template name for console messages this.name = name; this.prefix = "moaiEditor templates/"+name+".js :: "; this.suffix = ".\nThis is usually due to an incompatibility with your template, which is easy to fix.\nSee the README file in lib/plugins/moaieditor/ for instructions on how to make your template compatible with this editor.\nMoaiEditor will not run until this problem is resolved."; // Flag to inform others that all HTML elements have been found and the editor toggle button has been added this.ready = false; // Methods for finding each element we need for the editor this.finders = { hide : this.find_ElementsToHide, messages : this.find_Messages, toolbar : this.find_Toolbar, editSummary : this.find_EditSummary, editForm : this.find_EditForm, editBar : this.find_EditBar, textarea : this.find_Textarea, editButtons : this.find_EditButtons, //pagetools : this.find_Pagetools, }; // Handles of each element found (to be used later) this.elements = {}; } // ──────────────────────────────────── detectTemplate() { return true; } // ──────────────────────────────────── findElements() { this.counter = -1; this.interval = setInterval(this.onInterval.bind(this), 150); } // ──────────────────────────────────── onInterval() { var element; this.counter += 1; var not_found = []; for (let name in this.finders) { try { element = this.finders[name].bind(this)(); } catch(error) { this.warn("The following problem occured while trying to find the '"+name+"' element(s):\n >> "+error+this.suffix); moaiEditor.enabled.value = 'off'; clearInterval(this.interval); return; } if (element === undefined || element === null) not_found.push(name); this.elements[name] = element; } // Show retries if (this.counter > 0) this.log("Finding html elements - retry #"+this.counter+" - Missing: "+JSON.stringify(not_found)); // Timeout if (this.counter >= 50) { this.warn("Failed to find all HTMl elements - Missing: "+JSON.stringify(not_found)+this.suffix); clearInterval(this.interval); return; } // Success if (not_found.length == 0) { this.log("All elements found"); clearInterval(this.interval); this.addStartButton.bind(this)(); this.ready = true; // Start the editor automatically if it is enabled if (moaiEditor.enabled.value == 'on') moaiEditor.startEditor(); } } // ──────────────────────────────────── log (message) { } warn (message) { console.warn (this.prefix + message); } // ╭─────────────────────────────────────────────╮ // ╰─────────────────────────────────────────────╯ addStartButton() { // Option 1: Add a proper button this.elements.editButtons.appendChild(moaiEditor.start.button); // Option 2: Add a small image (to blend well in the size control buttons area of the DokuWiki native editor) //document.body.querySelector("#size__ctl").appendChild(moaiEditor.start.png); } find_ElementsToHide() { // Find the elements which contain the old editor in order to be hidden. // This method can return a single element or an array of elements. return document.body.querySelector("#dokuwiki__site"); } find_Messages() { // Find the displayed messages (info, error, success, notify) usually rendered by inc/html.php -> html_msgarea(). // Some templates like bootstrap3 implement their own message rendering function and don't use html_msgarea(). // In order to check how (and if) your template's messages are being displayed in this editor, you can simulate // fake messages by either: // a) Adding '&fakemsg' to the browser's URL while in edit mode. // b) Set the MOAIED_FAKE_MESSAGES constant to true in: lib/plugins/moaieditor/action.php var query = ""; var container = "#dokuwiki__content div.pad.group "; query += container + "div.error, "; query += container + "div.info, "; query += container + "div.success, "; query += container + "div.notify "; var messages = document.body.querySelectorAll(query); return messages; } find_Pagetools() { // Find the page-tools (the right-side vertical tool bar). // We are not showing it now, but someone might need it in the future. return document.body.querySelector("#dokuwiki__pagetools"); } find_Toolbar() { // Find the toolbar (which holds the buttons above the textarea: bold, italics, underline, etc) return document.body.querySelector("#tool__bar"); } find_EditForm() { // Find the HTML form (which sends the changes back to the server) return document.body.querySelector("#dw__editform"); } find_EditBar() { // Find the container for the form buttons (save, preview, cancel) and size control buttons return document.body.querySelector("#wiki__editbar"); } find_Textarea() { // Find the textarea (where you edit the document) return document.body.querySelector("#wiki__text"); } find_EditButtons() { // Find the edit-buttons container (so we can insert the moaiEditor toggle button here) return document.body.querySelector("#wiki__editbar .editButtons"); } find_EditSummary() { // Find the container for the edit summary input fields (text input and checkbox) return document.body.querySelector("#wiki__editbar .summary"); } }; // End Class