How to add minimize and maximize button in rich: popup panel window

Question

Like below, how can we add minimize and maximize button at the upper right corner of the page in richface popup panel?

Using the below code, we can add the 'X' at the upper right corner and, on click of this, popup window gets closed.

<f:facet name="controls">
    <h:outputLink value="#"
        onclick="#{rich:component('simplePopup2')}.hide(); return false;">
            X
    </h:outputLink>
</f:facet>

Please, suggest me.

Answer 1

It is possible to extend jQuery with two custom functions that will do the maximize/minimize.

(function($) {
    $.fn.maximize = function() {
        var $this = $(this);
        var viewport = $(window);
        var bt = $this.css('border-top-width');
        var br = $this.css('border-right-width');
        var bb = $this.css('border-bottom-width');
        var bl = $this.css('border-top-width');
        bt = bt ? parseInt(bt) : 0;
        br = br ? parseInt(br) : 0;
        bb = bb ? parseInt(bb) : 0;
        bl = bl ? parseInt(bl) : 0;

        $this.css({
            width: (viewport.width() - (bl + br)) + 'px',
            height: (viewport.height() - (bt + bb)) + 'px',
            top: 0,
            left: 0
        });

        $this.find('div.rf-pp-cnt-scrlr').css({
            width: 100 + '%',
            height: 100 + '%'
        });
    }

    $.fn.minimize = function() {
        var $this = $(this);
        var viewport = $(window);

        $this.css({
            width: '170px',
            height: '20px',
            top: (viewport.height() - 20),
            left: 0
        });

        $this.find('div.rf-pp-shdw').hide();
        $this.find('div.rf-pp-cnt-scrlr').hide();
    }               
})(jQuery);

Than you can use it with richfaces popupPanel

<rich:popupPanel id="window">
    <f:facet name="controls">
        <h:outputLink value="#" onclick="#{rich:component('window')}.cdiv.minimize(); return false;">
            <h:outputText value="Minimize"/>
        </h:outputLink>
        <h:outputText value=" | "/>
        <h:outputLink value="#" onclick="#{rich:component('window')}.cdiv.maximize(); return false;">
            <h:outputText value="Maximize"/>
        </h:outputLink>
        <h:outputText value=" | "/>         
        <h:outputLink value="#" onclick="#{rich:component('window')}.hide(); return false;">
            <h:outputText value="Close"/>
        </h:outputLink>             
    </f:facet>      
    <h:outputText value="Window"/>
</rich:popupPanel>

Note the .cdiv before calling the maximize/minimize function. This is intended for reference to jQuery object itself so it will be possible to access the new functions.

The functions provided above is just a proof of concept so you will have to extend them in order to be able to restore to original size etc..