Merge pull request kudago#67 from GabLeRoux/flat-design-with-autofixing

Flat design with autofixing

.eslintignore

@@ -0,0 +1 @@
+smart-app-banner.js

.eslintrc.yml

@@ -0,0 +1,19 @@
+env:
+  browser: true
+  node: true
+extends: 'eslint:recommended'
+rules:
+  no-undef:
+    - ignore
+  indent:
+    - error
+    - tab
+  linebreak-style:
+    - error
+    - unix
+  quotes:
+    - error
+    - single
+  semi:
+    - error
+    - always

.stylelintrc

@@ -0,0 +1,19 @@
+{
+  "rules": {
+    "block-no-empty": null,
+    "color-no-invalid-hex": true,
+    "comment-empty-line-before": [ "always", {
+      "ignore": ["stylelint-commands", "between-comments"],
+    } ],
+    "declaration-colon-space-after": "always",
+    "indentation": ["space", {
+      "except": ["value"]
+    }],
+    "max-empty-lines": 2,
+    "rule-nested-empty-line-before": [ "always", {
+      "except": ["first-nested"],
+      "ignore": ["after-comment"],
+    } ],
+    "unit-whitelist": ["em", "rem", "%", "s"]
+  }
+}

index.js

@@ -1,40 +1,41 @@
 var extend = require('xtend/mutable');
 var q = require('component-query');
 var doc = require('get-doc');
-var root = doc && doc.documentElement;
 var cookie = require('cookie-cutter');
 var ua = require('ua-parser-js');
 
 // IE < 11 doesn't support navigator language property.
+/* global navigator */
 var userLangAttribute = navigator.language || navigator.userLanguage || navigator.browserLanguage;
 var userLang = userLangAttribute.slice(-2) || 'us';
+var root = doc && doc.documentElement;
 
 // platform dependent functionality
 var mixins = {
 	ios: {
 		appMeta: 'apple-itunes-app',
 		iconRels: ['apple-touch-icon-precomposed', 'apple-touch-icon'],
-		getStoreLink: function() {
+		getStoreLink: function () {
 			return 'https://itunes.apple.com/' + this.options.appStoreLanguage + '/app/id' + this.appId;
 		}
 	},
 	android: {
 		appMeta: 'google-play-app',
 		iconRels: ['android-touch-icon', 'apple-touch-icon-precomposed', 'apple-touch-icon'],
-		getStoreLink: function() {
+		getStoreLink: function () {
 			return 'http://play.google.com/store/apps/details?id=' + this.appId;
 		}
 	},
 	windows: {
 		appMeta: 'msApplication-ID',
 		iconRels: ['windows-touch-icon', 'apple-touch-icon-precomposed', 'apple-touch-icon'],
-		getStoreLink: function() {
+		getStoreLink: function () {
 			return 'http://www.windowsphone.com/s?appid=' + this.appId;
 		}
 	}
 };
 
-var SmartBanner = function(options) {
+var SmartBanner = function (options) {
 	var agent = ua(navigator.userAgent);
 	this.options = extend({}, {
 		daysHidden: 15,
@@ -71,11 +72,13 @@ var SmartBanner = function(options) {
 	// - user is on mobile safari for ios 6 or greater (iOS >= 6 has native support for SmartAppBanner)
 	// - running on standalone mode
 	// - user dismissed banner
-	if (!this.type
-		|| ( this.type === 'ios' && agent.browser.name === 'Mobile Safari' && parseInt(agent.os.version) >= 6 )
-		|| navigator.standalone
-		|| cookie.get('smartbanner-closed')
-		|| cookie.get('smartbanner-installed')) {
+	var unsupported = !this.type;
+	var isMobileSafari = (this.type === 'ios' && agent.browser.name === 'Mobile Safari' && Number(agent.os.version) >= 6);
+	var runningStandAlone = navigator.standalone;
+	var userDismissed = cookie.get('smartbanner-closed');
+	var userInstalled = cookie.get('smartbanner-installed');
+
+	if (unsupported || isMobileSafari || runningStandAlone || userDismissed || userInstalled) {
 		return;
 	}
 
@@ -93,7 +96,7 @@ var SmartBanner = function(options) {
 SmartBanner.prototype = {
 	constructor: SmartBanner,
 
-	create: function() {
+	create: function () {
 		var link = this.getStoreLink();
 		var inStore = this.options.price[this.type] + ' - ' + this.options.store[this.type];
 		var icon;
@@ -114,55 +117,53 @@ SmartBanner.prototype = {
 		var sb = doc.createElement('div');
 		var theme = this.options.theme || this.type;
 
-		sb.className = 'smartbanner' + ' smartbanner-' + theme;
+		sb.className = 'smartbanner smartbanner-' + theme;
 		sb.innerHTML = '<div class="smartbanner-container">' +
 							'<a href="javascript:void(0);" class="smartbanner-close">&times;</a>' +
-							'<span class="smartbanner-icon" style="background-image: url('+icon+')"></span>' +
+							'<span class="smartbanner-icon" style="background-image: url(' + icon + ')"></span>' +
 							'<div class="smartbanner-info">' +
-								'<div class="smartbanner-title">'+this.options.title+'</div>' +
-								'<div>'+this.options.author+'</div>' +
-								'<span>'+inStore+'</span>' +
+								'<div class="smartbanner-title">' + this.options.title + '</div>' +
+								'<div>' + this.options.author + '</div>' +
+								'<span>' + inStore + '</span>' +
 							'</div>' +
-							'<a href="'+link+'" class="smartbanner-button">' +
-								'<span class="smartbanner-button-text">'+this.options.button+'</span>' +
+							'<a href="' + link + '" class="smartbanner-button">' +
+								'<span class="smartbanner-button-text">' + this.options.button + '</span>' +
 							'</a>' +
 						'</div>';
 
-		//there isn’t neccessary a body
+		// there isn’t neccessary a body
 		if (doc.body) {
 			doc.body.appendChild(sb);
-		}
-		else if (doc) {
-			doc.addEventListener('DOMContentLoaded', function(){
+		}		else if (doc) {
+			doc.addEventListener('DOMContentLoaded', function () {
 				doc.body.appendChild(sb);
 			});
 		}
 
 		q('.smartbanner-button', sb).addEventListener('click', this.install.bind(this), false);
 		q('.smartbanner-close', sb).addEventListener('click', this.close.bind(this), false);
-
 	},
-	hide: function() {
+	hide: function () {
 		root.classList.remove('smartbanner-show');
 	},
-	show: function() {
+	show: function () {
 		root.classList.add('smartbanner-show');
 	},
-	close: function() {
+	close: function () {
 		this.hide();
 		cookie.set('smartbanner-closed', 'true', {
 			path: '/',
-			expires: new Date(+new Date() + this.options.daysHidden * 1000 * 60 * 60 * 24)
+			expires: new Date(Number(new Date()) + (this.options.daysHidden * 1000 * 60 * 60 * 24))
 		});
 	},
-	install: function() {
+	install: function () {
 		this.hide();
 		cookie.set('smartbanner-installed', 'true', {
 			path: '/',
-			expires: new Date(+new Date() + this.options.daysReminder * 1000 * 60 * 60 * 24)
+			expires: new Date(Number(new Date()) + (this.options.daysReminder * 1000 * 60 * 60 * 24))
 		});
 	},
-	parseAppId: function() {
+	parseAppId: function () {
 		var meta = q('meta[name="' + this.appMeta + '"]');
 		if (!meta) {
 			return;

package.json

@@ -4,7 +4,9 @@
   "description": "Smart banner for Android or iOS",
   "main": "index.js",
   "scripts": {
-    "build": "browserify index.js -s SmartBanner | ccjs - > smart-app-banner.js"
+    "build": "browserify index.js -s SmartBanner | ccjs - > smart-app-banner.js",
+    "precommit": "xo --fix index.js && stylefmt smart-app-banner.css && npm run test && npm run build",
+    "test": "xo"
   },
   "repository": {
     "type": "git",
@@ -45,6 +47,9 @@
   "devDependencies": {
     "browserify": "^10.2.4",
     "ccjs": "^0.2.0",
-    "closurecompiler": "^1.5.1"
+    "closurecompiler": "^1.5.1",
+    "eslint": "^3.9.1",
+    "stylefmt": "^4.3.1",
+    "xo": "^0.17.0"
   }
 }

smart-app-banner.css

@@ -67,7 +67,7 @@
 }
 
 .smartbanner-title {
-	font-size:13px;
+	font-size: 13px;
 	line-height: 18px;
 }
 
@@ -88,7 +88,8 @@
 	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
 }
 
-.smartbanner-button:active, .smartbanner-button:hover {
+.smartbanner-button:active,
+.smartbanner-button:hover {
 	color: #aaa;
 }
 
@@ -122,9 +123,9 @@
 }
 
 .smartbanner-ios .smartbanner-icon {
-	background: rgba(0,0,0,0.6);
+	background: rgba(0, 0, 0, 0.6);
 	background-size: cover;
-	box-shadow: 0 1px 3px rgba(0,0,0,0.3);
+	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
 }
 
 .smartbanner-ios .smartbanner-info {
@@ -133,7 +134,7 @@
 }
 
 .smartbanner-ios .smartbanner-title {
-	color:#4d4d4d;
+	color: #4d4d4d;
 	font-weight: bold;
 }
 
@@ -163,7 +164,7 @@
 /** Android **/
 .smartbanner-android {
 	background: #3d3d3d url(data:image/gif;base64,R0lGODlhCAAIAIABAFVVVf///yH5BAEHAAEALAAAAAAIAAgAAAINRG4XudroGJBRsYcxKAA7);
-	box-shadow: inset 0 4px 0 #88B131;
+	box-shadow: inset 0 4px 0 #88b131;
 	line-height: 82px;
 }
 
@@ -190,12 +191,12 @@
 }
 
 .smartbanner-android .smartbanner-info {
-	color:#ccc;
-	text-shadow:0 1px 2px #000;
+	color: #ccc;
+	text-shadow: 0 1px 2px #000;
 }
 
 .smartbanner-android .smartbanner-title {
-	color:#fff;
+	color: #fff;
 	font-weight: bold;
 }
 
@@ -205,7 +206,7 @@
 	padding: 0;
 	background: none;
 	border-radius: 0;
-	box-shadow: 0 0 0 1px #333, 0 0 0 2px #DDDCDC;
+	box-shadow: 0 0 0 1px #333, 0 0 0 2px #dddcdc;
 }
 
 .smartbanner-android .smartbanner-button:active,
@@ -217,16 +218,16 @@
 	text-align: center;
 	display: block;
 	padding: 0 10px;
-	background: #42B6C9;
-	background: linear-gradient(to bottom, #42B6C9, #39A9BB);
+	background: #42b6c9;
+	background: linear-gradient(to bottom, #42b6c9, #39a9bb);
 	text-transform: none;
 	text-shadow: none;
 	box-shadow: none;
 }
 
 .smartbanner-android .smartbanner-button-text:active,
 .smartbanner-android .smartbanner-button-text:hover {
-	background: #2AC7E1;
+	background: #2ac7e1;
 }
 
 /** Windows **/
@@ -252,9 +253,9 @@
 }
 
 .smartbanner-windows .smartbanner-icon {
-	background: rgba(0,0,0,0.6);
+	background: rgba(0, 0, 0, 0.6);
 	background-size: cover;
-	box-shadow: 0 1px 3px rgba(0,0,0,0.3);
+	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
 }
 
 .smartbanner-windows .smartbanner-info {
@@ -263,7 +264,7 @@
 }
 
 .smartbanner-windows .smartbanner-title {
-	color:#4d4d4d;
+	color: #4d4d4d;
 	font-weight: bold;
 }