Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Support multiple custom ('inline') containers with independent notifications #86

Closed
wants to merge 2 commits into from

3 participants

@ClemensSchneider

This is a first shot on supporting multiple custom containers with independent notfications.

So if you have two containers and create noties on them, each of them is able to show notifications independently.

The Notification object gets a method 'getReferenceContainer' which returns the jquery-selector that defines the context in which to search for an existing ul-container. In case the Notification is a 'custom' one, we return the selector for the element the noty was created on, otherwise we return the body element as context.
For the inline-layout (layouts/inline.js), this means that the selector has to be class-based instead of id-based, so that multiple containers may exist on a page.

It's possible that I'm still missing some obvious spots and maybe there is a better approach in supporting this feature - just let me know.

@jaunkst

Works for me, I prefer this to single containers.

@needim needim closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Sep 16, 2012
  1. removed unnecessary newline at end of file

    Clemens authored
This page is out of date. Refresh to see the latest.
View
27 js/noty/jquery.noty.js
@@ -83,7 +83,7 @@ if (typeof Object.create !== 'function') {
var self = this;
- $(self.options.layout.container.selector).append(self.$bar);
+ self.getReferenceContainer().find(self.options.layout.container.selector).append(self.$bar);
self.options.theme.style.apply(self);
@@ -91,7 +91,7 @@ if (typeof Object.create !== 'function') {
self.$bar.addClass(self.options.layout.addClass);
- self.options.layout.container.style.apply($(self.options.layout.container.selector));
+ self.options.layout.container.style.apply(self.getReferenceContainer().find(self.options.layout.container.selector));
self.options.theme.callback.onShow.apply(this);
@@ -161,7 +161,7 @@ if (typeof Object.create !== 'function') {
// Layout Cleaning
$.notyRenderer.setLayoutCountFor(self, -1);
- if ($.notyRenderer.getLayoutCountFor(self) == 0) $(self.options.layout.container.selector).remove();
+ if ($.notyRenderer.getLayoutCountFor(self) == 0) self.getReferenceContainer().find(self.options.layout.container.selector).remove();
self.$bar.remove();
self.$bar = null;
@@ -196,6 +196,10 @@ if (typeof Object.create !== 'function') {
}
return this;
},
+
+ getReferenceContainer : function() {
+ return this.options.custom ? this.options.custom : $('body');
+ },
closed: false,
shown: false
@@ -243,14 +247,11 @@ if (typeof Object.create !== 'function') {
}
// Where is the container?
- if ($(notification.options.layout.container.selector).length == 0) {
- if (notification.options.custom) {
- notification.options.custom.append($(notification.options.layout.container.object).addClass('i-am-new'));
- } else {
- $('body').append($(notification.options.layout.container.object).addClass('i-am-new'));
- }
+ var $referenceContainer = notification.getReferenceContainer();
+ if ($referenceContainer.find(notification.options.layout.container.selector).length == 0) {
+ $referenceContainer.append($(notification.options.layout.container.object).addClass('i-am-new'));
} else {
- $(notification.options.layout.container.selector).removeClass('i-am-new');
+ $referenceContainer.find(notification.options.layout.container.selector).removeClass('i-am-new');
}
$.notyRenderer.setLayoutCountFor(notification, +1);
@@ -264,11 +265,11 @@ if (typeof Object.create !== 'function') {
};
$.notyRenderer.getLayoutCountFor = function(notification) {
- return $(notification.options.layout.container.selector).data('noty_layout_count') || 0;
+ return notification.getReferenceContainer().data('noty_layout_count') || 0;
};
$.notyRenderer.setLayoutCountFor = function(notification, arg) {
- return $(notification.options.layout.container.selector).data('noty_layout_count', $.notyRenderer.getLayoutCountFor(notification) + arg);
+ return notification.getReferenceContainer().data('noty_layout_count', $.notyRenderer.getLayoutCountFor(notification) + arg);
};
$.notyRenderer.getModalCount = function() {
@@ -278,7 +279,7 @@ if (typeof Object.create !== 'function') {
$.notyRenderer.setModalCount = function(arg) {
return $('.noty_modal').data('noty_modal_count', $.notyRenderer.getModalCount() + arg);
};
-
+
// This is for custom container
$.fn.noty = function(options) {
options.custom = $(this);
View
4 js/noty/layouts/inline.js
@@ -4,8 +4,8 @@
name: 'inline',
options: {},
container: {
- object: '<ul id="noty_inline_layout_container" />',
- selector: 'ul#noty_inline_layout_container',
+ object: '<ul class="noty_inline_layout_container" />',
+ selector: 'ul.noty_inline_layout_container',
style: function() {
$(this).css({
width: '100%',
View
16 js/noty/themes/default.js
@@ -5,20 +5,20 @@
helpers: {
borderFix: function() {
if (this.options.dismissQueue) {
- var selector = this.options.layout.container.selector + ' ' + this.options.layout.parent.selector;
+ var selection = this.getReferenceContainer().find(this.options.layout.container.selector + ' ' + this.options.layout.parent.selector);
switch (this.options.layout.name) {
case 'top':
- $(selector).css({borderRadius: '0px 0px 0px 0px'});
- $(selector).last().css({borderRadius: '0px 0px 5px 5px'}); break;
+ selection.css({borderRadius: '0px 0px 0px 0px'});
+ selection.last().css({borderRadius: '0px 0px 5px 5px'}); break;
case 'topCenter': case 'topLeft': case 'topRight':
case 'bottomCenter': case 'bottomLeft': case 'bottomRight':
case 'center': case 'centerLeft': case 'centerRight': case 'inline':
- $(selector).css({borderRadius: '0px 0px 0px 0px'});
- $(selector).first().css({'border-top-left-radius': '5px', 'border-top-right-radius': '5px'});
- $(selector).last().css({'border-bottom-left-radius': '5px', 'border-bottom-right-radius': '5px'}); break;
+ selection.css({borderRadius: '0px 0px 0px 0px'});
+ selection.first().css({'border-top-left-radius': '5px', 'border-top-right-radius': '5px'});
+ selection.last().css({'border-bottom-left-radius': '5px', 'border-bottom-right-radius': '5px'}); break;
case 'bottom':
- $(selector).css({borderRadius: '0px 0px 0px 0px'});
- $(selector).first().css({borderRadius: '5px 5px 0px 0px'}); break;
+ selection.css({borderRadius: '0px 0px 0px 0px'});
+ selection.first().css({borderRadius: '5px 5px 0px 0px'}); break;
default: break;
}
}
Something went wrong with that request. Please try again.