From c5408a6656bd3a70eafbcf6def3d38545f587fd7 Mon Sep 17 00:00:00 2001
From: rolux <rolux@rolux.org>
Date: Thu, 12 May 2011 06:15:01 +0200
Subject: [PATCH] make (almost all of) form demo work again

---
 demos/form2/css/form.css                    |  2 +-
 demos/form2/index.html                      |  5 +----
 demos/form2/js/form.js                      | 17 ++++++++++-------
 source/Ox.UI/css/Ox.UI.css                  |  8 ++++----
 source/Ox.UI/js/Core/Ox.Keyboard.js         |  6 ++++--
 source/Ox.UI/js/Form/Ox.Input.js            |  4 ++--
 source/Ox.UI/js/Form/Ox.PlacePicker.js      |  4 +++-
 source/Ox.UI/js/Map/Ox.Map.js               |  4 ++--
 source/Ox.UI/js/Menu/Ox.Menu.js             |  4 ++--
 source/Ox.UI/themes/classic/css/classic.css |  7 +++++++
 source/Ox.js                                |  2 +-
 11 files changed, 37 insertions(+), 26 deletions(-)

diff --git a/demos/form2/css/form.css b/demos/form2/css/form.css
index 46b657bf..9beb0360 100644
--- a/demos/form2/css/form.css
+++ b/demos/form2/css/form.css
@@ -8,7 +8,7 @@ body {
     right: 0;
     bottom: 0;
     padding: 4px;
-    background: rgb(240, 240, 240);
+    //background: rgb(240, 240, 240);
     overflow: auto;
 }
 .margin {
diff --git a/demos/form2/index.html b/demos/form2/index.html
index e33c19a0..ff308ee6 100644
--- a/demos/form2/index.html
+++ b/demos/form2/index.html
@@ -4,10 +4,7 @@
         <title>ox.js form demo</title>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
         <link rel="stylesheet" type="text/css" href="css/form.css"/>
-        <script type="text/javascript" src="../../build/js/jquery-1.4.2.js"></script>
-        <script type="text/javascript" src="../../source/js/_/ox.data.js"></script>
-        <script type="text/javascript" src="../../build/js/Ox.js"></script>
-        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
+        <script type="text/javascript" src="../../build/Ox.js"></script>
         <script type="text/javascript" src="js/form.js"></script>
         <!--<script>
             $(function() {
diff --git a/demos/form2/js/form.js b/demos/form2/js/form.js
index 49cf7f72..f65fce84 100644
--- a/demos/form2/js/form.js
+++ b/demos/form2/js/form.js
@@ -1,4 +1,5 @@
-Ox.load('UI', function() {
+Ox.load('UI', {debug: true}, function() {
+Ox.load('Geo', function() {
 
     var $body = $("body"),
         $panel = $("<div>")
@@ -608,7 +609,7 @@ Ox.load('UI', function() {
                 },
                 {
                     options: {
-                        autocomplete: $.map(Ox.getCountries(), function(v, i) {
+                        autocomplete: $.map(Ox.COUNTRIES, function(v, i) {
                             return v.name;
                         }),
                         autocompleteReplace: true,
@@ -618,7 +619,7 @@ Ox.load('UI', function() {
                 },
                 {
                     options: {
-                        autocomplete: $.map(Ox.getCountries(), function(v, i) {
+                        autocomplete: $.map(Ox.COUNTRIES, function(v, i) {
                             return v.name;
                         }),
                         autocompleteReplace: true,
@@ -629,7 +630,7 @@ Ox.load('UI', function() {
                 },
                 {
                     options: {
-                        autocomplete: $.map(Ox.getCountries(), function(v, i) {
+                        autocomplete: $.map(Ox.COUNTRIES, function(v, i) {
                             return v.name;
                         }),
                         autocompleteSelect: true,
@@ -640,7 +641,7 @@ Ox.load('UI', function() {
                 },
                 {
                     options: {
-                        autocomplete: $.map(Ox.getCountries(), function(v, i) {
+                        autocomplete: $.map(Ox.COUNTRIES, function(v, i) {
                             return v.name;
                         }),
                         autocompleteReplace: true,
@@ -652,7 +653,7 @@ Ox.load('UI', function() {
                 },
                 {
                     options: {
-                        autocomplete: $.map(Ox.getCountries(), function(v, i) {
+                        autocomplete: $.map(Ox.COUNTRIES, function(v, i) {
                             return v.name;
                         }),
                         autocompleteReplace: true,
@@ -773,7 +774,8 @@ Ox.load('UI', function() {
                         separators: [
                             {title: "", width: 0}
                         ]
-                    }
+                    },
+                    title: 'foo'
                 },
                 {
                     options: {
@@ -1183,4 +1185,5 @@ Ox.load('UI', function() {
         })
         .appendTo($panel);
 
+});
 });
\ No newline at end of file
diff --git a/source/Ox.UI/css/Ox.UI.css b/source/Ox.UI/css/Ox.UI.css
index 420bda26..9182d11c 100644
--- a/source/Ox.UI/css/Ox.UI.css
+++ b/source/Ox.UI/css/Ox.UI.css
@@ -488,12 +488,12 @@ OxButtonGroup
     -webkit-border-bottom-right-radius: 2px;
 }
 .OxButtonGroup > .OxButton.OxTab {
-    -moz-border-radius-topleft: 4px;
-    -moz-border-radius-topright: 4px;
+    -moz-border-radius-topleft: 8px;
+    -moz-border-radius-topright: 8px;
     -moz-border-radius-bottomleft: 0;
     -moz-border-radius-bottomright: 0;
-    -webkit-border-top-left-radius: 4px;
-    -webkit-border-top-right-radius: 4px;
+    -webkit-border-top-left-radius: 8px;
+    -webkit-border-top-right-radius: 8px;
     -webkit-border-bottom-left-radius: 0;
     -webkit-border-bottom-right-radius: 0;
 }
diff --git a/source/Ox.UI/js/Core/Ox.Keyboard.js b/source/Ox.UI/js/Core/Ox.Keyboard.js
index 144465f2..b0bc70bc 100644
--- a/source/Ox.UI/js/Core/Ox.Keyboard.js
+++ b/source/Ox.UI/js/Core/Ox.Keyboard.js
@@ -60,10 +60,12 @@
         key = keyNames.join('_');
         if (focused !== null) {
             Ox.UI.elements[focused].triggerEvent('key_' + key);
-            // prevent Chrome from going back in history, or scrolling
+            // prevent Chrome fromor scrolling
+            // fixme: backspace -> history.back, blocking it doesn't work
+            // when the autocomplete menu of an input element has focus
             if (
                 [
-                    'backspace', 'down', 'left', 'right', 'space', 'up'
+                    'down', 'left', 'right', 'space', 'up'
                 ].indexOf(keyBasename) > -1 &&
                 !Ox.UI.elements[focused].hasClass('OxInput')
             ) {
diff --git a/source/Ox.UI/js/Form/Ox.Input.js b/source/Ox.UI/js/Form/Ox.Input.js
index f9b2c14e..36f276fc 100644
--- a/source/Ox.UI/js/Form/Ox.Input.js
+++ b/source/Ox.UI/js/Form/Ox.Input.js
@@ -363,8 +363,8 @@ Ox.Input = function(options, self) {
                 offset: {
                     left: 4,
                     top: 0
-                },
-                size: self.options.size
+                }
+                //size: self.options.size
             })
             .bindEvent('click', clickMenu);
         if (self.options.autocompleteReplace) {
diff --git a/source/Ox.UI/js/Form/Ox.PlacePicker.js b/source/Ox.UI/js/Form/Ox.PlacePicker.js
index e89f79e0..e2b56561 100644
--- a/source/Ox.UI/js/Form/Ox.PlacePicker.js
+++ b/source/Ox.UI/js/Form/Ox.PlacePicker.js
@@ -122,10 +122,12 @@ Ox.PlacePicker = function(options, self) {
     function showPicker() {
         if (!self.map) {
             self.$map = new Ox.Map({
+                    clickable: true,
                     id: self.options.id + 'Map',
-                    places: [self.options.value]
+                    //places: [self.options.value]
                 })
                 .css({
+                    top: '16px',
                     width: '256px',
                     height: '160px'
                 })
diff --git a/source/Ox.UI/js/Map/Ox.Map.js b/source/Ox.UI/js/Map/Ox.Map.js
index 4ca1a62f..4068eca0 100644
--- a/source/Ox.UI/js/Map/Ox.Map.js
+++ b/source/Ox.UI/js/Map/Ox.Map.js
@@ -944,10 +944,10 @@ Ox.Map = function(options, self) {
     function updateFormElements() {
         var width = that.width();
         self.$zoomInput && constructZoomInput();
-        self.$placeNameInput.options({
+        self.$placeNameInput && self.$placeNameInput.options({
             width: Math.floor((width - 112) / 2)
         });
-        self.$placeGeonameInput.options({
+        self.$placeGeonameInput && self.$placeGeonameInput.options({
             width: Math.ceil((width - 112) / 2)
         });
     }
diff --git a/source/Ox.UI/js/Menu/Ox.Menu.js b/source/Ox.UI/js/Menu/Ox.Menu.js
index ab47738a..dcf32b67 100644
--- a/source/Ox.UI/js/Menu/Ox.Menu.js
+++ b/source/Ox.UI/js/Menu/Ox.Menu.js
@@ -20,7 +20,7 @@
         select_menuId   {id, value}     item was selected
 */
 Ox.Menu = function(options, self) {
-
+Ox.print(options)
     var self = self || {},
         that = new Ox.Element({}, self)
             .defaults({
@@ -35,7 +35,7 @@ Ox.Menu = function(options, self) {
                 parent: null,
                 selected: -1,
                 side: 'bottom',
-                size: 'medium',
+                size: 'medium' // fixme: remove
             })
             .options(options || {})
             .addClass(
diff --git a/source/Ox.UI/themes/classic/css/classic.css b/source/Ox.UI/themes/classic/css/classic.css
index e82b22ac..e1752a1a 100644
--- a/source/Ox.UI/themes/classic/css/classic.css
+++ b/source/Ox.UI/themes/classic/css/classic.css
@@ -133,7 +133,14 @@ Forms
     //background: -webkit-gradient(linear, left top, left bottom, from(rgb(128, 128, 128)), color-stop(0.1, rgb(160, 160, 160)), to(rgb(192, 192, 192)));
     color: rgb(32, 32, 32);
 }
+
+.OxThemeClassic .OxButton.OxTab {
+    //background: -moz-linear-gradient(top, rgb(160, 160, 160), rgb(192, 192, 192));
+    //background: -webkit-linear-gradient(top, rgb(160, 160, 160), rgb(192, 192, 192));
+}
 .OxThemeClassic .OxButton.OxTab.OxSelected {
+    //background: -moz-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192));
+    //background: -webkit-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192));
     border-bottom: 1px solid rgb(192, 192, 192);
 }
 
diff --git a/source/Ox.js b/source/Ox.js
index 0f315d30..06980698 100644
--- a/source/Ox.js
+++ b/source/Ox.js
@@ -4076,7 +4076,7 @@ Ox.toTitleCase = function(str) {
             v = v.substr(0, 1).toUpperCase() + low;
         }
         return v;
-    }).join(" ");
+    }).join(' ');
 };
 
 /*@