JQuery UI dialog - need to add a minimize button

Question

Update - Method without JQuery UI Plugin

** II have added an answer to this question which solves it without use of any plugins (and which is IMO instructive on the JS/CSS involved). Your CSS may need to be different but this is a good start **

--

I am familiar with jQuery but not jQuery UI. A project uses jQuery UI's .dialog() method which I observe to wrap the actual container around the designated element, usually a div.

The title bar, and x or close button is also "painted" or handled automatically on the upper right of the bar.

My goal is to add a minimize button next to the close button, which if clicked minimizes the dialog (bar remains visible, everything else is hidden, and bar moved near page bottom), and if clicked while minimized maximizes the dialog.

I can certainly do this with my own HTML/CSS/JS by creating the button and absolutely positioning it above into the painted bar/container. But is there a more native way to do this in jQuery UI (without an additional plugin)? thank you for your help!

Answer 1

The following JS and CSS successfully manages to create a minimize/maximize button without any additional plugins. This might be helpful if you can't or don't want to install plugins:

Javascript:

$('#chatPanel').dialog({
    width : 475,
    dialogClass : 'fixedPosition presav-chatPanel',
    open: function(event, ui){
        var panel = $('.presav-chatPanel');
        if(panel.hasClass('presav-minimize')){
            //maximize the panel
            panel
                .removeClass('presav-minimize')
                .attr('style', panelStyleMaximized);
            $('.presav-chatPanel .ui-dialog-titlebar-minimize span')
                .removeClass('ui-icon-plusthick')
                .addClass('ui-icon-minusthick');
        }

        //build the minimize button if not already built
        if(!$('.presav-chatPanel .ui-dialog-titlebar .ui-dialog-titlebar-minimize').length){
            $('.ui-dialog-titlebar').append('<a href="#" style="right:40px;" class="ui-dialog-titlebar-minimize ui-corner-all" role="button"><span class="ui-icon ui-icon-minusthick">minimize</span></a>');
            $('.presav-chatPanel .ui-dialog-titlebar .ui-dialog-titlebar-minimize').on('click', function(){
                var panel = $('.presav-chatPanel');
                var style = panel.attr('style');
                if(panel.hasClass('presav-minimize')){
                    //maximize the panel
                    panel
                        .removeClass('presav-minimize')
                        .attr('style', panelStyleMaximized);
                    $('.presav-chatPanel .ui-dialog-titlebar-minimize span')
                        .removeClass('ui-icon-plusthick')
                        .addClass('ui-icon-minusthick');
                }else{
                    //minimize the panel
                    panelStyleMaximized = style;

                    panel
                        .addClass('presav-minimize')
                        .attr('style', 'width: 200px; z-index: 1015; bottom: 0px; right: 20px; top: inherit; left: inherit;');
                    $('.presav-chatPanel .ui-dialog-titlebar-minimize span')
                        .removeClass('ui-icon-minusthick')
                        .addClass('ui-icon-plusthick');
                }
                return false;
            });
        }           
    },
    close: function(event, ui){
        //When the UI panel is closed, assume that it should re-open in a maximized state; however the place to maximize is the .open() method
    },
});

CSS (related to minimized state, and overriding the crosshairs for draggable-ness):

.presav-chatPanel .ui-dialog-titlebar-minimize{
    /* base taken from jquery-ui.min.css:
    position: absolute;
    right: 40px;
    top: inherit;
    width: 20px;
    padding: 1px;
    height: 20px; */

    position: absolute;
    border-radius: 0;
    outline: none;
    background: transparent;
    right: 38px !important;
    border: 1px solid #FFF;
    width: 20px !important;
    height: 20px !important;
    margin: inherit !important;
    top: inherit !important;
    /* margin: -10px 0 0 !important; */
    padding: 0 !important;
    text-align: center;
}
.presav-minimize #chatPanel{
    display: none !important;
    bottom: 0 !important;
    right: 10px !important;
}
.presav-minimize .ui-dialog-titlebar{
    cursor: default !important;
}