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

some documentation

Browse source
This commit is contained in:
j 2011-05-16 10:24:46 +02:00
parent 275dcbb356
commit bdb8d98787
45 changed files with 775 additions and 255 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
demos/doc2/js/doc.js
View file

@ -4,7 +4,7 @@ Ox.load('UI', {
}, function() {
Ox.Theme('classic');
$.getJSON(Ox.UI.PATH + 'json/Ox.UI.json', function(files) {
Ox.DocPanel({
doc = Ox.DocPanel({
files: Ox.merge([
'Ox.js',
'Ox.Geo/Ox.Geo.js',
@ -20,7 +20,18 @@ Ox.load('UI', {
return item.section || file.split('/')[2];
},
path: Ox.PATH
})
.appendTo(Ox.UI.$body);
}).bindEvent({
load: function() {
doc.selectItem(document.location.hash.substring(1));
},
select: function(data) {
if(data.ids)
document.location.hash = data.ids[0];
}
});
doc.appendTo(Ox.UI.$body);
window.onhashchange = function() {
doc.selectItem(document.location.hash.substring(1))
};
});
});

12
source/Ox.UI/js/Bar/Ox.Bar.js
View file

@ -1,6 +1,14 @@
// vim: et:ts=4:sw=4:sts=4:ft=js
/**
*/
/*@
Ox.Bar <f:Ox.Element> Bar
() -> <o> Bar object
(options) -> <o> Bar object
(options, self) -> <o> Bar object
options <o> Options object
orientation <s|horizontal>
size <s|medium> can be small, medium, large or number
self <o> Shared private variable
@*/
Ox.Bar = function(options, self) {
var self = self || {},
that = new Ox.Element({}, self)

17
source/Ox.UI/js/Bar/Ox.Resizebar.js
View file

@ -1,4 +1,21 @@
// vim: et:ts=4:sw=4:sts=4:ft=js
/*@
Ox.Resizebar <f:Ox.Element> Resizebar
() -> <f> Resizebar object
(options) -> <f> Resizebar object
(options, self) -> <f> Resizebar object
options <o> Options object
collapsed <b|false>
collapsible <b|true>
edge <s|left>
elements <a|[]>
orientation <s|horizontal>
panel <o|null>
resizeable <b|true>
resize <a|[]>
size <n|0>
self <o> Shared private variable
@*/
/**
*/
Ox.Resizebar = function(options, self) {

10
source/Ox.UI/js/Bar/Ox.Tabbar.js
View file

@ -1,4 +1,14 @@
// vim: et:ts=4:sw=4:sts=4:ft=js
/*@
Ox.Tabbar <f:Ox.Bar> Tabbar
() -> <o> Tabbar object
(options) -> <o> Tabbar object
(options, self) -> <o> Tabbar object
options <o> Options object
selected <n|0> selected item
tabs <a|[]> tabs
self <o> Shared private variable
@*/
/**
*/
Ox.Tabbar = function(options, self) {

2
source/Ox.UI/js/Calendar/Ox.Calendar.js
View file

@ -1,7 +1,7 @@
// vim: et:ts=4:sw=4:sts=4:ft=js
/*@
Ox.Calendar <f> Basic calendar object
Ox.Calendar <f:Ox.Element> Basic calendar object
() -> <f> Calendar object
(options) -> <f> Calendar object
(options, self) -> <f> Calendar object

8
source/Ox.UI/js/Calendar/Ox.CalendarDate.js
View file

@ -1,4 +1,12 @@
// vim: et:ts=4:sw=4:sts=4:ft=js
/*@
Ox.CalendarDate <f> CalendarDate
() -> <o> CalendarData object
(options) -> <o> CalendarData object
options <o> Options object
start <d> start date
stop <d> stop date
@*/
Ox.CalendarDate = function(options) {
var self = {},

43
source/Ox.UI/js/Core/Ox.App.js
View file

@ -1,32 +1,21 @@
// vim: et:ts=4:sw=4:sts=4:ft=js
/*
============================================================================
Application
============================================================================
*/
// fixme: get rid of launch, fire load event
/*@
Ox.App <f> Basic application instance that communicates with a JSON API
() -> <f> App object
(options) -> <f> App object
(options, self) -> <f> App object
options <o> Options object
timeout <n> request timeout
type <s> 'GET' or 'POST'
url <s> JSON API url
self <o> Shared private variable
load <!> app loaded
@*/
Ox.App = (function() {
/***
Ox.App
Basic application instance that communicates with a JSON API.
The JSON API must support at least the following actions:
api returns all api methods
init returns data (site, user, ...)
Options
timeout API timeout in msec
type 'GET' or 'POST'
url URL of the API
Methods
api[action] make a request
api.cancel cancel a request
options get or set options
Events
load app loaded
***/
return function(options) {
options = options || {};
@ -61,6 +50,12 @@ Ox.App = (function() {
url: self.options.url
});
/*@
api <o> bakcend API
[action] <f> all api requests available on backend
cancel <f> cancel a request
options <f> get or set options
@*/
that.api.api(function(result) {
Ox.forEach(result.data.actions, function(val, key) {
that.api[key] = function(data, callback) {

17
source/Ox.UI/js/Core/Ox.Clipboard.js
View file

@ -1,12 +1,15 @@
// vim: et:ts=4:sw=4:sts=4:ft=js
/*@
Ox.Clipboard <f> Basic clipboard handler
() -> <o> Clipboard object
(options) -> <o> Clipboard object
(options, self) -> <o> Clipboard object
copy(data) <f> copy data to clipboard
paste <f> paste data from clipboard
options <o> Options object
self <o> Shared private variable
@*/
Ox.Clipboard = function() {
/***
Ox.Clipboard
Basic clipboard handler
Methods
copy(data) copy data to clipboard
paste paste data from clipboard
***/
var clipboard = {};
return {
_print: function() {

8
source/Ox.UI/js/Core/Ox.Container.js
View file

@ -4,6 +4,14 @@
// 0, 1, 2, etc, so that append would append 0, and appendTo
// would append (length - 1)?
/*@
Ox.Container <f> Container
() -> <o> Container object
(options) -> <o> Container object
(options, self) -> <o> Container object
options <o> Options object
self <o> Shared private variable
@*/
Ox.Container = function(options, self) {
// fixme: to be deprecated
var that = new Ox.Element({}, self)

10
source/Ox.UI/js/Core/Ox.DocPage.js
View file

@ -1,3 +1,11 @@
/*@
Ox.DocPage <f> DocPage
() -> <o> DocPage object
(options) -> <o> DocPage object
(options, self) -> <o> DocPage object
options <o> Options object
self <o> Shared private variable
@*/
Ox.DocPage = function(options, self) {
self = self || {};
@ -162,4 +170,4 @@ Ox.DocPage = function(options, self) {
return that;
};
};

28
source/Ox.UI/js/Core/Ox.DocPanel.js
View file

@ -1,5 +1,19 @@
/*@
Ox.DocPanel <f> Documentation Panel
() -> <f> Documentation Panel
(options) -> <f> Documentation Panel
(options, self) -> <f> Documentation Panel
options <o> Options object
collapsible <b|true> can be collabsed
files <a|[]> files to parse for docs
getModule <f> returns module for given item
getSection <f> returns section for given item
path <s|''> path prefix
resizable <b|true> is resizable
resize <a|[128, 256, 384]> resize positions
size <s|256> default size
self <o> shared private variable
load <!> fired once all docs are loaded
@*/
Ox.DocPanel = function(options, self) {
@ -43,6 +57,7 @@ Ox.DocPanel = function(options, self) {
loadList(function(docItems) {
self.items = docItems;
that.triggerEvent('load', {});
});
function loadList(callback) {
@ -58,6 +73,7 @@ Ox.DocPanel = function(options, self) {
}
});
});
function makeTree(docItems) {
var treeItems = [];
docItems.forEach(function(docItem) {
@ -145,6 +161,7 @@ Ox.DocPanel = function(options, self) {
});
}
}
that.triggerEvent('select', data);
}
function sortByTitle(a, b) {
@ -156,7 +173,14 @@ Ox.DocPanel = function(options, self) {
}
return ret;
}
/*@
selectItem <f> select item
(id) -> <u> select an item
id <s> if of item to select
@*/
that.selectItem = function(id) {
self.$list.triggerEvent('select', {'ids': [id]});
}
return that;
};
};

18
source/Ox.UI/js/Core/Ox.LoadingIcon.js
View file

@ -1,4 +1,14 @@
// vim: et:ts=4:sw=4:sts=4:ft=js
/*@
Ox.LoadingIcon <f:Ox.Element> Loading Icon Element
() -> <f> Loading Icon Element
(options) -> <f> Loading Icon Element
(options, self) -> <f> Loading Icon Element
options <o> Options object
size <s|medium> size of icon
self <o> Shared private variable
@*/
Ox.LoadingIcon = function(options, self) {
var self = self || {},
that = new Ox.Element('<img>', self)
@ -12,12 +22,20 @@ Ox.LoadingIcon = function(options, self) {
.addClass(
'OxLoadingIcon Ox' + Ox.toTitleCase(self.options.size)
);
/*@
start <f> Start loading animation
() -> <f> Loading Icon Element
@*/
that.start = function() {
that.animate({
opacity: 1
}, 250);
return that;
};
/*@
stop <f> Stop loading animation
() -> <f> Loading Icon Element
@*/
that.stop = function() {
that.animate({
opacity: 0

54
source/Ox.UI/js/Core/Ox.Request.js
View file

@ -1,18 +1,14 @@
// vim: et:ts=4:sw=4:sts=4:ft=js
Ox.Request = function(options) {
/*@
Ox.Request <o> Basic request handler object
FIXME: options is not a property, just documenting defaults
options <o> Options object
timeout <n|60000> request timeout
type <s|POST> request type, possible values POST, GET, PUT, DELETE
url <s> request url
@*/
/***
Ox.Request
Basic request handler
Options
timeout
Methods
cancel() cancel request
clearCache() clear cache
options() get or set options
requests() return number of active requests
send() send request
***/
Ox.Request = function(options) {
var cache = {},
//dfd = $.Deferred(),
@ -27,7 +23,12 @@ Ox.Request = function(options) {
};
return {
/*@
cancel <f> cancel pending requests
() -> <u> cancel all requests
(f) -> <u> cancel all requests where function returns true
(n) -> <u> cancel request by id
@*/
cancel: function() {
if (arguments.length == 0) {
// cancel all requests
@ -44,19 +45,42 @@ Ox.Request = function(options) {
delete requests[arguments[0]];
}
},
/*@
clearCache <f> clear cached results
() -> <u>
@*/
clearCache: function() {
cache = {};
},
/*@
options <f> get/set options
() -> <o> get options
(options) -> <o> set options
options <o> Options Object
@*/
options: function(options) {
return Ox.getset(self.options, options, $.noop(), this);
},
/*@
requests <f> pending requests
() -> <n> returns number of requests
@*/
requests: function() {
return Ox.len(requests);
},
/*@
send <f> send request
(options) -> <n> returns request id
options <o> Options Object
age <n|-1> cache age
id <n|Ox.uid()> request id
timeout <n|self.options.timeout> overwrite default timeout
type <n|self.options.timeout> overwrite default type
url <n|self.options.timeout> overwrite default url
@*/
send: function(options) {
var options = $.extend({

19
source/Ox.UI/js/Core/Ox.Theme.js
View file

@ -1,14 +1,15 @@
// vim: et:ts=4:sw=4:sts=4:ft=js
// fixme: this should be Ox.Theme, and provide Ox.Theme.set(), Ox.Theme.load, etc.
/**
if name is given as argument, switch to this theme.
return current theme otherwise.
Ox.theme()
get theme
Ox.theme('foo')
set theme to 'foo'
*/
/*@
Ox.Theme <f> get/set theme
() -> <s> Get current theme
(theme) -> <s> Set current theme
theme <s> name of theme
> Ox.Theme()
'classic'
> Ox.Theme('modern')
'modern'
@*/
Ox.Theme = function(theme) {

49
source/Ox.UI/js/Form/Ox.Button.js
View file

@ -1,18 +1,29 @@
// vim: et:ts=4:sw=4:sts=4:ft=js
/*@
Ox.Button <f:Ox.Element> Button Object
() -> <f> Button Object
(options) -> <f> Button Object
(options, self) -> <f> Button Object
options <o> Options object
disabled <b|false> disabled
group <b|false> is part of group
id: <s|''> button id
overlap <s|none> overlap
selectable <b|false> is selecatable
selected <b|false> is selected
size <s|medium> button size
style <s|default> // can be default, checkbox, symbol, or tab
title <s|a|''> title, can be array of titles
tooltip <s|a|''> tooltip if multiple must be same number as titles
type <s|text> button type, text or image, (for image, title must be symbolTitle.svg must be availabe)
width <s|auto> button width
self <o> Shared private variable
click <!> non-selectable button was clicked
deselect <!> selectable button was deselected
select <!> selectable button was selected
@*/
Ox.Button = function(options, self) {
/**
methods:
toggleDisabled enable/disable button
toggleSelected select/unselect button
toggleTitle if more than one title was provided,
toggle to next title.
events:
click non-selectable button was clicked
deselect selectable button was deselected
select selectable button was selected
*/
var self = self || {},
that = new Ox.Element('<input>', self)
.defaults({
@ -137,6 +148,10 @@ Ox.Button = function(options, self) {
}
}
/*@
toggleDisabled <f>
() -> <u> toggle disabled state
@*/
that.toggleDisabled = function() {
that.options({
enabled: !self.options.disabled
@ -144,6 +159,10 @@ Ox.Button = function(options, self) {
//self.options.disabled = !self.options.disabled;
}
/*@
toggleSelected <f>
() -> <u> toggle selected state
@*/
that.toggleSelected = function() {
that.options({
selected: !self.options.selected
@ -151,6 +170,10 @@ Ox.Button = function(options, self) {
//self.options.selected = !self.options.selected;
}
/*@
toggleTitle <f>
() -> <u> toggle through titles
@*/
that.toggleTitle = function() {
self.selectedTitle = 1 - self.selectedTitle;
setTitle(self.titles[self.selectedTitle].title);

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

@ -1,17 +1,20 @@
// vim: et:ts=4:sw=4:sts=4:ft=js
Ox.ButtonGroup = function(options, self) {
/*@
Ox.ButtonGroup <f:Ox.Element> ButtonGroup Object
() -> <f> ButtonGroup Object
(options) -> <f> ButtonGroup Object
(options, self) -> <f> ButtonGroup Object
options <o> Options object
buttons <a> array of buttons
max <n> integer, maximum number of selected buttons, 0 for all
min <n> integer, minimum number of selected buttons, 0 for none
selectable <b> if true, buttons are selectable
type <s> string, 'image' or 'text'
self <o> Shared private variable
change <!> {id, value} selection within a group changed
@*/
/**
options
buttons array of buttons
max integer, maximum number of selected buttons, 0 for all
min integer, minimum number of selected buttons, 0 for none
selectable if true, buttons are selectable
type string, 'image' or 'text'
methods:
events:
change {id, value} selection within a group changed
*/
Ox.ButtonGroup = function(options, self) {
var self = self || {},
that = new Ox.Element({}, self)

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

@ -1,16 +1,21 @@
// vim: et:ts=4:sw=4:sts=4:ft=js
Ox.CheckboxGroup = function(options, self) {
/*@
Ox.CheckboxGroup <f:Ox.Element> CheckboxGroup Object
() -> <f> CheckboxGroup Object
(options) -> <f> CheckboxGroup Object
(options, self) -> <f> CheckboxGroup Object
options <o> Options object
checkboxes <a|[]> array of checkboxes
max <n|1> integer
min <n|1> integer
width <n> integer, width in px
self <o> shared private variable
change <!> triggered when checked property changes
passes {checked, id, title}
@*/
/**
options
checkboxes [] array of checkboxes
max 1 integer
min 1 integer
width integer, width in px
events:
change triggered when checked property changes
passes {checked, id, title}
*/
Ox.CheckboxGroup = function(options, self) {
var self = self || {},
that = new Ox.Element({}, self)

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

@ -1,8 +1,19 @@
// vim: et:ts=4:sw=4:sts=4:ft=js
Ox.Form = function(options, self) {
/**
*/
/*@
Ox.Form <f:Ox.Element> Form Object
() -> <f> Form Object
(options) -> <f> Form Object
(options, self) -> <f> Form Object
options <o> Options object
error <s> error
id <s> id
items <a> []
submit <f> null
self <o> shared private variable
@*/
Ox.Form = function(options, self) {
var self = self || {},
that = new Ox.Element({}, self)

111
source/Ox.UI/js/Form/Ox.Input.js
View file

@ -1,59 +1,62 @@
// vim: et:ts=4:sw=4:sts=4:ft=js
Ox.Input = function(options, self) {
/*@
Ox.Input <f:Ox.Element> Input Element
() -> <f> Input Element
(options) -> <f> Input Element
(options, self) -> <f> Input Element
options <o> Options object
arrows <b> if true, and type is 'float' or 'integer', display arrows
arrowStep <n> step when clicking arrows
autocomplete <a> array of possible values, or
<f> function(key, value, callback), returns one or more values
autocompleteReplace <b> if true, value is replaced
autocompleteReplaceCorrect <b> if true, only valid values can be entered
autocompleteSelect <b> if true, menu is displayed
autocompleteSelectHighlight <b> if true, value in menu is highlighted
autocompleteSelectSubmit <b> if true, submit input on menu selection
autocorrect <s|r|f|null> ('email', 'float', 'integer', 'phone', 'url'), or
<r> regexp(value), or
<f> function(key, value, blur, callback), returns value
autovalidate <f> --remote validation--
clear <b> if true, has clear button
disabled <b> if true, is disabled
height <n> px (for type='textarea' and type='range' with orientation='horizontal')
id <s> element id
key <s> to be passed to autocomplete and autovalidate functions
max <n> max value if type is 'integer' or 'float'
min <n> min value if type is 'integer' or 'float'
name <s> will be displayed by autovalidate function ('invalid ' + name)
overlap <s> '', 'left' or 'right', will cause padding and negative margin
picker <o> picker object
rangeOptions <o> range options
arrows <b>boolean, if true, display arrows
//arrowStep <n> number, step when clicking arrows
//arrowSymbols <a> array of two strings
max <n> number, maximum value
min <n> number, minimum value
orientation <s> 'horizontal' or 'vertical'
step <n> number, step
thumbValue <b> boolean, if true, value is displayed on thumb, or
<a> array of strings per value, or
<f> function(value), returns string
thumbSize <n> integer, px
trackGradient <s> string, css gradient for track
trackImage <s> string, image url, or
<a> array of image urls
//trackStep <n> number, 0 for 'scroll here', positive for step
trackValues <b> boolean
serialize <f> function used to serialize value in submit
textAlign <s> 'left', 'center' or 'right'
type <s> 'float', 'integer', 'password', 'text', 'textarea'
value <s> string
validate <f> remote validation
width <n> px
/**
options
arrows boolearn, if true, and type is 'float' or 'integer', display arrows
arrowStep number, step when clicking arrows
autocomplete array of possible values, or
function(key, value, callback), returns one or more values
autocompleteReplace boolean, if true, value is replaced
autocompleteReplaceCorrect boolean, if true, only valid values can be entered
autocompleteSelect boolean, if true, menu is displayed
autocompleteSelectHighlight boolean, if true, value in menu is highlighted
autocompleteSelectSubmit boolean, if true, submit input on menu selection
autocorrect string ('email', 'float', 'integer', 'phone', 'url'), or
regexp(value), or
function(key, value, blur, callback), returns value
autovalidate --remote validation--
clear boolean, if true, has clear button
disabled boolean, if true, is disabled
height integer, px (for type='textarea' and type='range' with orientation='horizontal')
id string, element id
key string, to be passed to autocomplete and autovalidate functions
max number, max value if type is 'integer' or 'float'
min number, min value if type is 'integer' or 'float'
name string, will be displayed by autovalidate function ('invalid ' + name)
overlap string, '', 'left' or 'right', will cause padding and negative margin
picker
//rangeOptions
arrows boolean, if true, display arrows
//arrowStep number, step when clicking arrows
//arrowSymbols array of two strings
max number, maximum value
min number, minimum value
orientation 'horizontal' or 'vertical'
step number, step
thumbValue boolean, if true, value is displayed on thumb, or
array of strings per value, or
function(value), returns string
thumbSize integer, px
trackGradient string, css gradient for track
trackImage string, image url, or
array of image urls
//trackStep number, 0 for 'scroll here', positive for step
trackValues boolean
serialize
textAlign 'left', 'center' or 'right'
type 'float', 'integer', 'password', 'text', 'textarea'
value string
validate function, remote validation
width integer, px
methods:
events:
change
submit
*/
change <!> input changed event
submit <!> input submit event
@*/
Ox.Input = function(options, self) {
var self = self || {},
that = new Ox.Element({}, self)

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

@ -1,13 +1,19 @@
// vim: et:ts=4:sw=4:sts=4:ft=js
/*@
Ox.InputGroup <f:Ox.Element> InputGroup Object
() -> <f> InputGroup Object
(options) -> <f> InputGroup Object
(options, self) -> <f> InputGroup Object
options <o> Options object
id <s|''> id
inputs <a|[]> inputs
separators <a|[]> seperators
width <n|0> width
self <o> shared private variable
@*/
Ox.InputGroup = function(options, self) {
/***
Ox.InputGroup
Options:
Methods:
Events:
***/
var self = self || {},
that = new Ox.Element({}, self)
.defaults({

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

@ -1,4 +1,12 @@
// vim: et:ts=4:sw=4:sts=4:ft=js
/*@
Ox.Label <f:Ox.Element> Label Object
() -> <f> Label Object
(options) -> <f> Label Object
(options, self) -> <f> Label Object
options <o> Options object
@*/
Ox.Label = function(options, self) {
var self = self || {},

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

@ -1,4 +1,13 @@
// vim: et:ts=4:sw=4:sts=4:ft=js
/*@
Ox.Picker <f:Ox.Element> Picker Object
() -> <f> Picker Object
(options) -> <f> Picker Object
(options, self) -> <f> Picker Object
options <o> Options object
@*/
Ox.Picker = function(options, self) {
var self = self || {},

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

@ -1,26 +1,29 @@
// vim: et:ts=4:sw=4:sts=4:ft=js
/*@
Ox.Range <f:Ox.Element> Range Object
() -> <f> Range Object
(options) -> <f> Range Object
(options, self) -> <f> Range Object
options <o> Options object
arrows <b> if true, show arrows
arrowStep <n> step when clicking arrows
arrowSymbols <a> arrow symbols, like ['minus', 'plus']
max <n> maximum value
min <n> minimum value
orientation <s> 'horizontal' or 'vertical'
step <n> step between values
size <n> width or height, in px
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
trackStep <n> 0 (scroll here) or step when clicking track
value <n> initial value
valueNames <a> value names to display on thumb
@*/
Ox.Range = function(options, self) {
/**
options
arrows boolean if true, show arrows
arrowStep number step when clicking arrows
arrowSymbols array arrow symbols, like ['minus', 'plus']
max number maximum value
min number minimum value
orientation string 'horizontal' or 'vertical'
step number step between values
size number width or height, in px
thumbSize number minimum width or height of thumb, in px
thumbValue boolean if true, display value on thumb
trackGradient array colors
trackImages string or array one or multiple track background image URLs
trackStep number 0 (scroll here) or step when clicking track
value number initial value
valueNames array value names to display on thumb
*/
var self = self || {},
that = new Ox.Element({}, self)
.defaults({

158
source/Ox.UI/js/List/Ox.List.js
View file

@ -1,52 +1,61 @@
// vim: et:ts=4:sw=4:sts=4:ft=js
/*@
Basic list object
(options) -> that
(options, self) -> that
options <obj> the list's options
self <obj> shared private variable
Ox.List <f:Ox.Element> List Element
() -> <f> List Object
(options) -> <f> List Object
(options, self) -> <f> List Object
options <o> Options object
centered <b|false> if true, and orientation is 'horizontal',
then keep the selected item centered
construct <f|null> (data) returns the list item HTML
draggable <b|false> true if the items can be reordered
format <[]> ???
itemHeight <n|16> item height
items <a|f|null> <a> list of items,
<f> (data) returns {items, size, ...}
(data, callback) returns [items]
itemWidth <n|16> item width
keys <a|[]> keys of the list items
max <n|-1> max number of items that can be selected
min <n|0> min number of items that must be selected
orientation <s|vertical> 'horizontal' or 'vertical'
pageLength <n|100> number of items per page
selected <a|[]> ids of the selected elements
sort <a|[]> sort order
sortable <b|false>
type <s|text>
unique <s|''> name of the key that acts as unique id
self <o> shared private variable
@*/
Ox.List = function(options, self) {
/***
basic list object
Options
centered boolean if true, and orientation is 'horizontal',
then keep the selected item centered
construct function function(data), returns the list item HTML
items function function(callback) returns {items, size, ...}
function(data, callback) returns [items]
or array of items
Methods
Events
***/
var self = self || {},
that = new Ox.Container({}, self)
.defaults({
centered: false, //@ <boo> if true, and orientation is 'horizontal',
//@ then keep the selected item centered
construct: null, //@ <fun> (data) returns the list item HTML
draggable: false, //@ <boo> true if the items can be reordered
format: [], //@ <arr> ???
itemHeight: 16, //@ <num> item height
items: null, //@ <arr> list items
//@ <fun> (data) returns {items, size, ...}
//@ (data, callback) returns [items]
itemWidth: 16, //@ <num> item width
keys: [], //@ <arr> keys of the list items
max: -1, //@ <num> max number of items that can be selected
min: 0, //@ <num> min number of items that must be selected
orientation: 'vertical', //@ <str> 'horizontal' or 'vertical'
pageLength: 100, //@ <num> number of items per page
selected: [], //@ <arr> ids of the selected elements
sort: [], //@ <arr>
sortable: false, //@ <boo>
type: 'text', //@ <str>
unique: '' //@ <str> name of the key that acts as unique id
centered: false,
construct: null,
draggable: false,
format: [],
itemHeight: 16,
items: null,
itemWidth: 16,
keys: [],
max: -1,
min: 0,
orientation: 'vertical',
pageLength: 100,
selected: [],
sort: [],
sortable: false,
type: 'text',
unique: ''
})
.options(options || {})
.scroll(scroll);
@ -265,7 +274,7 @@ Ox.List = function(options, self) {
// fixme: why does chainging fail here?
new Ox.ListItem({
construct: self.options.construct
}).appendTo($page);
}).appendTo($page);
}
//Ox.print('cEP done')
return $page;
@ -1070,7 +1079,7 @@ Ox.List = function(options, self) {
self.selected.splice(self.selected.indexOf(pos), 1);
!Ox.isUndefined(self.$items[pos]) &&
self.$items[pos].removeClass('OxSelected');
}
}
});
ids.forEach(function(id, i) {
var pos = getPositionById(id);
@ -1232,6 +1241,12 @@ Ox.List = function(options, self) {
}
};
/*@
addItems <f> add item to list
(pos, items) -> <u> add items to list at position
pos <n> position to add items
items <a> array of items ot add
@*/
that.addItems = function(pos, items) {
var $items = [],
length = items.length
@ -1268,6 +1283,11 @@ Ox.List = function(options, self) {
updatePositions();
}
/*@
editItem <f> turn item into edit form
(pos) -> <u> edit item at position
pos <n> position of item to edit
@*/
that.editItem = function(pos) {
var $input,
item = self.options.items[pos],
@ -1307,26 +1327,47 @@ Ox.List = function(options, self) {
}
}
/*@
clearCache <f> empy list cache
() -> <f> empy cache, returns List Element
@*/
that.clearCache = function() { // fixme: was used by TextList resizeColumn, now probably no longer necessary
self.$pages = [];
return that;
};
/*@
closePreview <f> close preview
() -> <f> close preview, returns List Element
@*/
that.closePreview = function() {
self.preview = false;
return that;
};
/*@
paste <f> paste data
(data) -> <f> paste data into list
data <o> paste object
@*/
that.paste = function(data) {
pasteItems(data);
return that;
};
/*@
reloadList <f> reload list contents
() -> <f> returns List Element
@*/
that.reloadList = function() {
updateQuery();
return that;
};
/*@
reloadPages <f> reload list pages
() -> <f> returns List Element
@*/
that.reloadPages = function() {
//Ox.print('---------------- list reload, page', self.page)
var page = self.page;
@ -1337,12 +1378,15 @@ Ox.List = function(options, self) {
return that;
};
/*@
removeItems <f> remove items from list
(ids) -> <u> remove items
(pos, length) -> <u> remove items
ids <a> array of item ids
pos <n> delete items starting at this position
length <n> number of items to remove
@*/
that.removeItems = function(pos, length) {
/*
removeItems(ids)
or
removeItems(pos, length)
*/
if(!length) { //pos is list of ids
pos.forEach(function(id) {
var p = getPositionById(id);
@ -1363,12 +1407,19 @@ Ox.List = function(options, self) {
updatePositions();
}
}
/*@
scrollToSelection <f> scroll list to current selection
() -> <f> returns List Element
@*/
that.scrollToSelection = function() {
self.selected.length && scrollToPosition(self.selected[0]);
return that;
};
/*@
size <f> fixme: not a good function name
() -> <f> returns List Element
@*/
that.size = function() { // fixme: not a good function name
if (self.options.orientation == 'both') {
var rowLength = getRowLength(),
@ -1404,6 +1455,12 @@ Ox.List = function(options, self) {
return that;
}
/*@
sortList <f> sort list
(key, operator) -> <f> returns List Element
key <s> key to sort list by
operator <s> +/- sort ascending or descending
@*/
that.sortList = function(key, operator) {
Ox.print('sortList', key, operator)
if (key != self.options.sort[0].key || operator != self.options.sort[0].operator) {
@ -1414,6 +1471,15 @@ Ox.List = function(options, self) {
return that;
}
/*@
value <f> get/set list value
(id, key, value) -> <f> sets value, returns List Element
(id, key) -> <a> returns value
(id) -> <o> returns all values of id
id <s> id of item
key <s> key if item property
value <s> value, can be whatever that property is
@*/
that.value = function(id, key, value) {
var pos = getPositionById(id),
$item = self.$items[pos],

8
source/Ox.UI/js/List/Ox.ListPage.js
View file

@ -1,4 +1,12 @@
// vim: et:ts=4:sw=4:sts=4:ft=js
/*@
Ox.ListPage <f:Ox.Element> ListPage Object
() -> <f> ListPage Object
(options) -> <f> ListPage Object
(options, self) -> <f> ListPage Object
options <o> Options object
self <o> shared private variable
@*/
Ox.ListPage = function(options, self) {
var self = self || {},
that = new Ox.Element({}, self)

9
source/Ox.UI/js/List/Ox.TextList.js
View file

@ -1,4 +1,13 @@
// vim: et:ts=4:sw=4:sts=4:ft=js
/*@
Ox.TextList <f:Ox.Element> TextList Object
() -> <f> TextList Object
(options) -> <f> TextList Object
(options, self) -> <f> TextList Object
options <o> Options object
self <o> shared private variable
@*/
Ox.TextList = function(options, self) {
// fixme: rename to TableList

16
source/Ox.UI/js/List/Ox.TreeList.js
View file

@ -1,4 +1,20 @@
// vim: et:ts=4:sw=4:sts=4:ft=js
/*@
Ox.TreeList <f:Ox.Element> TreeList Object
() -> <f> TreeList Object
(options) -> <f> TreeList Object
(options, self) -> <f> TreeList Object
options <o> Options object
data <f|null> data to be parsed to items, needs documentation
items <a|[]> array of items
max <n|-1> maximum number of items that can be selected, -1 unlimited
min <n|0> minimum number of items that have to be selected
selected <a|[]> selected ids
width <n|256> list width
self <o> shared private variable
@*/
Ox.TreeList = function(options, self) {
// fixme: expanding the last item should cause some scroll

10
source/Ox.UI/js/Map/Ox.ListMap.js
View file

@ -1,4 +1,14 @@
// vim: et:ts=4:sw=4:sts=4:ft=js
/*@
Ox.ListMap <f:Ox.Element> ListMap Object
() -> <f> ListMap Object
(options) -> <f> ListMap Object
(options, self) -> <f> ListMap Object
options <o> Options object
self <o> shared private variable
@*/
Ox.ListMap = function(options, self) {
var self = self || {},

10
source/Ox.UI/js/Map/Ox.MapImage.js
View file

@ -1,4 +1,14 @@
// vim: et:ts=4:sw=4:sts=4:ft=js
/*@
Ox.MapImage <f:Ox.Element> MapImage Object
() -> <f> MapImage Object
(options) -> <f> MapImage Object
(options, self) -> <f> MapImage Object
options <o> Options object
self <o> shared private variable
@*/
Ox.MapImage = function(options, self) {
/**

15
source/Ox.UI/js/Menu/Ox.MainMenu.js
View file

@ -1,6 +1,17 @@
// vim: et:ts=4:sw=4:sts=4:ft=js
/**
*/
/*@
Ox.MainMenu <f:Ox.Bar> MainMenu Object
() -> <f> MainMenu Object
(options) -> <f> MainMenu Object
(options, self) -> <f> MainMenu Object
options <o> Options object
extras <a> []
menus <a> []
size <s> medium
self <o> shared private variable
@*/
Ox.MainMenu = function(options, self) {
var self = self || {},

83
source/Ox.UI/js/Menu/Ox.Menu.js
View file

@ -1,24 +1,31 @@
// vim: et:ts=4:sw=4:sts=4:ft=js
/**
options
element the element the menu is attached to
id the menu id
items array of menu items
mainmenu the main menu this menu is part of, if any
offset offset of the menu, in px
parent the supermenu, if any
selected the position of the selected item
side open to 'bottom' or 'right'
size 'large', 'medium' or 'small'
/*@
Ox.Menu <f:Ox.Element> Menu Object
() -> <f> Menu Object
(options) -> <f> Menu Object
(options, self) -> <f> Menu Object
options <o> Options object
element <o> the element the menu is attached to
id <s> the menu id
items <a> array of menu items
mainmenu <o> the main menu this menu is part of, if any
offset <o> offset of the menu, in px
left <n> left
top <n> top
parent <o> the supermenu, if any
selected <b> the position of the selected item
side <s> open to 'bottom' or 'right'
size <s> 'large', 'medium' or 'small'
self <o> shared private variable
change_groupId <!> {id, value} checked item of a group has changed
click_itemId <!> item not belonging to a group was clicked
click_menuId <!> {id, value} item not belonging to a group was clicked
deselect_menuId <!> {id, value} item was deselected not needed, not implemented
hide_menuId <!> menu was hidden
select_menuId <!> {id, value} item was selected
@*/
events:
change_groupId {id, value} checked item of a group has changed
click_itemId item not belonging to a group was clicked
click_menuId {id, value} item not belonging to a group was clicked
deselect_menuId {id, value} item was deselected not needed, not implemented
hide_menuId menu was hidden
select_menuId {id, value} item was selected
*/
Ox.Menu = function(options, self) {
Ox.print(options)
var self = self || {},
@ -524,18 +531,30 @@ Ox.print(options)
}
}
/*@
addItem <f>
@*/
that.addItem = function(item, position) {
};
/*@
addItemAfter <f>
@*/
that.addItemAfter = function(item, id) {
};
/*@
addItemBefore <f>
@*/
that.addItemBefore = function(item, id) {
};
/*@
checkItem <f>
@*/
that.checkItem = function(id) {
var item = that.getItem(id);
if (item.options('group')) {
@ -553,6 +572,9 @@ Ox.print(options)
}
};
/*@
getItem <f>
@*/
that.getItem = function(id) {
//Ox.print('id', id)
var ids = id.split('_'),
@ -576,6 +598,9 @@ Ox.print(options)
return item;
};
/*@
getSubmenu <f>
@*/
that.getSubmenu = function(id) {
var ids = id.split('_'),
submenu;
@ -588,6 +613,9 @@ Ox.print(options)
return submenu;
}
/*@
hasEnabledItems <f>
@*/
that.hasEnabledItems = function() {
var ret = false;
Ox.forEach(that.items, function(item) {
@ -598,6 +626,10 @@ Ox.print(options)
return ret;
};
/*@
hideMenu <f>
() -> <f> Menu Object
@*/
that.hideMenu = function() {
if (that.is(':hidden')) {
return;
@ -625,14 +657,24 @@ Ox.print(options)
return that;
};
/*@
removeItem <f>
@*/
that.removeItem = function() {
};
/*@
selectFirstItem <f>
@*/
that.selectFirstItem = function() {
selectNextItem();
};
/*@
showMenu <f>
() -> <f> Menu Object
@*/
that.showMenu = function() {
if (!that.is(':hidden')) {
return;
@ -679,6 +721,9 @@ Ox.print(options)
//that.triggerEvent('show');
};
/*@
toggelMenu <f>
@*/
that.toggleMenu = function() {
that.is(':hidden') ? that.showMenu() : that.hideMenu();
};

9
source/Ox.UI/js/Menu/Ox.MenuItem.js
View file

@ -1,4 +1,13 @@
// vim: et:ts=4:sw=4:sts=4:ft=js
/*@
Ox.MenuItem <f:Ox.Element> MenuItem Object
() -> <f> MenuItem Object
(options) -> <f> MenuItem Object
(options, self) -> <f> MenuItem Object
options <o> Options object
self <o> shared private variable
@*/
Ox.MenuItem = function(options, self) {
var self = self || {},

12
source/Ox.UI/js/Panel/Ox.CollapsePanel.js
View file

@ -1,6 +1,14 @@
// vim: et:ts=4:sw=4:sts=4:ft=js
/**
*/
/*@
Ox.CollapsePanel <f:Ox.Element> CollapsePanel Object
() -> <f> CollapsePanel Object
(options) -> <f> CollapsePanel Object
(options, self) -> <f> CollapsePanel Object
options <o> Options object
self <o> shared private variable
@*/
Ox.CollapsePanel = function(options, self) {
var self = self || {},
that = new Ox.Panel({}, self)

12
source/Ox.UI/js/Panel/Ox.Panel.js
View file

@ -1,6 +1,14 @@
// vim: et:ts=4:sw=4:sts=4:ft=js
/**
*/
/*@
Ox.Panel <f:Ox.Element> Panel Object
() -> <f> Panel Object
(options) -> <f> Panel Object
(options, self) -> <f> Panel Object
options <o> Options object
self <o> shared private variable
@*/
Ox.Panel = function(options, self) {
var self = self || {},
that = new Ox.Element({}, self)

11
source/Ox.UI/js/Panel/Ox.SplitPanel.js
View file

@ -1,4 +1,15 @@
// vim: et:ts=4:sw=4:sts=4:ft=js
/*@
Ox.SplitPanel <f:Ox.Element> SpliPanel Object
() -> <f> SpliPanel Object
(options) -> <f> SpliPanel Object
(options, self) -> <f> SpliPanel Object
options <o> Options object
self <o> shared private variable
resize <!> resize
toggle <!> toggle
@*/
/**
options:
elements: [{ array of one, two or three elements

10
source/Ox.UI/js/Video/Ox.AnnotationPanel.js
View file

@ -1,4 +1,14 @@
// vim: et:ts=4:sw=4:sts=4:ft=js
/*@
Ox.AnnotationPanel <f:Ox.Element> AnnotationPanel Object
() -> <f> AnnotationPanel Object
(options) -> <f> AnnotationPanel Object
(options, self) -> <f> AnnotationPanel Object
options <o> Options object
self <o> shared private variable
@*/
Ox.AnnotationPanel = function(options, self) {
var self = self || {},

10
source/Ox.UI/js/Video/Ox.BlockTimeline.js
View file

@ -1,4 +1,14 @@
// vim: et:ts=4:sw=4:sts=4:ft=js
/*@
Ox.BlockTimeline <f:Ox.Element> BlockTimeline Object
() -> <f> BlockTimeline Object
(options) -> <f> BlockTimeline Object
(options, self) -> <f> BlockTimeline Object
options <o> Options object
self <o> shared private variable
@*/
Ox.BlockTimeline = function(options, self) {
var self = self || {},

10
source/Ox.UI/js/Video/Ox.LargeTimeline.js
View file

@ -1,4 +1,14 @@
// vim: et:ts=4:sw=4:sts=4:ft=js
/*@
Ox.LargeTimeline <f:Ox.Element> LargeTimeline Object
() -> <f> LargeTimeline Object
(options) -> <f> LargeTimeline Object
(options, self) -> <f> LargeTimeline Object
options <o> Options object
self <o> shared private variable
@*/
Ox.LargeTimeline = function(options, self) {
var self = self || {},

10
source/Ox.UI/js/Video/Ox.SmallTimeline.js
View file

@ -1,4 +1,14 @@
// vim: et:ts=4:sw=4:sts=4:ft=js
/*@
Ox.SmallTimeline <f:Ox.Element> SmallTimeline Object
() -> <f> SmallTimeline Object
(options) -> <f> SmallTimeline Object
(options, self) -> <f> SmallTimeline Object
options <o> Options object
self <o> shared private variable
@*/
Ox.SmallTimeline = function(options, self) {
var self = self || {},

10
source/Ox.UI/js/Video/Ox.VideoEditor.js
View file

@ -1,4 +1,14 @@
// vim: et:ts=4:sw=4:sts=4:ft=js
/*@
Ox.VideoEditor <f:Ox.Element> VideoEditor Object
() -> <f> VideoEditor Object
(options) -> <f> VideoEditor Object
(options, self) -> <f> VideoEditor Object
options <o> Options object
self <o> shared private variable
@*/
Ox.VideoEditor = function(options, self) {
var self = self || {},

9
source/Ox.UI/js/Video/Ox.VideoEditorPlayer.js
View file

@ -1,5 +1,14 @@
// vim: et:ts=4:sw=4:sts=4:ft=js
/*@
Ox.VideoEditorPlayer <f:Ox.Element> VideoEditorPlayer Object
() -> <f> VideoEditorPlayer Object
(options) -> <f> VideoEditorPlayer Object
(options, self) -> <f> VideoEditorPlayer Object
options <o> Options object
self <o> shared private variable
@*/
Ox.VideoEditorPlayer = function(options, self) {
var self = self || {},

10
source/Ox.UI/js/Video/Ox.VideoPanelPlayer.js
View file

@ -1,4 +1,14 @@
// vim: et:ts=4:sw=4:sts=4:ft=js
/*@
Ox.VideoPanelPlayer <f:Ox.Element> VideoPanelPlayer Object
() -> <f> VideoPanelPlayer Object
(options) -> <f> VideoPanelPlayer Object
(options, self) -> <f> VideoPanelPlayer Object
options <o> Options object
self <o> shared private variable
@*/
Ox.VideoPanelPlayer = function(options, self) {
var self = self || {},

10
source/Ox.UI/js/Window/Ox.Dialog.js
View file

@ -1,4 +1,14 @@
// vim: et:ts=4:sw=4:sts=4:ft=js
/*@
Ox.Dialog <f:Ox.Element> Dialog Object
() -> <f> Dialog Object
(options) -> <f> Dialog Object
(options, self) -> <f> Dialog Object
options <o> Options object
self <o> shared private variable
@*/
Ox.Dialog = function(options, self) {
// fixme: dialog should be derived from a generic draggable

10
source/Ox.UI/js/Window/Ox.Tooltip.js
View file

@ -1,4 +1,14 @@
// vim: et:ts=4:sw=4:sts=4:ft=js
/*@
Ox.Tooltip <f:Ox.Element> Tooltip Object
() -> <f> Tooltip Object
(options) -> <f> Tooltip Object
(options, self) -> <f> Tooltip Object
options <o> Options object
self <o> shared private variable
@*/
Ox.Tooltip = function(options, self) {
var self = self || {},

14
source/Ox.UI/js/Window/Ox.Window.js
View file

@ -1,4 +1,18 @@
// vim: et:ts=4:sw=4:sts=4:ft=js
/*@
Ox.Window <f:Ox.Element> Window object
() -> <f> Window object
(options) -> <f> Window object
(options, self) -> <f> Window object
options <o> Options object
draggable <b|true> is window draggable
fullscreenable <b|true> fixme: silly name
height <n|225> height
resizeable <b|true> resizeable
scaleable <b|true> sccaleable
width <n|400> width
self <o> Shared private variable
@*/
Ox.Window = function(options, self) {
self = self || {},