merge changes from dev.pan.do

This commit is contained in:
j 2010-11-28 16:08:34 +01:00
commit 69564fa4b9
3 changed files with 317 additions and 150 deletions

View File

@ -1121,11 +1121,11 @@ Panels
} }
.OxCollapsePanel > .OxBar > .OxButton { .OxCollapsePanel > .OxBar > .OxButton {
float: left; float: left;
margin: 2px 0 0 4px; margin: 0 0 0 0;
} }
.OxCollapsePanel > .OxBar > .OxTitle { .OxCollapsePanel > .OxBar > .OxTitle {
float: left; float: left;
margin: 3px 0 0 4px; margin: 1px 0 0 0;
font-weight: bold; font-weight: bold;
} }
.OxCollapsePanel > .OxContent { .OxCollapsePanel > .OxContent {

View File

@ -13,6 +13,8 @@ Constants
Ox.AMPM = ["AM", "PM"]; Ox.AMPM = ["AM", "PM"];
Ox.DAYS = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; Ox.DAYS = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
Ox.EARTH_RADIUS = 6378137;
Ox.EARTH_CIRCUMFERENCE = Ox.EARTH_RADIUS * 2 * Math.PI;
Ox.MONTHS = ["January", "February", "March", "April", "May", "June", Ox.MONTHS = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"]; "July", "August", "September", "October", "November", "December"];
Ox.WEEKDAYS = ["Monday", "Tuesday", "Wednesday", "Thursday", Ox.WEEKDAYS = ["Monday", "Tuesday", "Wednesday", "Thursday",
@ -1436,6 +1438,33 @@ Ox.formatValue = function(num, str) {
return val; return val;
}; };
/*
================================================================================
Geo functions
================================================================================
*/
Ox.getArea = function(point0, point1) {
};
Ox.getCenter = function(point0, point1) {
};
Ox.getDistance = function(point0, point1) {
point0 = point0.map(function(deg) {
return Ox.rad(deg);
});
point1 = point1.map(function(deg) {
return Ox.rad(deg);
});
}
Ox.getMetersPerDegree = function(point) {
return Math.cos(point[0] * Math.PI / 180) * Ox.EARTH_CIRCUMFERENCE / 360;
};
/* /*
================================================================================ ================================================================================
Math functions Math functions

View File

@ -1520,11 +1520,13 @@ requires
} }
function dragStart(e) { function dragStart(e) {
self.startPos = e[self.clientXY]; if (!self.options.collapsed) {
self.startSize = self.options.size; self.startPos = e[self.clientXY];
Ox.print('startSize', self.startSize) self.startSize = self.options.size;
$window.mousemove(drag); Ox.print('startSize', self.startSize)
$window.one('mouseup', dragStop); $window.mousemove(drag);
$window.one('mouseup', dragStop);
}
} }
function dragStop() { function dragStop() {
@ -1532,10 +1534,13 @@ requires
} }
function toggle() { function toggle() {
var i = (self.options.edge == 'left' || self.options.edge == 'top') ? 0 : 1;
self.options.parent.toggle(self.ids[i]);
/*
Ox.print('toggle'); Ox.print('toggle');
if (Ox.isUndefined(self.options.position)) { if (Ox.isUndefined(self.options.position)) {
self.options.position = parseInt(self.options.parent.css(self.options.edge)) + self.options.position = parseInt(self.options.parent.css(self.options.edge)) +
(self.options.collapsed ? self.options.size : 0); (self.options.collapsed ? self.options.size : 0);
} }
var size = self.options.position - var size = self.options.position -
(self.options.collapsed ? 0 : self.options.size), (self.options.collapsed ? 0 : self.options.size),
@ -1543,10 +1548,12 @@ requires
Ox.print('s.o.e', self.options.edge); Ox.print('s.o.e', self.options.edge);
animate[self.options.edge] = size; animate[self.options.edge] = size;
self.options.parent.animate(animate, 200, function() { self.options.parent.animate(animate, 200, function() {
var i = (self.options.edge == 'left' || self.options.edge == 'top') ? 1 : 0; var i = (self.options.edge == 'left' || self.options.edge == 'top') ? 0 : 1;
Ox.Event.trigger(self.ids[i], 'resize', self.options.elements[i][self.dimensions[1]]());
self.options.collapsed = !self.options.collapsed; self.options.collapsed = !self.options.collapsed;
Ox.Event.trigger(self.ids[i], 'toggle', self.options.collapsed);
Ox.Event.trigger(self.ids[1 - i], 'resize', self.options.elements[1 - i][self.dimensions[1]]());
}); });
*/
} }
return that; return that;
@ -1780,7 +1787,7 @@ requires
triggerResizeEvent(); triggerResizeEvent();
} }
function resize(event) { function resize(event) { // fixme: reserved jquery string?
var documentWidth = $document.width(), var documentWidth = $document.width(),
documentHeight = $document.height(), documentHeight = $document.height(),
elementWidth = that.width(), elementWidth = that.width(),
@ -1899,7 +1906,7 @@ requires
return that; return that;
}; };
that.resize = function(width, height, callback) { that.size = function(width, height, callback) {
$.extend(self, { $.extend(self, {
initialWidth: width, initialWidth: width,
initialHeight: height initialHeight: height
@ -2525,6 +2532,7 @@ requires
autocompleteSelectSubmit: false, autocompleteSelectSubmit: false,
autovalidate: null, autovalidate: null,
clear: false, clear: false,
disabled: false,
key: '', key: '',
min: 0, min: 0,
max: 100, max: 100,
@ -3090,7 +3098,11 @@ requires
self.onChange = function(key, value) { self.onChange = function(key, value) {
var inputWidth, val; var inputWidth, val;
if (key == 'placeholder') { if (key == 'disabled') {
self.$input.attr({
disabled: value ? 'disabled' : ''
});
} else if (key == 'placeholder') {
setPlaceholder(); setPlaceholder();
} else if (key == 'value') { } else if (key == 'value') {
val = self.$input.val(); val = self.$input.val();
@ -3796,6 +3808,12 @@ requires
})) }))
.html(self.options.title); .html(self.options.title);
self.onChange = function(key, value) {
if (key == 'title') {
that.html(value);
}
}
return that; return that;
}; };
@ -5767,8 +5785,8 @@ requires
that.$element.closePreview(); that.$element.closePreview();
}; };
that.resize = function() { that.size = function() {
that.$element.resize(); that.$element.size();
} }
that.sortList = function(key, operator) { that.sortList = function(key, operator) {
@ -6001,7 +6019,7 @@ requires
updateQuery(); updateQuery();
Ox.print('s.o', self.options) Ox.print('s.o', self.options)
that.addEvent(self.keyboardEvents); that.addEvent(self.keyboardEvents);
$window.resize(that.resize); $window.resize(that.size);
function addAboveToSelection() { function addAboveToSelection() {
var pos = getAbove(); var pos = getAbove();
@ -6204,6 +6222,10 @@ requires
), 0); ), 0);
} }
function getPageByPosition(pos) {
return parseInt(self.options.pageLength / pos);
}
function getPositions() { function getPositions() {
Ox.print('getPositions', $.map(self.selected, function(v, i) { Ox.print('getPositions', $.map(self.selected, function(v, i) {
return self.ids[v]; return self.ids[v];
@ -6223,6 +6245,7 @@ requires
function getPositionsCallback(result) { function getPositionsCallback(result) {
Ox.print('getPositionsCallback', result) Ox.print('getPositionsCallback', result)
var pos = 0;
if (result) { if (result) {
$.extend(self, { $.extend(self, {
ids: {}, ids: {},
@ -6232,8 +6255,14 @@ requires
Ox.print('id', id, 'pos', pos) Ox.print('id', id, 'pos', pos)
self.selected.push(pos); self.selected.push(pos);
}); });
pos = Ox.min(self.selected);
self.page = getPageByPosition(pos);
} }
load(); that.scrollTop(0);
that.$content.empty();
loadPages(self.page, function() {
scrollTo(pos);
});
} }
function getPrevious() { function getPrevious() {
@ -6277,12 +6306,6 @@ requires
return self.selected.indexOf(pos) > -1; return self.selected.indexOf(pos) > -1;
} }
function load() {
that.scrollTop(0);
that.$content.empty();
loadPages(self.page);
}
function loadPage(page, callback) { function loadPage(page, callback) {
if (page < 0 || page >= self.pages) { if (page < 0 || page >= self.pages) {
!Ox.isUndefined(callback) && callback(); !Ox.isUndefined(callback) && callback();
@ -6340,8 +6363,7 @@ requires
function loadPages(page, callback) { function loadPages(page, callback) {
var counter = 0, var counter = 0,
fn = function() { fn = function() {
counter++; ++counter == 2 && !Ox.isUndefined(callback) && callback();
counter == 2 && !Ox.isUndefined(callback) && callback();
}; };
loadPage(page, function() { loadPage(page, function() {
loadPage(page - 1, fn); loadPage(page - 1, fn);
@ -6651,7 +6673,7 @@ requires
return that; return that;
}; };
that.resize = function() { that.size = function() {
if (self.options.orientation == 'both') { if (self.options.orientation == 'both') {
var rowLength = getRowLength(), var rowLength = getRowLength(),
pageLength = self.pageLengthByRowLength[rowLength]; pageLength = self.pageLengthByRowLength[rowLength];
@ -6667,7 +6689,7 @@ requires
}); });
} }
} else if (self.options.type == 'text') { } else if (self.options.type == 'text') {
Ox.print('that.resize, type==text') Ox.print('that.size, type==text')
emptyFirstPage(); emptyFirstPage();
fillFirstPage(); fillFirstPage();
} }
@ -7192,9 +7214,9 @@ requires
that.$body.closePreview(); that.$body.closePreview();
}; };
that.resize = function() { that.size = function() {
setWidth(); setWidth();
that.$body.resize(); that.$body.size();
} }
that.resizeColumn = function(id, width) { that.resizeColumn = function(id, width) {
@ -7236,12 +7258,76 @@ requires
var self = self || {} var self = self || {}
that = new Ox.Element('div', self) that = new Ox.Element('div', self)
.defaults({ .defaults({
clickable: false,
places: [], places: [],
type: 'satellite' type: 'satellite'
}) })
.options(options || {}); .options(options || {})
.addEvent({
key_up: function() {
pan(0, -1);
},
key_down: function() {
pan(0, 1);
},
key_left: function() {
pan(-1, 0);
},
key_right: function() {
pan(1, 0);
},
key_0: reset,
key_minus: function() {
zoom(-1);
},
key_equal: function() {
zoom(1);
},
key_enter: focusOnPlace,
key_shift_enter: zoomToPlace,
key_escape: deselectPlace
});
init(); $.extend(self, {
geocoder: new google.maps.Geocoder(),
selected: -1
});
$.each(self.options.places, function(i, place) {
place.bounds = getBounds(),
place.center = place.bounds.getCenter();
$.extend(place, {
marker: new Marker(place),
polygon: new Polygon(place)
});
self.bounds = i == 0 ? getBounds() : self.bounds.union(place.bounds);
self.options.places[i] = place;
function getBounds() {
return new google.maps.LatLngBounds(
new google.maps.LatLng(place.points.southwest[0], place.points.southwest[1]),
new google.maps.LatLng(place.points.northeast[0], place.points.northeast[1])
);
}
});
Ox.print('loadMap');
Ox.print(self.bounds)
$.extend(self, {
map: new google.maps.Map(that.$element[0], {
center: self.bounds.getCenter(),
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId[self.options.type.toUpperCase()],
zoom: 0
})
});
self.map.fitBounds(self.bounds);
self.center = self.map.getCenter();
self.zoom = self.map.getZoom();
google.maps.event.addListener(self.map, 'click', click);
google.maps.event.addListener(self.map, 'zoom_changed', zoomChanged);
$.each(self.options.places, function(i, place) {
place.marker.add();
});
resize();
that.gainFocus();
function canContain(outerBounds, innerBounds) { function canContain(outerBounds, innerBounds) {
var outerSpan = outerBounds.toSpan(), var outerSpan = outerBounds.toSpan(),
@ -7252,17 +7338,31 @@ requires
function click(event) { function click(event) {
Ox.print('event', event); Ox.print('event', event);
getLocationByLatLng(event.latLng, self.map.getBounds(), function(location) { that.gainFocus();
self.marker && self.marker.remove(); if (self.options.clickable) {
self.polygon && self.polygon.remove(); getLocationByLatLng(event.latLng, self.map.getBounds(), function(location) {
if (location) { self.marker && self.marker.remove();
self.marker = location.marker.add(); self.polygon && self.polygon.remove();
self.polygon = location.polygon.add(); if (location) {
that.triggerEvent('select', location) self.marker = location.marker.add();
} self.polygon && self.polygon.remove();
}) self.polygon = location.polygon.add();
that.triggerEvent('select', location);
}
});
}
} }
function deselectPlace() {
}
function focusOnPlace() {
if (self.selected > -1) {
self.map.panTo(self.options.places[self.selected].center);
}
}
function getLocationByLatLng(latlng, bounds, callback) { function getLocationByLatLng(latlng, bounds, callback) {
Ox.print('ll b', latlng, bounds) Ox.print('ll b', latlng, bounds)
var callback = arguments.length == 3 ? callback : bounds, var callback = arguments.length == 3 ? callback : bounds,
@ -7314,119 +7414,107 @@ requires
}); });
} }
function init() { function getPositionByName(name) {
var counter = 0, var position = -1;
length = self.options.places.length; $.each(self.options.places, function(i, place) {
$.extend(self, { if (place.name == name) {
geocoder: new google.maps.Geocoder(), position = i;
locations: [], return false;
selectedMarker: null }
}); });
$.each(self.options.places, function(i, place) { return position;
if (Ox.isString(place)) { }
self.options.places[i] = {
name: place
};
} else if (Ox.isArray(place)) {
self.options.places[i] = {
name: '',
point: place
};
}
'point' in self.options.places[i] ?
getLocationByPoint(self.options.places[i].point, callback) :
getLocationByName(self.options.places[i].name, callback);
});
function callback(location) {
if (location) {
Ox.print('counter', counter, location)
self.locations.push(location);
self.bounds = counter == 0 ? location.rectangle.bounds :
self.bounds.union(location.rectangle.bounds);
}
if (counter++ == length - 1) {
loadMap();
}
}
}
function loadMap() { function pan(x, y) {
Ox.print('loadMap'); self.map.panBy(x * 256, y * 256);
$.extend(self, { };
map: new google.maps.Map(that.$element[0], {
center: self.bounds.getCenter(),
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId[self.options.type.toUpperCase()],
zoom: 0
})
});
self.map.fitBounds(self.bounds)
google.maps.event.addListener(self.map, 'click', click);
google.maps.event.addListener(self.map, 'zoom_changed', zoom);
$.each(self.locations, function(i, location) {
location.marker.add();
});
resize();
};
function resize() { function resize() {
google.maps.event.trigger(self.map, 'resize'); google.maps.event.trigger(self.map, 'resize');
} }
function zoom() { function reset() {
Ox.print(self.map.getZoom(), self.zoom);
self.map.getZoom() == self.zoom ?
self.map.panTo(self.center) :
self.map.fitBounds(self.bounds);
}
function zoomChanged() {
that.triggerEvent('zoom', { that.triggerEvent('zoom', {
value: self.map.getZoom() value: self.map.getZoom()
}); });
} }
function Location(geocode) { function zoom(z) {
Ox.print('geocode', geocode); self.map.setZoom(self.map.getZoom() + z);
var bounds = geocode.geometry.bounds || geocode.geometry.viewport, }
area = [
[bounds.getSouthWest().lat(), bounds.getSouthWest().lng()], function zoomToPlace() {
[bounds.getNorthEast().lat(), bounds.getNorthEast().lng()] if (self.selected > -1) {
], self.map.fitBounds(self.options.places[self.selected].bounds);
location = { }
geocode: geocode, }
name: {
formatted: geocode.formatted_address, function Location(geodata) {
long: $.map(geocode.address_components, function(v) { Ox.print('geodata', geodata);
return v.long_name; var bounds = geodata.geometry.bounds || geodata.geometry.viewport,
}).join(', ') center = bounds.getCenter(),
}, location = {
rectangle: new Rectangle(area), bounds: bounds,
}; center: center,
Ox.print('area', area) geoname: geodata.formatted_address,
points: {
'center': [center.lat(), center.lng()],
'southwest': [bounds.getSouthWest().lat(), bounds.getSouthWest().lng()],
'northeast': [bounds.getNorthEast().lat(), bounds.getNorthEast().lng()]
},
name: geodata.formatted_address.split(', ')[0],
size: 0,
type: geodata.address_components[0].types.join(', ')
};
return $.extend(location, { return $.extend(location, {
marker: new Marker(location), marker: new Marker(location),
polygon: new Polygon(location) polygon: new Polygon(location)
}); });
} }
function Marker(location) { function Marker(place) {
Ox.print(place.center)
var listeners = {}, var listeners = {},
marker = new google.maps.Marker({ marker = new google.maps.Marker({
icon: icon('red'), icon: icon('red'),
position: location.rectangle.center, position: place.center,
title: location.name.formatted title: place.name
}), }),
selected = false; selected = false;
function click() { function click() {
Ox.print('click', self.selected, selected)
selected = !selected; selected = !selected;
selected && self.selected > -1 && self.options.places[self.selected].marker.deselect();
self.selected = selected ? getPositionByName(place.name) : -1;
marker.setOptions({ marker.setOptions({
icon: icon(selected ? 'blue' : 'red') icon: icon(selected ? 'blue' : 'red')
}); });
location.polygon[selected ? 'add' : 'remove'](); place.polygon[selected ? 'add' : 'remove']();
that.triggerEvent(selected ? 'select' : 'deselect', place);
} }
function deselect() {
}
function dblclick() { function dblclick() {
click(); Ox.print('dblclick', place.bounds)
self.map.fitBounds(location.rectangle.bounds); self.map.fitBounds(place.bounds);
} }
function select() {
}
function icon(color) { function icon(color) {
return oxui.path + 'png/ox.ui/marker' + Ox.toTitleCase(color) + '.png' return oxui.path + 'png/ox.ui/marker' + Ox.toTitleCase(color) + '.png'
} }
return { return {
add: function() { add: function() {
Ox.print('add Marker')
marker.setMap(self.map); marker.setMap(self.map);
listeners = { listeners = {
click: google.maps.event.addListener(marker, 'click', click), click: google.maps.event.addListener(marker, 'click', click),
@ -7435,7 +7523,12 @@ requires
return this; return this;
}, },
deselect: function() { deselect: function() {
self.selected = -1;
selected = false;
marker.setOptions({
icon: icon('red')
});
place.polygon.remove();
}, },
remove: function() { remove: function() {
marker.setMap(null); marker.setMap(null);
@ -7445,22 +7538,30 @@ requires
return this; return this;
}, },
select: function() { select: function() {
if (self.selected > -1) {
self.options.places[self.selected].marker.deselect();
}
self.selected = getPositionByName(place.name);
selected = true;
marker.setOptions({
icon: icon('blue')
});
place.polygon.add();
} }
}; };
} }
function Polygon(location) { function Polygon(location) {
var listeners = {}, var listeners = {},
points = [ paths = [
location.rectangle.latlng.sw, new google.maps.LatLng(location.points.southwest[0], location.points.southwest[1]),
location.rectangle.latlng.nw, new google.maps.LatLng(location.points.northeast[0], location.points.southwest[1]),
location.rectangle.latlng.ne, new google.maps.LatLng(location.points.northeast[0], location.points.northeast[1]),
location.rectangle.latlng.se, new google.maps.LatLng(location.points.southwest[0], location.points.northeast[1]),
location.rectangle.latlng.sw new google.maps.LatLng(location.points.southwest[0], location.points.southwest[1])
], ],
polygon = new google.maps.Polygon({ polygon = new google.maps.Polygon({
paths: points paths: paths
}), }),
selected = false; selected = false;
setOptions(); setOptions();
@ -7518,7 +7619,7 @@ requires
sc: new google.maps.LatLng(lat.sw, lng.mc), sc: new google.maps.LatLng(lat.sw, lng.mc),
se: new google.maps.LatLng(lat.sw, lng.ne), se: new google.maps.LatLng(lat.sw, lng.ne),
mw: new google.maps.LatLng(lat.mc, lng.sw), mw: new google.maps.LatLng(lat.mc, lng.sw),
mw: new google.maps.LatLng(lat.mc, lng.ne), me: new google.maps.LatLng(lat.mc, lng.ne),
nw: new google.maps.LatLng(lat.ne, lng.sw), nw: new google.maps.LatLng(lat.ne, lng.sw),
nc: new google.maps.LatLng(lat.ne, lng.mc), nc: new google.maps.LatLng(lat.ne, lng.mc),
}); });
@ -7549,9 +7650,10 @@ requires
that.find = function(name, callback) { that.find = function(name, callback) {
getLocationByName(name, function(location) { getLocationByName(name, function(location) {
if (location) { if (location) {
//self.marker = location.marker.add();
self.polygon && self.polygon.remove(); self.polygon && self.polygon.remove();
self.polygon = location.polygon.add(); self.polygon = location.polygon.add();
self.bounds = location.rectangle.bounds; self.bounds = location.bounds;
self.map.fitBounds(self.bounds); self.map.fitBounds(self.bounds);
} }
callback(location); callback(location);
@ -8653,7 +8755,7 @@ requires
that = new Ox.Panel({}, self) that = new Ox.Panel({}, self)
.defaults({ .defaults({
collapsed: false, collapsed: false,
size: 20, size: 16,
title: '' title: ''
}) })
.options(options) .options(options)
@ -8830,10 +8932,13 @@ requires
v.size != 'auto' && that.$elements[i].css(self.dimensions[0], v.size + 'px'); v.size != 'auto' && that.$elements[i].css(self.dimensions[0], v.size + 'px');
if (i == 0) { if (i == 0) {
that.$elements[i].css(self.edges[0], 0); that.$elements[i].css(self.edges[0], 0);
v.size != 'auto' && that.$elements[i].css( that.$elements[i].css(
self.edges[1], (getSize(self.options.elements[1]) + (length == 3 ? getSize(self.options.elements[2]) : 0)) + 'px' self.edges[1], (getSize(self.options.elements[1]) + (length == 3 ? getSize(self.options.elements[2]) : 0)) + 'px'
); );
} else if (i == 1) { } else if (i == 1) {
that.$elements[i].css(
self.edges[0], 'auto'
);
self.options.elements[0].size != 'auto' && that.$elements[i].css( self.options.elements[0].size != 'auto' && that.$elements[i].css(
self.edges[0], getSize(self.options.elements[0]) + 'px' self.edges[0], getSize(self.options.elements[0]) + 'px'
); );
@ -8841,6 +8946,9 @@ requires
self.edges[1], (self.length == 3 ? getSize(self.options.elements[2]) : 0) + 'px' self.edges[1], (self.length == 3 ? getSize(self.options.elements[2]) : 0) + 'px'
); );
} else { } else {
that.$elements[i].css(
self.edges[0], 'auto'
);
that.$elements[i].css(self.edges[1], 0); that.$elements[i].css(self.edges[1], 0);
v.size != 'auto' && that.$elements[i].css( v.size != 'auto' && that.$elements[i].css(
self.edges[0], (getSize(self.options.elements[0]) + getSize(self.options.elements[1])) + 'px' self.edges[0], (getSize(self.options.elements[0]) + getSize(self.options.elements[1])) + 'px'
@ -8853,7 +8961,8 @@ requires
} }
that.isCollapsed = function(id) { that.isCollapsed = function(id) {
return self.options.elements[getPositionById(id)].collapsed; var pos = Ox.isNumber(id) ? id : getPositionById(id);
return self.options.elements[pos].collapsed;
}; };
that.replace = function(id, element) { that.replace = function(id, element) {
@ -8869,14 +8978,18 @@ requires
Ox.print(self.options.elements[pos]) Ox.print(self.options.elements[pos])
}; };
that.resize = function(id, size) { that.size = function(id, size) {
// one can pass pos instead of id // one can pass pos instead of id
var pos = Ox.isNumber(id) ? id : getPositionById(id); var pos = Ox.isNumber(id) ? id : getPositionById(id);
// Ox.print('pos', pos, self.options.elements, $.map(self.options.elements, function(v, i) { return v.element.options('id'); })) Ox.print('pos', pos, 'size', size);
Ox.print('pos', pos, 'size', size) if (arguments.length == 1) {
self.options.elements[pos].size = size; Ox.print('size', self.options.elements[pos].element[self.dimensions[0]](), !that.isCollapsed(pos))
setSizes(); return self.options.elements[pos].element[self.dimensions[0]]() * !that.isCollapsed(pos);
return that; } else {
self.options.elements[pos].size = size;
setSizes();
return that;
}
}; };
that.toggle = function(id) { that.toggle = function(id) {
@ -8893,13 +9006,21 @@ requires
Ox.print('s.o.e', self.options.edge); Ox.print('s.o.e', self.options.edge);
*/ */
var pos = getPositionById(id), var pos = getPositionById(id),
size = self.options.elements[pos].collapsed ? 0 : self.options.elements[pos].size, element = self.options.elements[pos],
value = parseInt(that.css(self.edges[pos == 0 ? 0 : 1])) +
element.element[self.dimensions[0]]() *
(element.collapsed ? 1 : -1),
animate = {}; animate = {};
animate[self.edges[pos == 0 ? 0 : 1]] = size; Ox.print(parseInt(that.css(self.edges[0])), element.element[self.dimensions[0]]())
self.options.parent.animate(animate, 200, function() { animate[self.edges[pos == 0 ? 0 : 1]] = value;
var i = (self.options.edge == 'left' || self.options.edge == 'top') ? 1 : 0; Ox.print('animate', animate, 'value', value)
that.triggerEvent('resize', self.options.elements[i][self.dimensions[1]]()); that.animate(animate, 200, function() {
var element = self.options.elements[pos == 0 ? 1 : pos - 1].element;
self.options.elements[pos].collapsed = !self.options.elements[pos].collapsed; self.options.elements[pos].collapsed = !self.options.elements[pos].collapsed;
element.triggerEvent(
'resize',
element[self.dimensions[0]]()
);
}); });
}; };
@ -9223,6 +9344,11 @@ requires
margin: 8 margin: 8
}); });
that.css({
width: (self.options.width + self.margin) + 'px',
height: ((self.height + self.margin) * self.lines + 4) + 'px'
});
getTimelineImageURL(function(url) { getTimelineImageURL(function(url) {
self.timelineImageURL = url; self.timelineImageURL = url;
@ -9438,6 +9564,10 @@ requires
function setWidth() { function setWidth() {
self.lines = Math.ceil(self.options.duration / self.options.width); self.lines = Math.ceil(self.options.duration / self.options.width);
that.css({
width: (self.options.width + self.margin) + 'px',
height: ((self.height + self.margin) * self.lines + 4) + 'px'
});
$.each(Ox.range(self.lines), function(i) { $.each(Ox.range(self.lines), function(i) {
if (self.$lines[i]) { if (self.$lines[i]) {
self.$lines[i].css({ self.$lines[i].css({
@ -9488,6 +9618,7 @@ requires
duration: 0, duration: 0,
find: '', find: '',
frameURL: function() {}, frameURL: function() {},
height: 0,
largeTimeline: true, largeTimeline: true,
matches: [], matches: [],
points: [0, 0], points: [0, 0],
@ -9502,7 +9633,12 @@ requires
width: 0 width: 0
}) })
.options(options || {}) .options(options || {})
.addClass('OxEditor'); .addClass('OxEditor')
.css({
//height: self.options.height + 'px',
overflowY: 'scroll',
//width: self.options.width + 'px'
});
$.extend(self, { $.extend(self, {
$player: [], $player: [],
@ -9716,14 +9852,16 @@ requires
} }
function getSizes() { function getSizes() {
var size = { var scrollbarWidth = oxui.scrollbarSize,
contentWidth = self.options.width - scrollbarWidth,
size = {
player: [], player: [],
timeline: [] timeline: []
}, },
width, widths; width, widths;
if (self.options.videoSize == 'small') { if (self.options.videoSize == 'small') {
width = 0; width = 0;
widths = Ox.divideInt(self.options.width - 4 * self.margin, 3); widths = Ox.divideInt(contentWidth - 4 * self.margin, 3);
[1, 0, 2].forEach(function(v, i) { [1, 0, 2].forEach(function(v, i) {
size.player[v] = { size.player[v] = {
left: (i + 0.5) * self.margin + width, left: (i + 0.5) * self.margin + width,
@ -9737,13 +9875,13 @@ requires
size.player[0] = { size.player[0] = {
left: self.margin / 2, left: self.margin / 2,
top: self.margin / 2, top: self.margin / 2,
width: Math.round((self.options.width - 3 * self.margin + (self.controlsHeight + self.margin) / 2 * self.videoRatio) * 2/3), width: Math.round((contentWidth - 3 * self.margin + (self.controlsHeight + self.margin) / 2 * self.videoRatio) * 2/3),
} }
size.player[0].height = Math.round(size.player[0].width / self.videoRatio); size.player[0].height = Math.round(size.player[0].width / self.videoRatio);
size.player[1] = { size.player[1] = {
left: size.player[0].left + size.player[0].width + self.margin, left: size.player[0].left + size.player[0].width + self.margin,
top: size.player[0].top, top: size.player[0].top,
width: self.options.width - 3 * self.margin - size.player[0].width width: contentWidth - 3 * self.margin - size.player[0].width
} }
size.player[1].height = Math.ceil(size.player[1].width / self.videoRatio) size.player[1].height = Math.ceil(size.player[1].width / self.videoRatio)
size.player[2] = { size.player[2] = {
@ -9756,7 +9894,7 @@ requires
size.timeline[0] = { size.timeline[0] = {
left: self.margin / 2, left: self.margin / 2,
top: size.player[0].height + self.controlsHeight + 1.5 * self.margin, top: size.player[0].height + self.controlsHeight + 1.5 * self.margin,
width: self.options.width - 2 * self.margin, width: contentWidth - 2 * self.margin,
height: 64 height: 64
} }
size.timeline[1] = { size.timeline[1] = {
@ -9890,7 +10028,7 @@ requires
} }
self.onChange = function(key, value) { self.onChange = function(key, value) {
if (key == 'width') { if (key == 'width' || key == 'height') {
setSizes(); setSizes();
} }
}; };