1 | /** |
---|
2 | * Freeow! |
---|
3 | * Stylish, Growl-like message boxes |
---|
4 | * |
---|
5 | * Copyright (c) 2012 PJ Dietz |
---|
6 | * Version: 1.0.2 |
---|
7 | * Modified: 2012-05-03 |
---|
8 | * Licensed under the MIT license: |
---|
9 | * http://www.opensource.org/licenses/mit-license.php |
---|
10 | * |
---|
11 | * http://pjdietz.com/jquery-plugins/freeow/ |
---|
12 | */ |
---|
13 | |
---|
14 | /*global setTimeout, jQuery */ |
---|
15 | |
---|
16 | (function ($) { |
---|
17 | |
---|
18 | "use strict"; |
---|
19 | |
---|
20 | var Freeow; |
---|
21 | |
---|
22 | Freeow = function (title, message, options) { |
---|
23 | |
---|
24 | var startStyle, i, u; |
---|
25 | |
---|
26 | // Merge the options. |
---|
27 | this.options = $.extend({}, $.fn.freeow.defaults, options); |
---|
28 | |
---|
29 | // Build the element with the template function. |
---|
30 | this.element = $(this.options.template(title, message)); |
---|
31 | |
---|
32 | // Set its initial style to the startStyle or hideStyle. |
---|
33 | if (this.options.startStyle) { |
---|
34 | startStyle = this.options.startStyle; |
---|
35 | } |
---|
36 | else { |
---|
37 | startStyle = this.options.hideStyle; |
---|
38 | } |
---|
39 | this.element.css(startStyle); |
---|
40 | |
---|
41 | // Store a reference to it in the data. |
---|
42 | this.element.data("freeow", this); |
---|
43 | |
---|
44 | // Add to the element. |
---|
45 | for (i = 0, u = this.options.classes.length; i < u; i += 1) { |
---|
46 | this.element.addClass(this.options.classes[i]); |
---|
47 | } |
---|
48 | |
---|
49 | // Bind the event handler. |
---|
50 | this.element.click(this.options.onClick); |
---|
51 | this.element.hover(this.options.onHover); |
---|
52 | |
---|
53 | // Default. Set to true in show() if there's an autoHideDelay. |
---|
54 | this.autoHide = false; |
---|
55 | |
---|
56 | }; |
---|
57 | |
---|
58 | Freeow.prototype = { |
---|
59 | |
---|
60 | attach: function (container) { |
---|
61 | |
---|
62 | if (this.options.prepend) { |
---|
63 | $(container).prepend(this.element); |
---|
64 | } else { |
---|
65 | $(container).append(this.element); |
---|
66 | } |
---|
67 | |
---|
68 | this.show(); |
---|
69 | }, |
---|
70 | |
---|
71 | show: function () { |
---|
72 | |
---|
73 | var opts, self, fn, delay; |
---|
74 | |
---|
75 | opts = { |
---|
76 | duration: this.showDuration |
---|
77 | }; |
---|
78 | |
---|
79 | // If an auto hide delay is set, create a callback function and |
---|
80 | // set it to fire after the auto hide time expires. |
---|
81 | if (this.options.autoHide && this.options.autoHideDelay > 0) { |
---|
82 | |
---|
83 | this.autoHide = true; |
---|
84 | |
---|
85 | self = this; |
---|
86 | delay = this.options.autoHideDelay; |
---|
87 | fn = function () { |
---|
88 | if (self.autoHide) { |
---|
89 | self.hide(); |
---|
90 | } |
---|
91 | }; |
---|
92 | |
---|
93 | opts.complete = function () { |
---|
94 | setTimeout(fn, delay); |
---|
95 | }; |
---|
96 | |
---|
97 | } |
---|
98 | |
---|
99 | // Animate to the "show" style. |
---|
100 | // Optionally, set the auto hide function to fire on a delay. |
---|
101 | this.element.animate(this.options.showStyle, opts); |
---|
102 | |
---|
103 | }, |
---|
104 | |
---|
105 | hide: function () { |
---|
106 | |
---|
107 | var self = this; // Keep "this" from current scope; |
---|
108 | |
---|
109 | this.element.animate(this.options.hideStyle, { |
---|
110 | duration: this.options.hideDuration, |
---|
111 | complete: function () { |
---|
112 | self.destroy(); |
---|
113 | } |
---|
114 | }); |
---|
115 | |
---|
116 | }, |
---|
117 | |
---|
118 | destroy: function () { |
---|
119 | |
---|
120 | // Remove the Freeow instance from the element's data. |
---|
121 | this.element.data("freeow", undefined); |
---|
122 | |
---|
123 | // Remove the element from the DOM. |
---|
124 | this.element.remove(); |
---|
125 | |
---|
126 | } |
---|
127 | |
---|
128 | }; |
---|
129 | |
---|
130 | // Extend jQuery ----------------------------------------------------------- |
---|
131 | |
---|
132 | if (typeof $.fn.freeow === "undefined") { |
---|
133 | |
---|
134 | $.fn.extend({ |
---|
135 | |
---|
136 | freeow: function (title, message, options) { |
---|
137 | |
---|
138 | return this.each(function () { |
---|
139 | |
---|
140 | var f; |
---|
141 | |
---|
142 | f = new Freeow(title, message, options); |
---|
143 | f.attach(this); |
---|
144 | |
---|
145 | }); // return this.each() |
---|
146 | |
---|
147 | } // freeow() |
---|
148 | |
---|
149 | }); // $.fn.extend() |
---|
150 | |
---|
151 | // Configuration Defaults. |
---|
152 | $.fn.freeow.defaults = { |
---|
153 | |
---|
154 | autoHide: true, |
---|
155 | autoHideDelay: 3000, |
---|
156 | classes: [], |
---|
157 | prepend: true, |
---|
158 | startStyle: null, |
---|
159 | showStyle: {opacity: 1.0}, |
---|
160 | showDuration: 250, |
---|
161 | hideStyle: {opacity: 0.0}, |
---|
162 | hideDuration: 500, |
---|
163 | |
---|
164 | onClick: function (event) { |
---|
165 | $(this).data("freeow").hide(); |
---|
166 | }, |
---|
167 | |
---|
168 | onHover: function (event) { |
---|
169 | $(this).data("freeow").autoHide = false; |
---|
170 | }, |
---|
171 | |
---|
172 | template: function (title, message) { |
---|
173 | |
---|
174 | var e; |
---|
175 | |
---|
176 | e = [ |
---|
177 | '<div>', |
---|
178 | '<div class="background">', |
---|
179 | '<div class="content">', |
---|
180 | '<h2>' + title + '</h2>', |
---|
181 | '<p>' + message + '</p>', |
---|
182 | '</div>', |
---|
183 | '</div>', |
---|
184 | '<span class="icon"></span>', |
---|
185 | '<span class="close"></span>', |
---|
186 | '</div>' |
---|
187 | ].join(""); |
---|
188 | |
---|
189 | return e; |
---|
190 | } |
---|
191 | |
---|
192 | }; // $.fn.freeow.defaults |
---|
193 | |
---|
194 | } // if undefined |
---|
195 | |
---|
196 | }(jQuery)); |
---|