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

user styles working

Browse Source
This commit is contained in:
Jaime Pillora
2013-04-04 13:48:42 +11:00
parent 8c0917498f
commit 6316e52e4f
3 changed files with 183 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/notify.js
Vendored
+67 -29
View File
@@ -5,7 +5,7 @@
(function(window,document,undefined) { (function(window,document,undefined) {
'use strict'; 'use strict';
var Options, Prompt, arrowDirs, className, coreStyle, create, getAnchorElement, pluginName, pluginOptions, userStyles; var Options, Prompt, arrowDirs, className, create, getAnchorElement, pluginName, pluginOptions, styles;
pluginName = 'notify'; pluginName = 'notify';
@@ -18,20 +18,21 @@ arrowDirs = {
right: 'left' right: 'left'
}; };
coreStyle = { styles = {
html: "<div class=\"" + className + "Wrapper\">\n <div class=\"" + className + "Main\">\n <div class=\"" + className + "Content\">\n </div>\n </div>\n</div>", core: {
css: "." + className + "Wrapper {\n z-index: 1;\n position: absolute;\n display: inline-block;\n height: 0;\n width: 0;\n}\n\n." + className + "Main {\n display: none;\n z-index: 1;\n position: absolute;\n cursor: pointer;\n}\n\n." + className + "Content {\n background: #fff;\n position: relative;\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}" html: "<div class=\"" + className + "Wrapper\"></div>",
}; css: "." + className + "Wrapper {\n z-index: 1;\n position: absolute;\n display: inline-block;\n height: 0;\n width: 0;\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}"
},
userStyles = { user: {
"default": { "default": {
html: "<span>test</span>", html: "<div>\n <div class=\"" + className + "Default\" data-notify=\"text\"></div>\n</div>",
css: "body {\n test: 42\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: { bootstrap: {
html: "<span>test</span>", html: "<span>test</span>",
css: "body {\n test: 42\n}" css: "body {\n test: 42\n}"
} }
}
}; };
pluginOptions = { pluginOptions = {
@@ -40,6 +41,7 @@ pluginOptions = {
arrowShow: true, arrowShow: true,
arrowSize: 5, arrowSize: 5,
arrowPosition: 'top', arrowPosition: 'top',
style: 'default',
color: 'red', color: 'red',
colors: { colors: {
red: '#ee0101', red: '#ee0101',
@@ -59,9 +61,7 @@ create = function(tag) {
}; };
Options = function(options) { Options = function(options) {
if ($.isPlainObject(options)) {
return $.extend(this, options); return $.extend(this, options);
}
}; };
Options.prototype = pluginOptions; Options.prototype = pluginOptions;
@@ -94,14 +94,40 @@ Prompt = (function() {
this.originalElement = elem; this.originalElement = elem;
this.elem = getAnchorElement(elem); this.elem = getAnchorElement(elem);
this.elem.data(pluginName, this); this.elem.data(pluginName, this);
this.wrapper = $(coreStyle.html); this.loadCSS();
this.main = this.wrapper.find("." + className + "Main"); this.loadHTML();
this.content = this.main.find("." + className + "Content"); this.wrapper = $(styles.core.html);
this.wrapper.append(this.container);
this.elem.before(this.wrapper); this.elem.before(this.wrapper);
this.main.css(this.calculateCSS()); this.container.css(this.calculateCSS());
this.run(node); this.run(node);
} }
Prompt.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;
}
};
Prompt.prototype.loadHTML = function(style) {
style = this.getStyle(name);
this.container = $(style.html);
this.container.addClass("" + className + "Container");
this.text = this.container.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");
};
Prompt.prototype.buildArrow = function() { Prompt.prototype.buildArrow = function() {
var alt, d, dir, showArrow, size; var alt, d, dir, showArrow, size;
dir = this.options.arrowPosition; dir = this.options.arrowPosition;
@@ -131,25 +157,25 @@ Prompt = (function() {
Prompt.prototype.showMain = function(show) { Prompt.prototype.showMain = function(show) {
var hidden; var hidden;
hidden = this.main.parent().parents(':hidden').length > 0; hidden = this.container.parent().parents(':hidden').length > 0;
if (hidden && show) { if (hidden && show) {
this.main.show(); this.container.show();
} }
if (hidden && !show) { if (hidden && !show) {
this.main.hide(); this.container.hide();
} }
if (!hidden && show) { if (!hidden && show) {
this.main[this.options.showAnimation](this.options.showDuration); this.container[this.options.showAnimation](this.options.showDuration);
} }
if (!hidden && !show) { if (!hidden && !show) {
return this.main[this.options.hideAnimation](this.options.hideDuration); return this.container[this.options.hideAnimation](this.options.hideDuration);
} }
}; };
Prompt.prototype.calculateCSS = function() { Prompt.prototype.calculateCSS = function() {
var elementPosition, height, left, mainPosition; var elementPosition, height, left, mainPosition;
elementPosition = this.elem.position(); elementPosition = this.elem.position();
mainPosition = this.main.parent().position(); mainPosition = this.container.parent().position();
height = this.elem.outerHeight(); height = this.elem.outerHeight();
left = elementPosition.left - mainPosition.left; left = elementPosition.left - mainPosition.left;
if (!navigator.userAgent.match(/MSIE/)) { if (!navigator.userAgent.match(/MSIE/)) {
@@ -165,6 +191,18 @@ Prompt = (function() {
return this.options.colors[this.options.color] || this.options.color; return this.options.colors[this.options.color] || this.options.color;
}; };
Prompt.prototype.getStyle = function(name) {
var style;
if (!name) {
name = this.options.style;
}
style = styles.user[name];
if (!style) {
throw "Missing style: " + name;
}
return style;
};
Prompt.prototype.run = function(node, options) { Prompt.prototype.run = function(node, options) {
var t; var t;
if ($.isPlainObject(options)) { if ($.isPlainObject(options)) {
@@ -172,18 +210,18 @@ Prompt = (function() {
} else if ($.type(options) === 'string') { } else if ($.type(options) === 'string') {
this.options.color = options; this.options.color = options;
} }
if (this.main && !node) { if (this.container && !node) {
this.showMain(false); this.showMain(false);
return; return;
} else if (!this.main && !node) { } else if (!this.container && !node) {
return; return;
} }
if ($.type(node) === 'string') { if ($.type(node) === 'string') {
this.content.html(node.replace('\n', '<br/>')); this.text.html(node.replace('\n', '<br/>'));
} else { } else {
this.content.empty().append(node); this.text.empty().append(node);
} }
this.content.css({ this.text.css({
'color': this.getColor(), 'color': this.getColor(),
'border-color': this.getColor() 'border-color': this.getColor()
}); });
@@ -191,7 +229,7 @@ Prompt = (function() {
this.arrow.remove(); this.arrow.remove();
} }
this.buildArrow(); this.buildArrow();
this.content.before(this.arrow); this.text.before(this.arrow);
this.showMain(true); this.showMain(true);
if (this.options.autoHidePrompt) { if (this.options.autoHidePrompt) {
clearTimeout(this.elem.data('mainTimer')); clearTimeout(this.elem.data('mainTimer'));
@@ -207,7 +245,7 @@ Prompt = (function() {
})(); })();
$(function() { $(function() {
$("head").append(create("style").html(coreStyle.css)); $("head").append(create("style").html(styles.core.css));
return $(document).on('click', "." + className, function() { return $(document).on('click', "." + className, function() {
var inst; var inst;
inst = getAnchorElement($(this)).data(pluginName); inst = getAnchorElement($(this)).data(pluginName);
@@ -226,7 +264,7 @@ $[pluginName].options = function(options) {
}; };
$[pluginName].addStyle = function(s) { $[pluginName].addStyle = function(s) {
return $.extend(true, userStyles, s); return $.extend(true, styles.user, s);
}; };
$.fn[pluginName] = function(node, options) { $.fn[pluginName] = function(node, options) {
dist/notify.min.js
Vendored
+1 -1
View File
@@ -1,4 +1,4 @@
/** Notify.js - v0.0.1 - 2013/04/04 /** Notify.js - v0.0.1 - 2013/04/04
* http://notifyjs.com/ * http://notifyjs.com/
* Copyright (c) 2013 Jaime Pillora - MIT * Copyright (c) 2013 Jaime Pillora - MIT
*/(function(t,n){"use strict";var i,o,e,r,s,a,h,p,d,l;p="notify",r="__notify",e={top:"bottom",bottom:"top",left:"right",right:"left"},s={html:'<div class="'+r+'Wrapper">\n <div class="'+r+'Main">\n <div class="'+r+'Content">\n </div>\n </div>\n</div>',css:"."+r+"Wrapper {\n z-index: 1;\n position: absolute;\n display: inline-block;\n height: 0;\n width: 0;\n}\n\n."+r+"Main {\n display: none;\n z-index: 1;\n position: absolute;\n cursor: pointer;\n}\n\n."+r+"Content {\n background: #fff;\n position: relative;\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}"},l={"default":{html:"<span>test</span>",css:"body {\n test: 42\n}"},bootstrap:{html:"<span>test</span>",css:"body {\n test: 42\n}"}},d={autoHidePrompt:!1,autoHideDelay:1e4,arrowShow:!0,arrowSize:5,arrowPosition:"top",color:"red",colors:{red:"#ee0101",green:"#33be40",black:"#393939",blue:"#00f"},showAnimation:"fadeIn",showDuration:200,hideAnimation:"fadeOut",hideDuration:600,gap:2},a=function(t){return $(n.createElement(t))},i=function(t){return $.isPlainObject(t)?$.extend(this,t):undefined},i.prototype=d,h=function(t){var n,i;return t.is("[type=radio]")&&(i=t.parents("form:first").find("[type=radio]").filter(function(n,i){return $(i).attr("name")===t.attr("name")}),t=i.first()),n=t.prev(),n.is("span.styled,span.OBS_checkbox")&&(t=n),t},o=function(){function t(t,n,o){"string"===$.type(o)&&(o={color:o}),this.options=new i($.isPlainObject(o)?o:{}),this.elementType=t.attr("type"),this.originalElement=t,this.elem=h(t),this.elem.data(p,this),this.wrapper=$(s.html),this.main=this.wrapper.find("."+r+"Main"),this.content=this.main.find("."+r+"Content"),this.elem.before(this.wrapper),this.main.css(this.calculateCSS()),this.run(n)}return t.prototype.buildArrow=function(){var t,i,o,s,h;o=this.options.arrowPosition,h=this.options.arrowSize,t=e[o],this.arrow=a("div"),this.arrow.addClass(r+"Arrow").css({"margin-top":2+(5===n.documentMode?-4*h:0),position:"relative","z-index":"2","margin-left":10,width:0,height:0}).css("border-"+t,h+"px solid "+this.getColor());for(i in e)i!==o&&i!==t&&this.arrow.css("border-"+i,h+"px solid transparent");return s=this.options.arrowShow&&"radio"!==this.elementType,s?this.arrow.show():this.arrow.hide()},t.prototype.showMain=function(t){var n;return n=this.main.parent().parents(":hidden").length>0,n&&t&&this.main.show(),n&&!t&&this.main.hide(),!n&&t&&this.main[this.options.showAnimation](this.options.showDuration),n||t?undefined:this.main[this.options.hideAnimation](this.options.hideDuration)},t.prototype.calculateCSS=function(){var t,n,i,o;return t=this.elem.position(),o=this.main.parent().position(),n=this.elem.outerHeight(),i=t.left-o.left,navigator.userAgent.match(/MSIE/)||(n+=t.top-o.top),{top:n+this.options.gap,left:i}},t.prototype.getColor=function(){return this.options.colors[this.options.color]||this.options.color},t.prototype.run=function(t,n){var i;return $.isPlainObject(n)?$.extend(this.options,n):"string"===$.type(n)&&(this.options.color=n),this.main&&!t?(this.showMain(!1),undefined):this.main||t?("string"===$.type(t)?this.content.html(t.replace("\n","<br/>")):this.content.empty().append(t),this.content.css({color:this.getColor(),"border-color":this.getColor()}),this.arrow&&this.arrow.remove(),this.buildArrow(),this.content.before(this.arrow),this.showMain(!0),this.options.autoHidePrompt?(clearTimeout(this.elem.data("mainTimer")),i=setTimeout(function(){return this.showMain(!1)},this.options.autoHideDelay),this.elem.data("mainTimer",i)):undefined):undefined},t}(),$(function(){return $("head").append(a("style").html(s.css)),$(n).on("click","."+r,function(){var t;return t=h($(this)).data(p),null!=t?t.showMain(!1):undefined})}),$[p]=function(t,n,i){return $(t)[p](n,i)},$[p].options=function(t){return $.extend(d,t)},$[p].addStyle=function(t){return $.extend(!0,l,t)},$.fn[p]=function(t,n){return $(this).each(function(){var i;return i=h($(this)).data(p),null!=i?i.run(t,n):new o($(this),t,n)})}})(window,document); */(function(t,i){"use strict";var n,e,o,r,s,a,h,p,d;h="notify",r="__notify",o={top:"bottom",bottom:"top",left:"right",right:"left"},d={core:{html:'<div class="'+r+'Wrapper"></div>',css:"."+r+"Wrapper {\n z-index: 1;\n position: absolute;\n display: inline-block;\n height: 0;\n width: 0;\n}\n\n."+r+"Container {\n display: none;\n z-index: 1;\n position: absolute;\n cursor: pointer;\n}\n\n."+r+"Text {\n position: relative;\n}"},user:{"default":{html:'<div>\n <div class="'+r+'Default" data-notify="text"></div>\n</div>',css:"."+r+"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:"<span>test</span>",css:"body {\n test: 42\n}"}}},p={autoHidePrompt:!1,autoHideDelay:1e4,arrowShow:!0,arrowSize:5,arrowPosition:"top",style:"default",color:"red",colors:{red:"#ee0101",green:"#33be40",black:"#393939",blue:"#00f"},showAnimation:"fadeIn",showDuration:200,hideAnimation:"fadeOut",hideDuration:600,gap:2},s=function(t){return $(i.createElement(t))},n=function(t){return $.extend(this,t)},n.prototype=p,a=function(t){var i,n;return t.is("[type=radio]")&&(n=t.parents("form:first").find("[type=radio]").filter(function(i,n){return $(n).attr("name")===t.attr("name")}),t=n.first()),i=t.prev(),i.is("span.styled,span.OBS_checkbox")&&(t=i),t},e=function(){function t(t,i,e){"string"===$.type(e)&&(e={color:e}),this.options=new n($.isPlainObject(e)?e:{}),this.elementType=t.attr("type"),this.originalElement=t,this.elem=a(t),this.elem.data(h,this),this.loadCSS(),this.loadHTML(),this.wrapper=$(d.core.html),this.wrapper.append(this.container),this.elem.before(this.wrapper),this.container.css(this.calculateCSS()),this.run(i)}return t.prototype.loadCSS=function(t){var i,n;return n=this.options.style,t=this.getStyle(n),i=t.cssElem,i?i.html(t.css):(i=s("style").attr("id",""+n+"-styles").html(t.css),$("head").append(i),t.cssElem=i)},t.prototype.loadHTML=function(t){if(t=this.getStyle(name),this.container=$(t.html),this.container.addClass(""+r+"Container"),this.text=this.container.find("[data-notify=text]"),0===this.text.length)throw"style: "+name+" HTML is missing the: data-notify='text' attribute";return this.text.addClass(""+r+"Text")},t.prototype.buildArrow=function(){var t,n,e,a,h;e=this.options.arrowPosition,h=this.options.arrowSize,t=o[e],this.arrow=s("div"),this.arrow.addClass(r+"Arrow").css({"margin-top":2+(5===i.documentMode?-4*h:0),position:"relative","z-index":"2","margin-left":10,width:0,height:0}).css("border-"+t,h+"px solid "+this.getColor());for(n in o)n!==e&&n!==t&&this.arrow.css("border-"+n,h+"px solid transparent");return a=this.options.arrowShow&&"radio"!==this.elementType,a?this.arrow.show():this.arrow.hide()},t.prototype.showMain=function(t){var i;return i=this.container.parent().parents(":hidden").length>0,i&&t&&this.container.show(),i&&!t&&this.container.hide(),!i&&t&&this.container[this.options.showAnimation](this.options.showDuration),i||t?undefined:this.container[this.options.hideAnimation](this.options.hideDuration)},t.prototype.calculateCSS=function(){var t,i,n,e;return t=this.elem.position(),e=this.container.parent().position(),i=this.elem.outerHeight(),n=t.left-e.left,navigator.userAgent.match(/MSIE/)||(i+=t.top-e.top),{top:i+this.options.gap,left:n}},t.prototype.getColor=function(){return this.options.colors[this.options.color]||this.options.color},t.prototype.getStyle=function(t){var i;if(t||(t=this.options.style),i=d.user[t],!i)throw"Missing style: "+t;return i},t.prototype.run=function(t,i){var n;return $.isPlainObject(i)?$.extend(this.options,i):"string"===$.type(i)&&(this.options.color=i),this.container&&!t?(this.showMain(!1),undefined):this.container||t?("string"===$.type(t)?this.text.html(t.replace("\n","<br/>")):this.text.empty().append(t),this.text.css({color:this.getColor(),"border-color":this.getColor()}),this.arrow&&this.arrow.remove(),this.buildArrow(),this.text.before(this.arrow),this.showMain(!0),this.options.autoHidePrompt?(clearTimeout(this.elem.data("mainTimer")),n=setTimeout(function(){return this.showMain(!1)},this.options.autoHideDelay),this.elem.data("mainTimer",n)):undefined):undefined},t}(),$(function(){return $("head").append(s("style").html(d.core.css)),$(i).on("click","."+r,function(){var t;return t=a($(this)).data(h),null!=t?t.showMain(!1):undefined})}),$[h]=function(t,i,n){return $(t)[h](i,n)},$[h].options=function(t){return $.extend(p,t)},$[h].addStyle=function(t){return $.extend(!0,d.user,t)},$.fn[h]=function(t,i){return $(this).each(function(){var n;return n=a($(this)).data(h),null!=n?n.run(t,i):new e($(this),t,i)})}})(window,document);
src/notify.coffee
+70 -43
View File
@@ -11,14 +11,10 @@ arrowDirs =
left: 'right' left: 'right'
right: 'left' right: 'left'
coreStyle = styles =
core:
html: """ html: """
<div class="#{className}Wrapper"> <div class="#{className}Wrapper"></div>
<div class="#{className}Main">
<div class="#{className}Content">
</div>
</div>
</div>
""" """
css: """ css: """
.#{className}Wrapper { .#{className}Wrapper {
@@ -29,16 +25,27 @@ coreStyle =
width: 0; width: 0;
} }
.#{className}Main { .#{className}Container {
display: none; display: none;
z-index: 1; z-index: 1;
position: absolute; position: absolute;
cursor: pointer; cursor: pointer;
} }
.#{className}Content { .#{className}Text {
background: #fff;
position: relative; position: relative;
}
"""
user:
default:
html: """
<div>
<div class="#{className}Default" data-notify="text"></div>
</div>
"""
css: """
.#{className}Default {
background: #fff;
font-size: 11px; font-size: 11px;
box-shadow: 0 0 6px #000; box-shadow: 0 0 6px #000;
-moz-box-shadow: 0 0 6px #000; -moz-box-shadow: 0 0 6px #000;
@@ -53,18 +60,6 @@ coreStyle =
} }
""" """
userStyles =
default:
html: """
<span>test</span>
"""
css: """
body {
test: 42
}
"""
bootstrap: bootstrap:
html: """ html: """
<span>test</span> <span>test</span>
@@ -82,6 +77,8 @@ pluginOptions =
arrowShow: true arrowShow: true
arrowSize: 5 arrowSize: 5
arrowPosition: 'top' arrowPosition: 'top'
# Default style
style: 'default'
# Default color # Default color
color: 'red' color: 'red'
# Color mappings # Color mappings
@@ -104,8 +101,7 @@ create = (tag) ->
$ document.createElement(tag) $ document.createElement(tag)
# inherit plugin options # inherit plugin options
Options = (options) -> Options = (options) -> $.extend @, options
$.extend @, options if $.isPlainObject(options)
Options:: = pluginOptions Options:: = pluginOptions
#gets first on n radios, and gets the fancy stylised input for hidden inputs #gets first on n radios, and gets the fancy stylised input for hidden inputs
@@ -127,21 +123,46 @@ class Prompt
constructor: (elem, node, options) -> constructor: (elem, node, options) ->
options = {color: options} if $.type(options) is 'string' options = {color: options} if $.type(options) is 'string'
@options = new Options if $.isPlainObject(options) then options else {} @options = new Options if $.isPlainObject(options) then options else {}
@elementType = elem.attr('type') @elementType = elem.attr('type')
@originalElement = elem @originalElement = elem
@elem = getAnchorElement(elem) @elem = getAnchorElement(elem)
@elem.data pluginName, @ @elem.data pluginName, @
@wrapper = $(coreStyle.html) #load user css into dom
@main = @wrapper.find ".#{className}Main" @loadCSS()
@content = @main.find ".#{className}Content" #load user html into @container
@loadHTML()
@wrapper = $(styles.core.html)
@wrapper.append @container
# add into dom # add into dom
@elem.before @wrapper @elem.before @wrapper
@main.css @calculateCSS() @container.css @calculateCSS()
@run(node) @run(node)
loadCSS: (style) ->
name = @options.style
style = @getStyle(name)
elem = style.cssElem
if elem
elem.html style.css
else
elem = create("style").attr('id', "#{name}-styles").html style.css
$("head").append elem
style.cssElem = elem
loadHTML: (style) ->
style = @getStyle(name)
@container = $(style.html)
@container.addClass "#{className}Container"
@text = @container.find '[data-notify=text]'
if @text.length is 0
throw "style: #{name} HTML is missing the: data-notify='text' attribute"
@text.addClass "#{className}Text"
buildArrow: -> buildArrow: ->
dir = @options.arrowPosition dir = @options.arrowPosition
size = @options.arrowSize size = @options.arrowSize
@@ -164,15 +185,15 @@ class Prompt
if showArrow then @arrow.show() else @arrow.hide() if showArrow then @arrow.show() else @arrow.hide()
showMain: (show) -> showMain: (show) ->
hidden = @main.parent().parents(':hidden').length > 0 hidden = @container.parent().parents(':hidden').length > 0
@main.show() if hidden and show @container.show() if hidden and show
@main.hide() if hidden and not show @container.hide() if hidden and not show
@main[@options.showAnimation] @options.showDuration if not hidden and show @container[@options.showAnimation] @options.showDuration if not hidden and show
@main[@options.hideAnimation] @options.hideDuration if not hidden and not show @container[@options.hideAnimation] @options.hideDuration if not hidden and not show
calculateCSS: () -> calculateCSS: () ->
elementPosition = @elem.position() elementPosition = @elem.position()
mainPosition = @main.parent().position() mainPosition = @container.parent().position()
height = @elem.outerHeight() height = @elem.outerHeight()
left = elementPosition.left - mainPosition.left left = elementPosition.left - mainPosition.left
height += (elementPosition.top - mainPosition.top) unless navigator.userAgent.match /MSIE/ height += (elementPosition.top - mainPosition.top) unless navigator.userAgent.match /MSIE/
@@ -184,6 +205,12 @@ class Prompt
getColor: -> getColor: ->
@options.colors[@options.color] or @options.color @options.colors[@options.color] or @options.color
getStyle: (name) ->
name = @options.style unless name
style = styles.user[name]
throw "Missing style: #{name}" unless style
style
#run plugin #run plugin
run: (node, options) -> run: (node, options) ->
#update options #update options
@@ -193,25 +220,25 @@ class Prompt
else if $.type(options) is 'string' else if $.type(options) is 'string'
@options.color = options @options.color = options
if @main and not node if @container and not node
@showMain false #hide @showMain false #hide
return return
else if not @main and not node else if not @container and not node
return return
#update content #update content
if $.type(node) is 'string' if $.type(node) is 'string'
@content.html node.replace('\n', '<br/>') @text.html node.replace('\n', '<br/>')
else else
@content.empty().append(node) @text.empty().append(node)
@content.css @text.css
'color': @getColor() 'color': @getColor()
'border-color': @getColor() 'border-color': @getColor()
@arrow.remove() if @arrow @arrow.remove() if @arrow
@buildArrow() @buildArrow()
@content.before @arrow @text.before @arrow
@showMain true @showMain true
@@ -225,8 +252,8 @@ class Prompt
#when ready, bind permanent hide listener #when ready, bind permanent hide listener
$ -> $ ->
#add core styles
$("head").append(create("style").html(coreStyle.css)) $("head").append(create("style").html(styles.core.css))
$(document).on 'click', ".#{className}", -> $(document).on 'click', ".#{className}", ->
inst = getAnchorElement($(@)).data pluginName inst = getAnchorElement($(@)).data pluginName
@@ -243,7 +270,7 @@ $[pluginName].options = (options) ->
$.extend pluginOptions, options $.extend pluginOptions, options
$[pluginName].addStyle = (s) -> $[pluginName].addStyle = (s) ->
$.extend true, userStyles, s $.extend true, styles.user, s
# $( ... ).pluginName( { .. } ) creates a cached instance on each # $( ... ).pluginName( { .. } ) creates a cached instance on each
# selected item with custom options for just that instance # selected item with custom options for just that instance