Inheritance (JSDP) - Example - Classical Inheritance

Using Classical Inheritance

First we will create an API using classical inheritance:

/* EditInPlaceField class. */

function EditInPlaceField(id, parent, value) {
 this.id = id;
 this.value = value || 'default value';
 this.parentElement = parent;
 this.createElements(this.id);
 this.attachEvents();
};


EditInPlaceField.prototype = {
  createElements: function(id) {
     this.containerElement = document.createElement('div');
     this.parentElement.appendChild(this.containerElement);
   
     this.staticElement = document.createElement('span');
     this.containerElement.appendChild(this.staticElement);
     this.staticElement.innerHTML = this.value;
   
     this.fieldElement = document.createElement('input');
     this.fieldElement.type = 'text';
     this.fieldElement.value = this.value;
     this.containerElement.appendChild(this.fieldElement);
   
     this.saveButton = document.createElement('input');
     this.saveButton.type = 'button';
     this.saveButton.value = 'Save';
     this.containerElement.appendChild(this.saveButton);

     this.cancelButton = document.createElement('input');
     this.cancelButton.type = 'button';
     this.cancelButton.value = 'Cancel';
     this.containerElement.appendChild(this.cancelButton);

     this.convertToText();
  },
  attachEvents: function() {
     var that = this;
     addEvent(this.staticElement, 'click', function() { that.convertToEditable(); });
     addEvent(this.saveButton, 'click', function() { that.save(); });
     addEvent(this.cancelButton, 'click', function() { that.cancel(); });
  },
  convertToEditable: function() {
     this.staticElement.style.display = 'none';
     this.fieldElement.style.display = 'inline';
     this.saveButton.style.display = 'inline';
     this.cancelButton.style.display = 'inline';
     this.setValue(this.value);
  },
  save: function() {
     this.value = this.getValue();
     var that = this;
     var callback = {
        success: function() { that.convertToText(); },
        failure: function() { alert('Error saving value.'); }
      };
      ajaxRequest('GET', 'save.php?id=' + this.id + '&value=' + this.value, callback);
  },
  cancel: function() {
      this.convertToText();
  },
  convertToText: function() {
     this.fieldElement.style.display = 'none';
     this.saveButton.style.display = 'none';
     this.cancelButton.style.display = 'none';
     this.staticElement.style.display = 'inline';
     this.setValue(this.value);
  },
  setValue: function(value) {
     this.fieldElement.value = value;
     this.staticElement.innerHTML = value;
  },
  getValue: function() {
     return this.fieldElement.value;
  }
};

To create a field, instantiate the class:

  var titleClassical = new EditInPlaceField('titleClassical', $('doc'), 'Title Here');
  var currentTitleText = titleClassical.getValue();

This gives an instance of the EditInPlaceField class (which will be subclassed later), with
the text displayed in a span tag and a text input field used as the editing area. It has a couple of configuration methods (createElements, attachEvents), a few internal methods for converting
and saving (convertToEditable, save, cancel, convertToText), and an accessor and mutator
pair (getValue, setvalue). If this were to be used as production code, it would be a good idea
to give each of the HTML elements specific class names so that they can be styled with CSS;
for the sake of simplicity, we don’t include these lines of code.