[Property View] Fix bug: Grid uses two types of form widget for interger

src/js/views/property.js

@@ -97,7 +97,7 @@
                 design = ADM.getDesignRoot(),
                 title = this.element.parent().find('.property_title'),
                 content = this.element.find('.property_content'),
-                continueToDelete, buttonsContainer, container;
+                continueToDelete, buttonsContainer, container, range, min, max;
 
             // Clear the properties pane when nothing is selected
             if (node === null || node === undefined) {
@@ -164,6 +164,31 @@
                             value.find("#" + valueId).attr("checked", "checked");
                         }
                         break;
+                    case "integer":
+                        range = BWidget.getPropertyRange(type, p);
+                        if (range) {
+                            min = range.split('-')[0];
+                            max = range.split('-')[1];
+                            $('<input type="number"/>')
+                                .addClass('title labelInput')
+                                .attr({
+                                    id: valueId,
+                                    min: min,
+                                    max: max
+                                })
+                                .change(function(event) {
+                                    if( parseInt(this.value) > parseInt(this.max) ||
+                                        parseInt(this.value) < parseInt(this.min)) {
+                                            $(this).effect("highlight", {color: "red"}, 1000);
+                                            event.stopImmediatePropagation();
+                                            this.value = valueVal;
+                                    }
+                                })
+                                .appendTo(value);
+                            //set default value
+                            value.find('#' + valueId).val(valueVal);
+                        }
+                        break;
                     case "url-uploadable":
                         $('<input type ="text" value="">')
                             .attr('id', valueId)

src/js/widgets.js

@@ -1746,18 +1746,12 @@ var BWidgetRegistry = {
             rows: {
                 type: "integer",
                 defaultValue: 1,
+                range: "1-100",
                 setPropertyHook: function (node, value, transactionData) {
                     var rows, columns, i, block, map, children, blocks, count,
                         blockIndex, root;
                     rows = node.getProperty("rows");
                     columns = node.getProperty("columns");
-
-                    // FIXME: really this should be enforced in the property
-                    //        pane, or elsewhere; this won't really work
-                    if (value < 1) {
-                        value = 1;
-                    }
-
                     root = node.getDesign();
                     root.suppressEvents(true);
 
@@ -1811,8 +1805,8 @@ var BWidgetRegistry = {
             },
             columns: {
                 type: "integer",
-                options: [ 2, 3, 4, 5 ],
                 defaultValue: 2,
+                range: "2-5",
                 setPropertyHook: function (node, value, transactionData) {
                     var rows, columns, i, block, map, children, blocks, count,
                         index, blockIndex, root;
@@ -2530,6 +2524,21 @@ var BWidget = {
         return schema;
     },
 
+    /**
+     * Gets the range for a given property.
+     *
+     * @param {String} widgetType The type of the widget.
+     * @param {String} property The name of the requested property.
+     * @return {String} The range for the given property
+     */
+    getPropertyRange: function (widgetType, property) {
+        var schema = BWidget.getPropertySchema(widgetType, property);
+        if (schema) {
+            return schema.range;
+        }
+        return schema;
+    },
+
     /**
      * Applies any value mapping on the given value that would occur during
      * serialization if this value were found in the given widget type and