143 lines
3.8 KiB
JavaScript
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;
|
|
|
|
};
|