Skip to content
This repository has been archived by the owner on Oct 30, 2022. It is now read-only.

Adding event to after callbacks #33

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

Adding event to after callbacks #33

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f907685
Allow callbacks to access the event object
abreckner Jun 21, 2016
df01ce3
Adding event to after callbacks
abreckner Jun 21, 2016
0f00a70
Adding some events and callbacks
abreckner Aug 10, 2016
49668ed
Pass in event for Firefox
abreckner Oct 17, 2016
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
97 changes: 57 additions & 40 deletions animatedModal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
(function ($) {

$.fn.animatedModal = function(options) {
var me = this;
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

holding variable so we can return "this" at the end as is customary (with added openModal and closeModal methods).

var modal = $(this);

//Defaults
Expand All @@ -29,23 +30,57 @@
animationDuration:'.6s',
overflow:'auto',
// Callbacks
beforeOpen: function() {},
beforeOpen: function(event, callback) {
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Run callbacks after open

callback();
},
afterOpen: function() {},
beforeClose: function() {},
afterClose: function() {}

}, options);

me.openModal = function(){
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

extracted this out so it can be called manually
i.e.
this.modalWindow = $('#foo').animatedModal({modalTarget: 'tipsSeenModal', animatedIn: 'slideInRight', animatedOut: 'bounceOutRight'});

this.modalWindow.openModal();
this.modalWindow.closeModal();

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ReferenceError: event is not defined

settings.beforeOpen(event, function(){
$('body, html').css({'overflow':'hidden'});
if (id.hasClass(settings.modalTarget+'-off')) {
id.removeClass(settings.animatedOut);
id.removeClass(settings.modalTarget+'-off');
id.addClass(settings.modalTarget+'-on');
}

if (id.hasClass(settings.modalTarget+'-on')) {
id.css({'opacity':settings.opacityIn,'z-index':settings.zIndexIn});
id.addClass(settings.animatedIn);
id.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(event){
afterOpen(event);
});
};
});
}

me.closeModal = function(){
$('body, html').css({'overflow':'initial'});

if (id.hasClass(settings.modalTarget+'-on')) {
id.removeClass(settings.modalTarget+'-on');
id.addClass(settings.modalTarget+'-off');
};

}, options);
if (id.hasClass(settings.modalTarget+'-off')) {
id.removeClass(settings.animatedIn);
id.addClass(settings.animatedOut);
id.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(event){
afterClose(event);
});
};
}

var closeBt = $('.close-'+settings.modalTarget);

//console.log(closeBt)

var href = $(modal).attr('href'),
id = $('body').find('#'+settings.modalTarget),
idConc = '#'+id.attr('id');
//console.log(idConc);

// Default Classes
id.addClass('animated');
id.addClass(settings.modalTarget+'-off');
Expand All @@ -66,57 +101,39 @@
'-ms-animation-duration':settings.animationDuration,
'animation-duration':settings.animationDuration
};

//Apply stles
id.css(initStyles);

modal.click(function(event) {
event.preventDefault();
$('body, html').css({'overflow':'hidden'});
if (href == idConc) {
if (id.hasClass(settings.modalTarget+'-off')) {
id.removeClass(settings.animatedOut);
id.removeClass(settings.modalTarget+'-off');
id.addClass(settings.modalTarget+'-on');
}

if (id.hasClass(settings.modalTarget+'-on')) {
settings.beforeOpen();
id.css({'opacity':settings.opacityIn,'z-index':settings.zIndexIn});
id.addClass(settings.animatedIn);
id.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', afterOpen);
};
}
me.openModal();
});



closeBt.click(function(event) {
// update so dynamically created close buttons have click handlers
$('body').on('click', '.close-'+settings.modalTarget, function(event){
event.preventDefault();
$('body, html').css({'overflow':'auto'});

settings.beforeClose(); //beforeClose
if (id.hasClass(settings.modalTarget+'-on')) {
id.removeClass(settings.modalTarget+'-on');
id.addClass(settings.modalTarget+'-off');
}

if (id.hasClass(settings.modalTarget+'-off')) {
id.removeClass(settings.animatedIn);
id.addClass(settings.animatedOut);
id.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', afterClose);
};
settings.beforeClose(event); //beforeClose

me.closeModal();
});

function afterClose () {
id.css({'z-index':settings.zIndexOut});
settings.afterClose(); //afterClose
function afterClose (event) {
// make sure it's really the modal that is triggering the close event
if (event.target === event.currentTarget) {
id.css({'z-index':settings.zIndexOut});
settings.afterClose(event); //afterClose
}
}

function afterOpen () {
settings.afterOpen(); //afterOpen
function afterOpen (event) {
settings.afterOpen(event); //afterOpen
}

// it is customary to return "this", but I assigned "this" to "me"
return me;

}; // End animatedModal.js

}(jQuery));
Expand Down
2 changes: 1 addition & 1 deletion animatedModal.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

104 changes: 62 additions & 42 deletions demo/js/animatedModal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
(function ($) {

$.fn.animatedModal = function(options) {
var me = this;
var modal = $(this);

//Defaults
Expand All @@ -29,23 +30,57 @@
animationDuration:'.6s',
overflow:'auto',
// Callbacks
beforeOpen: function() {},
beforeOpen: function(event, callback) {
callback();
},
afterOpen: function() {},
beforeClose: function() {},
afterClose: function() {}

}, options);

me.openModal = function(){
settings.beforeOpen(event, function(){
$('body, html').css({'overflow':'hidden'});
if (id.hasClass(settings.modalTarget+'-off')) {
id.removeClass(settings.animatedOut);
id.removeClass(settings.modalTarget+'-off');
id.addClass(settings.modalTarget+'-on');
}

if (id.hasClass(settings.modalTarget+'-on')) {
id.css({'opacity':settings.opacityIn,'z-index':settings.zIndexIn});
id.addClass(settings.animatedIn);
id.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(event){
afterOpen(event);
});
};
});
}

me.closeModal = function(){
$('body, html').css({'overflow':'initial'});

if (id.hasClass(settings.modalTarget+'-on')) {
id.removeClass(settings.modalTarget+'-on');
id.addClass(settings.modalTarget+'-off');
};

}, options);
if (id.hasClass(settings.modalTarget+'-off')) {
id.removeClass(settings.animatedIn);
id.addClass(settings.animatedOut);
id.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(event){
afterClose(event);
});
};
}

var closeBt = $('.close-'+settings.modalTarget);

//console.log(closeBt)

var href = $(modal).attr('href'),
id = $('body').find('#'+settings.modalTarget),
idConc = '#'+id.attr('id');
//console.log(idConc);

// Default Classes
id.addClass('animated');
id.addClass(settings.modalTarget+'-off');
Expand All @@ -61,63 +96,48 @@
'overflow-y':settings.overflow,
'z-index':settings.zIndexOut,
'opacity':settings.opacityOut,
'-webkit-animation-duration':settings.animationDuration
'-webkit-animation-duration':settings.animationDuration,
'-moz-animation-duration':settings.animationDuration,
'-ms-animation-duration':settings.animationDuration,
'animation-duration':settings.animationDuration
};

//Apply stles
id.css(initStyles);

modal.click(function(event) {
event.preventDefault();
$('body, html').css({'overflow':'hidden'});
if (href == idConc) {
if (id.hasClass(settings.modalTarget+'-off')) {
id.removeClass(settings.animatedOut);
id.removeClass(settings.modalTarget+'-off');
id.addClass(settings.modalTarget+'-on');
}

if (id.hasClass(settings.modalTarget+'-on')) {
settings.beforeOpen();
id.css({'opacity':settings.opacityIn,'z-index':settings.zIndexIn});
id.addClass(settings.animatedIn);
id.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', afterOpen);
};
}
me.openModal();
});



closeBt.click(function(event) {
// update so dynamically created close buttons have click handlers
$('body').on('click', '.close-'+settings.modalTarget, function(event){
event.preventDefault();
$('body, html').css({'overflow':'auto'});

settings.beforeClose(); //beforeClose
if (id.hasClass(settings.modalTarget+'-on')) {
id.removeClass(settings.modalTarget+'-on');
id.addClass(settings.modalTarget+'-off');
}

if (id.hasClass(settings.modalTarget+'-off')) {
id.removeClass(settings.animatedIn);
id.addClass(settings.animatedOut);
id.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', afterClose);
};
settings.beforeClose(event); //beforeClose

me.closeModal();
});

function afterClose () {
id.css({'z-index':settings.zIndexOut});
settings.afterClose(); //afterClose
function afterClose (event) {
// make sure it's really the modal that is triggering the close event
if (event.target === event.currentTarget) {
id.css({'z-index':settings.zIndexOut});
settings.afterClose(event); //afterClose
}
}

function afterOpen () {
settings.afterOpen(); //afterOpen
function afterOpen (event) {
settings.afterOpen(event); //afterOpen
}

// it is customary to return "this", but I assigned "this" to "me"
return me;

}; // End animatedModal.js

}(jQuery));





2 changes: 1 addition & 1 deletion demo/js/animatedModal.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.