mod/assign/amd/src/grading_review_panel.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. * Javascript controller for the "Review" panel at the left of the page.
  17. *
  18. * @module mod_assign/grading_review_panel
  19. * @copyright 2016 Damyon Wiese <damyon@moodle.com>
  20. * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  21. * @since 3.1
  22. */
  23. define(['jquery', 'mod_assign/grading_events'], function($, GradingEvents) {
  24. /**
  25. * GradingReviewPanel class.
  26. *
  27. * @class mod_assign/grading_review_panel
  28. */
  29. var GradingReviewPanel = function() {
  30. this._region = $('[data-region="review-panel-content"]');
  31. this.registerEventListeners();
  32. };
  33. /** @property {JQuery} JQuery node for the page region containing the user navigation. */
  34. GradingReviewPanel.prototype._region = null;
  35. /**
  36. * It is first come first served to get ownership of the grading review panel.
  37. * There can be only one.
  38. *
  39. * @public
  40. * @method getReviewPanel
  41. * @param {String} pluginname - the first plugin to ask for the panel gets it.
  42. * @return {DOMNode} or false
  43. */
  44. GradingReviewPanel.prototype.getReviewPanel = function(pluginname) {
  45. var owner = this._region.data('panel-owner');
  46. if (typeof owner == "undefined") {
  47. this._region.data('review-panel-plugin', pluginname);
  48. }
  49. if (this._region.data('review-panel-plugin') == pluginname) {
  50. return this._region[0];
  51. }
  52. return false;
  53. };
  54. /**
  55. * Get the toggle review panel button.
  56. *
  57. * @method getTogglePanelButton
  58. * @return {jQuery}
  59. */
  60. GradingReviewPanel.prototype.getTogglePanelButton = function() {
  61. return this.getPanelElement().find('[data-region="review-panel-toggle"]');
  62. };
  63. /**
  64. * Get the review panel element.
  65. *
  66. * @method getPanelElement
  67. * @return {jQuery}
  68. */
  69. GradingReviewPanel.prototype.getPanelElement = function() {
  70. return $('[data-region="review-panel"]');
  71. };
  72. /**
  73. * Get the review panel content element.
  74. *
  75. * @method getPanelContentElement
  76. * @return {jQuery}
  77. */
  78. GradingReviewPanel.prototype.getPanelContentElement = function() {
  79. return $('[data-region="review-panel-content"]');
  80. };
  81. /**
  82. * Show/Hide the review panel.
  83. *
  84. * @method togglePanel
  85. */
  86. GradingReviewPanel.prototype.togglePanel = function() {
  87. if (this.getPanelElement().hasClass('collapsed')) {
  88. $(document).trigger(GradingEvents.EXPAND_REVIEW_PANEL);
  89. } else {
  90. $(document).trigger(GradingEvents.COLLAPSE_REVIEW_PANEL);
  91. }
  92. };
  93. /**
  94. * Hide the review panel.
  95. *
  96. * @method collapsePanel
  97. */
  98. GradingReviewPanel.prototype.collapsePanel = function() {
  99. this.getPanelElement().addClass('collapsed').removeClass('grade-panel-collapsed');
  100. this.getPanelContentElement().attr('aria-hidden', true);
  101. };
  102. /**
  103. * Show the review panel.
  104. *
  105. * @method expandPanel
  106. */
  107. GradingReviewPanel.prototype.expandPanel = function() {
  108. this.getPanelElement().removeClass('collapsed');
  109. this.getPanelContentElement().removeAttr('aria-hidden');
  110. };
  111. /**
  112. * Register event listeners for the review panel.
  113. *
  114. * @method registerEventListeners
  115. */
  116. GradingReviewPanel.prototype.registerEventListeners = function() {
  117. var toggleReviewPanelButton = this.getTogglePanelButton();
  118. toggleReviewPanelButton.click(function(e) {
  119. this.togglePanel();
  120. e.preventDefault();
  121. }.bind(this));
  122. toggleReviewPanelButton.keydown(function(e) {
  123. if (!e.metaKey && !e.shiftKey && !e.altKey && !e.ctrlKey) {
  124. if (e.keyCode === 13 || e.keyCode === 32) {
  125. this.togglePanel();
  126. e.preventDefault();
  127. }
  128. }
  129. }.bind(this));
  130. var docElement = $(document);
  131. docElement.on(GradingEvents.COLLAPSE_REVIEW_PANEL, function() {
  132. this.collapsePanel();
  133. }.bind(this));
  134. // Need special styling when grade panel is collapsed.
  135. docElement.on(GradingEvents.COLLAPSE_GRADE_PANEL, function() {
  136. this.expandPanel();
  137. this.getPanelElement().addClass('grade-panel-collapsed');
  138. }.bind(this));
  139. docElement.on(GradingEvents.EXPAND_REVIEW_PANEL, function() {
  140. this.expandPanel();
  141. }.bind(this));
  142. docElement.on(GradingEvents.EXPAND_GRADE_PANEL, function() {
  143. this.getPanelElement().removeClass('grade-panel-collapsed');
  144. }.bind(this));
  145. };
  146. return GradingReviewPanel;
  147. });