Ox.load(), and adding moved files

2011-04-25 11:12:02 +02:00 · 2011-04-25 11:12:02 +02:00 · 6cfb6b7647
commit 6cfb6b7647
parent dc1ec954fb
594 changed files with 1381 additions and 19555 deletions
--- a/source/js/Ox.UI/Form/Ox.PlacePicker.js
+++ b/source/js/Ox.UI/Form/Ox.PlacePicker.js
@ -0,0 +1,143 @@
+// vim: et:ts=4:sw=4:sts=4:ft=js
+Ox.PlacePicker = function(options, self) {
+
+    var self = $.extend(self || {}, {
+            options: $.extend({
+                id: '',
+                value: 'United States'
+            }, options)
+        }),
+        that;
+
+    self.$element = new Ox.Element('div')
+        .css({
+            width: '256px',
+            height: '192px'
+        })
+        .append(
+            self.$topBar = new Ox.Bar({
+                    size: 16
+                })
+                .css({
+                    MozBorderRadius: '0 8px 0 0',
+                    WebkitBorderRadius: '0 8px 0 0'
+                })
+                .append(
+                    self.$input = new Ox.Input({
+                            clear: true,
+                            id: self.options.id + 'Input',
+                            placeholder: 'Find',
+                            width: 256
+                        })
+                        .bindEvent('submit', findPlace)
+                )
+        )
+        .append(
+            self.$container = new Ox.Element('div')
+                .css({
+                    width: '256px',
+                    height: '160px'
+                })
+        )
+        .append(
+            self.$bottomBar = new Ox.Bar({
+                    size: 16
+                })
+                .append(
+                    self.$range = new Ox.Range({
+                            arrows: true,
+                            id: self.options.id + 'Range',
+                            max: 22,
+                            size: 256,
+                            thumbSize: 32,
+                            thumbValue: true
+                        })
+                        .bindEvent('change', changeZoom)
+                )
+        );
+
+    self.$input.$element.children('input[type=text]').css({
+        width: '230px',
+        paddingLeft: '2px',
+        MozBorderRadius: '0 8px 8px 0',
+        WebkitBorderRadius: '0 8px 8px 0'
+    });
+    self.$input.$element.children('input[type=image]').css({
+        MozBorderRadius: '0 8px 0 0',
+        WebkitBorderRadius: '0 8px 0 0'
+    });
+    self.$range.$element.children('input').css({
+        MozBorderRadius: 0,
+        WebkitBorderRadius: 0
+    });
+
+    that = new Ox.Picker({
+            element: self.$element,
+            elementHeight: 192,
+            elementWidth: 256,
+            id: self.options.id,
+            overlap: self.options.overlap,
+            value: self.options.value
+        }, self)
+        .bindEvent('show', showPicker);
+
+    that.$label.bind('click', clickLabel)
+
+    self.map = false;
+
+    function changeZoom(event, data) {
+        //Ox.print('changeZoom')
+        self.$map.zoom(data.value);
+    }
+
+    function clickLabel() {
+        var name = that.$label.html();
+        if (name) {
+            self.$input.options({
+                value: name
+            })
+            .triggerEvent('submit', {
+                value: name
+            });
+        }
+    }
+
+    function findPlace(event, data) {
+        //Ox.print('findPlace', data);
+        self.$map.find(data.value, function(place) {
+            place && that.$label.html(place.geoname);
+        })
+    }
+
+    function onSelect(event, data) {
+        that.$label.html(data.geoname);
+    }
+
+    function onZoom(event, data) {
+        self.$range.options({
+            value: data.value
+        });
+    }
+
+    function showPicker() {
+        if (!self.map) {
+            self.$map = new Ox.Map({
+                    id: self.options.id + 'Map',
+                    places: [self.options.value]
+                })
+                .css({
+                    width: '256px',
+                    height: '160px'
+                })
+                .bindEvent({
+                    select: onSelect,
+                    zoom: onZoom
+                })
+                .appendTo(self.$container);
+            self.map = true;
+        }
+    }
+
+    return that;
+
+};