Class ProtoPopup

Defined in: proto_popup_base.js.

Class Summary
Constructor Attributes	Constructor Name and Description
	ProtoPopup(id, config) ProtoPopup provides a button-less info box with header, body and footer fields.

Field Summary
Field Attributes	Field Name and Description
	body The popup's 'body' section is the popup's third DOM child.
	config The default configuration hideOnEscape {BOOL} - If true hides the popup when pressing the ESC key.
	footer The popup's 'footer' section is the popup's forth DOM child.
	header The popup's 'header' section is the popup's second DOM child.
	id The ID of the popup's object and DIV.
<static>	ProtoPopup.id2obj Object mapping popup IDs to popup objects.
	onShow Array of functions that will be executed at the end of the popup initialization.
	popup The popup div having #id as its ID, 'proto-popup' as its class attribute.
	sections Array holding the popup's section names 'header', 'body' and 'footer'.

Method Summary
Method Attributes	Method Name and Description
	centerIt() Chainable instance method to center the popup horizontally and vertically on the viewport.
<static>	ProtoPopup.get(id, config) Class method returning (maybe first create) a draggable popup DIV for info boxes.
	hide() Chainable instance method to hide the popup.
	makeButton(name, label) Non-chainable instance method to create and return a button element.
<static>	ProtoPopup.makeFunction(id, config) Class method making custom functions accepting one argument that will be inserted in the body section of the underlying ProtoPopup object created behind the scenes.
<static>	ProtoPopup.makeGetFor(newProtoPopup) Class method returning get() methods for ProtoPopup and its derivations.
<static>	ProtoPopup.makeMakeFunction(newProtoPopup) Class method returning makeFunction() methods for ProtoPopup and its derivations.
	setHtml(config) Chainable instance method to set the HTML in any of the three popup sections 'header', 'body' or 'footer'.
	show() Chainable instance method to show the popup.

Event Summary
Event Attributes	Event Name and Description
	hideOnEscape(event) Fired when the ESC key is pressed and the config option hideOnEscape is true (which is the default).

Class Detail

ProtoPopup(id, config)

ProtoPopup provides a button-less info box with header, body and footer fields. Since it has no buttons, closing is done via the ESC key.

    var info = new ProtoPopup('info', {
        header     : new Element('div').update('Info header'),
        footer     : 'Info footer',
        appendBody : true
    });

    // Show the first info
    info.setHtml({body : 'Info 1'}).show();

    // Append a second info in bold
    info.setHtml({body : new Element('strong').update('Info 2')}).show();

Parameters:
{STRING} id: A unique string identifying a popup
{OBJECT} config: The configuration object

Returns:: ProtoPopup object

Requires:: prototype-1.6.3.js -- the wellknown Ajax library, as well as Scriptaculous' effects.js and dragdrop.js

Field Detail

body

The popup's 'body' section is the popup's third DOM child. It's ID is "id+'-body'", it's class attribute 'proto-popup-body'. It's content is set via #setHtml.

config

The default configuration

hideOnEscape {BOOL} - If true hides the popup when pressing the ESC key. Defaults to true.
centerOnCreation {BOOL} - Center the popup relative to the viewport when creating it. Lateron it will be placed where the user drags it to. The position is remembered across hiding/showing until a full page reload occurs. Defaults to true.
appendHeader {BOOL} - If true, calls to #setHtml will append to the popup's header section. Defaults to true.
appendBody {BOOL} - If true, calls to #setHtml will append to the popup's body section. Defaults to true.
appendFooter {BOOL} - If true, calls to #setHtml will append to the popup's footer section. Defaults to true.
header {STRING} - The initial value of the header section. Defaults to undefined.
body {STRING} - The initial value of the body section. Defaults to undefined.
footer {STRING} - The initial value of the footer section. Defaults to undefined.
width {STRING} - The width of the popup. Overwrites the width set in a CSS file. Defaults to undefined.
minWidth {STRING} - The minimum width of the popup. Overwrites the min-width set in a CSS file. Defaults to undefined.
maxWidth {STRING} - The maximum width of the popup. Overwrites the max-width set in a CSS file. Defaults to undefined.
height {STRING} - The height of the popup. Overwrites the height set in a CSS file. Defaults to undefined.
minHeight {STRING} - The minimum height of the popup. Overwrites the min-height set in a CSS file. Defaults to undefined.
maxHeight {STRING} - The maximum height of the popup. Overwrites the max-height set in a CSS file. Defaults to undefined.
cancelIconSrc {STRING} - The src URL of the cancel icon. Defaults to 'images/cancel.png'. To remove the icon, set this option to false.
zIndex {NUMBER} - The z-index of the popup. Defaults to 1.
modal {BOOL} - If true, the popup will be of the 'modal' kind, the document being greyed out. The modal overlay will have a z-index of 1 less than the popup's z-index. Defaults to false.
opacity {NUMBER} - The opacity of the overlay greying out the screen in the case of a 'modal' popup (see above). Defaults to 0.6.
headerBackgroundImage {STRING} - CSS property 'background-image' for the header section. Defaults to undefined.
bodyBackgroundImage {STRING} - CSS property 'background-image' for the body section. Defaults to undefined.
footerBackgroundImage {STRING} - CSS property 'background-image' for the footer section. Defaults to undefined.
draggableOptions {OBJECT} - Options passed down to underlying Scriptaculous' Draggable object. See http://wiki.github.com/madrobby/scriptaculous/draggable for more information.

footer

The popup's 'footer' section is the popup's forth DOM child. It's ID is "id+'-footer'", it's class attribute 'proto-popup-footer'. It's content is set via #setHtml.

header

The popup's 'header' section is the popup's second DOM child. It's ID is "id+'-header'", it's class attribute 'proto-popup-header'. It's content is set via #setHtml.

The ID of the popup's object and DIV.

<static> ProtoPopup.id2obj

Object mapping popup IDs to popup objects.

onShow

Array of functions that will be executed at the end of the popup initialization.

popup

The popup div having #id as its ID, 'proto-popup' as its class attribute.

sections

Array holding the popup's section names 'header', 'body' and 'footer'.

Method Detail

centerIt()

Chainable instance method to center the popup horizontally and vertically on the viewport. Internally called by #show.

<static> ProtoPopup.get(id, config)

Class method returning (maybe first create) a draggable popup DIV for info boxes. Given the same id argument returns the same popup object, following the singleton pattern.

Make a custom info() method serving as a convenient wrapper.

   The popup shown by info() will always have the string
   'Newest Information' in the popup's header section, while the
   argument passed to info() will be wrapped in a DIV that
   will be inserted in the popup's body section.
   
        // make the custom info function
        var info = function(msg) {
            ProtoPopup.get('info', {
                header     : 'Info header',
                body       : new Element('div').update(msg),
            });
        }

        // first use
        info('My first info');

        // second use (using the same popup, showing the same header)
        info('My second info');

Parameters:
{STRING} id: The ID of the popup.
{OBJECT} config: The #config object.

Returns:: The initialized and draggable popup.

hide()

Chainable instance method to hide the popup.

       var info = new ProtoPopup('info', {header : 'Info header'});
       info.setHtml({body : 'My Info'}).show();

       // hide 3 seconds later after showing it
       setTimeout(function() {pinfo.hide()}, 3000);

makeButton(name, label)

Non-chainable instance method to create and return a button element. This method is not used by ProtoPopup, but by its child classes ProtoPopup.Alert and ProtoPopup.Confirm.

It's CSS class is "'proto-popup-'+name+'-btn'".

Parameters:
name
label

<static> ProtoPopup.makeFunction(id, config)

Class method making custom functions accepting one argument that will be inserted in the body section of the underlying ProtoPopup object created behind the scenes.

Make a custom info() method

      // make the method
      var info = ProtoPopup.makeFunction('info', {
          header : 'Announcement'
      });

      // first use
      info('Forget this info');

      // second use (using the same popup, showing the same header
      info('Forget this info, too');

Parameters:
{STRING} id: The ID of the popup.
{OBJECT} config: The #config object.

Returns:: A function accepting one argument to be inserted into the popup's body section.

<static> ProtoPopup.makeGetFor(newProtoPopup)

Class method returning get() methods for ProtoPopup and its derivations.

Parameters:
newProtoPopup: Function returning a constructor making ProtoPopup or one of derivative objects.

Returns:: get() method

<static> ProtoPopup.makeMakeFunction(newProtoPopup)

Class method returning makeFunction() methods for ProtoPopup and its derivations.

Parameters:
newProtoPopup: Function returning a constructor making ProtoPopup or one of derivative objects.

Returns:: get() method

setHtml(config)

Chainable instance method to set the HTML in any of the three popup sections 'header', 'body' or 'footer'.

       var info = new ProtoPopup('info');
       info.setHtml({header : 'Info header', body : 'My Info'});

Parameters:
config: An object whose keys represent said three sections. The corresponding values can be plain text, HTML, a DOM node or any object having a toHTML() method.

show()

Chainable instance method to show the popup.

       var info = new ProtoPopup('info', {header : 'Info header'});
       info.setHtml({body : 'My Info'}).show();

Event Detail

hideOnEscape(event)

Fired when the ESC key is pressed and the config option hideOnEscape is true (which is the default).

Parameters:
event

Classes

Class ProtoPopup