baseBox v1.15

http://mootools.net/forge/p/basebox playground

by Dimitar Christoff

HTML

<div id="main">
<button data-id="alt-styling.css">open with alt style 1</button> <button data-id="alt-styling2.css">open with alt style 2</button> this works by just loading a new stylesheet that overwrites existing rules.
<br /><br>
Pro JavaScript with MooTools is unlike any other JavaScript book on the market today. While similar books focus on either JavaScript as a language of the browser or how to use JavaScript Frameworks, Pro JavaScript with MooTools fills the gap between these topics and moves beyond—exploring the advanced features of JavaScript and how the MooTools framework uses these features to further improve the language itself.
<br /><br />
The book itself takes a unique three-pronged approach. It first walks you through the advanced features of JavaScript and the MooTools framework, including native augmentation and type creation, a comprehensive discussion of JavaScript functions, Object-Oriented programming with native JavaScript and MooTools Classes, and the MooTools Class internals. You’ll then learn all about Javascript in the DOM: the Elements classes and its internals, the MooTools Event system, Selector engines and MooTools Slick, Ajax and the Request Object, and Animation and the Fx classes.
<br /><br />
The final section really sets the book apart from all others, as it discusses JavaScript outside the browsers. You’ll take an in-depth look at CommonJS and MooTools, using MooTools outside the browser to build ORM, creating simple CommonJS applications via the MooTools Deck framework, and creating complex Server-Side applications using Raccoon.
What you’ll learn
<br /><br />
How MooTools augments natives and creates new types via the Type constructor and how it uses the advanced features of JavaScript functions to extend the language.<br />
All about Object-Oriented programming in native JavaScript and MooTools Class counterpart—the internals of the Class Type and other special object-oriented features that the framework adds to the...

CSS

html {
    font-family: verdana;
    font-size: 11px;
}
.left {
    float: left;
}
.cur {
    cursor: pointer;
}
.right {
    float: right;
}
.farShadow {
    -moz-box-shadow: 8px 8px 15px rgba(0,0,0,.7);
    -webkit-box-shadow: 8px 8px 15px rgba(0,0,0,.7);
    -ms-box-shadow: 8px 8px 15px rgba(0,0,0,.7);
    box-shadow: 8px 8px 15px rgba(0,0,0,.7);
}

div.baseBox {
    background: #5184AF;
    background-image: -moz-linear-gradient(top, #26445F,#26445F,#5184AF,#396690);
    background-image: -webkit-linear-gradient(top, #26445F,#26445F,#5184AF,#396690);
    background-image: -o-linear-gradient(top, #26445F,#26445F,#5184AF,#396690);     
    border: 1px solid #000;
    border-radius: 7px 7px 0px 0px;
    -moz-border-radius: 7px 7px 0px 0px;
    -webkit-border-radius: 7px 7px 0px 0px;
    -ms-border-radius: 7px 7px 7px 0px;
    color: #fff;    
}


div.baseBox2 {
    background: #444;
    background-image: -webkit-linear-gradient(top, #111,#111,#444,#222);
    background-image: -moz-linear-gradient(top, #111,#111,#444,#222);
    background-image: -o-linear-gradient(top, #111,#111,#444,#222); 
}

div.baseBoxTitle {
    padding: 5px;
    background: #26445F url(http://jsfiddle.net/img/top-bg.png) repeat-x;
    background-image: -moz-linear-gradient(top, #4375A0,#26445F);
    background-image: -ms-linear-gradient(top, #4375A0,#26445F);
    background-image: -webkit-linear-gradient(top, #4375A0,#26445F);
    background-image: -o-linear-gradient(top, #4375A0,#26445F); 
    color: #ccc;
    height: 18px;
    -moz-border-radius: 6px 6px 0 0px;
    -webkit-border-radius: 6px 6px 0 0px;
    border-radius: 6px 6px 0 0;
    border-bottom: 1px solid #000;
    -moz-box-shadow:inset -2px -2px 4px rgba(255,255,255, 0.1);
    -webkit-box-shadow:inset -2px -2px 4px rgba(255,255,255, 0.1);
    -ms-box-shadow:inset -2px -2px 4px rgba(255,255,255, 0.1);
    box-shadow:inset -2px -2px 4px rgba(255,255,255, 0.1);     
}

div.baseBoxTitle h2 {
    color: #fff;
    font-weight: bold;
   ...

JavaScript

/*
---
name: baseBox
description: a MooTools 1.3 modal box class, powered by CSS and with scale transitions
version: 1.15
authors:
  - Dimitar Christoff

 requires:

  - Core/Class.Extras
  - Core/Element.Event
  - Core/Element.Style
  - Core/Element.FX
  - Core/Element.Morph
  - More/Element.Delegation
  - More/Drag.move

license: MIT-style license

provides: [baseBox]
...
*/
(function() {
    // internals to do with allowing mootools to parse and modify transform2d scale

    Element.Styles.MozTransform = "rotate(@deg) scale(@)";
    Element.Styles.MsTransform = "rotate(@deg) scale(@)";
    Element.Styles.OTransform = "rotate(@deg) scale(@)";
    Element.Styles.WebkitTransform = "rotate(@deg) scale(@)";

    Object.append(Fx.CSS.Parsers, {

        TransformScale: {
            parse: function(value) {
                return ((value = value.match(/^scale\((([0-9]*\.)?[0-9]+)\)$/i))) ? parseFloat(value[1]) : false;
            },
            compute: function(from, to, delta) {
                return Fx.compute(from, to, delta);
            },
            serve: function(value) {
                return 'scale(' + value + ')';
            }
        }

    });

    // class baseBox start
    this.baseBox = new Class({

        Implements: [Options, Events],

        options: {
            // element: document.body       // required!
            boxTitle: "baseBoxTitle",       // css title class
            warpClass: "baseBox",           // main box wrap css class
            boxBodyOuter: "",               // an outer body content css class
            boxBody: "",                    // inner body content css class
            shadowClass: "farShadow",       // drop shadow class - applied to warpClass el
            closeClass: "baseBoxClose",     // cssing the close class
            outerClose: false,              // can position a close outside the box
            scroll: "hidden",               // by default, no scrolling. can be hidden|auto
           ...