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