Refactor ID generation procedure into a separate service.

jasamina13 · Oct 21, 2016 · 30f519c · 30f519c
1 parent e6b7139
commit 30f519c
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 53 deletions.
diff --git a/core/templates/dev/head/app.js b/core/templates/dev/head/app.js
@@ -334,6 +334,15 @@ oppia.factory('validatorsService', [
   };
 }]);
 
+// Service for generating random IDs.
+oppia.factory('IdGenerationService', [function() {
+  return {
+    generateNewId: function() {
+      return Math.random().toString(36).slice(2);
+    }
+  };
+}]);
+
 oppia.constant('LABEL_FOR_CLEARING_FOCUS', 'labelForClearingFocus');
 
 // Service for setting focus. This broadcasts a 'focusOn' event which sets
@@ -342,7 +351,10 @@ oppia.constant('LABEL_FOR_CLEARING_FOCUS', 'labelForClearingFocus');
 // page.
 oppia.factory('focusService', [
   '$rootScope', '$timeout', 'deviceInfoService', 'LABEL_FOR_CLEARING_FOCUS',
-  function($rootScope, $timeout, deviceInfoService, LABEL_FOR_CLEARING_FOCUS) {
+  'IdGenerationService',
+  function(
+      $rootScope, $timeout, deviceInfoService, LABEL_FOR_CLEARING_FOCUS,
+      IdGenerationService) {
     var _nextLabelToFocusOn = null;
     return {
       clearFocus: function() {
@@ -366,7 +378,7 @@ oppia.factory('focusService', [
       },
       // Generates a random string (to be used as a focus label).
       generateFocusLabel: function() {
-        return Math.random().toString(36).slice(2);
+        return IdGenerationService.generateNewId();
       }
     };
   }

diff --git a/core/templates/dev/head/components/forms/FormBuilder.js b/core/templates/dev/head/components/forms/FormBuilder.js
@@ -1539,10 +1539,10 @@ oppia.directive('schemaBasedHtmlEditor', [function() {
 
 oppia.directive('schemaBasedListEditor', [
   'schemaDefaultValueService', 'recursionHelper', 'focusService',
-  'schemaUndefinedLastElementService',
+  'schemaUndefinedLastElementService', 'IdGenerationService',
   function(
     schemaDefaultValueService, recursionHelper, focusService,
-    schemaUndefinedLastElementService) {
+    schemaUndefinedLastElementService, IdGenerationService) {
     return {
       scope: {
         localValue: '=',
@@ -1564,7 +1564,7 @@ oppia.directive('schemaBasedListEditor', [
       controller: ['$scope', function($scope) {
         var baseFocusLabel = (
           $scope.labelForFocusTarget() ||
-          Math.random().toString(36).slice(2) + '-');
+          IdGenerationService.generateNewId() + '-');
         $scope.getFocusLabel = function(index) {
           // Treat the first item in the list as a special case -- if this list
           // is contained in another list, and the outer list is opened with a
@@ -1731,18 +1731,21 @@ oppia.directive('schemaBasedDictEditor', [
       templateUrl: 'schemaBasedEditor/dict',
       restrict: 'E',
       compile: recursionHelper.compile,
-      controller: ['$scope', function($scope) {
-        $scope.getHumanReadablePropertyDescription = function(property) {
-          return property.description || '[' + property.name + ']';
-        };
+      controller: [
+        '$scope', 'IdGenerationService',
+        function($scope, IdGenerationService) {
+          $scope.getHumanReadablePropertyDescription = function(property) {
+            return property.description || '[' + property.name + ']';
+          };
 
-        $scope.fieldIds = {};
-        for (var i = 0; i < $scope.propertySchemas().length; i++) {
-          // Generate random IDs for each field.
-          $scope.fieldIds[$scope.propertySchemas()[i].name] = (
-            Math.random().toString(36).slice(2));
+          $scope.fieldIds = {};
+          for (var i = 0; i < $scope.propertySchemas().length; i++) {
+            // Generate random IDs for each field.
+            $scope.fieldIds[$scope.propertySchemas()[i].name] = (
+              IdGenerationService.generateNewId());
+          }
         }
-      }]
+      ]
     };
   }
 ]);

diff --git a/core/templates/dev/head/components/forms/ImageUploaderDirective.js b/core/templates/dev/head/components/forms/ImageUploaderDirective.js
@@ -16,45 +16,47 @@
  * @fileoverview Directive for uploading images.
  */
 
-oppia.directive('imageUploader', [function() {
-  return {
-    restrict: 'E',
-    scope: {
-      height: '@',
-      onFileChanged: '=',
-      width: '@'
-    },
-    templateUrl: 'components/imageUploader',
-    link: function(scope, elt) {
-      var onDragEnd = function(e) {
-        e.preventDefault();
-        $(elt).removeClass('image-uploader-is-active');
-      };
+oppia.directive('imageUploader', [
+  'IdGenerationService', function(IdGenerationService) {
+    return {
+      restrict: 'E',
+      scope: {
+        height: '@',
+        onFileChanged: '=',
+        width: '@'
+      },
+      templateUrl: 'components/imageUploader',
+      link: function(scope, elt) {
+        var onDragEnd = function(e) {
+          e.preventDefault();
+          $(elt).removeClass('image-uploader-is-active');
+        };
 
-      $(elt).bind('drop', function(e) {
-        onDragEnd(e);
-        scope.onFileChanged(
-          e.originalEvent.dataTransfer.files[0],
-          e.originalEvent.dataTransfer.files[0].name);
-      });
+        $(elt).bind('drop', function(e) {
+          onDragEnd(e);
+          scope.onFileChanged(
+            e.originalEvent.dataTransfer.files[0],
+            e.originalEvent.dataTransfer.files[0].name);
+        });
 
-      $(elt).bind('dragover', function(e) {
-        e.preventDefault();
-        $(elt).addClass('image-uploader-is-active');
-      });
+        $(elt).bind('dragover', function(e) {
+          e.preventDefault();
+          $(elt).addClass('image-uploader-is-active');
+        });
 
-      $(elt).bind('dragleave', onDragEnd);
+        $(elt).bind('dragleave', onDragEnd);
 
-      // We generate a random class name to distinguish this input from
-      // others in the DOM.
-      scope.fileInputClassName = (
-        'image-uploader-file-input' + Math.random().toString(36).substring(5));
-      angular.element(document).on(
-          'change', '.' + scope.fileInputClassName, function(evt) {
-        scope.onFileChanged(
-          evt.currentTarget.files[0],
-          evt.target.value.split(/(\\|\/)/g).pop());
-      });
-    }
-  };
-}]);
+        // We generate a random class name to distinguish this input from
+        // others in the DOM.
+        scope.fileInputClassName = (
+          'image-uploader-file-input' + IdGenerationService.generateNewId());
+        angular.element(document).on(
+            'change', '.' + scope.fileInputClassName, function(evt) {
+          scope.onFileChanged(
+            evt.currentTarget.files[0],
+            evt.target.value.split(/(\\|\/)/g).pop());
+        });
+      }
+    };
+  }
+]);