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;
+}