/*  DokuWiki MoaiEditor Buttons.js file
    Version : 0.5a (May 6, 2026)
    Author  : MoaiTools <info@moaitools.org>
    License : GPL 3 (http://www.gnu.org/licenses/gpl.html) */

/*  This class creates all the (mostly blue and green) buttons you see at the top.
    It includes a few functions for handling some of the buttons functionality.
    Note: the non-modal sidebar buttons are created in layout.js.
*/
MoaiEditor.Buttons = class {

    constructor(outer) {
    
        // Arguments
        this.outer = outer;
        
        // Objects
        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]);
    
        /* ================= Regular Buttons ================= */
    
        // Preview button 
        this.preview = new MoaiEditor.Button({
            name: 'preview',
            text: 'Preview',
            default_mode: 'normal',
            cls_remove: 'moaied-loading moaied-error',
            icon: '<img src="lib/plugins/moaieditor/icons/loading.png">',
            onClick: moaiEditor.ajax.onPreviewBtnClick.bind(moaiEditor.ajax),
            outer: this,
            states: {
                normal: {
                    next_mode: 'normal',
                },
                loading: {
                    cls_add: 'moaied-loading',
                    next_mode: 'loading',
                },
                error: {
                    cls_add: 'moaied-error',
                    tooltip: "Server<br>connection error<br><hr><i>check details<br>in the browser's<br>console</i>",
                    next_mode: 'error',
                },
            }
        });    
        // Save button 
        this.save = new MoaiEditor.Button({
            name: 'save',
            text: 'Save',
            classes: 'text',
            tooltip: 'Save the<br>document',
            onClick: this.onclick_save,
            //tooltip_width: 160,
            outer: this,
            tooltips: {button:'Save the<br>document'}     // Handle tooltip messages by multiple classes (draft save, captcha, etc)
        });    
        // Cancel button
        this.cancel = new MoaiEditor.Button({
            name: 'cancel',
            text: 'Cancel',
            classes: 'text',
            tooltip: 'Discard<br>changes',
            outer: this
        });    
        // Back button 
        this.back = new MoaiEditor.Button({
            name: 'back',
            icon: 'ico_arrowleft',
            classes: 'back transparent',
            tooltip: 'Exit the editor<br><i>but keep the<br>draft</i>',
            onClick: this.onclick_back,
            outer: this
        });        
        // Start moaieditor by default button
        this.enabled = new MoaiEditor.Button({
            name: 'enabled',
            icon: 'ico_power',
            default_mode: 'on',
            cls_remove: 'gray',
            onClick: null,
            outer: this,
            states: {
                on: {
                    tooltip    : 'Editor<br>enabled<br><i>by default</i>',
                    cls_add    : '',
                    next_mode  : 'off',
                },
                off: {
                    tooltip    : 'Editor<br>disabled<br><i>by default</i>',
                    cls_add    : 'gray',
                    next_mode  : 'on',
                },
            }
        });   
        // Full width moaieditor button
        this.fullwidth = new MoaiEditor.Button({
            name: 'fullwidth',
            icon: 'ico_fullwidth',
            default_mode: 'off',
            cls_remove: 'gray',
            onClick: this.onclick_fullwidth,
            outer: this,
            states: {
                on: {
                    tooltip    : 'Full width<br><i>enabled</i>',
                    cls_add    : '',
                    next_mode  : 'off',
                },
                off: {
                    tooltip    : 'Full width<br><i>disabled</i>',
                    cls_add    : 'gray',
                    next_mode  : 'on',
                },
            }
        });
        // Layout button
        this.panes = new MoaiEditor.Button({
            name: 'panes',
            icon: 'ico_layout_row',
            default_mode: 'row',
            onClick: this.onclick_panes,
            outer: this,
            states: {
                single: {
                    icon       : 'ico_layout_single',
                    tooltip    : 'Single-pane<br>layout',
                    next_mode  : 'row',
                },
                row: {
                    icon       : 'ico_layout_row',
                    tooltip    : 'Side-by-side<br>layout',
                    next_mode  : 'column',
                },
                column: {
                    icon       : 'ico_layout_col',
                    tooltip    : 'Top-bottom<br>layout',
                    next_mode  : 'single',
                }
            }
        });
        // Settings button 
        this.settings = new MoaiEditor.Button({
            name: 'settings',
            icon: 'ico_settings',
            tooltip: 'Settings<hr><i>not functional<br>yet</i>',
            outer: this
        });
        // Move divider to the left button
        this.divider_moveleft = new MoaiEditor.Button({
            name: 'divider_moveleft',
            icon: 'ico_divider_left',
            default_mode: 'row',
            onClick: this.onclick_divider_left,
            states: {
                row: {
                    icon       : null,
                    tooltip    : 'Move divider<br>to the left',
                },
                column: {
                    icon       : 'ico_divider_up',
                    tooltip    : 'Move divider<br>up',
                }
            },
            outer: this
        });
        // Move divider to the right button
        this.divider_moveright = new MoaiEditor.Button({
            name: 'divider_moveright',
            icon: 'ico_divider_right',
            default_mode: 'row',
            onClick: this.onclick_divider_right,
            states: {
                row: {
                    icon       : null,
                    tooltip    : 'Move divider<br>to the right',
                },
                column: {
                    icon       : 'ico_divider_down',
                    tooltip    : 'Move divider<br>down',
                }
            },
            outer: this
        });
        // Live Preview button
        this.livepreview = new MoaiEditor.Button({
            name: 'livepreview',
            icon: 'ico_livepreview',
            default_mode: 'on',
            cls_remove: 'gray green',
            onClick: null,
            states: {
                on: {
                    tooltip    : 'Live preview<br>on',
                    cls_add    : 'green',
                    next_mode  : 'off',
                },
                off: {
                    tooltip    : 'Live preview<br>off',
                    cls_add    : 'gray',
                    next_mode  : 'on',
                },
            },
            outer: this
        });
        // Partial preview button
        this.partialpreview = new MoaiEditor.Button({
            name: 'partialpreview',
            icon: 'ico_rabbit',
            default_mode: 'on',
            cls_remove: 'gray green',
            onClick: null,
            states: {
                on: {
                    tooltip    : 'Partial preview<br>on<hr><i>Renders only the<br>changed parts of<br>the document</i>',
                    cls_add    : 'green',
                    next_mode  : 'off',
                },
                off: {
                    tooltip    : 'Partial preview<br>off<hr><i>Renders the<br>whole document<br>every time</i>',
                    cls_add    : 'gray',
                    next_mode  : 'on',
                },
            },
            outer: this
        });
    
        // Auto scroll button
        this.autoscroll = new MoaiEditor.Button({
            name: 'autoscroll',
            icon: 'ico_autoscroll2',
            default_mode: 'on',
            cls_remove: 'gray green',
            onClick: null,
            states: {
                off: {
                    tooltip    : 'No synchronized scrolling',
                    cls_add    : 'gray',
                    next_mode  : 'on',
                },
                on: {
                    icon       : 'ico_autoscroll2',
                    tooltip    : "Synchronized scrolling",
                    cls_add    : 'green',
                    next_mode  : 'off',
                }
            },
            outer: this
        });
            
        /* ================= Phone Buttons ================= */
        
        // Go Left
        this.goLeft = new MoaiEditor.Button({
            name: 'goLeft',
            icon: 'ico_arrowleft',
            classes: 'moaied-phone-go-button  darkgray'
        }); 
        
        // Go Right
        this.goRight = new MoaiEditor.Button({
            name: 'goRight',
            icon: 'ico_arrowright',
            classes: 'moaied-phone-go-button  darkgray'
        }); 
    
        /* ===================== Init ==================== */
    
        // Update tooltips of divider buttons
        this.setDividerButtonsTooltip(this.divider_moveleft);
    }
    // ────────────────────────────────────
    onclick_back() {
        window.location.href = 'doku.php?id='+JSINFO.id;
    }
    // ────────────────────────────────────
    onclick_fullwidth() {
        document.body.querySelector('#moaied__panes_wrapper').classList.add('moaied-fullpage-flash');
        setTimeout(function() {
            document.body.querySelector('#moaied__panes_wrapper').classList.remove('moaied-fullpage-flash');
        }, 300);
        moaiEditor.buttons.onclick_panes();
    }
    // ────────────────────────────────────
    onclick_panes() {            
        moaiEditor.layout.desktop.onClickPanesBtn();
    }
    // ────────────────────────────────────
    onclick_divider_left() {
        this.outer.updateDivider(-5);
        this.outer.setDividerButtonsTooltip();
    }
    // ────────────────────────────────────
    onclick_divider_right() {
        this.outer.updateDivider(5);
        this.outer.setDividerButtonsTooltip();
    }
    // ────────────────────────────────────
    updateDivider(delta=0) {
        var left = moaiEditor.layout.editpane;
        var right =  moaiEditor.layout.preview;
        var pos = parseInt(this.dividerPos.value);
        pos += delta;
        pos = Math.max(0,pos);
        pos = Math.min(100,pos);
        this.dividerPos.value = pos;
        left.style.flexBasis = pos+"%";
        right.style.flexBasis = (100-pos)+"%";
    }
    // ────────────────────────────────────
    setDividerButtonsTooltip() {
    
        // Button Left
        var pos = 100 - parseInt(this.dividerPos.value);     
        this.divider_moveleft.states.row.tooltip = 'Move divider<br>to the left<br><i>'+pos+'%</i>';
        this.divider_moveleft.states.column.tooltip = 'Move divider<br>up<br><i>'+pos+'%</i>';
        this.divider_moveleft.update();
    
        // Button Right      
        pos = this.dividerPos.value;     
        this.divider_moveright.states.row.tooltip = 'Move divider<br>to the right<br><i>'+pos+'%</i>';
        this.divider_moveright.states.column.tooltip = 'Move divider<br>down<br><i>'+pos+'%</i>';
        this.divider_moveright.update();
    }
    // ────────────────────────────────────
    styleExitButtons() {
        
        // Enable or disable Save and Cancel
        if (!window.textChanged) {
            this.save.handle.disabled = true;
        } else {
            this.save.handle.disabled = false;
        }
    }
}; // End Class