Bug #2167: WDialog z-index ordering [3.3.1rc1] - Wt - Redmine

Bug #2167

WDialog z-index ordering [3.3.1rc1]

Added by Roman Puls almost 9 years ago. Updated over 7 years ago.

Status:

Closed

Priority:

Normal

Assignee:

Koen Deforche

Target version:

3.3.4

Start date:

08/30/2013

Due date:

% Done:

Estimated time:

Description

When creating WDialogs, the latest created dialog instance will overlap all other dialogs, and there's no way in bringing a dialog from the back to the front.

The Rocket-Launch example from the widget gallery shows this issue (create two or more dialogs).

My brute-force attempt to solve this via javascript/jQuery did not work (yet), but this is probably the rough direction to go?

WDialog *dlg = new WDialog("Dialog Example", content());
dlg->titleBar()->clicked().connect(std::bind([=](const WMouseEvent &mouseEvent) {
    const std::string id = dlg->id();

    std::cout << format("dialog %s has been clicked", id) << std::endl;
    std::string query = format("$('#%s').parent().append($('#%s'));", id, id);
    dlg->doJavaScript(query);
}, std::placeholders::_1));

Also, windows should probably come to the front not only by clicking the dialog-toolbar, but also when clicking any area of the dialog.

If I can help out, please let me know.

Thx,

Roman

PS: Example html attached which shows how to pop a div to the front.

PPS: I am using tinyformat for format-like operations

Files

divtest.html (916 Bytes) divtest.html	bring-to-front example with div's	Roman Puls, 08/30/2013 09:34 AM
jquery.js (267 KB) jquery.js	jQuery.js needed for the example	Roman Puls, 08/30/2013 09:34 AM

Updated by Will Johnson almost 9 years ago

The code I use to get done what I think you want is bellow. It just defines a javascript function that gets called when you click on the titlebar, and then checks to make sure the z-index is higher than all other WDialogs, and if not, it makes it higher. It seems to work well.

WT_DECLARE_WT_MEMBER
(BringToFront, Wt::JavaScriptFunction, "BringToFront",
 function( id )
{
  var maxz = 0;
  $('.Wt-dialog').each( function(index, value){ maxz = Math.max(maxz,$(value).css('z-index')); } );
  if( maxz > $('#'+id).css('z-index') )
    $('#'+id).css('z-index',maxz+1);
}
);

...
void foo()
{
...
  LOAD_JAVASCRIPT(wApp, "file.cpp", "Class", wtjsBringToFront);
  WDialog *dialog = new WDialog( "My Title" );
  dialog->titleBar()->clicked().connect( "function(){Wt.WT.BringToFront('" + dialog->id() + "');}" );
  //and similar connections for mouse down and touch events
  dialog->show();
...
}

hope it helps.