+
"""
@@ -65,18 +87,22 @@ styles =
bootstrap:
html: """
-
test
+
+ Warning!
+
"""
css: """
- body {
- test: 42
+ .#{className}Bootstrap {
+ white-space: nowrap;
}
"""
+ colors:
+ red: '#eed3d7'
#overridable options
pluginOptions =
- autoHidePrompt: false
- autoHideDelay: 10000
+ autoHide: false
+ autoHideDelay: 2000
arrowShow: true
arrowSize: 5
arrowPosition: 'top'
@@ -86,13 +112,13 @@ pluginOptions =
color: 'red'
# Color mappings
colors:
- red: '#ee0101'
+ red: '#b94a48'
green: '#33be40'
black: '#393939'
blue: '#00f'
- showAnimation: 'fadeIn'
+ showAnimation: 'slideDown'
showDuration: 200
- hideAnimation: 'fadeOut'
+ hideAnimation: 'slideUp'
hideDuration: 600
# Gap between main and element
gap: 2
@@ -107,7 +133,10 @@ create = (tag) ->
Options = (options) -> $.extend @, options
Options:: = pluginOptions
- #gets first on n radios, and gets the fancy stylised input for hidden inputs
+# container for element-less notifications
+cornerElem = create("div").addClass("#{className}Corner")
+
+#gets first on n radios, and gets the fancy stylised input for hidden inputs
getAnchorElement = (element) ->
#choose the first of n radios
if element.is('[type=radio]')
@@ -120,33 +149,38 @@ getAnchorElement = (element) ->
element
#define plugin
-class Prompt
+class Notification
#setup instance variables
- constructor: (elem, node, options) ->
+ constructor: (elem, data, options) ->
options = {color: options} if $.type(options) is 'string'
@options = new Options if $.isPlainObject(options) then options else {}
- @elementType = elem.attr('type')
- @originalElement = elem
- @elem = getAnchorElement(elem)
- @elem.data pluginName, @
-
#load user css into dom
@loadCSS()
- #load user html into @container
+ #load user html into @userContainer
@loadHTML()
@wrapper = $(styles.core.html)
+ @wrapper.data pluginName, @
@container = @wrapper.find ".#{className}Container"
-
@container.append @userContainer
- # add into dom
- @elem.before @wrapper
- @container.css @calculateCSS()
+ if elem and elem.length
+ @elementType = elem.attr('type')
+ @originalElement = elem
+ @elem = getAnchorElement(elem)
+ @elem.data pluginName, @
+ # add into dom above elem
+ @elem.before @wrapper
+ @container.css @calculateCSS()
+ else
+ # @options.autoHide = true
+ @options.arrowShow = false
+ cornerElem.prepend @wrapper
- @run(node)
+ @container.hide()
+ @run(data)
loadCSS: (style) ->
name = @options.style
@@ -188,7 +222,7 @@ class Prompt
showArrow = @options.arrowShow and @elementType isnt 'radio'
if showArrow then @arrow.show() else @arrow.hide()
- showMain: (show) ->
+ show: (show) ->
hidden = @container.parent().parents(':hidden').length > 0
@container.show() if hidden and show
@container.hide() if hidden and not show
@@ -207,7 +241,11 @@ class Prompt
}
getColor: ->
- @options.colors[@options.color] or @options.color
+ styleColors = @getStyle().colors
+ return (styleColors and
+ styleColors[@options.color]) or
+ @options.colors[@options.color] or
+ @options.color
getStyle: (name) ->
name = @options.style unless name
@@ -216,7 +254,7 @@ class Prompt
style
#run plugin
- run: (node, options) ->
+ run: (data, options) ->
#update options
if $.isPlainObject(options)
$.extend @options, options
@@ -224,52 +262,64 @@ class Prompt
else if $.type(options) is 'string'
@options.color = options
- if @container and not node
- @showMain false #hide
+ if @container and not data
+ @show false #hide
return
- else if not @container and not node
+ else if not @container and not data
return
#update content
- if $.type(node) is 'string'
- @text.html node.replace('\n', '
')
+ if $.type(data) is 'string'
+ @text.html data.replace('\n', '
')
else
- @text.empty().append(node)
-
+ @text.empty().append(data)
color = @getColor()
@container.find('[data-notify-style]').each ->
s = $(@).attr 'data-notify-style'
- $(@).attr 'style', s.replace /\{\{\s*COLOR\s*\}\}/ig, color
+ $(@).attr 'style', s.replace /\{\{\s*color\s*\}\}/ig, color
@arrow.remove() if @arrow
@buildArrow()
@container.prepend @arrow
- @showMain true
+ @show true
#autohide
- if @options.autoHidePrompt
- clearTimeout @elem.data 'mainTimer'
- t = setTimeout ->
- @showMain false
+ if @options.autoHide
+ clearTimeout @autohideTimer
+ autohideTimer = setTimeout =>
+ @show false
, @options.autoHideDelay
- @elem.data 'mainTimer', t
#when ready, bind permanent hide listener
$ ->
+ $("body").append cornerElem
+
+ #auto-detect bootstrap
+ $("link").each ->
+ src = $(@).attr 'href'
+ if src.match /bootstrap[^\/]*\.css/
+ $[pluginName].options {style:'bootstrap'}
+ return false
#add core styles
$("head").append(create("style").html(styles.core.css))
-
- $(document).on 'click', ".#{className}", ->
- inst = getAnchorElement($(@)).data pluginName
- inst.showMain false if inst?
+ #watch all notifications clicks
+ $(document).on 'click', ".#{className}Wrapper", ->
+ inst = $(@).data pluginName
+ inst.show false if inst
# publicise jquery plugin
# return alert "$.#{pluginName} already defined" if $[pluginName]?
# $.pluginName( { ... } ) changes options for all instances
-$[pluginName] = (elem, node, options) ->
- $(elem)[pluginName](node, options)
+$[pluginName] = (elem, data, options) ->
+ if elem instanceof HTMLElement or
+ elem.jquery
+ $(elem)[pluginName](data, options)
+ else
+ options = data
+ data = elem
+ new Notification null, data, options
# publicise options method
$[pluginName].options = (options) ->
@@ -281,13 +331,11 @@ $[pluginName].addStyle = (s) ->
# $( ... ).pluginName( { .. } ) creates a cached instance on each
# selected item with custom options for just that instance
# return alert "$.fn#{pluginName} already defined" if $.fn[pluginName]?
-$.fn[pluginName] = (node, options) ->
+$.fn[pluginName] = (data, options) ->
$(@).each ->
inst = getAnchorElement($(@)).data pluginName
- if inst?
- inst.run node, options
+ if inst
+ inst.run data, options
else
- new Prompt $(@), node, options
-
-#ps. alex is gay.
+ new Notification $(@), data, options