TransModal modal dialog project : beta testing

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • VK

    TransModal modal dialog project : beta testing

    In the continuation of the discussion at "Making Site Opaque -- This
    Strategy Feasible?" and my comment at


    I have realized that despite suggestions to use DHTML-based modal
    dialogs are very common? there is not a single fully functional
    reliable copyright-free cross-browser alternative to say MsgBox
    (VBScript) or showModalDialog (IE). This way such suggestions up to
    date are bearing rather a lot of hypocrisy by suggesting to use
    something non-existing instead of something existing.

    I am proposing to make TransModal library under MIT license to have a
    good alternative to suggest. I also would like to have this library
    novice-friendly for code studying, as I said before.

    I am proposing the current v. 0.0.3 beta for criticism and for bug fix
    in cope that it may be interesting for anyone to donate their time to
    participate.

    The whole package can be obtained at
    Latest news coverage, email, free stock quotes, live scores and video are just the beginning. Discover more every day at Yahoo!


    The package contains:
    0_0_3_Compat.ht ml - testing page in Compatibility (BackCompat) mode
    0_0_3_Strict.ht ml - testing page in Strict (CSS1Compat) mode
    TransModal.js - the version 0.0.3 beta itself

    The TransModal.js code is also posted below. Usenet post formatting
    specifics forced me to make line breaks in some long statements where
    I would not do them otherwise. If still some lines get broken so
    rendering the code non-functioning or hard to read then I have nothing
    to say but my apologies. Use the source from the linked package
    instead then.



    /*************** *************** **************
    * ATTENTION!
    * This version TransModal 0.0.3 is intended
    * for testing and debugging purpose only.
    * It is NOT intended for a practical use.
    *************** *************** **************/



    function TransModal() {



    /* Enforcing TransModal to be a singleton:
    * other words do not allow to create new
    * instances of TransModal class.
    *
    *? Objections?
    */

    if (this instanceof TransModal) {
    return TransModal;
    }



    /* Checking if not some weird environment
    * where window host object is not available.
    * It is here mostly to pacify some c.l.j.
    * regulars - but who knows, it may come useful
    * someday somewhere.
    *
    * "window" identifier is reserved for the host
    * object. This way if typeof window == 'object'
    * guarantees that either 1) host object is here
    * or 2) it is not here but someone is
    * emulating it. In the latter case it is not
    * our concern how good or bad such emulation is.
    */

    if (typeof window != 'object') {
    return null;
    }



    /* Check if DOM manipualtions are available:
    * other words if the document is loaded.
    * If not then postpone the execution till
    * after window load event.
    * TransModal.isIE flag is preset on conditional
    * compilation outside of the TransModal body:
    * look at the end of this code.
    */

    if (document.body == null) {
    if (TransModal.isI E) {
    window.attachEv ent('onload', TransModal);
    }
    else {
    window.addEvent Listener('load' , TransModal, false);
    }
    return null;
    }



    /* If TransModal was already once executed
    * then do not repeat the initialization.
    */
    if (TransModal.isE xecuted) {
    return null;
    }
    else {
    TransModal.isEx ecuted = true;
    }



    /* If "modal" identifier is not already in use,
    * then set it as a shortcut alias for TransModal.
    * This way TransModal.dial og() and modal.dialog()
    * calls will be equivalent.
    */

    if (typeof modal == 'undefined') {
    modal = TransModal;
    }



    /* Prototype.js compatibility.
    * If global $() function is already defined
    * then do not override it. Otherwise making
    * a lightweight replacement of it.
    *
    * We don't want a parasite closure in here,
    * so we are using Function constructor.
    */
    if (typeof $ != 'function') {
    $ = new Function('id',
    'return document.getEle mentById(id)');
    }



    /* It would be nice to have button labels on
    * user's preferred language and not English
    * only.
    * navigator.userL anguage (IE) and
    * navigator.langu age (some other UAs) values
    * may have different meanings: OS language,
    * or browser interface language, or the preferred
    * language in the browser settings. Either way
    * IMHO it still allows to make a good guess what
    * language the current user would like to see.
    * If the detected language is not implemented yet
    * then English is used by default.
    * For such basic lexicon as "Yes", "No", "Cancel" etc.
    * we may disregard country-specific variations, so we
    * are taking only two first letters from the language
    * code - so say "en", "en_US", "en_GB" will be "en".
    *
    *? Objections?
    */

    if ('userLanguage' in navigator) {
    var lang = navigator.userL anguage.substri ng(0,2);
    }
    else if ('language' in navigator) {
    var lang = navigator.langu age.substring(0 ,2);
    }
    else {
    var lang = 'en';
    }

    TransModal.lang = (lang in TransModal.butt onLabelSet) ?
    lang : 'en';



    /* Creating and adding dialog window template.
    * Additional dialog styling may be applied
    * over DIV#TransModalD ialog CSS rule set.
    */

    var wndDialog = document.create Element('DIV');

    wndDialog.id = 'TransModalDial og';

    /* Some complex styling of a completely empty element
    * may make IE to act strange. To avoid that we are
    * setting the default content to NO-BREAK SPACE
    */
    wndDialog.inner HTML = '<span>\u00A0</span>';

    with (wndDialog.styl e) {
    position = 'absolute';
    zIndex = '1002';
    left = '0px';
    top = '0px';
    cursor = 'default';
    visibility = 'hidden';
    }

    document.body.a ppendChild(wndD ialog);



    /* Creating and adding the cover sheet.
    * The cover sheet is NOT supposed to
    * be styled by external CSS rules. All
    * what it needs is being made by script.
    */

    var wndCover = document.create Element('DIV');

    wndCover.id = 'TransModalVeil ';

    wndCover.innerH TML = '<span>\u00A0</span>';

    with (wndCover.style ) {
    position = 'absolute';
    zIndex = '1001';
    left = '0px';
    top = '0px';
    margin = '0px 0px';
    padding = '0px 0px';
    borderStyle = 'none';
    cursor = 'not-allowed';
    visibility = 'hidden';
    }

    /* Pre-apply alpha filter for IE.
    */
    if (TransModal.isI E) {
    wndCover.style. filter = ''.concat(
    'progid:DXImage Transform.Micro soft.Alpha(Opac ity=',
    Math.floor(Tran sModal.coverOpa city * 100), ',Style=0)');
    }

    document.body.a ppendChild(wndC over);
    }



    /************** TransModal methods **************/



    /* TransModal.dial og() method that
    * takes four optional arguments:
    *
    * dlgPrompt : prompt HTML code
    * dlgButtonSet : button set
    * dlgDefaultButto n : default focus
    * dlgListener : function to call
    */

    TransModal.dial og = function(dlgPro mpt,
    dlgButtonSet,
    dlgDefaultButto n,
    dlgListener) {

    /* Setting defaults for missing arguments.
    */

    if (typeof dlgPrompt != 'string') {
    dlgPrompt = '<p>TransModal v.'.concat(
    TransModal.repo rtVersion(), '</p>');
    }

    if (typeof dlgButtonSet != 'number') {
    dlgButtonSet = 0;
    }

    if ((typeof dlgDefaultButto n != 'number') ||
    (dlgDefaultButt on >= TransModal.
    buttonSet[dlgButtonSet].length)) {
    dlgDefaultButto n = 0;
    }

    if (typeof dlgListener != 'function') {
    TransModal.noti fyObserver = TransModal.loop Hole;
    }
    else {
    TransModal.noti fyObserver = dlgListener;
    }



    /* Intermediary variables to store
    * clientWidth and clientHeight values.
    */

    var w = document.docume ntElement.clien tWidth;
    var h = document.docume ntElement.clien tHeight;



    /* Setting the cover.
    */

    var cover = $('TransModalVe il');

    /* BUG bug 1
    *
    * We need a reliable algorithm to cover
    * entire body, not just visible part of it
    * like this current primitive does.
    */
    cover.style.wid th = w + 'px';
    cover.style.hei ght = h + 'px';

    cover.style.bac kgroundColor = TransModal.cove rColor;

    /* Working around different opacity models
    * of IE and other browsers.
    */
    if (TransModal.isI E) {
    cover.filters.i tem('DXImageTra nsform.Microsof t.Alpha').
    Opacity = Math.floor(Tran sModal.coverOpa city * 100);
    }
    else {
    /* Safari requires opacity to be a string and it
    * ignores numeric arguments.
    * Other browsers accept either.
    */
    cover.style.
    opacity = '' + TransModal.cove rOpacity;
    }



    /* Preparing the dialog.
    */

    var dialog = $('TransModalDi alog');

    /* How many buttons in the selected set.
    */
    var len = TransModal.butt onSet[dlgButtonSet].length;

    /* We want all buttons in one row.
    */
    var buttons = '<div style="white-space:nowrap !important">';

    /* BUG bug 2
    * Clicking outside of dialog makes current button
    * to loose focus.
    */

    /* BUG bug 3
    * Navigating by TAB press goes away from the
    * rightmost button to the document body.
    * Must be switching to the leftmost button
    * instead.
    */

    /* BUG bug 4
    * Arrow keys navigation doesn't work.
    */

    for (var i=0; i<len; i++) {
    var label = TransModal.butt onLabelSet[TransModal.lang][
    TransModal.butt onSet[dlgButtonSet][i]];
    buttons+= ''.concat(
    '<button type="button" ',
    'hidefocus ', // removes dotted focus from IE button labels
    'onclick="Trans Modal.dismiss(\ '',
    TransModal.butt onSet[dlgButtonSet][i], '\')">', label, '</button>
    ');
    }

    buttons+= '</div>';

    dialog.innerHTM L = dlgPrompt + buttons;

    /* BUG bug 5
    * Scroll position is not accounted.
    */

    dialog.style.le ft = Math.floor((w-dialog.offsetWi dth)/2) + 'px';
    dialog.style.to p = Math.floor((h-dialog.offsetHe ight)/2) + 'px';

    /* IE6 or older "Super Z of form elements" quirk fix.
    * Until IE7 form controls were external DirectX objects
    * drawn on a separate graphics layer after the whole
    * page is drawn. That led to impossibility to cover
    * some form controls (particularly SELECT) by a higher
    * z-index DOM elements: form controls remained visible
    * and accessible (hence the term; sometimes also
    * referred as "firing through").
    * As a partial and not perfect remedy we are disabling
    * all form controls for IE6 or older.
    * For extra large or multiple forms it may have
    * a productivity impact.
    * It also doesn't eliminate the risk of the dialog placed
    * right over a form element thus partically overdrawn.
    */

    /* BUG bug 6
    * Doesn't account if some form controls are already
    * disabled for some other purpose. This way on restoring
    * their state will be overriden.
    */

    if (TransModal.isO ldIE) {
    for (var i=0; i<document.form s.length; i++) {
    var len = document.forms[i].length;
    for (var j=0; j<len; j++) {
    /* IE considers links located within FORM as form
    * controls, so it disables them as well.
    * No extra check for links is added though to
    * speed up the loop.
    *
    *? You think?
    */
    document.forms[i].elements[j].disabled = true;
    }
    }
    }



    /* Display both the cover and the dialog.
    */
    cover.style.vis ibility = 'visible';
    dialog.style.vi sibility = 'visible';



    /* Setting focus to the default button.
    */
    window.setTimeo ut("$('TransMod alDialog')." +
    "getElementsByT agName('BUTTON' )[" +
    dlgDefaultButto n + "].focus()", 100);

    };

    /*** END OF TransModal.dial og FUNCTION ***/



    TransModal.dism iss = function(presse dButtonSysName) {

    $('TransModalDi alog').style.vi sibility = 'hidden';
    $('TransModalVe il').style.visi bility = 'hidden';

    if (TransModal.isO ldIE) {
    for (var i=0; i<document.form s.length; i++) {
    var len = document.forms[i].length;
    for (var j=0; j<len; j++) {
    /* see bug 6 */
    document.forms[i].elements[j].disabled = false;
    }
    }
    }

    TransModal.noti fyObserver(pres sedButtonSysNam e);

    }

    /*** END OF TransModal.dism iss FUNCTION ***/



    /* Library versioning
    */

    TransModal.Majo rVersion = 0;
    TransModal.Mino rVersion = 0;
    TransModal.Buil dVersion = 3;

    TransModal.repo rtVersion = function() {
    return ''.concat(
    TransModal.Majo rVersion,
    '.', TransModal.Mino rVersion,
    '.', TransModal.Buil dVersion);
    }



    /* "If TransModal initialized" flag
    */

    TransModal.isEx ecuted = false;



    /* A dummy function for testing and for NOOPs.
    */

    TransModal.loop Hole = function() {
    window.alert(ar guments[0] || 'no arguments');
    }



    /* Current cover color (black by default).
    */

    TransModal.cove rColor = 'rgb(0,0,0)';



    /* Current cover opacity (0.0 - 1.0)
    * 0 - fully transparent
    * 1 - fully opaque
    */

    TransModal.cove rOpacity = 0.4;



    /* In the future may be used to set
    * cover appearence effects:
    * 'none' - no effect
    * 'fade' - fading
    * 'flood' - flooding
    *
    * Not currently implemented.
    */

    TransModal.cove rEffect = 'none';



    /* Button labels by language codes.
    *
    * For the best interoperabilit y
    * all characters above US-ASCII
    * should be represented by Unicode
    * escape sequences \uXXXX
    *
    * Currently only English is presented.
    */

    TransModal.butt onLabelSet = {
    'en' : {
    'OK' : 'OK'
    ,'Cancel' : 'Cancel'
    ,'Abort' : 'Abort'
    ,'Retry' : 'Retry'
    ,'Ignore' : 'Ignore'
    ,'Yes' : 'Yes'
    ,'No' : 'No'
    }
    };



    /* Available button sets. The sets
    * are going by VB's MsgBox schema.
    * These are system label names and
    * they DON'T need to be translated.
    */
    TransModal.butt onSet = [
    ['OK']
    ,['OK', 'Cancel']
    ,['Abort','Retry' ,'Ignore']
    ,['Yes','No','Can cel']
    ,['Yes','No']
    ,['Retry','Cancel ']
    ];



    /* Conditional compilation.
    * We all hate browser sniffing, do we ? :-)
    */
    /*@cc_on @*/
    /*@if (@_jscript)
    TransModal.isIE = true;
    TransModal.isOl dIE = ''.concat(
    ScriptEngineMaj orVersion(), '.',
    ScriptEngineMin orVersion(), '.',
    ScriptEngineBui ldVersion()) <= '5.6.8834';
    @else @*/
    TransModal.isIE = false;
    TransModal.isOl dIE = false;
    /*@end @*/



    /* Attempting to execute TransModal function.
    */

    TransModal();



    /* BUG bug 7
    * The whole script is completely
    * broken for IE in BackCompat mode.
    */
  • Laser Lips

    #2
    Re: TransModal modal dialog project : beta testing

    I'm currently working on a modal dialog box at work because all the
    ones I have seen all have somthing wrong with them.

    Hopefully it will be ready by the end of this week....watch this
    space....

    Graham

    Comment

    • VK

      #3
      Re: TransModal modal dialog project : beta testing

      On May 6, 4:32 pm, Laser Lips <loudsphi...@gm ail.comwrote:
      I'm currently working on a modal dialog box at work because all the
      ones I have seen all have somthing wrong with them.
      >
      Hopefully it will be ready by the end of this week....watch this
      space....
      The competition is always good ;-)

      Comment

      • Matthias Watermann

        #4
        Re: TransModal modal dialog project : beta testing

        On Tue, 06 May 2008 02:25:41 -0700, VK wrote:
        [...]
        Just some hints after reading (w/o testing) it:
        if ('userLanguage' in navigator) {
        var lang = navigator.userL anguage.substri ng(0,2);
        }
        else if ('language' in navigator) {
        var lang = navigator.langu age.substring(0 ,2);
        }
        else {
        var lang = 'en';
        }
        Should be:

        var lang = 'en';
        if ('userLanguage' in navigator) {
        lang = navigator.userL anguage.substri ng(0,2);
        }
        else if ('language' in navigator) {
        lang = navigator.langu age.substring(0 ,2);
        }
        >
        TransModal.lang = (lang in TransModal.butt onLabelSet) ?
        lang : 'en';
        I'd assume that "lang" is unknown here since there are only three
        vars with that name each of which inside a different "if"-scope.
        [...]
        var wndDialog = document.create Element('DIV');
        >
        wndDialog.id = 'TransModalDial og';
        >
        /* Some complex styling of a completely empty element
        * may make IE to act strange. To avoid that we are
        * setting the default content to NO-BREAK SPACE
        */
        wndDialog.inner HTML = '<span>\u00A0</span>';
        Why use "innerHTML" (instead of "createElement( )") here?
        >
        with (wndDialog.styl e) {
        position = 'absolute';
        zIndex = '1002';
        left = '0px';
        top = '0px';
        cursor = 'default';
        visibility = 'hidden';
        }
        Just a matter of style & opinion:

        var s;
        if ((s = wndDialog.style )) {
        s.position = 'absolute';
        s.zIndex = '1002';
        s.left = '0px';
        s.top = '0px';
        s.cursor = 'default';
        s.visibility = 'hidden';
        }
        [...]
        var wndCover = document.create Element('DIV');
        >
        wndCover.id = 'TransModalVeil ';
        >
        wndCover.innerH TML = '<span>\u00A0</span>';
        see above.
        >
        with (wndCover.style ) {
        position = 'absolute';
        zIndex = '1001';
        left = '0px';
        top = '0px';
        margin = '0px 0px';
        padding = '0px 0px';
        borderStyle = 'none';
        cursor = 'not-allowed';
        visibility = 'hidden';
        }
        Same as above.
        [...]
        dialog.innerHTM L = dlgPrompt + buttons;
        Same as above.


        --
        Matthias
        /"\
        \ / ASCII RIBBON CAMPAIGN - AGAINST HTML MAIL
        X - AGAINST M$ ATTACHMENTS
        / \

        Comment

        • Henry

          #5
          Re: TransModal modal dialog project : beta testing

          On May 6, 3:01 pm, Matthias Watermann wrote:
          <snip>
          I'd assume that "lang" is unknown here since there are
          only three vars with that name each of which inside a
          different "if"-scope.
          Javascript is not block-scoped. Its scoping units are functions, so
          any variable declared at any point within a function body is declared
          for the entire execution of that function (including any code that
          precedes the declaration in the source text).

          Comment

          • Jorge

            #6
            Re: TransModal modal dialog project : beta testing

            On May 6, 5:17 pm, Henry <rcornf...@rain drop.co.ukwrote :
            Javascript is not block-scoped. Its scoping units are functions, so
            any variable declared at any point within a function body is declared
            for the entire execution of that function (including any code that
            precedes the declaration in the source text).
            e.g.

            <html><head></head><body><scr ipt>

            ka="global ka";
            (function () {
            alert(ka);
            var ka = "local ka";
            alert(ka);
            })();

            </script></body></html>

            Comment

            • Jorge

              #7
              Re: TransModal modal dialog project : beta testing

              VK wrote:
              In the continuation of the discussion at "Making Site Opaque -- This
              Strategy Feasible?" and my comment at

              >
              I am proposing the current v. 0.0.3 beta for criticism and for bug fix
              in cope that it may be interesting for anyone to donate their time to
              participate.
              >
              Hey, why did you left out those nice faders() ?

              --Jorge.

              Comment

              • VK

                #8
                Re: TransModal modal dialog project : beta testing

                On May 6, 7:55 pm, Jorge <jo...@jorgecha morro.comwrote:
                VK wrote:
                In the continuation of the discussion at "Making Site Opaque -- This
                Strategy Feasible?" and my comment at
                http://groups.google.com/group/comp....15a4408680e8e2
                >
                I am proposing the current v. 0.0.3 beta for criticism and for bug fix
                in cope that it may be interesting for anyone to donate their time to
                participate.
                >
                Hey, why did you left out those nice faders() ?
                I did not! Look at TransModal.cove rEffect - it is waiting for its
                moment. It is just necessary to make working properly the most basic
                functionality before starting with extra features. It like a car:
                before bringing it to West Cost Custom it must be able to at least
                leave the garage by its own :-)


                Comment

                • VK

                  #9
                  Re: TransModal modal dialog project : beta testing

                  On May 6, 6:01 pm, Matthias Watermann <li...@mwat.dew rote:
                  On Tue, 06 May 2008 02:25:41 -0700, VK wrote:
                  [...]
                  >
                  Just some hints after reading (w/o testing) it:
                  >
                  if ('userLanguage' in navigator) {
                  var lang = navigator.userL anguage.substri ng(0,2);
                  }
                  else if ('language' in navigator) {
                  var lang = navigator.langu age.substring(0 ,2);
                  }
                  else {
                  var lang = 'en';
                  }
                  >
                  Should be:
                  >
                  var lang = 'en';
                  if ('userLanguage' in navigator) {
                  lang = navigator.userL anguage.substri ng(0,2);
                  }
                  else if ('language' in navigator) {
                  lang = navigator.langu age.substring(0 ,2);
                  }
                  with pending else{} left this way. Not a crime of any kind and often
                  met, but we have here a standard logical construct
                  if X then do this
                  else if Y then do that
                  (if neither of both then)
                  else do default

                  which is

                  if (X) {}
                  else if (Y) {}
                  else {}

                  what would be benefits to break the logic flow? I am not claiming that
                  there are not any, but what are they?

                  TransModal.lang = (lang in TransModal.butt onLabelSet) ?
                  lang : 'en';
                  >
                  I'd assume that "lang" is unknown here since there are only three
                  vars with that name each of which inside a different "if"-scope.
                  Variable scope in Javascript was already explained by other posters as
                  I see.
                  [...]
                  var wndDialog = document.create Element('DIV');
                  >
                  wndDialog.id = 'TransModalDial og';
                  >
                  /* Some complex styling of a completely empty element
                  * may make IE to act strange. To avoid that we are
                  * setting the default content to NO-BREAK SPACE
                  */
                  wndDialog.inner HTML = '<span>\u00A0</span>';
                  >
                  Why use "innerHTML" (instead of "createElement( )") here?
                  because then we have to add TextNode into it which is a royal pain in
                  IE6 - not talking about adding form controls this way which is a
                  headache beyond tolerance IMO with IE. Also innerHTML is 10-15 times
                  quicker then per-node manipulations.
                  This being said, I am ready to replace both innerHTML usages by a
                  reliable DOM alternative if anyone has it.
                  with (wndDialog.styl e) {
                  position = 'absolute';
                  zIndex = '1002';
                  left = '0px';
                  top = '0px';
                  cursor = 'default';
                  visibility = 'hidden';
                  }
                  >
                  Just a matter of style & opinion:
                  >
                  var s;
                  if ((s = wndDialog.style )) {
                  s.position = 'absolute';
                  s.zIndex = '1002';
                  s.left = '0px';
                  s.top = '0px';
                  s.cursor = 'default';
                  s.visibility = 'hidden';
                  }
                  Yeah... "To WITH, or not to WITH" :-)
                  Javascript WITH implementation is indeed a ticking bomb to handle with
                  extreme care. I myself once was a complete fool with it:


                  So I do agree with Matt Kruse at

                  as overall - but I do not agree to make WITH as some self-contained
                  evilness that acts by its own no matter what :-) In case as above
                  is .style is available then all these properties should be here as
                  well. Or still better do not take the risk?
                  [...]

                  Comment

                  • Jorge

                    #10
                    Re: TransModal modal dialog project : beta testing

                    On May 6, 8:20 pm, VK <schools_r...@y ahoo.comwrote:
                    Yeah... "To WITH, or not to WITH" :-)
                    Javascript WITH implementation is indeed a ticking bomb to handle with
                    extreme care. I myself once was a complete fool with it:http://groups.google.com/group/mozil...ef5a71b7d95318
                    >
                    So I do agree with Matt Kruse athttp://www.javascriptt oolbox.com/bestpractices/#with
                    as overall - but I do not agree to make WITH as some self-contained
                    evilness that acts by its own no matter what :-) In case as above
                    is .style is available then all these properties should be here as
                    well. Or still better do not take the risk?
                    >
                    Yeah... "With statement considered harmful" :-)

                    Comment

                    • VK

                      #11
                      Re: TransModal modal dialog project : beta testing

                      On May 6, 10:31 pm, Jorge <jo...@jorgecha morro.comwrote:
                      On May 6, 8:20 pm, VK <schools_r...@y ahoo.comwrote:
                      >
                      Yeah... "To WITH, or not to WITH" :-)
                      Javascript WITH implementation is indeed a ticking bomb to handle with
                      extreme care. I myself once was a complete fool with it:http://groups.google.com/group/mozil...ef5a71b7d95318
                      >
                      So I do agree with Matt Kruse athttp://www.javascriptt oolbox.com/bestpractices/#with
                      as overall - but I do not agree to make WITH as some self-contained
                      evilness that acts by its own no matter what :-) In case as above
                      is .style is available then all these properties should be here as
                      well. Or still better do not take the risk?
                      >
                      Yeah... "With statement considered harmful" :-)http://yuiblog.com/blog/2006/04/11/w...dered-harmful/
                      OK, voted out. Bye-bye, WITH :-(
                      :-)

                      Comment

                      • Thomas 'PointedEars' Lahn

                        #12
                        Re: TransModal modal dialog project : beta testing

                        Matthias Watermann wrote:
                        On Tue, 06 May 2008 02:25:41 -0700, VK wrote:
                        >[...]
                        >
                        Just some hints after reading (w/o testing) it:
                        >
                        > if ('userLanguage' in navigator) {
                        > var lang = navigator.userL anguage.substri ng(0,2);
                        > }
                        > else if ('language' in navigator) {
                        > var lang = navigator.langu age.substring(0 ,2);
                        > }
                        > else {
                        > var lang = 'en';
                        > }
                        >
                        Should be:
                        Says who?
                        var lang = 'en';
                        if ('userLanguage' in navigator) {
                        `navigator' is a reference to a host object. The `in' operation is not
                        backwards compatible, and untested property access should be avoided with
                        host objects. Better:

                        if (typeof navigator.userL anguage != "undefined" )
                        lang = navigator.userL anguage.substri ng(0,2);
                        }
                        else if ('language' in navigator) {
                        lang = navigator.langu age.substring(0 ,2);
                        }
                        Same here.
                        > TransModal.lang = (lang in TransModal.butt onLabelSet) ?
                        > lang : 'en';
                        Same here, although `TransModal' is probably a native object which limits
                        the error-proneness of this approach to that of the `in' operation.

                        See also http://PointedEars.de/es-matrix
                        I'd assume that "lang" is unknown here since there are only three
                        vars with that name each of which inside a different "if"-scope.
                        Utter nonsense.

                        ECMAScript implementations do not support automatic block scoping. `lang'
                        is a redeclared variable (because of two VariableDeclara tion statements in
                        the source code, processed *before execution*). In any case, it would have
                        been initialized, because there is an `else' branch that executes its
                        BlockStatement without further conditionals.

                        Apparently you also don't know how the `in' operation works. It
                        type-converts the left-hand operand to string. If we would assume for
                        educational purposes that the variable would not have been initialized, it
                        would keep the initial value of `undefined'. The string representation of
                        `undefined' is "undefined" . Since it would be unlikely that the object
                        referred to by `TransModal.but tonLabelSet' would have a property named
                        `undefined', the `TransModal.lan g' property would then be assigned "en".

                        I strongly suggest you refrain from giving further advice or making further
                        assumptions from your position in the learning curve. You won't be making
                        even educated guesses at this time.
                        >[...]
                        > var wndDialog = document.create Element('DIV');
                        >>
                        > wndDialog.id = 'TransModalDial og';
                        >>
                        > /* Some complex styling of a completely empty element
                        > * may make IE to act strange. To avoid that we are
                        > * setting the default content to NO-BREAK SPACE
                        > */
                        > wndDialog.inner HTML = '<span>\u00A0</span>';
                        >
                        Why use "innerHTML" (instead of "createElement( )") here?
                        Good question. A reasonable answer to it is that the Document interface of
                        W3C DOM Level 2 Core may not implemented in one of the target environments.
                        Nevertheless, the proprietary `innerHTML' property should be avoided where
                        possible, and standards-compliant DOM mutator methods should be preferred
                        (but feature-tested at runtime before being used).

                        Furthermore, the character U+00A0 as-is constitutes a whitespace character
                        in HTML that is therefore rendered as if it was a space character (U+0020).
                        To have a non-breaking space rendered so, the HTML source code and so the
                        value assigned to the `innerHTML' property has to include one of `&nbsp;',
                        `&#160;', or `&#xA0;'.
                        > with (wndDialog.styl e) {
                        > position = 'absolute';
                        > zIndex = '1002';
                        > left = '0px';
                        > top = '0px';
                        > cursor = 'default';
                        > visibility = 'hidden';
                        > }
                        >
                        Just a matter of style & opinion:
                        >
                        var s;
                        if ((s = wndDialog.style )) {
                        s.position = 'absolute';
                        s.zIndex = '1002';
                        s.left = '0px';
                        s.top = '0px';
                        s.cursor = 'default';
                        s.visibility = 'hidden';
                        }
                        IIRC, earlier Opera versions retrieved the `style' property as a string.
                        You would be augmenting a string object with properties, and not modify
                        the DOM representation of the element's `style' attribute, then.
                        >[...]
                        > var wndCover = document.create Element('DIV');
                        >>
                        > wndCover.id = 'TransModalVeil ';
                        >>
                        > wndCover.innerH TML = '<span>\u00A0</span>';
                        >
                        see above.
                        >
                        > with (wndCover.style ) {
                        > position = 'absolute';
                        > zIndex = '1001';
                        > left = '0px';
                        > top = '0px';
                        > margin = '0px 0px';
                        > padding = '0px 0px';
                        left = "0";
                        top = "0";
                        margin = "0";
                        padding = "0";
                        > borderStyle = 'none';
                        > cursor = 'not-allowed';
                        > visibility = 'hidden';
                        > }
                        >
                        Same as above.
                        With the added error-proneness of the `with' statement.


                        PointedEars
                        --
                        realism: HTML 4.01 Strict
                        evangelism: XHTML 1.0 Strict
                        madness: XHTML 1.1 as application/xhtml+xml
                        -- Bjoern Hoehrmann

                        Comment

                        Working...