nightmare/jquery-notify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new position api in progress

Browse Source
This commit is contained in:
Jaime Pillora
2013-05-29 16:59:19 +10:00
parent abfa27f817
commit 04ad20dda3
5 changed files with 124 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/notify.js
Vendored
+51 -21
View File
@@ -1,27 +1,48 @@
/** Notify.js - v0.0.1 - 2013/05/28
/** Notify.js - v0.0.1 - 2013/05/29
* http://notifyjs.com/
* Copyright (c) 2013 Jaime Pillora - MIT
*/
(function(window,document,undefined) {
'use strict';
var Notification, arrowDirs, bootstrapDetected, className, cornerElem, createElem, getAnchorElement, inherit, insertCSS, pluginName, pluginOptions, styles;
var Notification, className, cornerElem, createElem, getAnchorElement, hPositions, inherit, insertCSS, parsePosition, pluginName, pluginOptions, styles, vPositions;
pluginName = 'notify';
className = '__' + pluginName;
arrowDirs = {
top: 'bottom',
bottom: 'top',
left: 'right',
right: 'left'
vPositions = {
t: 'b',
m: null,
b: 't'
};
hPositions = {
l: 'r',
c: null,
r: 'l'
};
parsePosition = function(str) {
var pos;
pos = [];
$.each(str.split(/\W+/), function(i, word) {
var w;
w = word.toLowerCase()[0];
if (vPositions[w]) {
pos.push(w);
}
if (hPositions[w]) {
return pos.push(w);
}
});
return pos;
};
styles = {
core: {
html: "<div class=\"" + className + "Wrapper\">\n <div class=\"" + className + "Arrow\"></div>\n <div class=\"" + className + "Container\"></div>\n</div>",
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." + 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}\n\n." + className + "Arrow {\n margin-top: " + (2 + (document.documentMode === 5 ? size * -4 : 0)) + "px;\n position: absolute;\n z-index: 2;\n margin-left: 10px;\n width: 0;\n height: 0;\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." + 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}\n\n." + className + "Arrow {\n margin-top: 2px;\n position: absolute;\n z-index: 2;\n margin-left: 10px;\n width: 0;\n height: 0;\n}\n"
},
user: {
"default": {
@@ -29,7 +50,7 @@ styles = {
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: "<div class=\"alert alert-error " + className + "Bootstrap\">\n <strong data-notify=\"text\"></strong>\n</div>",
html: "<div class=\"alert alert-error " + className + "Bootstrap\">\n <strong data-notify-text></strong>\n</div>",
css: "." + className + "Bootstrap {\n white-space: nowrap;\n margin: 5px !important;\n padding-left: 25px !important;\n background-repeat: no-repeat;\n background-position: 3px 7px;\n background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAtRJREFUeNqkVc1u00AQHq+dOD+0poIQfkIjalW0SEGqRMuRnHos3DjwAH0ArlyQeANOOSMeAA5VjyBxKBQhgSpVUKKQNGloFdw4cWw2jtfMOna6JOUArDTazXi/b3dm55socPqQhFka++aHBsI8GsopRJERNFlY88FCEk9Yiwf8RhgRyaHFQpPHCDmZG5oX2ui2yilkcTT1AcDsbYC1NMAyOi7zTX2Agx7A9luAl88BauiiQ/cJaZQfIpAlngDcvZZMrl8vFPK5+XktrWlx3/ehZ5r9+t6e+WVnp1pxnNIjgBe4/6dAysQc8dsmHwPcW9C0h3fW1hans1ltwJhy0GxK7XZbUlMp5Ww2eyan6+ft/f2FAqXGK4CvQk5HueFz7D6GOZtIrK+srupdx1GRBBqNBtzc2AiMr7nPplRdKhb1q6q6zjFhrklEFOUutoQ50xcX86ZlqaZpQrfbBdu2R6/G19zX6XSgh6RX5ubyHCM8nqSID6ICrGiZjGYYxojEsiw4PDwMSL5VKsC8Yf4VRYFzMzMaxwjlJSlCyAQ9l0CW44PBADzXhe7xMdi9HtTrdYjFYkDQL0cn4Xdq2/EAE+InCnvADTf2eah4Sx9vExQjkqXT6aAERICMewd/UAp/IeYANM2joxt+q5VI+ieq2i0Wg3l6DNzHwTERPgo1ko7XBXj3vdlsT2F+UuhIhYkp7u7CarkcrFOCtR3H5JiwbAIeImjT/YQKKBtGjRFCU5IUgFRe7fF4cCNVIPMYo3VKqxwjyNAXNepuopyqnld602qVsfRpEkkz+GFL1wPj6ySXBpJtWVa5xlhpcyhBNwpZHmtX8AGgfIExo0ZpzkWVTBGiXCSEaHh62/PoR0p/vHaczxXGnj4bSo+G78lELU80h1uogBwWLf5YlsPmgDEd4M236xjm+8nm4IuE/9u+/PH2JXZfbwz4zw1WbO+SQPpXfwG/BBgAhCNZiSb/pOQAAAAASUVORK5CYII=);\n}",
colors: {
red: '#eed3d7'
@@ -38,8 +59,6 @@ styles = {
}
};
bootstrapDetected = false;
pluginOptions = {
autoHide: false,
autoHideDelay: 2000,
@@ -235,13 +254,22 @@ Notification = (function() {
};
Notification.prototype.getPosition = function() {
if (this.options.position) {
return this.options.position;
var pos, text;
text = this.options.position;
pos = parsePosition(text);
if (pos.length === 0) {
pos.push('b');
}
if (this.elem.position().left + this.elem.width() + this.wrapper.width() < $(window).width()) {
return 'right';
if (pos.length === 1 && pos[0] === 'l' || pos[0] === 'r') {
pos.push('m');
}
return 'bottom';
if (pos.length === 1) {
pos.push('l');
}
if (!this.options.autoReposition) {
return pos;
}
throw "Not implemented";
};
Notification.prototype.getColor = function() {
@@ -271,7 +299,7 @@ Notification = (function() {
Notification.prototype.updateStyle = function() {
var _this = this;
return this.wrapper.find('[data-notify-style]').each(function(i, e) {
return $(e).attr('style', $(e).attr('data-notify-style').replace(/\{\{\s*color\s*\}\}/ig, _this.getColor()).replace(/\{\{\s*position\s*\}\}/ig, _this.getPosition()));
return $(e).attr('style', $(e).attr('data-notify-style').replace(/\{\{\s*color\s*\}\}/ig, _this.getColor()));
});
};
@@ -318,7 +346,7 @@ Notification = (function() {
$(function() {
$("body").append(cornerElem);
$("link").each(function() {
var src;
var bootstrapDetected, src;
src = $(this).attr('href');
if (src.match(/bootstrap/)) {
bootstrapDetected = true;
@@ -342,12 +370,13 @@ $(function() {
$[pluginName] = function(elem, data, options) {
if ((elem && elem.nodeName) || elem.jquery) {
return $(elem)[pluginName](data, options);
$(elem)[pluginName](data, options);
} else {
options = data;
data = elem;
return new Notification(null, data, options);
new Notification(null, data, options);
}
return elem;
};
$[pluginName].options = function(options) {
@@ -359,7 +388,7 @@ $[pluginName].styles = function(s) {
};
$.fn[pluginName] = function(data, options) {
return $(this).each(function() {
$(this).each(function() {
var inst;
inst = getAnchorElement($(this)).data(className);
if (inst) {
@@ -368,6 +397,7 @@ $.fn[pluginName] = function(data, options) {
return new Notification($(this), data, options);
}
});
return this;
};
}(window,document));
dist/notify.min.js
Vendored
+2 -2
View File
File diff suppressed because one or more lines are too long
examples/position.html
+28
View File
@@ -0,0 +1,28 @@
<html>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="../dist/notify.js"></script>
<style type="text/css">
.box { padding: 30px; }
</style>
<div class="boxes"></div>
<!-- run code -->
<script class="demo">
var positions = ["top", "right", "bottom", "left"];
var boxes = $(".boxes");
$.each(positions, function(i, p) {
var box = $("<div class=\"box\">"+p+"</div>");
boxes.append(box);
box.notify(p, {pos: p});
});
</script>
</body>
</html>
index.html
-26
View File
@@ -1,26 +0,0 @@
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!-- jQuery Prompt -->
<script src="dist/jquery.prompt.js"></script>
<form>
<input id="one" value="42" data-validate="number"/>
<input id="two" value="abc" data-validate="number"/>
<input type="submit"/>
</form>
<script>
$(function() {
setTimeout(function() {
$("#one").prompt("hello");
}, 300);
setTimeout(function() {
$.prompt($("#two"),"world", {color: 'black'});
}, 600);
setTimeout(function() {
$.prompt($("#two"),$("<strong/>").html("WORLD!"), {color: 'blue'});
}, 2800);
});
</script>
src/notify.coffee
+43 -22
View File
@@ -5,15 +5,25 @@
pluginName = 'notify'
className = '__'+pluginName
#opposites
arrowDirs =
top: 'bottom'
bottom: 'top'
left: 'right'
right: 'left'
middle: null
center: null
#positions mapped to opposites
vPositions =
t: 'b'
m: null
b: 't'
hPositions =
l: 'r'
c: null
r: 'l'
parsePosition = (str) ->
pos = []
$.each str.split(/\W+/), (i,word) ->
w = word.toLowerCase()[0]
pos.push w if vPositions[w]
pos.push w if hPositions[w]
pos
#built-in styles
styles =
core:
html: """
@@ -60,7 +70,7 @@ styles =
}
.#{className}Arrow {
margin-top: #{2 + (if document.documentMode is 5 then (size*-4) else 0)}px;
margin-top: 2px;
position: absolute;
z-index: 2;
margin-left: 10px;
@@ -100,7 +110,7 @@ styles =
bootstrap:
html: """
<div class="alert alert-error #{className}Bootstrap">
<strong data-notify="text"></strong>
<strong data-notify-text></strong>
</div>
"""
css: """
@@ -116,8 +126,6 @@ styles =
colors:
red: '#eed3d7'
bootstrapDetected = false
#overridable options
pluginOptions =
autoHide: false
@@ -146,9 +154,7 @@ pluginOptions =
#parents: { '.ui-dialog': 5001 }
# plugin helpers
createElem = (tag) ->
$ "<#{tag}></#{tag}>"
createElem = (tag) -> $ "<#{tag}></#{tag}>"
inherit = (a, b) ->
F = () ->
F.prototype = a
@@ -312,10 +318,22 @@ class Notification
@arrow.show()
getPosition: ->
return @options.position if @options.position
if @elem.position().left + @elem.width() + @wrapper.width() < $(window).width()
return 'right'
return 'bottom'
text = @options.position
pos = parsePosition text
#if unspecified - choose bottom left
pos.push 'b' if pos.length is 0
pos.push 'm' if pos.length is 1 and pos[0] is 'l' or pos[0] is 'r'
pos.push 'l' if pos.length is 1
unless @options.autoReposition
return pos
# if @elem.position().left + @elem.width() + @wrapper.width() < $(window).width()
# return 'right'
# return 'bottom'
throw "Not implemented"
getColor: ->
styleColors = @getStyle().colors
@@ -336,8 +354,9 @@ class Notification
#update colors
@wrapper.find('[data-notify-style]').each (i,e) =>
$(e).attr 'style', $(e).attr('data-notify-style').
replace(/\{\{\s*color\s*\}\}/ig, @getColor()).
replace(/\{\{\s*position\s*\}\}/ig, @getPosition())
replace(/\{\{\s*color\s*\}\}/ig, @getColor())
# .
# replace(/\{\{\s*position\s*\}\}/ig, @getPosition())
#run plugin
run: (data, options) ->
@@ -409,7 +428,8 @@ $[pluginName] = (elem, data, options) ->
else
options = data
data = elem
new Notification null, data, options
new Notification null, data, options
elem
# publicise methods
$[pluginName].options = (options) ->
@@ -426,4 +446,5 @@ $.fn[pluginName] = (data, options) ->
inst.run data, options
else
new Notification $(@), data, options
@