Mootools Select In Place

Yesterday, was writing code using a mootools editInPlace plugin, but I faced a situation where some values had to be selected from a list.

So I decided to spend sometime to write a mootools SelectInPlace plugin
see it in action



Element.implement({

//{

/* toColor: "#e1ecf5", */
/* fColor: "#fff" */
//}

selectInplace: function (options) {

var property = 'background-color', sel = this.setStyle('display', 'none'), el = new Element('span', {text: sel.getSelected()[0].get('text')}).inject(this.addEvent('change', function () {

el.set('text', sel.getSelected()[0].get('text'))
}), 'before'), bg = el.getStyle(property);
options = $merge({

toColor: "#e1ecf5",
fColor: "#fff"
}, options);

el.set({

tween: {link: 'cancel'},
events: {

mouseenter: function() { el.tween(property, options.toColor) },
mouseleave: function() { el.tween(property, options.fColor).get('tween').chain(function () { el.setStyle(property, bg)}); },
click: function(e) {

if(e) e.stop();

el.setStyle('display', 'none');
var clone = sel.clone().setStyle('display', 'inline-block').inject(el, 'before'),
wrapper = new Element('span').inject(clone, 'after'),
clean = function () {
el.setStyle('display','inline-block');
wrapper.destroy();
clone.destroy();
},

//cancel
cancel = new Element('a', {'href': 'javascript:;', html: 'Cancel', events:{click: clean}}).inject(wrapper),

//seperator
span = new Element('span', {html: ' - '}).injectAfter(cancel),

//save
save = new Element('a', {'href': 'javascript:;', html: 'Save', events: {click: function(e) {

if(clone.selectedIndex != sel.selectedIndex) {

sel.selectedIndex = clone.selectedIndex;
sel.fireEvent('change', e)
}

clean()
}
}}).inject(span, 'after')

}
}
})

//keep reference for later usage
return this.store('el:inplace', el)
}
});