Project

General

Profile

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:
Target version:
Start date:
08/30/2013
Due date:
% Done:

0%

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
#1

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.

#2

Updated by Koen Deforche over 8 years ago

  • Target version changed from 3.3.1 to 3.3.2
#3

Updated by Koen Deforche over 8 years ago

  • Status changed from New to InProgress
  • Assignee set to Koen Deforche
  • Target version changed from 3.3.2 to 3.3.3
#4

Updated by Koen Deforche about 8 years ago

  • Target version changed from 3.3.3 to 3.3.4
#5

Updated by Koen Deforche over 7 years ago

  • Status changed from InProgress to Resolved
#6

Updated by Koen Deforche over 7 years ago

  • Status changed from Resolved to Closed

Also available in: Atom PDF