fix #8 image notification height; fix #4 image notifications now impl…

…emented
pbojinov · Apr 3, 2014 · 5655114 · 5655114
1 parent 624577f
commit 5655114
Show file tree

Hide file tree

Showing 9 changed files with 154 additions and 33 deletions.
diff --git a/app/notifications/dea-notifications-shared.css b/app/notifications/dea-notifications-shared.css
@@ -84,4 +84,29 @@ body {
 
 .button:active {
     background-color: #cccccc;
+}
+
+/* Image notification specific css */
+.gallery {
+    clear: both;
+    position: relative;
+}
+
+.gallery img {
+    width: 100%;
+    height: auto;
+}
+
+.highlight {
+    background: rgb(0,0,0); /* The Fallback */
+    background-color: rgba(0,0,0,0.7);
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+}
+
+.highlight .title {
+    color: #fff;
+    margin: 10px 10px 10px 15px;
+    line-height: 18px;
 }
diff --git a/app/notifications/image.html b/app/notifications/image.html
@@ -58,20 +58,28 @@
 
 <script id="image-notification" type="text/x-handlebars-template">
     <section id="{{id}}">
+        {{#if iconUrl}}
         <div class="icon">
             <img src="{{iconUrl}}"/>
         </div>
+        {{/if}}
         <div class="title">{{title}}</div>
         <div class="description">{{message}}</div>
         <div class="gallery">
-            <img src="{{imageUrl}}"/>
-            <div class="highlight">
-                <div class="title">{{imageTitle}}</div>
-            </div>
+            {{#if imageUrl}}
+                <img src="{{imageUrl}}"/>
+            {{/if}}
+            {{#if imageTitle}}
+                <div class="highlight">
+                    <div class="title">{{imageTitle}}</div>
+                </div>
+            {{/if}}
         </div>
-        {{#each buttons}}
-            <div class="button">{{title}}</div>
-        {{/each}}
+        {{#if buttons}}
+            {{#each buttons}}
+                <div class="button">{{title}}</div>
+            {{/each}}
+        {{/if}}
     </section>
 </script>
 

diff --git a/app/notifications/text.html b/app/notifications/text.html
@@ -20,9 +20,9 @@
                 <img src="nike-logo.jpg" alt="Notification Icon"/>
             </div>
             <div class="title">What is Lorem Ipsum?</div>
-            <!--<div class="description">Lorem Ipsum is simply dummy text.</div>-->
-            <!--<div class="button primary">Yes</div>-->
-            <!--<div class="button secondary">No</div>-->
+            <div class="description">Lorem Ipsum is simply dummy text.</div>
+            <div class="button primary">Yes</div>
+            <div class="button secondary">No</div>
         </section>
     </div>
 </div>

diff --git a/index.html b/index.html
@@ -1,7 +1,7 @@
 <html>
 <head>
     <title>Desktop Notification Demo</title>
-    <script src="jquery.min.js"></script>
+    <script src="app/bower_components/jquery/dist/jquery.js"></script>
     <script src="nw-desktop-notifications.js"></script>
     <style type="text/css">
         body {
@@ -28,6 +28,10 @@
             outline: 2px solid #1ABC9C;
         }
 
+        input[type=radio]:focus {
+            outline: 0;
+        }
+
         input[type=text], input[type=submit] {
             width: 450px;
         }
@@ -66,11 +70,15 @@
             font-size: 12px;
         }
 
+        #imageUrl, #imageTitle {
+            display: none;
+        }
+
     </style>
 </head>
 <body>
 <h1>Notifications Demo</h1>
-<hr>
+<hr/>
 <form id='nwdemo' action='#' method='post' class="form-group">
     <p>
         <label>Type:</label>
@@ -92,7 +100,7 @@ <h1>Notifications Demo</h1>
 
     <p>
         <label for="description">Message:</label><br/>
-        <input id="description" name='content' type='text' value='Testing of desktop notifications'"/>
+        <input id="description" name='content' type='text' value='Testing of desktop notifications'/>
     </p>
 
     <p>
@@ -110,13 +118,36 @@ <h1>Notifications Demo</h1>
         <input name='actionButtonSecondary' type='text' value=''/>
     </p>
 
-    <p>
+    <p id="submissionButton">
         <input id="submission" type='submit' value='Create Notification &raquo;'/>
     </p>
 </form>
 <div id='status' style='display: none;'></div>
+
 <script type="text/javascript">
-    $('#nwdemo').submit(function (e) {
+
+    var $demoForm =  $('#nwdemo');
+
+    // Toggle between image and text notifications
+    $demoForm.find('input[name=notificationType]').change(function() {
+        if (this.value == 'image') {
+            $('#submissionButton').prepend('<p id="imageUrl"><label>Image URL</label><br>' +
+            '<input name="imageUrl" type="text" value="nike.jpg"/></p>');
+
+            $('#submissionButton').prepend('<p id="imageTitle"><label>Image Title</label><br>' +
+                '<input name="imageTitle" type="text" value="2014 Nike Free 3.0 V4 Shoes"/></p>');
+
+            $('#imageUrl').fadeIn('fast');
+            $('#imageTitle').fadeIn('fast');
+        }
+        else {
+            $('#imageUrl').fadeOut('fast');
+            $('#imageTitle').fadeOut('fast');
+        }
+    });
+
+    $demoForm.submit(function (e) {
+
         e.preventDefault();
         var form = $(this),
             icon = form.find('input[name=icon]').val(),
@@ -125,6 +156,8 @@ <h1>Notifications Demo</h1>
             notificationType = form.find('input[name=notificationType]:checked').val(),
             primaryButton = form.find('input[name=actionButtonPrimary]').val(),
             secondaryButton = form.find('input[name=actionButtonSecondary]').val(),
+            imageUrl = form.find('input[name=imageUrl]').val(),
+            imageTitle = form.find('input[name=imageTitle]').val(),
             $status = $('#status');
 
         var options = {
@@ -135,6 +168,12 @@ <h1>Notifications Demo</h1>
             buttons: []
         };
 
+        // Extend image notifications with a couple extra parameters
+        if (notificationType == 'image') {
+            options.imageUrl = imageUrl;
+            options.imageTitle = imageTitle;
+        }
+
         if (primaryButton) {
             options.buttons.push({'title': primaryButton});
         }
@@ -153,6 +192,8 @@ <h1>Notifications Demo</h1>
          */
         window.DEA.notifications.create(options, function (id) {
             console.log('clicked ', id);
+
+            /* Different event listeners are going here */
             $status.text('Clicked on ' + options.title);
             $status.fadeIn('fast', function () {
                 setTimeout(function () {

diff --git a/jquery.min.js b/jquery.min.js
diff --git a/nike.jpg b/nike.jpg
diff --git a/nw-desktop-notifications.html b/nw-desktop-notifications.html
@@ -4,7 +4,7 @@
 		<title>Desktop Notification</title>
         <link rel="stylesheet" href="app/bower_components/normalize-css/normalize.css"/>
         <link rel="stylesheet" href="app/bower_components/open-sans-fontface/open-sans-custom.css"/>
-        <link rel="stylesheet" href="app/notifications/dea-notifications-shared.css"/>
+        <link rel="stylesheet" href="dea-notifications-shared.css"/>
 		<script src="app/bower_components/jquery/dist/jquery.js"></script>
 		<style type="text/css">
 			body {

diff --git a/nw-desktop-notifications.js b/nw-desktop-notifications.js
diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
 	"window": {
 		"toolbar": true,
 		"width": 520,
-		"height": 750,
+		"height": 800,
 		"position": "mouse",
 		"min_width": 400,
 		"min_height": 200