Source Code

for file ~/controls/DataFade.js

// DateFade.js
// Javascript Behaviour for the DataFade 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
// ----- 
// 08.08.2005 created by Matthias Hertel
// 16.09.2006 context on event-methods is now set to the bound object.
// 27.09.2006 datatypes support
// 27.09.2006 fade.* renamed to datafade.*
// 29.09.2006 precission support added
// 23.06.2007 simplified, now inherits from jcl.DataOutputBehavior.
// 18.12.2007 Simplifications and documentation.

jcl.DataFadeBehavior = {
/// <summary>Implementation of a JavaScript Behavior
/// for a data output control that signals new values by showing a fading yellow
/// background color.</summary>

inheritFrom: jcl.DataOutputBehavior, /// <summary>Inherit from DataOutput.</summary>

highcolor: "#FFFF00", /// <summary>The highlight color. The usually used yellow is the defaut value.</summary>

_orgcolor: null,
_count: 0,
_timer: null,


init: function() {
  /// <summary>Initialze the JavaScript control.</summary>
  jcl.DataOutputBehavior.init.call(this);

  this.highcolor = this._getColor(this.highcolor);

  var c;
  if (this.currentStyle) {
    c = this.currentStyle.backgroundColor;
  } else if (window.getComputedStyle) {
    c = window.getComputedStyle(this, null).getPropertyValue("background-color");
  } else {
    c = "#FFFFFF";
  } // if
  this._orgcolor = this._getColor(c);
}, // init


onclick: function(evt) {
/// <summary>Also start the fade effect when the user clicks onto the field.</summary>
  evt = evt || window.event;
  this._start()
}, // onclick


setData: function(val) {
/// <summary>Overwrite the setData function to add a fading effect when the value has changed.</summary>
  var s = this.innerText;
  jcl.DataOutputBehavior.setData.call(this, val);
  if (this.innerText != s)
    this._start();
}, // setData


_start: function() {
/// <summary>Start the fade effect.</summary>
  if (this._timer) {
    window.clearTimeout(this._timer);
    this._timer = null;
  } // if
  this._count = 0;
  this._fade();
}, // _start


_getColor: function (c) {
/// <summary>Convert a color attribute #rrggbb or rgb(r, g, b) to a color object.</summary>
  var ret = new Object();
  if (c.substr(0, 3) == "rgb") {
    c = c.match(/rgb\s*\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)/);
  } else if (c.substr(0, 1) == "#") {
    c = c.toLowerCase().match(/#([0-9a-f]{2,2})([0-9a-f]{2,2})([0-9a-f]{2,2})/);
    c = new Array(0, parseInt(c[1], 16), parseInt(c[2], 16), parseInt(c[3], 16));
  } else {
    c = [0,255,255,255];
  } // if
  ret.r = c[1];
  ret.g = c[2];
  ret.b = c[3];
  return(ret);
}, // _getColor


_fade: function () {
/// <summary>Implementation of the fade effect by using a timer.</summary>
  var f1 = this._count;
  var f2 = 16 - f1;

  var r = Math.round(((this._orgcolor.r * f1) + (this.highcolor.r * f2)) / 16)
  var g = Math.round(((this._orgcolor.g * f1) + (this.highcolor.g * f2)) / 16)
  var b = Math.round(((this._orgcolor.b * f1) + (this.highcolor.b * f2)) / 16)

  this.style.backgroundColor="rgb(" + r + "," + g + "," + b + ")";
  this._count += 1;

  if (this._count < 16) {
    this._timer = window.setTimeout(this._fade.bind(this), 50)
  } else {
    this.style.backgroundColor= "rgb(" + this._orgcolor.r + "," + this._orgcolor.g + "," + this._orgcolor.b + ")";
  }
} // _fade

} // jcl.DataFadeBehavior

This page is part of the http://www.mathertel.de/AJAXEngine/default.aspx project. For updates and discussions see The AJAX Engine blog.

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