Proyectos de Subversion Moodle

Rev

Rev 918 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 918 Rev 1441
Línea 18... Línea 18...
18 
 *
 18 
 *
19 
 * @module theme_universe/drawer
 19 
 * @module theme_universe/drawer
20 
 * @copyright  2016 Damyon Wiese
 20 
 * @copyright  2016 Damyon Wiese
21 
 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 21 
 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
22 
 */
 22 
 */
23 
define([
 - 
 
24 
  "jquery",
 - 
 
25 
  "core/custom_interaction_events",
 23 
define(['jquery', 'core/custom_interaction_events', 'core/log', 'core/pubsub', 'core/aria', 'core_user/repository'],
26 
  "core/log",
 - 
 
27 
  "core/pubsub",
 - 
 
28 
  "core/aria",
 - 
 
29 
  "core_user/repository",
 - 
 
30 
], function ($, CustomEvents, Log, PubSub, Aria, UserRepository) {
 24 
     function($, CustomEvents, Log, PubSub, Aria, UserRepository) {
- 
 
 25 
 
31 
  var SELECTORS = {
 26 
    var SELECTORS = {
32 
    TOGGLE_REGION: '[data-region="drawer-toggle"]',
 27 
        TOGGLE_REGION: '[data-region="drawer-toggle"]',
33 
    TOGGLE_ACTION: '[data-action="toggle-drawer"]',
 28 
        TOGGLE_ACTION: '[data-action="toggle-drawer"]',
34 
    TOGGLE_TARGET: "aria-controls",
 29 
        TOGGLE_TARGET: 'aria-controls',
35 
    TOGGLE_SIDE: "left",
 30 
        TOGGLE_SIDE: 'left',
36 
    BODY: "body",
 31 
        BODY: 'body',
37 
    SECTION: '.list-group-item[href*="#section-"]',
 32 
        SECTION: '.list-group-item[href*="#section-"]',
38 
    DRAWER: "#nav-drawer",
 33 
        DRAWER: '#nav-drawer'
39 
  };
 34 
    };
40 
 
 35 
 
41 
  var small = $(document).width() < 768;
 36 
    var small = $(document).width() < 768;
42 
 
 37 
 
43 
  /**
 38 
    /**
44 
   * Constructor for the Drawer.
 39 
     * Constructor for the Drawer.
45 
   */
 40 
     */
46 
  var Drawer = function () {
 41 
    var Drawer = function() {
- 
 
 42 
 
47 
    if (!$(SELECTORS.TOGGLE_REGION).length) {
 43 
        if (!$(SELECTORS.TOGGLE_REGION).length) {
48 
      Log.debug("Page is missing a drawer region");
 44 
            Log.debug('Page is missing a drawer region');
49 
    }
 45 
        }
50 
    if (!$(SELECTORS.TOGGLE_ACTION).length) {
 46 
        if (!$(SELECTORS.TOGGLE_ACTION).length) {
51 
      Log.debug("Page is missing a drawer toggle link");
 47 
            Log.debug('Page is missing a drawer toggle link');
52 
    }
 48 
        }
53 
    $(SELECTORS.TOGGLE_REGION).each(
 49 
        $(SELECTORS.TOGGLE_REGION).each(function(index, ele) {
- 
 
 50 
            var trigger = $(ele).find(SELECTORS.TOGGLE_ACTION);
- 
 
 51 
            var drawerid = trigger.attr('aria-controls');
- 
 
 52 
            var drawer = $(document.getElementById(drawerid));
- 
 
 53 
            var hidden = trigger.attr('aria-expanded') == 'false';
- 
 
 54 
            var side = trigger.attr('data-side');
- 
 
 55 
            var body = $(SELECTORS.BODY);
- 
 
 56 
            var preference = trigger.attr('data-preference');
- 
 
 57 
            if (small) {
- 
 
 58 
                UserRepository.setUserPreference(preference, false);
- 
 
 59 
            }
- 
 
 60 
 
- 
 
 61 
            drawer.on('mousewheel DOMMouseScroll', this.preventPageScroll);
- 
 
 62 
 
54 
      function (index, ele) {
 63 
            if (!hidden) {
- 
 
 64 
                body.addClass('drawer-open-' + side);
- 
 
 65 
                trigger.attr('aria-expanded', 'true');
- 
 
 66 
            } else {
- 
 
 67 
                trigger.attr('aria-expanded', 'false');
- 
 
 68 
            }
- 
 
 69 
        }.bind(this));
- 
 
 70 
 
- 
 
 71 
        this.registerEventListeners();
- 
 
 72 
        if (small) {
- 
 
 73 
            this.closeAll();
- 
 
 74 
        }
- 
 
 75 
    };
- 
 
 76 
 
- 
 
 77 
    Drawer.prototype.closeAll = function() {
- 
 
 78 
        $(SELECTORS.TOGGLE_REGION).each(function(index, ele) {
55 
        var trigger = $(ele).find(SELECTORS.TOGGLE_ACTION);
 79 
            var trigger = $(ele).find(SELECTORS.TOGGLE_ACTION);
- 
 
 80 
            var side = trigger.attr('data-side');
- 
 
 81 
            var body = $(SELECTORS.BODY);
- 
 
 82 
            var drawerid = trigger.attr('aria-controls');
- 
 
 83 
            var drawer = $(document.getElementById(drawerid));
- 
 
 84 
            var preference = trigger.attr('data-preference');
- 
 
 85 
 
- 
 
 86 
            trigger.attr('aria-expanded', 'false');
- 
 
 87 
            body.removeClass('drawer-open-' + side);
- 
 
 88 
            Aria.hide(drawer.get());
- 
 
 89 
            drawer.addClass('closed');
- 
 
 90 
            if (!small) {
- 
 
 91 
                UserRepository.setUserPreference(preference, false);
- 
 
 92 
            }
- 
 
 93 
        });
- 
 
 94 
    };
- 
 
 95 
 
- 
 
 96 
    /**
- 
 
 97 
     * Open / close the blocks drawer.
- 
 
 98 
     *
- 
 
 99 
     * @method toggleDrawer
- 
 
 100 
     * @param {Event} e
- 
 
 101 
     */
- 
 
 102 
    Drawer.prototype.toggleDrawer = function(e) {
- 
 
 103 
        var trigger = $(e.target).closest('[data-action=toggle-drawer]');
56 
        var drawerid = trigger.attr("aria-controls");
 104 
        var drawerid = trigger.attr('aria-controls');
57 
        var drawer = $(document.getElementById(drawerid));
 105 
        var drawer = $(document.getElementById(drawerid));
58 
        var hidden = trigger.attr("aria-expanded") == "false";
 - 
 
59 
        var side = trigger.attr("data-side");
 - 
 
60 
        var body = $(SELECTORS.BODY);
 106 
        var body = $(SELECTORS.BODY);
- 
 
 107 
        var side = trigger.attr('data-side');
61 
        var preference = trigger.attr("data-preference");
 108 
        var preference = trigger.attr('data-preference');
62 
        if (small) {
 109 
        if (small) {
63 
          UserRepository.setUserPreference(preference, false);
 110 
            UserRepository.setUserPreference(preference, false);
64 
        }
 111 
        }
Línea -... Línea 112...
- 
 
 112 
 
65 
 
 113 
        body.addClass('drawer-ease');
66 
        drawer.on("mousewheel DOMMouseScroll", this.preventPageScroll);
 - 
 
67 
 
 114 
        var open = trigger.attr('aria-expanded') == 'true';
- 
 
 115 
        if (!open) {
- 
 
 116 
            // Open.
- 
 
 117 
            trigger.attr('aria-expanded', 'true');
- 
 
 118 
            Aria.unhide(drawer.get());
68 
        if (!hidden) {
 119 
            drawer.focus();
69 
          body.addClass("drawer-open-" + side);
 120 
            body.addClass('drawer-open-' + side);
- 
 
 121 
            drawer.removeClass('closed');
- 
 
 122 
            if (!small) {
- 
 
 123 
                UserRepository.setUserPreference(preference, true);
70 
          trigger.attr("aria-expanded", "true");
 124 
            }
- 
 
 125 
        } else {
- 
 
 126 
            // Close.
71 
        } else {
 127 
            body.removeClass('drawer-open-' + side);
- 
 
 128 
            trigger.attr('aria-expanded', 'false');
- 
 
 129 
            drawer.addClass('closed').delay(500).queue(function() {
- 
 
 130 
                // Ensure that during the delay, the drawer wasn't re-opened.
- 
 
 131 
                if ($(this).hasClass('closed')) {
- 
 
 132 
                    Aria.hide(this);
- 
 
 133 
                }
- 
 
 134 
                $(this).dequeue();
- 
 
 135 
            });
- 
 
 136 
            if (!small) {
- 
 
 137 
                UserRepository.setUserPreference(preference, false);
72 
          trigger.attr("aria-expanded", "false");
 138 
            }
73 
        }
 - 
 
74 
      }.bind(this)
 - 
 
Línea 75... Línea -...
75 
    );
 - 
 
76 
 
 - 
 
77 
    this.registerEventListeners();
 - 
 
78 
    if (small) {
 - 
 
79 
      this.closeAll();
 - 
 
80 
    }
 - 
 
81 
  };
 - 
 
82 
 
 - 
 
83 
  Drawer.prototype.closeAll = function () {
 - 
 
84 
    $(SELECTORS.TOGGLE_REGION).each(function (index, ele) {
 - 
 
85 
      var trigger = $(ele).find(SELECTORS.TOGGLE_ACTION);
 - 
 
86 
      var side = trigger.attr("data-side");
 - 
 
87 
      var body = $(SELECTORS.BODY);
 - 
 
88 
      var drawerid = trigger.attr("aria-controls");
 - 
 
89 
      var drawer = $(document.getElementById(drawerid));
 - 
 
90 
      var preference = trigger.attr("data-preference");
 - 
 
91 
 
 - 
 
92 
      trigger.attr("aria-expanded", "false");
 - 
 
93 
      body.removeClass("drawer-open-" + side);
 - 
 
94 
      Aria.hide(drawer.get());
 - 
 
95 
      drawer.addClass("closed");
 - 
 
96 
      if (!small) {
 - 
 
97 
        UserRepository.setUserPreference(preference, false);
 - 
 
98 
      }
 - 
 
99 
    });
 - 
 
100 
  };
 - 
 
101 
 
 - 
 
102 
  /**
 - 
 
103 
   * Open / close the blocks drawer.
 - 
 
104 
   *
 - 
 
105 
   * @method toggleDrawer
 - 
 
106 
   * @param {Event} e
 - 
 
107 
   */
 - 
 
108 
  Drawer.prototype.toggleDrawer = function (e) {
 - 
 
109 
    var trigger = $(e.target).closest("[data-action=toggle-drawer]");
 - 
 
110 
    var drawerid = trigger.attr("aria-controls");
 - 
 
111 
    var drawer = $(document.getElementById(drawerid));
 - 
 
112 
    var body = $(SELECTORS.BODY);
 - 
 
113 
    var side = trigger.attr("data-side");
 - 
 
114 
    var preference = trigger.attr("data-preference");
 - 
 
115 
    if (small) {
 - 
 
116 
      UserRepository.setUserPreference(preference, false);
 - 
 
117 
    }
 - 
 
118 
 
 - 
 
119 
    body.addClass("drawer-ease");
 - 
 
120 
    var open = trigger.attr("aria-expanded") == "true";
 - 
 
121 
    if (!open) {
 - 
 
122 
      // Open.
 - 
 
123 
      trigger.attr("aria-expanded", "true");
 - 
 
124 
      Aria.unhide(drawer.get());
 - 
 
125 
      drawer.focus();
 - 
 
126 
      body.addClass("drawer-open-" + side);
 - 
 
127 
      drawer.removeClass("closed");
 - 
 
128 
      if (!small) {
 - 
 
129 
        UserRepository.setUserPreference(preference, true);
 - 
 
130 
      }
 - 
 
131 
    } else {
 - 
 
132 
      // Close.
 - 
 
133 
      body.removeClass("drawer-open-" + side);
 - 
 
134 
      trigger.attr("aria-expanded", "false");
 - 
 
135 
      drawer
 - 
 
136 
        .addClass("closed")
 - 
 
137 
        .delay(500)
 - 
 
138 
        .queue(function () {
 - 
 
139 
          // Ensure that during the delay, the drawer wasn't re-opened.
 - 
 
140 
          if ($(this).hasClass("closed")) {
 - 
 
141 
            Aria.hide(this);
 - 
 
142 
          }
 - 
 
143 
          $(this).dequeue();
 - 
 
144 
        });
 - 
 
145 
      if (!small) {
 - 
 
146 
        UserRepository.setUserPreference(preference, false);
 - 
 
147 
      }
 - 
 
148 
    }
 139 
        }
149 
 
 140 
 
150 
    // Publish an event to tell everything that the drawer has been toggled.
 141 
        // Publish an event to tell everything that the drawer has been toggled.
151 
    // The drawer transitions closed so another event will fire once teh transition
 142 
        // The drawer transitions closed so another event will fire once teh transition
152 
    // has completed.
 143 
        // has completed.
153 
    PubSub.publish("nav-drawer-toggle-start", open);
 144 
        PubSub.publish('nav-drawer-toggle-start', open);
154 
  };
 145 
    };
155 
 
 146 
 
156 
  /**
 147 
    /**
157 
   * Prevent the page from scrolling when the drawer is at max scroll.
 148 
     * Prevent the page from scrolling when the drawer is at max scroll.
158 
   *
 149 
     *
159 
   * @method preventPageScroll
 150 
     * @method preventPageScroll
160 
   * @param  {Event} e
 151 
     * @param  {Event} e
161 
   */
 - 
 
162 
  Drawer.prototype.preventPageScroll = function (e) {
 - 
 
163 
    var delta =
 152 
     */
164 
        e.wheelDelta ||
 - 
 
165 
        (e.originalEvent && e.originalEvent.wheelDelta) ||
 - 
 
166 
        -e.originalEvent.detail,
 153 
    Drawer.prototype.preventPageScroll = function(e) {
167 
      bottomOverflow =
 154 
        var delta = e.wheelDelta || (e.originalEvent && e.originalEvent.wheelDelta) || -e.originalEvent.detail,
168 
        this.scrollTop + $(this).outerHeight() - this.scrollHeight >= 0,
 - 
 
169 
      topOverflow = this.scrollTop <= 0;
 - 
 
170 
 
 - 
 
171 
    if ((delta < 0 && bottomOverflow) || (delta > 0 && topOverflow)) {
 - 
 
172 
      e.preventDefault();
 - 
 
173 
    }
 - 
 
174 
  };
 - 
 
175 
 
 - 
 
176 
  /**
 - 
 
177 
   * Set up all of the event handling for the modal.
 - 
 
178 
   *
 - 
 
179 
   * @method registerEventListeners
 - 
 
180 
   */
 - 
 
181 
  Drawer.prototype.registerEventListeners = function () {
 - 
 
182 
    $(SELECTORS.TOGGLE_ACTION).each(
 - 
 
183 
      function (index, element) {
 - 
 
184 
        CustomEvents.define($(element), [CustomEvents.events.activate]);
 - 
 
185 
        $(element).on(
 - 
 
186 
          CustomEvents.events.activate,
 - 
 
187 
          function (e, data) {
 - 
 
188 
            this.toggleDrawer(data.originalEvent);
 - 
 
189 
            data.originalEvent.preventDefault();
 - 
 
190 
          }.bind(this)
 - 
 
191 
        );
 - 
 
Línea 192... Línea -...
192 
      }.bind(this)
 - 
 
193 
    );
 - 
 
194 
 
 155 
            bottomOverflow = (this.scrollTop + $(this).outerHeight() - this.scrollHeight) >= 0,
195 
    $(SELECTORS.SECTION).click(
 156 
            topOverflow = this.scrollTop <= 0;
196 
      function () {
 157 
 
- 
 
 158 
        if ((delta < 0 && bottomOverflow) || (delta > 0 && topOverflow)) {
- 
 
 159 
            e.preventDefault();
- 
 
 160 
        }
- 
 
 161 
    };
- 
 
 162 
 
- 
 
 163 
    /**
- 
 
 164 
     * Set up all of the event handling for the modal.
- 
 
 165 
     *
- 
 
 166 
     * @method registerEventListeners
- 
 
 167 
     */
- 
 
 168 
    Drawer.prototype.registerEventListeners = function() {
- 
 
 169 
 
- 
 
 170 
        $(SELECTORS.TOGGLE_ACTION).each(function(index, element) {
- 
 
 171 
            CustomEvents.define($(element), [CustomEvents.events.activate]);
- 
 
 172 
            $(element).on(CustomEvents.events.activate, function(e, data) {
197 
        if (small) {
 173 
                this.toggleDrawer(data.originalEvent);
- 
 
 174 
                data.originalEvent.preventDefault();
- 
 
 175 
            }.bind(this));
- 
 
 176 
        }.bind(this));
- 
 
 177 
 
- 
 
 178 
        $(SELECTORS.SECTION).click(function() {
- 
 
 179 
            if (small) {
- 
 
 180 
                this.closeAll();
- 
 
 181 
            }
- 
 
 182 
        }.bind(this));
- 
 
 183 
 
- 
 
 184 
        // Publish an event to tell everything that the drawer completed the transition
- 
 
 185 
        // to either an open or closed state.
- 
 
 186 
        $(SELECTORS.DRAWER).on('webkitTransitionEnd msTransitionEnd transitionend', function(e) {
- 
 
 187 
            var drawer = $(e.target).closest(SELECTORS.DRAWER);
- 
 
 188 
            // Note: aria-hidden is either present, or absent. It should not be set to false.
198 
          this.closeAll();
 189 
            var open = !!drawer.attr('aria-hidden');
Línea 199... Línea -...
199 
        }
 - 
 
200 
      }.bind(this)
 - 
 
201 
    );
 - 
 
202 
 
 - 
 
203 
    // Publish an event to tell everything that the drawer completed the transition
 - 
 
204 
    // to either an open or closed state.
 - 
 
205 
    $(SELECTORS.DRAWER).on(
 - 
 
206 
      "webkitTransitionEnd msTransitionEnd transitionend",
 - 
 
207 
      function (e) {
 - 
 
208 
        var drawer = $(e.target).closest(SELECTORS.DRAWER);
 - 
 
209 
        // Note: aria-hidden is either present, or absent. It should not be set to false.
 - 
 
210 
        var open = !!drawer.attr("aria-hidden");
 - 
 
211 
        PubSub.publish("nav-drawer-toggle-end", open);
 - 
 
212 
      }
 190 
            PubSub.publish('nav-drawer-toggle-end', open);
213 
    );
 191 
        });
214 
  };
 192 
    };
215 
 
 193 
 
216 
  return {
 194 
    return {
217 
    init: function () {
 195 
        'init': function() {