Notify Js
Notify Js
var positions = {
t: "top",
m: "middle",
b: "bottom",
l: "left",
c: "center",
r: "right"
};
var hAligns = ["l", "c", "r"];
var vAligns = ["t", "m", "b"];
var mainPositions = ["t", "b", "l", "r"];
var opposites = {
t: "b",
m: null,
b: "t",
l: "r",
c: null,
r: "l"
};
var coreStyle = {
name: "core",
html: "<div class=\"" + pluginClassName + "-wrapper\">\n <div
class=\"" + pluginClassName + "-arrow\"></div>\n <div class=\"" +
pluginClassName + "-container\"></div>\n</div>",
css: "." + pluginClassName + "-corner {\n position: fixed;\n
margin: 5px;\n z-index: 1050;\n}\n\n." + pluginClassName + "-corner ." +
pluginClassName + "-wrapper,\n." + pluginClassName + "-corner ." + pluginClassName
+ "-container {\n position: relative;\n display: block;\n height: inherit;\n
width: inherit;\n margin: 3px;\n}\n\n." + pluginClassName + "-wrapper {\n
z-index: 1;\n position: absolute;\n display: inline-block;\n
height: 0;\n width: 0;\n}\n\n." + pluginClassName + "-container {\n
display: none;\n z-index: 1;\n position: absolute;\n}\n\n." +
pluginClassName + "-hidable {\n cursor: pointer;\n}\n\n[data-notify-text],
[data-notify-html] {\n position: relative;\n}\n\n." + pluginClassName + "-arrow
{\n position: absolute;\n z-index: 2;\n width: 0;\n height: 0;\n}"
};
var stylePrefixes = {
"border-radius": ["-webkit-", "-moz-"]
};
var pluginOptions = {
clickToHide: true,
autoHide: true,
autoHideDelay: 5000,
arrowShow: true,
arrowSize: 5,
breakNewLines: true,
elementPosition: "bottom",
globalPosition: "top right",
style: "bootstrap",
className: "error",
showAnimation: "slideDown",
showDuration: 400,
hideAnimation: "slideUp",
hideDuration: 200,
gap: 5
};
Notification.prototype.loadHTML = function() {
var style;
style = this.getStyle();
this.userContainer = $(style.html);
this.userFields = style.fields;
};
Notification.prototype.setGlobalPosition = function() {
var p = this.getPosition();
var pMain = p[0];
var pAlign = p[1];
var main = positions[pMain];
var align = positions[pAlign];
var key = pMain + "|" + pAlign;
var anchor = globalAnchors[key];
if (!anchor || !document.body.contains(anchor[0])) {
anchor = globalAnchors[key] = createElem("div");
var css = {};
css[main] = 0;
if (align === "middle") {
css.top = '45%';
} else if (align === "center") {
css.left = '45%';
} else {
css[align] = 0;
}
anchor.css(css).addClass(pluginClassName + "-corner");
$("body").append(anchor);
}
return anchor.prepend(this.wrapper);
};
Notification.prototype.setElementPosition = function() {
var arrowColor, arrowCss, arrowSize, color, contH, contW, css, elemH,
elemIH, elemIW, elemPos, elemW, gap, j, k, len, len1, mainFull, margin, opp,
oppFull, pAlign, pArrow, pMain, pos, posFull, position, ref, wrapPos;
position = this.getPosition();
pMain = position[0];
pAlign = position[1];
pArrow = position[2];
elemPos = this.elem.position();
elemH = this.elem.outerHeight();
elemW = this.elem.outerWidth();
elemIH = this.elem.innerHeight();
elemIW = this.elem.innerWidth();
wrapPos = this.wrapper.position();
contH = this.container.height();
contW = this.container.width();
mainFull = positions[pMain];
opp = opposites[pMain];
oppFull = positions[opp];
css = {};
css[oppFull] = pMain === "b" ? elemH : pMain === "r" ? elemW : 0;
incr(css, "top", elemPos.top - wrapPos.top);
incr(css, "left", elemPos.left - wrapPos.left);
ref = ["top", "left"];
for (j = 0, len = ref.length; j < len; j++) {
pos = ref[j];
margin = parseInt(this.elem.css("margin-" + pos), 10);
if (margin) {
incr(css, pos, margin);
}
}
gap = Math.max(0, this.options.gap - (this.options.arrowShow ?
arrowSize : 0));
incr(css, oppFull, gap);
if (!this.options.arrowShow) {
this.arrow.hide();
} else {
arrowSize = this.options.arrowSize;
arrowCss = $.extend({}, css);
arrowColor = this.userContainer.css("border-color") ||
this.userContainer.css("border-top-color") || this.userContainer.css("background-
color") || "white";
for (k = 0, len1 = mainPositions.length; k < len1; k++) {
pos = mainPositions[k];
posFull = positions[pos];
if (pos === opp) {
continue;
}
color = posFull === mainFull ? arrowColor : "transparent";
arrowCss["border-" + posFull] = arrowSize + "px solid " +
color;
}
incr(css, positions[opp], arrowSize);
if (indexOf.call(mainPositions, pAlign) >= 0) {
incr(arrowCss, positions[pAlign], arrowSize * 2);
}
}
if (indexOf.call(vAligns, pMain) >= 0) {
incr(css, "left", realign(pAlign, contW, elemW));
if (arrowCss) {
incr(arrowCss, "left", realign(pAlign, arrowSize, elemIW));
}
} else if (indexOf.call(hAligns, pMain) >= 0) {
incr(css, "top", realign(pAlign, contH, elemH));
if (arrowCss) {
incr(arrowCss, "top", realign(pAlign, arrowSize, elemIH));
}
}
if (this.container.is(":visible")) {
css.display = "block";
}
this.container.removeAttr("style").css(css);
if (arrowCss) {
return this.arrow.removeAttr("style").css(arrowCss);
}
};
Notification.prototype.getPosition = function() {
var pos, ref, ref1, ref2, ref3, ref4, ref5, text;
text = this.options.position || (this.elem ?
this.options.elementPosition : this.options.globalPosition);
pos = parsePosition(text);
if (pos.length === 0) {
pos[0] = "b";
}
if (ref = pos[0], indexOf.call(mainPositions, ref) < 0) {
throw "Must be one of [" + mainPositions + "]";
}
if (pos.length === 1 || ((ref1 = pos[0], indexOf.call(vAligns, ref1) >=
0) && (ref2 = pos[1], indexOf.call(hAligns, ref2) < 0)) || ((ref3 = pos[0],
indexOf.call(hAligns, ref3) >= 0) && (ref4 = pos[1], indexOf.call(vAligns, ref4) <
0))) {
pos[1] = (ref5 = pos[0], indexOf.call(hAligns, ref5) >= 0) ?
"m" : "l";
}
if (pos.length === 2) {
pos[2] = pos[1];
}
return pos;
};
Notification.prototype.getStyle = function(name) {
var style;
if (!name) {
name = this.options.style;
}
if (!name) {
name = "default";
}
style = styles[name];
if (!style) {
throw "Missing style: " + name;
}
return style;
};
Notification.prototype.updateClasses = function() {
var classes, style;
classes = ["base"];
if ($.isArray(this.options.className)) {
classes = classes.concat(this.options.className);
} else if (this.options.className) {
classes.push(this.options.className);
}
style = this.getStyle();
classes = $.map(classes, function(n) {
return pluginClassName + "-" + style.name + "-" + n;
}).join(" ");
return this.userContainer.attr("class", classes);
};
Notification.prototype.destroy = function() {
this.wrapper.data(pluginClassName, null);
this.wrapper.remove();
};
$.extend($[pluginName], {
defaults: defaults,
addStyle: addStyle,
removeStyle: removeStyle,
pluginOptions: pluginOptions,
getStyle: getStyle,
insertCSS: insertCSS
});
$(function() {
insertCSS(coreStyle.css).attr("id", "core-notify");
$(document).on("click", "." + pluginClassName + "-hidable", function(e)
{
$(this).trigger("notify-hide");
});
$(document).on("notify-hide", "." + pluginClassName + "-wrapper",
function(e) {
var elem = $(this).data(pluginClassName);
if(elem) {
elem.show(false);
}
});
});
}));