From 5f613a878e38442f833031b9b06b6a150fe78579 Mon Sep 17 00:00:00 2001 From: Andrew Karpow Date: Thu, 16 Jan 2014 18:53:59 +0100 Subject: [PATCH] reworked notify.js --- htdocs/js/bootstrap-notify.js | 648 ++++------------------------------ 1 file changed, 78 insertions(+), 570 deletions(-) diff --git a/htdocs/js/bootstrap-notify.js b/htdocs/js/bootstrap-notify.js index b4ae197..caa3f12 100644 --- a/htdocs/js/bootstrap-notify.js +++ b/htdocs/js/bootstrap-notify.js @@ -1,585 +1,93 @@ -/** Notify.js - v0.3.1 - 2013/07/05 - * http://notifyjs.com/ - * Copyright (c) 2013 Jaime Pillora - MIT +/** + * bootstrap-notify.js v1.0 + * -- + * Copyright 2012 Goodybag, Inc. + * -- + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. */ -(function(window,document,$,undefined) { -'use strict'; -var Notification, addStyle, blankFieldName, coreStyle, createElem, defaults, encode, find, findFields, getAnchorElement, getStyle, globalAnchors, hAligns, incr, inherit, insertCSS, mainPositions, opposites, parsePosition, pluginClassName, pluginName, pluginOptions, positions, realign, stylePrefixes, styles, vAligns, - __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; }; - -pluginName = 'notify'; - -pluginClassName = pluginName + 'js'; - -blankFieldName = pluginName + "!blank"; - -positions = { - t: 'top', - m: 'middle', - b: 'bottom', - l: 'left', - c: 'center', - r: 'right' -}; - -hAligns = ['l', 'c', 'r']; - -vAligns = ['t', 'm', 'b']; - -mainPositions = ['t', 'b', 'l', 'r']; - -opposites = { - t: 'b', - m: null, - b: 't', - l: 'r', - c: null, - r: 'l' -}; - -parsePosition = function(str) { - var pos; - pos = []; - $.each(str.split(/\W+/), function(i, word) { - var w; - w = word.toLowerCase().charAt(0); - if (positions[w]) { - return pos.push(w); - } - }); - return pos; -}; - -styles = {}; - -coreStyle = { - name: 'core', - html: "
\n
\n
\n
", - 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 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}" -}; - -stylePrefixes = { - "border-radius": ["-webkit-", "-moz-"] -}; - -getStyle = function(name) { - return styles[name]; -}; - -addStyle = function(name, def) { - var cssText, elem, fields, _ref; - if (!name) { - throw "Missing Style name"; - } - if (!def) { - throw "Missing Style definition"; - } - if (!def.html) { - throw "Missing Style HTML"; - } - if ((_ref = styles[name]) != null ? _ref.cssElem : void 0) { - if (window.console) { - console.warn("" + pluginName + ": overwriting style '" + name + "'"); - } - styles[name].cssElem.remove(); - } - def.name = name; - styles[name] = def; - cssText = ""; - if (def.classes) { - $.each(def.classes, function(className, props) { - cssText += "." + pluginClassName + "-" + def.name + "-" + className + " {\n"; - $.each(props, function(name, val) { - if (stylePrefixes[name]) { - $.each(stylePrefixes[name], function(i, prefix) { - return cssText += " " + prefix + name + ": " + val + ";\n"; - }); - } - return cssText += " " + name + ": " + val + ";\n"; - }); - return cssText += "}\n"; - }); - } - if (def.css) { - cssText += "/* styles for " + def.name + " */\n" + def.css; - } - if (cssText) { - def.cssElem = insertCSS(cssText); - def.cssElem.attr('id', "notify-" + def.name); - } - fields = {}; - elem = $(def.html); - findFields('html', elem, fields); - findFields('text', elem, fields); - return def.fields = fields; -}; - -insertCSS = function(cssText) { - var elem; - elem = createElem("style"); - elem.attr('type', 'text/css'); - $("head").append(elem); - try { - elem.html(cssText); - } catch (e) { - elem[0].styleSheet.cssText = cssText; - } - return elem; -}; - -findFields = function(type, elem, fields) { - var attr; - if (type !== 'html') { - type = 'text'; - } - attr = "data-notify-" + type; - return find(elem, "[" + attr + "]").each(function() { - var name; - name = $(this).attr(attr); - if (!name) { - name = blankFieldName; - } - return fields[name] = type; - }); -}; - -find = function(elem, selector) { - if (elem.is(selector)) { - return elem; - } else { - return elem.find(selector); - } -}; - -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 -}; - -inherit = function(a, b) { - var F; - F = function() {}; - F.prototype = a; - return $.extend(true, new F(), b); -}; - -defaults = function(opts) { - return $.extend(pluginOptions, opts); -}; - -createElem = function(tag) { - return $("<" + tag + ">"); -}; - -globalAnchors = {}; - -getAnchorElement = function(element) { - var 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(); - } - return element; -}; - -incr = function(obj, pos, val) { - var opp, temp; - if (typeof val === 'string') { - val = parseInt(val, 10); - } else if (typeof val !== 'number') { - return; - } - if (isNaN(val)) { - return; - } - opp = positions[opposites[pos.charAt(0)]]; - temp = pos; - if (obj[opp] !== undefined) { - pos = positions[opp.charAt(0)]; - val = -val; - } - if (obj[pos] === undefined) { - obj[pos] = val; - } else { - obj[pos] += val; - } - return null; -}; - -realign = function(alignment, inner, outer) { - if (alignment === 'l' || alignment === 't') { - return 0; - } else if (alignment === 'c' || alignment === 'm') { - return outer / 2 - inner / 2; - } else if (alignment === 'r' || alignment === 'b') { - return outer - inner; - } - throw "Invalid alignment"; -}; - -encode = function(text) { - encode.e = encode.e || createElem("div"); - return encode.e.text(text).html(); -}; - -Notification = (function() { - - function Notification(elem, data, options) { - if (typeof options === 'string') { - options = { - className: options - }; - } - this.options = inherit(pluginOptions, $.isPlainObject(options) ? options : {}); - this.loadHTML(); - this.wrapper = $(coreStyle.html); - this.wrapper.data(pluginClassName, this); - this.arrow = this.wrapper.find("." + pluginClassName + "-arrow"); - this.container = this.wrapper.find("." + pluginClassName + "-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(pluginClassName, this); - this.elem.before(this.wrapper); - } - this.container.hide(); - this.run(data); - } - - Notification.prototype.loadHTML = function() { - var style; - style = this.getStyle(); - this.userContainer = $(style.html); - return this.userFields = style.fields; - }; - - Notification.prototype.show = function(show, userCallback) { - var args, callback, elems, fn, hidden, - _this = this; - callback = function() { - if (!show && !_this.elem) { - _this.destroy(); - } - if (userCallback) { - return userCallback(); - } - }; - hidden = this.container.parent().parents(':hidden').length > 0; - elems = this.container.add(this.arrow); - args = []; - if (hidden && show) { - fn = 'show'; - } else if (hidden && !show) { - fn = 'hide'; - } else if (!hidden && show) { - fn = this.options.showAnimation; - args.push(this.options.showDuration); - } else if (!hidden && !show) { - fn = this.options.hideAnimation; - args.push(this.options.hideDuration); - } else { - return callback(); - } - args.push(callback); - return elems[fn].apply(elems, args); +(function ($) { + var Notification = function (element, options) { + // Element collection + this.$element = $(element); + this.$note = $('
'); + this.options = $.extend(true, {}, $.fn.notify.defaults, options); + + // Setup from options + if(this.options.transition) + if(this.options.transition == 'fade') + this.$note.addClass('in').addClass(this.options.transition); + else this.$note.addClass(this.options.transition); + else this.$note.addClass('fade').addClass('in'); + + if(this.options.type) + this.$note.addClass('alert-' + this.options.type); + else this.$note.addClass('alert-success'); + + if(!this.options.message && this.$element.data("message") !== '') // dom text + this.$note.html(this.$element.data("message")); + else + if(typeof this.options.message === 'object') + if(this.options.message.html) + this.$note.html(this.options.message.html); + else if(this.options.message.text) + this.$note.text(this.options.message.text); + else + this.$note.html(this.options.message); + + if(this.options.closable) + var link = $('×'); + $(link).on('click', $.proxy(onClose, this)); + this.$note.prepend(link); + + return this; }; - Notification.prototype.setGlobalPosition = function() { - var align, anchor, css, key, main, pAlign, pMain, position; - position = this.getPosition(); - pMain = position[0], pAlign = position[1]; - main = positions[pMain]; - align = positions[pAlign]; - key = pMain + "|" + pAlign; - anchor = globalAnchors[key]; - if (!anchor) { - anchor = globalAnchors[key] = createElem("div"); - 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); + var onClose = function() { + this.options.onClose(); + $(this.$note).remove(); + this.options.onClosed(); + return false; }; - Notification.prototype.setElementPosition = function() { - var arrowColor, arrowCss, arrowSize, color, contH, contW, css, elemH, elemIH, elemIW, elemPos, elemW, gap, mainFull, margin, opp, oppFull, pAlign, pArrow, pMain, pos, posFull, position, wrapPos, _i, _j, _len, _len1, _ref; - 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 (_i = 0, _len = _ref.length; _i < _len; _i++) { - pos = _ref[_i]; - 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("background-color") || 'white'; - for (_j = 0, _len1 = mainPositions.length; _j < _len1; _j++) { - pos = mainPositions[_j]; - 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, text, _ref, _ref1, _ref2, _ref3, _ref4, _ref5; - 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.show = function () { + if(this.options.fadeOut.enabled) + this.$note.delay(this.options.fadeOut.delay || 3000).fadeOut('slow', $.proxy(onClose, this)); - 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); + this.$element.append(this.$note); + this.$note.alert(); }; - Notification.prototype.run = function(data, options) { - var d, datas, name, type, value, - _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; - } - datas = {}; - if ($.isPlainObject(data)) { - datas = data; - } else { - datas[blankFieldName] = data; - } - for (name in datas) { - d = datas[name]; - type = this.userFields[name]; - if (!type) { - continue; - } - if (type === 'text') { - d = encode(d); - if (this.options.breakNewLines) { - d = d.replace(/\n/g, '
'); - } - } - value = name === blankFieldName ? '' : '=' + name; - find(this.userContainer, "[data-notify-" + type + value + "]").html(d); - } - this.updateClasses(); - if (this.elem) { - this.setElementPosition(); - } else { - this.setGlobalPosition(); - } - this.show(true); - if (this.options.autoHide) { - clearTimeout(this.autohideTimer); - return this.autohideTimer = setTimeout(function() { - return _this.show(false); - }, this.options.autoHideDelay); - } + Notification.prototype.hide = function () { + if(this.options.fadeOut.enabled) + this.$note.delay(this.options.fadeOut.delay || 3000).fadeOut('slow', $.proxy(onClose, this)); + else onClose.call(this); }; - Notification.prototype.destroy = function() { - return this.wrapper.remove(); + $.fn.notify = function (options) { + return new Notification(this, options); }; - return Notification; - -})(); - -$[pluginName] = function(elem, data, options) { - if ((elem && elem.nodeName) || elem.jquery) { - $(elem)[pluginName](data, options); - } else { - options = data; - data = elem; - new Notification(null, data, options); - } - return elem; -}; - -$.fn[pluginName] = function(data, options) { - $(this).each(function() { - var inst; - inst = getAnchorElement($(this)).data(pluginClassName); - if (inst) { - return inst.run(data, options); - } else { - return new Notification($(this), data, options); - } - }); - return this; -}; - -$.extend($[pluginName], { - defaults: defaults, - addStyle: addStyle, - pluginOptions: pluginOptions, - getStyle: getStyle, - insertCSS: insertCSS -}); - -$(function() { - insertCSS(coreStyle.css).attr('id', 'core-notify'); - return $(document).on('click notify-hide', "." + pluginClassName + "-wrapper", function(e) { - var inst; - inst = $(this).data(pluginClassName); - if (inst && (inst.options.clickToHide || e.type === 'notify-hide')) { - return inst.show(false); - } - }); -}); - -}(window,document,jQuery)); - -$.notify.addStyle("bootstrap", { - html: "
\n\n
", - classes: { - base: { - "font-weight": "bold", - "padding": "8px 15px 8px 14px", - "text-shadow": "0 1px 0 rgba(255, 255, 255, 0.5)", - "background-color": "#fcf8e3", - "border": "1px solid #fbeed5", - "border-radius": "4px", - "white-space": "nowrap", - "padding-left": "25px", - }, - error: { - "color": "#B94A48", - "background-color": "#F2DEDE", - "border-color": "#EED3D7", - }, - success: { - "color": "#468847", - "background-color": "#DFF0D8", - "border-color": "#D6E9C6", - }, - info: { - "color": "#3A87AD", - "background-color": "#D9EDF7", - "border-color": "#BCE8F1", + $.fn.notify.defaults = { + type: 'success', + closable: true, + transition: 'fade', + fadeOut: { + enabled: true, + delay: 3000 }, - warn: { - "color": "#C09853", - "background-color": "#FCF8E3", - "border-color": "#FBEED5", - } + message: null, + onClose: function () {}, + onClosed: function () {} } -}); +})(window.jQuery); -- 2.20.1