forked from 0x2620/oxjs
improving listmap
This commit is contained in:
rolux
parent
c86c7d598d
commit
5915acd72c
12 changed files with 152 additions and 39 deletions
|
|
@ -131,7 +131,12 @@ Ox.ArrayInput = function(options, self) {
|
|||
}
|
||||
|
||||
self.setOption = function(key, value) {
|
||||
if (key == 'width') {
|
||||
if (key == 'value') {
|
||||
return Ox.map(self.$input, function($input) {
|
||||
var value = $input.value();
|
||||
return value === '' ? null : value;
|
||||
});
|
||||
} else if (key == 'width') {
|
||||
setWidths();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@ Ox.Form = function(options, self) {
|
|||
});
|
||||
});
|
||||
|
||||
function getItemPositionById(id) {
|
||||
function getItemIndexById(id) {
|
||||
return self.itemIds.indexOf(id);
|
||||
}
|
||||
|
||||
|
|
@ -121,8 +121,10 @@ Ox.Form = function(options, self) {
|
|||
//Ox.print('VALUES', values)
|
||||
return values;
|
||||
} else {
|
||||
Ox.each(arguments[0], function(val, key) {
|
||||
|
||||
Ox.forEach(arguments[0], function(value, key) {
|
||||
var index = getItemIndexById(key);
|
||||
index > -1 && Ox.print(key, value)
|
||||
index > -1 && self.options.items[index].options({value: value});
|
||||
});
|
||||
return that;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -789,8 +789,10 @@ Ox.Input = function(options, self) {
|
|||
} else if (key == 'placeholder') {
|
||||
setPlaceholder();
|
||||
} else if (key == 'value') {
|
||||
val = self.$input.val(); // fixme: ??
|
||||
self.$input.val(value);
|
||||
if (self.options.type == 'float' && self.options.decimals) {
|
||||
self.options.value = self.options.value.toFixed(self.options.decimals);
|
||||
}
|
||||
self.$input.val(self.options.value);
|
||||
setPlaceholder();
|
||||
} else if (key == 'width') {
|
||||
that.css({width: self.options.width + 'px'});
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ Ox.Select = function(options, self) {
|
|||
// fixme: selected item needs attribute "checked", not "selected" ... that's strange
|
||||
var self = self || {},
|
||||
that = new Ox.Element({
|
||||
tooltip: options.tooltip || {}
|
||||
tooltip: options.tooltip || ''
|
||||
}, self) // fixme: do we use 'div', or {}, or '', by default?
|
||||
.defaults({
|
||||
id: '',
|
||||
|
|
|
|||
|
|
@ -275,22 +275,32 @@ Ox.ListMap = function(options, self) {
|
|||
values: [],
|
||||
width: 240
|
||||
}),
|
||||
], ['Latitude', 'Longitude', 'South', 'West', 'North', 'East'].map(function(v) {
|
||||
var key = (
|
||||
], ['South', 'West', 'North', 'East', 'Latitude', 'Longitude'].map(function(v) {
|
||||
var id = (
|
||||
v == 'Latitude' ? 'lat' : v == 'Longitude' ? 'lng' : v
|
||||
).toLowerCase(),
|
||||
max = ['Latitude', 'South', 'North'].indexOf(v) > -1 ? Ox.MAX_LATITUDE : 180;
|
||||
return Ox.Input({
|
||||
decimals: 8,
|
||||
disabled: ['Latitude', 'Longitude'].indexOf(v) > -1,
|
||||
id: id,
|
||||
label: v,
|
||||
labelWidth: 80,
|
||||
min: -max,
|
||||
max: max,
|
||||
type: 'float',
|
||||
value: self.options.places[0][key].toFixed(8),
|
||||
width: 240
|
||||
});
|
||||
}));
|
||||
}), [
|
||||
Ox.Input({
|
||||
disabled: true,
|
||||
id: 'size',
|
||||
label: 'Size',
|
||||
labelWidth: 80,
|
||||
textAlign: 'right',
|
||||
width: 240
|
||||
})
|
||||
]);
|
||||
|
||||
self.$placeForm = Ox.Form({
|
||||
items: self.$placeFormItems,
|
||||
|
|
@ -348,7 +358,7 @@ Ox.ListMap = function(options, self) {
|
|||
findPlaceholder: 'Find on Map',
|
||||
height: self.options.height,
|
||||
places: places,
|
||||
//statusbar: true,
|
||||
statusbar: true,
|
||||
toolbar: true,
|
||||
width: self.options.width - 514,//self.mapResize[1],
|
||||
zoombar: true
|
||||
|
|
@ -357,6 +367,11 @@ Ox.ListMap = function(options, self) {
|
|||
addplace: function(event, data) {
|
||||
that.triggerEvent('addplace', data);
|
||||
},
|
||||
changeplace: function(event, data) {
|
||||
self.$placeForm.values(Ox.map(data, function(val, key) {
|
||||
return key == 'size' ? Ox.formatArea(val) : val;
|
||||
}));
|
||||
},
|
||||
geocode: function(event, data) {
|
||||
that.triggerEvent('geocode', data);
|
||||
},
|
||||
|
|
@ -409,7 +424,17 @@ Ox.ListMap = function(options, self) {
|
|||
}
|
||||
],
|
||||
orientation: 'vertical'
|
||||
})
|
||||
.bindEvent({
|
||||
// fixme: pass width through form
|
||||
resize: function(foo, size) {
|
||||
self.$placeFormItems.forEach(function($item) {
|
||||
$item.options({width: size - 16});
|
||||
});
|
||||
}
|
||||
}),
|
||||
resizable: true,
|
||||
resize: [128, 256, 384],
|
||||
size: 256
|
||||
}
|
||||
],
|
||||
|
|
@ -445,6 +470,9 @@ Ox.ListMap = function(options, self) {
|
|||
data.id && data.id[0] != '_' && self.$list.options({
|
||||
selected: data.id ? [data.id] : []
|
||||
});
|
||||
self.$placeForm.values(Ox.map(data, function(val, key) {
|
||||
return key == 'size' ? Ox.formatArea(val) : val;
|
||||
}));
|
||||
}
|
||||
|
||||
function toFixed(val) {
|
||||
|
|
|
|||
|
|
@ -15,7 +15,6 @@ Ox.Map <function> Basic map object
|
|||
clickable <b|false> If true, clicking on the map finds a place
|
||||
editable <b|false> If true, places are editable
|
||||
findPlaceholder <s|"Find"> Placeholder text for the find input element
|
||||
labels <b|false> If true, show labels on the map
|
||||
markers <n|100> Maximum number of markers to be displayed
|
||||
places <[o]|[]> Array of place objects
|
||||
countryCode <s> ISO 3166 country code
|
||||
|
|
@ -32,6 +31,8 @@ Ox.Map <function> Basic map object
|
|||
type <s> Type (like "city" or "country")
|
||||
west <n> Longitude of the western boundary in degrees
|
||||
selected <s|""> Id of the selected place
|
||||
showControls <b|false> If true, show controls
|
||||
showLabels <b|false> If true, show labels on the map
|
||||
statusbar <b|false> If true, the map has a statusbar
|
||||
toolbar <b|false> If true, the map has a toolbar
|
||||
self <o|{}> Shared private variable
|
||||
|
|
@ -93,10 +94,11 @@ Ox.Map = function(options, self) {
|
|||
clickable: false,
|
||||
editable: false,
|
||||
findPlaceholder: 'Find',
|
||||
labels: false,
|
||||
markers: 100,
|
||||
places: [],
|
||||
selected: null,
|
||||
showControls: false,
|
||||
showLabels: false,
|
||||
statusbar: false,
|
||||
toolbar: false,
|
||||
zoombar: false
|
||||
|
|
@ -194,6 +196,21 @@ Ox.Map = function(options, self) {
|
|||
size: 24
|
||||
})
|
||||
.appendTo(that);
|
||||
self.$select = Ox.Select({
|
||||
items: [
|
||||
{id: 'new Place', title: 'New Place...', keyboard: 'n'},
|
||||
{},
|
||||
{id: 'toggleLabels', title: 'Show Labels', keyboard: 'l', checked: self.options.showLabels},
|
||||
{id: 'toggleControls', title: 'Show Controls', keyboard: 'c', checked: self.options.showControls},
|
||||
],
|
||||
min: 0,
|
||||
max: 2,
|
||||
title: 'Options...',
|
||||
width: 96
|
||||
})
|
||||
.css({float: 'left', margin: '4px'})
|
||||
.appendTo(self.$toolbar);
|
||||
/*
|
||||
self.$labelsButton = new Ox.Checkbox({
|
||||
title: 'Labels',
|
||||
width: 64
|
||||
|
|
@ -203,6 +220,7 @@ Ox.Map = function(options, self) {
|
|||
change: toggleLabels
|
||||
})
|
||||
.appendTo(self.$toolbar)
|
||||
*/
|
||||
self.$findInput = new Ox.Input({
|
||||
clear: true,
|
||||
placeholder: self.options.findPlaceholder,
|
||||
|
|
@ -314,16 +332,18 @@ Ox.Map = function(options, self) {
|
|||
top: '24px',
|
||||
})
|
||||
};
|
||||
Ox.forEach(self.$navigationButtons, function($button) {
|
||||
$button.attr({
|
||||
src: $button.attr('src').replace('/classic/', '/modern/')
|
||||
});
|
||||
});
|
||||
|
||||
self.$scaleLabel = new Ox.Label({
|
||||
textAlign: 'center',
|
||||
title: '...'
|
||||
})
|
||||
.addClass('OxMapLabel')
|
||||
.css({
|
||||
right: '4px',
|
||||
top: '4px'
|
||||
});
|
||||
.css({right: '4px', top: '4px'});
|
||||
|
||||
if (!window.googleCallback) {
|
||||
window.googleCallback = function() {
|
||||
|
|
@ -490,7 +510,7 @@ Ox.Map = function(options, self) {
|
|||
}
|
||||
|
||||
function getMapType() {
|
||||
return self.options.labels ? 'HYBRID' : 'SATELLITE'
|
||||
return self.options.showLabels ? 'HYBRID' : 'SATELLITE'
|
||||
}
|
||||
|
||||
function getMaxZoom(point, callback) {
|
||||
|
|
@ -892,7 +912,7 @@ Ox.Map = function(options, self) {
|
|||
}
|
||||
|
||||
function toggleLabels() {
|
||||
self.options.labels = !self.options.labels
|
||||
self.options.showLabels = !self.options.showLabels
|
||||
Ox.print('toggle', getMapType())
|
||||
self.map.setMapTypeId(google.maps.MapTypeId[getMapType()]);
|
||||
/*
|
||||
|
|
|
|||
|
|
@ -186,6 +186,7 @@ Ox.MapPlace = function(options) {
|
|||
@*/
|
||||
that.update = function() {
|
||||
update();
|
||||
that.map.triggerEvent('changeplace', that);
|
||||
return that;
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue