Subversion-Projekte lars-tiefland.ci

/**
 * @author Will Steinmetz
 * 
 * jQuery notification plug-in inspired by the notification style of Windows 8
 * 
 * Copyright (c)2013, Will Steinmetz
 * Licensed under the BSD license.
 * http://opensource.org/licenses/BSD-3-Clause
 */
;(function($) {
        var settings = {
                life: 10000,
                theme: 'teal',
                sticky: false,
                verticalEdge: 'right',
                horizontalEdge: 'top',
                zindex: 1100
        };
        
        var methods = {
                init: function(message, options) {
                        return this.each(function() {
                                var $this = $(this),
                                        data = $this.data('notific8');
                                        
                $this.data('notific8', {
                    target: $this,
                    settings: {},
                    message: ""
                });
                data = $this.data('notific8');
                                data.message = message;
                                
                                // apply the options
                                $.extend(data.settings, settings, options);
                                
                                // add the notification to the stack
                                methods._buildNotification($this);
                        });
                },
                
        /**
         * Destroy the notification
         */
                destroy: function($this) {
                        var data = $this.data('notific8');
                        
                        $(window).unbind('.notific8');
                        $this.removeData('notific8');
                },
                
                /**
                 * Build the notification and add it to the screen's stack
                 */
                _buildNotification: function($this) {
                        var data = $this.data('notific8'),
                                notification = $('<div />'),
                                num = Number($('body').attr('data-notific8s'));
            num++;
                        
                        notification.addClass('jquery-notific8-notification').addClass(data.settings.theme);
                        notification.attr('id', 'jquery-notific8-notification-' + num);
                        $('body').attr('data-notific8s', num);
                        
                        // check for a heading
                        if (data.settings.hasOwnProperty('heading') && (typeof data.settings.heading == "string")) {
                                notification.append($('<div />').addClass('jquery-notific8-heading').html(data.settings.heading));
                        }
                        
                        // check if the notification is supposed to be sticky
                        if (data.settings.sticky) {
                            var close = $('<div />').addClass('jquery-notific8-close-sticky').append(
                    $('<span />').html('close x')
                );
                close.click(function(event) {
                    notification.animate({width: 'hide'}, {
                        duration: 'fast',
                        complete: function() {
                            notification.remove();
                        }
                    });
                });
                notification.append(close);
                notification.addClass('sticky');
            }
            // otherwise, put the normal close button up that is only display
            // when the notification is hovered over
            else {
                var close = $('<div />').addClass('jquery-notific8-close').append(
                    $('<span />').html('X')
                );
                close.click(function(event) {
                    notification.animate({width: 'hide'}, {
                        duration: 'fast',
                        complete: function() {
                            notification.remove();
                        }
                    });
                });
                notification.append(close);
            }
                        
                        // add the message
                        notification.append($('<div />').addClass('jquery-notific8-message').html(data.message));
                        
                        // add the notification to the stack
                        $('.jquery-notific8-container.' + data.settings.verticalEdge + '.' + data.settings.horizontalEdge).append(notification);
                        
                        // slide the message onto the screen
                        notification.animate({width: 'show'}, {
                            duration: 'fast',
                            complete: function() {
                    if (!data.settings.sticky) {
                        (function(n, l) {
                            setTimeout(function() {
                                n.animate({width: 'hide'}, {
                                   duration: 'fast',
                                   complete: function() {
                                       n.remove();
                                   } 
                                });
                            }, l);
                        })(notification, data.settings.life);
                    }
                    data.settings = {};
                }
                        });
                },
        
        /**
         * Set up the configuration settings
         */
        configure: function(options) {
            $.extend(settings, options);
        },
        
        /**
         * Set up the z-index
         */
        zindex: function(zindex) {
            settings.zindex = zindex;
        }
        };
        
        // wrapper since this plug-in is called without selecting an item first
        $.notific8 = function(message, options) {
                switch (message) {
            case 'configure':
            case 'config':
                return methods.configure.apply(this, [options]);
            break;
            case 'zindex':
                return methods.zindex.apply(this, [options]);
            break;
            default:
                if (typeof options == 'undefined') {
                    options = {};
                }
                
                // make sure that the stack containers exist
                if ($('.jquery-notific8-container').size() === 0) {
                    var $body = $('body');
                    $body.attr('data-notific8s', 0);
                    $body.append($('<div />').addClass('jquery-notific8-container').addClass('top').addClass('right'));
                    $body.append($('<div />').addClass('jquery-notific8-container').addClass('top').addClass('left'));
                    $body.append($('<div />').addClass('jquery-notific8-container').addClass('bottom').addClass('right'));
                    $body.append($('<div />').addClass('jquery-notific8-container').addClass('bottom').addClass('left'));
                    $('.jquery-notific8-container').css('z-index', settings.zindex);
                }
                
                // make sure the edge settings exist
                if ((!options.hasOwnProperty('verticalEdge')) || ((options.verticalEdge.toLowerCase() != 'right') && (options.verticalEdge.toLowerCase() != 'left'))) {
                    options.verticalEdge = settings.verticalEdge;
                }
                if ((!options.hasOwnProperty('horizontalEdge')) || ((options.horizontalEdge.toLowerCase() != 'top') && (options.horizontalEdge.toLowerCase() != 'bottom'))) {
                    options.horizontalEdge = settings.horizontalEdge;
                }
                options.verticalEdge = options.verticalEdge.toLowerCase();
                options.horizontalEdge = options.horizontalEdge.toLowerCase();
                
                //display the notification in the right corner
                $('.jquery-notific8-container.' + options.verticalEdge + '.' + options.horizontalEdge).notific8(message, options);
            break;
        }
        };
        
        // plugin setup
        $.fn.notific8 = function(message, options) {
        if (typeof message == "string") {
            return methods.init.apply(this, arguments);
        } else {
            $.error('jQuery.notific8 takes a string message as the first parameter');
        }
        };
})(jQuery);