[Summary view] [Print] [Text view]

   1  /**
   2   * @requires javelin-install
   3   *           javelin-dom
   4   * @provides javelin-mask
   5   * @javelin
   6   */
   7  
   8  /**
   9   * Show a "mask" over the page for lightboxes or dialogs. This is used by
  10   * Workflow to draw visual attention to modal dialogs.
  11   *
  12   *   JX.Mask.show();
  13   *   // Show a dialog, lightbox, or other modal UI.
  14   *   JX.Mask.hide();
  15   *
  16   * Masks are stackable, if modal UIs need to spawn other modal UIs.
  17   *
  18   * The mask has class `jx-mask`, which you should apply styles to. For example:
  19   *
  20   *   .jx-mask {
  21   *     opacity: 0.8;
  22   *     background: #000000;
  23   *     position: fixed;
  24   *     top: 0;
  25   *     bottom: 0;
  26   *     left: 0;
  27   *     right: 0;
  28   *     z-index: 2;
  29   *   }
  30   *
  31   * You can create multiple mask styles and select them with the `mask_type`
  32   * parameter to `show()` (for instance, a light mask for dialogs and a dark
  33   * mask for lightboxing):
  34   *
  35   *   JX.Mask.show('jx-light-mask');
  36   *   // ...
  37   *   JX.Mask.hide();
  38   *
  39   * This will be applied as a class name to the mask element, which you can
  40   * customize in CSS:
  41   *
  42   *   .jx-light-mask {
  43   *     background: #ffffff;
  44   *   }
  45   *
  46   * The mask has sigil `jx-mask`, which can be used to intercept events
  47   * targeting it, like clicks on the mask.
  48   */
  49  JX.install('Mask', {
  50    statics : {
  51      _stack : [],
  52      _mask : null,
  53      _currentType : null,
  54  
  55  
  56      /**
  57       * Show a mask over the document. Multiple calls push masks onto a stack.
  58       *
  59       * @param string Optional class name to apply to the mask, if you have
  60       *               multiple masks (e.g., one dark and one light).
  61       * @return void
  62       */
  63      show : function(mask_type) {
  64        var self = JX.Mask;
  65        mask_type = mask_type || null;
  66  
  67        if (!self._stack.length) {
  68          self._mask = JX.$N('div', {className: 'jx-mask', sigil: 'jx-mask'});
  69          document.body.appendChild(self._mask);
  70        }
  71  
  72        self._adjustType(mask_type);
  73        JX.Mask._stack.push(mask_type);
  74      },
  75  
  76      /**
  77       * Hide the current mask. The mask stack is popped, which may reveal another
  78       * mask below the current mask.
  79       *
  80       * @return void
  81       */
  82      hide : function() {
  83        var self = JX.Mask;
  84        var mask_type = self._stack.pop();
  85  
  86        self._adjustType(mask_type);
  87  
  88        if (!self._stack.length) {
  89          JX.DOM.remove(JX.Mask._mask);
  90          JX.Mask._mask = null;
  91        }
  92      },
  93  
  94  
  95      _adjustType : function(new_type) {
  96        var self = JX.Mask;
  97        if (self._currentType) {
  98          JX.DOM.alterClass(self._mask, self._currentType, false);
  99          self._currentType = null;
 100        }
 101        if (new_type) {
 102          JX.DOM.alterClass(self._mask, new_type, true);
 103          self._currentType = new_type;
 104        }
 105      }
 106    }
 107  });