Completely rewrote options script.

assets/js/components/Alert.react.js

@@ -0,0 +1,21 @@
+var React = require('react');
+var ReactAddons = require('react/addons');
+var ReactCSSTransitionGroup = ReactAddons.addons.CSSTransitionGroup;
+var classNames = require('classnames');
+
+var Alert = React.createClass({
+
+    propTypes: {
+        type: React.PropTypes.string.isRequired,
+        text: React.PropTypes.string.isRequired
+    },
+
+    render: function() {
+        return(
+            <div className={classNames('alert', 'alert-' + this.props.type)}>{this.props.text}</div>
+        );
+    }
+
+});
+
+module.exports = Alert;

assets/js/components/Options.react.js

@@ -0,0 +1,242 @@
+var React = require('react');
+var ReactAddons = require('react/addons');
+var ReactCSSTransitionGroup = ReactAddons.addons.CSSTransitionGroup;
+
+var config = require('../config');
+
+// React components
+var Alert = require('./Alert.react');
+
+/**
+ * One thing to keep in  mind is that you cannot use this.refs.blacklist if
+ * the blacklist select box is not being rendered on the form.
+ *
+ * @type {*|Function}
+ */
+var Options = React.createClass({
+
+    getInitialState: function () {
+        return {
+            theme: config.theme,
+            blacklist: '',
+            whitelist: '',
+            loggingType: config.loggingType,
+            loggingStyle: config.loggingStyle,
+            displayAlert: false,
+            alertType: config.alert.success.type,
+            alertText: config.alert.success.text
+        };
+    },
+
+    componentDidMount: function () {
+        this.restoreSettings();
+    },
+
+    restoreSettings: function () {
+        var that = this;
+
+        chrome.storage.sync.get({
+            theme: config.theme,
+            blacklist: '',
+            whitelist: '',
+            loggingType: config.loggingType,
+            loggingStyle: config.loggingStyle
+        }, function (items) {
+            that.setState({
+                theme: items.theme,
+                blacklist: items.blacklist,
+                whitelist: items.whitelist,
+                loggingType: items.loggingType,
+                loggingStyle: items.loggingStyle
+            });
+
+            // TODO: Create a component for blacklist/white list
+
+            if (items.loggingStyle == 'blacklist') {
+                React.findDOMNode(that.refs.blacklist).value = items.blacklist;
+            }
+            else if (items.loggingStyle == 'whitelist') {
+                React.findDOMNode(that.refs.whitelist).value = items.whitelist;
+            }
+
+            React.findDOMNode(that.refs.theme).value = items.theme;
+            React.findDOMNode(that.refs.loggingType).value = items.loggingType;
+            React.findDOMNode(that.refs.loggingStyle).value = items.loggingStyle;
+        });
+    },
+
+    _handleSubmit: function (e) {
+        e.preventDefault();
+
+        this.saveSettings();
+    },
+
+    saveSettings: function () {
+        var that = this;
+
+        var theme = React.findDOMNode(this.refs.theme).value.trim();
+        var loggingType = React.findDOMNode(this.refs.loggingType).value.trim();
+        var loggingStyle = React.findDOMNode(this.refs.loggingStyle).value.trim();
+
+        var blacklist = this.state.blacklist;
+        var whitelist = this.state.whitelist;
+
+        // Depending on logging style load blacklist or white list value from form.
+        if (loggingStyle == 'blacklist') {
+            blacklist = React.findDOMNode(this.refs.blacklist).value.trim();
+        } else if (loggingStyle == 'whitelist') {
+            whitelist = React.findDOMNode(this.refs.whitelist).value.trim();
+        }
+
+        // TODO: Bind blacklist and whitelist to state and validate user input.
+
+        // Sync options with google storage.
+        chrome.storage.sync.set({
+            theme: theme,
+            blacklist: blacklist,
+            whitelist: whitelist,
+            loggingType: loggingType,
+            loggingStyle: loggingStyle
+        }, function () {
+            // Set state to be newly entered values.
+            that.setState({
+                theme: theme,
+                blacklist: blacklist,
+                whitelist: whitelist,
+                loggingType: loggingType,
+                loggingStyle: loggingStyle,
+                displayAlert: true
+            });
+        });
+    },
+
+    /**
+     * After the component renders this detects the logging style
+     * and updates the form blacklist or white list value.
+     */
+    componentDidUpdate: function() {
+        if (this.state.loggingStyle == 'blacklist') {
+            React.findDOMNode(this.refs.blacklist).value = this.state.blacklist;
+        }
+        else if (this.state.loggingStyle == 'whitelist') {
+            React.findDOMNode(this.refs.whitelist).value = this.state.whitelist;
+        }
+    },
+
+    _displayBlackOrWhiteList: function () {
+        var loggingStyle = React.findDOMNode(this.refs.loggingStyle).value.trim();
+
+        this.setState({loggingStyle: loggingStyle});
+    },
+
+    render: function () {
+
+        var that = this;
+
+        var alert = function() {
+            if(that.state.displayAlert == true){
+
+                setTimeout(function () {
+                    that.setState({displayAlert:false});
+                }, 2000);
+
+                return(
+                    <Alert key={that.state.alertText} type={that.state.alertType} text={that.state.alertText} />
+                );
+            }
+        };
+
+        var loggingStyle = function () {
+            if (that.state.loggingStyle == 'blacklist') {
+                return (
+                    <div className="form-group">
+                        <label htmlFor="blacklist" className="col-lg-2 control-label">Blacklist</label>
+
+                        <div className="col-lg-10">
+                            <textarea className="form-control" rows="3" ref="blacklist"
+                                placeholder="http://google.com"></textarea>
+                            <span className="help-block">Sites that you don't want to show in your reports.
+                                <br/>
+                                One line per site.</span>
+                        </div>
+                    </div>
+                );
+            }
+
+            return (
+                <div className="form-group">
+                    <label htmlFor="whitelist" className="col-lg-2 control-label">Whitelist</label>
+
+                    <div className="col-lg-10">
+                        <textarea className="form-control" rows="3" ref="whitelist"
+                            placeholder="http://google.com"></textarea>
+                        <span className="help-block">Sites that you want to show in your reports.
+                            <br/>
+                            One line per site.</span>
+                    </div>
+                </div>
+            );
+
+        };
+
+        return (
+            <div className="container">
+                <div className="row">
+                    <div className="col-md-12">
+
+                        <ReactCSSTransitionGroup transitionName="alert">
+                            {alert()}
+                        </ReactCSSTransitionGroup>
+
+                        <form className="form-horizontal" onSubmit={this._handleSubmit}>
+
+                            <div className="form-group">
+                                <label className="col-lg-2 control-label">Logging style</label>
+
+                                <div className="col-lg-10">
+                                    <select className="form-control" ref="loggingStyle" defaultValue="blacklist" onChange={this._displayBlackOrWhiteList}>
+                                        <option value="blacklist">All except blacklisted sites</option>
+                                        <option value="whitelist">Only whitelisted sites</option>
+                                    </select>
+                                </div>
+                            </div>
+
+                            {loggingStyle()}
+
+                            <div className="form-group">
+                                <label className="col-lg-2 control-label">Logging type</label>
+
+                                <div className="col-lg-10">
+                                    <select className="form-control" ref="loggingType" defaultValue="domain">
+                                        <option value="domain">Only the domain</option>
+                                        <option value="url">Entire URL</option>
+                                    </select>
+                                </div>
+                            </div>
+
+                            <div className="form-group">
+                                <label htmlFor="theme" className="col-lg-2 control-label">Theme</label>
+
+                                <div className="col-lg-10">
+                                    <select className="form-control" ref="theme" defaultValue="light">
+                                        <option value="light">Light</option>
+                                        <option value="dark">Dark</option>
+                                    </select>
+                                </div>
+                            </div>
+
+                            <div className="form-group">
+                                <div className="col-lg-10 col-lg-offset-2">
+                                    <button type="submit" className="btn btn-primary">Save</button>
+                                </div>
+                            </div>
+                        </form>
+
+                    </div>
+                </div>
+            </div>
+        );
+    }
+});
+
+module.exports = Options;

assets/js/components/WakaTime.react.js

@@ -17,9 +17,9 @@ var changeExtensionState = require('../helpers/changeExtensionState');
 
 class WakaTime extends React.Component {
 
-    constructor(){
+    constructor(props){
 
-        super();
+        super(props);
 
         this.state = {
             user: {

assets/js/config.js

@@ -5,7 +5,11 @@ var config = {
     // The user is considered idle if there was
     // no activity in the browser for x seconds
     detectionIntervalInSeconds: 60,
-    //default logging type
+    // Default logging style
+    // Log all except blacklisted sites
+    // or log only the white listed sites.
+    loggingStyle: 'blacklist',
+    // Default logging type
     loggingType: 'domain',
     // By default logging is enabled
     loggingEnabled: true,
@@ -39,7 +43,17 @@ var config = {
         'notSignedIn',
         'blacklisted',
         'whitelisted'
-    ]
+    ],
+    alert: {
+        success: {
+            type: 'success',
+            text: 'Options have been saved!'
+        },
+        failure: {
+            type: 'danger',
+            text: 'There was an error while saving the options!'
+        }
+    }
 };
 
 export default config;

assets/js/options.js

@@ -2,62 +2,12 @@
 global.jQuery = require('jquery');
 require('bootstrap');
 
-var $ = require("jquery");
+var React = require('react');
 
-var config = require('./config');
+// React components
+var Options = require('./components/Options.react');
 
-function detectCheckedRadio(name) {
-    for (var i = 0; i < document.getElementsByName(name).length; i ++) {
-        var button = document.getElementsByName(name)[i];
-
-        if (button.checked === true) {
-            return button.value;
-        }
-    }
-}
-
-// Saves options to chrome.storage.sync.
-function save_options(e) {
-    e.preventDefault();
-
-    var theme = document.getElementById('theme').value;
-    var blacklist = document.getElementById('blacklist').value;
-    var loggingType = detectCheckedRadio('loggingType');
-
-    chrome.storage.sync.set({
-        theme: theme,
-        blacklist: blacklist,
-        loggingType: loggingType
-    }, function () {
-        // Update status to let user know options were saved.
-        var status = $('#status');
-        status.html('<strong>Well done!</strong> Options have been saved.');
-
-        status.fadeIn(1500, function () {
-            setTimeout(function () {
-                status.fadeOut(1500, function () {
-                    status.html('');
-                });
-            }, 750);
-        });
-
-    });
-}
-
-// Restores select box and checkbox state using the preferences
-// stored in chrome.storage.
-function restore_options() {
-    // Use default value color = 'red' and likesColor = true.
-    chrome.storage.sync.get({
-        theme: config.theme,
-        blacklist: '',
-        loggingType: config.loggingType
-    }, function (items) {
-        document.getElementById('theme').value = items.theme;
-        document.getElementById('blacklist').value = items.blacklist;
-        document.getElementById(items.loggingType + 'Type').checked = true;
-    });
-}
-
-document.addEventListener('DOMContentLoaded', restore_options);
-document.getElementById('save').addEventListener('click', save_options);
+React.render(
+    <Options />,
+    document.getElementById('wakatime-options')
+);

assets/less/app.less

@@ -3,6 +3,7 @@
 @import "bootswatch/paper/bootswatch";
 @import "bootswatch/paper/variables";
 @import "variables";
+@import "partials/_animations";
 
 body {
   min-width: 357px;

assets/less/partials/_animations.less

@@ -0,0 +1,17 @@
+.alert-enter {
+  opacity: 0.01;
+  transition: opacity 1s ease-in;
+}
+
+.alert-enter.alert-enter-active {
+  opacity: 1;
+}
+
+.alert-leave {
+  opacity: 1;
+  transition: opacity 1s ease-in;
+}
+
+.alert-leave.alert-leave-active {
+  opacity: 0.01;
+}

options.html

@@ -1,71 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+<head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>WakaTime options</title>
 
     <link href="public/css/app.css" rel="stylesheet">
-  </head>
-  <body>
+</head>
+<body>
 
-  <div class="container">
-    <div class="row">
-      <div class="col-md-12">
+<div id="wakatime-options"></div>
 
-        <div id="status" class="alert alert-success">
-          <!-- <strong>Well done!</strong> Options have been saved. -->
-        </div>
-
-        <form class="form-horizontal">
-          <div class="form-group">
-            <label for="blacklist" class="col-lg-2 control-label">Blacklist</label>
-            <div class="col-lg-10">
-              <textarea class="form-control" rows="3" id="blacklist" placeholder="http://google.com"></textarea>
-              <span class="help-block">Sites that you don't want to show in your reports. <br />One line per site.</span>
-            </div>
-          </div>
-
-          <div class="form-group">
-            <label for="theme" class="col-lg-2 control-label">Theme</label>
-            <div class="col-lg-10">
-              <select class="form-control" id="theme">
-                <option value="light">Light</option>
-                <option value="dark">Dark</option>
-              </select>
-            </div>
-          </div>
-
-          <div class="form-group">
-            <label class="col-lg-2 control-label">Logging type</label>
-            <div class="col-lg-10">
-              <div class="radio">
-                <label>
-                  <input type="radio" name="loggingType" id="domainType" value="domain" checked="">
-                  Only the domain
-                </label>
-              </div>
-              <div class="radio">
-                <label>
-                  <input type="radio" name="loggingType" id="urlType" value="url">
-                  Entire URL
-                </label>
-              </div>
-            </div>
-          </div>
-
-          <div class="form-group">
-            <div class="col-lg-10 col-lg-offset-2">
-              <button id="save" type="submit" class="btn btn-primary">Save</button>
-            </div>
-          </div>
-        </form>
-
-      </div>
-    </div>
-  </div>
-
-  <script src="public/js/options.js"></script>
-  </body>
+<script src="public/js/options.js"></script>
+</body>
 </html>

package.json

@@ -29,6 +29,7 @@
   },
   "dependencies": {
     "bootstrap": "^3.3.4",
+    "classnames": "^2.1.2",
     "jquery": "^2.1.3",
     "moment": "^2.10.3",
     "react": "^0.13.3"

popup.html

@@ -1,17 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <meta charset="utf-8">
-        <meta http-equiv="X-UA-Compatible" content="IE=edge">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <title>WakaTime</title>
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>WakaTime</title>
 
-        <link href="public/css/app.css" rel="stylesheet">
-    </head>
-    <body>
+    <link href="public/css/app.css" rel="stylesheet">
+</head>
+<body>
 
-        <div id="wakatime"></div>
+<div id="wakatime"></div>
 
-        <script src="public/js/bundle.js"></script>
-    </body>
+<script src="public/js/bundle.js"></script>
+</body>
 </html>

public/css/app.css

@@ -8901,6 +8901,20 @@ input[type="checkbox"]:disabled:checked:after,
 .carousel-caption h6 {
   color: inherit;
 }
+.alert-enter {
+  opacity: 0.01;
+  transition: opacity 1s ease-in;
+}
+.alert-enter.alert-enter-active {
+  opacity: 1;
+}
+.alert-leave {
+  opacity: 1;
+  transition: opacity 1s ease-in;
+}
+.alert-leave.alert-leave-active {
+  opacity: 0.01;
+}
 body {
   min-width: 357px;
 }

public/js/bundle.js

@@ -375,10 +375,10 @@ var WakaTimeOriginal = require('../core/WakaTime');
 var changeExtensionState = require('../helpers/changeExtensionState');
 
 var WakaTime = (function (_React$Component) {
-    function WakaTime() {
+    function WakaTime(props) {
         _classCallCheck(this, WakaTime);
 
-        _get(Object.getPrototypeOf(WakaTime.prototype), 'constructor', this).call(this);
+        _get(Object.getPrototypeOf(WakaTime.prototype), 'constructor', this).call(this, props);
 
         this.state = {
             user: {
@@ -557,7 +557,11 @@ var config = {
     // The user is considered idle if there was
     // no activity in the browser for x seconds
     detectionIntervalInSeconds: 60,
-    //default logging type
+    // Default logging style
+    // Log all except blacklisted sites
+    // or log only the white listed sites.
+    loggingStyle: 'blacklist',
+    // Default logging type
     loggingType: 'domain',
     // By default logging is enabled
     loggingEnabled: true,
@@ -585,7 +589,17 @@ var config = {
     // Default theme
     theme: 'light',
     // Valid extension states
-    states: ['allGood', 'notLogging', 'notSignedIn', 'blacklisted', 'whitelisted']
+    states: ['allGood', 'notLogging', 'notSignedIn', 'blacklisted', 'whitelisted'],
+    alert: {
+        success: {
+            type: 'success',
+            text: 'Options have been saved!'
+        },
+        failure: {
+            type: 'danger',
+            text: 'There was an error while saving the options!'
+        }
+    }
 };
 
 exports['default'] = config;

public/js/events.js

@@ -109,7 +109,11 @@ var config = {
     // The user is considered idle if there was
     // no activity in the browser for x seconds
     detectionIntervalInSeconds: 60,
-    //default logging type
+    // Default logging style
+    // Log all except blacklisted sites
+    // or log only the white listed sites.
+    loggingStyle: 'blacklist',
+    // Default logging type
     loggingType: 'domain',
     // By default logging is enabled
     loggingEnabled: true,
@@ -137,7 +141,17 @@ var config = {
     // Default theme
     theme: 'light',
     // Valid extension states
-    states: ['allGood', 'notLogging', 'notSignedIn', 'blacklisted', 'whitelisted']
+    states: ['allGood', 'notLogging', 'notSignedIn', 'blacklisted', 'whitelisted'],
+    alert: {
+        success: {
+            type: 'success',
+            text: 'Options have been saved!'
+        },
+        failure: {
+            type: 'danger',
+            text: 'There was an error while saving the options!'
+        }
+    }
 };
 
 exports['default'] = config;