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.

score 0 · Answer 1 · answered Jan 25 '12 at 14:05

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..

Hey Thanks, But we are not supposed to use JQuery for now. Is there any other way like javascript or JSF function which can bring these options. — Jaikrat, Jan 25 '12 at 14:25
@JaikratSingh If you use Richfaces than you have jQuery out of the box. Otherwise, you can create the same functions as a regular js function that get the cdiv as an argument. cdiv will be a Jquery object so you will have to extract the DOM object from it. See jQuery documentation on how to do it. — Maxim Manco, Jan 25 '12 at 14:31

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

1 Answers1