/** Notify.js - v0.0.1 - 2013/04/04 * http://notifyjs.com/ * Copyright (c) 2013 Jaime Pillora - MIT */ (function(window,document,undefined) { 'use strict'; var Notification, Options, arrowDirs, className, cornerElem, create, getAnchorElement, pluginName, pluginOptions, styles; pluginName = 'notify'; className = '__' + pluginName; arrowDirs = { top: 'bottom', bottom: 'top', left: 'right', right: 'left' }; styles = { core: { html: "
\n
\n
\n
", css: "." + className + "Corner {\n position: fixed;\n top: 0;\n right: 0;\n margin: 5px;\n z-index: 1050;\n}\n\n." + className + "Corner ." + className + "Wrapper,\n." + className + "Corner ." + className + "Container {\n position: relative;\n display: block;\n height: inherit;\n width: inherit;\n\n}\n\n." + className + "Wrapper {\n z-index: 1;\n position: absolute;\n display: inline-block;\n height: 0;\n width: 0;\n opacity: 0.85;\n}\n\n." + className + "Container {\n display: none;\n z-index: 1;\n position: absolute;\n cursor: pointer;\n}\n\n." + className + "Text {\n position: relative;\n}" }, user: { "default": { html: "
\n \n
", css: "." + className + "Default {\n background: #fff;\n font-size: 11px;\n box-shadow: 0 0 6px #000;\n -moz-box-shadow: 0 0 6px #000;\n -webkit-box-shadow: 0 0 6px #000;\n padding: 4px 10px 4px 8px;\n border-radius: 6px;\n border-style: solid;\n border-width: 2px;\n -moz-border-radius: 6px;\n -webkit-border-radius: 6px;\n white-space: nowrap;\n}" }, bootstrap: { html: "
\n Warning! \n
", css: "." + className + "Bootstrap {\n white-space: nowrap;\n}", colors: { red: '#eed3d7' } } } }; pluginOptions = { autoHide: false, autoHideDelay: 2000, arrowShow: true, arrowSize: 5, arrowPosition: 'top', style: 'default', color: 'red', colors: { red: '#b94a48', green: '#33be40', black: '#393939', blue: '#00f' }, showAnimation: 'slideDown', showDuration: 200, hideAnimation: 'slideUp', hideDuration: 600, gap: 2 }; create = function(tag) { return $(document.createElement(tag)); }; Options = function(options) { return $.extend(this, options); }; Options.prototype = pluginOptions; cornerElem = create("div").addClass("" + className + "Corner"); getAnchorElement = function(element) { var fBefore, radios; if (element.is('[type=radio]')) { radios = element.parents('form:first').find('[type=radio]').filter(function(i, e) { return $(e).attr('name') === element.attr('name'); }); element = radios.first(); } fBefore = element.prev(); if (fBefore.is('span.styled,span.OBS_checkbox')) { element = fBefore; } return element; }; Notification = (function() { function Notification(elem, data, options) { if ($.type(options) === 'string') { options = { color: options }; } this.options = new Options($.isPlainObject(options) ? options : {}); this.loadCSS(); this.loadHTML(); this.wrapper = $(styles.core.html); this.wrapper.data(pluginName, this); this.container = this.wrapper.find("." + className + "Container"); this.container.append(this.userContainer); if (elem && elem.length) { this.elementType = elem.attr('type'); this.originalElement = elem; this.elem = getAnchorElement(elem); this.elem.data(pluginName, this); this.elem.before(this.wrapper); this.container.css(this.calculateCSS()); } else { this.options.arrowShow = false; cornerElem.prepend(this.wrapper); } this.container.hide(); this.run(data); } Notification.prototype.loadCSS = function(style) { var elem, name; name = this.options.style; style = this.getStyle(name); elem = style.cssElem; if (elem) { return elem.html(style.css); } else { elem = create("style").attr('id', "" + name + "-styles").html(style.css); $("head").append(elem); return style.cssElem = elem; } }; Notification.prototype.loadHTML = function(style) { style = this.getStyle(name); this.userContainer = $(style.html); this.text = this.userContainer.find('[data-notify=text]'); if (this.text.length === 0) { throw "style: " + name + " HTML is missing the: data-notify='text' attribute"; } return this.text.addClass("" + className + "Text"); }; Notification.prototype.buildArrow = function() { var alt, d, dir, showArrow, size; dir = this.options.arrowPosition; size = this.options.arrowSize; alt = arrowDirs[dir]; this.arrow = create("div"); this.arrow.addClass(className + 'Arrow').css({ 'margin-top': 2 + (document.documentMode === 5 ? size * -4 : 0), 'position': 'relative', 'z-index': '2', 'margin-left': 10, 'width': 0, 'height': 0 }).css('border-' + alt, size + 'px solid ' + this.getColor()); for (d in arrowDirs) { if (d !== dir && d !== alt) { this.arrow.css('border-' + d, size + 'px solid transparent'); } } showArrow = this.options.arrowShow && this.elementType !== 'radio'; if (showArrow) { return this.arrow.show(); } else { return this.arrow.hide(); } }; Notification.prototype.show = function(show) { var hidden; hidden = this.container.parent().parents(':hidden').length > 0; if (hidden && show) { this.container.show(); } if (hidden && !show) { this.container.hide(); } if (!hidden && show) { this.container[this.options.showAnimation](this.options.showDuration); } if (!hidden && !show) { return this.container[this.options.hideAnimation](this.options.hideDuration); } }; Notification.prototype.calculateCSS = function() { var elementPosition, height, left, mainPosition; elementPosition = this.elem.position(); mainPosition = this.container.parent().position(); height = this.elem.outerHeight(); left = elementPosition.left - mainPosition.left; if (!navigator.userAgent.match(/MSIE/)) { height += elementPosition.top - mainPosition.top; } return { top: height + this.options.gap, left: left }; }; Notification.prototype.getColor = function() { var styleColors; styleColors = this.getStyle().colors; return (styleColors && styleColors[this.options.color]) || this.options.colors[this.options.color] || this.options.color; }; Notification.prototype.getStyle = function(name) { var style; if (!name) { name = this.options.style; } style = styles.user[name]; if (!style) { throw "Missing style: " + name; } return style; }; Notification.prototype.run = function(data, options) { var autohideTimer, color, _this = this; if ($.isPlainObject(options)) { $.extend(this.options, options); } else if ($.type(options) === 'string') { this.options.color = options; } if (this.container && !data) { this.show(false); return; } else if (!this.container && !data) { return; } if ($.type(data) === 'string') { this.text.html(data.replace('\n', '
')); } else { this.text.empty().append(data); } color = this.getColor(); this.container.find('[data-notify-style]').each(function() { var s; s = $(this).attr('data-notify-style'); return $(this).attr('style', s.replace(/\{\{\s*color\s*\}\}/ig, color)); }); if (this.arrow) { this.arrow.remove(); } this.buildArrow(); this.container.prepend(this.arrow); this.show(true); if (this.options.autoHide) { clearTimeout(this.autohideTimer); return autohideTimer = setTimeout(function() { return _this.show(false); }, this.options.autoHideDelay); } }; return Notification; })(); $(function() { $("body").append(cornerElem); $("link").each(function() { var src; src = $(this).attr('href'); if (src.match(/bootstrap[^\/]*\.css/)) { $[pluginName].options({ style: 'bootstrap' }); return false; } }); $("head").append(create("style").html(styles.core.css)); return $(document).on('click', "." + className + "Wrapper", function() { var inst; inst = $(this).data(pluginName); if (inst) { return inst.show(false); } }); }); $[pluginName] = function(elem, data, options) { if (elem instanceof HTMLElement || elem.jquery) { return $(elem)[pluginName](data, options); } else { options = data; data = elem; return new Notification(null, data, options); } }; $[pluginName].options = function(options) { return $.extend(pluginOptions, options); }; $[pluginName].addStyle = function(s) { return $.extend(true, styles.user, s); }; $.fn[pluginName] = function(data, options) { return $(this).each(function() { var inst; inst = getAnchorElement($(this)).data(pluginName); if (inst) { return inst.run(data, options); } else { return new Notification($(this), data, options); } }); }; }(window,document));