Skip to content

Commit 06fac28

Browse files
author
Maik Tizziani
committed
prepares jQuery.msgBox for use with RequireJs
1 parent 8b435ae commit 06fac28

File tree

3 files changed

+315
-0
lines changed

3 files changed

+315
-0
lines changed

‎nbproject/project.properties‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
file.reference.htdocs-jQuery.msgBox=.
2+
files.encoding=UTF-8
3+
site.root.folder=${file.reference.htdocs-jQuery.msgBox}

‎nbproject/project.xml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<project xmlns="http://www.netbeans.org/ns/project/1">
3+
<type>org.netbeans.modules.web.clientproject</type>
4+
<configuration>
5+
<data xmlns="http://www.netbeans.org/ns/clientside-project/1">
6+
<name>jQuery.msgBox</name>
7+
</data>
8+
</configuration>
9+
</project>

‎scripts/jquery.msgBox.require.js‎

Lines changed: 303 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,303 @@
1+
/*
2+
jQuery.msgBox plugin
3+
Version: 0.1.1 (trying to follow http://semver.org/)
4+
Code repository: https://github.com/dotCtor/jQuery.msgBox
5+
6+
Copyright (c) 2011-2013 Halil İbrahim Kalyoncu and Oliver Kopp
7+
All rights reserved.
8+
9+
Redistribution and use in source and binary forms, with or without
10+
modification, are permitted provided that the following conditions are met:
11+
12+
1. Redistributions of source code must retain the above copyright notice, this
13+
list of conditions and the following disclaimer.
14+
2. Redistributions in binary form must reproduce the above copyright notice,
15+
this list of conditions and the following disclaimer in the documentation
16+
and/or other materials provided with the distribution.
17+
18+
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
19+
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
20+
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
21+
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
22+
ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
23+
(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
24+
LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
25+
ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
26+
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
27+
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
28+
29+
*/
30+
31+
/**
32+
* preparing jQuery.msgBox for use with RequireJs
33+
*
34+
* @author Maik Tizziani
35+
* @see https://github.com/mtizziani/jQuery.msgBox
36+
*
37+
* @param {jQuery} jQuery
38+
* @returns {jquery.msgBox}
39+
*/
40+
define(['jquery'], function (jQuery) {
41+
42+
// users may change this variable to fit their needs
43+
var msgBoxImagePath = "images/";
44+
45+
jQuery.msgBox = msg;
46+
function msg(options) {
47+
var isShown = false;
48+
var typeOfValue = typeof options;
49+
var defaults = {
50+
content: (typeOfValue == "string" ? options : "Message"),
51+
title: "Warning",
52+
type: "alert",
53+
autoClose: false,
54+
timeOut: 0,
55+
modal: false,
56+
showButtons: true,
57+
buttons: [{value: "Ok"}],
58+
inputs: [{type: "text", name: "userName", header: "User Name"}, {type: "password", name: "password", header: "Password"}],
59+
success: function (result) {
60+
},
61+
beforeShow: function () {
62+
},
63+
afterShow: function () {
64+
},
65+
beforeClose: function () {
66+
},
67+
afterClose: function () {
68+
},
69+
opacity: 0.1
70+
};
71+
options = typeOfValue == "string" ? defaults : options;
72+
if (options.type != null) {
73+
switch (options.type) {
74+
case "alert":
75+
options.title = options.title == null ? "Warning" : options.title;
76+
break;
77+
case "info":
78+
options.title = options.title == null ? "Information" : options.title;
79+
break;
80+
case "error":
81+
options.title = options.title == null ? "Error" : options.title;
82+
break;
83+
case "confirm":
84+
options.title = options.title == null ? "Confirmation" : options.title;
85+
options.buttons = options.buttons == null ? [{value: "Yes"}, {value: "No"}, {value: "Cancel"}] : options.buttons;
86+
break;
87+
case "prompt":
88+
options.title = options.title == null ? "Log In" : options.title;
89+
options.buttons = options.buttons == null ? [{value: "Login"}, {value: "Cancel"}] : options.buttons;
90+
break;
91+
default:
92+
image = "alert.png";
93+
}
94+
}
95+
options.timeOut = options.timeOut == null ? (options.content == null ? 500 : options.content.length * 70) : options.timeOut;
96+
options = $.extend({}, defaults, options);
97+
if (options.autoClose) {
98+
setTimeout(hide, options.timeOut);
99+
}
100+
var image = "";
101+
switch (options.type) {
102+
case "alert":
103+
image = "alert.png";
104+
break;
105+
case "info":
106+
image = "info.png";
107+
break;
108+
case "error":
109+
image = "error.png";
110+
break;
111+
case "confirm":
112+
image = "confirm.png";
113+
break;
114+
default:
115+
image = "alert.png";
116+
}
117+
118+
var divId = "msgBox" + new Date().getTime();
119+
120+
/* i was testing with ($.browser.msie && parseInt($.browser.version, 10) === 7) but $.browser.msie is not working with jQuery 1.9.0 :S. Alternative method: */
121+
if (navigator.userAgent.match(/msie 7/i) !== null) {
122+
var divMsgBoxContentClass = "msgBoxContentIEOld";
123+
} else {
124+
var divMsgBoxContentClass = "msgBoxContent";
125+
}
126+
127+
var divMsgBoxId = divId;
128+
var divMsgBoxContentId = divId + "Content";
129+
var divMsgBoxImageId = divId + "Image";
130+
var divMsgBoxButtonsId = divId + "Buttons";
131+
var divMsgBoxBackGroundId = divId + "BackGround";
132+
var firstButtonId = divId + "FirstButton";
133+
134+
var buttons = "";
135+
var isFirstButton = true;
136+
$(options.buttons).each(function (index, button) {
137+
var add = "";
138+
if (isFirstButton) {
139+
add = ' id="' + firstButtonId + '"';
140+
isFirstButton = false;
141+
}
142+
buttons += "<input class=\"msgButton\" type=\"button\" name=\"" + button.value + "\" value=\"" + button.value + "\"" + add + "/>";
143+
});
144+
145+
var inputs = "";
146+
$(options.inputs).each(function (index, input) {
147+
var type = input.type;
148+
if (type == "checkbox" || type == "radiobutton") {
149+
inputs += "<div class=\"msgInput\">" +
150+
"<input type=\"" + input.type + "\" name=\"" + input.name + "\" " + (input.checked == null ? "" : "checked ='" + input.checked + "'") + " value=\"" + (typeof input.value == "undefined" ? "" : input.value) + "\" />" +
151+
"<text>" + input.header + "</text>" +
152+
"</div>";
153+
}
154+
else {
155+
inputs += "<div class=\"msgInput\">" +
156+
"<span class=\"msgInputHeader\">" + input.header + "</span>" +
157+
"<input type=\"" + input.type + "\" name=\"" + input.name + "\" value=\"" + (typeof input.value == "undefined" ? "" : input.value) + "\" " +
158+
(typeof input.size !== undefined ? " size='" + input.size + "' " : "") +
159+
(typeof input.maxlength !== undefined ? " maxlength='" + input.maxlength + "' " : "") +
160+
" />" +
161+
"</div>";
162+
}
163+
});
164+
165+
var divBackGround = "<div id=\"" + divMsgBoxBackGroundId + "\" class=\"msgBoxBackGround\"></div>";
166+
var divTitle = "<div class=\"msgBoxTitle\">" + options.title + "</div>";
167+
var divContainer = "<div class=\"msgBoxContainer\"><div id=\"" + divMsgBoxImageId + "\" class=\"msgBoxImage\"><img src=\"" + msgBoxImagePath + image + "\"/></div><div id=\"" + divMsgBoxContentId + "\" class=\"" + divMsgBoxContentClass + "\"><p><span>" + options.content + "</span></p></div></div>";
168+
var divButtons = "<div id=\"" + divMsgBoxButtonsId + "\" class=\"msgBoxButtons\">" + buttons + "</div>";
169+
var divInputs = "<div class=\"msgBoxInputs\">" + inputs + "</div>";
170+
171+
var divMsgBox;
172+
var divMsgBoxContent;
173+
var divMsgBoxImage;
174+
var divMsgBoxButtons;
175+
var divMsgBoxBackGround;
176+
177+
if (options.type == "prompt") {
178+
$("body").append(divBackGround + "<div id=\"" + divMsgBoxId + "\" class=\"msgBox\">" + divTitle + "<div>" + divContainer + (options.showButtons ? divButtons + "</div>" : "</div>") + "</div>");
179+
divMsgBox = $("#" + divMsgBoxId);
180+
divMsgBoxContent = $("#" + divMsgBoxContentId);
181+
divMsgBoxImage = $("#" + divMsgBoxImageId);
182+
divMsgBoxButtons = $("#" + divMsgBoxButtonsId);
183+
divMsgBoxBackGround = $("#" + divMsgBoxBackGroundId);
184+
185+
divMsgBoxImage.remove();
186+
divMsgBoxButtons.css({"text-align": "center", "margin-top": "5px"});
187+
divMsgBoxContent.css({"width": "100%", "height": "100%"});
188+
divMsgBoxContent.html(divInputs);
189+
}
190+
else {
191+
$("body").append(divBackGround + "<div id=\"" + divMsgBoxId + "\" class=\"msgBox\">" + divTitle + "<div>" + divContainer + (options.showButtons ? divButtons + "</div>" : "</div>") + "</div>");
192+
divMsgBox = $("#" + divMsgBoxId);
193+
divMsgBoxContent = $("#" + divMsgBoxContentId);
194+
divMsgBoxImage = $("#" + divMsgBoxImageId);
195+
divMsgBoxButtons = $("#" + divMsgBoxButtonsId);
196+
divMsgBoxBackGround = $("#" + divMsgBoxBackGroundId);
197+
}
198+
divMsgBoxContent.height('auto');
199+
200+
var width = divMsgBox.width();
201+
var height = divMsgBox.height();
202+
var windowHeight = $(window).height();
203+
var windowWidth = $(window).width();
204+
205+
var top = windowHeight / 2 - height / 2;
206+
var left = windowWidth / 2 - width / 2;
207+
208+
show();
209+
210+
function show() {
211+
if (isShown) {
212+
return;
213+
}
214+
divMsgBox.css({opacity: 0, top: top - 50, left: left});
215+
divMsgBox.css("background-image", "url('" + msgBoxImagePath + "msgBoxBackGround.png')");
216+
divMsgBoxBackGround.css({opacity: options.opacity});
217+
options.beforeShow();
218+
divMsgBoxBackGround.css({"width": $(document).width(), "height": getDocHeight()});
219+
$(divMsgBoxId + "," + divMsgBoxBackGroundId).fadeIn(0);
220+
divMsgBox.animate({opacity: 1, "top": top, "left": left}, 200);
221+
setTimeout(options.afterShow, 200);
222+
$("#" + firstButtonId).focus();
223+
isShown = true;
224+
$(window).bind("resize", function (e) {
225+
var width = divMsgBox.width();
226+
var height = divMsgBox.height();
227+
var windowHeight = $(window).height();
228+
var windowWidth = $(window).width();
229+
230+
var top = windowHeight / 2 - height / 2;
231+
var left = windowWidth / 2 - width / 2;
232+
233+
divMsgBox.css({"top": top, "left": left});
234+
divMsgBoxBackGround.css({"width": "100%", "height": "100%"});
235+
});
236+
}
237+
238+
function hide() {
239+
if (!isShown) {
240+
return;
241+
}
242+
options.beforeClose();
243+
divMsgBox.animate({opacity: 0, "top": top - 50, "left": left}, 200);
244+
divMsgBoxBackGround.fadeOut(300);
245+
setTimeout(function () {
246+
divMsgBox.remove();
247+
divMsgBoxBackGround.remove();
248+
}, 300);
249+
setTimeout(options.afterClose, 300);
250+
$(window).unbind("resize");
251+
isShown = false;
252+
}
253+
254+
function getDocHeight() {
255+
var D = document;
256+
return Math.max(
257+
Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
258+
Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
259+
Math.max(D.body.clientHeight, D.documentElement.clientHeight));
260+
}
261+
262+
function getFocus() {
263+
divMsgBox.fadeOut(200).fadeIn(200);
264+
}
265+
266+
$("input.msgButton").click(function (e) {
267+
e.preventDefault();
268+
var value = $(this).val();
269+
if (options.type != "prompt") {
270+
options.success(value);
271+
}
272+
else {
273+
var inputValues = [];
274+
$("div.msgInput input").each(function (index, domEle) {
275+
var name = $(this).attr("name");
276+
var value = $(this).val();
277+
var type = $(this).attr("type");
278+
if (type == "checkbox" || type == "radiobutton") {
279+
inputValues.push({name: name, value: value, checked: $(this).attr("checked")});
280+
}
281+
else {
282+
inputValues.push({name: name, value: value});
283+
}
284+
});
285+
options.success(value, inputValues);
286+
}
287+
hide();
288+
});
289+
290+
divMsgBoxBackGround.click(function (e) {
291+
if (options.modal)
292+
return;
293+
if (!options.showButtons || (options.showButtons && options.buttons.length < 2) || options.autoClose) {
294+
hide();
295+
}
296+
else {
297+
getFocus();
298+
}
299+
});
300+
}
301+
;
302+
return jQuery.msgBox;
303+
});

0 commit comments

Comments
 (0)