0x2620/oxjs
2
0
Fork 2
Code Issues 172 Pull requests Releases Wiki Activity

more docs

Browse source
This commit is contained in:
j 2011-05-16 12:49:48 +02:00
commit cc75e25415
42 changed files with 664 additions and 93 deletions
Download patch file Download diff file Expand all files Collapse all files

41
source/Ox.UI/js/Form/Ox.Checkbox.js
View file

@ -1,22 +1,21 @@
// vim: et:ts=4:sw=4:sts=4:ft=js
Ox.Checkbox = function(options, self) {
/*@
Ox.Checkbox <f:Ox.Element> Checkbox Element
() -> <f> Checkbox Element
(options) -> <f> Checkbox Element
(options, self) -> <f> Checkbox Element
options <o> Options object
disabled <b> if true, checkbox is disabled
id <s> element id
group <b> if true, checkbox is part of a group
checked <b> if true, checkbox is checked
title <s> text on label
width <n> width in px
self <o> Shared private variable
change <!> triggered when checked property changes, passes {checked, id, title}
@*/
/**
options
disabled boolean, if true, checkbox is disabled
id element id
group boolean, if true, checkbox is part of a group
checked boolean, if true, checkbox is checked
title string, text on label
width integer, width in px
methods:
toggleChecked function()
toggles checked property
returns that
events:
change triggered when checked property changes
passes {checked, id, title}
*/
Ox.Checkbox = function(options, self) {
var self = self || {},
that = new Ox.Element({}, self)
@ -91,10 +90,18 @@ Ox.Checkbox = function(options, self) {
}
};
/*@
checked <f> get current checked state
() -> <b> returns self.options.checked
@*/
that.checked = function() {
return self.options.checked;
}
/*@
toggleChecked <f> toggle current checked state
() -> <f> toggle state, returns Checkbox Element
@*/
that.toggleChecked = function() {
self.$button.toggleTitle();
return that;

10
source/Ox.UI/js/Form/Ox.ColorInput.js
View file

@ -1,4 +1,14 @@
// vim: et:ts=4:sw=4:sts=4:ft=js
/*@
Ox.ColorInput <f:Ox.InputGroup> ColorInput Element
() -> <f> ColorInput Element
(options) -> <f> ColorInput Element
(options, self) -> <f> ColorInput Element
options <o> Options object
id <s> element id
value <s|0, 0, 0> rgb value
self <o> Shared private variable
@*/
Ox.ColorInput = function(options, self) {
var self = $.extend(self || {}, {

13
source/Ox.UI/js/Form/Ox.ColorPicker.js
View file

@ -1,4 +1,17 @@
// vim: et:ts=4:sw=4:sts=4:ft=js
/*@
Ox.ColorPicker <f:Ox.Element> ColorPicker Element
() -> <f> ColorPicker Element
(options) -> <f> ColorPicker Element
(options, self) -> <f> ColorPicker Element
options <o> Options object
id <s> element id
value <s|0, 0, 0> rgb value
self <o> Shared private variable
change <!> triggered on change of value
@*/
Ox.ColorPicker = function(options, self) {
var self = self || {},

27
source/Ox.UI/js/Form/Ox.DateInput.js
View file

@ -1,18 +1,19 @@
// vim: et:ts=4:sw=4:sts=4:ft=js
Ox.DateInput = function(options, self) {
/**
options:
format: 'short'
value: date value
weekday: false
width: {
day: 32,
month: options.format == 'long' ? 80 : (options.format == 'medium' ? 40 : 32),
weekday: options.format == 'long' ? 80 : 40,
year: 48
}
*/
/*@
Ox.DateInput <f:Ox.Element> DateInput Element
() -> <f> DateInput Element
(options) -> <f> DateInput Element
(options, self) -> <f> DateInput Element
options <o> Options object
format <s|short> format can be short, medium, long
value <d> date value, defaults to now
weekday <b|false> weekday
width: <o> width object with day, month, weekday, year width
self <o> Shared private variable
change <!> triggered on change of value
@*/
Ox.DateInput = function(options, self) {
var self = $.extend(self || {}, {
options: $.extend({

16
source/Ox.UI/js/Form/Ox.DateTimeInput.js
View file

@ -1,4 +1,20 @@
// vim: et:ts=4:sw=4:sts=4:ft=js
/*@
Ox.DateTimeInput <f:Ox.Element> DateTimeInput Element
() -> <f> DateTimeInput Element
(options) -> <f> DateTimeInput Element
(options, self) -> <f> DateTimeInput Element
options <o> Options object
ampm <b|false> false is 24h true is am/pm
format <s|short> options are short, medium, long
seconds <b|false> show seconds
value <d> defautls to now
weekday <b|false> weekday
self <o> Shared private variable
change <!> triggered on change of value
@*/
Ox.DateTimeInput = function(options, self) {
var self = self || {},

20
source/Ox.UI/js/Form/Ox.Filter.js
View file

@ -1,11 +1,19 @@
// vim: et:ts=4:sw=4:sts=4:ft=js
Ox.Filter = function(options, self) {
/***
Options:
Methods:
Events:
***/
/*@
Ox.Filter <f:Ox.Element> Filter Element
() -> <f> Filter Element
(options) -> <f> Filter Element
(options, self) -> <f> Filter Element
options <o> Options object
findKeys <a|[]> keys
query <o> query object with conditions, operator
sortKeys <a|[]> keys to sort by
viewKeys <a|[]> visible keys
self <o> Shared private variable
@*/
Ox.Filter = function(options, self) {
var self = self || {},
that = new Ox.Element({}, self)

4
source/Ox.UI/js/Form/Ox.Form.js
View file

@ -8,8 +8,8 @@ Ox.Form <f:Ox.Element> Form Object
options <o> Options object
error <s> error
id <s> id
items <a> []
submit <f> null
items <a|[]> []
submit <f|null> on submit function
self <o> shared private variable
@*/

15
source/Ox.UI/js/Form/Ox.FormElementGroup.js
View file

@ -1,4 +1,19 @@
// vim: et:ts=4:sw=4:sts=4:ft=js
/*@
Ox.FormElementGroup <f:Ox.Element> FormElementGroup Element
() -> <f> FormElementGroup Element
(options) -> <f> FormElementGroup Element
(options, self) -> <f> FormElementGroup Element
options <o> Options object
id <s> element id
elements <a|[]> elements in group
float <s|left> alignment
separators <a|[]> separators (not implemented)
width <n|0> group width
self <o> Shared private variable
@*/
Ox.FormElementGroup = function(options, self) {
var self = self || {},

20
source/Ox.UI/js/Form/Ox.FormItem.js
View file

@ -1,4 +1,16 @@
// vim: et:ts=4:sw=4:sts=4:ft=js
/*@
Ox.FormItem <f:Ox.Element> FormItem Element, wrap form element with an error message
() -> <f> FormItem Element
(options) -> <f> FormItem Element
(options, self) -> <f> FormItem Element
options <o> Options object
element <o|null> element
error <s> error message
self <o> Shared private variable
@*/
Ox.FormItem = function(options, self) {
var self = self || {},
@ -15,10 +27,18 @@ Ox.FormItem = function(options, self) {
.addClass('OxFormMessage')
.appendTo(that);
/*@
setMessage <f> set message
(message) -> <u> set message
@*/
that.setMessage = function(message) {
self.$message.html(message)[message !== '' ? 'show' : 'hide']();
}
/*@
value <f> get value
() -> <s> get value of wrapped element
@*/
that.value = function() {
return self.options.element.value();
};

22
source/Ox.UI/js/Form/Ox.OptionGroup.js
View file

@ -1,4 +1,14 @@
// vim: et:ts=4:sw=4:sts=4:ft=js
/*@
Ox.OptionGroup <f> OptionGroup
(items, min, max, property) -> <f> OptionGroup
items <a> array of items
min <n> minimum number of selected items
max <n> maximum number of selected items
property <s|checked> property to check
@*/
Ox.OptionGroup = function(items, min, max, property) {
/*
@ -41,6 +51,10 @@ Ox.OptionGroup = function(items, min, max, property) {
return num;
}
/*@
[property] <f> returns an array with the positions of all checked item
() -> <a> returns checked items
@*/
this[property] = function() {
// returns an array with the positions of all checked item
var checked = [];
@ -52,6 +66,10 @@ Ox.OptionGroup = function(items, min, max, property) {
return checked;
};
/*@
init <f> init group
() -> <a> returns items
@*/
this.init = function() {
var num = getNumber(),
count = 0;
@ -76,6 +94,10 @@ Ox.OptionGroup = function(items, min, max, property) {
return items;
};
/*@
toggle <f> toggle options
(pos) -> <a> returns toggled state
@*/
this.toggle = function(pos) {
var last,
num = getNumber(),

8
source/Ox.UI/js/Form/Ox.Picker.js
View file

@ -5,7 +5,13 @@ Ox.Picker <f:Ox.Element> Picker Object
(options) -> <f> Picker Object
(options, self) -> <f> Picker Object
options <o> Options object
element <o|null> picker element
elementHeight <n|128> height
elemementWidth <n|256> width
id <s> picker id
overlap <s|none> select button overlap value
show <!> picker is shown
hide <!> picker is hidden
@*/
Ox.Picker = function(options, self) {

12
source/Ox.UI/js/Form/Ox.PlaceInput.js
View file

@ -1,4 +1,16 @@
// vim: et:ts=4:sw=4:sts=4:ft=js
/*@
Ox.PlaceInput <f:Ox.FormElementGroup> PlaceInput Object
() -> <f> PlaceInput Object
(options) -> <f> PlaceInput Object
(options, self) -> <f> PlaceInput Object
options <o> Options object
id <s> element id
value <s|United States> default value of place input
self <o> shared private variable
@*/
Ox.PlaceInput = function(options, self) {
var self = $.extend(self || {}, {

12
source/Ox.UI/js/Form/Ox.PlacePicker.js
View file

@ -1,4 +1,16 @@
// vim: et:ts=4:sw=4:sts=4:ft=js
/*@
Ox.PlacePicker <f:Ox.Element> PlacePicker Object
() -> <f> PlacePicker Object
(options) -> <f> PlacePicker Object
(options, self) -> <f> PlacePicker Object
options <o> Options object
id <s> element id
value <s|United States> default value of place input
self <o> shared private variable
@*/
Ox.PlacePicker = function(options, self) {
var self = $.extend(self || {}, {

4
source/Ox.UI/js/Form/Ox.Range.js
View file

@ -16,10 +16,12 @@ Ox.Range <f:Ox.Element> Range Object
thumbSize <n> minimum width or height of thumb, in px
thumbValue <b> if true, display value on thumb
trackGradient <a> colors
trackImages <s> or array one or multiple track background image URLs
trackImages <s> or <a> one or multiple track background image URLs
trackStep <n> 0 (scroll here) or step when clicking track
value <n> initial value
valueNames <a> value names to display on thumb
self <o> shared private variable
change <!> triggered on change of the range
@*/
Ox.Range = function(options, self) {

31
source/Ox.UI/js/Form/Ox.Select.js
View file

@ -1,4 +1,26 @@
// vim: et:ts=4:sw=4:sts=4:ft=js
/*@
Ox.Select <f:Ox.Element> Select Object
() -> <f> Select Object
(options) -> <f> Select Object
(options, self) -> <f> Select Object
options <o> Options object
id <s> element id
items <a|[]> items
max <n|1> minimum number of selected items
min <n|1> maximum number of selected items
overlap <s|'none'> can be none, left or right
selectable <b|true> is selectable
size <s|'medium'> size, can be small, medium, large
title <s|''> select title
type <s|'text'> can be 'text' or 'image'
width <s|n|'auto'> can be auto or width in pixels
self <o> shared private variable
click <!> on click event
change <!> on change event
@*/
Ox.Select = function(options, self) {
// fixme: selected item needs attribute "checked", not "selected" ... that's strange
@ -130,6 +152,10 @@ Ox.Select = function(options, self) {
};
/*@
selectItem <f> select item in group
() -> <o> returns object of selected items with id, title
@*/
that.selected = function() {
return $.map(/*self.checked*/self.optionGroup.checked(), function(v) {
return {
@ -139,6 +165,11 @@ Ox.Select = function(options, self) {
});
};
/*@
selectItem <f> select item in group
(id) -> <u> select item by id
id <s> item id
@*/
that.selectItem = function(id) {
//Ox.print('selectItem', id, Ox.getObjectById(self.options.items, id).title)
self.options.type == 'text' && self.$title.html(

14
source/Ox.UI/js/Form/Ox.TimeInput.js
View file

@ -1,4 +1,18 @@
// vim: et:ts=4:sw=4:sts=4:ft=js
/*@
Ox.TimeInput <f:Ox.Element> TimeInput Object
() -> <f> TimeInput Object
(options) -> <f> TimeInput Object
(options, self) -> <f> TimeInput Object
options <o> Options object
ampm <b|false> 24h/ampm
seconds <b|false> show seconds
milliseconds <b|false> show milliseconds
value <d> value, defaults to now
self <o> shared private variable
@*/
Ox.TimeInput = function(options, self) {
// fixme: seconds get set even if options.seconds is false