Skip to content

Commit

Permalink
Merge pull request olton#475 from greensolid/develop
Browse files Browse the repository at this point in the history 
Revision of metro.notify
  • Loading branch information
@olton
olton committed Feb 8, 2014
2 parents 5e705e5 + 8c0b2ee commit 3c5f2d7
Show file tree
Hide file tree
Showing 3 changed files with 141 additions and 80 deletions.
188 changes: 117 additions & 71 deletions docs/js/metro/metro-notify.js
View file
Original file line number Diff line number Diff line change
@@ -1,74 +1,120 @@
(function($) {
var _notify_container = false;
var _notifies = [];

$.Notify = function(params) {

//$.Notify.settings = params;

params = $.extend({
icon: '',
caption: '',
content: '',
shadow: true,
width: 'auto',
height: 'auto',
style: false, // {background: '', color: ''}
position: 'right', //right, left
timeout: 5000
}, params);

var _container = _notify_container || $("<div/>").addClass("metro notify-container").appendTo('body'); _notify_container = _container;

//console.log(_container);

if (params.content == '' || params.content == undefined) return;

var _notify;

_notify = $("<div/>").addClass("notify");

if (params.shadow) _notify.addClass("shadow");
if (params.style && params.style.background != undefined) _notify.css("background-color", params.style.background);
if (params.style && params.style.color != undefined) _notify.css("color", params.style.color);

// add title
if (params.caption != '' && params.caption != undefined) {
$("<div/>").addClass("caption").html(params.caption).appendTo(_notify);
}
// add content
if (params.content != '' && params.content != undefined) {
$("<div/>").addClass("content").html(params.content).appendTo(_notify);
}

if (params.width != 'auto') _notify.css('min-width', params.width);
if (params.height != 'auto') _notify.css('min-height', params.height);

_notify.hide().appendTo(_container).fadeIn('slow');
_notifies.push( _notify );

setTimeout(function(){
$.Notify.close(_notify);
}, params.timeout);
};

$.Notify.show = function(message, title){
$.Notify({
content: message,
caption: title
});
};

$.Notify.close = function(_notify) {
if(_notify == undefined) {
return false;
}

_notify.fadeOut('slow', function(){
$(this).remove();
_notifies.splice(_notifies.indexOf(_notify), 1);
});

return true;
var _notify_container = false;
var _notifies = [];

var Notify = {

_container: null,
_notify: null,
_timer: null,
options: {
icon: '', // to be implemented
caption: '',
content: '',
shadow: true,
width: 'auto',
height: 'auto',
style: false, // {background: '', color: ''}
position: 'right', //right, left
timeout: 3000
},

init: function(options) {
this.options = $.extend({}, this.options, options);
this._build();
return this;
},

_build: function() {
this._container = _notify_container || $("<div/>").addClass("metro notify-container").appendTo('body');
_notify_container = this._container;
var o = this.options;

if (o.content == '' || o.content == undefined) return false;

this._notify = $("<div/>").addClass("notify");

if (o.shadow) this._notify.addClass("shadow");
if (o.style && o.style.background != undefined) this._notify.css("background-color", o.style.background);
if (o.style && o.style.color != undefined) this._notify.css("color", o.style.color);

// add title
if (o.caption != '' && o.caption != undefined) {
$("<div/>").addClass("caption").html(o.caption).appendTo(this._notify);
}
// add content
if (o.content != '' && o.content != undefined) {
$("<div/>").addClass("content").html(o.content).appendTo(this._notify);
}

if (o.width != 'auto') this._notify.css('min-width', o.width);
if (o.height != 'auto') this._notify.css('min-height', o.height);

this._notify.hide().appendTo(this._container).fadeIn('slow');
_notifies.push(this._notify);

this.close(o.timeout);

},

close: function(timeout) {
this.clear();
if(timeout == parseInt(timeout)) {
var self = this
this._timer = setTimeout(function() {
self._timer = null;
self._hide();
}, timeout);
return this;
} else if(timeout == undefined) {
return this._hide();
}
return this;
},

clear: function() {
if(this._timer != null) {
clearTimeout(this._timer);
this._timer = null;
return this;
} else {
return false;
}
},

_hide: function() {
this.clear();

if(this._notify != undefined) {
this._notify.hide('slow', function() {
$(this).remove();
_notifies.splice(_notifies.indexOf(this._notify), 1);
});
return this;
} else {
return false;
}
},

closeAll: function() {
_notifies.forEach(function(notEntry) {
notEntry.hide('slow', function() {
notEntry.remove();
_notifies.splice(_notifies.indexOf(notEntry), 1);
});
});
return this;
}
};

$.Notify = function(options) {
return Object.create(Notify).init(options);
}
$.Notify.show = function(message, title) {
return $.Notify({
content: message,
caption: title
});
};

})(jQuery);
31 changes: 23 additions & 8 deletions docs/notify.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,25 +65,40 @@ <h1>
</script>
</div>
<pre class="prettyprint linenums">
//with parameters sets
// By setting parameters
$('#notify_btn_1').on('click', function(){
$.Notify({
content: "Metro UI CSS is awesome!!!"
var not = $.Notify({
caption: "Try it"
content: "Metro UI CSS is awesome!!!",
timeout: 10000 // 10 seconds
});
});

// alternate with default parameters
// Alternatively with default parameters
$('#notify_btn_1').on('click', function(){
$.Notify.show("Metro UI CSS is awesome!!!");
$.Notify.show("Metro UI CSS is awesome!!!", "Info...");
var not2 = $.Notify.show("Metro UI CSS is awesome!!!");
var not3 = $.Notify.show("Metro UI CSS is awesome!!!", "Info...");
});

// Cancel timeout
not.clear();

// Reset timeout
not.close(1000);

// Close the notification immediately
not.close();

// Close all notifications and open a new one
// Do not close notifications which have already been closed
not2.closeAll().init({caption:"Done", content:"Finally"});
</pre>
<h3>Parameters:</h3>
<table class="table border striped">
<tr>
<td>icon</td>
<td></td>
<td></td>
<td>Not yet implemented</td>
</tr>
<tr>
<td>caption</td>
Expand Down Expand Up @@ -118,7 +133,7 @@ <h3>Parameters:</h3>
<tr>
<td>timeout</td>
<td>int</td>
<td>milliseconds to hide notify, default 3000</td>
<td>milliseconds to hide notify, default 3000, null to disable timeout</td>
</tr>
</table>

Expand Down
2 changes: 1 addition & 1 deletion less/navigation-bar.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -262,7 +262,7 @@
.navigation-bar, .navbar {
&.fixed-top, &.fixed-bottom {
position: fixed;
z-index: 10000;
z-index: @zindexFixedNavbar;
left: 0;
}

Expand Down

0 comments on commit 3c5f2d7

Please sign in to comment.