Results 1 to 6 of 6

Thread: How to cope with zIndex

Threaded View

Previous Post Previous Post   Next Post Next Post
  1. #2
    Join Date
    Mar 2009
    Location
    Beech Hill - a village near Reading in the UK
    Posts
    1,514

    Default Re: How to cope with zIndex

    OK Guys

    To restate the context of this, the issue is that while the mapping object(s) I had built were working well in themselves, the "Leaflet" library I was using for them built its various layers using z-index to stack them on top of each other (as I mentioned in the previous post, z-indexes of 200, 400 and 700 are in use). When the web app needs to pop something up over things - an error message, an Info or YesNo box, a prompt list or other type of modal dialog - those map elements continue to appear "in front" of it, which is especially bad if they hid it entirely, making it impossible to access; doubly dire in the case of an error message which the user then cannot dismiss, but just not at all good in general.

    I had already been advised by Henri at DAE that trying to fiddle with the z-index of framework elements was a rabbit-hole I probably didn't want to disappear down, so I had to come up with an alternative work-around.

    The alternative - and a perfectly good one, IMO - was to make the mapping object(s) invisible whenever something got popped-up. I tried this just in DataFlex by WebSet-ing pbVisible of the culprit to False when a particular modal-dialog got invoked; it is almost unnoticeable that the map has vanished because of the semi-opaque (actually 80% opaque to be precise) "WebWindow_Mask" which covers the viewport as the dialog pops-up. In OnCloseModalDialog I WebSet it back to True and all was good.

    Thus what I needed was a way to do that generically, so in the "Talk with the Experts" session at (virtual!) EDUC yesterday, I brought this problem up with Harm.

    Harm set me on the right track and I now have what appears to be a complete solution. I'm going to set it out here so that (a) others who might need to can benefit from it and (b) so anybody who can see a better way (or, critically, an error!) can let me know.

    Code:
    // Create the namespace ("foo", in this case) and an array "hideObjs" within it:
    if (!foo) {
        var foo = {};
    }
    
    if (!foo.hideObjs) {
        foo.hideObjs = [];  // Note: we could do this in the above, but for clarity we'll keep them separate
    }
    
    // Within the constructor function for the "class", which is in the namespace "foo" we created:
    
        this._hiddenBy = null;
        this._prevVis  = null;
    
    // In the afterRender function in the "class":
    
            // Add the object to the list of things which need to be hidden if popped-up over:
            foo.hideObjs.push(this);
    
    // etc...
    
    // Then within the same .js file, but outside the pseudo-class code there...
    // (Note the double-underscore used in the "cloned" functions.)
    
    df.WebWindow.prototype.__show = df.WebWindow.prototype._show; // Clone the method
    df.WebWindow.prototype._show = function(eRenderTo) {          // Now augment it
    
        if (this.pbModal) {                                       // If it is a modal popup
    
            for (var i = 0; i < foo.hideObjs.length; i++) {       // Loop through the objects
                var obj = foo.hideObjs[i];                        // "obj" as a reference to the current one
    
                if (!obj._hiddenBy && obj._eElem) {               // Must NOT be hidden AND have an _eElem
                    obj._prevVis = obj._eElem.style.visibility;   // Store the current visibility
                    obj._eElem.style.visibility = "hidden";       // Set visibility to "hidden"
                    obj._hiddenBy = this;                         // Store what it got hidden by
                }
    
            }
            
        }
        
        this.__show(eRenderTo);                                   // Essentially a forward send
    }
    
    
    df.WebWindow.prototype.__hide = df.WebWindow.prototype._hide; // Clone the method
    df.WebWindow.prototype._hide = function(bNoServerEvents) {    // Now augment it
        this.__hide(bNoServerEvents);                             // Essentially a forward send
    
        if (this.pbModal) {                                       // If it is a modal popup
    
            for (var i = 0; i < foo.hideObjs.length; i++) {       // Loop through the objects
                var obj = foo.hideObjs[i];                        // "obj" as a reference to the current one
    
                if (obj._hiddenBy === this) {                     // If it was hidden by "this" popping up...
                    obj._eElem.style.visibility = obj._prevVis;   // Reset its visibility
                    obj._hiddenBy = null;                         // Unset these
                    obj._prevVis = null;                          // properties again
                }
    
            }
            
        }
        
    }
    What is happening here is that after setting up some stuff in the JavaScript pseudo-class, we are getting references to the df.WebWindows's _show and _hide methods into double-underscored variants (__show and __hide), so we can call those originals from within our augmented versions, which we immediately define (overwriting the originals).

    Then we can hide all the things which need to be hidden, storing their existing state (_eElem.style.visibility in this case) to be restored later, and what caused them to be hidden so we can restore them when that un-pops-up again. This latter complexity is required because pop-ups can have pop-ups, which have pop-ups ad infinitum (just consider a prompt list with a "Search..." function, for instance).

    Mike
    Last edited by Mike Peat; 2-Apr-2020 at 07:09 AM. Reason: Fixed issue with the foo.hideObjs array not being created early enough (or at all), causing an error in a bad place!

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •