Proyectos de Subversion Moodle

// This file is part of Moodle - http://moodle.org/

//

// Moodle is free software: you can redistribute it and/or modify

// it under the terms of the GNU General Public License as published by

// the Free Software Foundation, either version 3 of the License, or

// (at your option) any later version.

//

// Moodle is distributed in the hope that it will be useful,

// but WITHOUT ANY WARRANTY; without even the implied warranty of

// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the

// GNU General Public License for more details.

//

// You should have received a copy of the GNU General Public License

// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.

/**

 * Contain the logic for a drawer.

 *

 * @module theme_universe/drawer

 * @copyright  2016 Damyon Wiese

 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later

 */

define([

  "jquery",

  "core/custom_interaction_events",

  "core/log",

  "core/pubsub",

  "core/aria",

  "core_user/repository",

], function ($, CustomEvents, Log, PubSub, Aria, UserRepository) {

  var SELECTORS = {

    TOGGLE_REGION: '[data-region="drawer-toggle"]',

    TOGGLE_ACTION: '[data-action="toggle-drawer"]',

    TOGGLE_TARGET: "aria-controls",

    TOGGLE_SIDE: "left",

    BODY: "body",

    SECTION: '.list-group-item[href*="#section-"]',

    DRAWER: "#nav-drawer",

  };

  var small = $(document).width() < 768;

  /**

   * Constructor for the Drawer.

   */

  var Drawer = function () {

    if (!$(SELECTORS.TOGGLE_REGION).length) {

      Log.debug("Page is missing a drawer region");

    }

    if (!$(SELECTORS.TOGGLE_ACTION).length) {

      Log.debug("Page is missing a drawer toggle link");

    }

    $(SELECTORS.TOGGLE_REGION).each(

      function (index, ele) {

        var trigger = $(ele).find(SELECTORS.TOGGLE_ACTION);

        var drawerid = trigger.attr("aria-controls");

        var drawer = $(document.getElementById(drawerid));

        var hidden = trigger.attr("aria-expanded") == "false";

        var side = trigger.attr("data-side");

        var body = $(SELECTORS.BODY);

        var preference = trigger.attr("data-preference");

        if (small) {

          UserRepository.setUserPreference(preference, false);

        }

        drawer.on("mousewheel DOMMouseScroll", this.preventPageScroll);

        if (!hidden) {

          body.addClass("drawer-open-" + side);

          trigger.attr("aria-expanded", "true");

        } else {

          trigger.attr("aria-expanded", "false");

        }

      }.bind(this)

    );

    this.registerEventListeners();

    if (small) {

      this.closeAll();

    }

  };

  Drawer.prototype.closeAll = function () {

    $(SELECTORS.TOGGLE_REGION).each(function (index, ele) {

      var trigger = $(ele).find(SELECTORS.TOGGLE_ACTION);

      var side = trigger.attr("data-side");

      var body = $(SELECTORS.BODY);

      var drawerid = trigger.attr("aria-controls");

      var drawer = $(document.getElementById(drawerid));

      var preference = trigger.attr("data-preference");

      trigger.attr("aria-expanded", "false");

      body.removeClass("drawer-open-" + side);

      Aria.hide(drawer.get());

      drawer.addClass("closed");

      if (!small) {

        UserRepository.setUserPreference(preference, false);

      }

    });

  };

  /**

   * Open / close the blocks drawer.

   *

   * @method toggleDrawer

   * @param {Event} e

   */

  Drawer.prototype.toggleDrawer = function (e) {

    var trigger = $(e.target).closest("[data-action=toggle-drawer]");

    var drawerid = trigger.attr("aria-controls");

    var drawer = $(document.getElementById(drawerid));

    var body = $(SELECTORS.BODY);

    var side = trigger.attr("data-side");

    var preference = trigger.attr("data-preference");

    if (small) {

      UserRepository.setUserPreference(preference, false);

    }

    body.addClass("drawer-ease");

    var open = trigger.attr("aria-expanded") == "true";

    if (!open) {

      // Open.

      trigger.attr("aria-expanded", "true");

      Aria.unhide(drawer.get());

      drawer.focus();

      body.addClass("drawer-open-" + side);

      drawer.removeClass("closed");

      if (!small) {

        UserRepository.setUserPreference(preference, true);

      }

    } else {

      // Close.

      body.removeClass("drawer-open-" + side);

      trigger.attr("aria-expanded", "false");

      drawer

        .addClass("closed")

        .delay(500)

        .queue(function () {

          // Ensure that during the delay, the drawer wasn't re-opened.

          if ($(this).hasClass("closed")) {

            Aria.hide(this);

          }

          $(this).dequeue();

        });

      if (!small) {

        UserRepository.setUserPreference(preference, false);

      }

    }

    // Publish an event to tell everything that the drawer has been toggled.

    // The drawer transitions closed so another event will fire once teh transition

    // has completed.

    PubSub.publish("nav-drawer-toggle-start", open);

  };

  /**

   * Prevent the page from scrolling when the drawer is at max scroll.

   *

   * @method preventPageScroll

   * @param  {Event} e

   */

  Drawer.prototype.preventPageScroll = function (e) {

    var delta =

        e.wheelDelta ||

        (e.originalEvent && e.originalEvent.wheelDelta) ||

        -e.originalEvent.detail,

      bottomOverflow =

        this.scrollTop + $(this).outerHeight() - this.scrollHeight >= 0,

      topOverflow = this.scrollTop <= 0;

    if ((delta < 0 && bottomOverflow) || (delta > 0 && topOverflow)) {

      e.preventDefault();

    }

  };

  /**

   * Set up all of the event handling for the modal.

   *

   * @method registerEventListeners

   */

  Drawer.prototype.registerEventListeners = function () {

    $(SELECTORS.TOGGLE_ACTION).each(

      function (index, element) {

        CustomEvents.define($(element), [CustomEvents.events.activate]);

        $(element).on(

          CustomEvents.events.activate,

          function (e, data) {

            this.toggleDrawer(data.originalEvent);

            data.originalEvent.preventDefault();

          }.bind(this)

        );

      }.bind(this)

    );

    $(SELECTORS.SECTION).click(

      function () {

        if (small) {

          this.closeAll();

        }

      }.bind(this)

    );

    // Publish an event to tell everything that the drawer completed the transition

    // to either an open or closed state.

    $(SELECTORS.DRAWER).on(

      "webkitTransitionEnd msTransitionEnd transitionend",

      function (e) {

        var drawer = $(e.target).closest(SELECTORS.DRAWER);

        // Note: aria-hidden is either present, or absent. It should not be set to false.

        var open = !!drawer.attr("aria-hidden");

        PubSub.publish("nav-drawer-toggle-end", open);

      }

    );

  };

  return {

    init: function () {

      return new Drawer();

    },

  };

});