spinner.gif @@ -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 changelog.txt @@ -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; modalbox.css @@ -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 }, modalbox.js @@ -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 /> tests/functional/func-modalbox-test.html ccb9d5f25e58efe0e5c6afb037f20ff8d5468dc9 Andrey Okonetchnikov andrej.okonetschnikow@gmail.com http://github.com/okonet/modalbox/commit/a9f8f107cb0be60a5efe2a3742f8d4b328a34760 a9f8f107cb0be60a5efe2a3742f8d4b328a34760 2007-07-13T13:37:18-07:00 2007-07-13T13:37:18-07:00 Options saving fixed; Parameters adjusted; IE resizing fixed; Loading message - spinner added ca3235dceb165fd9bd264f86ba6d77165b6f159c Andrey Okonetchnikov andrej.okonetschnikow@gmail.com