Refactored Element.js, i.e. deleted it, since it has been degenerated to a...

Refactored Element.js, i.e. deleted it, since it has been degenerated to a proxy object, with no added value.

javascript/src/Element/Checkbox.js

@@ -2,7 +2,7 @@
  * @author Rafael Ostertag <rafael.ostertag@math.uzh.ch>
  */
 
-/* @depend Element.js */
+/* @depend FormGroup.js */
 
 if (!QfqNS) {
     var QfqNS = {};
@@ -22,22 +22,22 @@ if (!QfqNS.Element) {
      * @constructor
      */
     function Checkbox($element) {
-        n.Element.call(this, $element);
+        n.FormGroup.call(this, $element);
 
         if (!this.isType("checkbox")) {
             throw new Error("$element is not of type 'checkbox'");
         }
     }
 
-    Checkbox.prototype = Object.create(n.Element.prototype);
+    Checkbox.prototype = Object.create(n.FormGroup.prototype);
     Checkbox.prototype.constructor = Checkbox;
 
     Checkbox.prototype.setValue = function (val) {
-        this.formGroup.$element.prop('checked', val);
+        this.$element.prop('checked', val);
     };
 
     Checkbox.prototype.getValue = function () {
-        return this.formGroup.$element.prop('checked');
+        return this.$element.prop('checked');
     };
 
     n.Checkbox = Checkbox;

javascript/src/Element/Element.js

-/**
- * @author Rafael Ostertag <rafael.ostertag@math.uzh.ch>
- */
-
-/* global $ */
-
-if (!QfqNS) {
-    var QfqNS = {};
-}
-
-if (!QfqNS.Element) {
-    QfqNS.Element = {};
-}
-
-(function (n) {
-    'use strict';
-
-    /**
-     * The Form element.
-     *
-     * It is not intended to be used directly. Use the specialized Objects such as Text and Radio.
-     *
-     * Its sole purpose is, to provide the means to check the type of $element
-     *
-     * @param $element {jQuery} jQuery object representing the Form Control.
-     *
-     * @constructor
-     */
-    n.Element = function ($element) {
-        if (!$element || $element.length === 0) {
-            throw new Error("No element");
-        }
-
-        this.formGroup = new n.FormGroup($element);
-    };
-
-    /**
-     *
-     * @param type
-     * @returns {boolean}
-     *
-     * @protected
-     */
-    n.Element.prototype.isType = function (type) {
-        var lowerCaseType = type.toLowerCase();
-        var isOfType = true;
-        this.formGroup.$element.each(function () {
-            if (this.hasAttribute('type')) {
-                if (this.getAttribute('type') === lowerCaseType) {
-                    return true;
-                } else {
-                    isOfType = false;
-                    return false;
-                }
-            } else {
-                // <select> is not an attribute value, obviously, so check for nodename
-                if (this.nodeName.toLowerCase() === lowerCaseType) {
-                    return true;
-                } else if (lowerCaseType === 'text') {
-                    return true;
-                } else {
-                    isOfType = false;
-                    return false;
-                }
-            }
-        });
-
-        return isOfType;
-    };
-
-    n.Element.prototype.setReadOnly = function (readOnly) {
-        this.formGroup.setReadOnly(readOnly);
-    };
-
-    n.Element.prototype.setEnabled = function (enabled) {
-        this.formGroup.setEnabled(enabled);
-    };
-})(QfqNS.Element);
\ No newline at end of file

javascript/src/Element/FormGroup.js

@@ -16,7 +16,7 @@ if (!QfqNS.Element) {
     /**
      * Form Group represents a `<input>/<select>` element including the label and help block.
      *
-     * It is not meant to be used directly. Use Element instead.
+     * It is not meant to be used directly. Use the specialized objects instead.
      *
      * @param $enclosedElement {jQuery} a jQuery object contained in the Form Group. It used to find the enclosing
      * HTML element having the `.form-group` class assigned.
@@ -35,6 +35,33 @@ if (!QfqNS.Element) {
         this.$helpBlock = this.$formGroup.find(".help-block");
     };
 
+    n.FormGroup.prototype.isType = function (type) {
+        var lowerCaseType = type.toLowerCase();
+        var isOfType = true;
+        this.$element.each(function () {
+            if (this.hasAttribute('type')) {
+                if (this.getAttribute('type') === lowerCaseType) {
+                    return true;
+                } else {
+                    isOfType = false;
+                    return false;
+                }
+            } else {
+                // <select> is not an attribute value, obviously, so check for nodename
+                if (this.nodeName.toLowerCase() === lowerCaseType) {
+                    return true;
+                } else if (lowerCaseType === 'text') {
+                    return true;
+                } else {
+                    isOfType = false;
+                    return false;
+                }
+            }
+        });
+
+        return isOfType;
+    };
+
     /**
      *
      * @param $enclosedElement

javascript/src/Element/Radio.js

@@ -20,23 +20,23 @@ if (!QfqNS.Element) {
      * @constructor
      */
     function Radio($element) {
-        n.Element.call(this, $element);
+        n.FormGroup.call(this, $element);
 
         if (!this.isType("radio")) {
             throw new Error("$element is not of type 'radio'");
         }
     }
 
-    Radio.prototype = Object.create(n.Element.prototype);
+    Radio.prototype = Object.create(n.FormGroup.prototype);
     Radio.prototype.constructor = Radio;
 
     Radio.prototype.setValue = function (val) {
-        this.formGroup.$element.prop('checked', false);
-        this.formGroup.$element.filter('[value=' + val + "]").prop('checked', true);
+        this.$element.prop('checked', false);
+        this.$element.filter('[value=' + val + "]").prop('checked', true);
     };
 
     Radio.prototype.getValue = function () {
-        return this.formGroup.$element.filter(':checked').val();
+        return this.$element.filter(':checked').val();
     };
 
     n.Radio = Radio;

javascript/src/Element/Select.js

@@ -22,14 +22,14 @@ if (!QfqNS.Element) {
      * @constructor
      */
     function Select($element) {
-        n.Element.call(this, $element);
+        n.FormGroup.call(this, $element);
 
         if (!this.isType("select")) {
             throw new Error("$element is not of type 'select'");
         }
     }
 
-    Select.prototype = Object.create(n.Element.prototype);
+    Select.prototype = Object.create(n.FormGroup.prototype);
     Select.prototype.constructor = Select;
 
     /**
@@ -42,7 +42,7 @@ if (!QfqNS.Element) {
         if (['string', 'number'].indexOf(typeof(val)) !== -1) {
             this.setSelection(val);
         } else if (Array.isArray(val)) {
-            this.formGroup.$element.empty();
+            this.$element.empty();
 
             // Fill array with new <select> elements first and add it to the dom in one step, instead of appending
             // each '<select>' separately.
@@ -54,7 +54,7 @@ if (!QfqNS.Element) {
                     .append(selectObj.text);
                 selectArray.push($option);
             });
-            this.formGroup.$element.append(selectArray);
+            this.$element.append(selectArray);
         } else {
             throw Error('Unsupported type of argument in Select.setValue: "' + typeof(val) + '". Expected either' +
                 ' "string" or "array"');
@@ -72,11 +72,11 @@ if (!QfqNS.Element) {
 
         // First, see if we find an <option> tag having an attribute 'value' matching val. If that doesn't work,
         // fall back to comparing text content of <option> tags.
-        var $selectionByValue = this.formGroup.$element.find('option[value=' + val + ']');
+        var $selectionByValue = this.$element.find('option[value=' + val + ']');
         if ($selectionByValue.length > 0) {
             $selectionByValue.prop('selected', true);
         } else {
-            this.formGroup.$element.find('option').each(function () {
+            this.$element.find('option').each(function () {
                 var $element = $(this);
                 if ($element.text() === val) {
                     $element.prop('selected', true);
@@ -91,14 +91,14 @@ if (!QfqNS.Element) {
      * @private
      */
     Select.prototype.clearSelection = function () {
-        this.formGroup.$element.find(':selected').each(function () {
+        this.$element.find(':selected').each(function () {
             $(this).prop('selected', false);
         });
     };
 
     Select.prototype.getValue = function () {
         var returnValue = [];
-        this.formGroup.$element.find(':selected').each(
+        this.$element.find(':selected').each(
             function () {
                 if (this.hasAttribute('value')) {
                     returnValue.push(this.getAttribute('value'));

javascript/src/Element/Text.js

@@ -20,22 +20,22 @@ if (!QfqNS.Element) {
      * @constructor
      */
     function Text($element) {
-        n.Element.call(this, $element);
+        n.FormGroup.call(this, $element);
 
         if (!this.isType("text")) {
             throw new Error("$element is not of type 'text'");
         }
     }
 
-    Text.prototype = Object.create(n.Element.prototype);
+    Text.prototype = Object.create(n.FormGroup.prototype);
     Text.prototype.constructor = Text;
 
     Text.prototype.setValue = function (val) {
-        this.formGroup.$element.val(val);
+        this.$element.val(val);
     };
 
     Text.prototype.getValue = function () {
-        return this.formGroup.$element.val();
+        return this.$element.val();
     };
 
     n.Text = Text;

tests/jasmine/SpecRunner.html

@@ -23,7 +23,6 @@
     <!-- include spec files here... -->
     <script src="spec/HelperFunctionListSpec.js"></script>
     <script src="spec/ElementFormGroupSpec.js"></script>
-    <script src="spec/ElementElementSpec.js"></script>
     <script src="spec/ElementTextSpec.js"></script>
     <script src="spec/ElementRadioSpec.js"></script>
     <script src="spec/ElementSelectSpec.js"></script>

tests/jasmine/spec/ElementElementSpec.js

-/**
- * @author Rafael Ostertag <rafael.ostertag@math.uzh.ch>
- */
-/* global describe */
-/* global it */
-/* global expect */
-/* global QfqNS */
-/* global beforeAll */
-/* global jasmine */
-/* global $ */
-
-describe("Element Element", function () {
-    'use strict';
-
-    it("should identify type properly", function () {
-        var element = new QfqNS.Element.Element($('#firstname'));
-        expect(element.isType("text")).toBe(true);
-
-        element = new QfqNS.Element.Element($("input[name='gender']"));
-        expect(element.isType("radio")).toBe(true);
-
-        expect(element.isType("checkbox")).toBe(false);
-    });
-
-});

tests/jasmine/spec/ElementFormGroupSpec.js

@@ -22,6 +22,16 @@ describe("Element FormGroup", function () {
         personGender = new QfqNS.Element.FormGroup($("input[name='gender']"));
     });
 
+    it("should identify type properly", function () {
+        var element = new QfqNS.Element.FormGroup($('#firstname'));
+        expect(element.isType("text")).toBe(true);
+
+        element = new QfqNS.Element.FormGroup($("input[name='gender']"));
+        expect(element.isType("radio")).toBe(true);
+
+        expect(element.isType("checkbox")).toBe(false);
+    });
+
     it("should throw exception on non-form elements", function () {
         expect(function () {
             new QfqNS.Element.FormGroup($("#person2"));