Merge pull request #6 from georgeOsdDev/develop

Release v0.1.2

Author: georgeOsdDev

CHANGELOG.md

@@ -1,6 +1,9 @@
 ## Change Log
 
-### Ver 0.1.2 (Next Release)
+### Ver 0.1.3 (Next Release)
+
+### Ver 0.1.2
+  * [#5 Add option `disableActiveWindow`](https://github.com/georgeOsdDev/react-web-notification/issues/5)
 
 ### Ver 0.1.1
   * [#2 Compile before publishing](https://github.com/georgeOsdDev/react-web-notification/issues/2)

README.md

@@ -24,6 +24,7 @@ React component which wrap web-notification.
 ```javascript
 Notification.propTypes = {
   ignore: React.PropTypes.bool,
+  disableActiveWindow: React.PropTypes.bool,
   notSupported: React.PropTypes.func,
   onPermissionGranted: React.PropTypes.func,
   onPermissionDenied: React.PropTypes.func,
@@ -40,6 +41,8 @@ Notification.propTypes = {
 
 * `ignore` : if true, nothing will be happen
 
+* `disableActiveWindow` : if true, nothing will be happen when window is active
+
 * `notSupported()` : Called when [HTML5 Web Notification API](https://developer.mozilla.org/en/docs/Web/API/notification) is not supported.
 
 * `onPermissionGranted()` : Called when permission granted.

components/Notification.js

@@ -33,9 +33,30 @@ class Notification extends React.Component {
     };
     // Do not save Notification instance in state
     this.notifications = {};
+    this.windowFocus = true;
+    this.onWindowFocus = this._onWindowFocus.bind(this);
+    this.onWindowBlur = this._onWindowBlur.bind(this);
+  }
+
+  _onWindowFocus(){
+    this.windowFocus = true;
+  }
+
+  _onWindowBlur(){
+    this.windowFocus = false;
   }
 
   componentDidMount(){
+    if (this.props.disableActiveWindow) {
+      if (window.addEventListener){
+        window.addEventListener('focus', this.onWindowFocus);
+        window.addEventListener('blur', this.onWindowBlur);
+      } else if (window.attachEvent){
+        window.attachEvent('focus', this.onWindowFocus);
+        window.attachEvent('blur', this.onWindowBlur);
+      }
+    }
+
     if (!this.state.supported) {
       this.props.notSupported();
     } else {
@@ -58,8 +79,21 @@ class Notification extends React.Component {
     }
   }
 
+  componentWillUnmount(){
+    if (this.props.disableActiveWindow) {
+      if (window.removeEventListner){
+        window.removeEventListener('focus', this.onWindowFocus);
+        window.removeEventListener('blur', this.onWindowBlur);
+      } else if (window.detachEvent){
+        window.detachEvent('focus', this.onWindowFocus);
+        window.detachEvent('blur', this.onWindowBlur);
+      }
+    }
+  }
+
   render() {
-    if (!this.props.ignore && this.props.title && this.state.supported && this.state.granted) {
+    let doNotShowOnActiveWindow = this.props.disableActiveWindow && this.windowFocus;
+    if (!this.props.ignore && this.props.title && this.state.supported && this.state.granted && !doNotShowOnActiveWindow) {
 
       let opt = this.props.options;
       if (typeof opt.tag !== 'string') {
@@ -103,6 +137,7 @@ class Notification extends React.Component {
 
 Notification.propTypes = {
   ignore: React.PropTypes.bool,
+  disableActiveWindow: React.PropTypes.bool,
   notSupported: React.PropTypes.func,
   onPermissionGranted: React.PropTypes.func,
   onPermissionDenied: React.PropTypes.func,
@@ -117,6 +152,7 @@ Notification.propTypes = {
 
 Notification.defaultProps = {
   ignore: false,
+  disableActiveWindow: false,
   notSupported: () => {},
   onPermissionGranted: () => {},
   onPermissionDenied: () => {},

example/app.js

@@ -10,7 +10,8 @@ class App extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      ignore: true
+      ignore: true,
+      title: ''
     };
   }
 
@@ -84,7 +85,7 @@ class App extends React.Component {
       <div>
         <button onClick={this.handleButtonClick.bind(this)}>Notif!</button>
         <Notification
-          ignore={this.state.ignore && this.state.title}
+          ignore={this.state.ignore && this.state.title !== ''}
           notSupported={this.handleNotSupported.bind(this)}
           onPermissionGranted={this.handlePermissionGranted.bind(this)}
           onPermissionDenied={this.handlePermissionDenied.bind(this)}

package.json

@@ -10,7 +10,7 @@
     "test:local": "karma start",
     "test": "./node_modules/.bin/karma start --browsers Firefox --single-run",
     "clean": "rimraf dist",
-    "build": "clean & webpack"
+    "build": "npm run clean & webpack"
   },
   "repository": {
     "type": "git",
@@ -19,9 +19,8 @@
   "keywords": [
     "react",
     "react-component",
-    "url",
-    "abchor",
-    "link"
+    "notification",
+    "web noticifaction"
   ],
   "author": "Takeharu.Oshida",
   "license": "MIT",

test/components/Notification_spec.js

@@ -22,6 +22,7 @@ describe('Test of Notification', () => {
     it('should have default properties', function () {
       component = TestUtils.renderIntoDocument(<Notification title='test'/>);
       expect(component.props.ignore).to.be.eql(false);
+      expect(component.props.disableActiveWindow).to.be.eql(false);
       expect(typeof component.props.notSupported).to.be.eql('function');
       expect(typeof component.props.onPermissionGranted).to.be.eql('function');
       expect(typeof component.props.onPermissionDenied).to.be.eql('function');