Permalink
Browse files

- new (simple) templating module (uses underscore.js' templates)

- can now register anonymous modules at the creation of the notifier's instances, for easy extendability.
version 0.2.2
- template is no longer an option param, can still be extended using modules mechanism.
- new 'closeBtn' option to add 'x' (close) button to notifications
- 'in', 'out' options for custom entering, leaving animations
- improved height calculation of notification for animations
- bugfix: registering modules with no event raised errors
- bugfix: could't return values from overridden functions
- made it more durable (mainly to overcome some (rare) IE bugs)
  • Loading branch information...
ewebdev committed Jul 6, 2012
1 parent 9657106 commit b226e46c09a93f9eb3d14347566d148ef6a7b859
View
@@ -1,8 +1,7 @@
/*!
- * Backbone.Notifier v0.2.1 - Base Styles
+ * Backbone.Notifier v0.2.2 - Base Styles
* Copyright 2012, Eyal Weiss
*/
-
.notifier-screen {
background-color: #000;
z-index: 90000022;
@@ -22,6 +21,7 @@
display: inline-block;
zoom: 1;
*display: inline;
+ position: relative;
}
.notifier > div em {
font-weight: bold;
@@ -30,21 +30,21 @@
.notifier button.default {
font-weight: bold;
}
-.notifier .notifier-inner .notifier-btns button.link {
- border-width: 0 0 1px 0;
- background-color: transparent;
- -webkit-box-shadow: none;
- -moz-box-shadow: none;
- box-shadow: none;
- -webkit-border-radius: 0;
- -moz-border-radius: 0;
- border-radius: 0;
- -moz-background-clip: padding;
- -webkit-background-clip: padding-box;
- background-clip: padding-box;
+.notifier button.link {
+ border-width: 0 0 1px 0!important;
+ background-color: transparent!important;
+ -webkit-box-shadow: none !important;
+ -moz-box-shadow: none !important;
+ box-shadow: none !important;
+ -webkit-border-radius: 0 !important;
+ -moz-border-radius: 0 !important;
+ border-radius: 0 !important;
+ -moz-background-clip: padding !important;
+ -webkit-background-clip: padding-box !important;
+ background-clip: padding-box !important;
padding-right: 0!important;
padding-left: 0!important;
- padding-bottom: 0;
+ padding-bottom: 0!important;
}
.notifier-with-loader .notifier-message {
display: inline;
@@ -54,3 +54,30 @@
zoom: 1;
*display: inline;
}
+.notifier-close {
+ position: absolute;
+ border: 0 none;
+ top: 13px;
+ right: 13px;
+ width: 18px;
+ height: 18px;
+ cursor: pointer;
+ -webkit-border-radius: 9px;
+ -moz-border-radius: 9px;
+ border-radius: 9px;
+ -moz-background-clip: padding;
+ -webkit-background-clip: padding-box;
+ background-clip: padding-box;
+ padding: 0;
+ /*background: white;*/
+
+ text-align: center;
+ font-size: 11px;
+ color: rgba(102, 102, 102, 0.39);
+ background: transparent;
+}
+.notifier-close:hover {
+ background: rgba(109, 109, 109, 0.2) !important;
+ color: white;
+ text-shadow: -1px -1px 0 rgba(68, 68, 68, 0.2);
+}
@@ -1,8 +1,7 @@
/*!
- * Backbone.Notifier v0.2.1 - 'Clean' Theme
+ * Backbone.Notifier v0.2.2 - 'Clean' Theme
* Copyright 2012, Eyal Weiss
*/
-
.notifier-screen.notifier-theme-clean {
background-color: #fff;
}
@@ -16,13 +15,17 @@
margin-left: 10px;
background: url('../imgs/notifier-loader-clean.gif') center center no-repeat;
}
+.notifier.notifier-theme-clean .notifier-close {
+ top: 5px;
+ right: 5px;
+}
.notifier.notifier-theme-clean .notifier-message {
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.notifier.notifier-theme-clean .notifier-btns {
margin: 30px 0 0;
}
-.notifier.notifier-theme-clean button {
+.notifier.notifier-theme-clean .notifier-btns button {
border: solid 1px #D1D1D1;
background-color: white;
padding: 5px 30px;
@@ -35,28 +38,28 @@
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 1px 1px rgba(111, 111, 111, 0.18), inset 0 0 8px rgba(150, 150, 150, 0.21);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 1px 1px rgba(111, 111, 111, 0.18), inset 0 0 8px rgba(150, 150, 150, 0.21);
}
-.notifier.notifier-theme-clean button:hover,
-.notifier.notifier-theme-clean button.hover {
+.notifier.notifier-theme-clean .notifier-btns button:hover,
+.notifier.notifier-theme-clean .notifier-btns button.hover {
border: solid 1px silver;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 2px 2px rgba(48, 48, 48, 0.21), inset 0 0 8px rgba(117, 117, 117, 0.21);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 2px 2px rgba(48, 48, 48, 0.21), inset 0 0 8px rgba(117, 117, 117, 0.21);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 2px 2px rgba(48, 48, 48, 0.21), inset 0 0 8px rgba(117, 117, 117, 0.21);
}
-.notifier.notifier-theme-clean button:active,
-.notifier.notifier-theme-clean button.active {
+.notifier.notifier-theme-clean .notifier-btns button:active,
+.notifier.notifier-theme-clean .notifier-btns button.active {
border: solid 1px silver;
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 1px rgba(48, 48, 48, 0.4), inset 0 0 20px rgba(117, 117, 117, 0.3);
-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 1px rgba(48, 48, 48, 0.4), inset 0 0 20px rgba(117, 117, 117, 0.3);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 1px rgba(48, 48, 48, 0.4), inset 0 0 20px rgba(117, 117, 117, 0.3);
}
-.notifier.notifier-theme-clean button.link {
+.notifier.notifier-theme-clean .notifier-btns button.link {
text-shadow: 0 1px 0 #E9E9E9;
color: #444;
border-bottom: dotted 1px #444;
padding: 9px 0 1px;
}
-.notifier.notifier-theme-clean button.link:hover,
-.notifier.notifier-theme-clean button.link.hover {
+.notifier.notifier-theme-clean .notifier-btns button.link:hover,
+.notifier.notifier-theme-clean .notifier-btns button.link.hover {
color: #000;
border-bottom: solid 1px #000;
text-shadow: 0 1px 0 #DBDBDB;
@@ -200,6 +203,10 @@
.notifier.notifier-theme-clean.notifier-dialog .notifier-message {
text-align: left;
}
+.notifier.notifier-theme-clean.notifier-dialog .notifier-close {
+ top: 13px;
+ right: 13px;
+}
.notifier.notifier-theme-clean.notifier-dialog .notifier-btns {
background: rgba(255, 255, 255, 0.47);
padding: 13px 10px 14px 10px;
@@ -217,5 +224,8 @@
box-shadow: 0 1px 0px #fff;
border-bottom: solid 1px rgba(0, 0, 0, 0.06);
margin: 0 -30px 20px;
- padding-bottom: 10px;
+ padding: 0 30px 10px;
+}
+.notifier.notifier-theme-clean.notifier-with-close-btn .notifier-title {
+ padding-right: 60px;
}
@@ -1,8 +1,7 @@
/*!
- * Backbone.Notifier v0.2.1 - 'Plastic' Theme
+ * Backbone.Notifier v0.2.2 - 'Plastic' Theme
* Copyright 2012, Eyal Weiss
*/
-
.notifier-loader.notifier-theme-plastic {
background-color: #000;
}
@@ -16,6 +15,22 @@
margin-left: 10px;
background: url('../imgs/notifier-loader-plastic.gif') center center no-repeat;
}
+.notifier.notifier-theme-plastic button.notifier-close {
+ top: 8px;
+ right: 4px;
+ padding: 1px 7px;
+ height: auto;
+ text-align: center;
+ width: auto;
+ font-size: 11px;
+ opacity: 0.5;
+}
+.notifier.notifier-theme-plastic button.notifier-close:hover {
+ opacity: 1;
+}
+.notifier.notifier-theme-plastic button.notifier-close:active {
+ background: transparent;
+}
.notifier.notifier-theme-plastic button {
border: solid 1px rgba(0, 0, 0, 0.5);
margin: -3px 0 -3px 10px;
View
@@ -313,6 +313,13 @@ code a:hover, .well a:hover {
box-shadow: 0 -1px 0 #fff;
}
+#changelog .release-changes li.ver {
+ list-style-type: none;
+ margin-left: -16px;
+ line-height: 25px;
+ font-weight: bold;
+}
+
.res-section {
margin: 40px 0 20px;
}
View
@@ -2,7 +2,8 @@ $(function(){
var notifier = window.notifier = new Backbone.Notifier({
ms: 5000,
- caller: 'examples'
+ caller: 'examples',
+ theme: 'clean'
});
var supports3d = !($.browser.msie && $.browser.version < 9);
@@ -113,12 +114,13 @@ $(function(){
hideOnClick: false,
modal: false,
zIndex: 9999999,
- ms: null
+ ms: null,
+ theme: 'clean'
});
var onTourEnd = function(){
$('.after-tour').fadeIn(2000);
- notifier.destroyAll(true);
+ notifier.destroyAll('section', 'tour');
themeNotifier.destroyAll(true);
};
@@ -152,15 +154,14 @@ $(function(){
};
var setTheme = function(theme){
- console.log(theme);
this.set('theme', theme);
_.each(this.current, function(a){
a.settings.theme = theme;
a.$el.attr('class', notifier.getWrapperCls(a.settings));
- notifier.transitions[a.settings.position].in.call(a, a.$el, a.$el.find('>div'), a.settings, a.settings.fadeInMs);
+ notifier.transitions[a.settings.position]['in'].call(a, a.$el, a.$el.find('>div'), a.settings, a.settings.fadeInMs);
a.screenEl && a.screenEl.attr('class', a.settings.baseCls + '-screen ' + a.settings.baseCls + '-theme-' + theme);
});
- }
+ };
notifier.on('themechosen', function(theme){
setTheme.call(notifier, theme);
setTheme.call(themeNotifier, theme);
@@ -177,6 +178,7 @@ $(function(){
],
hideOnClick: false,
modal: false,
+ section: 'tour',
ms: 10000
})
.on('click:ok', function(){
@@ -189,6 +191,7 @@ $(function(){
position: 'center',
modal: true,
ms: false,
+ section: 'tour',
buttons: [
{'data-role': 'ok', text: 'Sure!', 'class': 'default'},
{'data-role': 'cancel', 'class': 'link', text: 'No, I think I\'ve got it'}
@@ -201,6 +204,7 @@ $(function(){
type: 'info',
title: "Information",
message: "This is a 'dialog' <em>info</em> notification. Dialog-styled notifications are also available in the same all types, and creating new types doens't require extra css for dialogs.",
+ section: 'tour',
buttons: [
{'data-role': 'ok', text: 'Continue the tour', 'class': 'default'},
{'data-role': 'cancel', 'class': 'link', text: 'Skip tour'}
@@ -214,6 +218,7 @@ $(function(){
message: 'We got loaders...',
loader: true,
modal: true,
+ section: 'tour',
hideOnClick: true,
ms: 3500
}).on('destroy', function(){
@@ -229,6 +234,7 @@ $(function(){
],
type: 'success',
position: 'center',
+ section: 'tour',
modal: true,
hideOnClick: true,
ms: false
@@ -243,6 +249,7 @@ $(function(){
],
type: 'success',
destroy: true,
+ section: 'tour',
modal: true,
hideOnClick: false,
ms: 15000
@@ -256,6 +263,7 @@ $(function(){
screenOpacity:.7,
message: 'Features useful event mechanism with great API',
type: 'error',
+ section: 'tour',
hideOnClick: true,
position: 'center',
ms: 3500
@@ -317,9 +325,18 @@ $(function(){
loader: true,
message: 'loading...',
ms: null,
- modal: true
+ modal: true,
+ theme: 'plastic',
+ fadeInMs: 600,
+ fadeOutMs: 1200,
+ 'out': function(el, inner, options, duration, callback){
+ el.fadeOut(duration, callback);
+ },
+ 'in': function(el, inner, options, duration, callback){
+ el.fadeIn(duration, callback);
+ }
});
- this.loader.notify({});
+ this.loader.notify();
window.parseCommitHistory = $.proxy(this.parseResponse, this);
jQuery.ajax({
url: 'https://api.github.com/repos/ewebdev/backbone.notifier/commits?callback=parseCommitHistory',
@@ -340,14 +357,17 @@ $(function(){
html += '<div class="span3">' + date.toLocaleDateString() +' ' + date.toLocaleTimeString() + '</div>' +
'<div class="span6">' +
"<ul>";
- var s = item.attributes.commit.message.split('\n');
+ var s = item.attributes.commit.message.split('\n'),
+ verList = '';
_.each(s, function(l) {
var change = l.replace(/^-\s?(.*)$/ig, '$1').trim();
- if (change && change.length) {
- html += '<li>' + change + '</li>';
+ if (change.toLowerCase().substr(0, 7) === 'version') {
+ verList = '<li class="ver">' + change + '</li>' + verList;
+ } else if (change && change.length) {
+ verList += '<li>' + change + '</li>';
}
});
- html += '</ul>' +
+ html += verList + '</ul>' +
'</div>' +
'</div>';
});
@@ -357,7 +377,7 @@ $(function(){
var html = this.template.call(this, this.collection);
var ph = this.$el.find('.log-content').css({opacity: 0}).html(html);
var targetH = ph.height() - 50;
- this.$el.animate({height: '+=' + targetH}, 800);
+ this.$el.animate({height: '+=' + targetH}, 800, updatePos);
ph.animate({opacity: 1}, 800);
this.loader.destroyAll();
return this;
Oops, something went wrong.

0 comments on commit b226e46

Please sign in to comment.