InPlaceEditExtender for April CTP release of ATLAS

Nikhil Kothari created a fine ATLAS control named InPlaceEditExtender. The control does not work on the April CTP of ATLAS, so I modified the javascript to comply with the April CTP release, as well as added some support for dropdowns.
Download the control from Nikhil's blog, and replace the javascript with the following javascript and you will have the InPlaceEditExtender control for April CTP:

Type.registerNamespace('nStuff.Samples.InPlaceEdit');

 

nStuff.Samples.InPlaceEdit.InPlaceEditBehavior = function() {

    nStuff.Samples.InPlaceEdit.InPlaceEditBehavior.initializeBase(this);

 

    var _labelCssClass;

    var _labelHoverCssClass;

 

    var _labelElement;

    var _isEditing = false;

    var _isInputControl = false;

 

    var _textBoxBlurHandler;

    var _labelFocusHandler;

    var _labelMouseOverHandler;

    var _labelMouseOutHandler;

    var _validatedHandler;

 

    this.get_isEditing = function() {

        return _isEditing;

    }

 

    this.get_labelCssClass = function() {

        return _labelCssClass;

    }

    this.set_labelCssClass = function(value) {

        _labelCssClass = value;

    }

 

    this.get_labelHoverCssClass = function() {

        return _labelHoverCssClass;

    }

    this.set_labelHoverCssClass = function(value) {

        _labelHoverCssClass = value;

    }

 

    this.beginEdit = function() {

        if (_isEditing) {

            return;

        }

 

        var textBoxElement = this.control.element;

        textBoxElement.style.display = '';

        _labelElement.style.display = 'none';

        if(!textBoxElement.disabled)

            textBoxElement.focus();

 

        _isEditing = true;

        this.raisePropertyChanged('isEditing');

    }

 

    this.dispose = function() {

        if (_labelElement) {

            _labelElement.detachEvent('onfocus', _labelFocusHandler);

            _labelElement.detachEvent('onmouseover', _labelMouseOverHandler);

            _labelElement.detachEvent('onmouseout', _labelMouseOutHandler);

 

            _labelElement = null;

            _labelFocusHandler = null;

            _labelMouseOverHandler = null;

            _labelMouseOutHandler = null;

        }

 

        if (_textBoxBlurHandler) {

            var textBoxElement = this.control.element;

            textBoxElement.detachEvent('onblur', _textBoxBlurHandler);

            _textBoxBlurHandler = null;

        }

 

        if (_validatedHandler) {

            this.control.validated.remove(_validatedHandler);

            _validatedHandler = null;

        }

 

        nStuff.Samples.InPlaceEdit.InPlaceEditBehavior.callBaseMethod(this, 'dispose');

    }

 

    this.endEdit = function() {

        if (!_isEditing) {

            return;

        }

        if (_isInputControl && this.control.get_isInvalid()) {

            return;

        }

 

        var textBoxElement = this.control.element;

        _labelElement.innerHTML = textBoxElement.value;

        _labelElement.style.display = 'block';

        textBoxElement.style.display = 'none';

 

        _isEditing = false;

        this.raisePropertyChanged('isEditing');

    }

 

    this.getDescriptor = function() {

        var td = nStuff.Samples.InPlaceEdit.InPlaceEditBehavior.callBaseMethod(this, 'getDescriptor');

 

        td.addProperty('isEditing', Boolean, /* readOnly */ true);

        td.addProperty('labelCssClass', String);

        td.addProperty('labelHoverCssClass', String);

        td.addMethod('beginEdit');

        td.addMethod('endEdit');

        return td;

    }

 

    this.initialize = function() {

        nStuff.Samples.InPlaceEdit.InPlaceEditBehavior.callBaseMethod(this, 'initialize');

 

        _labelElement = document.createElement('LABEL');

 

        var textBoxElement = this.control.element;

        var textBoxBounds = Sys.UI.Control.getBounds(textBoxElement);

        var containerElement = document.createElement('SPAN');

 

        textBoxElement.parentNode.insertBefore(containerElement, textBoxElement);

        containerElement.appendChild(textBoxElement);

        containerElement.appendChild(_labelElement);

 

        textBoxElement.style.display = 'none';

        if(textBoxElement.tagName == 'SELECT')

            _labelElement.innerHTML= textBoxElement.options[textBoxElement.selectedIndex].text;

        else

            _labelElement.innerHTML = textBoxElement.value;

        _labelElement.tabIndex = textBoxElement.tabIndex;

        _labelElement.className = _labelCssClass;

        _labelElement.style.display = 'block';

        _labelElement.style.width = textBoxBounds.width + 'px';

        _labelElement.style.height = textBoxBounds.height + 'px';

 

        _textBoxBlurHandler = Function.createDelegate(this, this._onTextBoxBlur);

        _labelFocusHandler = Function.createDelegate(this, this._onLabelFocus);

        _labelMouseOverHandler = Function.createDelegate(this, this._onLabelMouseOver);

        _labelMouseOutHandler = Function.createDelegate(this, this._onLabelMouseOut);

 

        textBoxElement.attachEvent('onblur', _textBoxBlurHandler);

        if (Sys.Runtime.get_hostType() == Sys.HostType.InternetExploreJ) {

            _labelElement.attachEvent('onfocus', _labelFocusHandler);

        }

        else {

            _labelElement.attachEvent('onclick', _labelFocusHandler);

        }

        _labelElement.attachEvent('onmouseover', _labelMouseOverHandler);

        _labelElement.attachEvent('onmouseout', _labelMouseOutHandler);

 

        if (Sys.UI.InputControl.isInstanceOfType(this.control)) {

            _isInputControl = true;

            _validatedHandler = Function.createDelegate(this, this._onValidated);

            this.control.validated.add(_validatedHandler);

        }

    }

 

    this._onLabelFocus = function() {

        if (_labelHoverCssClass && _labelHoverCssClass.length) {

            Sys.UI.Control.removeCssClass(_labelElement, _labelHoverCssClass);

        }

 

        this.beginEdit();       

    }

 

    this._onLabelMouseOut = function() {

        if (_labelHoverCssClass && _labelHoverCssClass.length) {

            Sys.UI.Control.removeCssClass(_labelElement, _labelHoverCssClass);

        }

    }

 

    this._onLabelMouseOver = function() {

        if (_labelHoverCssClass && _labelHoverCssClass.length) {

            Sys.UI.Control.addCssClass(_labelElement, _labelHoverCssClass);

        }

    }

 

    this._onTextBoxBlur = function() {

        this.endEdit();

    }

 

    this._onValidated = function(sender, eventArgs) {

        if (this.control.get_isInvalid()) {

            this.beginEdit();

        }

    }

}

//Type.registerSealedClass('nStuff.Samples.InPlaceEdit.InPlaceEditBehavior', Sys.UI.Behavior);

nStuff.Samples.InPlaceEdit.InPlaceEditBehavior.registerSealedClass('nStuff.Samples.InPlaceEdit.InPlaceEditBehavior', Sys.UI.Behavior);

Sys.TypeDescriptor.addType('nk', 'inPlaceEdit', nStuff.Samples.InPlaceEdit.InPlaceEditBehavior);