grade/grading/form/guide/amd/src/comment_chooser.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. * AMD code for the frequently used comments chooser for the marking guide grading form.
  17. *
  18. * @module gradingform_guide/comment_chooser
  19. * @copyright 2015 Jun Pataleta <jun@moodle.com>
  20. * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  21. */
  22. define(['jquery', 'core/templates', 'core/notification', 'core/yui'], function($, templates, notification) {
  23. // Private variables and functions.
  24. return /** @alias module:gradingform_guide/comment_chooser */ {
  25. // Public variables and functions.
  26. /**
  27. * Initialises the module.
  28. *
  29. * Basically, it performs the binding and handling of the button click event for
  30. * the 'Insert frequently used comment' button.
  31. *
  32. * @param {Integer} criterionId The criterion ID.
  33. * @param {String} buttonId The element ID of the button which the handler will be bound to.
  34. * @param {String} remarkId The element ID of the remark text area where the text of the selected comment will be copied to.
  35. * @param {Array} commentOptions The array of frequently used comments to be used as options.
  36. */
  37. initialise: function(criterionId, buttonId, remarkId, commentOptions) {
  38. /**
  39. * Display the chooser dialog using the compiled HTML from the mustache template
  40. * and binds onclick events for the generated comment options.
  41. *
  42. * @param {String} compiledSource The compiled HTML from the mustache template
  43. * @param {Array} comments Array containing comments.
  44. */
  45. function displayChooserDialog(compiledSource, comments) {
  46. var titleLabel = '<label>' + M.util.get_string('insertcomment', 'gradingform_guide') + '</label>';
  47. var cancelButtonId = 'comment-chooser-' + criterionId + '-cancel';
  48. var cancelButton = '<button id="' + cancelButtonId + '">' + M.util.get_string('cancel', 'moodle') + '</button>';
  49. // Set dialog's body content.
  50. var chooserDialog = new M.core.dialogue({
  51. modal: true,
  52. headerContent: titleLabel,
  53. bodyContent: compiledSource,
  54. footerContent: cancelButton,
  55. focusAfterHide: '#' + remarkId,
  56. id: "comments-chooser-dialog-" + criterionId
  57. });
  58. // Bind click event to the cancel button.
  59. $("#" + cancelButtonId).click(function() {
  60. chooserDialog.hide();
  61. });
  62. // Loop over each comment item and bind click events.
  63. $.each(comments, function(index, comment) {
  64. var commentOptionId = '#comment-option-' + criterionId + '-' + comment.id;
  65. // Delegate click event for the generated option link.
  66. $(commentOptionId).click(function() {
  67. var remarkTextArea = $('#' + remarkId);
  68. var remarkText = remarkTextArea.val();
  69. // Add line break if the current value of the remark text is not empty.
  70. if (remarkText.trim() !== '') {
  71. remarkText += '\n';
  72. }
  73. remarkText += comment.description;
  74. remarkTextArea.val(remarkText);
  75. chooserDialog.hide();
  76. });
  77. // Handle keypress on list items.
  78. $(document).off('keypress', commentOptionId).on('keypress', commentOptionId, function() {
  79. var keyCode = event.which || event.keyCode;
  80. // Enter or space key.
  81. if (keyCode == 13 || keyCode == 32) {
  82. // Trigger click event.
  83. $(commentOptionId).click();
  84. }
  85. });
  86. });
  87. // Destroy the dialog when it is hidden to allow the grading section to
  88. // be loaded as a fragment multiple times within the same page.
  89. chooserDialog.after('visibleChange', function(e) {
  90. // Going from visible to hidden.
  91. if (e.prevVal && !e.newVal) {
  92. this.destroy();
  93. }
  94. }, chooserDialog);
  95. // Show dialog.
  96. chooserDialog.show();
  97. }
  98. /**
  99. * Generates the comments chooser dialog from the grading_form/comment_chooser mustache template.
  100. */
  101. function generateCommentsChooser() {
  102. // Template context.
  103. var context = {
  104. criterionId: criterionId,
  105. comments: commentOptions
  106. };
  107. // Render the template and display the comment chooser dialog.
  108. templates.render('gradingform_guide/comment_chooser', context)
  109. .done(function(compiledSource) {
  110. displayChooserDialog(compiledSource, commentOptions);
  111. })
  112. .fail(notification.exception);
  113. }
  114. // Bind click event for the comments chooser button.
  115. $("#" + buttonId).click(function(e) {
  116. e.preventDefault();
  117. generateCommentsChooser();
  118. });
  119. }
  120. };
  121. });