[Summary view] [Print] [Text view]

   1  YUI.add('moodle-core-lockscroll', function (Y, NAME) {
   2  
   3  /**
   4   * Provides the ability to lock the scroll for a page, allowing nested
   5   * locking.
   6   *
   7   * @module moodle-core-lockscroll
   8   */
   9  
  10  /**
  11   * Provides the ability to lock the scroll for a page.
  12   *
  13   * This is achieved by applying the class 'lockscroll' to the body Node.
  14   *
  15   * Nested widgets are also supported and the scroll lock is only removed
  16   * when the final plugin instance is disabled.
  17   *
  18   * @class M.core.LockScroll
  19   * @extends Plugin.Base
  20   */
  21  Y.namespace('M.core').LockScroll = Y.Base.create('lockScroll', Y.Plugin.Base, [], {
  22  
  23      /**
  24       * Whether the LockScroll has been activated.
  25       *
  26       * @property _enabled
  27       * @type Boolean
  28       * @protected
  29       */
  30      _enabled: false,
  31  
  32      /**
  33       * Handle destruction of the lockScroll instance, including disabling
  34       * of the current instance.
  35       *
  36       * @method destructor
  37       */
  38      destructor: function() {
  39          this.disableScrollLock();
  40      },
  41  
  42      /**
  43       * Start locking the page scroll.
  44       *
  45       * This is achieved by applying the lockscroll class to the body Node.
  46       *
  47       * A count of the total number of active, and enabled, lockscroll instances is also kept on
  48       * the body to ensure that premature disabling does not occur.
  49       *
  50       * @method enableScrollLock
  51       * @param {Boolean} forceOnSmallWindow Whether to enable the scroll lock, even for small window sizes.
  52       * @chainable
  53       */
  54      enableScrollLock: function(forceOnSmallWindow) {
  55          if (this.isActive()) {
  56              Y.log('LockScroll already active. Ignoring enable request', 'warn', 'moodle-core-lockscroll');
  57              return;
  58          }
  59  
  60          if (!this.shouldLockScroll(forceOnSmallWindow)) {
  61              Y.log('Dialogue height greater than window height. Ignoring enable request.', 'warn', 'moodle-core-lockscroll');
  62              return;
  63          }
  64  
  65          Y.log('Enabling LockScroll.', 'debug', 'moodle-core-lockscroll');
  66          this._enabled = true;
  67          var body = Y.one(Y.config.doc.body);
  68  
  69          // Get width of body before turning on lockscroll.
  70          var widthBefore = body.getComputedStyle('width');
  71  
  72          // We use a CSS class on the body to handle the actual locking.
  73          body.addClass('lockscroll');
  74  
  75          // Increase the count of active instances - this is used to ensure that we do not
  76          // remove the locking when parent windows are still open.
  77          // Note: We cannot use getData here because data attributes are sandboxed to the instance that created them.
  78          var currentCount = parseInt(body.getAttribute('data-activeScrollLocks'), 10) || 0,
  79              newCount = currentCount + 1;
  80          body.setAttribute('data-activeScrollLocks', newCount);
  81          Y.log("Setting the activeScrollLocks count from " + currentCount + " to " + newCount,
  82                  'debug', 'moodle-core-lockscroll');
  83  
  84          // When initially enabled, set the body max-width to its current width. This
  85          // avoids centered elements jumping because the width changes when scrollbars
  86          // disappear.
  87          if (currentCount === 0) {
  88              body.setStyle('maxWidth', widthBefore);
  89          }
  90  
  91          return this;
  92      },
  93  
  94      /**
  95       * Recalculate whether lock scrolling should be on or off.
  96       *
  97       * @method shouldLockScroll
  98       * @param {Boolean} forceOnSmallWindow Whether to enable the scroll lock, even for small window sizes.
  99       * @return boolean
 100       */
 101      shouldLockScroll: function(forceOnSmallWindow) {
 102          var dialogueHeight = this.get('host').get('boundingBox').get('region').height,
 103              // Most modern browsers use win.innerHeight, but some older versions of IE use documentElement.clientHeight.
 104              // We fall back to 0 if neither can be found which has the effect of disabling scroll locking.
 105              windowHeight = Y.config.win.innerHeight || Y.config.doc.documentElement.clientHeight || 0;
 106  
 107          if (!forceOnSmallWindow && dialogueHeight > (windowHeight - 10)) {
 108              return false;
 109          } else {
 110              return true;
 111          }
 112      },
 113  
 114      /**
 115       * Recalculate whether lock scrolling should be on or off because the size of the dialogue changed.
 116       *
 117       * @method updateScrollLock
 118       * @param {Boolean} forceOnSmallWindow Whether to enable the scroll lock, even for small window sizes.
 119       * @chainable
 120       */
 121      updateScrollLock: function(forceOnSmallWindow) {
 122          // Both these functions already check if scroll lock is active and do the right thing.
 123          if (this.shouldLockScroll(forceOnSmallWindow)) {
 124              this.enableScrollLock(forceOnSmallWindow);
 125          } else {
 126              this.disableScrollLock(true);
 127          }
 128  
 129          return this;
 130      },
 131  
 132      /**
 133       * Stop locking the page scroll.
 134       *
 135       * The instance may be disabled but the scroll lock not removed if other instances of the
 136       * plugin are also active.
 137       *
 138       * @method disableScrollLock
 139       * @chainable
 140       */
 141      disableScrollLock: function(force) {
 142          if (this.isActive()) {
 143              Y.log('Disabling LockScroll.', 'debug', 'moodle-core-lockscroll');
 144              this._enabled = false;
 145  
 146              var body = Y.one(Y.config.doc.body);
 147  
 148              // Decrease the count of active instances.
 149              // Note: We cannot use getData here because data attributes are sandboxed to the instance that created them.
 150              var currentCount = parseInt(body.getAttribute('data-activeScrollLocks'), 10) || 1,
 151                  newCount = currentCount - 1;
 152  
 153              if (force || currentCount === 1) {
 154                  body.removeClass('lockscroll');
 155                  body.setStyle('maxWidth', null);
 156              }
 157  
 158              body.setAttribute('data-activeScrollLocks', currentCount - 1);
 159              Y.log("Setting the activeScrollLocks count from " + currentCount + " to " + newCount,
 160                      'debug', 'moodle-core-lockscroll');
 161          }
 162  
 163          return this;
 164      },
 165  
 166      /**
 167       * Return whether scroll locking is active.
 168       *
 169       * @method isActive
 170       * @return Boolean
 171       */
 172      isActive: function() {
 173          return this._enabled;
 174      }
 175  
 176  }, {
 177      NS: 'lockScroll',
 178      ATTRS: {
 179      }
 180  });
 181  
 182  
 183  }, '@VERSION@', {"requires": ["plugin", "base-build"]});