empty text for Ajax.InPlaceEditor

I was playing with the Scriptaculous Ajax.InPlaceEdit control this afternoon, and realised it didn’t support having “empty” text (default text to show if there was nothing to edit).

Someone on the Wiki had a partial solution, but it’s a little out of date and wasn’t working for us 1.6-ers (Doesn’t use the cool new $super stuff).

So I wrote my own! Enjoy :)

Ajax.InPlaceEditorWithEmptyText = Class.create(Ajax.InPlaceEditor, {

  initialize : function($super, element, url, options) {

    if (!options.emptyText)        options.emptyText      = "click to edit...";
    if (!options.emptyClassName)   options.emptyClassName = "inplaceeditor-empty";

    $super(element, url, options);

    this.checkEmpty();
  },

  checkEmpty : function() {

    if (this.element.innerHTML.length == 0 && this.options.emptyText) {

      this.element.appendChild(
          new Element("span", { className : this.options.emptyClassName }).update(this.options.emptyText)
        );
    }

  },

  getText : function($super) {

    if (empty_span = this.element.select("." + this.options.emptyClassName).first()) {
      empty_span.remove();
    }

    return $super();

  },

  onComplete : function($super, transport) {

    this.checkEmpty();
    return $super(transport);

  }

});