1/*  DokuWiki MoaiEditor Buttons.js file
2    Version : 0.5 (May 5, 2026)
3    Author  : MoaiTools <info@moaitools.org>
4    License : GPL 3 (http://www.gnu.org/licenses/gpl.html) */
5
6/*  This class creates all the (mostly blue and green) buttons you see at the top.
7    It includes a few functions for handling some of the buttons functionality.
8    Note: the non-modal sidebar buttons are created in layout.js.
9*/
10MoaiEditor.Buttons = class {
11
12    constructor(outer) {
13
14        // Arguments
15        this.outer = outer;
16
17        // Objects
18        this.dividerPos = new MoaiEditor.LocalStorage('divider_pos', 50, [0,5,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100]);
19
20        /* ================= Regular Buttons ================= */
21
22        // Preview button
23        this.preview = new MoaiEditor.Button({
24            name: 'preview',
25            text: 'Preview',
26            default_mode: 'normal',
27            cls_remove: 'moaied-loading moaied-error',
28            icon: '<img src="lib/plugins/moaieditor/icons/loading.png">',
29            onClick: moaiEditor.ajax.onPreviewBtnClick.bind(moaiEditor.ajax),
30            outer: this,
31            states: {
32                normal: {
33                    next_mode: 'normal',
34                },
35                loading: {
36                    cls_add: 'moaied-loading',
37                    next_mode: 'loading',
38                },
39                error: {
40                    cls_add: 'moaied-error',
41                    tooltip: "Server<br>connection error<br><hr><i>check details<br>in the browser's<br>console</i>",
42                    next_mode: 'error',
43                },
44            }
45        });
46        // Save button
47        this.save = new MoaiEditor.Button({
48            name: 'save',
49            text: 'Save',
50            classes: 'text',
51            tooltip: 'Save the<br>document',
52            onClick: this.onclick_save,
53            //tooltip_width: 160,
54            outer: this,
55            tooltips: {button:'Save the<br>document'}     // Handle tooltip messages by multiple classes (draft save, captcha, etc)
56        });
57        // Cancel button
58        this.cancel = new MoaiEditor.Button({
59            name: 'cancel',
60            text: 'Cancel',
61            classes: 'text',
62            tooltip: 'Discard<br>changes',
63            outer: this
64        });
65        // Back button
66        this.back = new MoaiEditor.Button({
67            name: 'back',
68            icon: 'ico_arrowleft',
69            classes: 'back transparent',
70            tooltip: 'Exit the editor<br><i>but keep the<br>draft</i>',
71            onClick: this.onclick_back,
72            outer: this
73        });
74        // Start moaieditor by default button
75        this.enabled = new MoaiEditor.Button({
76            name: 'enabled',
77            icon: 'ico_power',
78            default_mode: 'on',
79            cls_remove: 'gray',
80            onClick: null,
81            outer: this,
82            states: {
83                on: {
84                    tooltip    : 'Editor<br>enabled<br><i>by default</i>',
85                    cls_add    : '',
86                    next_mode  : 'off',
87                },
88                off: {
89                    tooltip    : 'Editor<br>disabled<br><i>by default</i>',
90                    cls_add    : 'gray',
91                    next_mode  : 'on',
92                },
93            }
94        });
95        // Full width moaieditor button
96        this.fullwidth = new MoaiEditor.Button({
97            name: 'fullwidth',
98            icon: 'ico_fullwidth',
99            default_mode: 'off',
100            cls_remove: 'gray',
101            onClick: this.onclick_fullwidth,
102            outer: this,
103            states: {
104                on: {
105                    tooltip    : 'Full width<br><i>enabled</i>',
106                    cls_add    : '',
107                    next_mode  : 'off',
108                },
109                off: {
110                    tooltip    : 'Full width<br><i>disabled</i>',
111                    cls_add    : 'gray',
112                    next_mode  : 'on',
113                },
114            }
115        });
116        // Layout button
117        this.panes = new MoaiEditor.Button({
118            name: 'panes',
119            icon: 'ico_layout_row',
120            default_mode: 'row',
121            onClick: this.onclick_panes,
122            outer: this,
123            states: {
124                single: {
125                    icon       : 'ico_layout_single',
126                    tooltip    : 'Single-pane<br>layout',
127                    next_mode  : 'row',
128                },
129                row: {
130                    icon       : 'ico_layout_row',
131                    tooltip    : 'Side-by-side<br>layout',
132                    next_mode  : 'column',
133                },
134                column: {
135                    icon       : 'ico_layout_col',
136                    tooltip    : 'Top-bottom<br>layout',
137                    next_mode  : 'single',
138                }
139            }
140        });
141        // Settings button
142        this.settings = new MoaiEditor.Button({
143            name: 'settings',
144            icon: 'ico_settings',
145            tooltip: 'Settings<hr><i>not functional<br>yet</i>',
146            outer: this
147        });
148        // Move divider to the left button
149        this.divider_moveleft = new MoaiEditor.Button({
150            name: 'divider_moveleft',
151            icon: 'ico_divider_left',
152            default_mode: 'row',
153            onClick: this.onclick_divider_left,
154            states: {
155                row: {
156                    icon       : null,
157                    tooltip    : 'Move divider<br>to the left',
158                },
159                column: {
160                    icon       : 'ico_divider_up',
161                    tooltip    : 'Move divider<br>up',
162                }
163            },
164            outer: this
165        });
166        // Move divider to the right button
167        this.divider_moveright = new MoaiEditor.Button({
168            name: 'divider_moveright',
169            icon: 'ico_divider_right',
170            default_mode: 'row',
171            onClick: this.onclick_divider_right,
172            states: {
173                row: {
174                    icon       : null,
175                    tooltip    : 'Move divider<br>to the right',
176                },
177                column: {
178                    icon       : 'ico_divider_down',
179                    tooltip    : 'Move divider<br>down',
180                }
181            },
182            outer: this
183        });
184        // Live Preview button
185        this.livepreview = new MoaiEditor.Button({
186            name: 'livepreview',
187            icon: 'ico_livepreview',
188            default_mode: 'on',
189            cls_remove: 'gray green',
190            onClick: null,
191            states: {
192                on: {
193                    tooltip    : 'Live preview<br>on',
194                    cls_add    : 'green',
195                    next_mode  : 'off',
196                },
197                off: {
198                    tooltip    : 'Live preview<br>off',
199                    cls_add    : 'gray',
200                    next_mode  : 'on',
201                },
202            },
203            outer: this
204        });
205        // Partial preview button
206        this.partialpreview = new MoaiEditor.Button({
207            name: 'partialpreview',
208            icon: 'ico_rabbit',
209            default_mode: 'on',
210            cls_remove: 'gray green',
211            onClick: null,
212            states: {
213                on: {
214                    tooltip    : 'Partial preview<br>on<hr><i>Renders only the<br>changed parts of<br>the document</i>',
215                    cls_add    : 'green',
216                    next_mode  : 'off',
217                },
218                off: {
219                    tooltip    : 'Partial preview<br>off<hr><i>Renders the<br>whole document<br>every time</i>',
220                    cls_add    : 'gray',
221                    next_mode  : 'on',
222                },
223            },
224            outer: this
225        });
226
227        // Auto scroll button
228        this.autoscroll = new MoaiEditor.Button({
229            name: 'autoscroll',
230            icon: 'ico_autoscroll2',
231            default_mode: 'on',
232            cls_remove: 'gray green',
233            onClick: null,
234            states: {
235                off: {
236                    tooltip    : 'No synchronized scrolling',
237                    cls_add    : 'gray',
238                    next_mode  : 'on',
239                },
240                on: {
241                    icon       : 'ico_autoscroll2',
242                    tooltip    : "Synchronized scrolling",
243                    cls_add    : 'green',
244                    next_mode  : 'off',
245                }
246            },
247            outer: this
248        });
249
250        /* ================= Phone Buttons ================= */
251
252        // Go Left
253        this.goLeft = new MoaiEditor.Button({
254            name: 'goLeft',
255            icon: 'ico_arrowleft',
256            classes: 'moaied-phone-go-button  darkgray'
257        });
258
259        // Go Right
260        this.goRight = new MoaiEditor.Button({
261            name: 'goRight',
262            icon: 'ico_arrowright',
263            classes: 'moaied-phone-go-button  darkgray'
264        });
265
266        /* ===================== Init ==================== */
267
268        // Update tooltips of divider buttons
269        this.setDividerButtonsTooltip(this.divider_moveleft);
270    }
271    // ────────────────────────────────────
272    onclick_back() {
273        window.location.href = 'doku.php?id='+JSINFO.id;
274    }
275    // ────────────────────────────────────
276    onclick_fullwidth() {
277        document.body.querySelector('#moaied__panes_wrapper').classList.add('moaied-fullpage-flash');
278        setTimeout(function() {
279            document.body.querySelector('#moaied__panes_wrapper').classList.remove('moaied-fullpage-flash');
280        }, 300);
281        moaiEditor.buttons.onclick_panes();
282    }
283    // ────────────────────────────────────
284    onclick_panes() {
285        moaiEditor.layout.desktop.onClickPanesBtn();
286    }
287    // ────────────────────────────────────
288    onclick_divider_left() {
289        this.outer.updateDivider(-5);
290        this.outer.setDividerButtonsTooltip();
291    }
292    // ────────────────────────────────────
293    onclick_divider_right() {
294        this.outer.updateDivider(5);
295        this.outer.setDividerButtonsTooltip();
296    }
297    // ────────────────────────────────────
298    updateDivider(delta=0) {
299        var left = moaiEditor.layout.editpane;
300        var right =  moaiEditor.layout.preview;
301        var pos = parseInt(this.dividerPos.value);
302        pos += delta;
303        pos = Math.max(0,pos);
304        pos = Math.min(100,pos);
305        this.dividerPos.value = pos;
306        left.style.flexBasis = pos+"%";
307        right.style.flexBasis = (100-pos)+"%";
308    }
309    // ────────────────────────────────────
310    setDividerButtonsTooltip() {
311
312        // Button Left
313        var pos = 100 - parseInt(this.dividerPos.value);
314        this.divider_moveleft.states.row.tooltip = 'Move divider<br>to the left<br><i>'+pos+'%</i>';
315        this.divider_moveleft.states.column.tooltip = 'Move divider<br>up<br><i>'+pos+'%</i>';
316        this.divider_moveleft.update();
317
318        // Button Right
319        pos = this.dividerPos.value;
320        this.divider_moveright.states.row.tooltip = 'Move divider<br>to the right<br><i>'+pos+'%</i>';
321        this.divider_moveright.states.column.tooltip = 'Move divider<br>down<br><i>'+pos+'%</i>';
322        this.divider_moveright.update();
323    }
324    // ────────────────────────────────────
325    styleExitButtons() {
326
327        // Enable or disable Save and Cancel
328        if (!window.textChanged) {
329            this.save.handle.disabled = true;
330        } else {
331            this.save.handle.disabled = false;
332        }
333    }
334}; // End Class
335
336
337
338