sanj/oxjs
1
0
Fork 0
forked from 0x2620/oxjs
Code Pull requests Activity

add Ox.ArrayInput, more Ox.ListMap UI

Browse source
This commit is contained in:
rolux 2011-05-21 19:56:15 +02:00
commit 6a33b9cb97
8 changed files with 381 additions and 101 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -5,7 +5,7 @@ Ox.Input <f:Ox.Element> 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
arrows <b> if true, and type is 'float' or 'int', 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
@ -14,7 +14,7 @@ Ox.Input <f:Ox.Element> Input Element
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
autocorrect <s|r|f|null> ('email', 'float', 'int', 'phone', 'url'), or
<r> regexp(value), or
<f> function(key, value, blur, callback), returns value
autovalidate <f> --remote validation--
@ -24,8 +24,8 @@ Ox.Input <f:Ox.Element> Input Element
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'
max <n> max value if type is 'int' or 'float'
min <n> min value if type is 'int' 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
@ -48,7 +48,7 @@ Ox.Input <f:Ox.Element> Input Element
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'
type <s> 'float', 'int', 'password', 'text', 'textarea'
value <s> string
validate <f> remote validation
width <n> px
@ -74,10 +74,11 @@ Ox.Input = function(options, self) {
autovalidate: null,
changeOnKeypress: false,
clear: false,
decimals: 0,
disabled: false,
key: '',
min: 0,
max: 100,
min: -Infinity,
max: Infinity,
label: '',
labelWidth: 64,
overlap: 'none',
@ -97,6 +98,7 @@ Ox.Input = function(options, self) {
' OxOverlap' + Ox.toTitleCase(self.options.overlap) : ''
)*/
)
.css({width: self.options.width + 'px'})
.bindEvent($.extend(self.options.type == 'textarea' ? {} : {
key_enter: submit
}, {
@ -114,15 +116,17 @@ Ox.Input = function(options, self) {
}
// fixme: set to min, not 0
// fixme: validate self.options.value !
if (self.options.type == 'float') {
self.decimals = Ox.repeat('0', self.options.decimals || 1)
$.extend(self.options, {
autovalidate: 'float',
textAlign: 'right',
value: self.options.value || '0.0'
value: self.options.value || '0.' + self.decimals
});
} else if (self.options.type == 'integer') {
} else if (self.options.type == 'int') {
$.extend(self.options, {
autovalidate: 'integer',
autovalidate: 'int',
textAlign: 'right',
value: self.options.value || '0'
});
@ -176,7 +180,8 @@ Ox.Input = function(options, self) {
}
$.extend(self, {
bindKeyboard: self.options.autocomplete || self.options.autovalidate || self.options.changeOnKeypress,
bindKeyboard: self.options.autocomplete || self.options.autovalidate ||
self.options.changeOnKeypress,
hasPasswordPlaceholder: self.options.type == 'password' && self.options.placeholder,
inputWidth: getInputWidth()
});
@ -449,48 +454,57 @@ Ox.Input = function(options, self) {
function autovalidateTypeFunction(type, value) {
// fixme: remove trailing zeroes on blur
// /(^\-?\d+\.?\d{0,8}$)/('-13000.12345678')
var cursor,
regexp = type == 'float' ? /[\d\.]/ : /\d/;
length,
regexp = type == 'float' ? new RegExp(
'(^' + (self.options.min < 0 ? '\\-?' : '') + '\\d+\\.?\\d' +
(self.options.decimals ? '{0,' + self.options.decimals + '}' : '*')
+ '$)'
) : new RegExp('(^' + (self.options.min < 0 ? '\\-?' : '') + '\\d+)');
if (type == 'float') {
if (value.indexOf('.') != value.lastIndexOf('.')) {
value = oldValue;
} else {
if (self.autovalidateFloatFlag) {
if (Ox.endsWith(value, '.')) {
value = value.substr(0, value.length - 1);
}
self.autovalidateFloatFlag = false;
}
while (value[0] == '0' && value[1] != '.') {
value = value.substr(1);
}
while (Ox.startsWith(value, '.')) {
if (Ox.startsWith(value, '..')) {
value = value.substr(1);
} else {
value = '0' + value;
}
}
if (Ox.endsWith(value, '.')) {
value += '0';
cursor = [value.length - 1, value.length];
self.autovalidateFloatFlag = true;
//Ox.print('--float--', value)
if (value === '') {
value = '0.' + self.decimals;
cursor = [0, value.length];
} else if (value == '-') {
value = '-0.' + self.decimals;
cursor = [1, value.length];
} else if (value == '.') {
value = '0.' + self.decimals;
cursor = [2, value.length];
} else if (!/\./(value)) {
value += '.' + self.decimals
cursor = [value.indexOf('.'), value.length];
} else if (/^\./(value)) {
value = '0' + value;
cursor = [2, value.length];
} else if (/\.$/(value)) {
//Ox.print('$$$$$$$$$$$')
value += self.decimals;
cursor = [value.indexOf('.') + 1, value.length];
} else if (/\./(value) && self.options.decimals) {
length = value.split('.')[1].length;
if (length > self.options.decimals) {
value = value.substr(0, value.indexOf('.') + 1 + self.options.decimals);
cursor = [oldCursor[0] + 1, oldCursor[1] + 1];
} else if (length < self.options.decimals) {
value += Ox.repeat('0', self.options.decimals - length);
cursor = [value.indexOf('.') + 1 + length, value.length];
}
}
}
value = $.map(value.split(''), function(v) {
return regexp(v) ? v : null;
}).join('');
if (type == 'integer') {
while (value.length > 1 && Ox.startsWith(value, '0')) {
value = value.substr(1);
} else {
if (value === '') {
value = '0';
cursor = [0, 1];
}
}
if (value === '') {
value = type == 'float' ? '0.0' : '0';
cursor = [0, value.length];
} else if (value > self.options.max) {
while (/^0\d/(value)) {
value = value.substr(1, value.length);
}
if (!regexp.test(value) || value < self.options.min || value > self.options.max) {
value = oldValue;
cursor = oldCursor;
}
autovalidateCallback(value, cursor);
}
@ -549,8 +563,8 @@ Ox.Input = function(options, self) {
self.options.placeholder && setPlaceholder();
self.options.validate && validate();
if (self.bindKeyboard) {
Ox.UI.$document.unbind('keydown', keypress);
Ox.UI.$document.unbind('keypress', keypress);
Ox.UI.$document.unbind('keydown', keydown);
//Ox.UI.$document.unbind('keypress', keypress);
}
that.triggerEvent('blur');
}
@ -572,7 +586,7 @@ Ox.Input = function(options, self) {
var value = '';
if (self.options.type == 'float') {
value = '0.0';
} else if (self.options.type == 'integer') {
} else if (self.options.type == 'int') {
value = '0'
}
self.$input.val(value);
@ -615,7 +629,7 @@ Ox.Input = function(options, self) {
function deselectMenu() {
return;
Ox.print('deselectMenu')
//Ox.print('deselectMenu')
self.options.value = self.oldValue;
self.$input.val(self.options.value);
cursor(self.oldCursor);
@ -636,8 +650,8 @@ Ox.Input = function(options, self) {
if (self.bindKeyboard) {
//Ox.print('binding...')
// fixme: different in webkit and firefox (?), see keyboard handler, need generic function
Ox.UI.$document.keydown(keypress);
Ox.UI.$document.keypress(keypress);
Ox.UI.$document.keydown(keydown);
//Ox.UI.$document.keypress(keypress);
self.options.autocompleteSelect && setTimeout(autocomplete, 0); // fixme: why is the timeout needed?
}
that.triggerEvent('focus');
@ -651,7 +665,7 @@ Ox.Input = function(options, self) {
(self.options.style == 'rounded' ? 14 : 6);
}
function keypress(event) {
function keydown(event) {
var oldCursor = cursor(),
oldValue = self.options.value,
newValue = oldValue.substr(0, oldCursor[0] - 1),
@ -664,7 +678,8 @@ Ox.Input = function(options, self) {
) { // fixme: can't 13 and 27 return false?
setTimeout(function() { // wait for val to be set
var value = self.$input.val();
if (self.options.autocompleteReplace && hasDeletedSelectedEnd) {
if ((self.options.autocompleteReplace || self.options.decimals) && hasDeletedSelectedEnd) {
//Ox.print('HAS DELETED SELECTED END', event.keyCode)
value = newValue;
self.$input.val(value);
}
@ -697,7 +712,7 @@ Ox.Input = function(options, self) {
function selectMenu(event, data) {
var pos = cursor();
//if (self.options.value) {
Ox.print('selectMenu', pos, data.title)
//Ox.print('selectMenu', pos, data.title)
self.options.value = data.title
self.$input.val(self.options.value);
cursor(pos[0], self.options.value.length);
@ -778,6 +793,7 @@ Ox.Input = function(options, self) {
self.$input.val(value);
setPlaceholder();
} else if (key == 'width') {
that.css({width: self.options.width + 'px'});
inputWidth = getInputWidth();
self.$input.css({
width: inputWidth + 'px'
@ -1535,8 +1551,8 @@ Ox.InputElement_ = function(options, self) {
}
}
if (self.bindKeyboard) {
Ox.UI.$document.unbind('keydown', keypress);
Ox.UI.$document.unbind('keypress', keypress);
Ox.UI.$document.unbind('keydown', keydown);
//Ox.UI.$document.unbind('keypress', keypress);
}
}
@ -1585,14 +1601,13 @@ Ox.InputElement_ = function(options, self) {
}
if (self.bindKeyboard) {
// fixme: different in webkit and firefox (?), see keyboard handler, need generic function
Ox.UI.$document.keydown(keypress);
Ox.UI.$document.keypress(keypress);
Ox.UI.$document.keydown(keydown);
//Ox.print('calling autosuggest...')
self.options.autosuggest && setTimeout(autosuggestCall, 0); // fixme: why is the timeout needed?
}
}
function keypress(event) {
function keydown(event) {
//Ox.print('keyCode', event.keyCode)
if (event.keyCode != 9 && event.keyCode != 13 && event.keyCode != 27) { // fixme: can't 13 and 27 return false?
setTimeout(function() { // fixme: document what this timeout is for