add bowser, extension step on setup

likeastore · May 26, 2014 · 99f7e58 · 99f7e58
1 parent 3e081af
commit 99f7e58
Show file tree

Hide file tree

Showing 9 changed files with 111 additions and 5 deletions.
diff --git a/bower.json b/bower.json
@@ -23,6 +23,7 @@
     "angular-moment": "~0.6.0",
     "modernizr": "~2.7.1",
     "angular-deckgrid": "~0.4.1",
-    "ngCustomerVoice": "~0.1.1"
+    "ngCustomerVoice": "~0.1.1",
+    "bowser": "~0.7.1"
   }
 }
diff --git a/myth/general.css b/myth/general.css
@@ -1757,6 +1757,34 @@ textarea.fld {
 	margin: 2px 2px 0 0;
 }
 
+.first-time-box .inner-box.slide4 {
+	margin-top: -250px;
+}
+
+.first-time-box .slide4 h1 {
+	font-size: 36px;
+	font-weight: 600;
+}
+
+.first-time-box .slide4 .text {
+	width: 460px;
+	margin-top: 35px;
+}
+
+.first-time-box .extension-screen {
+	width: 500px;
+	border-radius: 2px
+}
+
+.first-time-box .extension-btn {
+	width: 250px;
+	cursor: pointer;
+	border-radius: 5px;
+	position: absolute;
+	top: 180px;
+	right: -18px;
+}
+
 /* Colors */
 .facebook-bg-clr {
 	background-color: var(facebook) !important;

diff --git a/public/css/general.css b/public/css/general.css
@@ -1777,6 +1777,34 @@ textarea.fld {
   margin: 2px 2px 0 0;
 }
 
+.first-time-box .inner-box.slide4 {
+  margin-top: -250px;
+}
+
+.first-time-box .slide4 h1 {
+  font-size: 36px;
+  font-weight: 600;
+}
+
+.first-time-box .slide4 .text {
+  width: 460px;
+  margin-top: 35px;
+}
+
+.first-time-box .extension-screen {
+  width: 500px;
+  border-radius: 2px;
+}
+
+.first-time-box .extension-btn {
+  width: 250px;
+  cursor: pointer;
+  border-radius: 5px;
+  position: absolute;
+  top: 180px;
+  right: -18px;
+}
+
 /* Colors */
 
 .facebook-bg-clr {

diff --git a/public/js/.jshintrc b/public/js/.jshintrc
@@ -5,6 +5,7 @@
 		"afterEach",
 		"before",
 		"beforeEach",
+		"bowser",
 		"chai",
 		"describe",
 		"expect",

diff --git a/public/js/config.js b/public/js/config.js
@@ -10,6 +10,16 @@ define(function () {
 			limit: 30
 		},
 
+		extension: {
+			chrome: {
+				url: 'https://chrome.google.com/webstore/detail/likeastore/einhadilfmpdfmmjnnppomcccmlohjad'
+			},
+
+			firefox: {
+				url: 'https://addons.mozilla.org/en-US/firefox/addon/likeastore-social-bookmarking-/'
+			}
+		},
+
 		colors: [
 			{ name: 'red', hex: '#e74c3c' },
 			{ name: 'orange', hex: '#f39c12' },

diff --git a/public/js/controllers/onboardingController.js b/public/js/controllers/onboardingController.js
@@ -1,6 +1,9 @@
-define(function () {
+define(function (require) {
 	'use strict';
 
+	var bowser = require('bowser');
+	var extension = require('config').extension;
+
 	function onboardingController ($scope, $document, $window, $rootScope, $location, api, $analytics) {
 		var $body = $document.find('body');
 		var delayedWarning;
@@ -15,6 +18,8 @@ define(function () {
 			}
 		});
 
+		$scope.extension = extension[bowser.name.toLowerCase()];
+
 		$scope.slide1 = true;
 		$scope.currentSlide = 1;
 
@@ -56,7 +61,11 @@ define(function () {
 		$scope.followOnTwitter = function () {
 			$analytics.eventTrack('followed on twitter via onboarding');
 		};
+
+		$scope.installPlugin = function () {
+			$analytics.eventTrack('installed extension via onboarding');
+		};
 	}
 
 	return onboardingController;
-});
+});
diff --git a/public/js/main.js b/public/js/main.js
@@ -21,6 +21,7 @@ require.config({
 		'underscore': '../components/underscore/underscore',
 		'moment': '../components/momentjs/moment',
 		'modernizr': '../components/modernizr/modernizr',
+		'bowser': '../components/bowser/bowser',
 		'facebook': '../components/utils/FB',
 		'twttr': '../components/utils/twttr'
 	},

diff --git a/public/js/services/utils.js b/public/js/services/utils.js
@@ -1,8 +1,15 @@
-define(function () {
+define(function (require) {
 	'use strict';
 
+	var bowser = require('bowser');
+
 	return function ($rootScope, $document, $location) {
 		return function () {
+			$rootScope.browser = {
+				name: bowser.name,
+				version: bowser.version
+			};
+
 			$rootScope.switchMenu = function (url) {
 				$location.url(url);
 			};

diff --git a/views/static/onboarding.ejs b/views/static/onboarding.ejs
@@ -44,9 +44,30 @@
 
 			<div class="cornered-buttons">
 				<div class="btn previous-btn" ng-click="goToSlide(2)">Previous</div>
-				<div class="btn ready-btn" ng-click="finish()">I'm ready!</div>
+				<div ng-hide="extension" class="btn ready-btn" ng-click="finish()">I'm ready!</div>
+				<div ng-show="extension" class="btn next-btn" ng-click="goToSlide(4)">Next</div>
 			</div>
 
+			<div ng-hide="extension" class="follow-buttons animated bounceInRight">
+				<a href="https://twitter.com/intent/follow?screen_name=likeastore" class="follow-btn twee" ng-click="followOnTwitter()">
+					<i class="font-icon twitter-icon icon"></i> Follow on Twitter
+				</a>
+				<a href="" class="follow-btn fb" ng-click="likeOnFacebook()">
+					<i class="font-icon facebook-icon icon"></i> Like on Facebook
+				</a>
+			</div>
+		</div>
+
+		<div ng-show="slide4" class="inner-box slide4 animated fadeIn">
+			<a ng-href="{{extension.url}}" target="_blank" ng-click="installPlugin()">
+				<img src="/img/extension-screen.png" class="extension-screen">
+				<img ng-src="/img/{{browser.name}}-extension-btn.png" class="extension-btn">
+			</a>
+			<div class="text">Improve your search experience with our browser extension. Find relevant information much faster inside your favorites.</div>
+
+			<div class="btn previous-btn" ng-click="goToSlide(3)">Previous</div>
+			<div class="btn ready-btn" ng-click="finish()">I'm ready!</div>
+
 			<div class="follow-buttons animated bounceInRight">
 				<a href="https://twitter.com/intent/follow?screen_name=likeastore" class="follow-btn twee" ng-click="followOnTwitter()">
 					<i class="font-icon twitter-icon icon"></i> Follow on Twitter