reworked notify.js
authorAndrew Karpow <andy@ndyk.de>
Thu, 16 Jan 2014 17:53:59 +0000 (18:53 +0100)
committerAndrew Karpow <andy@ndyk.de>
Thu, 16 Jan 2014 17:53:59 +0000 (18:53 +0100)
htdocs/js/bootstrap-notify.js

index b4ae197..caa3f12 100644 (file)
-/** 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: "<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  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 + "></" + 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    = $('<div class="alert"></div>');
+    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 = $('<a class="close pull-right" href="#">&times;</a>');
+      $(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, '<br/>');
-        }
-      }
-      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: "<div>\n<span data-notify-text></span>\n</div>",
-  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);