0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

some fixes for map, range and videopreview

Browse source
This commit is contained in:
rlx 2011-09-30 10:34:33 +00:00
parent 8ea49fab73
commit c6d67420a8
6 changed files with 88 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
source/Ox.UI/css/Ox.UI.css
View file

@ -2118,6 +2118,14 @@ Video
}
.OxVideoPreview > .OxFrame {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 16px;
overflow: hidden;
}
.OxVideoPreview > OxFrame > img {
position: absolute;
}
.OxVideoPreview > .OxTimeline {
position: absolute;

28
source/Ox.UI/js/Form/Ox.Range.js
View file

@ -45,16 +45,16 @@ Ox.Range = function(options, self) {
value: 0,
valueNames: null,
})
.options(Ox.extend(options, {
arrowStep: options.arrowStep ?
options.arrowStep : options.step,
trackImages: $.makeArray(options.trackImages || [])
}))
.options(options || {})
.addClass('OxRange')
.css({
width: self.options.size + 'px'
});
self.options.arrowStep = options.arrowStep || self.options.step;
self.options.trackImages = Ox.isArray(self.options.trackImages)
? self.options.trackImages : [self.options.trackImages];
Ox.extend(self, {
trackColors: self.options.trackColors.length,
trackImages: self.options.trackImages.length,
@ -145,7 +145,11 @@ Ox.Range = function(options, self) {
function clickArrow(data, i, animate) {
// fixme: shift doesn't work, see menu scrolling
setValue(self.options.value + self.options.arrowStep * (i == 0 ? -1 : 1) * (data.shiftKey ? 2 : 1), animate);
setValue(
self.options.value
+ self.options.arrowStep * (i == 0 ? -1 : 1) * (data.shiftKey ? 2 : 1),
animate
);
}
function clickTrack(data) {
@ -209,12 +213,12 @@ Ox.Range = function(options, self) {
self.$thumb.stop().animate({
marginLeft: (getPx(self.options.value) - 1) + 'px',
//width: self.thumbSize + 'px'
}, animate ? 200 : 0, function() {
}, animate ? 250 : 0, function() {
if (self.options.thumbValue) {
self.$thumb.options({
title: self.options.valueNames ?
self.options.valueNames[self.options.value] :
self.options.value
title: self.options.valueNames
? self.options.valueNames[self.options.value]
: self.options.value
});
}
});
@ -240,9 +244,7 @@ Ox.Range = function(options, self) {
//time = getTime(self.options.value, value);
self.options.value = value;
setThumb(animate);
that.triggerEvent('change', {
value: value
});
that.triggerEvent('change', {value: value});
}
}

5
source/Ox.UI/js/List/Ox.List.js
View file

@ -662,6 +662,7 @@ Ox.List = function(options, self) {
}
function getWidth() {
//Ox.print('LIST THAT.WIDTH()', that.width())
return that.width() - (that.$content.height() > that.height() ? Ox.UI.SCROLLBAR_SIZE : 0);
}
@ -731,9 +732,9 @@ Ox.List = function(options, self) {
self.$items[pos].appendTo(self.$pages[page]);
});
page == 0 && fillFirstPage();
// fixme: why does emptyPage sometimes have no methods?
// FIXME: why does emptyPage sometimes have no methods?
//Ox.print('emptyPage', $emptyPage)
$emptyPage.removeElement && $emptyPage.removeElement();
$emptyPage && $emptyPage.removeElement && $emptyPage.removeElement();
self.$pages[page].appendTo(that.$content);
!Ox.isUndefined(callback) && callback(); // fixme: callback necessary? why not bind to event?
}));

47
source/Ox.UI/js/Map/Ox.Map.js
View file

@ -36,6 +36,7 @@ Ox.Map <function> Basic map object
showTypes <b|false> If true, color markers according to place type
statusbar <b|false> If true, the map has a statusbar
toolbar <b|false> If true, the map has a toolbar
zoombar <b|false> If true, the map has a zoombar
self <o|{}> Shared private variable
# EVENTS -------------------------------------------------------------------
addplace <!> Fires when a place has been added
@ -73,6 +74,8 @@ Ox.Map <function> Basic map object
lat <n> Latitude
lng <n> Longitude
types <[s]> Types (like "country" or "political")
selectplace <!> Fires when a place has been selected or deselected
place <o> Place object
# EXAMPLES -----------------------------------------------------------------
<script>
// simple
@ -104,6 +107,7 @@ Ox.Map = function(options, self) {
statusbar: false,
toolbar: false,
zoombar: false
// fixme: width, height
})
.options(options || {})
.addClass('OxMap')
@ -355,7 +359,7 @@ Ox.Map = function(options, self) {
self.$scaleLabel = Ox.Label({
textAlign: 'center',
title: '...'
title: '...' // fixme ???
})
.addClass('OxMapLabel')
.css({right: '4px', top: '4px'});
@ -545,10 +549,10 @@ Ox.Map = function(options, self) {
}
function getMapHeight() {
return self.options.height -
self.options.statusbar * 24 -
self.options.toolbar * 24 -
self.options.zoombar * 16;
return self.options.height
- self.options.statusbar * 24
- self.options.toolbar * 24
- self.options.zoombar * 16;
}
function getMapType() {
@ -560,27 +564,34 @@ Ox.Map = function(options, self) {
callback = point;
point = self.map.getCenter();
}
//Ox.print('CALLING ZOOM SERVICE', point.lat(), point.lng())
self.maxZoomService.getMaxZoomAtLatLng(point, function(data) {
//Ox.print('ZOOM SERVICE', data.status, data.zoom)
callback(data.status == 'OK' ? data.zoom : null);
});
}
function getMetersPerPixel() {
// fixme: this is wrong when resizing the map horizontally
var mapWidth = self.$map.width(),
span = self.map.getBounds().toSpan().lng();
/*
if (span >= 360) {
span = 360 * mapWidth / Ox.MAP_TILE_SIZE;
}
return span * Ox.getMetersPerDegree(self.map.getCenter().lat()) / mapWidth;
*/
return Ox.getMetersPerDegree(self.map.getCenter().lat()) * span / mapWidth;
}
function getMinZoom() {
return 0;
return self.mapHeight > 1024 ? 3
: self.mapHeight > 512 ? 2
: self.mapHeight > 256 ? 1
: 0;
// fixme: there must be a function for this...
/*
return Math.ceil(
Ox.log(self.mapHeight / Ox.MAP_TILE_SIZE, 2)
);
*/
}
function getPlaceById(id) {
@ -714,7 +725,11 @@ Ox.Map = function(options, self) {
google.maps.event.addListener(self.map, 'idle', mapChanged);
google.maps.event.addListener(self.map, 'zoom_changed', zoomChanged);
google.maps.event.addListenerOnce(self.map, 'tilesloaded', tilesLoaded);
mapBounds && self.map.fitBounds(mapBounds);
if (self.map.getZoom() < self.minZoom) {
self.map.setZoom(self.minZoom);
}
self.places = [];
if (!self.isAsync) {
@ -1040,6 +1055,7 @@ Ox.Map = function(options, self) {
self.options.selected = id;
setStatus();
that.triggerEvent('selectplace', place);
// FIXME: all these events should rather pass {place: place}
}
};
@ -1300,6 +1316,19 @@ Ox.Map = function(options, self) {
size: self.options.width
});
*/
self.options.height = that.$element.height();
self.options.width = that.$element.width();
self.mapHeight = getMapHeight();
self.minZoom = getMinZoom();
Ox.print('map w/h', self.options.width, self.options.height)
self.$map.css({
height: self.mapHeight + 'px',
width: self.options.width + 'px'
});
self.options.zoombar && self.$zoomInput.options({
size: self.options.width
});
updateFormElements();
google.maps.event.trigger(self.map, 'resize');
return that;

4
source/Ox.UI/js/Panel/Ox.SplitPanel.js
View file

@ -145,6 +145,7 @@ Ox.SplitPanel = function(options, self) {
css[self.edges[1]] = (
self.length == 3 ? getVisibleSize(self.options.elements[2]) : 0
) + 'px';
Ox.print('i==1 CSS', css)
} else {
if (element.size == 'auto') {
css[self.edges[0]] = getVisibleSize(self.options.elements[0])
@ -169,6 +170,7 @@ Ox.SplitPanel = function(options, self) {
} else {
self.$resizebars[i == 0 ? 0 : 1].css(css);
}
self.$resizebars[i == 0 ? 0 : 1].options({size: element.size});
}
});
@ -247,7 +249,7 @@ Ox.SplitPanel = function(options, self) {
size <f> Get or set size of an element
(id) -> <i> Returns size
(id, size) -> <o> Sets size, returns SplitPanel
(id, size, animate) -> <o> Sets size with animation, returns SplitPanel
(id, size, callback) -> <o> Sets size with animation, returns SplitPanel
id <i> The element's id or position
size <i> New size, in px
callback <b|f> Callback function (passing true animates w/o callback)

33
source/Ox.UI/js/Video/Ox.VideoPreview.js
View file

@ -25,11 +25,14 @@ Ox.VideoPreview = function(options, self) {
self.loaded = [];
self.queue = [];
self.$frame = $('<img>')
self.$frameElement = $('<div>')
.addClass('OxFrame')
.appendTo(that.$element)
self.$frame = $('<img>')
.attr({src: self.options.getFrame(self.options.position)})
.css(getFrameCSS())
.appendTo(that.$element);
.appendTo(self.$frameElement);
self.$timeline = $('<img>')
.addClass('OxTimeline')
@ -65,19 +68,25 @@ Ox.VideoPreview = function(options, self) {
}
function getFrameCSS() {
var css = {};
// fixme: these are still wrong
if (!self.options.scaleToFill) {
css.width = self.options.width;
css.height = Math.round(css.width / self.options.frameRatio);
css.marginTop = Math.floor((self.options.height - 16 - css.height) / 2);
var css = {},
elementWidth = self.options.width,
elementHeight = self.options.height - 16,
elementRatio = elementWidth / elementHeight,
frameRatio = self.options.frameRatio,
frameIsWider = frameRatio > elementRatio;
if (self.options.scaleToFill) {
css.width = frameIsWider ? elementHeight * frameRatio : elementWidth;
css.height = frameIsWider ? elementHeight : elementWidth / frameRatio;
css.marginLeft = frameIsWider ? (elementWidth - css.width) / 2 : 0;
css.marginTop = frameIsWider ? 0 : (elementHeight - css.height) / 2;
} else {
css.height = self.options.height - 16;
css.width = Math.round(css.height * self.options.frameRatio);
css.marginLeft = Math.floor((self.options.width - css.width) / 2);
css.width = frameIsWider ? elementWidth : elementHeight * frameRatio;
css.height = frameIsWider ? elementWidth / frameRatio : elementHeight;
css.marginLeft = frameIsWider ? 0 : (css.width - elementWidth) / 2;
css.marginTop = frameIsWider ? (css.height - elementHeight) / 2 : 0;
}
return Ox.map(css, function(value) {
return value + 'px';
return Math.round(value) + 'px';
});
}