Merge pull request #20 from radiovisual/master

Adds XO linting. Closes #18

.travis.yml

@@ -0,0 +1,4 @@
+sudo: false
+language: node_js
+node_js:
+  - 'stable'

main.js

@@ -14,10 +14,10 @@ const dataStore = require('./src/data-store');
 //     showDevTools: true
 // });
 
-let rulers = [];
+const rulers = [];
 let settingsWindow;
 let helpWindow;
-let lastFocusedRuler
+let lastFocusedRuler;
 
 /**
  * Create a ruler window and push it to the `rulers` array. The ruler window
@@ -26,7 +26,7 @@ let lastFocusedRuler
  * @param {Object} windowInfo - Size and position of the window
  */
 function createNewRuler(windowInfo) {
-	let _windowInfo = windowInfo || {};
+	const _windowInfo = windowInfo || {};
 	let ruler = new BrowserWindow({
 		'width': _windowInfo.width || 201,
 		'height': _windowInfo.height || 151,
@@ -95,8 +95,8 @@ let hidden = false;
  * @param {BrowserWindow} ruler - The ruler to toggle
  * @return {Promise}
  */
-let toggleRuler = (ruler) => {
-	return new Promise((resolve) => setTimeout(() => {
+const toggleRuler = ruler => {
+	return new Promise(resolve => setTimeout(() => {
 		ruler[hidden ? 'hide' : 'show']();
 		resolve();
 	}));
@@ -120,10 +120,10 @@ function toggleRulerCommand() {
 }
 
 app.dock.hide();
-app.on('ready', function () {
-	let trayIcon = new Tray(path.join(__dirname, 'src/assets/images/lrTemplate.png'));
+app.on('ready', () => {
+	const trayIcon = new Tray(path.join(__dirname, 'src/assets/images/lrTemplate.png'));
 
-	var trayMenuTemplate = [
+	const trayMenuTemplate = [
 		{
 			label: 'New Ruler',
 			accelerator: 'Command+Ctrl+R',
@@ -178,12 +178,12 @@ app.on('ready', function () {
 		}
 	];
 
-	let trayMenu = Menu.buildFromTemplate(trayMenuTemplate);
-	let toggleRulersMenu = trayMenu.items[1];
+	const trayMenu = Menu.buildFromTemplate(trayMenuTemplate);
+	const toggleRulersMenu = trayMenu.items[1];
 	trayIcon.setContextMenu(trayMenu);
 
 	// Application menu
-	let appMenu = Menu.buildFromTemplate([{
+	const appMenu = Menu.buildFromTemplate([{
 		label: require('electron').app.getName(),
 		submenu: [{
 			label: 'Quit',
@@ -202,7 +202,9 @@ app.on('ready', function () {
 	Menu.setApplicationMenu(appMenu);
 
 	// We observe changes on the `rulers` array to enable/disable the toggle menu.
-	Array.observe(rulers, () => toggleRulersMenu.enabled = Boolean(rulers.length));
+	Array.observe(rulers, () => {
+		toggleRulersMenu.enabled = Boolean(rulers.length);
+	});
 
 	globalShortcut.register('Command + Control + T', toggleRulerCommand);
 	globalShortcut.register('Command + Control + R', createNewRuler);
@@ -227,7 +229,7 @@ app.on('window-all-closed', () => {
 // Let rulers know that a config changed. For instance, the application uses
 // 'em' instead of 'px' as units.
 ipc.on('settings-changed', () => {
-	rulers.forEach((ruler) => ruler.send('settings-changed'));
+	rulers.forEach(ruler => ruler.send('settings-changed'));
 });
 
 // Duplicate a given ruler.

package.json

@@ -4,6 +4,7 @@
   "description": "Ruler application with web-development in mind.",
   "main": "main.js",
   "scripts": {
+    "test": "xo",
     "start": "electron main.js",
     "package": "electron-packager . linear --platform=darwin --arch=all --version=0.35.4 --icon=src/assets/images/lrMacIcon.icns --out=bin --overwrite"
   },
@@ -21,10 +22,18 @@
   "homepage": "http://mikaa123.github.io/linear-website/",
   "devDependencies": {
     "electron-packager": "^5.1.1",
-    "electron-prebuilt": "^0.35.0"
+    "electron-prebuilt": "^0.35.0",
+    "xo": "^0.13.0"
   },
   "dependencies": {
     "electron-debug": "^0.5.1",
     "nconf": "^0.8.2"
+  },
+  "xo": {
+    "esnext": true,
+    "envs": [
+      "node",
+      "browser"
+    ]
   }
 }

src/app/ruler/ruler.js

@@ -7,19 +7,19 @@ const ipc = require('electron').ipcRenderer;
 const Menu = remote.Menu;
 const MenuItem = remote.MenuItem;
 
-let borders = {
+const borders = {
 	top: document.querySelector('.ruler__inner__border--top'),
 	right: document.querySelector('.ruler__inner__border--right'),
 	bottom: document.querySelector('.ruler__inner__border--bottom'),
 	left: document.querySelector('.ruler__inner__border--left')
 };
 
-let info = {
+const info = {
 	width: document.querySelector('.ruler__inner__info__width'),
 	height: document.querySelector('.ruler__inner__info__height')
 };
 
-let centerGuides = {
+const centerGuides = {
 	vertical: document.querySelector('.center-guide__vertical'),
 	horizontal: document.querySelector('.center-guide__horizontal')
 };
@@ -32,7 +32,7 @@ let baseFontSize;
 let isShiftDown = false;
 
 // This object holds the different strategies for displaying units.
-let unitStrategies = {
+const unitStrategies = {
 	/**
 	 * Format into to pixels.
 	 * @param	{px} px - The number of px to display.
@@ -58,7 +58,7 @@ let displayStrategy;
  * Load saved data from the `dataStore` and populate the view with it.
  */
 function loadSettings() {
-	let unit = dataStore.readSettings('unit') || 'px';
+	const unit = dataStore.readSettings('unit') || 'px';
 	baseFontSize = dataStore.readSettings('size') || '16';
 
 	displayStrategy = unitStrategies[unit];
@@ -73,15 +73,15 @@ function updateMesures() {
 	info.height.textContent = displayStrategy(borders.bottom.getBoundingClientRect().top - borders.top.getBoundingClientRect().top);
 }
 
-let contextMenu = new Menu();
+const contextMenu = new Menu();
 contextMenu.append(new MenuItem({
 	label: 'Duplicate',
 
 	// Duplicate the current ruler. We send position information to the main
 	// process so that it can create a new window at the same spot.
 	click: () => {
-		let bounds = browserWindow.getBounds();
-		let position = browserWindow.getPosition();
+		const bounds = browserWindow.getBounds();
+		const position = browserWindow.getPosition();
 
 		ipc.send('create-ruler', {
 			x: position[0],
@@ -92,8 +92,8 @@ contextMenu.append(new MenuItem({
 	}
 }));
 
-window.addEventListener('keydown', function (evt) {
-	let shift = 16;
+window.addEventListener('keydown', evt => {
+	const shift = 16;
 
 	switch (evt.keyCode) {
 		case shift:
@@ -104,21 +104,21 @@ window.addEventListener('keydown', function (evt) {
 	}
 });
 
-window.addEventListener('keyup', function (evt) {
+window.addEventListener('keyup', evt => {
 	// Keycodes for arrowkeys and shift.
-	let up = 38,
-		down = 40,
-		left = 37,
-		right = 39,
-		shift = 16;
+	const up = 38;
+	const down = 40;
+	const left = 37;
+	const right = 39;
+	const shift = 16;
 
 	// Grabbing the current position to add to it.
-	let position = browserWindow.getPosition();
-	let x = position[0];
-	let y = position[1];
+	const position = browserWindow.getPosition();
+	const x = position[0];
+	const y = position[1];
 
 	// Figuring out if shiftKey is down to increment by 10px or just 1px
-	let increment = isShiftDown ? 10 : 1;
+	const increment = isShiftDown ? 10 : 1;
 
 	switch (evt.keyCode) {
 		case shift:
@@ -140,7 +140,7 @@ window.addEventListener('keyup', function (evt) {
 	}
 });
 
-window.addEventListener('contextmenu', function (e) {
+window.addEventListener('contextmenu', e => {
 	e.preventDefault();
 	contextMenu.popup(remote.getCurrentWindow());
 }, false);
@@ -169,8 +169,8 @@ function toggleCenterGuides() {
 
 function toggleTheme() {
 	document.querySelector('.ruler__inner').classList.toggle('dark-theme');
-	document.querySelector('#guide__vertical').classList.toggle('darkCenterGuides');
-	document.querySelector('#guide__horizontal').classList.toggle('darkCenterGuides');
+	document.querySelector('.center-guide__vertical').classList.toggle('darkCenterGuides');
+	document.querySelector('.center-guide__horizontal').classList.toggle('darkCenterGuides');
 }
 
 loadSettings();

src/app/settings/settings.js

@@ -14,7 +14,7 @@ const inputs = {
  * @param {Function} cb - The function to decorate.
  * @return {Function} The decorated function.
  */
-let settingsChangedDecorator = (cb) => (evt) => {
+const settingsChangedDecorator = cb => evt => {
 	cb(evt);
 	ipc.send('settings-changed');
 };
@@ -23,20 +23,20 @@ let settingsChangedDecorator = (cb) => (evt) => {
  * Load saved data from the `dataStore` and populate the view with it.
  */
 function loadSettings() {
-	let unit = dataStore.readSettings('unit') || 'px';
-	let size = dataStore.readSettings('size') || '16';
+	const unit = dataStore.readSettings('unit') || 'px';
+	const size = dataStore.readSettings('size') || '16';
 
 	inputs[unit].checked = true;
 	inputs.size.value = size;
 }
 
-['px', 'em'].forEach((radio) => {
-	inputs[radio].addEventListener('change', settingsChangedDecorator((evt) => {
+['px', 'em'].forEach(radio => {
+	inputs[radio].addEventListener('change', settingsChangedDecorator(evt => {
 		dataStore.saveSettings('unit', evt.target.value);
 	}));
 });
 
-inputs.size.addEventListener('keyup', settingsChangedDecorator((evt) => {
+inputs.size.addEventListener('keyup', settingsChangedDecorator(evt => {
 	dataStore.saveSettings('size', evt.target.value);
 }));