Feat/home page modal

config/flags.dev.json

@@ -3,5 +3,6 @@
   "apiServer": "http://prx-backend.dev/api/v1",
   "lovesharebuy": false,
   "COUNT_HOST": "http://localhost",
-  "LISTEN_LATER": true
+  "LISTEN_LATER": true,
+  "HOME_PAGE": false
 }

config/flags.release.json

@@ -3,5 +3,6 @@
   "showMenu" : false,
   "lovesharebuy": false,
   "COUNT_HOST": "https://count.prx.org",
-  "LISTEN_LATER": false
+  "LISTEN_LATER": false,
+  "HOME_PAGE": false
 }

src/app/app.js

@@ -17,12 +17,12 @@ angular.module('prx', ['ngAnimate',
   'prx.errors',
   'prx.modal',
   'prx.modelConfig',
+  'ngMobile',
   'prx.title'])
-.config(function ($locationProvider, $urlRouterProvider, ngFlagProvider,
+.config(function ($locationProvider, ngFlagProvider,
   $analyticsProvider, $stateProvider) {
   $analyticsProvider.firstPageview(false);
   $analyticsProvider.virtualPageviews(false);
-  $urlRouterProvider.when('/', '/stories/73865');
   $locationProvider.html5Mode(true);
   ngFlagProvider.flags(FEAT.JSON);
 }).run(function ($rootScope, $location, $analytics, $timeout) {

src/app/home/construction_modal.html.jade

@@ -0,0 +1,15 @@
+h1 The best PRX <i>ever</i>...
+article
+  p ...just not quite yet. We're working on a new PRX made for smaller screens.
+  .apps
+    a.logo(href="http://prx.mx", ios-only, android-only)
+    a.logo(href="https://itunes.apple.com/app/prx-remix/id648386117", ios-only, mobile-only)
+    a.logo(href="https://play.google.com/store/apps/details?id=org.prx.remix&referrer=utm_source%3Dm.prx.org%26utm_medium%3Dwebsite%26utm_term%3D404", android-only, mobile-only)
+    p In the meantime, download our app for more great stories.
+    a.app-store(href="https://itunes.apple.com/app/prx-remix/id648386117", ios-only)
+    a.google-play(href="https://play.google.com/store/apps/details?id=org.prx.remix&referrer=utm_source%3Dm.prx.org%26utm_medium%3Dwebsite%26utm_term%3D404", android-only)
+    a.website(href="http://prx.mx") on the web @ prx.mx
+  p
+    | Or, you can always try the #{''}
+    a(href="http://prx.org") desktop site
+    | .

src/app/home/home.js

@@ -1 +1,17 @@
-angular.module('prx.home', ['ui.router']);
+angular.module('prx.home', ['ui.router'])
+.config(function ($stateProvider, $urlRouterProvider) {
+  if (!FEAT.HOME_PAGE) {
+    $urlRouterProvider.when('/', '/nxt');
+  }
+
+  $stateProvider.state('home', {
+    url: '^/'
+  }).state('home.comingSoon', {
+    url: '^/nxt',
+    views: {
+      'modal@': {
+        templateUrl: 'home/construction_modal.html'
+      }
+    }
+  });
+});

src/common/mobile.js

@@ -0,0 +1,53 @@
+angular.module('ngMobile', [])
+.factory('ngMobileOS', function ($window) {
+  var ANDROID_UA = /android/i,
+    IOS_UA = /iP(?:hone|ad|od)/i;
+  if (ANDROID_UA.test($window.navigator.userAgent)) {
+    return {
+      android: true,
+      iOS: false,
+      isMobile: true
+    };
+  } else if (IOS_UA.test($window.navigator.userAgent)) {
+    return {
+      iOS: true,
+      android: false,
+      isMobile: true
+    };
+  }
+  return {
+    android: false,
+    iOS: false,
+    isMobile: false
+  };
+})
+.directive('iosOnly', function (ngMobileOS) {
+  return {
+    restrict: 'A',
+    link: function (scope, elem) {
+      if (ngMobileOS.isMobile && !ngMobileOS.iOS) {
+        elem.remove();
+      }
+    }
+  };
+})
+.directive('androidOnly', function (ngMobileOS) {
+  return {
+    restrict: 'A',
+    link: function (scope, elem) {
+      if (ngMobileOS.isMobile && !ngMobileOS.android) {
+        elem.remove();
+      }
+    }
+  };
+})
+.directive('mobileOnly', function (ngMobileOS) {
+  return {
+    restrict: 'A',
+    link: function (scope, elem) {
+      if (!ngMobileOS.isMobile) {
+        elem.remove();
+      }
+    }
+  };
+});

src/common/mobile.spec.js

@@ -0,0 +1,109 @@
+describe('ngMobile', function () {
+  beforeEach(module('ngMobile'));
+  describe ('ngMobileOS', function () {
+
+    function setUA(uaString, fun) {
+      return function () {
+        module(function ($provide) {
+          $provide.decorator('$window', function () {
+            return {
+              navigator: {
+                userAgent: uaString
+              }
+            };
+          });
+        });
+        return inject(fun);
+      };
+    }
+
+    it ('detects android', setUA('android', function (ngMobileOS) {
+      expect(ngMobileOS.android).toBe(true);
+    }));
+
+    it ('detects android as not iOS', setUA('Android', function (ngMobileOS) {
+      expect(ngMobileOS.iOS).toBe(false);
+    }));
+
+    it ('detects iPads', setUA('iPad', function (ngMobileOS) {
+      expect(ngMobileOS.iOS).toBe(true);
+    }));
+
+    it ('detects iPhones', setUA('iPhone', function (ngMobileOS) {
+      expect(ngMobileOS.iOS).toBe(true);
+    }));
+
+    it ('detects iPods', setUA('iPod', function (ngMobileOS) {
+      expect(ngMobileOS.iOS).toBe(true);
+    }));
+
+    it ('detects android as mobile', setUA('Android', function (ngMobileOS) {
+      expect(ngMobileOS.isMobile).toBe(true);
+    }));
+
+    it ('detects iOS as mobile', setUA('iPhone', function (ngMobileOS) {
+      expect(ngMobileOS.isMobile).toBe(true);
+    }));
+
+    it ('detects non-mobile browsers', setUA('firefox', function (ngMobileOS) {
+      expect(ngMobileOS.isMobile).toBe(false);
+    }));
+  });
+
+  describe ('directives', function () {
+    var elem, container, $compile, $scope, ngMobileOS;
+
+    beforeEach(inject( function ($rootScope, _$compile_, _ngMobileOS_) {
+      ngMobileOS = _ngMobileOS_;
+      $compile = _$compile_;
+      $scope = $rootScope;
+
+      container = angular.element('<div></div>');
+      elem = container.clone();
+      container.append(elem);
+    }));
+
+    it ('hides ios-only elements with android ua', function () {
+      ngMobileOS.android = true;
+      ngMobileOS.iOS = false;
+      ngMobileOS.isMobile = true;
+      elem.attr('ios-only', true);
+      expect($compile(container)($scope).contents().length).toBe(0);
+    });
+
+    it ('hides android-only elements with ios ua', function () {
+      ngMobileOS.iOS = true;
+      ngMobileOS.android = false;
+      ngMobileOS.isMobile = true;
+      elem.attr('android-only', true);
+      expect($compile(container)($scope).contents().length).toBe(0);
+    });
+
+    it ('does not hide ios-only elements with desktop ua', function () {
+      ngMobileOS.iOS = false;
+      ngMobileOS.isMobile = false;
+      elem.attr('ios-only', true);
+      expect($compile(container)($scope).contents().length).toBe(1);
+    });
+
+    it ('does not hide android-only elements with desktop ua', function () {
+      ngMobileOS.android = false;
+      ngMobileOS.isMobile = false;
+      elem.attr('android-only', true);
+      expect($compile(container)($scope).contents().length).toBe(1);
+    });
+
+    it ('hides mobile-only elements with desktop ua', function () {
+      ngMobileOS.isMobile = false;
+      elem.attr('mobile-only', true);
+      expect($compile(container)($scope).contents().length).toBe(0);
+    });
+
+    it ('does not hide mobile-only elements with mobile ua', function () {
+      ngMobileOS.isMobile = true;
+      elem.attr('mobile-only', true);
+      expect($compile(container)($scope).contents().length).toBe(1);
+    });
+  });
+
+});

src/index.html

@@ -14,7 +14,7 @@
   <header>
     <prx-loading-bar></prx-loading-bar>
     <prx-drawer-button ng-flag="showMenu"></prx-drawer-button>
-    <h1><a>PRX</a></h1>
+    <h1><a ui-sref="home">PRX</a></h1>
     <prx-action-buttons></prx-action-buttons>
   </header>
   <prx-modal></prx-modal>

src/styl/main.styl

@@ -27,11 +27,56 @@ body.with-player {
   a.full-site {
     bottom: 75px;
   }
-  main {
+  main, .modal {
     padding-bottom: 75px;
   }
 }
 
+.apps {
+  background-color: offwhite;
+  text-align: center;
+  border-radius: 3px;
+  box-shadow: 0 0 2px black;
+  margin: 10px 0;
+  padding: 25px;
+
+  a.logo {
+    display: block;
+    content: '';
+    width: 175px;
+    height: 150px;
+    margin: 0 auto;
+    background: url('/assets/images/remix.png') center no-repeat;
+    background-size: 175px;
+  }
+
+  p {
+    color: dark-grey;
+  }
+
+  a.app-store, a.google-play {
+    width: 114px;
+    height: 40px;
+    background-size: 114px;
+    background-repeat: no-repeat;
+    background-position: center center;
+    display: inline-block;
+    margin: 0px 10px;
+  }
+
+  a.app-store {
+    background-image: url('/assets/images/app_store.png');
+  }
+  a.google-play {
+    background-image: url('/assets/images/google_play.png');
+  }
+
+  a.website {
+    display: block;
+  }
+
+}
+
 //
 // .open {
 //

src/styl/modal.styl

@@ -38,6 +38,11 @@
   article {
     overflow-y: auto;
     flex-shrink: 100;
+    padding-right: 4px;
+
+    p {
+      margin-bottom: 10px;
+    }
   }
 
   ul.actions {