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?