add Ox.Editable
This commit is contained in:
rolux
parent
f9360db0b4
commit
db4b33cf24
6 changed files with 121 additions and 48 deletions
|
|
@ -457,6 +457,7 @@ textarea.OxSquare {
|
|||
-moz-border-radius: 0;
|
||||
-webkit-border-radius: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
--------------------------------------------------------------------------------
|
||||
OxButton
|
||||
|
|
@ -551,24 +552,6 @@ OxButtonGroup
|
|||
}
|
||||
/*
|
||||
--------------------------------------------------------------------------------
|
||||
OxForm
|
||||
--------------------------------------------------------------------------------
|
||||
*/
|
||||
.OxFormItem {
|
||||
margin-top: 8px;
|
||||
}
|
||||
.OxFormItem:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.OxFormMessage {
|
||||
//width: 100%;
|
||||
height: 10px;
|
||||
margin: 2px 8px 0 0;
|
||||
text-align: right;
|
||||
display: none;
|
||||
}
|
||||
/*
|
||||
--------------------------------------------------------------------------------
|
||||
OxCheckbox
|
||||
--------------------------------------------------------------------------------
|
||||
*/
|
||||
|
|
@ -596,6 +579,24 @@ input.OxCheckbox {
|
|||
}
|
||||
/*
|
||||
--------------------------------------------------------------------------------
|
||||
OxForm
|
||||
--------------------------------------------------------------------------------
|
||||
*/
|
||||
.OxFormItem {
|
||||
margin-top: 8px;
|
||||
}
|
||||
.OxFormItem:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.OxFormMessage {
|
||||
//width: 100%;
|
||||
height: 10px;
|
||||
margin: 2px 8px 0 0;
|
||||
text-align: right;
|
||||
display: none;
|
||||
}
|
||||
/*
|
||||
--------------------------------------------------------------------------------
|
||||
OxInput
|
||||
--------------------------------------------------------------------------------
|
||||
*/
|
||||
|
|
@ -624,6 +625,25 @@ input.OxInput {
|
|||
border-style: solid;
|
||||
float: left;
|
||||
}
|
||||
/*
|
||||
--------------------------------------------------------------------------------
|
||||
OxEditable
|
||||
--------------------------------------------------------------------------------
|
||||
*/
|
||||
.OxEditable > .OxValue {
|
||||
cursor: pointer;
|
||||
padding: 0 0 0 1px;
|
||||
}
|
||||
.OxEditable div.OxInput {
|
||||
height: 14px;
|
||||
padding: 0 1px 0 0;
|
||||
}
|
||||
.OxEditable input.OxInput {
|
||||
height: 14px;
|
||||
padding: 0 1px 0 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
--------------------------------------------------------------------------------
|
||||
OxInputGroup
|
||||
|
|
|
|||
|
|
@ -47,6 +47,7 @@ Ox.Input <f:Ox.Element> Input Element
|
|||
//trackStep <n> number, 0 for 'scroll here', positive for step
|
||||
trackValues <b> boolean
|
||||
serialize <f> function used to serialize value in submit
|
||||
style <s> 'rounded' or 'square'
|
||||
textAlign <s> 'left', 'center' or 'right'
|
||||
type <s> 'float', 'int', 'password', 'text', 'textarea'
|
||||
value <s> string
|
||||
|
|
@ -76,6 +77,7 @@ Ox.Input = function(options, self) {
|
|||
clear: false,
|
||||
decimals: 0,
|
||||
disabled: false,
|
||||
height: 16,
|
||||
key: '',
|
||||
min: -Infinity,
|
||||
max: Infinity,
|
||||
|
|
@ -568,13 +570,16 @@ Ox.Input = function(options, self) {
|
|||
}
|
||||
// fixme: for some reason, if options.type is set, no change event fires
|
||||
// as a workaround, blur sends a value. remove later...
|
||||
that.triggerEvent('blur', {
|
||||
!self.cancelled && that.triggerEvent('blur', {
|
||||
value: self.options.value
|
||||
});
|
||||
}
|
||||
|
||||
function cancel() {
|
||||
self.$input.blur();
|
||||
self.cancelled = true;
|
||||
self.$input.blur().val(self.originalValue);
|
||||
self.cancelled = false;
|
||||
that.triggerEvent('cancel');
|
||||
}
|
||||
|
||||
function change() {
|
||||
|
|
@ -648,6 +653,7 @@ Ox.Input = function(options, self) {
|
|||
) {
|
||||
return;
|
||||
}
|
||||
self.originalValue = self.options.value;
|
||||
that.gainFocus();
|
||||
that.is('.OxError') && that.removeClass('OxError');
|
||||
self.options.placeholder && setPlaceholder();
|
||||
|
|
|
|||
|
|
@ -183,6 +183,7 @@ Forms
|
|||
border-bottom: 1px solid rgb(192, 192, 192);
|
||||
}
|
||||
|
||||
|
||||
.OxThemeClassic .OxFormMessage {
|
||||
color: rgb(192, 64, 64);
|
||||
}
|
||||
|
|
|
|||
17
source/Ox.js
17
source/Ox.js
|
|
@ -28,6 +28,13 @@ Some conventions:
|
|||
ret return value
|
||||
v value (of a key/value pair)
|
||||
val value (of a key/value pair)
|
||||
Indentation
|
||||
var a = 1,
|
||||
b = 2,
|
||||
c = 3;
|
||||
Obj.fn1()
|
||||
.fn2()
|
||||
.fn3();
|
||||
*/
|
||||
|
||||
// todo: check http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/
|
||||
|
|
@ -760,8 +767,8 @@ Ox.max <f> Returns the maximum value of a collection
|
|||
> Ox.max('123')
|
||||
3
|
||||
@*/
|
||||
Ox.max = function(obj) {
|
||||
return Math.max.apply(Math, Ox.values(obj));
|
||||
Ox.max = function(col) {
|
||||
return Math.max.apply(Math, Ox.values(col));
|
||||
};
|
||||
|
||||
/*@
|
||||
|
|
@ -773,8 +780,8 @@ Ox.min <f> Returns the minimum value of a collection
|
|||
> Ox.min('123')
|
||||
1
|
||||
@*/
|
||||
Ox.min = function(obj) {
|
||||
return Math.min.apply(Math, Ox.values(obj));
|
||||
Ox.min = function(col) {
|
||||
return Math.min.apply(Math, Ox.values(col));
|
||||
};
|
||||
|
||||
/*@
|
||||
|
|
@ -4594,6 +4601,8 @@ Ox.isEqual <function> Returns true if two values are equal
|
|||
false
|
||||
> Ox.isEqual(0, 0)
|
||||
true
|
||||
> Ox.isEqual({}, {})
|
||||
true
|
||||
> Ox.isEqual({a: 1, b: 2, c: 3}, {c: 3, b: 2, a: 1})
|
||||
true
|
||||
> Ox.isEqual({a: 1, b: [2, 3], c: {d: '4'}}, {a: 1, b: [2, 3], c: {d: '4'}})
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<title>Ox.js Tests</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<link rel="stylesheet" type="text/css" href="tests.css"/>
|
||||
<script type="text/javascript" src="../build/js/Ox.js"></script>
|
||||
<script type="text/javascript" src="../build/Ox.js"></script>
|
||||
<!--<script type="text/javascript" src="../build/js/ox.data.js"></script>-->
|
||||
<script type="text/javascript" src="tests.js"></script>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -14,27 +14,75 @@ Ox.load('UI', function() {
|
|||
fontSize: '16px',
|
||||
fontWeight: 'bold'
|
||||
})
|
||||
.appendTo($('body'));
|
||||
.appendTo($body);
|
||||
colors = [
|
||||
['255, 64, 64', '224, 32, 32', '240, 16, 16'],
|
||||
['64, 192, 64', '32, 160, 32', '40, 176, 48'],
|
||||
['96, 96, 255', '64, 64, 224', '80, 80, 240']
|
||||
],
|
||||
gradients = [
|
||||
'-moz-linear-gradient(',
|
||||
'-webkit-gradient(linear, '
|
||||
];
|
||||
|
||||
setBackground($tests, true);
|
||||
|
||||
tests(['../build/js/Ox.js'/*, '../build/js/ox.data.js'*/]);
|
||||
tests(['../build/Ox.js'/*, '../build/js/ox.data.js'*/]);
|
||||
|
||||
function tests() {
|
||||
var succeeded = 0, failed = 0,
|
||||
lines, spaces, command, expected, result, success,
|
||||
replace = ['', ''], fns = [], $test
|
||||
Ox.forEach(Ox.isArray(arguments[0]) ? arguments[0] : arguments, function(script, i) {
|
||||
Ox.print(script, Ox)
|
||||
Ox.test(script, function(results) {
|
||||
var tests = {};
|
||||
results.forEach(function(result) {
|
||||
tests[result.section] = tests[result.section] || {};
|
||||
tests[result.section][result.name] = tests[result.section][result.name] || [];
|
||||
tests[result.section][result.name].push(result);
|
||||
});
|
||||
Ox.print('tests', tests)
|
||||
Ox.forEach(tests, function(functions, section) {
|
||||
Ox.Bar({size: 14})
|
||||
.css({padding: '1px 0 1px 4px'})
|
||||
.html(Ox.basename(script) + ' ' + section)
|
||||
.appendTo($body);
|
||||
Ox.forEach(functions, function(arr, fn) {
|
||||
var $test = Ox.CollapsePanel({
|
||||
collapsed: true,
|
||||
title: fn + '()'
|
||||
})
|
||||
.appendTo($body);
|
||||
setBackground($test.find('.OxBar'), true);
|
||||
arr.forEach(function(test) {
|
||||
succeeded += test.success;
|
||||
failed += !test.success;
|
||||
$tests.html(
|
||||
(succeeded + failed) + ' tests, '
|
||||
+ succeeded + ' succeeded, ' + failed + ' failed'
|
||||
);
|
||||
if (!test.success) {
|
||||
setBackground($tests, false);
|
||||
setBackground($test.find('.OxBar'), false);
|
||||
}
|
||||
Ox.Element()
|
||||
.css({
|
||||
padding: '2px 0 2px 4px',
|
||||
background: 'rgb(' + colors[+test.success][2] + ')'
|
||||
})
|
||||
.html(
|
||||
'<span style="font-family: Monaco">'
|
||||
+ Ox.encodeHTML(test.statement) + ' '
|
||||
+ (test.success ? '=' : '!') + '=> '
|
||||
+ Ox.encodeHTML(test.expected)
|
||||
+ (test.success ? '' : ' ==> ' + Ox.encodeHTML(test.actual))
|
||||
+ '</tt>'
|
||||
)
|
||||
.appendTo($test.$content);
|
||||
});
|
||||
$test.$content.css({
|
||||
marginTop: -$test.$content.height() + 'px'
|
||||
});
|
||||
});
|
||||
});
|
||||
})
|
||||
/*
|
||||
$.get(script, function(data) {
|
||||
Ox.print(script, Ox)
|
||||
new Ox.Bar({size: 17})
|
||||
|
|
@ -62,10 +110,8 @@ Ox.load('UI', function() {
|
|||
result = eval(command);
|
||||
if (fn) {
|
||||
fn = fn[fn.length - 1];
|
||||
/*
|
||||
success = typeof expected == 'object' ?
|
||||
expected.toString() == result.toString() : expected === result;
|
||||
*/
|
||||
Ox.print('command:', command, 'expected:', expected, 'result:', result)
|
||||
success = Ox.isEqual(expected, result);
|
||||
succeeded += success;
|
||||
|
|
@ -84,7 +130,6 @@ Ox.load('UI', function() {
|
|||
.appendTo($body);
|
||||
setBackground($test.find('.OxBar'), true);
|
||||
}
|
||||
///*
|
||||
new Ox.Bar({size:17}) // fixme: Ox.Object() used to work
|
||||
.css({
|
||||
//padding: '2px 0 2px 8px',
|
||||
|
|
@ -97,36 +142,28 @@ Ox.load('UI', function() {
|
|||
(success ? '' : ' ==> ' + Ox.encodeHTML(JSON.stringify(result))) + '</span>'
|
||||
)
|
||||
.appendTo($test.$content);
|
||||
//*/
|
||||
// to be fixed in ui:
|
||||
// /*
|
||||
$test.$content
|
||||
.css({
|
||||
marginTop: -$test.$content.height() + 'px'
|
||||
});
|
||||
//*/
|
||||
// /*
|
||||
if (!success) {
|
||||
setBackground($test.find('.OxBar'), success);
|
||||
}
|
||||
//*/
|
||||
} else {
|
||||
replace = command.split(' = ')
|
||||
}
|
||||
}
|
||||
});
|
||||
}, 'html');
|
||||
*/
|
||||
});
|
||||
}
|
||||
|
||||
//});
|
||||
|
||||
function setBackground($element, success) {
|
||||
$.each(gradients, function(i, v) {
|
||||
['-moz-linear-gradient', '-webkit-linear-gradient'].forEach(function(v) {
|
||||
$element.css({
|
||||
background: v + 'left top, left bottom, from(rgb(' +
|
||||
colors[+success][0] + ')), to(rgb(' +
|
||||
colors[+success][1] + ')))'
|
||||
background: v + '(top, rgb(' +
|
||||
colors[+success][0] + '), rgb(' +
|
||||
colors[+success][1] + '))'
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue