Permalink
Browse files

Options saving fixed; Parameters adjusted; IE resizing fixed; Loading…

… message - spinner added
  • Loading branch information...
1 parent ccb9d5f commit a9f8f107cb0be60a5efe2a3742f8d4b328a34760 @okonet committed Jul 13, 2007
Showing with 35 additions and 15 deletions.
  1. +1 −1 changelog.txt
  2. +6 −0 modalbox.css
  3. +22 −8 modalbox.js
  4. BIN spinner.gif
  5. +6 −6 tests/functional/func-modalbox-test.html
View
@@ -3,7 +3,7 @@ CHANGELOG:
ver 1.5.4 (07/13/2007)
Added: ModalBox now accepts HTML (plain & object) as a content parameter [issue #21]
Fixed: PageUp/Down/Home/End buttons doesn't work on input elements [issue #58]
- Changed: Options saves between sequences of windows
+ Changed: Options saves between sequences of windows. [was buggy. now fixed]
Changed: Title made not mandatory parameter and moved to options. !!! IMPORTANT: Changed APIs !!! [issue #83]
Changed: Changelog separated from the source code
View
@@ -58,6 +58,12 @@
background:transparent;
}
+#MB_loading {
+ padding: 1.5em;
+ text-indent: -10000px;
+ background: url(spinner.gif) 50% 0 no-repeat;
+}
+
/* Color scheme */
#MB_window {
border-color:#DEE0E5;
View
@@ -16,17 +16,18 @@ Modalbox.Methods = {
options: {
title: "ModalBox Window", // Title of the ModalBox window
overlayClose: true, // Close modal box by clicking on overlay
- width: 400, // Default width in px
- height: 400, // Default height in px
+ width: 500, // Default width in px
+ height: 90, // Default height in px
overlayDuration: .50, // Default overlay fade in/out duration in seconds
slideDownDuration: .75, // Default Modalbox appear slide down effect in seconds
slideUpDuration: .35, // Default Modalbox hiding slide up effect in seconds
- resizeDuration: .50, // Default resize duration seconds
+ resizeDuration: .35, // Default resize duration seconds
loadingString: "Please wait. Loading...", // Default loading string message
closeString: "Close window", // Default title attribute for close window link
params: {},
method: 'get' // Default Ajax request method
},
+ _options: new Object,
setOptions: function(options) {
Object.extend(this.options, options || {});
@@ -68,7 +69,10 @@ Modalbox.Methods = {
show: function(content, options) {
this.content = content;
+
+ Object.extend(this._options, this.options); // Setting up original options with default options
this.setOptions(options);
+
if(!this.isInitialized) this._init(options); // Check for is already initialized
Element.update(this.MBcaption, this.options.title); // Updating title of the MB
@@ -184,18 +188,27 @@ Modalbox.Methods = {
Element.extend(this.MBcontent);
this.MBcontent.update("");
if(typeof content == 'string') {
- Element.update(this.MBcontent, content);
+ //this.MBcontent.hide()
+ //if(console.log){console.log(this.MBcontent.getHeight())};
+ this.MBcontent.hide().update(content);
+ //if(console.log){console.log(this.MBcontent.getHeight())};
+ //this.MBcontent.show();
}
else if (typeof this.content == 'object') { // HTML Object is given
var _htmlObj = content.cloneNode(true); // If node already a part of DOM we'll clone it
_htmlObj.id = "MB_" + _htmlObj.id; // Modifying element ID to prevent duplicate IDs
- this.MBcontent.appendChild(_htmlObj);
+ this.MBcontent.hide().appendChild(_htmlObj);
this.MBcontent.down().show(); // Toggle visibility for hidden nodes
}
// Prepare content
- this.focusableElements = this._findFocusableElements();
- this._moveFocus(); // Setting focus on first 'focusable' element in content (input, select, textarea, link or button)
- this.event("afterLoad"); // Passing callback
+ Modalbox.resize(0, this.MBcontent.getHeight() - Element.getHeight(this.MBwindow) + Element.getHeight(this.MBheader), {
+ afterResize: function(){
+ this.MBcontent.show();
+ this.focusableElements = this._findFocusableElements();
+ this._moveFocus(); // Setting focus on first 'focusable' element in content (input, select, textarea, link or button)
+ this.event("afterLoad"); // Passing callback
+ }.bind(this)
+ });
},
_loadAfterResize: function() {
@@ -274,6 +287,7 @@ Modalbox.Methods = {
}
Element.remove(this.MBoverlay);
Element.remove(this.MBwindow);
+ this.setOptions(this._options); //Settings options object into intial state
this.isInitialized = false;
this.event("afterHide"); // Passing afterHide callback
},
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -25,12 +25,12 @@
<h1>ModalBox Functional Test</h1>
<ul>
- <li><a href="_ajax_js.html" title="Modalbox JS passing test" onclick="Modalbox.show(this.href, {title: this.title, width: 500, height: 200, afterLoad: function(){ passValue('Current document') } }); return false;">Modalbox JS passing test</a></li>
- <li><a href="_ajax_form.html" title="Modalbox Prevent Scroll Test" onclick="Modalbox.show(this.href, {title: this.title, width: 500, height: 400, overlayClose: false}); return false;">Modalbox Prevent Scroll Test</a></li>
- <li><a href="#" title="Modalbox without Ajax Test" onclick="Modalbox.show(Builder.build('<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h1>'), {title: this.title, width: 500, height: 400}); return false;">Modalbox without Ajax Builder Test</a></li>
- <li><a href="#" title="Modalbox without Ajax plain HTML test" onclick="Modalbox.show('<h1>HTML Header</h1><input type=\'button\' value=\'Button\' onclick=\'alert(1)\' />', {title: this.title, width: 500, height: 200 }); return false;">Modalbox without Ajax plain HTML test</a></li>
- <li><a href="#" title="Modalbox without Ajax by element ID test" onclick="Modalbox.show($('testContent'), {title: this.title, width: 500, height: 200 }); return false;">Modalbox without Ajax by element ID test</a></li>
- <li><a href="#" title="Modalbox wrong parameter test" onclick="Modalbox.show(123, {title: this.title, width: 500, height: 200 }); return false;">Modalbox wrong parameter test</a></li>
+ <li><a href="_ajax_js.html" title="Modalbox JS passing test" onclick="Modalbox.show(this.href, {title: this.title, width: 300, afterLoad: function(){ passValue('Current document') } }); return false;">Modalbox JS passing test</a></li>
+ <li><a href="_ajax_form.html" title="Modalbox Prevent Scroll Test" onclick="Modalbox.show(this.href, {title: this.title, overlayClose: false}); return false;">Modalbox Prevent Scroll Test</a></li>
+ <li><a href="#" title="Modalbox without Ajax Test" onclick="Modalbox.show(Builder.build('<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>'), {title: this.title}); return false;">Modalbox without Ajax Builder Test</a></li>
+ <li><a href="#" title="Modalbox without Ajax plain HTML test" onclick="Modalbox.show('<h1>HTML Header</h1><input type=\'button\' value=\'Button\' onclick=\'alert(1)\' />', {title: this.title }); return false;">Modalbox without Ajax plain HTML test</a></li>
+ <li><a href="#" title="Modalbox without Ajax by element ID test" onclick="Modalbox.show($('testContent'), {title: this.title }); return false;">Modalbox without Ajax by element ID test</a></li>
+ <li><a href="#" title="Modalbox wrong parameter test" onclick="Modalbox.show(123, {title: this.title }); return false;">Modalbox wrong parameter test</a></li>
</ul>
<br />

0 comments on commit a9f8f10

Please sign in to comment.