oxjs/source/Ox.UI/js/Form/Ox.PlacePicker.js

// 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()
        .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()
                .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;

};