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

143 lines
3.8 KiB
JavaScript

// 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;
};