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

merging changes

Browse source
This commit is contained in:
rlx 2011-03-04 03:50:37 +00:00
parent 7ef84ae6b2
commit ee027fb760
3 changed files with 59 additions and 90 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
build/css/ox.ui.css
View file

@ -719,7 +719,7 @@ Lists
} }
.OxIconList .OxPage { .OxIconList .OxPage {
//position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
margin-left: auto; margin-left: auto;
@ -799,6 +799,11 @@ Lists
//-webkit-user-select: text; //-webkit-user-select: text;
} }
.OxTextList {
top: 0;
bottom: 0;
}
.OxTextList .OxBar { .OxTextList .OxBar {
//z-index: 10; //z-index: 10;
//-moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.75); //-moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.75);
@ -892,7 +897,7 @@ Lists
.OxTextList .OxBody { .OxTextList .OxBody {
float: left; float: left;
//position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
right: 0; right: 0;
@ -943,7 +948,7 @@ Lists
cursor: ns-resize; cursor: ns-resize;
} }
.OxTextList .OxPage { .OxTextList .OxPage {
//position: absolute; position: absolute;
} }
.OxTextList.OxDrop .OxItem .OxCell { .OxTextList.OxDrop .OxItem .OxCell {
color: green; color: green;

118
build/js/ox.ui.js
View file

@ -9625,8 +9625,13 @@ requires
self.places = []; self.places = [];
self.options.places.forEach(function(place, i) { self.options.places.forEach(function(place, i) {
self.places[i] = Place(Ox.clone(place)); self.places[i] = Place(Ox.clone(place));
if (i == 0) {
Ox.print('0000', self.places[i].bounds, self.places[i].bounds.union)
} else {
Ox.print('$$$$', self.bounds)
}
self.bounds = i == 0 ? self.bounds = i == 0 ?
Ox.clone(self.places[i].bounds) : self.places[i].bounds :
self.bounds.union(self.places[i].bounds); self.bounds.union(self.places[i].bounds);
}); });
self.center = self.bounds ? self.bounds.getCenter() : new google.maps.LatLng(0, 0); self.center = self.bounds ? self.bounds.getCenter() : new google.maps.LatLng(0, 0);
@ -9739,23 +9744,29 @@ requires
} }
function Marker(place) { function Marker(place) {
var listeners = {}, var marker = new google.maps.Marker({
marker = new google.maps.Marker({
position: place.center, position: place.center,
title: place.name title: place.name
}), }),
selected = false; selected = false;
setOptions(); setOptions();
Ox.print('MARKER', marker)
function click(event) { function click(event) {
Ox.print('click metaKey', event.metaKey, selected) // fixme: metaKey used to work
/*
Ox.print('click event', event, 'metakey', event.metaKey, 'selected', selected)
if (event.metaKey == selected) { if (event.metaKey == selected) {
selected = !event.metaKey; selected = !event.metaKey;
selectPlace(selected ? place.id : ''); selectPlace(selected ? place.id : '');
} }
*/
selected = !selected;
selectPlace(selected ? place.id : '');
} }
function dblclick() { function dblclick() {
Ox.print('####', place.bounds) Ox.print('PLACE.BOUNDS', place.bounds)
self.map.fitBounds(place.bounds); self.bounds = place.bounds;
self.map.fitBounds(self.bounds);
} }
function setOptions() { function setOptions() {
marker.setOptions({ marker.setOptions({
@ -9768,10 +9779,8 @@ requires
add: function() { add: function() {
Ox.print('Marker.add()') Ox.print('Marker.add()')
marker.setMap(self.map); marker.setMap(self.map);
listeners = { google.maps.event.addListener(marker, 'click', click);
click: google.maps.event.addListener(marker, 'click', click), google.maps.event.addListener(marker, 'dblclick', dblclick);
dblclick: google.maps.event.addListener(marker, 'dblclick', dblclick),
};
}, },
deselect: function() { deselect: function() {
selected = false; selected = false;
@ -9779,9 +9788,7 @@ requires
}, },
remove: function() { remove: function() {
marker.setMap(null); marker.setMap(null);
$.each(listeners, function(i, listener) { google.maps.event.clearListeners(marker);
google.maps.event.removeListener(listener);
});
}, },
select: function() { select: function() {
selected = true; selected = true;
@ -9799,6 +9806,7 @@ requires
new google.maps.LatLng(place.south, place.west), new google.maps.LatLng(place.south, place.west),
new google.maps.LatLng(place.north, place.east) new google.maps.LatLng(place.north, place.east)
); );
Ox.print('place.bounds', place.bounds, place.bounds.union)
} else { } else {
// geodata object // geodata object
if (!place.geometry.bounds) { if (!place.geometry.bounds) {
@ -9972,6 +9980,7 @@ requires
self.resultPlace = place; self.resultPlace = place;
selectPlace(place.id); selectPlace(place.id);
self.bounds = place.bounds; self.bounds = place.bounds;
Ox.print('SELF.BOUNDS', self.bounds)
self.map.fitBounds(self.bounds); self.map.fitBounds(self.bounds);
} }
callback(place); callback(place);
@ -11252,12 +11261,7 @@ requires
var element = self.options.elements[pos], var element = self.options.elements[pos],
size = element.element[self.dimensions[0]](); size = element.element[self.dimensions[0]]();
if (element.resizable && !element.collapsed) { if (element.resizable && !element.collapsed) {
Ox.isString(element.size) && setPixels(pos);
self.drag = { self.drag = {
resize: Ox.isNumber(element.size) ?
element.resize : element.resize.map(function(v) {
return getPixelsByPercent(v);
}),
size: size, size: size,
startPos: e[self.clientXY], startPos: e[self.clientXY],
startSize: size startSize: size
@ -11274,10 +11278,10 @@ requires
var d = e[self.clientXY] - self.drag.startPos, var d = e[self.clientXY] - self.drag.startPos,
size = Ox.limit( size = Ox.limit(
self.drag.startSize + d * (index ? -1 : 1), self.drag.startSize + d * (index ? -1 : 1),
self.drag.resize[0], element.resize[0],
self.drag.resize[element.resize.length - 1] element.resize[element.resize.length - 1]
); );
self.drag.resize.forEach(function(v) { element.resize.forEach(function(v) {
if (size >= v - 8 && size <= v + 8) { if (size >= v - 8 && size <= v + 8) {
size = v; size = v;
return false; return false;
@ -11299,53 +11303,16 @@ requires
var data = {}, var data = {},
element = self.options.elements[pos]; element = self.options.elements[pos];
if (element.resizable && !element.collapsed) { if (element.resizable && !element.collapsed) {
Ox.isString(element.size) && setPercent(pos);
data[self.dimensions[0]] = self.drag.size data[self.dimensions[0]] = self.drag.size
element.element.triggerEvent('resizeend', data); element.element.triggerEvent('resizeend', data);
triggerEvents('resizeend', pos); triggerEvents('resizeend', pos);
} }
} }
function getPixelsByPercent(percent) {
return Math.round((
that[self.dimensions[0]]() -
self.options.elements.reduce(function(val, element) {
return val + Ox.isNumber(element.size) ?
element.element[self.dimensions[0]]() : 0;
}, 0) - self.$separators.length
) * parseFloat(percent) / 100);
}
function setPercent(pos) {
var element = self.options.elements[pos],
flex = (
element.size == 'auto' ? self.autoPercent : element.size
).replace('%', ''),
css = {
boxFlex: flex,
MozBoxFlex: flex,
WebkitBoxFlex: flex
};
css[self.dimensions[0]] = '';
Ox.print('setPercent', css)
element.element.css(css);
}
function setPixels(pos) {
var css = {
boxFlex: '',
MozBoxFlex: '',
WebkitBoxFlex: ''
},
element = self.options.elements[pos];
css[self.dimensions[0]] = element.element[self.dimensions[0]]() + 'px';
element.element.css(css);
}
function triggerEvents(event, pos) { function triggerEvents(event, pos) {
var data = {}; var data = {};
self.options.elements.forEach(function(element, i) { self.options.elements.forEach(function(element, i) {
if (i != pos && Ox.isString(element.size)) { if (i != pos && element.size == 'auto') {
data[self.dimensions[0]] = element.element[self.dimensions[0]](); data[self.dimensions[0]] = element.element[self.dimensions[0]]();
element.element.triggerEvent(event, data); element.element.triggerEvent(event, data);
} }
@ -11353,24 +11320,28 @@ requires
} }
that.replaceElement = function(pos, element) { that.replaceElement = function(pos, element) {
var $element = self.options.elements[pos].element; var $element = self.options.elements[pos].element,
size = self.options.elements[pos].size;
$element.replaceWith(self.options.elements[pos].element = element); $element.replaceWith(self.options.elements[pos].element = element);
if (Ox.isNumber(self.options.elements[pos].size)) { if (size == 'auto') {
setPixels(pos); $element.css(self.boxFlexCSS);
} else { } else {
setPercent(pos); $element.css(self.dimensions[0], size + 'px')
} }
return that; return that;
}; };
that.resizeElement = function(pos, size) { that.size = function(pos, size) {
var element = self.options.elements[pos]; var element = self.options.elements[pos],
element.size = size; ret;
if (Ox.isNumber(element.size)) { if (Ox.isUndefined(size)) {
setPixels(pos); ret = element.element[self.dimensions[0]]();
} else { } else {
setPercent(pos); element.size = size;
element.element.css(self.dimensions[0], size + 'px')
ret = that;
} }
return that;
} }
that.toggle = function(pos) { that.toggle = function(pos) {
@ -11381,16 +11352,10 @@ requires
size = element.element[self.dimensions[0]](); size = element.element[self.dimensions[0]]();
if (element.collapsible) { if (element.collapsible) {
element.collapsed = !element.collapsed; element.collapsed = !element.collapsed;
if (Ox.isString(element.size) && element.collapsed) {
setPixels(pos);
}
css['margin' + Ox.toTitleCase(self.edges[0][index])] = css['margin' + Ox.toTitleCase(self.edges[0][index])] =
element.collapsed ? -size : 0; element.collapsed ? -size : 0;
Ox.print('css', css); Ox.print('css', css);
that.animate(css, 250, function() { that.animate(css, 250, function() {
if (Ox.isString(element.size) && !element.collapsed) {
setPercent(pos);
}
element.element.triggerEvent('toggle', {collapsed: element.collapsed}); element.element.triggerEvent('toggle', {collapsed: element.collapsed});
triggerEvents('resize', pos); triggerEvents('resize', pos);
}); });
@ -11420,6 +11385,7 @@ requires
toggle toggle
*/ */
Ox.SplitPanel = function(options, self) { Ox.SplitPanel = function(options, self) {
var self = self || {}, var self = self || {},
that = new Ox.Element({}, self) // fixme: Container that = new Ox.Element({}, self) // fixme: Container
.defaults({ .defaults({
@ -11553,7 +11519,7 @@ requires
return self.options.elements[pos].collapsed; return self.options.elements[pos].collapsed;
}; };
that.replace = function(id, element) { // fixme: should be replaceElement that.replaceElement = function(id, element) {
// 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('replace', pos, element); //Ox.print('replace', pos, element);

20
demos/splitpanel2/index.html
View file

@ -6,6 +6,7 @@
<link rel="stylesheet" type="text/css" href="../../build/css/ox.ui.css"/> <link rel="stylesheet" type="text/css" href="../../build/css/ox.ui.css"/>
<script type="text/javascript" src="../../build/js/jquery-1.5.js"></script> <script type="text/javascript" src="../../build/js/jquery-1.5.js"></script>
<script type="text/javascript" src="../../build/js/ox.js"></script> <script type="text/javascript" src="../../build/js/ox.js"></script>
<script type="text/javascript" src="../../build/js/ox.map.js"></script>
<script type="text/javascript" src="../../build/js/ox.ui.js"></script> <script type="text/javascript" src="../../build/js/ox.ui.js"></script>
<script> <script>
$(function() { $(function() {
@ -42,7 +43,7 @@
element: Ox.Element() element: Ox.Element()
.css({backgroundColor: 'rgb(128, 128, 255)'}) .css({backgroundColor: 'rgb(128, 128, 255)'})
.html('{collapsible: true, size: "10%"}'), .html('{collapsible: true, size: "10%"}'),
size: '10%' size: 24
}, },
{ {
element: five = new Ox.SplitPanel_({ element: five = new Ox.SplitPanel_({
@ -66,19 +67,18 @@
}) })
}, },
{ {
element: Ox.Element() element: new Ox.TreeList({
.css({backgroundColor: 'rgb(255, 160, 255)'}) data: Ox.COUNTRIES
})
}, },
{ {
element: Ox.Element() element: Ox.Element()
.css({ .css({
//position: 'absolute', //position: 'absolute',
top: 16,
bottom: 16,
//display: 'block', //display: 'block',
//top: 15, //top: 15,
//bottom: 0, //bottom: 0,
//height: '100%', //height: '200px',
overflowY: 'scroll' overflowY: 'scroll'
}) })
.append( .append(
@ -97,7 +97,7 @@
collapsible: true, collapsible: true,
element: Ox.Element() element: Ox.Element()
.css({backgroundColor: 'rgb(255, 128, 128)'}), .css({backgroundColor: 'rgb(255, 128, 128)'}),
size: '10%' size: 24
} }
], ],
orientation: 'vertical' orientation: 'vertical'
@ -107,10 +107,8 @@
collapsible: true, collapsible: true,
element: new Ox.Element() element: new Ox.Element()
.css({backgroundColor: 'rgb(255, 255, 0)'}) .css({backgroundColor: 'rgb(255, 255, 0)'})
.html('foo'/*'{collapsible: true, size: "10%", resizable: true, resize: ["5%", "10%", "15%"]}'*/), .html('{collapsible: true, size: "10%", resizable: true, resize: ["5%", "10%", "15%"]}'),
size: '10%', size: 256
resizable: true,
resize: ['5%', '10%', '15%']
} }
], ],
orientation: 'horizontal' orientation: 'horizontal'