[Summary view] [Print] [Text view]

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