From 232cb531281157c85b48b80b54bb1a786e790279 Mon Sep 17 00:00:00 2001 From: pbojinov Date: Thu, 10 Apr 2014 11:37:19 -0700 Subject: [PATCH] fixes #1 distinguish button clicks, add close notification api and button to demo --- app/notifications/image.html | 9 ++-- app/notifications/text.html | 9 ++-- index.html | 89 ++++++++++++++++++++++++--------- make-nw.sh | 2 +- nw-desktop-notifications.js | 97 +++++++++++++----------------------- 5 files changed, 113 insertions(+), 93 deletions(-) diff --git a/app/notifications/image.html b/app/notifications/image.html index ee0d1e2..6e3ac25 100644 --- a/app/notifications/image.html +++ b/app/notifications/image.html @@ -75,10 +75,11 @@ {{/if}} - {{#if buttons}} - {{#each buttons}} -
{{title}}
- {{/each}} + {{#if buttonPrimary}} +
{{buttonPrimary}}
+ {{/if}} + {{#if buttonSecondary}} +
{{buttonSecondary}}
{{/if}} diff --git a/app/notifications/text.html b/app/notifications/text.html index 10fa411..ded65ff 100644 --- a/app/notifications/text.html +++ b/app/notifications/text.html @@ -36,10 +36,11 @@ {{/if}}
{{title}}
{{message}}
- {{#if buttons}} - {{#each buttons}} -
{{title}}
- {{/each}} + {{#if buttonPrimary}} +
{{buttonPrimary}}
+ {{/if}} + {{#if buttonSecondary}} +
{{buttonSecondary}}
{{/if}} diff --git a/index.html b/index.html index 54d3cca..3cde176 100644 --- a/index.html +++ b/index.html @@ -32,11 +32,11 @@ outline: 0; } - input[type=text], input[type=submit] { + input[type=text], input[type=submit], #hide { width: 450px; } - input[type=submit] { + input[type=submit], #hide { font-size: 20px; background-color: #1ABC9C; color: white; @@ -60,6 +60,25 @@ input, input:hover, input:focus, input:active { } + /* red hide notifications button */ + #hide { + background-color: #E74C3C; + text-align: center; + } + + #hide:hover { + background-color: #EC7063; + } + + #hide:active { + background-color: #C44133; + } + + #hide:focus { + outline: 0; + background-color: #EC7063; + } + /* end red notifications button */ #status { border: 1px solid #84C03A; @@ -70,7 +89,7 @@ font-size: 12px; } - #imageUrl, #imageTitle { + #imageUrl, #imageTitle, #hide { display: none; } @@ -121,6 +140,11 @@

Notifications Demo

+ +

+ +

+ @@ -158,14 +182,14 @@

Notifications Demo

secondaryButton = form.find('input[name=actionButtonSecondary]').val(), imageUrl = form.find('input[name=imageUrl]').val(), imageTitle = form.find('input[name=imageTitle]').val(), - $status = $('#status'); + $status = $('#status'), + $hideButton = $('#hide'); var options = { type: notificationType, title: title, message: message, - iconUrl: icon, - buttons: [] + iconUrl: icon }; // Extend image notifications with a couple extra parameters @@ -175,34 +199,46 @@

Notifications Demo

} if (primaryButton) { - options.buttons.push({'title': primaryButton}); + options.buttonPrimary = primaryButton; } if (secondaryButton) { - options.buttons.push({'title': secondaryButton}); + options.buttonSecondary = secondaryButton; } + // Lets look at options before we send them console.log(options); window.DEA.notifications.create(options, function (id, target) { console.log(id, target); - window.lastE = target; - - /* - * Possible Events: - * - * "close" - * "title" - * "description" - * "icons" - * "gallery-image" - * "gallery-image title" - * "button" - * // TODO find button order - */ - + // Possible Events + switch (target) { + case 'closer': + $hideButton.fadeOut(); + break; + case 'title': + break; + case 'description': + break; + case 'icons': + break; + case 'gallery-image': + break; + case 'gallery-image title': + break; + case 'button primary': + $hideButton.fadeOut(); + break; + case 'button secondary': + $hideButton.fadeOut(); + break; + default: + break; + } + + // Print out what we clicked on in the demo app $status.text('Clicked on ' + target); $status.fadeIn('fast', function () { setTimeout(function () { @@ -211,6 +247,13 @@

Notifications Demo

}); }); + // show the hide button when a notification is active + $hideButton.fadeIn(); + + $hideButton.click(function() { + window.DEA.notifications.clear(); + $hideButton.fadeOut(); + }); }); diff --git a/make-nw.sh b/make-nw.sh index c22c09b..8a4650a 100755 --- a/make-nw.sh +++ b/make-nw.sh @@ -1,7 +1,7 @@ #!/bin/sh # all resources for demo are local now -zip -r desktop-notify.nw * -x app/ app/**\* .git/**\* +zip -r desktop-notify.nw * -x app/ app/**\* .git/**\* media/**\* media/ # ignore some repos we aren't using the the demo so we can build faster # zip -r desktop-notify.nw * -x app/bower_components/handlebars.js/**\* app/bower_components/open-sans-fontface/**\* \ No newline at end of file diff --git a/nw-desktop-notifications.js b/nw-desktop-notifications.js index 4f7a98e..f867cc2 100644 --- a/nw-desktop-notifications.js +++ b/nw-desktop-notifications.js @@ -1,39 +1,5 @@ (function(){ - /** - * @author Erik Karlsson, www.nonobtrusive.com - */ - function Dispatcher(){ - this.events=[]; - } - Dispatcher.prototype.addEventlistener=function(event,callback){ - this.events[event] = this.events[event] || []; - if ( this.events[event] ) { - this.events[event].push(callback); - } - } - Dispatcher.prototype.removeEventlistener=function(event,callback){ - if ( this.events[event] ) { - var listeners = this.events[event]; - for ( var i = listeners.length-1; i>=0; --i ){ - if ( listeners[i] === callback ) { - listeners.splice( i, 1 ); - return true; - } - } - } - return false; - } - Dispatcher.prototype.dispatch=function(event){ - if ( this.events[event] ) { - var listeners = this.events[event], len = listeners.length; - while ( len-- ) { - listeners[len](this); //callback with self - } - } - } - - /* handlebars v1.3.0 Copyright (C) 2011 by Yehuda Katz @@ -70,7 +36,9 @@ window.DEA.DesktopNotificationsWindowIsLoaded = false; win.on('loaded', function(){ window.DEA.DesktopNotificationsWindowIsLoaded = true; - $(win.window.document.body).find('#closer').click(function(){ + $body = $(win.window.document.body); + // Close notification when X is pressed + $body.find('#closer').click(function(){ slideOutNotificationWindow(); }); }); @@ -119,16 +87,17 @@ var templateSource = (function () {/*
{{#if iconUrl}} -
- -
+
+ +
{{/if}}
{{title}}
{{message}}
- {{#if buttons}} - {{#each buttons}} -
{{title}}
- {{/each}} + {{#if buttonPrimary}} +
{{buttonPrimary}}
+ {{/if}} + {{#if buttonSecondary}} +
{{buttonSecondary}}
{{/if}}
*/}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1]; @@ -142,26 +111,27 @@ var templateSource = (function () {/*
{{#if iconUrl}} -
- -
+
+ +
{{/if}}
{{title}}
{{message}}
- {{#if imageUrl}} - - {{/if}} - {{#if imageTitle}} -
-
{{imageTitle}}
+ {{#if imageUrl}} + + {{/if}} + {{#if imageTitle}} +
+
{{imageTitle}}
+
+ {{/if}}
+ {{#if buttonPrimary}} +
{{buttonPrimary}}
{{/if}} -
- {{#if buttons}} - {{#each buttons}} -
{{title}}
- {{/each}} + {{#if buttonSecondary}} +
{{buttonSecondary}}
{{/if}}
*/}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1]; @@ -217,7 +187,7 @@ //Add click event listener for the whole notification // anywhere in the container - jqBody.find('#'+elemId).click(function(e) { + jqBody.find('#'+elemId).click(function(e) { return eventHandler(e, elemId, onClick); }); jqBody.find('#closer').click(function(e) { @@ -232,10 +202,12 @@ jqBody.find('.icon').click(function(e) { return eventHandler(e, elemId, onClick); }); - jqBody.find('.button').find('.primary').click(function(e) { + jqBody.find('.button.primary').click(function(e) { + slideOutNotificationWindow(); return eventHandler(e, elemId, onClick); }); - jqBody.find('.button').find('.secondary').click(function(e) { + jqBody.find('.button.secondary').click(function(e) { + slideOutNotificationWindow(); return eventHandler(e, elemId, onClick); }); @@ -331,12 +303,15 @@ return str; } } + function clear() { + slideOutNotificationWindow(); + } window.DEA.notifications = { create: create, - closeAnyOpenNotificationWindows: closeAnyOpenNotificationWindows, height: height, - width: width + width: width, + clear: clear };