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