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)
}
});
