Skip to content

Commit

Permalink
Fixed some bugs
Browse files Browse the repository at this point in the history 
1. the resize handler moving with the scroll bar of the container
2. add an option padding to set the padding of the content according to
differnt types
3. fixed when the onOpen callback called
  • Loading branch information
@pwwang
pwwang committed Jan 20, 2014
1 parent 40d3e63 commit 0bd6225
Show file tree
Hide file tree
Showing 5 changed files with 118 additions and 46 deletions.
11 changes: 10 additions & 1 deletion doc.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -290,7 +290,7 @@ <h2>Full settings</h2>
<td class="type">string</td>
<td class="value">'html'</td>
<td>The type of msgbox</td>
<td>Supported types: <font>text, ajax, html, iframe, confirm, alert, prompt, warning, info=alert, error, success, photo, image=photo, album, gallery=album</font></td>
<td>Supported types: <font>text, ajax, html, iframe, confirm, alert, prompt, warning, info, error, success, photo, image=photo, album, gallery=album</font></td>
</tr>
<tr>
<td class="key">content</td>
Expand Down Expand Up @@ -462,6 +462,15 @@ <h2>Full settings</h2>
<td>1. the width of msgbox when minimized
2. the minimal width when resize msgbox</td>
</tr>
<tr>
<td class="key">padding</td>
<td class="type">number</td>
<td class="value">0</td>
<td>The padding of the content</td>
<td>Sometimes you need a padding of the content, e.g.: for text type or html type. However, you don't need them for photos in most cases.
CSS cannot differentiate the types, so you can define them here. Remember to use !important to override if you'd like to define it in CSS.
</td>
</tr>
<tr>
<td class="key">photoAuto</td>
<td class="type">boolean</td>
Expand Down
5 changes: 3 additions & 2 deletions examples/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,8 @@ <h3 class="title">Basic usage</h3>
<pre class="code">
$(".msgbox.defaultmsg").msgbox({});
$(".msgbox.basic").msgbox({
content: 'Hello world'
content: 'Hello world',
padding: 12
});
</pre>
<div class="trigger">
Expand All @@ -80,7 +81,7 @@ <h3 class="title">Basic usage</h3>
</div>

<div class="wrap">
<h3 class="title">Alert/Info=Alert/Warning/Error/Success</h3>
<h3 class="title">Alert/Info/Warning/Error/Success</h3>
<div class="comment">These are shortcuts. You can add different style width selector .jMsgbox-alert .jMsgbox-loaded <br />
To replace window.alert width jquery.msgbox alert shortcut: <br />
<pre>
Expand Down
62 changes: 54 additions & 8 deletions examples/sub.html
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,54 @@
<html>
<head>
<title>Sub Page</title>
</head>
<body style="padding:12px; background-color:#fef;">
This is from another page: sub.html
</body>
</html>
<p>
This is from another page: sub.html
</p>
<p>
This is from another page: sub.html
</p>
<p>
This is from another page: sub.html
</p>
<p>
This is from another page: sub.html
</p>
<p>
This is from another page: sub.html
</p>
<p>
This is from another page: sub.html
</p>
<p>
This is from another page: sub.html
</p>
<p>
This is from another page: sub.html
</p>
<p>
This is from another page: sub.html
</p>
<p>
This is from another page: sub.html
</p>
<p>
This is from another page: sub.html
</p>
<p>
This is from another page: sub.html
</p>
<p>
This is from another page: sub.html
</p>
<p>
This is from another page: sub.html
</p>
<p>
This is from another page: sub.html
</p>
<p>
This is from another page: sub.html
</p>
<p>
This is from another page: sub.html
</p>
<p>
This is from another page: sub.html
</p>
84 changes: 50 additions & 34 deletions jquery.msgbox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,8 @@
photoScaled: false, // whether to scale the photo the scale of (options.width, options.height)
photoFade: 500, // whether to use fade transition to show photos, false, or a miniseconds

padding: 0, // the padding of the content

imgError: 'Failed to load image.', // the error message when loading image
xhrError: 'Failed to load URL.', // the error message when using ajax
// these will be overrided by $.msgboxI18N.en.imgError
Expand Down Expand Up @@ -366,26 +368,38 @@

// content
this.$content = createElement('div', this.options.prefix + '-content', {
overflow: $.inArray(this.options.type, ['photo', 'image', 'album', 'gallery']) == -1 ? 'auto' : 'hidden',
overflow: 'hidden',
position: 'relative'
});

// prompt
this.$prompt = createElement('input', this.options.prefix + '-prompt', {}, {
this.$prompt = createElement('input', this.options.prefix + '-prompt-input', {}, {
type: 'text'
});

this.$loaded = createElement('div', this.options.prefix + '-loaded', {
padding: this.options.padding,
width: '100%',
height: '100%',
overflow: $.inArray(this.options.type, ['photo', 'image', 'album', 'gallery']) == -1 ? 'auto' : 'hidden'
});

this.$loading = createElement('div', this.options.prefix + '-loading', {
height: '100%',
width: '100%'
});
},

// append the element to DOM
_append: function () {
if (this.options.overlay) $(document.body).append(this.$overlay);
$(document.body).append(this.$wrap.append(this.$title.append(this.$controls), this.$content));
$(document.body).append(this.$wrap.append(this.$title.append(this.$controls), this.$content.append(this.$loaded)));
if (this.options.buttons !== null && this.options.buttons.length > 0) {
this.$foot.appendTo(this.$wrap);
if (this.options.resize) this.$resize.appendTo(this.$foot);
} else {
if (this.options.resize) this.$resize.appendTo(this.$content);
}
}
},

_bindEvents: function () {
Expand Down Expand Up @@ -527,14 +541,14 @@

var that = this;
// purge
this.$content.contents().filter(function(){
return this.nodeType == 3 || (!$(this).is(that.$img) && !$(this).is(that.$resize));
}).remove();
//this.$content.contents().filter(function(){
// return this.nodeType == 3 || (!$(this).is(that.$img) && !$(this).is(that.$resize));
//}).remove();

this.$loading = createElement('div', this.options.prefix + '-loading', {
height: '100%',
width: '100%'
}).appendTo(this.$content);
}).appendTo(this.$loaded);

if (!this.titleSpecified) this.title ($handler.attr('title'));

Expand Down Expand Up @@ -585,7 +599,7 @@
that.$img.attr(val, attr);
});

this.$img.hide().appendTo(this.$content)
this.$img.hide().appendTo(this.$loaded)
.error(function(){
that.$loading.remove();
that.$loading = undefined;
Expand All @@ -604,20 +618,22 @@

_load: function (callback) {
if (this.loaded) return;
this.$loaded = createElement('div', this.options.prefix + '-loaded');


switch (this.options.type) {
case 'text':
this.$loaded.text(this.options.content).appendTo(this.$content);
this.$loaded.text(this.options.content);
this.loaded = true;
if (callback) callback.apply(this);
if (this.options.onLoad) this.options.onLoad.apply(this);
break;

case 'html':
case 'confirm':
var content = $.type(this.options.content)==='object' ? this.options.content.show() : this.options.content;
this.$loaded.html(content).appendTo(this.$content);
var content = $.type(this.options.content)==='object'
? this.options.content.show()
: this.options.content;

this.$loaded.append(content);
this.loaded = true;
if (callback) callback.apply(this);
if (this.options.onLoad) this.options.onLoad.apply(this);
Expand All @@ -628,16 +644,28 @@
case 'info':
case 'error':
case 'success':
this.$loaded.html(this.options.content).appendTo(this.$content.addClass(this.options.prefix + '-' + this.options.type));
case 'confirm':
var content = $.type(this.options.content)==='object'
? this.options.content.show()
: this.options.content;

this.$loaded.append(content).addClass(
this.options.prefix + '-shortcut '
+ this.options.prefix + '-' + this.options.type);
this.loaded = true;
if (callback) callback.apply(this);
if (this.options.onLoad) this.options.onLoad.apply(this);
break;

case 'prompt':
this.$loaded.html(this.options.content)
.append(this.$prompt)
.appendTo(this.$content);
var content = $.type(this.options.content)==='object'
? this.options.content.show()
: this.options.content;

this.$loaded.append(content).append(this.$prompt).addClass(
this.options.prefix + '-shortcut '
+ this.options.prefix + '-' + this.options.type);

this.loaded = true;
if (callback) callback.apply(this);
if (this.options.onLoad) this.options.onLoad.apply(this);
Expand Down Expand Up @@ -708,7 +736,7 @@
marginwidth: '0px',
scrolling: 'auto',
src: this.options.content
}).appendTo(that.$content).one('load', function() {
}).appendTo(that.$loaded).one('load', function() {
$loading.remove();
that.$iframe.show();
if (!that.options.title) {
Expand Down Expand Up @@ -1037,13 +1065,12 @@
};
}

if (this.options.onOpen) this.options.onOpen.apply(this);


var that = this;
var rightAfterOpen = function () {
that.opened = true;
$.msgbox._focused = that;
if (that.options.onOpen) that.options.onOpen.apply(that);
if (callback) callback.apply(that);
};
var mayPlayAlbum = function () {
Expand Down Expand Up @@ -1244,20 +1271,9 @@
content: function (ctt) {
var that = this;
if (ctt === undefined) {
return this.$content.has(this.$loaded).length
? this.$loaded.html()
: this.$content.contents().filter(function(){
return !$(this).is(that.$resize);
}).html();
return this.$loaded.html();
} else {
if (this.$content.has(this.$loaded).length) {
this.$loaded.html(ctt);
} else {
this.$content.contents().filter(function(){
return !$(this).is(that.$resize) && !$(this).is(that.$img);
}).remove();
this.$content.prepend(ctt);
}
this.$loaded.html(ctt);
}
return true;
}
Expand Down
2 changes: 1 addition & 1 deletion jquery.msgbox.min.js
View file

Large diffs are not rendered by default.

0 comments on commit 0bd6225

Please sign in to comment.