Skip to content

Added modal Mask option; added destroy on close option; added parent/child linking methods. #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jbgithub wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Added modal Mask option; added destroy on close option; added parent/child linking methods. #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a8a0d32
1. Made class compatible with Mootools 1.4+.
Jan 4, 2012
2e271a0
this.buttons is incorrectly redefined from an Object to an Array.
Jan 5, 2012
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions Assets/LightFace.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,21 @@

.lightfaceMask
{
position: absolute;
opacity: 0.7;
filter: alpha(opacity=70);
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
z-index: 999;
background: #fff;
}

.lightface {
margin: 0;
padding: 0;
border-collapse: collapse;
/* Removes focus() selection outline
outline: none;
*/
position: absolute;
top: -9000px;
left: -9000px;
Expand Down
39 changes: 37 additions & 2 deletions Docs/LightFace.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,10 @@ LightFace Method: constructor {#LightFace:constructor}
* errorMessage - (*string*, defaults to '<p>The requested file could not be found.</p>') The error message displayed if a resource is not found.
* resetOnScroll - (*boolean*, defaults to true) Keeps the modal box in the same place on the screen if the user scrolls.
* baseClass - (*string*, defaults to 'lightface') The base class of the modal box.
* destroyOnClose - (*boolean*, defaults to false) Should the modal box destory it self when it closes?
* closeOnMaskClick - (*boolean*, defaults to false) Should the modal box close when the mask is clicked?
* maskClass - (*string*, defaults to 'lightfaceMask') The class of the mask.
* showMask - (*boolean*, defaults to true) Should the mask be displayed? If true this prevents user interaction with the page while the modal box is open. *the Mask class is provided in 'mootools-more-drag-mask.js' and also available with MooTools More*

### Returns:

Expand Down Expand Up @@ -180,11 +184,12 @@ Closes the modal dialog.

### Syntax:

modal.close(fast);
modal.close(fast, bDestroy);

### Arguments:

1. fast - (*boolean*) If true, skips fading and quickly sets opacity to 0%.
2. bDestroy - (*boolean*) If true, the class is destroyed after it closes. When true, this overrides the destroyOnClose option.

LightFace Method: fade {#LightFace:fade}
---------------------------------------------------------------
Expand Down Expand Up @@ -222,7 +227,37 @@ Loads static content into the modal dialog.

1. content - (*string*) The content to place within the modal dialog.
2. title - (*string*) The title of the modal dialog. (not required)



LightFace Method: attachDependent {#LightFace:attachDependent}
---------------------------------------------------------------

Adds an instance of LightFace as a dependent, when the parent instance closes it will close the dependents first.
A parent can have more than one dependent.

### Syntax:

modal.attachDependent(LightFaceObject);

### Arguments:

1. LightFaceObject - (*LightFace Object*) A dependent LightFace instance.


LightFace Method: attachParent {#LightFace:attachParent}
---------------------------------------------------------------

Adds an instance of LightFace as a parent, when the parent instance closes it will close the dependents first.
A dependent can only have one parent.

### Syntax:

modal.attachParent(LightFaceObject);

### Arguments:

1. LightFaceObject - (*LightFace Object*) A parent LightFace instance.


LightFace Method: destroy {#LightFace:destroy}
---------------------------------------------------------------
Expand Down
104 changes: 92 additions & 12 deletions Source/LightFace.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ var LightFace = new Class({
options: {
width: 'auto',
height: 'auto',
destroyOnClose: false,
draggable: false,
title: '',
buttons: [],
Expand All @@ -37,7 +38,11 @@ var LightFace = new Class({
constrain: false,
resetOnScroll: true,
baseClass: 'lightface',
errorMessage: '<p>The requested file could not be found.</p>'/*,
errorMessage: '<p>The requested file could not be found.</p>',
/* Mask Options */
closeOnMaskClick: false,
maskClass: 'lightfaceMask',
showMask: true/*,
onOpen: $empty,
onClose: $empty,
onFade: $empty,
Expand All @@ -56,17 +61,31 @@ var LightFace = new Class({
this.buttons = {};
this.resizeOnOpen = true;
this.ie6 = typeof document.body.style.maxHeight == "undefined";
this.oMask = null;
this.oParent = null; /* Parent LightFace object */
this.dependents = []; /* Dependent LightFace objects */
this.draw();
},

draw: function() {

//create modal mask
if (this.options.showMask && window['Mask'] != null) {
this.oMask = new Mask(null, {
'class': this.options.maskClass,
onClick: function() {
if (this.options.closeOnMaskClick) this.close();
}.bind(this)
});
}

//create main box
this.box = new Element('table',{
'class': this.options.baseClass,
styles: {
'z-index': this.options.zIndex,
opacity: 0
opacity: 0,
visibility: 'hidden'
},
tween: {
duration: this.options.fadeDuration,
Expand Down Expand Up @@ -95,7 +114,7 @@ var LightFace = new Class({
cell.appendChild(this.contentBox);
}
else {
document.id(cell).setStyle('opacity',0.4);
document.id(cell).setStyles({ visibility: 'visible', opacity: 0.4 });
}
}
}
Expand All @@ -121,7 +140,7 @@ var LightFace = new Class({
height: this.options.height
}
}).inject(this.contentBox);

//button container
this.footer = new Element('div',{
'class': 'lightfaceFooter',
Expand All @@ -134,7 +153,8 @@ var LightFace = new Class({
this.overlay = new Element('div',{
html: '&nbsp;',
styles: {
opacity: 0
opacity: 0,
visibility: 'hidden'
},
'class': 'lightfaceOverlay',
tween: {
Expand All @@ -150,7 +170,6 @@ var LightFace = new Class({
}

//create initial buttons
this.buttons = [];
if(this.options.buttons.length) {
this.options.buttons.each(function(button) {
this.addButton(button.title,button.event,button.color);
Expand All @@ -162,7 +181,48 @@ var LightFace = new Class({

return this;
},


// Manage parent and dependent instances of LightFace.
attachDependent: function(oDependent) {
if (instanceOf(oDependent, LightFace) && this.dependents.indexOf(oDependent) === -1) {
this.dependents.push(oDependent);
oDependent.attachParent(this);
}
return this;
},
attachParent: function(oParent) {
if (instanceOf(oParent, LightFace)) {
this.oParent = oParent;
if (oParent.dependents.indexOf(this) === -1) {
oParent.attachDependent(this);
}
}
return this;
},
_closeDependents: function() {
if (this.dependents.length) {
this.dependents.each(function(oObj) {
oObj.close(true, this.options.destroyOnClose);
}, this);
// this.dependents.empty();
}
return this;
},
_detachDependent: function(oDependent) {
if (instanceOf(oDependent, LightFace)) {
this.dependents.erase(oDependent);
oDependent.oParent = null;
}
return this;
},
_detachParent: function() {
if (this.oParent) {
this.oParent._detachDependent(this);
this.oParent = null;
}
return this;
},

// Manage buttons
addButton: function(title,clickEvent,color) {
this.footer.setStyle('display','block');
Expand Down Expand Up @@ -202,19 +262,35 @@ var LightFace = new Class({
},

// Open and close box
close: function(fast) {
close: function(fast, bDestroy) {
if(this.isOpen) {
this.box[fast ? 'setStyles' : 'tween']('opacity',0);
this._closeDependents();
if (fast) {
this.box.setStyle('opacity', 0);
this.box.setStyle('visibility', 'hidden');
if (this.oMask) this.oMask.hide();
}
else {
this.box.get('tween').start('opacity', 0).chain(function()
{
this.box.setStyle('visibility', 'hidden');
if (this.oMask) this.oMask.hide();
if (bDestroy || this.options.destroyOnClose) this.destroy();
}.bind(this));
}
this.fireEvent('close');
this._detachEvents();
this.isOpen = false;
if (fast && (bDestroy || this.options.destroyOnClose)) this.destroy();
}
return this;
},

open: function(fast) {
if(!this.isOpen) {
this.box[fast ? 'setStyles' : 'tween']('opacity',1);
if (this.oMask) this.oMask.show();
this.box.setStyle('visibility', 'visible');
this.box[fast ? 'setStyle' : 'tween']('opacity', 1);
if(this.resizeOnOpen) this._resize();
this.fireEvent('open');
this._attachEvents();
Expand All @@ -235,14 +311,15 @@ var LightFace = new Class({
fade: function(fade,delay) {
this._ie6Size();
(function() {
this.overlay.setStyle('visibility', 'visible');
this.overlay.setStyle('opacity',fade || 1);
}.bind(this)).delay(delay || 0);
this.fireEvent('fade');
return this;
},
unfade: function(delay) {
(function() {
this.overlay.fade(0);
this.overlay.get('tween').start('opacity', 0).chain(function(){ this.element.setStyle('visibility', 'hidden'); });
}.bind(this)).delay(delay || this.options.fadeDelay);
this.fireEvent('unfade');
return this;
Expand Down Expand Up @@ -337,8 +414,11 @@ var LightFace = new Class({

// Cleanup
destroy: function() {
this._closeDependents();
this._detachParent();
this._detachEvents();
this.buttons.each(function(button) {
if (this.oMask) this.oMask.destroy();
Object.each(this.buttons, function(button) {
button.removeEvents('click');
});
this.box.dispose();
Expand Down
15 changes: 15 additions & 0 deletions changelog.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,21 @@ LightFace
The following changes have been made to LightFace.


1/4/2012
----------
+ As of Mootools 1.4 fade() & setStyle('opacity') no longer set the visibility property. Changed code to set visibility where opacity is set.
+ Added the use of Mootools Mask class to make the plugin a true modal dialog box. Added options: showMask, maskClass, closeOnMaskClick.
+ Add destroyOnClose option; if true the class will destory it's self when the dialog box closes.
+ Added methods: [public] attachDependent(), attachParent(); [private] _closeDependents(), _detachDependent(), _detachParent().
These methods maintain a parent/child relationship of LightFace instances.
+ Added mask.html page to demonstrate the above changes.
Example: Click the "terms and conditions" link then click "I Agree" button.
With the Confirm dialog box open click the white space outside the parent window (this is the mask).
This action will close the Confirm dialog box then the parent dialog box.
+ Added mootools-more-drag-mask.js for use by the mask.html page.
+ Added lightfaceMask to LightFace.css.
+ Tag updated from .96 to .97

11/17/2010
----------
+ Updated destroy() method to remove reference to node so that videos stop playing when destroy() is called.
Expand Down
Loading