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

156 lines
4.2 KiB
JavaScript
Raw Normal View History

2011-11-05 16:46:53 +00:00
'use strict';
2011-05-16 10:49:48 +00:00
/*@
2012-05-31 10:32:54 +00:00
Ox.PlacePicker <f> PlacePicker Object
([options[, self]]) -> <o:Ox.Picker> PlacePicker Object
2011-05-16 10:49:48 +00:00
options <o> Options object
id <s> element id
value <s|United States> default value of place input
self <o> shared private variable
@*/
2011-04-22 22:03:10 +00:00
Ox.PlacePicker = function(options, self) {
var that;
self = Ox.extend(self || {}, {
options: Ox.extend({
2011-04-22 22:03:10 +00:00
id: '',
value: 'United States'
}, options)
});
2011-04-22 22:03:10 +00:00
self.$element = Ox.Element()
2011-04-22 22:03:10 +00:00
.css({
width: '256px',
height: '192px'
})
.append(
self.$topBar = Ox.Bar({
2011-04-22 22:03:10 +00:00
size: 16
})
.css({
MozBorderRadius: '0 8px 0 0',
WebkitBorderRadius: '0 8px 0 0'
})
.append(
self.$input = Ox.Input({
2011-04-22 22:03:10 +00:00
clear: true,
id: self.options.id + 'Input',
placeholder: 'Find',
width: 256
})
.bindEvent('submit', findPlace)
)
)
.append(
self.$container = Ox.Element()
2011-04-22 22:03:10 +00:00
.css({
width: '256px',
height: '160px'
})
)
.append(
self.$bottomBar = Ox.Bar({
2011-04-22 22:03:10 +00:00
size: 16
})
.append(
self.$range = Ox.Range({
2011-04-22 22:03:10 +00:00
arrows: true,
2011-12-21 15:33:52 +00:00
changeOnDrag: true,
2011-04-22 22:03:10 +00:00
id: self.options.id + 'Range',
max: 22,
size: 256,
thumbSize: 32,
thumbValue: true
})
.bindEvent('change', changeZoom)
)
);
2012-05-22 13:14:40 +00:00
self.$input.children('input[type=text]').css({
2011-04-22 22:03:10 +00:00
width: '230px',
paddingLeft: '2px',
MozBorderRadius: '0 8px 8px 0',
WebkitBorderRadius: '0 8px 8px 0'
});
2012-05-22 13:14:40 +00:00
self.$input.children('input[type=image]').css({
2011-04-22 22:03:10 +00:00
MozBorderRadius: '0 8px 0 0',
WebkitBorderRadius: '0 8px 0 0'
});
2012-05-22 13:14:40 +00:00
self.$range.children('input').css({
2011-04-22 22:03:10 +00:00
MozBorderRadius: 0,
WebkitBorderRadius: 0
});
that = Ox.Picker({
2011-04-22 22:03:10 +00:00
element: self.$element,
elementHeight: 192,
elementWidth: 256,
id: self.options.id,
overlap: self.options.overlap,
value: self.options.value
}, self)
.bindEvent('show', showPicker);
2012-05-28 14:06:22 +00:00
that.$label.on('click', clickLabel);
2011-04-22 22:03:10 +00:00
self.map = false;
function changeZoom(data) {
2011-11-04 15:54:28 +00:00
//Ox.Log('Form', 'changeZoom')
2011-04-22 22:03:10 +00:00
self.$map.zoom(data.value);
}
function clickLabel() {
var name = that.$label.html();
if (name) {
2011-12-21 15:33:52 +00:00
self.$input
.value(name)
.triggerEvent('submit', {
value: name
});
2011-04-22 22:03:10 +00:00
}
}
function findPlace(data) {
2011-11-04 15:54:28 +00:00
//Ox.Log('Form', 'findPlace', data);
2011-04-22 22:03:10 +00:00
self.$map.find(data.value, function(place) {
place && that.$label.html(place.geoname);
});
2011-04-22 22:03:10 +00:00
}
function onSelect(data) {
2011-04-22 22:03:10 +00:00
that.$label.html(data.geoname);
}
function onZoom(data) {
2011-12-21 15:33:52 +00:00
self.$range.value(data.value);
2011-04-22 22:03:10 +00:00
}
function showPicker() {
if (!self.map) {
self.$map = Ox.Map({
clickable: true,
2011-04-22 22:03:10 +00:00
id: self.options.id + 'Map',
2011-11-30 14:56:01 +00:00
// fixme: this is retarded, allow for map without places
places: [{south: -85, west: -179, north: -85, east: 179}]
//places: [self.options.value]
2011-04-22 22:03:10 +00:00
})
.css({
top: '16px',
2011-04-22 22:03:10 +00:00
width: '256px',
height: '160px'
})
.bindEvent({
select: onSelect,
zoom: onZoom
})
.appendTo(self.$container);
self.map = true;
}
}
return that;
};