Mootools jQuery like Exposé

The jQuery like Exposé in mootools is out.

more infos and download on the mootools forge | fork it on github.

Building Mootools on windows with Packager

In the case you miss it, mootools 1.3beta1 is out. if you are using windows and you want to build it, the qucikest way to achieve it is to use packager.

• grab mootools 1.3b1, and packager. 
• extract mootools in a folder, lets say "c:\mootools\"
• extract packager in your local web server.
• create a php file and put these lines of code

require 'packager.php';

$pkg = new Packager('c:\\mootools\\');

//the first parameter is the mootools.js build
$pkg->write_from_components('c:\\mootools\\mootools.js', $pkg->get_all_files());

?>

now you run your php script in your web browser to create your mootools build.

Mootools Tab: A simple yet powerful mootools slideshow plugin

Mootools Tab is a complete rewrite of an old script I wrote for mootools 1.11. I dropped all extra functionality such as cookie reminder and automatic slide. It currently has 5 customizable plugins that can produce awesome effects including, MooStack, the barack slideshow or jQuery nivoslider.



How to use
It is quite simple to use. what you need first is

HTML:

<div id="slide">  <div class="ctab"><img src="images/slide1.jpg" width="400" height="300" /></div>      <div class="ctab hidden"><img src="images/slide2.jpg" width="400" height="300" /></div>      <div class="ctab hidden"><img src="images/slide3.jpg" width="400" height="300" /></div>      <div class="ctab hidden"><img src="images/slide4.jpg" width="400" height="300" /></div>    </div>    //the tabs   <div class="tabs"><a href="#0">1</a><a href="#1">2</a><a href="#2">3</a><a href="#3">4</a></div>  

Javascript:

var swapper = new Tab({        container: 'slide',      tabs: 'div.tabs a',      onChange: function () {            //do something      }  });  

Options:

• container - (mixed) the element that contains the panels.
• selector - (string, optional) only container children that match the selector will be grabbed.
• animation - (string, optional) the transition plugin to use for swapping. default to None
• params - (object, optional) parameters specific to the transition plugin.
• fx - (object, optional) parameters for the animation. this can be any of the Fx parameters.
• current - (int, optional) index of the panel that is displayed first. default to 0
• tabs - (mixed, optional) when a tab is clicked, the corresponding panel is shown. anything you can pass to $$ is accepted.
• activeClass - (string, optional) style applied to the selected tab.
• inactiveClass - (string, optional) style applied to every unselected tab.

Events:

create

Fired right after the tabs has been setup.

Signature:

onCreate(newPanel, index)  

Arguments:

1. newPanel - (element) the active panel.
2. index - (int) the index of the active panel.

change

Fired when the active panel is changed.

Signature:

onChange(newPanel, curPanel, index, current)  

Arguments:

1. newPanel - (element) the active panel.
2. oldPanel - (element) the previously selected panel.
3. index - (int) the index of the active panel.
4. current - (int) index of the previously selected panel.

More demos

• Matrix
• Random
• Move
• Stack
• No animation

Download | Fork on github

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



Quick phone number validation

I wrote a quick phone number validation regExp form my form validator, you can use it at your own risk :) .

usage is quite straighforward:

//random number
var number = '+237 348 547 12',//var number = '(+237) 348 547 12',
//var number = '237 348 547 12',
regExp = /^((\+\d+)|(\(\+?\d+\)))?\s*\d([\d+\-/ ])+$/;

alert(regExp.test(number))


let me know it you find something wrong with it.

Mootools tooltip made simple

mootoos setter and getter are just great features, I used it to extend Element with a simple way to provide tooltip.
Adding a tooltip is quite simple:
Element.set('tooltip', 'some html')

removing the tooltip:
Element.set('tooltip', '')

view the demo
the css:


.tip-body {

display:inline-block;
position: absolute;
}
/* .tip-body div {

display: inline-block
} */
.tip-body-right {

background: transparent url(http://dl.getdropbox.com/u/1731360/point/point_left.gif) no-repeat left center;
padding-left: 5px;
}
.tip-body-left {

background: transparent url(http://dl.getdropbox.com/u/1731360/point/point_right.gif) no-repeat right center;
padding-right: 5px;
}
.tip-body-top {

background: transparent url(http://dl.getdropbox.com/u/1731360/point/point_down.gif) no-repeat center bottom;
padding-bottom: 5px;
}

.tip-body-bottom {

background: transparent url(http://dl.getdropbox.com/u/1731360/point/point_up.gif) no-repeat center top;
padding-top: 5px;
}

.tip-container {

background: #4c4c4c;
color: #ffffe5;
padding: 5px 9px;
/* line-height: 10; */
margin: 0;
display:inline-block;
margin: 0 auto;
overflow: hidden;
font-size: 10px;
font-family: verdana;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
/* float: left; */
/* height: 13 */
}


the javascript:



(function () {

var morphIn = {}, morphOut = {}, events = {mouseenter: function () { this.retrieve('tip:body').morph(morphIn) }, mouseleave: function () { this.retrieve('tip:body').morph(morphOut) }},
_follow = function (e) {

var options = this.retrieve('tip:options');
this.retrieve('tip:body').setStyles({left: e.page.x + options.offset.left, top: e.page.y + options.offset.top})
};

Element.Properties.tooltip = {

set: function(message, options) {

if (this.retrieve('tip:body')) {

this.retrieve('tip:body').destroy();
this.eliminate('tip:body').eliminate('tip:options').removeEvents(events);
}

if ((message !== 0 && !message) || ($type(message) == 'element' && message.get('text').trim() !== 0 && !message.get('text').trim())) return this;

options = $merge({
location: 'top',
offset: {left: 5, top: 5},
fixed: true,
opacity: .9
}, options);

this.store('tip:options', options).store('tip:body', new Element("div", {"class": "tip-body tip-body-" + options.location, morph: {duration: 500} }).

adopt(new Element("div", {"class": "tip-container",

html: $type(message) == 'element' ? new Element('div').adopt(message).get('html') : message.replace(/ /g, " ")
})).
inject(document.body)

);

var coords = this.getCoordinates(), tip = this.retrieve('tip:body'), t = tip.getSize(), styles = {opacity: 0};

morphIn = {opacity: options.opacity};
morphOut = {opacity: 0};

//we should use a css instead of this, especially for IE6
if(Browser.Engine.trident && Browser.Engine.version <= 5) {

tip.setStyles({width:
//IE6
Browser.Engine.version <= 4 ? 100 :

//IE7
tip.getElement('div').getWidth(),
overflow: 'visible'});
t = tip.getSize()
}

switch(options.location) {

case 'left':
styles.left = coords.left - options.offset.left - t.x;
styles.top = coords.top;
/* styles.marginLeft = -15; */
morphIn.marginLeft = 0;
morphOut.marginLeft = -15;
break;
case 'right':
styles.left = coords.right + options.offset.left;
styles.top = coords.top;
/* styles.marginLeft = 15; */
morphIn.marginLeft = 0;
morphOut.marginLeft = 15;
break;
case 'bottom':
styles.left = coords.left + (coords.width / 2).round() - (t.x / 2).round();
styles.top = coords.bottom + options.offset.top;
/* styles.marginTop = 15; */
morphIn.marginTop = 0;
morphOut.marginTop = 15;
break;
case 'top':
default:
styles.left = coords.left + (coords.width / 2).round() - (t.x / 2).round();
styles.top = coords.top - options.offset.top - t.y;
/* styles.marginTop = -15; */
morphIn.marginTop = 0;
morphOut.marginTop = -15;
break;
}
tip.setStyles(styles);

if(!options.fixed) events.mousemove = _follow; else delete events.mousemove;
this.addEvents(events);
return this;
},

get: function(message, options){
if (message) this.set('tooltip', message, options);
return this.retrieve('tip:body');
}
}
})();



view the demo

Templating and php

I ported the mootools javascript templating to php, so that you can use it with object and associative array.


function substitute($string, $object) {

$o = is_object($object) ? get_object_vars($object) : $object;

if(preg_match_all('/\\\\?\{([^{}]+)\}/', $string, $matches)) {

$search = array();
$replace = array();

foreach($matches[0] as $k => $m) {

if(substr($m, 0, 1) == '\\')
continue;

$search[] = $m;
$replace[] = isset($o[$matches[1][$k]]) && is_scalar($o[$matches[1][$k]]) ? $o[$matches[1][$k]] : '';
}

if($search)
$string = str_replace($search, $replace, $string);
}

return $string;
}


Here are some sample usages

$template = '{greating}, my name is {name}';

//using an object
$object = new stdClass();
$object->greating = 'Hello';
$object->name = 'Bela';

echo substitute($template, $object); //Hello, my name is Bela

//using an associative array
echo substitute($template, array('greating' => 'Hello',
'name' => 'Bela'
)); //Hello, my name is Bela



If you are looking for a very advanced usage of template you'll probabily look for library like patTemplate

A simple mootools notification system

it is similar to the one found on twitter, i'll not play well in IE6 because it does not handle the position:fixed css style.

jump to the demo

the css


.notify {

cursor: pointer;
z-index: 59999;
position: fixed;
left: 0;
width: 100%;
font-weight: bold;
font-size: 12px;
color:#5c92c6;
background-color: #fbf1a4;
border: 1px solid #ccc;
display: inline-block;
padding: 3px 5px 3px;
}

the timer


//From prototype.js
var PeriodicalExecuter = new Class({

initialize: function(callback, frequency) {

this.callback = callback;
this.frequency = frequency;
this.currentlyExecuting = false;

this.registerCallback();
},

registerCallback: function() {

this.stop();
this.timer = setInterval(this.onTimerEvent.bind(this), this.frequency * 1000);
return this;
},

execute: function() {

this.callback(this);
return this;
},

stop: function() {

if (!this.timer) return this;
clearInterval(this.timer);
this.timer = null;
return this;
},

onTimerEvent: function() {

if (!this.currentlyExecuting) {

try {

this.currentlyExecuting = true;
this.execute();
} finally {

this.currentlyExecuting = false;
}
}

return this;
}
});


the notifier


var Notifier = new Class({

Implements: Options,
queue: [],
options: {

duration: 5000,
location: 'top'
},
initialize: function (options) {

this.setOptions(options);
this.timer = new PeriodicalExecuter(this.display.bind(this), 1).stop();
},
notify: function (message) {

var queue = this.queue;

switch($type(message)) {

case 'array':

message.each(function (m) { queue.push(m) });
break;
case 'object':
default:

queue.push(message);
break;
}

if(!this.timer.currentlyExecuting) this.timer.registerCallback();

return this
},
display: function (pe) {

var queue = this.queue;

//the queue is empty, stop execution
if(queue.length == 0) {

pe.stop();
return this
}

//no notification currently displayed
if(!this.notifier) {

var p = queue.shift(),
options = $merge(this.options, p.options),
notifier = null,
chain = function () { delete this.notifier; notifier.destroy(); }.bind(this),
clean = function () {
notifier.set('tween', {onComplete: chain}).tween('opacity', 0)
};

//empty
if(!p.message) return this;

//show message
notifier = this.notifier = new Element('div', {"class": "notify", events: {click: clean}, styles: {opacity : 0}, html: p.message}).
setStyle(options.location, 0).inject(document.body, 'top').
set('tween', {link: 'cancel', onComplete: function () { setTimeout(clean, options.duration) }}).tween('opacity', 1);
}

return this
}
});


Usage:


window.addEvent('domready', function () {

//messages
var queue = [{message: 'this is the firt text, will disappear in 5s or now if you click'}, {message: 'this is the second text with a duration of 10s, you can wait or click to remove', options: {duration: 10000}}, {message: 'this notification is located at the bottom', options: {location: 'bottom'}}];

new Notifier().notify(queue).notify({message: 'last message'});
});

jump to the demo

Simple mootools templating

Mootools has a simple yet powerful templating system. Before I knew it, dealing with html was a kind of nightmare because the layout was not separated from the data logic.

now I use abuse of this.

here is a quick overview of what can be done with templating


var example = 'My name is {name}. I love {passion}';

var obj = { name: 'Sean', passion: 'programming' };
var subbed = example.substitute(obj);
alert(subbed); //My name is Sean. I love programming';


read the full post

Element.shake

Note: an updated demo is now availaible here



When I have some spare-time, I'm searching the web for simple but nice mootools scripts.

the blog of David walsh is one of my favorites, I wrapped his mootools skype effect in Element to make it easier to do.


view a demo

• /*


• based upon work from david walsh, http://davidwalsh.name/skype-mootools





• File:



• element.shake.js





• @author thierry bela





• (code)





• $(element).shake();





• (function () { $(element).shake('horizontal')}).delay(500)


• (end code)



• */




• Element.implement({shake: function () {





• var fx1, fx2, property = arguments[0] == 'horizontal' ? 'margin-left' : 'margin-top';





• if(!this.retrieve('shake:fx1')) {





• this.store('shake:fx2', new Fx.Tween(this, {duration: 100, link: "chain", onChainComplete:function() { this.store('running', false) }.bind(this) })).



• store('shake:fx1', new Fx.Tween(this, {duration: 200, link: "chain", onComplete:function() {



• fx2.start(property, -7).start(property, -4).start(property, -6).start(property, 0);



• }



• })



• );



• }


• fx2 = this.retrieve('shake:fx2'),



• fx1 = this.retrieve('shake:fx1');





• if(!this.retrieve('running')) {





• fx1.start(property, -10).start(property, -4);



• this.store('running', true);



• }





• return this;



• }


• });

view a demo

Mootools CountDown

[Update]

 I have rolled a modified version of this into a plugin that is available in the mootools forge

Hello,

few times ago, I've been looking for a mootools countdown script for mutzigstar.com, The one I found was for 1.11 and encoded with the dean edwards packer, so it was not usable, so I wrote one inspired by the script from here ,

you can view a demo here

What comes around goes around

salut,

ca y est, finalement je fais le grand saut...je vais m'occuper de mon blog, et deja je me propose de discuter de developpement en Javascript, principalement mootools et php à l'occasion.

- Happy blogging!