[6280] | 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)); |
---|