Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-43979

Notifications: z-index code does not run if you call show()

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Fixed
    • Icon: Minor Minor
    • 2.6.2
    • 2.6
    • JavaScript
    • MOODLE_26_STABLE
    • MOODLE_26_STABLE
    • MDL-43979-master
    • Hide
      • Open any page in Moodle (preferably in Chrome)
      • Open JS console
      • Open source tab, hit Ctrl+O and type mcore
      • Search for the applyZIndex function and add a breakpoint at it's first line
      • Hit escape to bring up the JS console

      For each of these, you should expect the debugger to break at the applyZIndex:

      // Grab all of the dialogue types
      Y.use('moodle-core-notification');
       
      // Test base dialogue
      d = new M.core.dialogue({visible: true});
      // Check...
      d.destroy(true);
       
      // Test ajaxException dialogue
      d = new M.core.ajaxException({visible: true});
      // Check...
      d.destroy(true);
       
      // Test exception dialogue
      d = new M.core.exception({visible: true});
      // Check...
      d.destroy(true);
       
      // Test confirmation dialogue
      d = new M.core.confirm({visible: true});
      // Check...
      d.destroy(true);
       
      // Test alert dialogue
      d = new M.core.alert({visible: true});
      // Check...
      d.destroy(true);
      

      Show
      Open any page in Moodle (preferably in Chrome) Open JS console Open source tab, hit Ctrl+O and type mcore Search for the applyZIndex function and add a breakpoint at it's first line Hit escape to bring up the JS console For each of these, you should expect the debugger to break at the applyZIndex: // Grab all of the dialogue types Y.use('moodle-core-notification');   // Test base dialogue d = new M.core.dialogue({visible: true}); // Check... d.destroy(true);   // Test ajaxException dialogue d = new M.core.ajaxException({visible: true}); // Check... d.destroy(true);   // Test exception dialogue d = new M.core.exception({visible: true}); // Check... d.destroy(true);   // Test confirmation dialogue d = new M.core.confirm({visible: true}); // Check... d.destroy(true);   // Test alert dialogue d = new M.core.alert({visible: true}); // Check... d.destroy(true);

      If you create a notification that is not initially visible, then use the 'show' method to show it, the z-index for the dialog is not set.

      The easiest way to see this is with the glossary dialog. First set up a glossary to autolink and make a page that contains something linked. Then, two ways to reproduce:

      1. Put something on the screen including the bit where the glossary dialog will appear, which has a z-index e.g. 10 and moodle-has-zindex class (meaning that the glossary should automatically appear on top of it). Click the glossary link. Observe that the glossary popup shows UNDER the z-indexed item.

      or

      2. Edit lib/yui/src/notification/js/dialogue.js to add a console.log line to the start of applyZIndex function (or add a breakpoint in your browser). Click the glossary link. Observe that applyZIndex is not called.

      This problem occurs because applyZIndex runs in two situations, either when you create something with

      {visible:true}

      , or when the visibilityChanged function is called. This does not happen if you create something initially not visible, then call the show() method, which is what glossary does.

            dobedobedoh Andrew Lyons
            quen Sam Marshall
            Sam Hemelryk Sam Hemelryk
            Andrew Davis Andrew Davis
            Votes:
            0 Vote for this issue
            Watchers:
            4 Start watching this issue

              Created:
              Updated:
              Resolved:

                Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.