Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Add new inline layouts, top and center, for custom containers #116

Closed
wants to merge 1 commit into from

2 participants

@bsrykt

These two new inline layouts mimic the top and center layouts for custom containers.

New layouts can be activated by specifying a layout option when using noty with custom containers. If layout option is not specified default "inline" layout is activated.

@needim needim closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
View
2  js/noty/jquery.noty.js
@@ -28,7 +28,7 @@ if (typeof Object.create !== 'function') {
// Mix in the passed in options with the default options
this.options = $.extend({}, $.noty.defaults, options);
- this.options.layout = (this.options.custom) ? $.noty.layouts['inline'] : $.noty.layouts[this.options.layout];
+ this.options.layout = (this.options.custom) ? $.noty.layouts['inline' + (options.layout ? '_' + options.layout : '')] : $.noty.layouts[this.options.layout];
this.options.theme = $.noty.themes[this.options.theme];
delete options.layout;
View
56 js/noty/layouts/inline.center.js
@@ -0,0 +1,56 @@
+;(function($) {
+
+ $.noty.layouts.inline_center = {
+ name: 'inline_center',
+ options: {},
+ container: {
+ object: '<ul id="noty_inline_layout_container" />',
+ selector: 'ul#noty_inline_layout_container',
+ style: function() {
+ $(this).parent().css({position: 'relative'});
+
+
+
+ $(this).css({
+ position: 'absolute',
+ width: '310px',
+ height: 'auto',
+ margin: 0,
+ padding: 0,
+ listStyleType: 'none',
+ zIndex: 10000000
+ });
+
+ // getting hidden height
+ var dupe = $(this).clone().css({visibility:"hidden", display:"block", position:"absolute", top: 0, left: 0}).attr('id', 'dupe');
+ $("body").append(dupe);
+ dupe.find('.i-am-closing-now').remove();
+ dupe.find('li').css('display', 'block');
+ var actual_height = dupe.height();
+ dupe.remove();
+
+ if ($(this).hasClass('i-am-new')) {
+ $(this).css({
+ left: ($(this).parent().width() - $(this).outerWidth(false)) / 2 + 'px',
+ top: ($(this).parent().outerHeight(false) - actual_height) / 2 + $(this).parent().scrollTop() + 'px'
+ });
+ } else {
+ $(this).animate({
+ left: ($(this).parent().width() - $(this).outerWidth(false)) / 2 + 'px',
+ top: ($(this).parent().outerHeight(false) - $(this).parent().scrollTop() - actual_height) / 2 + $(this).parent().scrollTop() + 'px'
+ }, 500);
+ }
+ }
+ },
+ parent: {
+ object: '<li />',
+ selector: 'li',
+ css: {}
+ },
+ css: {
+ display: 'none'
+ },
+ addClass: ''
+ };
+
+})(jQuery);
View
36 js/noty/layouts/inline.top.js
@@ -0,0 +1,36 @@
+;(function($) {
+
+ $.noty.layouts.inline_top = {
+ name: 'inline_top',
+ options: {},
+ container: {
+ object: '<ul id="noty_inline_layout_container" />',
+ selector: 'ul#noty_inline_layout_container',
+ style: function() {
+ $(this).parent().css({position: 'relative'});
+
+ $(this).css({
+ position: 'absolute',
+ top: $(this).parent().scrollTop() + 'px',
+ left: '5%',
+ width: '90%',
+ height: 'auto',
+ margin: 0,
+ padding: 0,
+ listStyleType: 'none',
+ zIndex: 9999999
+ });
+ }
+ },
+ parent: {
+ object: '<li />',
+ selector: 'li',
+ css: {}
+ },
+ css: {
+ display: 'none'
+ },
+ addClass: ''
+ };
+
+})(jQuery);
View
4 js/noty/themes/default.js
@@ -8,6 +8,7 @@
var selector = this.options.layout.container.selector + ' ' + this.options.layout.parent.selector;
switch (this.options.layout.name) {
case 'top':
+ case 'inline_top':
$(selector).css({borderRadius: '0px 0px 0px 0px'});
$(selector).last().css({borderRadius: '0px 0px 5px 5px'}); break;
case 'topCenter': case 'topLeft': case 'topRight':
@@ -84,6 +85,7 @@
switch (this.options.layout.name) {
case 'top':
+ case 'inline_top':
this.$bar.css({
borderRadius: '0px 0px 5px 5px',
borderBottom: '2px solid #eee',
@@ -92,7 +94,7 @@
boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)"
});
break;
- case 'topCenter': case 'center': case 'bottomCenter': case 'inline':
+ case 'topCenter': case 'center': case 'bottomCenter': case 'inline': case 'inline_center':
this.$bar.css({
borderRadius: '5px',
border: '1px solid #eee',
Something went wrong with that request. Please try again.