add Ox.Editable

source/Ox.UI/css/Ox.UI.css

@@ -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

source/Ox.UI/js/Form/Ox.Input.js

@@ -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();

source/Ox.UI/themes/classic/css/classic.css

@@ -183,6 +183,7 @@ Forms
     border-bottom: 1px solid rgb(192, 192, 192);
 }
 
+
 .OxThemeClassic .OxFormMessage {
     color: rgb(192, 64, 64);
 }

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) {
+Ox.max = function(col) {
-    return Math.max.apply(Math, Ox.values(obj));
+    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) {
+Ox.min = function(col) {
-    return Math.min.apply(Math, Ox.values(obj));
+    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'}})

tests/index.html

@@ -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>

tests/tests.js

@@ -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 ? '=' : '!') + '=&gt; '
+                                    + Ox.encodeHTML(test.expected)
+                                    + (test.success ? '' : ' ==&gt; ' + 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 ? '' : ' ==&gt; ' + 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(' +
+                background: v + '(top, rgb(' +
-                    colors[+success][0] + ')), to(rgb(' +
+                    colors[+success][0] + '), rgb(' +
-                    colors[+success][1] + ')))'
+                    colors[+success][1] + '))'
             });
         });
     }