forked from 0x2620/oxjs
add Ox.ArrayInput, more Ox.ListMap UI
This commit is contained in:
rolux
parent
ce3bdb46d6
commit
6a33b9cb97
8 changed files with 381 additions and 101 deletions
|
|
@ -18,7 +18,7 @@ Ox.ListMap <f:Ox.Element> ListMap Object
|
|||
Ox.ListMap = function(options, self) {
|
||||
|
||||
var self = self || {},
|
||||
that = new Ox.Element({}, self)
|
||||
that = Ox.Element({}, self)
|
||||
.defaults({
|
||||
addPlace: null,
|
||||
height: 256,
|
||||
|
|
@ -187,13 +187,13 @@ Ox.ListMap = function(options, self) {
|
|||
}
|
||||
];
|
||||
|
||||
self.$toolbar = new Ox.Bar({
|
||||
self.$listToolbar = Ox.Bar({
|
||||
size: 24
|
||||
});
|
||||
|
||||
self.$findElement = new Ox.FormElementGroup({
|
||||
self.$findElement = Ox.FormElementGroup({
|
||||
elements: [
|
||||
self.$findSelect = new Ox.Select({
|
||||
self.$findSelect = Ox.Select({
|
||||
items: [
|
||||
{id: 'all', title: 'Find: All'},
|
||||
{id: 'name', title: 'Find: Name'},
|
||||
|
|
@ -203,16 +203,16 @@ Ox.ListMap = function(options, self) {
|
|||
overlap: 'right',
|
||||
width: 128
|
||||
}),
|
||||
self.$findInput = new Ox.Input({
|
||||
self.$findInput = Ox.Input({
|
||||
clear: true,
|
||||
width: 192
|
||||
})
|
||||
]
|
||||
})
|
||||
.css({float: 'right', margin: '4px'})
|
||||
.appendTo(self.$toolbar)
|
||||
.appendTo(self.$listToolbar)
|
||||
|
||||
self.$list = new Ox.TextList({
|
||||
self.$list = Ox.TextList({
|
||||
columns: self.columns,
|
||||
columnsRemovable: true,
|
||||
columnsVisible: true,
|
||||
|
|
@ -233,19 +233,95 @@ Ox.ListMap = function(options, self) {
|
|||
select: selectItem
|
||||
});
|
||||
|
||||
self.$statusbar = new Ox.Bar({
|
||||
size: 24
|
||||
self.$listStatusbar = Ox.Bar({
|
||||
size: 16
|
||||
});
|
||||
|
||||
self.$status = Ox.Element()
|
||||
.css({paddingTop: '2px', margin: 'auto', fontSize: '9px', textAlign: 'center'})
|
||||
.html(self.options.places.length + ' Place' + (self.options.places.length == 1 ? '' : 's'))
|
||||
.appendTo(self.$listStatusbar);
|
||||
|
||||
self.$placeToolbar = Ox.Bar({
|
||||
size: 24
|
||||
});
|
||||
|
||||
self.$newPlaceButton = Ox.Button({
|
||||
id: 'newPlace',
|
||||
title: 'New Place',
|
||||
width: 80
|
||||
})
|
||||
.css({float: 'left', margin: '4px'})
|
||||
.appendTo(self.$placeToolbar);
|
||||
|
||||
self.$placeFormItems = Ox.merge([
|
||||
Ox.Input({
|
||||
id: 'name',
|
||||
label: 'Name',
|
||||
labelWidth: 64,
|
||||
width: 240
|
||||
}),
|
||||
Ox.Input({
|
||||
id: 'geoname',
|
||||
label: 'Geoname',
|
||||
labelWidth: 64,
|
||||
width: 240
|
||||
}),
|
||||
Ox.ArrayInput({
|
||||
id: 'alternativeNames',
|
||||
label: 'Alternative Names',
|
||||
max: 10,
|
||||
//sort: true,
|
||||
values: [],
|
||||
width: 240
|
||||
}),
|
||||
], ['Latitude', 'Longitude', 'South', 'West', 'North', 'East'].map(function(v) {
|
||||
var key = (
|
||||
v == 'Latitude' ? 'lat' : v == 'Longitude' ? 'lng' : v
|
||||
).toLowerCase(),
|
||||
max = ['Latitude', 'South', 'North'].indexOf(v) > -1 ? Ox.MAX_LATITUDE : 180;
|
||||
return Ox.Input({
|
||||
decimals: 8,
|
||||
label: v,
|
||||
labelWidth: 80,
|
||||
min: -max,
|
||||
max: max,
|
||||
type: 'float',
|
||||
value: self.options.places[0][key].toFixed(8),
|
||||
width: 240
|
||||
});
|
||||
}));
|
||||
|
||||
self.$placeForm = Ox.Form({
|
||||
items: self.$placeFormItems,
|
||||
width: 240
|
||||
})
|
||||
.css({margin: '8px'});
|
||||
|
||||
self.$status = new Ox.Element()
|
||||
.css({paddingTop: '4px', margin: 'auto', textAlign: 'center'})
|
||||
.appendTo(self.$statusbar);
|
||||
self.$placeStatusbar = Ox.Bar({
|
||||
size: 16
|
||||
})
|
||||
.addClass('OxVideoPlayer'); // fixme!
|
||||
|
||||
self.$savePlaceButton = Ox.Button({
|
||||
disabled: true,
|
||||
id: 'savePlace',
|
||||
title: 'check',
|
||||
style: 'symbol',
|
||||
tooltip: 'Save Place',
|
||||
type: 'image',
|
||||
//width: 80
|
||||
})
|
||||
.css({float: 'right'})
|
||||
.appendTo(self.$placeStatusbar);
|
||||
|
||||
/*
|
||||
self.mapResize = [
|
||||
Math.round(self.options.width * 0.25),
|
||||
Math.round(self.options.width * 0.5),
|
||||
Math.round(self.options.width * 0.75)
|
||||
];
|
||||
*/
|
||||
|
||||
if (Ox.isArray(self.options.places)) {
|
||||
init(self.options.places)
|
||||
|
|
@ -266,15 +342,15 @@ Ox.ListMap = function(options, self) {
|
|||
|
||||
function init(places) {
|
||||
//Ox.print('PLACES', places)
|
||||
self.$map = new Ox.Map({
|
||||
self.$map = Ox.Map({
|
||||
clickable: true,
|
||||
editable: true,
|
||||
findPlaceholder: 'Find on Map',
|
||||
height: self.options.height,
|
||||
places: places,
|
||||
statusbar: true,
|
||||
//statusbar: true,
|
||||
toolbar: true,
|
||||
width: self.mapResize[1],
|
||||
width: self.options.width - 514,//self.mapResize[1],
|
||||
zoombar: true
|
||||
})
|
||||
.bindEvent({
|
||||
|
|
@ -290,31 +366,51 @@ Ox.ListMap = function(options, self) {
|
|||
selectplace: selectPlace
|
||||
});
|
||||
that.$element.replaceWith(
|
||||
that.$element = new Ox.SplitPanel({
|
||||
that.$element = Ox.SplitPanel({
|
||||
elements: [
|
||||
{
|
||||
element: new Ox.SplitPanel({
|
||||
element: Ox.SplitPanel({
|
||||
elements: [
|
||||
{
|
||||
element: self.$toolbar,
|
||||
element: self.$listToolbar,
|
||||
size: 24
|
||||
},
|
||||
{
|
||||
element: self.$list
|
||||
},
|
||||
{
|
||||
element: self.$statusbar,
|
||||
size: 24
|
||||
element: self.$listStatusbar,
|
||||
size: 16
|
||||
}
|
||||
],
|
||||
orientation: 'vertical'
|
||||
})
|
||||
}),
|
||||
resizable: true,
|
||||
resize: [256, 384, 512],
|
||||
size: 256
|
||||
},
|
||||
{
|
||||
element: self.$map,
|
||||
resizable: true,
|
||||
resize: self.mapResize,
|
||||
size: self.mapResize[1]
|
||||
},
|
||||
{
|
||||
collapsible: true,
|
||||
element: Ox.SplitPanel({
|
||||
elements: [
|
||||
{
|
||||
element: self.$placeToolbar,
|
||||
size: 24
|
||||
},
|
||||
{
|
||||
element: self.$placeForm
|
||||
},
|
||||
{
|
||||
element: self.$placeStatusbar,
|
||||
size: 16
|
||||
}
|
||||
],
|
||||
orientation: 'vertical'
|
||||
}),
|
||||
size: 256
|
||||
}
|
||||
],
|
||||
orientation: 'horizontal'
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue