Bug 1013444 - Switched angular to html5 mode, moved public_angular into public, added support for /resources and /explore URLs

.gitignore

@@ -10,4 +10,4 @@ locale/
 !locale/en_US/*
 !locale/localeinfo.json
 public/css/*
-public_angular/compiled/
+public/compiled/

.jsbeautifyrc

@@ -7,8 +7,8 @@
   "max_preserve_newlines": 2,
   "jslint_happy": true,
   "brace_style": "collapse",
-  "keep_array_indentation": false,
-  "keep_function_indentation": false,
+  "keep_array_indentation": true,
+  "keep_function_indentation": true,
   "space_before_conditional": true,
   "break_chained_methods": false,
   "eval_code": false,

.jshintrc

@@ -3,7 +3,10 @@
     "module": true,
     "define": true,
     "requirejs": true,
-    "require": true
+    "require": true,
+    "console": true,
+    "$": true,
+    "angular": true
   },
   "bitwise": true,
   "curly": true,

Gruntfile.js

@@ -76,15 +76,16 @@ module.exports = function (grunt) {
     uglify: {
       dependencies: {
         options: {
-          sourceMap: true
+          sourceMap: true,
+          beautify: true,
+          mangle: false
         },
         files: {
-          'public_angular/compiled/dependencies.min.js': [
+          'public/compiled/dependencies.min.js': [
             'bower_components/jquery/jquery.js',
             'bower_components/web-literacy-client/dist/web-literacy-client.with-langs.js',
             'bower_components/makeapi-client/src/make-api.js',
             'bower_components/webmaker-auth-client/dist/webmaker-auth-client.min.js',
-            'bower_components/masonry/dist/masonry.pkgd.js',
 
             'bower_components/angular/angular.js',
             'bower_components/angular-bootstrap/ui-bootstrap.js',
@@ -97,17 +98,19 @@ module.exports = function (grunt) {
       },
       app: {
         options: {
-          sourceMap: true
+          sourceMap: true,
+          beautify: true,
+          mangle: false
         },
         files: {
-          'public_angular/compiled/app.min.js': ['public_angular/js/**/*.js']
+          'public/compiled/app.min.js': ['public/js/angular/**/*.js']
         },
       },
     },
 
     watch: {
       angular: {
-        files: ['public_angular/js/**/*.js'],
+        files: ['public/js/angular/**/*.js'],
         tasks: ['uglify'],
         options: {
           spawn: false
@@ -156,7 +159,7 @@ module.exports = function (grunt) {
   // For building angular js
   grunt.registerTask('build', ['uglify']);
 
-  grunt.registerTask('dev', ['express', 'watch']);
+  grunt.registerTask('dev', ['uglify', 'express', 'watch']);
 
   // Clean & verify code (Run before commit)
   grunt.registerTask('default', ['jsbeautifier:modify', 'jshint', 'imagemin']);

app.js

@@ -247,7 +247,7 @@ i18n.addLocaleObject({
 app.use(express.csrf());
 
 app.locals({
-  makeEndpoint: env.get("MAKE_ENDPOINT"),
+  makeEndpoint: env.get("MAKE_ENDPOINT_READONLY") || env.get("MAKE_ENDPOINT"),
   newrelic: newrelic,
   personaSSO: env.get("AUDIENCE"),
   loginAPI: env.get("LOGIN"),
@@ -258,7 +258,7 @@ app.locals({
   EVENTS_URL: env.get("EVENTS_URL"),
   flags: env.get("FLAGS") || {},
   personaHostname: env.get("PERSONA_HOSTNAME", "https://login.persona.org"),
-  bower_path: "bower_components"
+  bower_path: "../bower_components"
 });
 
 app.use(function (req, res, next) {
@@ -279,14 +279,9 @@ app.use(function (req, res, next) {
   next();
 });
 
-// Angular
-if (env.get('FLAGS_EXPLORE')) {
-  app.use('/explore', express.static(path.join(__dirname, 'public_angular')));
-}
-
 // Nunjucks
 // This just uses nunjucks-dev for now -- middleware to handle compiling templates in progress
-app.use("/views", express.static(path.join(__dirname, "views")));
+app.use("/templates", express.static(path.join(__dirname, "views")));
 
 //adding Content Security Policy (CSP) to webmaker.org
 app.use(middleware.addCSP());
@@ -334,6 +329,12 @@ app.get("/", routes.gallery({
   limit: 10
 }));
 
+// Angular
+if (env.get('FLAGS_EXPLORE')) {
+  app.get('/explore', routes.angular);
+  app.get('/resources/:section/:competency?', routes.angular);
+}
+
 app.get("/gallery", routes.gallery({
   layout: "index",
   prefix: "p"

bower.json

@@ -16,7 +16,7 @@
     "masonry": "3.1.5",
     "moment": "2.2.1",
     "nav-global": "https://github.com/mozilla/nav-global/archive/v0.1.4.tar.gz",
-    "nunjucks": "0.1.10",
+    "nunjucks": "1.0.5",
     "persona-btn": "~0.0.12",
     "requirejs": "2.1.8",
     "text": "2.0.9",

less/explore/competency-mentors.less

@@ -10,8 +10,8 @@
  //        <div ng-repeat="mentor in skillMentors" class="col-xs-4 col-sm-3">
  //          <a class="mentor-container" href="https://{{mentor.username}}.makes.org" target="_blank">
  //            <ex-avatar class="mentor">
- //              <img class="laurel laurel-left" src="/img/explore/laurel-leaves-left.svg">
- //              <img class="laurel laurel-right" src="/img/explore/laurel-leaves-right.svg">
+ //              <img class="laurel laurel-left" src="/img/mentors/laurel-leaves-left.svg">
+ //              <img class="laurel laurel-right" src="/img/mentors/laurel-leaves-right.svg">
  //              <img ng-src="{{mentor.photo}}" alt="{{mentor.name}}" class="img-circle img-mentor-avatar">
  //              <div ng-show="mentor.gif" class="mentor-gif" style="background-image:url({{mentor.gif}})"></div>
  //            </ex-avatar>

less/explore/explore.less

@@ -67,7 +67,7 @@
 */
 
 #front-page-teaching-kits {
-  background: url(/explore/img/front-page/explore-map-bkg-2x.png) center;
+  background: url(/img/explore/explore-map-bkg-2x.png) center;
   background-size: cover;
   .panel {
     margin: 0;
@@ -193,7 +193,7 @@
   .appmaker-container {
     position: relative;
     display: block;
-    background: url(/explore/img/front-page/logo-appmaker-fpo-2x.png) center no-repeat;
+    background: url(/img/explore/logo-appmaker-fpo-2x.png) center no-repeat;
     background-size: auto 100%;
     padding-top: 40px;
   }

less/explore/main.less

@@ -11,7 +11,7 @@
 @import 'variables';
 @import 'makerstrap-overrides';
 @import 'mixins';
-@import 'front-page';
+@import 'explore';
 @import 'kits';
 @import 'dropdown-toc';
 @import 'competency';

package.json

@@ -32,7 +32,7 @@
     "mysql": "2.0.x",
     "newrelic": "1.5.5",
     "noxmox": "0.2.x",
-    "nunjucks": "0.1.10",
+    "nunjucks": "1.0.5",
     "proxy-middleware": "0.5.0",
     "rtltr-for-less": "0.0.6",
     "sequelize": "1.7.0-rc1",

public/js/angular/app.js

@@ -0,0 +1,64 @@
+angular.module('webmakerApp', ['ngRoute', 'ui.bootstrap', 'webmakerApp.services', 'webmakerAngular.login', 'localization'])
+  .config(['$routeProvider', '$locationProvider',
+    function ($routeProvider, $locationProvider) {
+      $routeProvider
+        .when('/:locale?/explore', {
+          templateUrl: 'views/explore.html',
+          controller: 'exploreController'
+        })
+        .when('/:locale?/resources/home', {
+          templateUrl: 'views/resources-home.html',
+          controller: 'resourcesHomeController'
+        })
+        .when('/:locale?/resources/web-literacy/:id', {
+          templateUrl: 'views/competency.html',
+          controller: 'competencyController'
+        })
+        .otherwise({
+          redirectTo: '/'
+        });
+
+      // html5mode
+      $locationProvider.html5Mode(true);
+      $locationProvider.hashPrefix('!');
+    }
+  ])
+  .run(['$rootScope', '$http', '$routeParams', '$location', 'CONFIG', 'weblit',
+    function ($rootScope, $http, $routeParams, $location, CONFIG, weblit) {
+
+      // Configure CSRF token
+      $http.defaults.headers.common['X-CSRF-Token'] = CONFIG.csrf;
+
+      // Scroll
+      $rootScope.$on('$locationChangeSuccess', function (event) {
+        var ngView = document.querySelector('[ng-view]');
+        if (ngView) {
+          ngView.scrollTop = 0;
+        }
+      });
+
+      // Set locale information
+      if (CONFIG.supported_languages.indexOf(CONFIG.lang) > 0) {
+        $rootScope.lang = CONFIG.lang;
+      } else {
+        $rootScope.lang = CONFIG.defaultLang;
+      }
+      $rootScope.direction = CONFIG.direction;
+      $rootScope.arrowDir = CONFIG.direction === 'rtl' ? "left" : "right";
+
+      // Set base url
+      $rootScope.$on('$routeChangeSuccess', function (e, current, pre) {
+        $rootScope.baseUrl = '/';
+        if ($routeParams.locale) {
+          $rootScope.baseUrl += $routeParams.locale + '/';
+        }
+      });
+
+      // Set up content for competency pages
+      $http
+        .get('data/content.json')
+        .success(function (data) {
+          $rootScope.content = data;
+        });
+    }
+  ]);

public/js/angular/controllers.js

@@ -0,0 +1,95 @@
+angular
+  .module('webmakerApp')
+  .controller('navigationController', ['$scope', '$location', '$routeParams', '$rootScope', 'weblit',
+    function ($scope, $location, $routeParams, $rootScope, weblit) {
+
+      // Start with collapsed state for navigation
+      $scope.isCollapsed = true;
+      $scope.mobileTocCollapse = true;
+      $scope.collapseAll = function () {
+        $scope.isCollapsed = true;
+        $scope.mobileTocCollapse = true;
+      };
+
+      $scope.literacies = weblit.all();
+
+      $scope.isActive = function (tag) {
+        if (tag[0] === '/') {
+          return tag === $location.path();
+        }
+        return tag === $routeParams.id;
+      };
+
+      $scope.isUnselected = function () {
+        return window.location.hash === '#/';
+      };
+
+      // Jump to top of viewport when new views load
+      $rootScope.$on('$locationChangeSuccess', function (event) {
+        window.scrollTo(0, 0);
+      });
+
+    }
+  ])
+  .controller('exploreController', ['$scope', 'CONFIG',
+    function ($scope, CONFIG) {
+      $scope.contributeBoxes = [{
+        icon: 'book',
+        title: 'Teaching kits',
+        description: 'Teaching kits desc',
+        target: '/' + CONFIG.lang + '/teach-templates'
+      }, {
+        icon: 'map-marker',
+        title: 'Events',
+        description: 'Events desc',
+        target: 'https://events.webmaker.org/' + CONFIG.lang
+      }, {
+        icon: 'globe',
+        title: 'Translate',
+        description: 'Translate desc',
+        target: 'https://support.mozilla.org/' + CONFIG.lang + '/kb/translate-webmaker'
+      }, {
+        icon: 'picture-o',
+        title: 'Design',
+        description: 'Design desc',
+        target: 'https://wiki.mozilla.org/Webmaker/Design'
+      }, {
+        icon: 'code',
+        title: 'Code',
+        description: 'Code desc',
+        target: 'https://support.mozilla.org/' + CONFIG.lang + '/kb/contribute-webmaker-code'
+      }, {
+        icon: 'rocket',
+        title: 'Partner',
+        description: 'Partner desc',
+        target: 'http://party.webmaker.org/' + CONFIG.lang + '/partners'
+      }];
+    }
+  ])
+  .controller('competencyController', ['$rootScope', '$scope', '$location', '$routeParams', 'weblit', 'makeapi', 'CONFIG',
+    function ($rootScope, $scope, $location, $routeParams, weblit, makeapi, CONFIG) {
+
+      $scope.tag = $routeParams.id;
+
+      $scope.skill = weblit.all().filter(function (item) {
+        return item.tag === $scope.tag;
+      })[0];
+
+      $scope.content = $rootScope.content[$scope.tag];
+
+      $scope.wlcPoints = CONFIG.wlcPoints;
+
+      makeapi
+        .tags($scope.skill.tag)
+        .then(function (data) {
+          $scope.makes = data;
+        });
+
+    }
+  ])
+  .controller('resourcesHomeController', ['$scope',
+    function ($scope) {
+      // This is the controller for resources home
+      $scope.whatever = 'blah';
+    }
+  ]);

public/js/angular/directives.js

@@ -1,5 +1,5 @@
 angular
-  .module('exploreApp')
+  .module('webmakerApp')
   .directive('wmAffix', ['$window', '$timeout',
     function ($window, $timeout) {
       return {
@@ -9,7 +9,7 @@ angular
           var elHeight = attrs.offsetHeight;
           var elTop = attrs.offsetTop;
 
-          $window.addEventListener('scroll', function() {
+          $window.addEventListener('scroll', function () {
             var scrollTop = $(this).scrollTop();
             if (scrollTop >= elTop) {
               $('body').css('padding-top', elHeight);
@@ -28,10 +28,10 @@ angular
     }
   ])
   .directive('scrollTo', ['$anchorScroll', '$location',
-    function($anchorScroll, $location) {
+    function ($anchorScroll, $location) {
       return {
         restrict: 'A',
-        link: function(scope, el, attrs) {
+        link: function (scope, el, attrs) {
           var id = attrs.href.replace('#', '');
           if (!id) {
             return;
@@ -42,24 +42,24 @@ angular
             $anchorScroll();
           });
         }
-      }
+      };
     }
   ])
   .directive('scrollSidebar', ['$window',
-    function($window) {
+    function ($window) {
       return {
         restrict: 'EA',
         priority: 0,
-        link: function(scope, el, attrs) {
+        link: function (scope, el, attrs) {
           var windowEl = $($window);
           var offset = +attrs.offset;
           var elTop = el.offset().top + offset;
 
-          windowEl.scroll(function() {
+          windowEl.scroll(function () {
             var scrollTop = windowEl.scrollTop();
             if (scrollTop >= elTop) {
               el.css({
-                position:'fixed',
+                position: 'fixed',
                 top: offset + 'px'
               });
 
@@ -93,4 +93,5 @@ angular
           }
         }
       };
-    }]);
+    }
+  ]);

public/js/angular/services.js

@@ -0,0 +1,48 @@
+angular
+  .module('webmakerApp.services', [])
+  .constant('CONFIG', window.angularConfig)
+  .filter('decodeURI', function () {
+    return function (input) {
+      return decodeURIComponent(input);
+    };
+  })
+  .factory('weblit', [
+    '$window',
+    function ($window) {
+      var weblit = new $window.WebLiteracyClient();
+      return weblit;
+    }
+  ])
+  .factory('makeapi', ['$q', '$window',
+    function ($q, $window) {
+
+      var makeapi = new $window.Make({
+        apiURL: 'https://makeapi.webmaker.org'
+      });
+
+      return {
+        makeapi: makeapi,
+        tags: function (tags, callback) {
+          var deferred = $q.defer();
+          makeapi
+            .sortByField('likes')
+            .limit(4)
+            .find({
+              tags: [{
+                tags: tags
+              }],
+              orderBy: 'likes'
+            })
+            .then(function (err, makes) {
+              if (err) {
+                deferred.reject(err);
+              } else {
+                deferred.resolve(makes);
+              }
+            });
+          return deferred.promise;
+        }
+      };
+
+    }
+  ]);

public/js/angular/webmaker-login.js

@@ -1,9 +1,7 @@
-'use strict';
-
 angular
   .module('webmakerAngular.login', [])
-  .factory('webmakerLoginService', ['$rootScope', 'CONFIG',
-    function webmakerLoginService($rootScope, CONFIG) {
+  .factory('webmakerLoginService', ['$rootScope', '$window', 'CONFIG',
+    function webmakerLoginService($rootScope, $window, CONFIG) {
 
       // This is needed to apply scope changes for events that happen in
       // async callbacks.
@@ -13,7 +11,7 @@ angular
         }
       }
 
-      var auth = new WebmakerAuthClient({
+      var auth = new $window.WebmakerAuthClient({
         host: '',
         csrfToken: CONFIG.csrf,
         handleNewUserUI: false

public/js/base/gallery.js

@@ -13,7 +13,7 @@ define(['jquery', 'nunjucks', 'base/ui', 'moment', 'makeapi', 'localized', 'maso
       options.gutterSize = options.gutterSize || '.gutter-sizer';
       options.hiddenClass = options.hiddenClass || 'gallery-hide';
       options.makeView = options.makeView || 'make-teach.html';
-      options.makeUrl = options.makeUrl || $('body').data('endpoint') || 'https://makeapi.webmaker.org';
+      options.makeUrl = options.makeUrl || $('meta[name="make-endpoint"]').attr('content') || 'https://makeapi.webmaker.org';
       options.defaultSearch = options.defaultSearch || 'webmaker:recommended';
 
       var banner = document.querySelector(options.banner),
@@ -51,7 +51,7 @@ define(['jquery', 'nunjucks', 'base/ui', 'moment', 'makeapi', 'localized', 'maso
       // Nunjucks
       // Todo - nunjucks middleware
       var makeView = 'make-templates/' + options.makeView;
-      nunjucks.env = new nunjucks.Environment(new nunjucks.HttpLoader('/views', true));
+      nunjucks.env = new nunjucks.Environment(new nunjucks.WebLoader('/templates', true));
 
       // Making a custom filter to use it for the client-side l10n
       // Using this filter will help reduce the number of adding

public/js/main.js

@@ -15,7 +15,7 @@ requirejs.config({
     'selectize': "/bower_components/selectize/dist/js/standalone/selectize.min",
     'uri': '/js/lib/uri',
     'tabzilla': 'https://mozorg.cdn.mozilla.net/tabzilla/tabzilla',
-    'nunjucks': '/bower_components/nunjucks/browser/nunjucks-dev',
+    'nunjucks': '/bower_components/nunjucks/browser/nunjucks',
     'makeapi': '/bower_components/makeapi-client/src/make-api',
     'localized': '/bower_components/webmaker-i18n/localized',
     'languages': '/bower_components/webmaker-language-picker/js/languages',

public/js/pages/editor.js

@@ -21,7 +21,7 @@ define(["jquery", "localized", "nunjucks", "base/ui", "moment", "uri", "makeapi"
 
     moment.lang(localized.langToMomentJSLang(lang));
 
-    nunjucks.env = new nunjucks.Environment(new nunjucks.HttpLoader("/views", true));
+    nunjucks.env = new nunjucks.Environment(new nunjucks.HttpLoader("/templates", true));
 
     // Making a custom filter to use it for the client-side l10n
     // Using this filter will help reduce the number of adding

public/views/explore.html

@@ -14,8 +14,8 @@
         <img src="#"
              alt="The Web Literacy Map helps you build literacy in exploring, building, and sharing the web"
              class="animated slideInDown" retina-image
-             data-src-1x="img/front-page/explore-map.png"
-             data-src-2x="img/front-page/explore-map-2x.png" width="321"
+             data-src-1x="img/explore/explore-map.png"
+             data-src-2x="img/explore/explore-map-2x.png" width="321"
              height="183"/>
       </div>
     </div>
@@ -26,8 +26,8 @@
       <div class="row flex-center">
         <div class="hidden-xs col-sm-5">
           <img src="#" class="teaching-kits-img" retina-image
-               data-src-1x="img/front-page/explore-teaching-kits.png"
-               data-src-2x="img/front-page/explore-teaching-kits-2x.png"
+               data-src-1x="img/explore/explore-teaching-kits.png"
+               data-src-2x="img/explore/explore-teaching-kits-2x.png"
                width="372" height="278"/>
         </div>
         <div class="col-sm-7 col-lg-6">
@@ -102,8 +102,8 @@
       <p>
         <span bind-unsafe-html="'Event subsection copy' | i18n"></span>
       </p>
-      <img src="#" retina-image data-src-1x="img/front-page/explore-events.png"
-           data-src-2x="img/front-page/explore-events-2x.png" width="999"
+      <img src="#" retina-image data-src-1x="img/explore/explore-events.png"
+           data-src-2x="img/explore/explore-events-2x.png" width="999"
            height="305"/>
     </div>
   </section>

public/views/resources-home.html

@@ -0,0 +1,5 @@
+<div class="resources-home-page">
+  <section class="container">
+    <h1>Resources</h1>
+  </section>
+</div>