We write our own MooTools plugin.

Good day.
This is my first serious post on Habré, so criticism is welcome.
Today I will talk about writing a plugin for the MooTools JavaScript library using the example of a modal popup window.

HTML, CSS.

What will be our modal window? Schematically it can be represented as follows.



From an HTML point of view, a pop-up window is a regular block element (for example, a div) and another block element to create a translucent overlay. The functional HTML code will contain only two lines:

< div id ="Overlay" ></ div >
< div id =« Popup » > . </ div >


The CSS will look like this:

body
{
font-family: Arial, Tahoma, Sans-Serif;
font-size: 1em;
}

#Popup
{
visibility: hidden;
position: absolute;
left: 50%;
top: 50%;
background-color: #FFF;
padding: 10px;
}

#Overlay
{
visibility: hidden;
position: absolute;
left: 0;
top: 0;
width: 100%;
background-color: #000;
}

Using visibility: hidden, we intentionally hide the pop-up window and the overlay so that they are not visible immediately after the page loads. An attentive reader may have noticed that the overlay currently has zero height and the pop-up window is not in the center of the page (because the upper left corner of the window is located in the center of the page). We will fix all this in JavaScript.
')

Javascript

Now let's do the JavaScript code.
Perhaps, I will not fully describe the syntax of classes in MooTools, a fairly complete description is given here . Let's just take a look at the framework of the class, which we take to write a plug-in to quickly figure out what's what:

var MoodalBox = new Class({
// , .
// setOptions() Options.
Implements: [Options],

// , .
options: {
optionName1: defaultValue1,
optionName2: defaultValue2
},

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

// .
}
});

Now let's complicate this framework with three new methods: show (show window), hide (hide window), setPosition ( position window), also think up more meaningful options and add a couple of arguments to the constructor:

var MoodalBox = new Class({
Implements: [Options],

// .
options: {
// .
destinationOverlayOpacity: 0.7,

// .
allowManualClose: true
},

// .
// element — .
// overlay — .
initialize: function (element, overlay, options)
{
this .setOptions(options);

// .
this .element = $(element);
this .overlay = $(overlay);

// .
if ( this .options.allowManualClose)
// .
// : bind(param) this.hide, this
// param. bind, this this.hide ,
// , .. this.overlay.
this .overlay.addEvent( "click" , this .hide.bind( this ));

// .
this .targetCoords = this .element.getCoordinates();

// / .
// , CSS- , — .
this .fx = {
overlayAnimation: new Fx.Tween( this .overlay, { property: "opacity" }),
elementAnimation: new Fx.Tween( this .element, { property: "opacity" })
}
},

// .
show: function ()
{
// .
this .setPosition();

// ( ).
this .fx.overlayAnimation.start(0, this .options.destinationOverlayOpacity);
this .fx.elementAnimation.start(0, 1);
},

// .
hide: function ()
{
// ( ).
this .fx.overlayAnimation.start( this .options.destinationOverlayOpacity, 0);
this .fx.elementAnimation.start(1, 0);
},

//
// .
setPosition: function ()
{
this .element.setStyles({
"marginLeft" : -( this .targetCoords.width / 2),
"marginTop" : -( this .targetCoords.height / 2)
});

this .overlay.setStyles({
"top" : window.getScrollTop(),
"height" : window.getHeight()
});
}
});

To use a class, you must create an instance of it and add a button to the page, clicking on which will show the window. As a result, the HTML code will look as follows:

<! 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 >
< title > Mootools plugin </ title >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< link href ="./Style.css" rel ="Stylesheet" type ="text/css" />
<!-- Mootools. -->
< script src ="../../MooToolsCore.js" type ="text/javascript" language ="javascript" ></ script >
<!-- . -->
<script src= "./MoodalBox.js" type= "text/javascript" language= "javascript" ></script>
<script type= "text/javascript" language= "javascript" >
//<![CDATA[
var popupFx = null ;

// DOM-.
// .
window.addEvent( "domready" , function () { popupFx = new MoodalBox( "Popup" , "Overlay" ); });
//]]>
</ script >
</ head >
< body >
< input type ="button" value ="Show popup" onclick ="popupFx.show();" />
< div id ="Overlay" ></ div >
< div id ="Popup" > . </ div >
</ body >
</ html >


See how it works here . And what to do with the options that can be changed? We simply pass them to the constructor as an object. For example, you can change the transparency of the overlay after showing the window:

popupFx = new MoodalBox( "Popup" , "Overlay" , { destinationOverlayOpacity: 0.3 });

More interesting results can be achieved using the Fx.Morph class, which changes several CSS properties over time. The result of the animation size can be found here . If you liked the article - I will write more.

PS All the CSS code could not be separated into a separate file, but encapsulated in a JavaScript class, but then the class would be overgrown with unnecessary changes to the CSS properties of the element and it would be more difficult to grasp the essence.

Cross post from my blog .

I summarize the links.

A simple example.
An example with animated dimensions.

UPD. Mirror (thanks to habracut ):
A simple example.
An example with animated dimensions.

UPD. Sorry for the hosting, can anyone advise that the thread is good and free ... Here is the archive with all the examples.