Skip to content

Allow Setting the Modal Id #7

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
imartingraham wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Allow Setting the Modal Id #7

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
f60fe7f
changed simplemodal.js to allow for setting the modal id and the moda…
imartingraham Feb 2, 2012
e3bf615
changed the modal close events to use e.preventDefault() instead of e…
imartingraham Feb 16, 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
2 changes: 1 addition & 1 deletion Demos/assets/javascript/demo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ window.addEvent("domready", function(e){
/* Alert */
$("alert").addEvent("click", function(e){
e.stop();
var SM = new SimpleModal({"btn_ok":"Alert button"});
var SM = new SimpleModal({"modalId" : 'testing-modal', "btn_ok":"Alert button"});
SM.show({
"title":"Alert Modal Title",
"contents":"Lorem ipsum dolor sit amet..."
Expand Down
58 changes: 31 additions & 27 deletions Source/simple-modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,8 @@ var SimpleModal = new Class({
draggable: true,
keyEsc: true,
overlayClick: true,
modalId : 'simple-modal',
modalOverlayId: 'simple-modal-overlay',
closeButton: true, // X close button
hideHeader: false,
hideFooter: false,
Expand All @@ -81,7 +83,7 @@ var SimpleModal = new Class({
//set options
this.setOptions(options);
},

/**
* public method show
* Open Modal
Expand Down Expand Up @@ -178,7 +180,7 @@ var SimpleModal = new Class({
*/
_drawWindow:function(options){
// Add Node in DOM
var node = new Element("div#simple-modal", {"class":"simple-modal"});
var node = new Element("div#"+this.options.modalId, {"class":"simple-modal"});
node.inject( $$("body")[0] );
// Set Contents
var html = this._template(this.options.template, {"_TITLE_":options.title || "Untitled", "_CONTENTS_":options.contents || ""});
Expand Down Expand Up @@ -215,8 +217,9 @@ var SimpleModal = new Class({
* @return
*/
_injectAllButtons: function(){
var $this = this;
this.buttons.each( function(e, i){
e.inject( $("simple-modal").getElement(".simple-modal-footer") );
e.inject( $($this.options.modalId).getElement(".simple-modal-footer") );
});
return;
},
Expand All @@ -228,10 +231,10 @@ var SimpleModal = new Class({
*/
_addCloseButton: function(){
var b = new Element("a", {"class":"close", "href":"#", "html":"x"});
b.inject($("simple-modal"), "top");
b.inject($(this.options.modalId), "top");
// Aggiunge bottome X Close
b.addEvent("click", function(e){
if(e) e.stop();
if(e) e.preventDefault()
this.hide();
}.bind( this ))
return b;
Expand All @@ -246,14 +249,14 @@ var SimpleModal = new Class({
switch( status ) {
case 'show':
this._overlay('hide');
var overlay = new Element("div", {"id":"simple-modal-overlay"});
var overlay = new Element("div", {"id": this.options.modalOverlayId});
overlay.inject( $$("body")[0] );
overlay.setStyle("background-color", this.options.overlayColor);
overlay.fade("hide").fade(this.options.overlayOpacity);
// Behaviour
if( this.options.overlayClick){
overlay.addEvent("click", function(e){
if(e) e.stop();
if(e) e.preventDefault();
this.hide();
}.bind(this))
}
Expand All @@ -272,12 +275,12 @@ var SimpleModal = new Class({

// Remove Overlay
try{
$('simple-modal-overlay').destroy();
$(this.options.modalOverlayId).destroy();
}
catch(err){}
// Remove Modal
try{
$('simple-modal').destroy();
$(this.options.modalId).destroy();
}
catch(err){}
break;
Expand All @@ -292,36 +295,37 @@ var SimpleModal = new Class({
*/
_loadContents: function(param){
// Set Loading
$('simple-modal').addClass("loading");
$(this.options.modalId).addClass("loading");
// Match image file
var re = new RegExp( /([^\/\\]+)\.(jpg|png|gif)$/i );
if( param.url.match(re) ){
// Hide Header/Footer
$('simple-modal').addClass("hide-footer");
$(this.options.modalId).addClass("hide-footer");
// Remove All Event on Overlay
$("simple-modal-overlay").removeEvents(); // Prevent Abort
$(this.options.modalOverlayId).removeEvents(); // Prevent Abort
// Immagine
var images = [param.url];
var $this = this,
images = [param.url];
new Asset.images(images, {
onProgress: function(i) {
immagine = this;
},
onComplete: function() {
try{
// Remove loading
$('simple-modal').removeClass("loading");
$($this.options.modalId).removeClass("loading");
// Imposta dimensioni
var content = $('simple-modal').getElement(".contents");
var content = $($this.options.modalId).getElement(".contents");
var padding = content.getStyle("padding").split(" ");
var width = (immagine.get("width").toInt()) + (padding[1].toInt()+padding[3].toInt())
var height = immagine.get("height").toInt();
// Width
var myFx1 = new Fx.Tween($("simple-modal"), {
var myFx1 = new Fx.Tween($($this.options.modalId), {
duration: 'normal',
transition: 'sine:out',
link: 'cancel',
property: 'width'
}).start($("simple-modal").getCoordinates().width, width);
}).start($($this.options.modalId).getCoordinates().width, width);
// Height
var myFx2 = new Fx.Tween(content, {
duration: 'normal',
Expand All @@ -330,18 +334,18 @@ var SimpleModal = new Class({
property: 'height'
}).start(content.getCoordinates().height, height).chain(function(){
// Inject
immagine.inject( $('simple-modal').getElement(".contents").empty() ).fade("hide").fade("in");
immagine.inject( $($this.options.modalId).getElement(".contents").empty() ).fade("hide").fade("in");
this._display();
// Add Esc Behaviour
this._addEscBehaviour();
}.bind(this));
// Left
var myFx3 = new Fx.Tween($("simple-modal"), {
var myFx3 = new Fx.Tween($($this.options.modalId), {
duration: 'normal',
transition: 'sine:out',
link: 'cancel',
property: 'left'
}).start($("simple-modal").getCoordinates().left, (window.getCoordinates().width - width)/2);
}).start($($this.options.modalId).getCoordinates().left, (window.getCoordinates().width - width)/2);
}catch(err){}
}.bind(this)
});
Expand All @@ -355,8 +359,8 @@ var SimpleModal = new Class({
onRequest: function(){
},
onSuccess: function(responseTree, responseElements, responseHTML, responseJavaScript){
$('simple-modal').removeClass("loading");
$('simple-modal').getElement(".contents").set("html", responseHTML);
$(this.options.modalId).removeClass("loading");
$(this.options.modalId).getElement(".contents").set("html", responseHTML);
param.onRequestComplete();
// Execute script page loaded
eval(responseJavaScript)
Expand All @@ -366,8 +370,8 @@ var SimpleModal = new Class({
this._addEscBehaviour();
}.bind(this),
onFailure: function(){
$('simple-modal').removeClass("loading");
$('simple-modal').getElement(".contents").set("html", "loading failed")
$(this.options.modalId).removeClass("loading");
$(this.options.modalId).getElement(".contents").set("html", "loading failed")
}
}).send();
}
Expand All @@ -381,17 +385,17 @@ var SimpleModal = new Class({
_display: function(){
// Update overlay
try{
$("simple-modal-overlay").setStyles({
$(this.options.modalOverlayId).setStyles({
height: window.getCoordinates().height //$$("body")[0].getScrollSize().y
});
} catch(err){}

// Update position popup
try{
var offsetTop = this.options.offsetTop || 40; //this.options.offsetTop != null ? this.options.offsetTop : window.getScroll().y + 40;
$("simple-modal").setStyles({
$(this.options.modalId).setStyles({
top: offsetTop,
left: ((window.getCoordinates().width - $("simple-modal").getCoordinates().width)/2 )
left: ((window.getCoordinates().width - $(this.options.modalId).getCoordinates().width)/2 )
});
} catch(err){}
return;
Expand Down