Source Code

for file /controls/InlineEdit.js

// InlineEdit.js
// Javascript Behaviour for the InlineEdit Control
// Copyright (c) by Matthias Hertel, http://www.mathertel.de
// This work is licensed under a BSD style license. See http://www.mathertel.de/License.aspx
// ----- 
// 04.04.2006 created by Matthias Hertel
// 15.09.2007 adding OpenAjax event functionality
// 18.12.2007 Simplifications and documentation.
// 19.11.2016 simplified by using HTML5.

var HtmlEditBehaviour = {

  _activeObj: null,  // current editable block element.
  delaySave: 2000,   // delay calling the autosave method by 2 seconds (default).
  isDirty: false,

  _lastText: "",
  _autoSaveTimer: null,

  eventnamespace: "de.mathertel.edit", /// <summary>Namespace of the events published by contained elements without a full qualified namespace.</summary>

  init: function () {
    OpenAjax.hub.subscribe(this.eventnamespace + ".*", this._listener, this);
    HtmlEditBehaviour.isDirty = false;
    this.contenteditable = "true";
  }, // init

  _startCheck: function () {
    if (this._autoSaveTimer)
      window.clearTimeout(this._autoSaveTimer)
    this._autoSaveTimer = window.setTimeout(this._check.bind(this), this.delaySave);
  }, // _startCheck

  _check: function () {
    this._autoSaveTimer = null;
    if (this._lastText != this.innerHTML)
      document.getElementById("myStatus").innerText = "dirty";
  }, // _check

  // ----- Events -----

  // Start Editing when focus enters the object
  onfocus: function (evt) {
    this.StartEditing();
    document.getElementById("myStatus").innerText = "focus";
  }, // onclick


  // Start Editing when focus enters the object
  onblur: function (evt) {
    this.EndEditing();
    document.getElementById("myStatus").innerText = "blur";
  }, // onclick


  onkeydown: function () {
    this._startCheck();
  },

  // ----- Methods -----

  // start making the block element editable.
  StartEditing: function () {
    this.EndEditing();
    HtmlEditBehaviour._activeObj = this;
    this._lastText = this.innerHTML;
    this._startCheck();
  }, // StartEditing


  // remove the editable iframe from the container
  EndEditing: function () {
    var ao = HtmlEditBehaviour._activeObj;
    if (ao != null) {
      HtmlEditBehaviour._activeObj = null;
    } // if
  }, // EndEditing()


  // listen to de.mathertel.edit.* and execute the command on the current edit document.
  _listener: function (name, data) {
    var evName = name.substr(this.eventnamespace.length + 1);
    this.Command(evName, data);
  }, // _listener


  // execute one of the editing commands from the menubar (or external)
  Command: function (cmd, p) {
    var obj = HtmlEditBehaviour._activeObj;
    if ((cmd) && (cmd.length > 0) && (obj != null)) {
      document.execCommand(cmd, false, p);
    } // if
  } // Command()
   

}; // HtmlEditBehaviour

// End

This page is part of the http://www.mathertel.de/ web site.

For updates and discussions see http://ajaxaspects.blogspot.com/.