Finish the port to the new object editor framework, at least for the …

…editors that already exist. Remove the old editors in templates/dev/head/components/.
engaboda · Nov 23, 2013 · 45b533b · 45b533b
1 parent b553cd9
commit 45b533b
Show file tree

Hide file tree

Showing 22 changed files with 146 additions and 290 deletions.
diff --git a/core/controllers/resources.py b/core/controllers/resources.py
@@ -28,18 +28,6 @@
 import feconf
 
 
-class TemplateHandler(base.BaseHandler):
-    """Retrieves a template for a UI component."""
-
-    def get(self, template_type):
-        """Handles GET requests."""
-        try:
-            self.response.write(self.jinja2_env.get_template(
-                'components/%s.html' % template_type).render({}))
-        except:
-            raise self.PageNotFoundException
-
-
 class ObjectEditorHandler(base.BaseHandler):
     """Retrieves a template for an object editor."""
 

diff --git a/core/domain/obj_services.py b/core/domain/obj_services.py
@@ -53,7 +53,7 @@ def get_object_class(cls_name):
 
 
 # TODO(sll): Remove this.
-RECOGNIZED_OBJECTS = ['UnicodeString', 'Real', 'Int', 'Html', 'Filepath']
+RECOGNIZED_OBJECTS = ['UnicodeString', 'Real', 'Int', 'Html', 'Filepath', 'List']
 
 
 class Registry(object):

diff --git a/core/templates/dev/head/components/list.html b/core/templates/dev/head/components/list.html
diff --git a/core/templates/dev/head/components/objectEditor.js b/core/templates/dev/head/components/objectEditor.js
@@ -24,7 +24,7 @@ var OBJECT_EDITOR_TEMPLATES_URL = '/object_editor_handler/';
 
 oppia.directive('objectEditor', function($compile, $http, warningsData) {
   return {
-    scope: {objType: '=', value: '=', initArgs: '='},
+    scope: {objType: '@', value: '=', initArgs: '='},
     link: function(scope, element, attrs) {
       // Converts a camel-cased string to a lower-case hyphen-separated string.
       var directiveName = scope.objType.replace(

diff --git a/core/templates/dev/head/components/simpleEditors.js b/core/templates/dev/head/components/simpleEditors.js
@@ -344,87 +344,3 @@ oppia.directive('richTextEditor', function($q, $sce, $modal, $http, warningsData
     }
   };
 });
-
-
-oppia.directive('list', function(warningsData) {
-  // Directive that implements an editable list.
-  return {
-    restrict: 'E',
-    scope: {items: '=', largeInput: '@', addItemText: '@'},
-    templateUrl: '/templates/list',
-    controller: function($scope, $attrs) {
-      $scope.largeInput = ($scope.largeInput || false);
-
-      $scope.getAddItemText = function() {
-        return ($scope.addItemText || 'Add List Element');
-      };
-
-      // Reset the component each time the item list changes.
-      $scope.$watch('items', function(newValue, oldValue) {
-        // Maintain a local copy of 'items'. This is needed because it is not
-        // possible to modify 'item' directly when using "for item in items";
-        // we need a 'constant key'. So we represent each item as {label: ...}
-        // instead, and manipulate item.label.
-        // TODO(sll): Check that $scope.items is a list.
-        $scope.localItems = [];
-        if ($scope.items) {
-          for (var i = 0; i < $scope.items.length; i++) {
-            $scope.localItems.push({'label': angular.copy($scope.items[i])});
-          }
-        }
-        if ($scope.localItems.length === 0) {
-          $scope.addItem();
-        } else {
-          $scope.activeItem = null;
-        }
-      });
-
-      $scope.openItemEditor = function(index) {
-        $scope.activeItem = index;
-      };
-
-      $scope.closeItemEditor = function() {
-        $scope.activeItem = null;
-      };
-
-      $scope.addItem = function() {
-        $scope.localItems.push({label: ''});
-        $scope.activeItem = $scope.localItems.length - 1;
-        if ($scope.items) {
-          $scope.items.push('');
-        } else {
-          $scope.items = [''];
-        }
-      };
-
-      $scope.replaceItem = function(index, newItem) {
-        if (!newItem) {
-          warningsData.addWarning('Please enter a non-empty item.');
-          return;
-        }
-        $scope.index = '';
-        $scope.replacementItem = '';
-        if (index < $scope.items.length && index >= 0) {
-          $scope.localItems[index] = {label: newItem};
-          $scope.items[index] = newItem;
-        }
-        $scope.closeItemEditor();
-      };
-
-      $scope.deleteItem = function(index) {
-        $scope.activeItem = null;
-        $scope.localItems.splice(index, 1);
-        $scope.items.splice(index, 1);
-      };
-
-      $scope.$on('externalSave', function() {
-        if ($scope.activeItem !== null) {
-          $scope.replaceItem(
-              $scope.activeItem, $scope.localItems[$scope.activeItem].label);
-          // The $scope.$apply() call is needed to propagate the replaced item.
-          $scope.$apply();
-        }
-      });
-    }
-  };
-});
diff --git a/core/templates/dev/head/components/simpleEditorsSpec.js b/core/templates/dev/head/components/simpleEditorsSpec.js
@@ -1,73 +1,3 @@
-describe('List directive', function() {
-  var elm, scope;
-
-  LIST_COMPONENT_HTML_PATH = 'core/templates/dev/head/components/list.html';
-
-  beforeEach(module('oppia', LIST_COMPONENT_HTML_PATH));
-
-  beforeEach(inject(function($templateCache) {
-    template = $templateCache.get(LIST_COMPONENT_HTML_PATH);
-    $templateCache.put('/templates/list', template);
-  }));
-
-  // TODO(sll): Add E2E tests.
-
-  it('should check largeInput works correctly', inject(function($rootScope, $compile) {
-    scope = $rootScope;
-    scope.val = ['first list value'];
-
-    elm = $compile('<list items="val" large-input="true"></list>')($rootScope);
-    scope.$apply();
-
-    var listControllerScope = elm.scope();
-    expect(listControllerScope.largeInput).toEqual('true');
-
-    elm = $compile('<list items="val"></list>')($rootScope);
-    scope.$apply();
-
-    listControllerScope = elm.scope();
-    // TODO(sll): Doesn't this get changed to false in the interior scope?
-    expect(listControllerScope.largeInput).toBeUndefined();
-  }));
-
-  it('should have a new item by default', inject(function($rootScope, $compile) {
-    scope = $rootScope;
-    scope.val = [];
-
-    elm = $compile('<list items="val"></list>')($rootScope);
-    scope.$apply();
-
-    var listControllerScope = elm.scope();
-    expect(listControllerScope.items).toEqual(['']);
-  }));
-
-  it('should add a new item when asked', inject(function($rootScope, $compile) {
-    scope = $rootScope;
-    scope.val = ['abc', 'def'];
-
-    elm = $compile('<list items="val"></list>')($rootScope);
-    scope.$apply();
-
-    var listControllerScope = elm.scope();
-    listControllerScope.addItem();
-    expect(listControllerScope.items).toEqual(['abc', 'def', '']);
-  }));
-
-  it('should replace a list item', inject(function($rootScope, $compile) {
-    scope = $rootScope;
-    scope.val = ['first item'];
-
-    elm = $compile('<list items="val"></list>')($rootScope);
-    scope.$apply();
-
-    var listControllerScope = elm.scope();
-    expect(listControllerScope.items).toEqual(['first item']);
-    listControllerScope.replaceItem(0, 'replacement item');
-    expect(listControllerScope.items).toEqual(['replacement item']);
-  }));
-});
-
-
 describe('RTE directive', function() {
   var elm, scope, $httpBackend;
 

diff --git a/core/templates/dev/head/components/string.html b/core/templates/dev/head/components/string.html
diff --git a/core/templates/dev/head/css/oppia.css b/core/templates/dev/head/css/oppia.css
@@ -543,11 +543,12 @@ textarea {
     background: #E0E0E0;
     border-bottom-left-radius: 8px;
     padding: 5px;
+    width: 80%;
 }
 
 .oppia-dest-bubble {
     background: #EEEEEE;
     border-bottom-right-radius: 8px;
-    padding:5px;
+    padding: 5px;
     width: 20%;
 }
diff --git a/core/templates/dev/head/editor/InteractiveWidgetEditor.js b/core/templates/dev/head/editor/InteractiveWidgetEditor.js
@@ -224,6 +224,15 @@ function InteractiveWidgetEditor($scope, $http, $modal, warningsData, exploratio
         $scope.states = states;
         $scope.stateId = stateId;
 
+        $scope.UNICODE_STRING_LIST_INIT_ARGS = {
+          'objType': 'UnicodeString'
+        };
+
+        $scope.FEEDBACK_LIST_INIT_ARGS = {
+          'objType': 'Html',
+          'addItemText': 'Add feedback message'
+        };
+
         $scope.resetTmpRule = function() {
           $scope.tmpRule = {
             index: null,

diff --git a/core/templates/dev/head/editor/interactive_widget_editor.html b/core/templates/dev/head/editor/interactive_widget_editor.html
@@ -63,7 +63,7 @@
 
             <div ng-repeat="rule in handler" ng-hide="$last">
               <div class="span9" style="padding: 5px;">
-                 <table style="vertical-align: top;">
+                 <table style="vertical-align: top; width: 100%">
                     <tr>
                       <td colspan=2 class="oppia-rule-bubble">
                          <center style="font-weight: bold;">Answer <[rule | parameterizeRuleDescription: widgetCustomizationArgs.choices]></center>
@@ -254,7 +254,7 @@ <h3><[modalTitle]></h3>
             <input type="text" required ng-model="tmpRule.inputs[item.varName]">
           </span>
           <span ng-if="item.type == 'list'">
-            <list items="tmpRule.inputs[item.varName]"></list>
+            <object-editor obj-type="List" init-args="UNICODE_STRING_LIST_INIT_ARGS" value="tmpRule.inputs[item.varName]"></object-editor>
           </span>
           <span ng-if="item.type == 'html'">
             <[item.text]>
@@ -273,7 +273,8 @@ <h3><[modalTitle]></h3>
         </div>
         <div>
           <p>Feedback for the reader (chosen at random from the following):</p>
-          <list large-input="true" items="tmpRule.feedback" add-item-text="Add feedback message"></list>
+          <object-editor obj-type="List" init-args="FEEDBACK_LIST_INIT_ARGS" value="tmpRule.feedback">
+          </object-editor>
         </div>
       </div>
     </div>