kurbezz/browser-wakatime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Force more line endings

Browse Source
This commit is contained in:
Nathaniel van Diepen
2017-04-18 12:16:12 -06:00
parent 84f30cc918
commit 6b1672d474
14 changed files with 841 additions and 834 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
.gitattributes vendored
View File

@@ -7,4 +7,11 @@ LICENSE text eol=lf
*.html text eol=lf
*.js text eol=lf
*.json text eol=lf
*.css text eol=lf
*.css text eol=lf
*.jsx text eol=lf
.gitignore text eol=lf
.gitattributes text eol=lf
.gitmodules text eol=lf
.jshintrc text eol=lf
*.md text eol=lf
*.rst text eol=lf

72
.gitignore vendored
View File

@@ -1,36 +1,36 @@
# Logs
logs
*.log
# Runtime data
pids
*.pid
*.seed
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release
# Dependency directory
# Deployed apps should consider commenting this line out:
# see https://npmjs.org/doc/faq.html#Should-I-check-my-node_modules-folder-into-git
node_modules
.DS_Store
vendor/bower_components
.idea
# Generated chrome extension
public/
web-ext-artifacts/
.web-extension-id
# Logs
logs
*.log
# Runtime data
pids
*.pid
*.seed
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release
# Dependency directory
# Deployed apps should consider commenting this line out:
# see https://npmjs.org/doc/faq.html#Should-I-check-my-node_modules-folder-into-git
node_modules
.DS_Store
vendor/bower_components
.idea
# Generated chrome extension
public/
web-ext-artifacts/
.web-extension-id

20
.jshintrc
View File

@@ -1,10 +1,10 @@
{
"node": true,
"curly": true,
"latedef": true,
"quotmark": true,
"undef": true,
"unused": true,
"trailing": true,
"predef": [ "chrome" ]
}
{
"node": true,
"curly": true,
"latedef": true,
"quotmark": true,
"undef": true,
"unused": true,
"trailing": true,
"predef": [ "chrome" ]
}

48
HISTORY.rst
View File

@@ -1,24 +1,24 @@
History
-------
1.0.2 (2016-06-30)
++++++++++++++++++
- Fix bug preventing options from saving. #42
1.0.1 (2016-06-29)
++++++++++++++++++
- Fix blacklist setting.
- Misc bug fixes related to icon popup.
- Send plugin name and version with heartbeat data. #41
1.0.0 (2016-06-29)
++++++++++++++++++
- Birth
History
-------
1.0.2 (2016-06-30)
++++++++++++++++++
- Fix bug preventing options from saving. #42
1.0.1 (2016-06-29)
++++++++++++++++++
- Fix blacklist setting.
- Misc bug fixes related to icon popup.
- Send plugin name and version with heartbeat data. #41
1.0.0 (2016-06-29)
++++++++++++++++++
- Birth

154
README.md
View File

@@ -1,77 +1,77 @@
chrome-wakatime
===============
Automatic time tracking for stats about your website debugging, research, documentation, etc.
Note: Activity from this Chrome extension will not display on leaderboards, so installing this extension may lower your rank.
## Installation
1. Install the extension:
[![Chrome Web Store](https://wakatime.com/static/img/chrome-web-store.png)](https://chrome.google.com/webstore/detail/wakatime/jnbbnacmeggbgdjgaoojpmhdlkkpblgi)
2. Login to [WakaTime](https://wakatime.com/).
3. Use Chrome like you normally do and your time will be tracked for you automatically.
4. Visit https://wakatime.com to see your logged time.
5. Use in conjunction with [other WakaTime plugins](https://wakatime.com/plugins).
## Screenshots
![SC open](./screenshots/sc_6-green.png)
![SC open](./screenshots/sc_6-open.png)
![Options SC](./screenshots/sc_8-options.png)
## Development instructions
> For development purposes only.
To get started, install NPM and Bower dependencies, and do an initial build with Gulp:
```
npm start
```
To build the extension once:
```
npm run gulp
```
To monitor changes:
```
npm run watch
```
Run tests:
```
npm test
```
Lint code *(Both JS and JSX)*:
```
jsxhint --jsx-only .
```
### Automatic code linting
There is a precommit hook that lints the code before commiting the changes.
### Load unpacked in Chrome
1. Clone repository to disk
2. Go to `Settings` → `Extensions`
3. Enable `Developer mode`
4. Click `Load unpacked extension...`
5. Select repository directory
chrome-wakatime
===============
Automatic time tracking for stats about your website debugging, research, documentation, etc.
Note: Activity from this Chrome extension will not display on leaderboards, so installing this extension may lower your rank.
## Installation
1. Install the extension:
[![Chrome Web Store](https://wakatime.com/static/img/chrome-web-store.png)](https://chrome.google.com/webstore/detail/wakatime/jnbbnacmeggbgdjgaoojpmhdlkkpblgi)
2. Login to [WakaTime](https://wakatime.com/).
3. Use Chrome like you normally do and your time will be tracked for you automatically.
4. Visit https://wakatime.com to see your logged time.
5. Use in conjunction with [other WakaTime plugins](https://wakatime.com/plugins).
## Screenshots
![SC open](./screenshots/sc_6-green.png)
![SC open](./screenshots/sc_6-open.png)
![Options SC](./screenshots/sc_8-options.png)
## Development instructions
> For development purposes only.
To get started, install NPM and Bower dependencies, and do an initial build with Gulp:
```
npm start
```
To build the extension once:
```
npm run gulp
```
To monitor changes:
```
npm run watch
```
Run tests:
```
npm test
```
Lint code *(Both JS and JSX)*:
```
jsxhint --jsx-only .
```
### Automatic code linting
There is a precommit hook that lints the code before commiting the changes.
### Load unpacked in Chrome
1. Clone repository to disk
2. Go to `Settings` → `Extensions`
3. Enable `Developer mode`
4. Click `Load unpacked extension...`
5. Select repository directory

30
assets/js/app.jsx
View File

@@ -1,15 +1,15 @@
/* This is a fix for Bootstrap requiring jQuery */
global.jQuery = require('jquery');
require('bootstrap');
var React = require('react');
var ReactDOM = require('react-dom');
// React components
var WakaTime = require('./components/WakaTime.jsx');
ReactDOM.render(
<WakaTime />,
document.getElementById('wakatime')
);
/* This is a fix for Bootstrap requiring jQuery */
global.jQuery = require('jquery');
require('bootstrap');
var React = require('react');
var ReactDOM = require('react-dom');
// React components
var WakaTime = require('./components/WakaTime.jsx');
ReactDOM.render(
<WakaTime />,
document.getElementById('wakatime')
);

38
assets/js/components/Alert.jsx
View File

@@ -1,19 +1,19 @@
var React = require('react');
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;
var React = require('react');
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;

212
assets/js/components/MainList.jsx
View File

@@ -1,106 +1,106 @@
/* global browser */
var React = require('react');
var MainList = React.createClass({
_openOptionsPage: function() {
if (browser.runtime.openOptionsPage) {
// New way to open options pages, if supported (Chrome 42+).
browser.runtime.openOptionsPage();
} else {
// Reasonable fallback.
window.open(browser.runtime.getURL('options.html'));
}
},
render: function() {
var that = this;
var loginLogoutButton = function() {
if (that.props.loggedIn === true) {
return (
<div>
<a href="#" className="list-group-item" onClick={that.props.logoutUser}>
<i className="fa fa-fw fa-sign-out"></i>
Logout
</a>
</div>
);
}
return (
<a target="_blank" href="https://wakatime.com/login" className="list-group-item">
<i className="fa fa-fw fa-sign-in"></i>
Login
</a>
);
};
// If logging is enabled, display that info to user
var loggingStatus = function() {
if(that.props.loggingEnabled === true && that.props.loggedIn === true)
{
return (
<div className="row">
<div className="col-xs-12">
<p>
<a href="#" onClick={that.props.disableLogging} className="btn btn-danger btn-block">Disable logging</a>
</p>
</div>
</div>
);
}
else if(that.props.loggingEnabled === false && that.props.loggedIn === true)
{
return (
<div className="row">
<div className="col-xs-12">
<p>
<a href="#" onClick={that.props.enableLogging} className="btn btn-success btn-block">Enable logging</a>
</p>
</div>
</div>
);
}
};
var totalTimeLoggedToday = function() {
if (that.props.loggedIn === true) {
return (
<div className="row">
<div className="col-xs-12">
<blockquote>
<p>{that.props.totalTimeLoggedToday}</p>
<small><cite>TOTAL TIME LOGGED TODAY</cite></small>
</blockquote>
</div>
</div>
);
}
};
return (
<div>
{totalTimeLoggedToday()}
{loggingStatus()}
<div className="list-group">
<a href="#" className="list-group-item" onClick={this._openOptionsPage}>
<i className="fa fa-fw fa-cogs"></i>
Options
</a>
{loginLogoutButton()}
</div>
</div>
);
}
});
module.exports = MainList;
/* global browser */
var React = require('react');
var MainList = React.createClass({
_openOptionsPage: function() {
if (browser.runtime.openOptionsPage) {
// New way to open options pages, if supported (Chrome 42+).
browser.runtime.openOptionsPage();
} else {
// Reasonable fallback.
window.open(browser.runtime.getURL('options.html'));
}
},
render: function() {
var that = this;
var loginLogoutButton = function() {
if (that.props.loggedIn === true) {
return (
<div>
<a href="#" className="list-group-item" onClick={that.props.logoutUser}>
<i className="fa fa-fw fa-sign-out"></i>
Logout
</a>
</div>
);
}
return (
<a target="_blank" href="https://wakatime.com/login" className="list-group-item">
<i className="fa fa-fw fa-sign-in"></i>
Login
</a>
);
};
// If logging is enabled, display that info to user
var loggingStatus = function() {
if(that.props.loggingEnabled === true && that.props.loggedIn === true)
{
return (
<div className="row">
<div className="col-xs-12">
<p>
<a href="#" onClick={that.props.disableLogging} className="btn btn-danger btn-block">Disable logging</a>
</p>
</div>
</div>
);
}
else if(that.props.loggingEnabled === false && that.props.loggedIn === true)
{
return (
<div className="row">
<div className="col-xs-12">
<p>
<a href="#" onClick={that.props.enableLogging} className="btn btn-success btn-block">Enable logging</a>
</p>
</div>
</div>
);
}
};
var totalTimeLoggedToday = function() {
if (that.props.loggedIn === true) {
return (
<div className="row">
<div className="col-xs-12">
<blockquote>
<p>{that.props.totalTimeLoggedToday}</p>
<small><cite>TOTAL TIME LOGGED TODAY</cite></small>
</blockquote>
</div>
</div>
);
}
};
return (
<div>
{totalTimeLoggedToday()}
{loggingStatus()}
<div className="list-group">
<a href="#" className="list-group-item" onClick={this._openOptionsPage}>
<i className="fa fa-fw fa-cogs"></i>
Options
</a>
{loginLogoutButton()}
</div>
</div>
);
}
});
module.exports = MainList;

178
assets/js/components/NavBar.jsx
View File

@@ -1,89 +1,89 @@
var React = require('react');
var NavBar = React.createClass({
render: function() {
var that = this;
var signedInAs = function() {
if (that.props.loggedIn === true) {
return (
<p className="navbar-text">Signed in as <b>{that.props.user.full_name}</b></p>
);
}
};
var dashboard = function() {
if (that.props.loggedIn === true) {
return (
<li>
<a target="_blank" href="https://wakatime.com/dashboard">
<i className="fa fa-fw fa-tachometer"></i>
Dashboard
</a>
</li>
);
}
};
var customRules = function() {
if (that.props.loggedIn === true) {
return (
<li>
<a target="_blank" href="https://wakatime.com/settings/rules">
<i className="fa fa-fw fa-filter"></i>
Custom Rules
</a>
</li>
);
}
};
return (
<nav className="navbar navbar-default" role="navigation">
<div className="container-fluid">
<div className="navbar-header">
<button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span className="sr-only">Toggle navigation</span>
<i className="fa fa-fw fa-cogs"></i>
</button>
<a target="_blank" className="navbar-brand" href="https://wakatime.com">
WakaTime
<img src="graphics/wakatime-logo-48.png" />
</a>
</div>
<div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
{signedInAs()}
<ul className="nav navbar-nav">
{customRules()}
{dashboard()}
<li className="dropdown">
<a href="#" className="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
<i className="fa fa-fw fa-info"></i>
About
<span className="caret"></span>
</a>
<ul className="dropdown-menu" role="menu">
<li>
<a target="_blank" href="https://github.com/wakatime/chrome-wakatime/issues">
<i className="fa fa-fw fa-bug"></i>
Report an Issue</a>
</li>
<li>
<a target="_blank" href="https://github.com/wakatime/chrome-wakatime">
<i className="fa fa-fw fa-github"></i>
View on GitHub</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
);
}
});
module.exports = NavBar;
var React = require('react');
var NavBar = React.createClass({
render: function() {
var that = this;
var signedInAs = function() {
if (that.props.loggedIn === true) {
return (
<p className="navbar-text">Signed in as <b>{that.props.user.full_name}</b></p>
);
}
};
var dashboard = function() {
if (that.props.loggedIn === true) {
return (
<li>
<a target="_blank" href="https://wakatime.com/dashboard">
<i className="fa fa-fw fa-tachometer"></i>
Dashboard
</a>
</li>
);
}
};
var customRules = function() {
if (that.props.loggedIn === true) {
return (
<li>
<a target="_blank" href="https://wakatime.com/settings/rules">
<i className="fa fa-fw fa-filter"></i>
Custom Rules
</a>
</li>
);
}
};
return (
<nav className="navbar navbar-default" role="navigation">
<div className="container-fluid">
<div className="navbar-header">
<button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span className="sr-only">Toggle navigation</span>
<i className="fa fa-fw fa-cogs"></i>
</button>
<a target="_blank" className="navbar-brand" href="https://wakatime.com">
WakaTime
<img src="graphics/wakatime-logo-48.png" />
</a>
</div>
<div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
{signedInAs()}
<ul className="nav navbar-nav">
{customRules()}
{dashboard()}
<li className="dropdown">
<a href="#" className="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
<i className="fa fa-fw fa-info"></i>
About
<span className="caret"></span>
</a>
<ul className="dropdown-menu" role="menu">
<li>
<a target="_blank" href="https://github.com/wakatime/chrome-wakatime/issues">
<i className="fa fa-fw fa-bug"></i>
Report an Issue</a>
</li>
<li>
<a target="_blank" href="https://github.com/wakatime/chrome-wakatime">
<i className="fa fa-fw fa-github"></i>
View on GitHub</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
);
}
});
module.exports = NavBar;

428
assets/js/components/Options.jsx
View File

@@ -1,214 +1,214 @@
/* global browser */
var React = require('react');
var ReactCSSTransitionGroup = require('react-addons-css-transition-group');
var config = require('../config');
// React components
var Alert = require('./Alert.jsx');
var SitesList = require('./SitesList.jsx');
/**
* 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;
browser.storage.sync.get({
theme: config.theme,
blacklist: '',
whitelist: '',
loggingType: config.loggingType,
loggingStyle: config.loggingStyle
}).then(function (items) {
that.setState({
theme: items.theme,
blacklist: items.blacklist,
whitelist: items.whitelist,
loggingType: items.loggingType,
loggingStyle: items.loggingStyle
});
that.refs.theme.value = items.theme;
that.refs.loggingType.value = items.loggingType;
that.refs.loggingStyle.value = items.loggingStyle;
});
},
_handleSubmit: function (e) {
e.preventDefault();
this.saveSettings();
},
saveSettings: function () {
var that = this;
var theme = this.refs.theme.value.trim();
var loggingType = this.refs.loggingType.value.trim();
var loggingStyle = this.refs.loggingStyle.value.trim();
// Trimming blacklist and whitelist removes blank lines and spaces.
var blacklist = that.state.blacklist.trim();
var whitelist = that.state.whitelist.trim();
// Sync options with google storage.
browser.storage.sync.set({
theme: theme,
blacklist: blacklist,
whitelist: whitelist,
loggingType: loggingType,
loggingStyle: loggingStyle
}).then(function () {
// Set state to be newly entered values.
that.setState({
theme: theme,
blacklist: blacklist,
whitelist: whitelist,
loggingType: loggingType,
loggingStyle: loggingStyle,
displayAlert: true
});
});
},
_displayBlackOrWhiteList: function () {
var loggingStyle = this.refs.loggingStyle.value.trim();
this.setState({loggingStyle: loggingStyle});
},
_updateBlacklistState: function(sites){
this.setState({
blacklist: sites
});
},
_updateWhitelistState: function(sites){
this.setState({
whitelist: sites
});
},
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 (
<SitesList
handleChange={that._updateBlacklistState}
label="Blacklist"
sites={that.state.blacklist}
helpText="Sites that you don't want to show in your reports." />
);
}
return (
<SitesList
handleChange={that._updateWhitelistState}
label="Whitelist"
sites={that.state.whitelist}
helpText="Sites that you want to show in your reports." />
);
};
return (
<div className="container">
<div className="row">
<div className="col-md-12">
<ReactCSSTransitionGroup transitionName="alert" transitionEnterTimeout={500} transitionLeaveTimeout={300}>
{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;
/* global browser */
var React = require('react');
var ReactCSSTransitionGroup = require('react-addons-css-transition-group');
var config = require('../config');
// React components
var Alert = require('./Alert.jsx');
var SitesList = require('./SitesList.jsx');
/**
* 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;
browser.storage.sync.get({
theme: config.theme,
blacklist: '',
whitelist: '',
loggingType: config.loggingType,
loggingStyle: config.loggingStyle
}).then(function (items) {
that.setState({
theme: items.theme,
blacklist: items.blacklist,
whitelist: items.whitelist,
loggingType: items.loggingType,
loggingStyle: items.loggingStyle
});
that.refs.theme.value = items.theme;
that.refs.loggingType.value = items.loggingType;
that.refs.loggingStyle.value = items.loggingStyle;
});
},
_handleSubmit: function (e) {
e.preventDefault();
this.saveSettings();
},
saveSettings: function () {
var that = this;
var theme = this.refs.theme.value.trim();
var loggingType = this.refs.loggingType.value.trim();
var loggingStyle = this.refs.loggingStyle.value.trim();
// Trimming blacklist and whitelist removes blank lines and spaces.
var blacklist = that.state.blacklist.trim();
var whitelist = that.state.whitelist.trim();
// Sync options with google storage.
browser.storage.sync.set({
theme: theme,
blacklist: blacklist,
whitelist: whitelist,
loggingType: loggingType,
loggingStyle: loggingStyle
}).then(function () {
// Set state to be newly entered values.
that.setState({
theme: theme,
blacklist: blacklist,
whitelist: whitelist,
loggingType: loggingType,
loggingStyle: loggingStyle,
displayAlert: true
});
});
},
_displayBlackOrWhiteList: function () {
var loggingStyle = this.refs.loggingStyle.value.trim();
this.setState({loggingStyle: loggingStyle});
},
_updateBlacklistState: function(sites){
this.setState({
blacklist: sites
});
},
_updateWhitelistState: function(sites){
this.setState({
whitelist: sites
});
},
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 (
<SitesList
handleChange={that._updateBlacklistState}
label="Blacklist"
sites={that.state.blacklist}
helpText="Sites that you don't want to show in your reports." />
);
}
return (
<SitesList
handleChange={that._updateWhitelistState}
label="Whitelist"
sites={that.state.whitelist}
helpText="Sites that you want to show in your reports." />
);
};
return (
<div className="container">
<div className="row">
<div className="col-md-12">
<ReactCSSTransitionGroup transitionName="alert" transitionEnterTimeout={500} transitionLeaveTimeout={300}>
{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;

70
assets/js/components/SitesList.jsx
View File

@@ -1,35 +1,35 @@
var React = require('react');
var SitesList = React.createClass({
getDefaultProps: function () {
return {
placeholder: 'http://google.com'
};
},
_handleChange: function (event) {
var sites = event.target.value;
this.props.handleChange(sites);
},
render: function () {
return (
<div className="form-group">
<label htmlFor="sites" className="col-lg-2 control-label">{this.props.label}</label>
<div className="col-lg-10">
<textarea className="form-control" rows="3" ref="sites" onChange={this._handleChange}
placeholder={this.props.placeholder} value={this.props.sites}></textarea>
<span className="help-block">{this.props.helpText}
<br/>
One line per site.</span>
</div>
</div>
);
}
});
module.exports = SitesList;
var React = require('react');
var SitesList = React.createClass({
getDefaultProps: function () {
return {
placeholder: 'http://google.com'
};
},
_handleChange: function (event) {
var sites = event.target.value;
this.props.handleChange(sites);
},
render: function () {
return (
<div className="form-group">
<label htmlFor="sites" className="col-lg-2 control-label">{this.props.label}</label>
<div className="col-lg-10">
<textarea className="form-control" rows="3" ref="sites" onChange={this._handleChange}
placeholder={this.props.placeholder} value={this.props.sites}></textarea>
<span className="help-block">{this.props.helpText}
<br/>
One line per site.</span>
</div>
</div>
);
}
});
module.exports = SitesList;

346
assets/js/components/WakaTime.jsx
View File

@@ -1,173 +1,173 @@
/* global browser */
var React = require("react");
var $ = require('jquery');
var config = require('../config');
// React components
var NavBar = require('./NavBar.jsx');
var MainList = require('./MainList.jsx');
// Core
var WakaTimeCore = require('../core/WakaTimeCore').default;
// Helpers
var changeExtensionState = require('../helpers/changeExtensionState');
var Wakatime = React.createClass({
getInitialState: function() {
return {
user: {
full_name: null,
email: null,
photo: null
},
loggedIn: false,
loggingEnabled: config.loggingEnabled,
totalTimeLoggedToday: '0 minutes'
};
},
componentDidMount: function() {
var wakatime = new WakaTimeCore();
var that = this;
wakatime.checkAuth().done(function(data) {
if (data !== false) {
browser.storage.sync.get({
loggingEnabled: config.loggingEnabled
}).then(function(items) {
that.setState({loggingEnabled: items.loggingEnabled});
if (items.loggingEnabled === true) {
changeExtensionState('allGood');
}
else {
changeExtensionState('notLogging');
}
});
that.setState({
user: {
full_name: data.full_name,
email: data.email,
photo: data.photo
},
loggedIn: true
});
wakatime.getTotalTimeLoggedToday().done(function(grand_total) {
that.setState({
totalTimeLoggedToday: grand_total.text
});
});
}
else {
changeExtensionState('notSignedIn');
}
});
},
logoutUser: function() {
var deferredObject = $.Deferred();
var that = this;
$.ajax({
url: config.logoutUserUrl,
method: 'GET',
success: function() {
deferredObject.resolve(that);
},
error: function(xhr, status, err) {
console.error(config.logoutUserUrl, status, err.toString());
deferredObject.resolve(that);
}
});
return deferredObject.promise();
},
_logoutUser: function() {
var that = this;
this.logoutUser().done(function(){
that.setState({
user: {
full_name: null,
email: null,
photo: null
},
loggedIn: false,
loggingEnabled: false
});
changeExtensionState('notSignedIn');
});
},
_disableLogging: function() {
this.setState({
loggingEnabled: false
});
changeExtensionState('notLogging');
browser.storage.sync.set({
loggingEnabled: false
});
},
_enableLogging: function() {
this.setState({
loggingEnabled: true
});
changeExtensionState('allGood');
browser.storage.sync.set({
loggingEnabled: true
});
},
render: function() {
return (
<div>
<NavBar
user={this.state.user}
loggedIn={this.state.loggedIn} />
<div className="container">
<div className="row">
<div className="col-md-12">
<MainList
disableLogging={this._disableLogging}
enableLogging={this._enableLogging}
loggingEnabled={this.state.loggingEnabled}
user={this.state.user}
totalTimeLoggedToday={this.state.totalTimeLoggedToday}
logoutUser={this._logoutUser}
loggedIn={this.state.loggedIn} />
</div>
</div>
</div>
</div>
);
}
});
module.exports = Wakatime;
/* global browser */
var React = require("react");
var $ = require('jquery');
var config = require('../config');
// React components
var NavBar = require('./NavBar.jsx');
var MainList = require('./MainList.jsx');
// Core
var WakaTimeCore = require('../core/WakaTimeCore').default;
// Helpers
var changeExtensionState = require('../helpers/changeExtensionState');
var Wakatime = React.createClass({
getInitialState: function() {
return {
user: {
full_name: null,
email: null,
photo: null
},
loggedIn: false,
loggingEnabled: config.loggingEnabled,
totalTimeLoggedToday: '0 minutes'
};
},
componentDidMount: function() {
var wakatime = new WakaTimeCore();
var that = this;
wakatime.checkAuth().done(function(data) {
if (data !== false) {
browser.storage.sync.get({
loggingEnabled: config.loggingEnabled
}).then(function(items) {
that.setState({loggingEnabled: items.loggingEnabled});
if (items.loggingEnabled === true) {
changeExtensionState('allGood');
}
else {
changeExtensionState('notLogging');
}
});
that.setState({
user: {
full_name: data.full_name,
email: data.email,
photo: data.photo
},
loggedIn: true
});
wakatime.getTotalTimeLoggedToday().done(function(grand_total) {
that.setState({
totalTimeLoggedToday: grand_total.text
});
});
}
else {
changeExtensionState('notSignedIn');
}
});
},
logoutUser: function() {
var deferredObject = $.Deferred();
var that = this;
$.ajax({
url: config.logoutUserUrl,
method: 'GET',
success: function() {
deferredObject.resolve(that);
},
error: function(xhr, status, err) {
console.error(config.logoutUserUrl, status, err.toString());
deferredObject.resolve(that);
}
});
return deferredObject.promise();
},
_logoutUser: function() {
var that = this;
this.logoutUser().done(function(){
that.setState({
user: {
full_name: null,
email: null,
photo: null
},
loggedIn: false,
loggingEnabled: false
});
changeExtensionState('notSignedIn');
});
},
_disableLogging: function() {
this.setState({
loggingEnabled: false
});
changeExtensionState('notLogging');
browser.storage.sync.set({
loggingEnabled: false
});
},
_enableLogging: function() {
this.setState({
loggingEnabled: true
});
changeExtensionState('allGood');
browser.storage.sync.set({
loggingEnabled: true
});
},
render: function() {
return (
<div>
<NavBar
user={this.state.user}
loggedIn={this.state.loggedIn} />
<div className="container">
<div className="row">
<div className="col-md-12">
<MainList
disableLogging={this._disableLogging}
enableLogging={this._enableLogging}
loggingEnabled={this.state.loggingEnabled}
user={this.state.user}
totalTimeLoggedToday={this.state.totalTimeLoggedToday}
logoutUser={this._logoutUser}
loggedIn={this.state.loggedIn} />
</div>
</div>
</div>
</div>
);
}
});
module.exports = Wakatime;

32
assets/js/options.jsx
View File

@@ -1,16 +1,16 @@
/* global browser */
/* This is a fix for Bootstrap requiring jQuery */
global.jQuery = require('jquery');
require('bootstrap');
var React = require('react');
var ReactDOM = require('react-dom');
// React components
var Options = require('./components/Options.jsx');
ReactDOM.render(
<Options />,
document.getElementById('wakatime-options')
);
/* global browser */
/* This is a fix for Bootstrap requiring jQuery */
global.jQuery = require('jquery');
require('bootstrap');
var React = require('react');
var ReactDOM = require('react-dom');
// React components
var Options = require('./components/Options.jsx');
ReactDOM.render(
<Options />,
document.getElementById('wakatime-options')
);

38
assets/less/bootstrap/.csslintrc
View File

@@ -1,19 +1,19 @@
{
"adjoining-classes": false,
"box-sizing": false,
"box-model": false,
"compatible-vendor-prefixes": false,
"floats": false,
"font-sizes": false,
"gradients": false,
"important": false,
"known-properties": false,
"outline-none": false,
"qualified-headings": false,
"regex-selectors": false,
"shorthand": false,
"text-indent": false,
"unique-headings": false,
"universal-selector": false,
"unqualified-attributes": false
}
{
"adjoining-classes": false,
"box-sizing": false,
"box-model": false,
"compatible-vendor-prefixes": false,
"floats": false,
"font-sizes": false,
"gradients": false,
"important": false,
"known-properties": false,
"outline-none": false,
"qualified-headings": false,
"regex-selectors": false,
"shorthand": false,
"text-indent": false,
"unique-headings": false,
"universal-selector": false,
"unqualified-attributes": false
}