lib/amd/src/autoscroll.js

   1 // This file is part of Moodle - http://moodle.org/
   2 //
   3 // Moodle is free software: you can redistribute it and/or modify
   4 // it under the terms of the GNU General Public License as published by
   5 // the Free Software Foundation, either version 3 of the License, or
   6 // (at your option) any later version.
   7 //
   8 // Moodle is distributed in the hope that it will be useful,
   9 // but WITHOUT ANY WARRANTY; without even the implied warranty of
  10 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  11 // GNU General Public License for more details.
  12 //
  13 // You should have received a copy of the GNU General Public License
  14 // along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
  15
  16 /*
  17  * JavaScript to provide automatic scrolling, e.g. during a drag operation.
  18  *
  19  * Note: this module is defined statically. It is a singleton. You
  20  * can only have one use of it active at any time. However, since this
  21  * is usually used in relation to drag-drop, and since you only ever
  22  * drag one thing at a time, this is not a problem in practice.
  23  *
  24  * @module     core/autoscroll
  25  * @class      autoscroll
  26  * @package    core
  27  * @copyright  2016 The Open University
  28  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  29  * @since      3.6
  30  */
  31 define(['jquery'], function($) {
  32     /**
  33      * @alias module:core/autoscroll
  34      */
  35     var autoscroll = {
  36         /**
  37          * Size of area near edge of screen that triggers scrolling.
  38          * @private
  39          */
  40         SCROLL_THRESHOLD: 30,
  41
  42         /**
  43          * How frequently to scroll window.
  44          * @private
  45          */
  46         SCROLL_FREQUENCY: 1000 / 60,
  47
  48         /**
  49          * How many pixels to scroll per unit (1 = max scroll 30).
  50          * @private
  51          */
  52         SCROLL_SPEED: 0.5,
  53
  54         /**
  55          * Set if currently scrolling up/down.
  56          * @private
  57          */
  58         scrollingId: null,
  59
  60         /**
  61          * Speed we are supposed to scroll (range 1 to SCROLL_THRESHOLD).
  62          * @private
  63          */
  64         scrollAmount: 0,
  65
  66         /**
  67          * Optional callback called when it scrolls
  68          * @private
  69          */
  70         callback: null,
  71
  72         /**
  73          * Starts automatically scrolling if user moves near edge of window.
  74          * This should be called in response to mouse down or touch start.
  75          *
  76          * @public
  77          * @param {Function} callback Optional callback that is called every time it scrolls
  78          */
  79         start: function(callback) {
  80             $(window).on('mousemove', autoscroll.mouseMove);
  81             $(window).on('touchmove', autoscroll.touchMove);
  82             autoscroll.callback = callback;
  83         },
  84
  85         /**
  86          * Stops automatically scrolling. This should be called in response to mouse up or touch end.
  87          *
  88          * @public
  89          */
  90         stop: function() {
  91             $(window).off('mousemove', autoscroll.mouseMove);
  92             $(window).off('touchmove', autoscroll.touchMove);
  93             if (autoscroll.scrollingId !== null) {
  94                 autoscroll.stopScrolling();
  95             }
  96         },
  97
  98         /**
  99          * Event handler for touch move.
 100          *
 101          * @private
 102          * @param {Object} e Event
 103          */
 104         touchMove: function(e) {
 105             for (var i = 0; i < e.changedTouches.length; i++) {
 106                 autoscroll.handleMove(e.changedTouches[i].clientX, e.changedTouches[i].clientY);
 107             }
 108         },
 109
 110         /**
 111          * Event handler for mouse move.
 112          *
 113          * @private
 114          * @param {Object} e Event
 115          */
 116         mouseMove: function(e) {
 117             autoscroll.handleMove(e.clientX, e.clientY);
 118         },
 119
 120         /**
 121          * Handles user moving.
 122          *
 123          * @private
 124          * @param {number} clientX X
 125          * @param {number} clientY Y
 126          */
 127         handleMove: function(clientX, clientY) {
 128             // If near the bottom or top, start auto-scrolling.
 129             if (clientY < autoscroll.SCROLL_THRESHOLD) {
 130                 autoscroll.scrollAmount = -Math.min(autoscroll.SCROLL_THRESHOLD - clientY, autoscroll.SCROLL_THRESHOLD);
 131             } else if (clientY > $(window).height() - autoscroll.SCROLL_THRESHOLD) {
 132                 autoscroll.scrollAmount = Math.min(clientY - ($(window).height() - autoscroll.SCROLL_THRESHOLD),
 133                     autoscroll.SCROLL_THRESHOLD);
 134             } else {
 135                 autoscroll.scrollAmount = 0;
 136             }
 137             if (autoscroll.scrollAmount && autoscroll.scrollingId === null) {
 138                 autoscroll.startScrolling();
 139             } else if (!autoscroll.scrollAmount && autoscroll.scrollingId !== null) {
 140                 autoscroll.stopScrolling();
 141             }
 142         },
 143
 144         /**
 145          * Starts automatic scrolling.
 146          *
 147          * @private
 148          */
 149         startScrolling: function() {
 150             var maxScroll = $(document).height() - $(window).height();
 151             autoscroll.scrollingId = window.setInterval(function() {
 152                 // Work out how much to scroll.
 153                 var y = $(window).scrollTop();
 154                 var offset = Math.round(autoscroll.scrollAmount * autoscroll.SCROLL_SPEED);
 155                 if (y + offset < 0) {
 156                     offset = -y;
 157                 }
 158                 if (y + offset > maxScroll) {
 159                     offset = maxScroll - y;
 160                 }
 161                 if (offset === 0) {
 162                     return;
 163                 }
 164
 165                 // Scroll.
 166                 $(window).scrollTop(y + offset);
 167                 var realOffset = $(window).scrollTop() - y;
 168                 if (realOffset === 0) {
 169                     return;
 170                 }
 171
 172                 // Inform callback
 173                 if (autoscroll.callback) {
 174                     autoscroll.callback(realOffset);
 175                 }
 176
 177             }, autoscroll.SCROLL_FREQUENCY);
 178         },
 179
 180         /**
 181          * Stops the automatic scrolling.
 182          *
 183          * @private
 184          */
 185         stopScrolling: function() {
 186             window.clearInterval(autoscroll.scrollingId);
 187             autoscroll.scrollingId = null;
 188         }
 189     };
 190
 191     return {
 192         /**
 193          * Starts automatic scrolling if user moves near edge of window.
 194          * This should be called in response to mouse down or touch start.
 195          *
 196          * @public
 197          * @param {Function} callback Optional callback that is called every time it scrolls
 198          */
 199         start: autoscroll.start,
 200
 201         /**
 202          * Stops automatic scrolling. This should be called in response to mouse up or touch end.
 203          *
 204          * @public
 205          */
 206         stop: autoscroll.stop
 207     };
 208
 209 });