Managing Modal Dialogs

I have a web-based genealogy application which I am trying to optimize. You can check out the general public functionality at https://www.jamescobban.net/FamilyTree/nominalIndex.php. Subscribers to the site can manipulate the family tree. The user interface requires modal dialogs. When I first tried this using conventional semantics, the desktop became complete chaos once a few dialogs were open, so I decided to simplify the appearance by tileing the dialogs instead of permitting them to float. You can see a little bit of this functionality even if you have not signed on as a contributor if you pick an individual and then click on one of the three buttons just below the information about the individual. Each of these opens a dialog which occupies the right half of the window while squeezing the original contents of the window to occupy the left half. When you click on the "Close" button of the dialog the main window is restored. But these dialogs only perform a single function, and do not update the database. When actually updating the family tree things get much more complicated. For example when you add a family to an individual the dialog in the right half of the window itself can activate dialogs to, for example, add a child, which are displayed in the left half of the window temporarily hiding the original page, and those dialogs can activate further child dialogs, and so on. The JS code to implement activating and deactivating these modal dialogs is:

Code:

/************************************************************************

 *  openFrame                                                                *

 *                                                                        *

 *  This is a utility function to display the page generated by a URL        *

 *  in an IFRAME occupying the half of the window.                        *

 *                                                                        *

 *  Input:                                                                *

 *        name        name of the frame                                        *

 *        url        URL of the page to display, if null the current contents*

 *                of the frame are left unchanged, but the dimensions may        *

 *                be changed if the dimensions of the window have changed.*

 *        side        which half to open in: "left" or "right"                *

 *                                                                        *

 *  Returns:                                                                *

 *        the instance of Window for the <iframe>                                *

 ************************************************************************/

function openFrame(name, url, side)

{

    // accept mixed case side indicator

    side        = side.toLowerCase();



    // this this function may be invoked within a child frame

    // locate the window and document instances for the top window

    var        win        = window;

    while(win.frameElement)

        win        = win.parent;

    var        doc        = win.document;



    var iframes                = doc.getElementsByTagName("IFRAME");



    var        zindex                = 0;

    for (var ii = 0; ii < iframes.length; ii++)

    {                                // get the highest zindex

        var element        = iframes[ii];



        if (element.style.position == "fixed" &&

            element.className == side &&

            element.style.zIndex > zindex)

            zindex        = element.style.zIndex;

    }                                // get the highest zindex



    // get the instance of <iframe> to display by name

    iframe                        = doc.getElementById(name);

    if (iframe)

    {                                // have existing element by name

        if (iframe.nodeName !== 'IFRAME')

            throw "util.js: openFrame: the element with id='" + name +

                        "' is not an <iframe>";

        else

            iframe.className        = side;

    }                                // have existing element by name

    else

    {                                // need to create new frame

        iframe                        = doc.createElement("IFRAME");

        iframe.name                = name;

        iframe.id                = name;

        iframe.className        = side;

        iframe.onerror                = openFrameError;

        doc.body.appendChild(iframe);

    }                                // need to create new frame



    iframe.opener                = window;

    iframe.style.zIndex                = zindex + 2;        // move iframe to front



    // identify the page to load into the frame

    if (url !== null && url != iframe.src)

    {

        if (url.substring(0,5) == 'http:')

            iframe.src                = '/badUrlForIFrame.php?src=' + url;

        else

            iframe.src                = url;

    }



    if (side != "left")

        side        = "right";



    // resize the display of the transcription

    var        w                        = doc.documentElement.clientWidth;

    var        h                        = doc.documentElement.clientHeight;

    var transcription                = doc.getElementById('transcription');

    if (transcription)

    {                        // frame for left side of window

        transcription.style.width        = w/2 + "px";

        transcription.style.height        = h + "px";

    }                        // frame for left side of window



    // size to half the width of the window and position the document in

    // the right hand half of the window

    iframe.style.width                = w/2 + "px";

    iframe.style.height                = h + "px";

    iframe.style.position        = "fixed";

    if (side == "left")

        iframe.style.left        = "0px";

    else

        iframe.style.left        = w/2 + "px";

    iframe.style.top                = 0 + "px";

    iframe.style.visibility        = "visible";

    return iframe.contentWindow;

}                // openFrame



function openFrameError()

{

    alert("open frame id='" + this.id + "' failed");

}



/************************************************************************

 *  closeFrame                                                                *

 *                                                                        *

 *  This is a utility function to close the current frame.  It handles        *

 *  the case where the current window is in an <iframe>                        *

 ************************************************************************/

function closeFrame()

{

    var        iframe        = window.frameElement;

    if (iframe)

    {                        // current window is in an iframe

        var        msg        = '';



        // locate the window and document instances for the top window

        var        win        = window;

        while(win.frameElement)

            win                = win.parent;

        var        doc        = win.document;



        var iframes                = doc.getElementsByTagName("IFRAME");

        var sideCount                = 0;

        for(var fi = 0; fi < iframes.length; fi++)

        {

            var        iframe                = iframes[fi];

            var className        = iframe.className;

        //    var className        = iframe.className;

            msg        += " <iframe src='" + iframe.src + "' class='" + className + "'>, ";

            if (className == 'right' || className == 'left')

                sideCount++;

        }



        if (sideCount == 1)

        {                // closing last dialog

            // resize the display of the transcription

            var        w                        = doc.documentElement.clientWidth;

            var        h                        = doc.documentElement.clientHeight;

            var transcription                = doc.getElementById('transcription');

            if (transcription)

            {                        // restore to full width

                transcription.style.width        = w + "px";

                transcription.style.height        = h + "px";

            }                        // restore to full width

        }                // closing last dialog



        var father        = iframe.parentNode;

        father.removeChild(iframe);

    }                        // current window is in an iframe

    else

        window.close();

}                // closeFrame

I am not entirely happy with this code. In particular:

The code to count how many dialogs are open is excessively complicated. I would like to just have a global variable to track this number, but global variables are properties of the current window, so I caot use one to count how many dialogs are open.
If a dialog can update the database then it has two buttons: Update and Close. The Close button is the same as for the public dialogs, and the dialog closes appropriately with the iframe being deleted and the main window being restored. However the "Update" button is the "submit" button of the dialog, and I haven't figured out a way to execute the closeFrame functionality. Function closeFrame deletes the <iframe> but I caot do that in the onsubmit method because that is called before the form is submitted, but the internal logic of form submission demands that the containing frame still exists. I need some way to call closeFrame after the submit is finished. That is why the code to delete the <iframe> is the very last code in closeFrame. The deletion of the <iframe> should actually be done from the window that called openFrame in the first place, but I can't figure out how to do that.

BTW I am aware of the <dialog> tag but it is still unofficial, is not supported by all browsers, and its continuation is still being debated in the HTML 5.2 project.

برچسب: نویسنده: آیلین رضوانی تاريخ: شنبه 18 شهريور 1396 ساعت: 4:26

درباره سایت

آخرین مطالب

امکانات وب

Managing Modal Dialogs

صفحه بندی

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه