[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.str.gradingform_guide.clicktoeditname
 109              taplain.addClass('editname')
 110          } else {
 111              value = M.str.gradingform_guide.clicktoedit
 112              taplain.addClass('empty')
 113          }
 114          taplain.one('.textvalue').set('innerHTML', Y.Escape.html(value))
 115          if (tb) {
 116              tbplain.one('.textvalue').set('innerHTML', Y.Escape.html(tb.get('value')))
 117          }
 118          // hide/display textarea, textbox and plaintexts
 119          taplain.removeClass('hiddenelement')
 120          ta.addClass('hiddenelement')
 121          if (tb) {
 122              tbplain.removeClass('hiddenelement')
 123              tb.addClass('hiddenelement')
 124          }
 125      } else {
 126          // if we need to show the input fields, set the width/height for textarea so it fills the cell
 127          try {
 128              if (ta.get('name').indexOf('[maxscore]') > 1) {
 129                  ta.setStyle('width', '25px');
 130              } else {
 131                  var width = parseFloat(ta.get('parentNode').getComputedStyle('width'))-10,
 132                      height = parseFloat(ta.get('parentNode').getComputedStyle('height'))
 133                  ta.setStyle('width', Math.max(width,50)+'px')
 134                  ta.setStyle('height', Math.max(height,30)+'px')
 135              }
 136          }
 137          catch (err) {
 138              // this browser do not support 'computedStyle', leave the default size of the textbox
 139          }
 140          // hide/display textarea, textbox and plaintexts
 141          taplain.addClass('hiddenelement')
 142          ta.removeClass('hiddenelement')
 143          if (tb) {
 144              tbplain.addClass('hiddenelement')
 145              tb.removeClass('hiddenelement')
 146          }
 147      }
 148      // focus the proper input field in edit mode
 149      if (editmode) {
 150          ta.focus()
 151      }
 152  }
 153  
 154  // handler for clicking on submit buttons within guideeditor element. Adds/deletes/rearranges criteria/comments on client side
 155  M.gradingform_guideeditor.buttonclick = function(e, confirmed) {
 156      var Y = M.gradingform_guideeditor.Y
 157      var name = M.gradingform_guideeditor.name
 158      if (e.target.get('type') != 'submit') {
 159          return;
 160      }
 161      M.gradingform_guideeditor.disablealleditors()
 162      var chunks = e.target.get('id').split('-')
 163      var section = chunks[1]
 164      var action = chunks[chunks.length-1]
 165  
 166      if (chunks[0] != name || (section != 'criteria' && section != 'comments')) {
 167          return;
 168      }
 169      // prepare the id of the next inserted criterion
 170  
 171      if (section == 'criteria') {
 172          elements_str = '#guide-'+name+' .criteria .criterion'
 173      } else if (section == 'comments') {
 174          elements_str = '#guide-'+name+' .comments .criterion'
 175      }
 176      if (action == 'addcriterion' || action == 'addcomment') {
 177          var newid = M.gradingform_guideeditor.calculatenewid(elements_str)
 178      }
 179      var dialog_options = {
 180          'scope' : this,
 181          'callbackargs' : [e, true],
 182          'callback' : M.gradingform_guideeditor.buttonclick
 183      };
 184      if (chunks.length == 3 && (action == 'addcriterion' || action == 'addcomment')) {
 185          // ADD NEW CRITERION OR COMMENT
 186          var parentel = Y.one('#'+name+'-'+section)
 187          if (parentel.one('>tbody')) {
 188              parentel = parentel.one('>tbody')
 189          }
 190          if (section == 'criteria') {
 191              var newcriterion = M.gradingform_guideeditor.templates[name]['criterion']
 192              parentel.append(newcriterion.replace(/\{CRITERION-id\}/g, 'NEWID'+newid).replace(/\{.+?\}/g, ''))
 193          } else if (section == 'comments') {
 194              var newcomment = M.gradingform_guideeditor.templates[name]['comment']
 195              parentel.append(newcomment.replace(/\{COMMENT-id\}/g, 'NEWID'+newid).replace(/\{.+?\}/g, ''))
 196          }
 197  
 198          M.gradingform_guideeditor.addhandlers();
 199          M.gradingform_guideeditor.disablealleditors()
 200          M.gradingform_guideeditor.assignclasses(elements_str)
 201          //M.gradingform_guideeditor.editmode(Y.one('#guide-'+name+' #'+name+'-'+section+'-NEWID'+newid+'-shortname'),true)
 202      } else if (chunks.length == 4 && action == 'moveup') {
 203          // MOVE UP
 204          el = Y.one('#'+name+'-'+section+'-'+chunks[2])
 205          if (el.previous()) {
 206              el.get('parentNode').insertBefore(el, el.previous())
 207          }
 208          M.gradingform_guideeditor.assignclasses(elements_str)
 209      } else if (chunks.length == 4 && action == 'movedown') {
 210          // MOVE DOWN
 211          el = Y.one('#'+name+'-'+section+'-'+chunks[2])
 212          if (el.next()) {
 213              el.get('parentNode').insertBefore(el.next(), el)
 214          }
 215          M.gradingform_guideeditor.assignclasses(elements_str)
 216      } else if (chunks.length == 4 && action == 'delete') {
 217          // DELETE
 218          if (confirmed) {
 219              Y.one('#'+name+'-'+section+'-'+chunks[2]).remove()
 220              M.gradingform_guideeditor.assignclasses(elements_str)
 221          } else {
 222              dialog_options['message'] = M.str.gradingform_guide.confirmdeletecriterion
 223              M.util.show_confirm_dialog(e, dialog_options);
 224          }
 225      } else {
 226          // unknown action
 227          return;
 228      }
 229      e.preventDefault();
 230  }
 231  
 232  // properly set classes (first/last/odd/even) and/or criterion sortorder for elements Y.all(elements_str)
 233  M.gradingform_guideeditor.assignclasses = function (elements_str) {
 234      var elements = M.gradingform_guideeditor.Y.all(elements_str)
 235      for (var i=0; i<elements.size(); i++) {
 236          elements.item(i).removeClass('first').removeClass('last').removeClass('even').removeClass('odd').
 237              addClass(((i%2)?'odd':'even') + ((i==0)?' first':'') + ((i==elements.size()-1)?' last':''))
 238          elements.item(i).all('input[type=hidden]').each(
 239              function(node) {if (node.get('name').match(/sortorder/)) { node.set('value', i)}}
 240          );
 241      }
 242  }
 243  
 244  // returns unique id for the next added element, it should not be equal to any of Y.all(elements_str) ids
 245  M.gradingform_guideeditor.calculatenewid = function (elements_str) {
 246      var newid = 1
 247      M.gradingform_guideeditor.Y.all(elements_str).each( function(node) {
 248          var idchunks = node.get('id').split('-'), id = idchunks.pop();
 249          if (id.match(/^NEWID(\d+)$/)) { newid = Math.max(newid, parseInt(id.substring(5))+1)};
 250      } );
 251      return newid
 252  }