docs(app): refactor the Docs App based on the MD prototype

docs/app/src/app.js

@@ -1,6 +1,11 @@
+'use strict';
+
 angular.module('docsApp', [
   'ngMaterial',
+  'HeaderController',
+  'FooterController',
   'DocsController',
+  'ViewUtils',
   'versionsData',
   'pagesData',
   'navData',
@@ -9,7 +14,8 @@ angular.module('docsApp', [
   'examples',
   'search',
   'tutorials',
-  'versions'
+  'versions',
+  'responsiveMenu'
 ])
 
 .config(['$locationProvider', function($locationProvider) {

docs/app/src/directives.js

@@ -1,22 +1,34 @@
 angular.module('directives', [])
 
 /**
- * backToTop Directive
- * @param  {Function} $anchorScroll
+ * scrollTo Directive
  *
- * @description Ensure that the browser scrolls when the anchor is clicked
+ * @description
+ * Upon click, scroll to the target element (identified by the selector provided via the `scroll-to`
+ * attribute).
  */
-.directive('backToTop', ['$anchorScroll', '$location', function($anchorScroll, $location) {
-  return function link(scope, element) {
-    element.on('click', function(event) {
-      $location.hash('');
-      scope.$apply($anchorScroll);
-    });
+.directive('scrollTo', ['$document', '$location', function($document, $location) {
+  var doc = $document[0];
+
+  return {
+    restrict: 'A',
+    link: function scrollToPostLink(scope, elem, attrs) {
+      elem.on('click', onClick);
+
+      function onClick() {
+        var targetSelector = attrs.scrollTo;
+        var targetElem = doc.querySelector(targetSelector);
+
+        if (targetElem) {
+          targetElem.scrollIntoView();
+        }
+      }
+    }
   };
 }])
 
 
-.directive('code', function() {
+.directive('code', ['$window', function($window) {
   return {
     restrict: 'E',
     terminal: true,
@@ -25,13 +37,17 @@ angular.module('directives', [])
       var match = /lang-(\S+)/.exec(element[0].className);
       var lang = match && match[1];
       var html = element.html();
-      element.html(window.prettyPrintOne(html, lang, linenums));
+      element.html($window.prettyPrintOne(html, lang, linenums));
     }
   };
-})
+}])
+
 
+// TODO: Probably not needed any more
 .directive('scrollYOffsetElement', ['$anchorScroll', function($anchorScroll) {
-  return function(scope, element) {
-    $anchorScroll.yOffset = element;
+  return {
+    link: function(scope, element) {
+      $anchorScroll.yOffset = element;
+    }
   };
 }]);

docs/app/src/docs.js

@@ -1,15 +1,21 @@
-angular.module('DocsController', [])
+angular.module('DocsController', ['ViewUtils'])
 
 .controller('DocsController', [
-          '$scope', '$rootScope', '$location', '$window', 'openPlunkr',
+          '$scope', '$rootScope', '$location', '$window', 'openPlunkr', 'ViewUtils',
               'NG_PAGES', 'NG_NAVIGATION', 'NG_VERSION',
-  function($scope, $rootScope, $location, $window, openPlunkr,
+  function($scope, $rootScope, $location, $window, openPlunkr, ViewUtils,
               NG_PAGES, NG_NAVIGATION, NG_VERSION) {
 
+  $scope.vu = ViewUtils;
+
   $scope.openPlunkr = openPlunkr;
 
   $scope.docsVersion = NG_VERSION.isSnapshot ? 'snapshot' : NG_VERSION.version;
 
+  $scope.isCurrentPath = function(path) {
+    return this.currentPage && path && (this.currentPage.path === path);
+  };
+
   $scope.navClass = function(navItem) {
     return {
       active: navItem.href && this.currentPage && this.currentPage.path,
@@ -25,13 +31,13 @@ angular.module('DocsController', [])
     $window._gaq.push(['_trackPageview', pagePath]);
   });
 
-  $scope.$watch(function docsPathWatch() {return $location.path(); }, function docsPathWatchAction(path) {
+  $scope.$watch(function docsPathWatch() { return $location.path(); }, function docsPathWatchAction(path) {
 
     path = path.replace(/^\/?(.+?)(\/index)?\/?$/, '$1');
 
-    currentPage = $scope.currentPage = NG_PAGES[path];
+    var currentPage = $scope.currentPage = NG_PAGES[path];
 
-    if ( currentPage ) {
+    if (currentPage) {
       $scope.partialPath = 'partials/' + path + '.html';
       $scope.currentArea = NG_NAVIGATION[currentPage.area];
       var pathParts = currentPage.path.split('/');
@@ -53,8 +59,6 @@ angular.module('DocsController', [])
    Initialize
    ***********************************/
 
-  $scope.versionNumber = angular.version.full;
-  $scope.version = angular.version.full + "  " + angular.version.codeName;
   $scope.loading = 0;
 
 

docs/app/src/errors.js

@@ -1,23 +1,23 @@
 angular.module('errors', ['ngSanitize'])
 
-.filter('errorLink', ['$sanitize', function ($sanitize) {
+.filter('errorLink', ['$sanitize', function($sanitize) {
   var LINKY_URL_REGEXP = /((ftp|https?):\/\/|(mailto:)?[A-Za-z0-9._%+-]+@)\S*[^\s\.\;\,\(\)\{\}<>]/g,
       MAILTO_REGEXP = /^mailto:/,
       STACK_TRACE_REGEXP = /:\d+:\d+$/;
 
-  var truncate = function (text, nchars) {
+  var truncate = function(text, nchars) {
     if (text.length > nchars) {
       return text.substr(0, nchars - 3) + '...';
     }
     return text;
   };
 
-  return function (text, target) {
+  return function(text, target) {
     var targetHtml = target ? ' target="' + target + '"' : '';
 
     if (!text) return text;
 
-    return $sanitize(text.replace(LINKY_URL_REGEXP, function (url) {
+    return $sanitize(text.replace(LINKY_URL_REGEXP, function(url) {
       if (STACK_TRACE_REGEXP.test(url)) {
         return url;
       }
@@ -48,10 +48,10 @@ angular.module('errors', ['ngSanitize'])
   };
 
   return {
-    link: function (scope, element, attrs) {
+    link: function(scope, element, attrs) {
       var search = $location.search(),
-        formatArgs = [attrs.errorDisplay],
-        i;
+          formatArgs = [attrs.errorDisplay],
+          i;
 
       for (i = 0; angular.isDefined(search['p'+i]); i++) {
         formatArgs.push(search['p'+i]);

docs/app/src/examples.js

@@ -2,7 +2,7 @@ angular.module('examples', [])
 
 .factory('formPostData', ['$document', function($document) {
   return function(url, fields) {
-    /**
+    /*
      * Form previously posted to target="_blank", but pop-up blockers were causing this to not work.
      * If a user chose to bypass pop-up blocker one time and click the link, they would arrive at
      * a new default plnkr, not a plnkr with the desired template.
@@ -48,7 +48,7 @@ angular.module('examples', [])
               // The manifests provide the production index file but Plunkr wants
               // a straight index.html
               if (filename === "index-production.html") {
-                filename = "index.html"
+                filename = "index.html";
               }
 
               return {

docs/app/src/footer-conroller.js

@@ -0,0 +1,9 @@
+angular.
+    module('FooterController', []).
+    controller('FooterController', FooterController);
+
+function FooterController() {
+  var v = angular.version;
+  this.versionNumber = v.full;
+  this.version = v.full + '  ' + v.codeName;
+}

docs/app/src/header-conroller.js

@@ -0,0 +1,35 @@
+angular.
+    module('HeaderController', []).
+    controller('HeaderController', HeaderController);
+
+HeaderController.$inject = [];
+function HeaderController() {
+  this.learnItems = [
+    {label: 'Why AngularJS?', url: '//angularjs.org/'},
+    {label: 'Watch', url: '//www.youtube.com/user/angularjs'},
+    {label: 'Tutorial', url: 'tutorial'},
+    {label: 'Case Studies', url: '//builtwith.angularjs.org/'},
+    {label: 'Seed App project template', url: '//github.com/angular/angular-seed'},
+    {label: 'FAQ', url: 'misc/faq'}
+  ];
+
+  this.developItems = [
+    {label: 'Why AngularJS?', url: '//angularjs.org/'},
+    {label: 'Tutorial', url: 'tutorial'},
+    {label: 'Developer Guide', url: 'guide'},
+    {label: 'API Reference', url: 'api'},
+    {label: 'Error Reference', url: 'error'},
+    {label: 'Contribute', url: 'misc/contribute'},
+    {label: 'Download', url: '//code.angularjs.org/'}
+  ];
+
+  this.discussItems = [
+    {label: 'Blog', url: '//blog.angularjs.org'},
+    {label: 'Mailing List', url: '//groups.google.com/group/angular'},
+    {label: 'Chat Room', url: '//webchat.freenode.net/?channels=angularjs&uio=d4'},
+    {label: 'Twitter', url: '//twitter.com/#!/angularjs'},
+    {label: 'Google+', url: '//plus.google.com/110323587230527980117'},
+    {label: 'GitHub', url: '//github.com/angular/angular.js'},
+    {label: 'Issue Tracker', url: '//github.com/angular/angular.js/issues'},
+  ];
+}

docs/app/src/responsive-menu.js

@@ -0,0 +1,55 @@
+angular.
+    module('responsiveMenu', ['ngMaterial', 'ViewUtils']).
+    directive('responsiveMenu', responsiveMenuDirective);
+
+responsiveMenuDirective.$inject = ['$mdBottomSheet', 'ViewUtils'];
+function responsiveMenuDirective($mdBottomSheet, ViewUtils) {
+  // TODO: Create showFns for various sizes (not necessarily all)
+  var showFns = {
+    // 'gt-lg': '',
+    // 'lg': '',
+    // 'md': '',
+    'sm': function showSmFn(items) {
+      $mdBottomSheet.show({
+        template: _getResponsiveMenuSmTemplate(),
+        controller: ['$mdBottomSheet', '$scope',
+          function ResponsiveMenuSmController($mdBottomSheet, $scope) {
+            $scope.items = items;
+            $scope.onItemClick = $mdBottomSheet.hide.bind($mdBottomSheet);
+          }
+        ]
+      });
+    }
+  };
+
+  var defaultShowFn = showFns.sm;
+
+  return {
+    restrict: 'A',
+    scope: {
+      items: '=rmItems'
+    },
+    controller: ['$element', '$scope', function ResponsiveMenuController($element, $scope) {
+      $element.on('click', onClick.bind(this));
+
+      function onClick(evt) {
+        var showFn = ViewUtils.getValueForSize(showFns, defaultShowFn);
+        showFn($scope.items);
+      }
+    }]
+  };
+}
+
+function _getResponsiveMenuSmTemplate() {
+  return [
+    '<md-bottom-sheet>',
+    '  <md-list>',
+    '    <md-item ng-repeat="item in items">',
+    '      <md-button aria-label="{{item.label}}" ng-click="onItemClick(item)">',
+    '        <a ng-href="{{item.url}}">{{item.label}}</a>',
+    '      </md-button>',
+    '    </md-item>',
+    '  </md-list>',
+    '</md-bottom-sheet>',
+    ''].join('\n');
+}