[Summary view] [Print] [Text view]

   1  M.gradingform_guideeditor = {'templates' : {}, 'eventhandler' : null, 'name' : null, 'Y' : null};
   2  
   3  /**
   4   * This function is called for each guideeditor on page.
   5   */
   6  M.gradingform_guideeditor.init = function(Y, options) {
   7      M.gradingform_guideeditor.name = options.name
   8      M.gradingform_guideeditor.Y = Y
   9      M.gradingform_guideeditor.templates[options.name] = {
  10          'criterion' : options.criteriontemplate,
  11          'comment' : options.commenttemplate
  12      }
  13      M.gradingform_guideeditor.disablealleditors()
  14      Y.on('click', M.gradingform_guideeditor.clickanywhere, 'body', null)
  15      YUI().use('event-touch', function (Y) {
  16          Y.one('body').on('touchstart', M.gradingform_guideeditor.clickanywhere);
  17          Y.one('body').on('touchend', M.gradingform_guideeditor.clickanywhere);
  18      })
  19      M.gradingform_guideeditor.addhandlers()
  20  };
  21  
  22  // Adds handlers for clicking submit button. This function must be called each time JS adds new elements to html
  23  M.gradingform_guideeditor.addhandlers = function() {
  24      var Y = M.gradingform_guideeditor.Y
  25      var name = M.gradingform_guideeditor.name
  26      if (M.gradingform_guideeditor.eventhandler) {
  27          M.gradingform_guideeditor.eventhandler.detach()
  28      }
  29      M.gradingform_guideeditor.eventhandler = Y.on('click', M.gradingform_guideeditor.buttonclick, '#guide-'+name+' input[type=submit]', null);
  30  }
  31  
  32  // switches all input text elements to non-edit mode
  33  M.gradingform_guideeditor.disablealleditors = function() {
  34      var Y = M.gradingform_guideeditor.Y
  35      var name = M.gradingform_guideeditor.name
  36      Y.all('#guide-'+name+' .criteria .description input[type=text]:not(.pseudotablink)').each( function(node) {M.gradingform_guideeditor.editmode(node, false)} );
  37      Y.all('#guide-'+name+' .criteria .description textarea').each( function(node) {M.gradingform_guideeditor.editmode(node, false)} );
  38      Y.all('#guide-'+name+' .comments .description textarea').each( function(node) {M.gradingform_guideeditor.editmode(node, false)} );
  39  }
  40  
  41  // function invoked on each click on the page. If criterion values are clicked
  42  // it switches the element to edit mode. If guide button is clicked it does nothing so the 'buttonclick'
  43  // function is invoked
  44  M.gradingform_guideeditor.clickanywhere = function(e) {
  45      if (e.type == 'touchstart') {
  46          return
  47      }
  48      var el = e.target
  49      // if clicked on button - disablecurrenteditor, continue
  50      if (el.get('tagName') == 'INPUT' && el.get('type') == 'submit') {
  51          return
  52      }
  53      // if clicked on description item and this item is not enabled - enable it
  54      var container = null
  55      if ((container = el.ancestor('.criterionname')) || (container = el.ancestor('.criterionmaxscore'))) {
  56          el = container.one('input[type=text]')
  57      } else if ((container = el.ancestor('.criteriondesc')) || (container = el.ancestor('.criteriondescmarkers'))) {
  58          el = container.one('textarea')
  59      } else {
  60          el = null
  61      }
  62      if (el) {
  63          if (el.hasClass('hiddenelement')) {
  64              M.gradingform_guideeditor.disablealleditors()
  65              M.gradingform_guideeditor.editmode(el, true)
  66          }
  67          return
  68      }
  69      // else disablecurrenteditor
  70      M.gradingform_guideeditor.disablealleditors()
  71  }
  72  
  73  // switch the criterion item to edit mode or switch back
  74  M.gradingform_guideeditor.editmode = function(el, editmode) {
  75      var Y = M.gradingform_guideeditor.Y
  76      var ta = el
  77      if (!editmode && ta.hasClass('hiddenelement')) {
  78          return;
  79      }
  80      if (editmode && !ta.hasClass('hiddenelement')) {
  81          return;
  82      }
  83      var pseudotablink = '<input type="text" size="1" class="pseudotablink"/>',
  84          taplain = ta.next('.plainvalue'),
  85          tbplain = null,
  86          tb = el.one('.score input[type=text]')
  87      // add 'plainvalue' next to textarea for description/definition and next to input text field for score (if applicable)
  88      if (!taplain && ta.get('name') != '') {
  89          ta.insert('<div class="plainvalue">'+pseudotablink+'<span class="textvalue">&nbsp;</span></div>', 'after')
  90          taplain = ta.next('.plainvalue')
  91          taplain.one('.pseudotablink').on('focus', M.gradingform_guideeditor.clickanywhere)
  92          if (tb) {
  93              tb.get('parentNode').append('<span class="plainvalue">'+pseudotablink+'<span class="textvalue">&nbsp;</span></span>')
  94              tbplain = tb.get('parentNode').one('.plainvalue')
  95              tbplain.one('.pseudotablink').on('focus', M.gradingform_guideeditor.clickanywhere)
  96          }
  97      }
  98      if (tb && !tbplain) {
  99          tbplain = tb.get('parentNode').one('.plainvalue')
 100      }
 101      if (!editmode) {
 102          // if we need to hide the input fields, copy their contents to plainvalue(s). If description/definition
 103          // is empty, display the default text ('Click to edit ...') and add/remove 'empty' CSS class to element
 104          var value = Y.Lang.trim(ta.get('value'));
 105          if (value.length) {
 106              taplain.removeClass('empty')
 107          } else if (ta.get('name').indexOf('[shortname]') > 1){
 108              value = M.util.get_string('clicktoeditname', 'gradingform_guide')
 109              taplain.addClass('editname')
 110          } else {
 111              value = M.util.get_string('clicktoedit', 'gradingform_guide')
 112              taplain.addClass('empty')
 113          }
 114          // Replace newlines with <br> tags, when displaying in the page.
 115          taplain.one('.textvalue').set('innerHTML', Y.Escape.html(value).replace(/(?:\r\n|\r|\n)/g, '<br>'))
 116          if (tb) {
 117              tbplain.one('.textvalue').set('innerHTML', Y.Escape.html(tb.get('value')))
 118          }
 119          // hide/display textarea, textbox and plaintexts
 120          taplain.removeClass('hiddenelement')
 121          ta.addClass('hiddenelement')
 122          if (tb) {
 123              tbplain.removeClass('hiddenelement')
 124              tb.addClass('hiddenelement')
 125          }
 126      } else {
 127          // if we need to show the input fields, set the width/height for textarea so it fills the cell
 128          try {
 129              if (ta.get('name').indexOf('[maxscore]') > 1) {
 130                  ta.setStyle('width', '25px');
 131              } else {
 132                  var width = parseFloat(ta.get('parentNode').getComputedStyle('width'))-10,
 133                      height = parseFloat(ta.get('parentNode').getComputedStyle('height'))
 134                  ta.setStyle('width', Math.max(width,50)+'px')
 135                  ta.setStyle('height', Math.max(height,30)+'px')
 136              }
 137          }
 138          catch (err) {
 139              // this browser do not support 'computedStyle', leave the default size of the textbox
 140          }
 141          // hide/display textarea, textbox and plaintexts
 142          taplain.addClass('hiddenelement')
 143          ta.removeClass('hiddenelement')
 144          if (tb) {
 145              tbplain.addClass('hiddenelement')
 146              tb.removeClass('hiddenelement')
 147          }
 148      }
 149      // focus the proper input field in edit mode
 150      if (editmode) {
 151          ta.focus()
 152      }
 153  }
 154  
 155  // handler for clicking on submit buttons within guideeditor element. Adds/deletes/rearranges criteria/comments on client side
 156  M.gradingform_guideeditor.buttonclick = function(e, confirmed) {
 157      var Y = M.gradingform_guideeditor.Y
 158      var name = M.gradingform_guideeditor.name
 159      if (e.target.get('type') != 'submit') {
 160          return;
 161      }
 162      M.gradingform_guideeditor.disablealleditors()
 163      var chunks = e.target.get('id').split('-')
 164      var section = chunks[1]
 165      var action = chunks[chunks.length-1]
 166  
 167      if (chunks[0] != name || (section != 'criteria' && section != 'comments')) {
 168          return;
 169      }
 170      // prepare the id of the next inserted criterion
 171      var elements_str;
 172      if (section == 'criteria') {
 173          elements_str = '#guide-'+name+' .criteria .criterion'
 174      } else if (section == 'comments') {
 175          elements_str = '#guide-'+name+' .comments .criterion'
 176      }
 177      var newid = 0;
 178      if (action == 'addcriterion' || action == 'addcomment') {
 179          newid = M.gradingform_guideeditor.calculatenewid(elements_str);
 180      }
 181      var dialog_options = {
 182          'scope' : this,
 183          'callbackargs' : [e, true],
 184          'callback' : M.gradingform_guideeditor.buttonclick
 185      };
 186      if (chunks.length == 3 && (action == 'addcriterion' || action == 'addcomment')) {
 187          // ADD NEW CRITERION OR COMMENT
 188          var parentel = Y.one('#'+name+'-'+section)
 189          if (parentel.one('>tbody')) {
 190              parentel = parentel.one('>tbody')
 191          }
 192          if (section == 'criteria') {
 193              var newcriterion = M.gradingform_guideeditor.templates[name]['criterion']
 194              parentel.append(newcriterion.replace(/\{CRITERION-id\}/g, 'NEWID'+newid).replace(/\{.+?\}/g, ''))
 195          } else if (section == 'comments') {
 196              var newcomment = M.gradingform_guideeditor.templates[name]['comment']
 197              parentel.append(newcomment.replace(/\{COMMENT-id\}/g, 'NEWID'+newid).replace(/\{.+?\}/g, ''))
 198          }
 199  
 200          M.gradingform_guideeditor.addhandlers();
 201          M.gradingform_guideeditor.disablealleditors()
 202          M.gradingform_guideeditor.assignclasses(elements_str)
 203  
 204          // Enable edit mode of the newly added criterion/comment entry.
 205          var inputTarget = 'shortname';
 206          if (action == 'addcomment') {
 207              inputTarget = 'description';
 208          }
 209          var inputTargetId = '#guide-' + name + ' #' + name + '-' + section + '-NEWID' + newid + '-' + inputTarget;
 210          M.gradingform_guideeditor.editmode(Y.one(inputTargetId), true);
 211      } else if (chunks.length == 4 && action == 'moveup') {
 212          // MOVE UP
 213          el = Y.one('#'+name+'-'+section+'-'+chunks[2])
 214          if (el.previous()) {
 215              el.get('parentNode').insertBefore(el, el.previous())
 216          }
 217          M.gradingform_guideeditor.assignclasses(elements_str)
 218      } else if (chunks.length == 4 && action == 'movedown') {
 219          // MOVE DOWN
 220          el = Y.one('#'+name+'-'+section+'-'+chunks[2])
 221          if (el.next()) {
 222              el.get('parentNode').insertBefore(el.next(), el)
 223          }
 224          M.gradingform_guideeditor.assignclasses(elements_str)
 225      } else if (chunks.length == 4 && action == 'delete') {
 226          // DELETE
 227          if (confirmed) {
 228              Y.one('#'+name+'-'+section+'-'+chunks[2]).remove()
 229              M.gradingform_guideeditor.assignclasses(elements_str)
 230          } else {
 231              dialog_options['message'] = M.util.get_string('confirmdeletecriterion', 'gradingform_guide')
 232              M.util.show_confirm_dialog(e, dialog_options);
 233          }
 234      } else {
 235          // unknown action
 236          return;
 237      }
 238      e.preventDefault();
 239  }
 240  
 241  // properly set classes (first/last/odd/even) and/or criterion sortorder for elements Y.all(elements_str)
 242  M.gradingform_guideeditor.assignclasses = function (elements_str) {
 243      var elements = M.gradingform_guideeditor.Y.all(elements_str)
 244      for (var i=0; i<elements.size(); i++) {
 245          elements.item(i).removeClass('first').removeClass('last').removeClass('even').removeClass('odd').
 246              addClass(((i%2)?'odd':'even') + ((i==0)?' first':'') + ((i==elements.size()-1)?' last':''))
 247          elements.item(i).all('input[type=hidden]').each(
 248              function(node) {if (node.get('name').match(/sortorder/)) { node.set('value', i)}}
 249          );
 250      }
 251  }
 252  
 253  // returns unique id for the next added element, it should not be equal to any of Y.all(elements_str) ids
 254  M.gradingform_guideeditor.calculatenewid = function (elements_str) {
 255      var newid = 1
 256      M.gradingform_guideeditor.Y.all(elements_str).each( function(node) {
 257          var idchunks = node.get('id').split('-'), id = idchunks.pop();
 258          if (id.match(/^NEWID(\d+)$/)) { newid = Math.max(newid, parseInt(id.substring(5))+1)};
 259      } );
 260      return newid
 261  }