Drag and drop the inside of a modalPanel

Question

Using Richfaces 3.3.0GA, jsf 1.2_14 and facelets.

I have a richfaces ModalPanel with an image inside as follows:

<ui:composition>
        <a4j:outputPanel id="#{prefix}_a4jImagePanel">
        <rich:modalPanel id="#{prefix}_imagePanel" autosized="true" domElementAttachment="body" rendered="#{examinationPanel.render}">
            <f:facet name="header">
                <h:outputText value="Images from examination" />
            </f:facet>
            <f:facet name="controls">
                <h:panelGroup>
                    <h:graphicImage value="/images/modal/close.png" id="#{prefix}_hideimagelink" styleClass="hidelink" />
                    <rich:componentControl for="#{prefix}_imagePanel" attachTo="#{prefix}_hideimagelink" operation="hide" event="onclick" />
                </h:panelGroup>
            </f:facet>
            <a4j:form>

                <h:panelGrid columns="1" id="picture">

                        <!-- big image here -->
                        <rich:dragSupport ondragstart="startDrag(event)" ondragend="stopDrag(event)">
                        <h:graphicImage id="#{prefix}_pic" value="#{examinationPanel.imagePath}"  onmousedown="startDrag(event)" onmouseup="stopDrag(event)" /></rich:dragSupport>

                        <rich:contextMenu event="oncontextmenu" attachTo="#{prefix}_pic" submitMode="none">
                            <rich:menuItem value="Zoom In" onclick="enlarge();" id="zin"/>
                            <rich:menuItem value="Zoom Out" onclick="decrease();" id="zout"/>
                        </rich:contextMenu>

                </h:panelGrid>
            </a4j:form>
        </rich:modalPanel>
        </a4j:outputPanel>
    <script type="text/javascript">
    //adding the event listerner for Mozilla

        if(window.addEventListener)
            document.addEventListener('DOMMouseScroll', zoomScroll, false);
        //for IE/OPERA etc
        document.onmousewheel = zoomScroll;
            var startX;
            var startY;
            function enlarge(){
                   #{rich:element(fnc:concat(prefix,'_pic'))}.width=#{rich:element(fnc:concat(prefix,'_pic'))}.width*1.25;
            }
            function decrease(){
                   #{rich:element(fnc:concat(prefix,'_pic'))}.width=#{rich:element(fnc:concat(prefix,'_pic'))}.width*0.8;
            }
            function zoomScroll(event){
                var delta = 0;

                if (!event) event = window.event;

                // normalize the delta
                if (event.wheelDelta) {

                    // IE and Opera
                    delta = event.wheelDelta / 60;

                } else if (event.detail) {

                    // W3C
                    delta = -event.detail / 2;
                }
                if(delta>0)enlarge();
                else decrease();
            }

            function startDrag(event){ 

                startX = event.clientX;
                startY = event.clientY;


                }
            function stopDrag(event){

                var diff = new ModalPanel.Sizer.Diff();
                diff.deltaHeight=0;
                diff.deltaWidth=0;
                diff.deltaX = -startX+event.clientX;
                diff.deltaY = -startY+event.clientY;

                #{rich:element(fnc:concat(prefix,'_imagePanel'))}.component.doResizeOrMove(diff);
                }
    </script>
    </ui:composition>

I want the image to be zoomable (hence the enlarge() and decrease() functions) and dragable. This code works partially. If you DND before zooming it works correctly but after that it stops working. By the way, I can't see a preview of the dragging though. I would like to implement the same DND that the title of the modalPanel uses (that gives the impresion to move a real window, you see the window contents moving as you drag).

How can I achieve it?

pakore pakore · Accepted Answer · 2010-03-11T15:36:21

I couldn't get it work with richfaces modalPanel but I could get it work with primefaces dialog, which is quite similar. Here's the solution:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
    xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich" xmlns:fn="http://java.sun.com/jsp/jstl/functions" xmlns:c="http://java.sun.com/jsp/jstl/core"
    xmlns:fnc="http://eyeprevent.com/fnc" xmlns:p="http://primefaces.prime.com.tr/ui">
    <head>
            <script type="text/javascript">
    //adding the event listerner for Mozilla

        if(window.addEventListener)
            document.addEventListener('DOMMouseScroll', zoomScroll, false);
        //for IE/OPERA etc
        document.onmousewheel = zoomScroll;
            var startX;
            var startY;
            function enlarge(){
                   #{rich:element('pic')}.width=#{rich:element('pic')}.width*1.25;
            }
            function decrease(){
                #{rich:element('pic')}.width=#{rich:element('pic')}.width*0.8;
            }
            function zoomScroll(event){
                var delta = 0;

                if (!event) event = window.event;

                // normalize the delta
                if (event.wheelDelta) {

                    // IE and Opera
                    delta = event.wheelDelta / 60;

                } else if (event.detail) {

                    // W3C
                    delta = -event.detail / 2;
                }
                if(delta>0)enlarge();
                else decrease();
            }
    </script>

    </head><body>
    <p:resources /> 

        <a4j:outputPanel id="a4jImagePanel">
        <p:dialog id="imagePanel" widgetVar="dialog">
       <p:draggable dragOnly="true" underlay="none"/>  
            <a4j:form>
                <h:panelGrid columns="1" id="picture">

                        <!-- big image here -->

                        <h:graphicImage id="pic" value="/images/eye.jpg"></h:graphicImage>

                        <rich:contextMenu event="oncontextmenu" attachTo="pic" submitMode="none">
                            <rich:menuItem value="Zoom In" onclick="enlarge();" id="zin"/>
                            <rich:menuItem value="Zoom Out" onclick="decrease();" id="zout"/>

                        </rich:contextMenu>
                </h:panelGrid>
            </a4j:form>
        </p:dialog>

        </a4j:outputPanel>


    <a href="#" onclick="dialog.show()">Link</a>
</body>
</html>

Drag and drop the inside of a modalPanel

1 Answers