[Summary view] [Print] [Text view]

   1  var inlineEditor = Class.create();
   2  
   3  inlineEditor.prototype = {
   4      initialize: function(url, options)
   5      {
   6          if(use_xmlhttprequest != 1)
   7          {
   8              return false;
   9          }
  10  
  11          this.url = url;
  12          this.elements = new Array();
  13          this.currentElement = '';
  14  
  15          this.options = options;
  16          if(!options.className)
  17          {
  18              alert('You need to specify a className in the options.');
  19              return false;
  20          }
  21  
  22          this.className = options.className;
  23          if(options.spinnerImage)
  24          {
  25              this.spinnerImage = options.spinnerImage;
  26          }
  27  
  28          this.elements = $$('.'+options.className);
  29          if(this.elements)
  30          {
  31              this.elements.each(function(element) {
  32                  if(element.id)
  33                  {
  34                      this.makeEditable(element);
  35                  }
  36              }.bind(this));
  37          }
  38          return true;
  39      },
  40  
  41      makeEditable: function(element)
  42      {
  43          if(element.title != "")
  44          {
  45              element.title = element.title+" ";
  46          }
  47  
  48          if(!this.options.lang_click_edit)
  49          {
  50              this.options.lang_click_edit = "(Click and hold to edit)";
  51          }
  52  
  53          element.title = element.title+this.options.lang_click_edit;
  54          element.onmousedown = this.onMouseDown.bindAsEventListener(this);
  55          return true;
  56      },
  57  
  58      onMouseDown: function(e)
  59      {
  60          var element = Event.element(e);
  61          Event.stop(e);
  62  
  63          if(this.currentElement != '')
  64          {
  65              return false;
  66          }
  67  
  68          // Fix for konqueror which likes to set event element as the text not the link
  69          if(typeof(element.id) == "undefined" && typeof(element.parentNode.id) != "undefined")
  70          {
  71              element.id = element.parentNode.id;
  72          }
  73  
  74          this.currentElement = element.id;
  75          this.timeout = setTimeout(this.showTextbox.bind(this), 1200);
  76          document.onmouseup = this.onMouseUp.bindAsEventListener(this);
  77          return false;
  78      },
  79  
  80      onMouseUp: function(e)
  81      {
  82          clearTimeout(this.timeout);
  83          Event.stop(e);    
  84          return false;
  85      },
  86  
  87      onButtonClick: function(id)
  88      {
  89          if($(id))
  90          {
  91              this.currentElement = id;
  92              this.showTextbox();
  93          }
  94          return false;
  95      },
  96  
  97      showTextbox: function()
  98      {
  99          this.element = $(this.currentElement);
 100  
 101          if(typeof(this.element.parentNode) == "undefined" || typeof(this.element.id) == "undefined")
 102          {
 103              return false;
 104          }
 105  
 106          this.oldValue = this.element.innerHTML;
 107          this.testNode = this.element.parentNode;
 108  
 109          if(!this.testNode)
 110          {
 111              return false;
 112          }
 113  
 114          this.cache = this.testNode.innerHTML;
 115  
 116          this.textbox = document.createElement("input");
 117          this.textbox.style.width = "95%";
 118          this.textbox.maxLength="85";
 119          this.textbox.className = "textbox";
 120          this.textbox.type = "text";
 121          Event.observe(this.textbox, "blur", this.onBlur.bindAsEventListener(this));
 122          Event.observe(this.textbox, "keydown", this.onKeyUp.bindAsEventListener(this));
 123          this.textbox.setAttribute("autocomplete", "off");
 124          this.textbox.name = "value";
 125          this.textbox.index = this.element.index;
 126          this.textbox.value = MyBB.unHTMLchars(this.oldValue);
 127  
 128          Element.remove(this.element);
 129          this.testNode.innerHTML = '';
 130          this.testNode.appendChild(this.textbox);
 131          this.textbox.focus();
 132          return true;
 133      },
 134  
 135      onBlur: function(e)
 136      {
 137          this.hideTextbox();
 138          return true;
 139      },
 140  
 141      onKeyUp: function(e)
 142      {
 143          if(e.keyCode == Event.KEY_RETURN)
 144          {
 145              this.hideTextbox();
 146          }
 147          else if(e.keyCode == Event.KEY_ESC)
 148          {
 149              this.cancelEdit();
 150          }
 151          return true;
 152      },
 153  
 154      onSubmit: function(e)
 155      {
 156          this.hideTextbox();
 157          return true;
 158      },
 159  
 160      hideTextbox: function()
 161      {
 162          if(!this.currentElement)
 163              return;
 164          Event.stopObserving(this.textbox, "blur", this.onBlur.bindAsEventListener(this));
 165          var newValue = this.textbox.value;
 166  
 167          if(typeof(newValue) != "undefined" && newValue != '' && MyBB.HTMLchars(newValue) != this.oldValue)
 168          {
 169              this.testNode.innerHTML = this.cache;
 170              
 171              this.element = $(this.currentElement);
 172              this.element.innerHTML = MyBB.HTMLchars(newValue);
 173              this.element.onmousedown = this.onMouseDown.bindAsEventListener(this);
 174              this.lastElement = this.currentElement;
 175              postData = "value="+encodeURIComponent(newValue);
 176              
 177              if(this.spinnerImage)
 178              {
 179                  this.showSpinner();
 180              }
 181  
 182              idInfo = this.element.id.split("_");
 183              if(idInfo[0] && idInfo[1])
 184              {
 185                  postData = postData+"&"+idInfo[0]+"="+idInfo[1];
 186              }
 187              new Ajax.Request(this.url, {method: 'post', postBody: postData, onComplete: this.onComplete.bind(this)});
 188          }
 189          else
 190          {
 191              Element.remove(this.textbox);
 192              this.testNode.innerHTML = this.cache;
 193               this.element = $(this.currentElement);
 194              this.element.onmousedown = this.onMouseDown.bindAsEventListener(this);
 195          }
 196          this.currentElement = '';
 197          return true;
 198      },
 199  
 200      cancelEdit: function()
 201      {
 202          this.textbox.value = ''
 203          Element.remove(this.textbox);
 204          this.testNode.innerHTML = this.cache;
 205          this.element = $(this.currentElement);
 206          this.element.onmousedown = this.onMouseDown.bindAsEventListener(this);
 207          this.currentElement = '';
 208      },
 209  
 210      onComplete: function(request)
 211      {
 212          if(request.responseText.match(/<error>(.*)<\/error>/))
 213          {
 214              message = request.responseText.match(/<error>(.*)<\/error>/);
 215              this.element.innerHTML = this.oldValue;
 216  
 217              if(!message[1])
 218              {
 219                  message[1] = "An unknown error occurred.";
 220              }
 221              
 222              if(this.spinnerImage)
 223              {
 224                  this.hideSpinner();
 225              }
 226  
 227              alert('There was an error performing the update.\n\n'+message[1]);
 228          }
 229          else if(request.responseText)
 230          {
 231              this.element.innerHTML = MyBB.HTMLchars(request.responseText);
 232          }
 233  
 234          if(this.spinnerImage)
 235          {
 236              this.hideSpinner();
 237          }
 238          this.currentIndex = -1;
 239          return true;
 240      },
 241  
 242      showSpinner: function()
 243      {
 244          if(!this.spinnerImage)
 245          {
 246              return false;
 247          }
 248  
 249          if(!this.spinner)
 250          {
 251              this.spinner = document.createElement("img");
 252              this.spinner.src = this.spinnerImage;
 253  
 254              if(saving_changes)
 255              {
 256                  this.spinner.alt = saving_changes;
 257              }
 258              else
 259              {
 260                  this.spinner.alt = "Saving changes..";
 261              }
 262  
 263              this.spinner.style.verticalAlign = "middle";
 264              this.spinner.style.paddingRight = "3px";
 265          }
 266          this.testNode.insertBefore(this.spinner, this.testNode.firstChild);
 267          return true;
 268      },
 269  
 270      hideSpinner: function()
 271      {
 272          if(!this.spinnerImage)
 273          {
 274              return false;
 275          }
 276  
 277          Element.remove(this.spinner);
 278          return true;
 279      }
 280  };