fixed element/demo/build

.gitignore

@@ -2,4 +2,10 @@
 node_modules
 
 # OS X
-.DS_Store
+.DS_Store
+
+# VIM
+*.swp
+
+# Bower
+bower_components/*

Gruntfile.js

@@ -5,17 +5,18 @@ module.exports = function(grunt) {
             demo: {
                 options: {
                     open: true,
-                    keepalive: true
+                    keepalive: true,
+                    port: 3001
                 }
             }
         },
         replace: {
             example: {
                 src: ['src/*'],
-                dest: 'dist/',
+                dest: '/',
                 replacements: [{
-                    from: 'bower_components',
-                    to: '..'
+                    from: '<link rel="import" href="../bower_components/polymer/polymer.html">',
+                    to: ''
                 }]
             }
         }

README.md

@@ -61,7 +61,7 @@ In order to run it locally you'll need to fetch some dependencies and a basic se
     $ bower install && npm install
     ```
 
-* To test your project, start the development server and open `http://localhost:8000`.
+* To test your project, start the development server and open `http://localhost:3001`.
 
     ```sh
     $ grunt connect

dist/notification-elements.html

@@ -0,0 +1,88 @@
+<!-- Import Polymer -->
+
+
+<!-- Define your custom element -->
+<polymer-element name="notification-elements" attributes="header body icon duration onclick">
+    <script>
+        Polymer('notification-elements', {
+
+            /* -- Attributes ------------------------- */
+            body: null,
+            title: null,
+            icon: null,
+            dir: null,
+            tag: null,
+            autostart : false,
+            permission: false,
+
+            /* -- Lifecycle ------------------------- */
+            created: function() {
+                // Check if the browser supports desktop Notification
+                if (!('Notification' in window)) {
+                    console.log('This browser does not support desktop notification :( ');
+                }
+            },
+
+            // Check the permissions and initialize the attributes
+            ready: function() {
+                // Check if we have permission to use Notification
+                if (Notification.permission === 'granted') {
+                    this.permission = true;
+                }
+                // Ouch, we don't have permission, so, lets ask for it unless the user denied it
+                else if (Notification.permission !== 'denied') {
+                    Notification.requestPermission(function (permission) {
+
+                        if(!('permission' in Notification)) {
+                            Notification.permission = permission;
+                        }
+
+                        // Yay, we have the permission
+                        if (permission === 'granted') {
+                            this.permission = true;
+                        }
+
+                    } );
+                }
+                // If we have the permission, finally initialize attributes
+                if (this.permission){
+                    this.title = this.header || '';
+
+                    // Put the attrs at the options attr
+                    this.options = {
+                        body: this.body || '',
+                        dir: this.dir || 'auto',
+                        icon : this.icon,
+                        lang: this.lang,
+                        tag: this.tag || 'notification-element'
+                    }
+
+                    // Call notify if it autostart
+                    if (this.autostart) {
+                        this.notify();
+                    }
+                }
+            },
+            // run the notification
+            notify: function() {
+                if (this.permission) {
+                    var notification = new Notification(this.title, this.options);
+                    notification.addEventListener('click', function() {
+                        this.fire('click');
+                    }.bind(this));
+                }
+            },
+
+            // Events
+            onclick: function() {
+
+            },
+
+            onshow: function() {
+                setTimeout(function () {
+                    notification.close();
+                }, 10000);
+            }
+        });
+    </script>
+</polymer-element>

index.html

@@ -13,10 +13,11 @@
     <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
 
     <!-- Import Web Components Polyfill -->
-    <script src="app/bower_components/webcomponentsjs/webcomponents.min.js"></script>
+    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
 
     <!-- Import Custom Element -->
-    <link rel="import" href="src/notification-elements.html">
+    <link rel="import" href="bower_components/polymer/polymer.html">
+    <link rel="import" href="dist/notification-elements.html">
 
 </head>
 <body>

package.json

@@ -1,20 +1,21 @@
 {
-	"name": "notification-elements",
-	"version": "0.1.0",
-	"description": "Web Notification API wrapper that allows you to do Notifications using Polymer",
-	"author": "Mateus Ortiz <[email protected]>",
-	"license": "MIT",
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/mateusortiz/notification-elements"
-	},
-	"bugs": {
-		"url": "https://github.com/mateusortiz/notification-elements/issues"
-	},
-    "devDependencies": {
-        "grunt": "~0.4.1",
-        "grunt-cli": "~0.1.9",
-        "grunt-contrib-connect": "~0.5.0",
-        "grunt-gh-pages": "~0.9.1"
-    }
+  "name": "notification-elements",
+  "version": "0.1.0",
+  "description": "Web Notification API wrapper that allows you to do Notifications using Polymer",
+  "author": "Mateus Ortiz <[email protected]>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mateusortiz/notification-elements"
+  },
+  "bugs": {
+    "url": "https://github.com/mateusortiz/notification-elements/issues"
+  },
+  "devDependencies": {
+    "grunt": "~0.4.1",
+    "grunt-cli": "~0.1.9",
+    "grunt-contrib-connect": "~0.5.0",
+    "grunt-text-replace": "^0.4.0",
+    "grunt-gh-pages": "~0.9.1"
+  }
 }

src/notification-elements.html

@@ -1,5 +1,4 @@
-<!-- Import Polymer -->
-<link rel="import" href="../bower_components/polymer/polymer.html">
+<link rel="import" href="../../bower_components/polymer/polymer.html">
 
 <!-- Define your custom element -->
 <polymer-element name="notification-elements" attributes="header body icon duration onclick">