Fix oppia#6794: Add landing page for negative numbers and refactor la…

…nding page. (oppia#6846)

* Added landing page for negative numbers and refactored landing page.

* Add css property in sorted order.

* Undo changes in packe-lock.json

* Add hypenstospaces filter and fix typos.

* Change landing_page_data structure to include topic_title.

* Added proper filename.

core/templates/dev/head/pages/landing-pages/topic-landing-page/topic-landing-page.controller.ts

@@ -16,8 +16,11 @@
  * @fileoverview Controller for landing page.
  */
 
+require(
+  'components/common-layout-directives/common-elements/' +
+  'background-banner.directive.ts');
+
 require('domain/utilities/UrlInterpolationService.ts');
-require('filters/string-utility-filters/capitalize.filter.ts');
 require(
   'pages/landing-pages/topic-landing-page/topic-landing-page.controller.ts');
 require('services/PageTitleService.ts');
@@ -28,26 +31,72 @@ require('services/SiteAnalyticsService.ts');
 oppia.constant('TOPIC_LANDING_PAGE_DATA', {
   maths: {
     fractions: {
+      topic_title: 'Fractions',
       collection_id: '4UgTQUc1tala',
       page_data: {
-        image_1: 'matthew_paper.png',
-        image_2: 'matthew_fractions.png',
+        image_1: {
+          file_name: 'matthew_paper.png',
+          alt: 'Matthew showing parts of fractions written on a card.'
+        },
+        image_2: {
+          file_name: 'matthew_fractions.png',
+          alt: 'Matthew solving problems on Oppia.'
+        },
         video: 'fractions_video.mp4',
+        lessons: [
+          'What is a Fraction?',
+          'Comparing Fractions',
+          'The Meaning of "Equal Parts"',
+          'Adding & Subtracting Fractions'
+        ]
+      }
+    },
+    'negative-numbers': {
+      topic_title: 'Negative Numbers',
+      collection_id: 'GdYIgsfRZwG7',
+      page_data: {
+        image_1: {
+          file_name: 'negative_1.png',
+          alt: 'A boy showing 3 + -24 written on a slate.'
+        },
+        image_2: {
+          file_name: 'negative_2.png',
+          alt: 'A boy smiling and solving negative-number problems on Oppia.'
+        },
+        video: 'negative-numbers_video.mp4',
+        lessons: [
+          'The Number Line',
+          'What is a Negative Number?',
+          'Adding & Subtracting Negative Numbers',
+          'Multiplying & Dividing Negative Numbers'
+        ]
       }
     },
     ratios: {
+      topic_title: 'Ratios',
       collection_id: '53gXGLIR044l',
       page_data: {
-        image_1: 'ratios_James.png',
-        image_2: 'ratios_question.png',
+        image_1: {
+          file_name: 'ratios_James.png',
+          alt: 'A boy showing 2 is to 3 ratio on a card.'
+        },
+        image_2: {
+          file_name: 'ratios_question.png',
+          alt: 'A smoothie shop and a card having question "What does a ratio' +
+            'tell us?" with options.'
+        },
         video: 'ratios_video.mp4',
+        lessons: [
+          'What is a Ratio?',
+          'Equivalent Ratios',
+          'Ratios & Proportional Reasoning',
+          'Writing Ratios in Simplest Form'
+        ]
       }
     }
   }
 });
 
-
-
 oppia.controller('TopicLandingPage', [
   '$filter', '$scope', '$timeout', '$window', 'PageTitleService',
   'SiteAnalyticsService', 'UrlInterpolationService', 'TOPIC_LANDING_PAGE_DATA',
@@ -56,36 +105,42 @@ oppia.controller('TopicLandingPage', [
       SiteAnalyticsService, UrlInterpolationService, TOPIC_LANDING_PAGE_DATA) {
     var pathArray = $window.location.pathname.split('/');
     $scope.subject = pathArray[2];
-    $scope.topic = pathArray[3];
-    var landingPageData = (
-      TOPIC_LANDING_PAGE_DATA[$scope.subject][$scope.topic].page_data);
+    var topic = pathArray[3];
+    var topicData = TOPIC_LANDING_PAGE_DATA[$scope.subject][topic];
+    var landingPageData = topicData.page_data;
     var assetsPathFormat = '/landing/<subject>/<topic>/<file_name>';
-
-    var capitalizedTopic = $filter('capitalize')($scope.topic);
-    var pageTitle = 'Learn ' + capitalizedTopic + ' - Oppia';
+    $scope.topicTitle = topicData.topic_title;
+    $scope.lessons = landingPageData.lessons;
+    var pageTitle = 'Learn ' + $scope.topicTitle + ' - Oppia';
     PageTitleService.setPageTitle(pageTitle);
+    $scope.bookImageUrl = UrlInterpolationService.getStaticImageUrl(
+      '/splash/books.svg');
 
-    $scope.getRowImageUrl = function(index) {
+    var getImageData = function(index) {
       var imageKey = 'image_' + index;
       if (landingPageData[imageKey]) {
         var imagePath = UrlInterpolationService.interpolateUrl(
           angular.copy(assetsPathFormat), {
             subject: $scope.subject,
-            topic: $scope.topic,
-            file_name: landingPageData[imageKey]
+            topic: topic,
+            file_name: landingPageData[imageKey].file_name
           });
-        return UrlInterpolationService.getStaticImageUrl(imagePath);
-      } else {
-        throw Error('page_data does not have ' + imageKey + ' key.');
+        return {
+          src: UrlInterpolationService.getStaticImageUrl(imagePath),
+          alt: landingPageData[imageKey].alt
+        };
       }
     };
 
+    $scope.image1 = getImageData(1);
+    $scope.image2 = getImageData(2);
+
     $scope.getVideoUrl = function() {
       if (landingPageData.video) {
         var videoPath = UrlInterpolationService.interpolateUrl(
           angular.copy(assetsPathFormat), {
             subject: $scope.subject,
-            topic: $scope.topic,
+            topic: topic,
             file_name: landingPageData.video
           });
         return UrlInterpolationService.getStaticVideoUrl(videoPath);
@@ -94,14 +149,8 @@ oppia.controller('TopicLandingPage', [
       }
     };
 
-    $scope.getStaticSubjectImageUrl = function(subjectName) {
-      return UrlInterpolationService.getStaticImageUrl(
-        '/subjects/' + subjectName + '.svg');
-    };
-
     $scope.onClickGetStartedButton = function() {
-      var collectionId = (
-        TOPIC_LANDING_PAGE_DATA[$scope.subject][$scope.topic].collection_id);
+      var collectionId = topicData.collection_id;
       SiteAnalyticsService.registerOpenCollectionFromLandingPageEvent(
         collectionId);
       $timeout(function() {