Details | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 1 | espaco | 1 | /** |
| 2 | * @author Will Steinmetz |
||
| 3 | * |
||
| 4 | * jQuery notification plug-in inspired by the notification style of Windows 8 |
||
| 5 | * |
||
| 6 | * Copyright (c)2013, Will Steinmetz |
||
| 7 | * Licensed under the BSD license. |
||
| 8 | * http://opensource.org/licenses/BSD-3-Clause |
||
| 9 | */ |
||
| 10 | ;(function($) { |
||
| 11 | var settings = { |
||
| 12 | life: 10000, |
||
| 13 | theme: 'teal', |
||
| 14 | sticky: false, |
||
| 15 | verticalEdge: 'right', |
||
| 16 | horizontalEdge: 'top', |
||
| 17 | zindex: 1100 |
||
| 18 | }; |
||
| 19 | |||
| 20 | var methods = { |
||
| 21 | init: function(message, options) { |
||
| 22 | return this.each(function() { |
||
| 23 | var $this = $(this), |
||
| 24 | data = $this.data('notific8'); |
||
| 25 | |||
| 26 | $this.data('notific8', { |
||
| 27 | target: $this, |
||
| 28 | settings: {}, |
||
| 29 | message: "" |
||
| 30 | }); |
||
| 31 | data = $this.data('notific8'); |
||
| 32 | data.message = message; |
||
| 33 | |||
| 34 | // apply the options |
||
| 35 | $.extend(data.settings, settings, options); |
||
| 36 | |||
| 37 | // add the notification to the stack |
||
| 38 | methods._buildNotification($this); |
||
| 39 | }); |
||
| 40 | }, |
||
| 41 | |||
| 42 | /** |
||
| 43 | * Destroy the notification |
||
| 44 | */ |
||
| 45 | destroy: function($this) { |
||
| 46 | var data = $this.data('notific8'); |
||
| 47 | |||
| 48 | $(window).unbind('.notific8'); |
||
| 49 | $this.removeData('notific8'); |
||
| 50 | }, |
||
| 51 | |||
| 52 | /** |
||
| 53 | * Build the notification and add it to the screen's stack |
||
| 54 | */ |
||
| 55 | _buildNotification: function($this) { |
||
| 56 | var data = $this.data('notific8'), |
||
| 57 | notification = $('<div />'), |
||
| 58 | num = Number($('body').attr('data-notific8s')); |
||
| 59 | num++; |
||
| 60 | |||
| 61 | notification.addClass('jquery-notific8-notification').addClass(data.settings.theme); |
||
| 62 | notification.attr('id', 'jquery-notific8-notification-' + num); |
||
| 63 | $('body').attr('data-notific8s', num); |
||
| 64 | |||
| 65 | // check for a heading |
||
| 66 | if (data.settings.hasOwnProperty('heading') && (typeof data.settings.heading == "string")) { |
||
| 67 | notification.append($('<div />').addClass('jquery-notific8-heading').html(data.settings.heading)); |
||
| 68 | } |
||
| 69 | |||
| 70 | // check if the notification is supposed to be sticky |
||
| 71 | if (data.settings.sticky) { |
||
| 72 | var close = $('<div />').addClass('jquery-notific8-close-sticky').append( |
||
| 73 | $('<span />').html('close x') |
||
| 74 | ); |
||
| 75 | close.click(function(event) { |
||
| 76 | notification.animate({width: 'hide'}, { |
||
| 77 | duration: 'fast', |
||
| 78 | complete: function() { |
||
| 79 | notification.remove(); |
||
| 80 | } |
||
| 81 | }); |
||
| 82 | }); |
||
| 83 | notification.append(close); |
||
| 84 | notification.addClass('sticky'); |
||
| 85 | } |
||
| 86 | // otherwise, put the normal close button up that is only display |
||
| 87 | // when the notification is hovered over |
||
| 88 | else { |
||
| 89 | var close = $('<div />').addClass('jquery-notific8-close').append( |
||
| 90 | $('<span />').html('X') |
||
| 91 | ); |
||
| 92 | close.click(function(event) { |
||
| 93 | notification.animate({width: 'hide'}, { |
||
| 94 | duration: 'fast', |
||
| 95 | complete: function() { |
||
| 96 | notification.remove(); |
||
| 97 | } |
||
| 98 | }); |
||
| 99 | }); |
||
| 100 | notification.append(close); |
||
| 101 | } |
||
| 102 | |||
| 103 | // add the message |
||
| 104 | notification.append($('<div />').addClass('jquery-notific8-message').html(data.message)); |
||
| 105 | |||
| 106 | // add the notification to the stack |
||
| 107 | $('.jquery-notific8-container.' + data.settings.verticalEdge + '.' + data.settings.horizontalEdge).append(notification); |
||
| 108 | |||
| 109 | // slide the message onto the screen |
||
| 110 | notification.animate({width: 'show'}, { |
||
| 111 | duration: 'fast', |
||
| 112 | complete: function() { |
||
| 113 | if (!data.settings.sticky) { |
||
| 114 | (function(n, l) { |
||
| 115 | setTimeout(function() { |
||
| 116 | n.animate({width: 'hide'}, { |
||
| 117 | duration: 'fast', |
||
| 118 | complete: function() { |
||
| 119 | n.remove(); |
||
| 120 | } |
||
| 121 | }); |
||
| 122 | }, l); |
||
| 123 | })(notification, data.settings.life); |
||
| 124 | } |
||
| 125 | data.settings = {}; |
||
| 126 | } |
||
| 127 | }); |
||
| 128 | }, |
||
| 129 | |||
| 130 | /** |
||
| 131 | * Set up the configuration settings |
||
| 132 | */ |
||
| 133 | configure: function(options) { |
||
| 134 | $.extend(settings, options); |
||
| 135 | }, |
||
| 136 | |||
| 137 | /** |
||
| 138 | * Set up the z-index |
||
| 139 | */ |
||
| 140 | zindex: function(zindex) { |
||
| 141 | settings.zindex = zindex; |
||
| 142 | } |
||
| 143 | }; |
||
| 144 | |||
| 145 | // wrapper since this plug-in is called without selecting an item first |
||
| 146 | $.notific8 = function(message, options) { |
||
| 147 | switch (message) { |
||
| 148 | case 'configure': |
||
| 149 | case 'config': |
||
| 150 | return methods.configure.apply(this, [options]); |
||
| 151 | break; |
||
| 152 | case 'zindex': |
||
| 153 | return methods.zindex.apply(this, [options]); |
||
| 154 | break; |
||
| 155 | default: |
||
| 156 | if (typeof options == 'undefined') { |
||
| 157 | options = {}; |
||
| 158 | } |
||
| 159 | |||
| 160 | // make sure that the stack containers exist |
||
| 161 | if ($('.jquery-notific8-container').size() === 0) { |
||
| 162 | var $body = $('body'); |
||
| 163 | $body.attr('data-notific8s', 0); |
||
| 164 | $body.append($('<div />').addClass('jquery-notific8-container').addClass('top').addClass('right')); |
||
| 165 | $body.append($('<div />').addClass('jquery-notific8-container').addClass('top').addClass('left')); |
||
| 166 | $body.append($('<div />').addClass('jquery-notific8-container').addClass('bottom').addClass('right')); |
||
| 167 | $body.append($('<div />').addClass('jquery-notific8-container').addClass('bottom').addClass('left')); |
||
| 168 | $('.jquery-notific8-container').css('z-index', settings.zindex); |
||
| 169 | } |
||
| 170 | |||
| 171 | // make sure the edge settings exist |
||
| 172 | if ((!options.hasOwnProperty('verticalEdge')) || ((options.verticalEdge.toLowerCase() != 'right') && (options.verticalEdge.toLowerCase() != 'left'))) { |
||
| 173 | options.verticalEdge = settings.verticalEdge; |
||
| 174 | } |
||
| 175 | if ((!options.hasOwnProperty('horizontalEdge')) || ((options.horizontalEdge.toLowerCase() != 'top') && (options.horizontalEdge.toLowerCase() != 'bottom'))) { |
||
| 176 | options.horizontalEdge = settings.horizontalEdge; |
||
| 177 | } |
||
| 178 | options.verticalEdge = options.verticalEdge.toLowerCase(); |
||
| 179 | options.horizontalEdge = options.horizontalEdge.toLowerCase(); |
||
| 180 | |||
| 181 | //display the notification in the right corner |
||
| 182 | $('.jquery-notific8-container.' + options.verticalEdge + '.' + options.horizontalEdge).notific8(message, options); |
||
| 183 | break; |
||
| 184 | } |
||
| 185 | }; |
||
| 186 | |||
| 187 | // plugin setup |
||
| 188 | $.fn.notific8 = function(message, options) { |
||
| 189 | if (typeof message == "string") { |
||
| 190 | return methods.init.apply(this, arguments); |
||
| 191 | } else { |
||
| 192 | $.error('jQuery.notific8 takes a string message as the first parameter'); |
||
| 193 | } |
||
| 194 | }; |
||
| 195 | })(jQuery); |