[jira] [Commented] (TRINIDAD-136) Add ability to move lightweight dialogs around the page

["Joe Rossi (JIRA)" <de...@myfaces.apache.org>]

    [ https://issues.apache.org/jira/browse/TRINIDAD-136?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=13042826#comment-13042826 ] 

Joe Rossi commented on TRINIDAD-136:
------------------------------------

We have implemented a temporary fix to this based upon the following very useful article:

http://eldoradosoftware.blogspot.com/2009/03/trinidad-draggable-dialogs.html

In our case we did it slightly differently as we also make use of primefaces which includes jquery ui which itself provides a very useful facility to make any window "draggable". However, if you don't want to introduce a dependency on jquery then the above article provides a solution.

Here's what we did:

(a) Include jquery ui in the page template, which in our case means the following:

    <trh:script source="#{constants.primeFacesResourcesPrefix}/jquery/plugins/ui/jquery.ui.custom.js"/>

(b) Include the following functions in the page's javascript library:

function attachDraggabilityToDialog()
{
  // The div that contains the iframe for the dialog
  var dialogFrameDiv = null;

  var frames = document.getElementsByTagName("iframe");
  if (frames.length > 0)
  {
    var _node = document.getElementsByTagName("iframe")[0].parentNode;
    if (_node != null && _node.tagName == "DIV")
    {
      dialogFrameDiv = _node;
    }
  }

  if (dialogFrameDiv != null)
  {
    var topOffset = isIE() ? -10 : 0;
    jQuery(function(){
      jQuery(dialogFrameDiv).draggable({
        iframeFix: true,
        cursorAt: {top: topOffset},
        cursor: 'move',
        containment: 'window'
        });
    });
  }
}

function isIE()
{
  var ua = navigator.userAgent;
  return (ua.indexOf("MSIE") >= 0);
}

(c) Modified the trinidad class org.apache.myfaces.trinidadinternal.renderkit.core.DialogRequest.java to include a call to the 'attachDraggabilityToDialog()' function when rendering the javascript for a dialog. At the end of the renderLaunchJavascript() method we include the following line of code:

    out.writeText("attachDraggabilityToDialog();", null);


That's pretty much it. Of course, this would need proper productizing in order to be included in the trinidad source - in particular, I suspect the dependency on jquery needs to be eliminated, but in our case jquery gives us pretty good cross-browser support for making a window draggable.


> Add ability to move lightweight dialogs around the page
> -------------------------------------------------------
>
>                 Key: TRINIDAD-136
>                 URL: https://issues.apache.org/jira/browse/TRINIDAD-136
>             Project: MyFaces Trinidad
>          Issue Type: Improvement
>    Affects Versions: 1.0.2-core
>            Reporter: Danny Robinson
>            Assignee: Danny Robinson
>            Priority: Minor
>
> The new lightweight dialogs feature pops an iframe dialog in the center of the page.  While the dialog has a title bar, it doesn't allow you to drag the window around so you can see information hidden behind it.

--
This message is automatically generated by JIRA.
For more information on JIRA, see: http://www.atlassian.com/software/jira