Commit c73e2165 authored by Rafael Ostertag's avatar Rafael Ostertag
Browse files

Implemented JavaScript Radio and Text form element objects.

parent 21c39bb0
/**
* @author Rafael Ostertag <rafael.ostertag@math.uzh.ch>
*/
if (!QfqNS) {
var QfqNS = {};
}
if (!QfqNS.Element) {
QfqNS.Element = {};
}
(function (n) {
'use strict';
n.Element = function ($element) {
if (!$element || $element.length === 0) {
throw new Error("No element");
}
this.formGroup = new n.FormGroup($element);
};
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 {
if (lowerCaseType === 'text') {
return true;
} else {
isOfType = false;
return false;
}
}
});
return isOfType;
};
})(QfqNS.Element);
\ No newline at end of file
/**
* @author Rafael Ostertag <rafael.ostertag@math.uzh.ch>
*/
if (!QfqNS) {
var QfqNS = {};
}
if (!QfqNS.Element) {
QfqNS.Element = {};
}
(function (n) {
'use strict';
n.FormGroup = function ($enclosedElement) {
if (!$enclosedElement || $enclosedElement.length === 0) {
throw new Error("No enclosed element");
}
this.$formGroup = this.$findFormGroup($enclosedElement);
this.$element = this.$formGroup.find('input');
this.$label = this.$formGroup.find('.control-label');
this.$helpBlock = this.$formGroup.find(".help-block");
};
/**
*
* @param $enclosedElement
* @returns {*}
*
* @private
*/
n.FormGroup.prototype.$findFormGroup = function ($enclosedElement) {
var $formGroup = $enclosedElement.closest("div.form-group");
if (!$formGroup || $formGroup.length === 0) {
throw new Error("Unable to find Form Group");
}
if ($formGroup.length > 1) {
throw new Error("enclosed element yields ambiguous form group");
}
return $formGroup;
};
n.FormGroup.prototype.hasLabel = function () {
return this.$label.length > 0;
};
n.FormGroup.prototype.hasHelpBlock = function () {
return this.$helpBlock.length > 0;
};
})(QfqNS.Element);
\ No newline at end of file
/**
* @author Rafael Ostertag <rafael.ostertag@math.uzh.ch>
*/
if (!QfqNS) {
var QfqNS = {};
}
if (!QfqNS.Element) {
QfqNS.Element = {};
}
(function (n) {
'use strict';
/**
*
* @param $element
* @constructor
*/
function Radio($element) {
n.Element.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.constructor = Radio;
Radio.prototype.setValue = function (val) {
this.formGroup.$element.prop('checked', false);
this.formGroup.$element.filter('[value=' + val + "]").prop('checked', true);
};
Radio.prototype.getValue = function () {
return this.formGroup.$element.filter(':checked').val();
};
n.Radio = Radio;
})(QfqNS.Element);
\ No newline at end of file
/**
* @author Rafael Ostertag <rafael.ostertag@math.uzh.ch>
*/
if (!QfqNS) {
var QfqNS = {};
}
if (!QfqNS.Element) {
QfqNS.Element = {};
}
(function (n) {
'use strict';
/**
*
* @param $element
* @constructor
*/
function Input($element) {
n.Element.call(this, $element);
if (!this.isType("text")) {
throw new Error("$element is not of type 'text'");
}
}
Input.prototype = Object.create(n.Element.prototype);
Input.prototype.constructor = Input;
Input.prototype.setValue = function (val) {
this.formGroup.$element.val(val);
};
Input.prototype.getValue = function () {
return this.formGroup.$element.val();
};
n.Input = Input;
})(QfqNS.Element);
\ No newline at end of file
/**
* @author Rafael Ostertag <rafael.ostertag@math.uzh.ch>
*/
if (!QfqNS) {
var QfqNS = {};
}
if (!QfqNS.Element) {
QfqNS.Element = {};
}
(function (n) {
'use strict';
/**
* Known values of `type` attribute of `<input>` elements
*
* @type {string[]}
*/
n.knownElementTypes = [
'text',
'password',
'checkbox',
'radio',
'button',
'submit',
'reset',
'file',
'hidden',
'image',
'datetime',
'datetime-local',
'date',
'month',
'time',
'week',
'number',
'range',
'email',
'url',
'search',
'tel',
'color'
];
})(QfqNS.Element);
\ No newline at end of file
......@@ -9,7 +9,7 @@
<link rel="stylesheet" href="../css/bootstrap-theme.min.css">
<link rel="stylesheet" href="../css/jqx.base.css">
<link rel="stylesheet" href="../css/jqx.darkblue.css">
<link rel="stylesheet" href="../css/qfq-jqw.css">
<link rel="stylesheet" href="../css/qfq-bs.css">
<title>Person Form Mockup</title>
......@@ -179,12 +179,12 @@
<div class="col-md-6">
<div class="radio">
<label>
<input type="radio">male
<input type="radio" name="gender">male
</label>
</div>
<div class="radio">
<label>
<input type="radio">female
<input type="radio" name="gender">female
</label>
</div>
</div>
......@@ -738,7 +738,7 @@
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/jqx-all.js"></script>
<script src="../js/qfq-jqw.debug.js"></script>
<script src="../js/qfq.debug.js"></script>
<script type="text/javascript">
$(function () {
......
......@@ -18,10 +18,14 @@
<script src="../../packages/bootstrap/js/bootstrap.min.js"></script>
<!-- include source files here... -->
<script src="../../js/qfq-jqw.debug.js"></script>
<script src="../../js/qfq.debug.js"></script>
<!-- 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/BSTabsSpec.js"></script>
<script src="spec/PageTitleSpec.js"></script>
<script src="spec/FormSpec.js"></script>
......@@ -178,7 +182,7 @@
<label for="nameShort" class="control-label">Vorname Kurz</label>
</div>
<div class="col-md-6">
<input id="nameShort" type="text" class="form-control">
<input id="nameShort" type="text" name="personHandle" class="form-control">
</div>
<div class="col-md-4">
......@@ -212,6 +216,43 @@
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<b class="control-label">
Gender
</b>
</div>
<div class="col-md-6">
<div class="radio">
<label>
<input type="radio" name="gender" value="male">male
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="gender" value="female">female
</label>
</div>
</div>
<div class="col-md-4">
<p class="help-block"></p>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<label for="personGeburtstag" class="control-label">Geburtstag</label>
</div>
<div class="col-md-6">
<input id="personGeburtstag" type="text" class="form-control" name="geburtstag">
</div>
</div>
</form>
</section>
......
......@@ -171,7 +171,7 @@
<label for="personHandle" class="control-label">Kurzform</label>
</div>
<div class="col-md-6">
<input id="personHandle" type="text" class="form-control">
<input id="personHandle" type="text" name="personHandle" class="form-control">
</div>
<div class="col-md-4">
......@@ -192,6 +192,43 @@
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<b class="control-label">
Gender
</b>
</div>
<div class="col-md-6">
<div class="radio">
<label>
<input type="radio" name="gender" value="male">male
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="gender" value="female">female
</label>
</div>
</div>
<div class="col-md-4">
<p class="help-block"></p>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<label for="personGeburtstag" class="control-label">Geburtstag</label>
</div>
<div class="col-md-6">
<input id="personGeburtstag" type="text" class="form-control" name="geburtstag">
</div>
</div>
</form>
</section>
......
/**
* @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);
});
});
/**
* @author Rafael Ostertag <rafael.ostertag@math.uzh.ch>
*/
/* global describe */
/* global it */
/* global expect */
/* global QfqNS */
/* global beforeAll */
/* global jasmine */
/* global $ */
describe("Element FormGroup", function () {
'use strict';
var personGeburtstag;
var personHandle;
var personGender;
beforeAll(function () {
personGeburtstag = new QfqNS.Element.FormGroup($("input#personGeburtstag"));
personHandle = new QfqNS.Element.FormGroup($("input#personHandle"));
personGender = new QfqNS.Element.FormGroup($("input[name='gender']"));
});
it("should throw exception on non-form elements", function () {
expect(function () {
new QfqNS.Element.FormGroup($("#person2"));
}).toThrow();
});
it("should throw exception on empty selection", function () {
expect(function () {
new QfqNS.Element.FormGroup($("#you_should_not_find_it"));
}).toThrow();
});
it("should throw on ambiguous form elements", function () {
expect(function () {
new QfqNS.Element.FormGroup($("input#personGeburtstag,input#personHandle"));
}).toThrow();
});
it("should throw exception on null form element", function () {
expect(function () {
new QfqNS.Element.FormGroup(null);
}).toThrow();
});
it("should find the the enclosing form group", function () {
expect(personGeburtstag.$formGroup.length).toBe(1);
expect(personHandle.$formGroup.length).toBe(1);
});
it("personGeburtstag should have one input element", function () {
expect(personGeburtstag.$element.length).toBe(1);
});
it("personGeburtstag should have a label", function () {
expect(personGeburtstag.hasLabel()).toBe(true);
});
it("personGeburtstag should not have a help block", function () {
expect(personGeburtstag.hasHelpBlock()).toBe(false);
});
it("personHandle should have one input element", function () {
expect(personHandle.$element.length).toBe(1);
});
it("personHandle should have a label", function () {
expect(personHandle.hasLabel()).toBe(true);
});
it("personHandle should have a help block", function () {
expect(personHandle.hasHelpBlock()).toBe(true);
});
it("personGender should have 2 input elements", function () {
expect(personGender.$element.length).toBe(2);
});
it("personGender should have a label", function () {
expect(personGender.hasLabel()).toBe(true);
});
it("personGender should have a help block", function () {
expect(personGender.hasHelpBlock()).toBe(true);
});
});
\ No newline at end of file
/**
* @author Rafael Ostertag <rafael.ostertag@math.uzh.ch>
*/
/* global describe */
/* global it */
/* global expect */
/* global QfqNS */
/* global beforeAll */
/* global jasmine */
/* global $ */
describe("Element Radio", function () {
'use strict';
var $radioInput;
var radioInput;
beforeAll(function () {
$radioInput = $("input[name='gender']");
radioInput = new QfqNS.Element.Radio($radioInput);
});
it("should throw on wrong type", function () {
expect(function () {
new QfqNS.Element.Radio($("input[name='personHandle']"));
}).toThrow();
});
it("should set value", function () {
radioInput.setValue("male");
expect($radioInput.filter(':checked').length).toBe(1);
expect($radioInput.filter(':checked').val()).toBe("male");
radioInput.setValue("female");
expect($radioInput.filter(':checked').length).toBe(1);
expect($radioInput.filter(':checked').val()).toBe("female");
});
it("should get text", function () {
$radioInput.filter(':checked').prop('checked', false);
$radioInput.filter('[value=female]').prop('checked', true);
expect(radioInput.getValue()).toBe("female");
$radioInput.filter(':checked').prop('checked', false);
$radioInput.filter('[value=male]').prop('checked', true);
expect(radioInput.getValue()).toBe("male");
});
});
\ No newline at end of file
/**
* @author Rafael Ostertag <rafael.ostertag@math.uzh.ch>
*/
/* global describe */
/* global it */
/* global expect */
/* global QfqNS */
/* global beforeAll */
/* global jasmine */
/* global $ */
describe("Element Text", function () {
'use strict';
var $textInput;
var textInput;
beforeAll(function () {
$textInput = $("input[name='personHandle']");
textInput = new QfqNS.Element.Input($textInput);
});
it("should throw on wrong type", function () {
expect(function () {
new QfqNS.Element.Input($("input[name='gender']"));
}).toThrow();
});
it("should set text", function () {
textInput.setValue("new value");
expect($textInput.val()).toBe("new value");
});
it("should get text", function () {
$textInput.val("externally set");
expect(textInput.getValue()).toBe("externally set");
});
});
Supports Markdown
0% or .
</