VIEW THE EXAMPLE FILE

Use this class is very simple:

First need to have mootools 1.2 javascript library
Second download MooEip class

The class:

var MooEip = new Class({

    //implements
    Implements: [Options,Events],

    //options
    options: {
        elements: '.eip',
        styleHover: 'eip-hover',
        styleInput: 'eip-input',
        styleTextarea: 'eip-textarea',
        styleLoading: 'eip-loading',
        idPrefix: 'id_',
        inputSave: 'Save',
        inputCanc: 'Cancel',
        saving: 'Saving...',
        empty: 'Click to Edit',
        hoverColor: '#ceffef',
        leaveColor: '#ffffff'
    },

    //initialization
    initialize: function(ajaxUrl, options) {
        // set ajax url
        this.ajaxUrl = ajaxUrl;
        //set options
        this.setOptions(options);

        this.run();
    },

    //a method that does whatever you want
    run: function() {
        //find the editable areas
        $$(this.options.elements).each(function(el) {
            var elId = el.getProperty('id');
            var elValue = el.get('text').trim();

            if (elValue.trim() == ''){
                el.set('text', this.options.empty);
            }

            if (el.getStyle('display') != '') {
                var displayStyle = el.getStyle('display');
            }
            else {
                var displayStyle = el.setStyle('display', 'block');
            }

            var editForm = new Element('form', {
                'name': 'form_' + elId,
                'events': {
                    'submit': function(e) {
                        el.setStyle('display', 'block');
                        //el.fireEvent('mouseleave');
                        e.preventDefault();

                        var request = new Request({
                            url: this.ajaxUrl,
                            data: 'value=' + editForm.fieldValue.value,
                            method: 'post',
                            onRequest: function(){
                                el.addClass(this.options.styleLoading);
                                el.set('text', this.options.saving);
                            }.bind(this),
                            onSuccess: function(){
                                el.removeClass(this.options.styleLoading);
                                el.set('html', (editForm.fieldValue.value.trim() == '' ? this.options.empty : editForm.fieldValue.value.trim().replace(new RegExp('\n', 'gi'), '<br />')));
                            }.bind(this),
                            onFailure: function(resp){
                                el.removeClass(this.options.styleLoading);
                                alert('ERROR ON THE SERVER !!\nCODE: ' + resp.status + ' - TEXT: ' + resp.statusText + '\nPLEASE SAVE THE TEXT AGAIN !!');
                                el.set('html', (editForm.fieldValue.value.trim() == '' ? this.options.empty : editForm.fieldValue.value.trim().replace(new RegExp('\n', 'gi'), '<br />')));
                            }.bind(this)
                        });
                        request.send();                        

                        editForm.dispose();

                        // set the new value from submited form value
                        elValue = editForm.fieldValue.value.trim();
                    }.bind(this)
                }
            });

            if(el.hasClass('input')) {
                var editField = new Element('input', {
                    'type': 'text',
                    'name': 'fieldValue',
                    'class': this.options.styleInput
                });
            }
            else {
                var editField = new Element('textarea', {
                    'name': 'fieldValue',
                    'class': this.options.styleTextarea
                });
                if (el.get('style') != '') {
                    editField.set('style', el.get('style'));
                }
            }

            var okButton = new Element('input', {
                'id': 'ok_' + elId,
                'type': 'submit',
                'value': this.options.inputSave,
                'events' : {
                    'click': function() {
                    editForm.dispose();
                    el.setStyle('display', displayStyle);
                    el.fireEvent('mouseleave');
                    }
                }
            });

            var cancelButton = new Element('input', {
                'id': 'cancel_' + elId,
                'type': 'reset',
                'value': this.options.inputCanc,
                'events': {
                    'click': function() {
                    editForm.dispose();
                    el.setStyle('display', displayStyle);
                    el.fireEvent('mouseleave');
                    }
                }
            });

            editField.inject(editForm);
            lb = new Element('br').inject(editField, 'after');
            okButton.inject(editForm);
            cancelButton.inject(editForm);

            var myeffect = new Fx.Tween(el, {duration: 500});

            el.addEvents({
                'mouseenter': function() {
                    el.setStyle('background-color', this.options.hoverColor);
                    el.addClass('eip-hover');
                }.bind(this),

                'mouseleave': function() {
                    myeffect.start('background-color', this.options.hoverColor, this.options.leaveColor);
                    el.removeClass('eip-hover');
                }.bind(this),

                'click': function() {
                    el.setStyle('display', 'none');
                    editField.value = (el.hasClass('input')) ? elValue.trim() : elValue.trim().replace(new RegExp('<br />', 'gi'),'\n');
                    editForm.inject(el, 'after');
                    editField.focus();
                    el.removeClass('eip-hover');
                }
            });
        }, this);
    }
});

The javascript in the page:

<script src="js/mootools-1.2.3-core.js" type="text/javascript"  charset="utf-8"></script>
<script src="js/moo-eip-min.js" type="text/javascript"  charset="utf-8"></script>

<script type="text/javascript"  charset="utf-8">
//<![CDATA[
window.addEvent('domready', function() {
    var eip = new MooEip('edit.php');
});
//]]>
</script>

<!-- style for moo-eip -->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- /style for moo-eip -->

The html

<div class="eip input" id="id_0">
</div>
<div class="eip" id="id_1" style="overflow:hidden;height:100px">
this is a editable text 1 with overflow of the text hidden and height fixed in 100px.
</div>
<div class="eip" id="id_2">
this is a editable text 2.
</div>

• Add var ajaxProxy for set ajax proxy
  
• Add css file for style the skype buttom

Add onLine example :

VIEW THE EXAMPLE FILE

It have a nice effect for the button taken from http://davidwalsh.name/skype-mootools.

Thanks David Your site is a good reference for me

VIEW THE EXAMPLE FILE

var MooSkype = new Class({

Implements: [Options],

options: {
// Flag use efect
useEffect: true,
// Class name for hock skype button action
element: 'skype-button',
// Class name for the skype image
image: 'skype-image',
// Default action when user is disponible
defaultAction: 'call',
// Default language, possibles: 'en','de','fr','it','pl','ja','es','pt','pt-br','se','zh-cn','zh-tw'
language: 'en',
// Path to images
imagesPath: 'img/',
// Path to languages
languagesPath: './languages/'
},

initialize: function(options) {
this.setOptions(options);

this.setSkype();
},

setSkype: function() {
// charge js language
new Asset.javascript(this.options.languagesPath + this.options.language + '.js', {id: 'skypeLanguage'});

var href = $(this.options.element).getProperty('href');
var tmpUser = href.replace('skype:', '');
var user = tmpUser.replace(tmpUser.substring(tmpUser.lastIndexOf('?'),tmpUser.length), '');

var request = new Request({
url: 'http://localhost/moo-skype/proxy.php',
method: 'get',
data: 'user=' + user,
onFailure: function() {
this.getButton(user, 0);
}.bind(this),
onSuccess: function(resp){
this.getButton(user, resp.toInt());
}.bind(this)
});
request.send();
},

getButton: function(user, status) {
var link = $(this.options.element);
var img = $(this.options.image).clone();
var statusText = i18n[status];

switch(status){
case 2:
case 3:
case 7:
var href = link.set({'href': 'skype:' + user + '?' + this.options.defaultAction, 'title': statusText, 'text': statusText});
break;
default:
var href = link.set({'href': 'skype:' + user + '?add', 'title': statusText, 'text': statusText});
}

img.set({'src': this.options.imagesPath + status + '.gif', 'alt': statusText}).inject(href, 'top');

if (this.options.useEffect) {
this.setEffect(img);
}
},

setEffect: function(img) {
var running = false;

var fx2 = new Fx.Morph(img, {duration: 100, link: 'chain', onChainComplete:function() { running = false; } });
var fx1 = new Fx.Morph(img, {duration: 200, link: 'chain', onComplete:function() {
fx2.start({'top':'-7px'}).start({'top':'-4px'}).start({'top':'-6px'}).start({'top':'-4px'});
}
});
img.addEvent('mouseenter',function() {
if(!running) {
fx1.start({'top':'-10px'}).start({'top':'-4px'});
running = true;
}
});
}
})

For initialize the class use this:

window.addEvent('domready', function() {
var skype = new MooSkype({'language':'es'});
});

The html is here:

<div>
<a href="skype:davcaffa?call" id="skype-button">
<img src="img/2.gif" alt="Call me" id="skype-image" />Call me</a>
</div>

For use the ajax call need to use a proxy that read the state of users on skype server.

Here is the script:

<?php
if (!isset($_GET['user'])) {
echo 0;
}
else {
echo file_get_contents('http://mystatus.skype.com/'.$_GET['user'].'.num');
}
?>

Add example in the zip file

VIEW THE EXAMPLE FILE

With this class can made multiple text slider and configure text, styles and more.

VIEW THE EXAMPLE FILE

var MooSlider = new Class({

Implements: [Options],

options: {
createToggle: true,
tagToggle: 'a',
cssHide: '.hide',
cssToggle: '.toggle',
slideDuration: 340,
slideMode: 'vertical',
slideTransitions: Fx.Transitions.Bounce.easeOut,
textOpen: '+ Open',
textClose: '- Close',
elementsOpen: []
},

initialize: function(elements, options) {
this.setOptions(options);

// Set elements
this.setSlide(elements);
},

setSlide: function(elements) {
var status = {
'true': this.options.textOpen,
'false': this.options.textClose
};

$$(elements).each(function(div){

var isClose = (this.options.elementsOpen.indexOf(div.getProperty('id')) == -1);

if (this.options.createToggle) {
var link = new Element(this.options.tagToggle, { 'html': isClose?this.options.textOpen:this.options.textClose, 'class': this.options.cssToggle.replace('.',''), 'style': 'cursor:pointer;' } ).inject(div, 'top');
}
else {
var link = div.getElement(this.options.cssToggle).setStyle('cursor', 'pointer').set('class', this.options.cssToggle.replace('.',''));
}

this.hide = div.getElement(this.options.cssHide);

var fx = new Fx.Slide(this.hide, {
duration: this.options.slideDuration,
mode: this.options.slideMode,
transition: this.options.slideTransitions
})

fx.addEvent('complete', function() {
link.set('html', fx.open?status[false]:status[true]);
});

if (isClose) {
fx.hide();
}
else {
fx.show();
}

link.addEvent('click', function(e){
e.stop();
fx.toggle();
});

}, this);
}
})

For init the class use this:

<script src="mootools-1.2.2-core.js" type="text/javascript"  charset="utf-8"></script>
<script src="mootools-1.2.2.2-more.js" type="text/javascript"  charset="utf-8"></script>
<script src="moo-slider-min.js" type="text/javascript"  charset="utf-8"></script>
<script type="text/javascript"  charset="utf-8">
//<![CDATA[
window.addEvent('domready', function() {
<pre id="line1">    var slider = new MooSlider('.slide', {
    createToggle: true,
    tagToggle: 'a',
    cssHide: '.hide',
    cssToggle: '.toggle',
    slideDuration:340,
    slideMode: 'vertical',
    slideTransitions: Fx.Transitions.Pow.easeOut,
    textOpen: '+ View more',
    textClose: '- Close more',
    elementsOpen: []
    });
});
//]]></pre>
</script>

And this is the html for the sliders contents:

<div class="slide">
<div class="hide">
<h1>Slide 1</h1>
This is my html code for this slide
</div>
</div>
<div class="slide">
<div class="hide">
<h1>Slide 2</h1>
This is my html code for this slide
</div>
</div>

imgTemp[i] = new Element('img', {'alt': el.getProperty('alt')}).set('src', newSrc);

with

imgTemp[i] = new Asset.image(newSrc, {'alt':el.getProperty('alt'),'id':el.getProperty('id')});

same filename + ‘_over’ before the extension (‘img.jpg’ will be
‘img_over.jpg’) work fine in firefox3, safari for windows, internet explorer 7.
Use this class is very simple:

First need to have mootools 1.2 javascript library
Second download MooSwap class

The class:

var MooSwap = new Class({

//implements
Implements: [Options],

options: {
imgHoverPrefix: '_hover'
},

initialize: function(elements, options) {
//set options
this.setOptions(options);
// Set elements
this.setSwap(elements);
},

setSwap: function(elements) {

var prefix = this.options.imgHoverPrefix;

// preload images array
imgTemp = [];
i = 0;

$$(elements).each(function(el) {
var mouseFx = new Fx.Tween(el, {duration: 240, wait: false});

var holdSrc = el.getProperty('src');
var extension = holdSrc.substring(holdSrc.lastIndexOf('.'),holdSrc.length);
var newSrc = holdSrc.replace(extension, prefix + '' + extension);

// set new image for preloading
imgTemp[i] = new Asset.image(newSrc, {'alt':el.getProperty('alt'),'id':el.getProperty('id')});
//imgTemp[i] = new Element('img', {'alt': el.getProperty('alt')}).set('src', newSrc);

// default link on current img element
var link = el;

// check if there is a link a href parent
var test = el.getParent('a');
if (test) {
var link = test.setProperty('id', '__link_' + i);
}

link.addEvents({
mouseover: function() {
el.setProperty('src', newSrc);
},
mouseout: function() {
el.setProperty('src', holdSrc);
}
});

i++;
});
}
});

The javascript in the page:

<script src="mootools-1.2.2-core.js" type="text/javascript"  charset="utf-8"></script>
<script type="text/javascript"  charset="utf-8">
//<![CDATA[
window.addEvent('domready', function() {
var swap = new MooSwap('.fade img', { imgHoverPrefix:'_hover' });
});
//]]>
</script>

The html

<ul class="fade">
<li><img src="my-image.jpg" alt="my title" /></li>
<li><a href="http://mylink/"><img src="my-image-1.jpg" alt="my title 1" /></a></li>
</ul>

Need to have valid
my-image_hover.jpg and my-image-1_hover.jpg

That’s all

Simple class for “edit in line” with prototype javascript library.

Click HERE for see the code of this class

Here is an example to use this class:

< ?php
// Include the library
include(cat-prototype.inc.php');

$eip = new Cat_Edit_Inline('js/', $_SERVER['PHP_SELF'].'?ajax=on');

// Check if there is an ajax request return false if there isn't data return false
$request = $eip->getAjaxDatas();

if ($request && isset($_GET['ajax'])) {
// set php header
$this->setHeaderPhp(false, true);

// empty id
if (!isset($request['id']) || !isset($request['option_id'])) {
print("Incorrected datas - No id sent !");
}
// continue
else {
// Update the database
/* update_function(); */

// Print text
print ($request['content']);
}
}
// No ajax data sent
else {
// Set default size of textarea
$this->setInitEditOptions('size', 80);
// Setto default cols of textarea
$this->setInitEditOptions('cols', 60);
// Set saving_text
$this->setInitEditOptions('saving_text', 'Saving...');
// Set text field
$this->setElement(array('id'=>'field_name','ajax_data'=>array('option_id'=>1)));
// Set body text
$bodyOptions = array('html_start'=>"<em>description of the field</em>");
// Set body element
$this->setElementBody('option_name', 'option_value', $bodyOptions);
// Set textarea field
$this->setElement(array('id'=>'field_name', 'type'=>'textarea', 'ajax_data'=>array('option_id'=>2)));
// Set body textarea
$bodyOptions = array('html_start'=>"<em>description of the field</em>");
// Set body element
$this->setElementBody('option_name', 'option_value', $bodyOptions);
// Select / Option yes / no
$optionsSelect = array('yes'=>'yes', 'no'=>'no');
$this->setElement(array('id'=>'field_name', 'type'=>'select', 'options'=>$optionsSelect, 'ajax_data'=>array('option_id'=>2)));
// Set body select
$bodyOptions = array('html_start'=>"<em>description of the field</em>");
// Set body element
$this->setElementBody('option_name', 'option_value', $bodyOptions);
// Inizialize class
$eip->initEditInline();
// Get header havascript e css
$header = $eip->getJavascript().$eip->getCss();

echo
"< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
Eip demo".
$header."
</head>
<body>

<h1>Eip Demo</h1>
<div>
".$eip->getBody()."
</div>

</body>
</html>";
}
?>