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

fixing a bug where in a list, the click target loop would not exit when items are added or removed on click

Browse source
This commit is contained in:
rlx 2011-09-05 05:40:44 +00:00
parent 5efe54c0e2
commit c3b59a62fe
8 changed files with 71 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
demos/doc2/js/doc.js
View file

@ -3,7 +3,7 @@ Ox.load('UI', {
theme: 'classic' theme: 'classic'
}, function() { }, function() {
Ox.Theme('classic'); Ox.Theme('classic');
$.getJSON(Ox.UI.PATH + 'json/Ox.UI.json', function(files) { $.getJSON(Ox.UI.PATH + 'json/Ox.UI.files.json', function(files) {
doc = Ox.DocPanel({ doc = Ox.DocPanel({
files: Ox.merge([ files: Ox.merge([
'Ox.js', 'Ox.js',
@ -25,9 +25,10 @@ Ox.load('UI', {
doc.selectItem(document.location.hash.substring(1)); doc.selectItem(document.location.hash.substring(1));
}, },
select: function(data) { select: function(data) {
if(data.ids) if (data.ids) {
document.location.hash = data.ids[0]; document.location.hash = data.ids[0];
} }
}
}); });
doc.appendTo(Ox.UI.$body); doc.appendTo(Ox.UI.$body);
window.onhashchange = function() { window.onhashchange = function() {

10
demos/treelist/index.html Normal file
View file

@ -0,0 +1,10 @@
<!DOCTYPE HTML>
<html>
<head>
<title>OxJS TreeList Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="../../build/Ox.js"></script>
<script type="text/javascript" src="js/treelist.js"></script>
</head>
<body></body>
</html>

36
demos/treelist/js/treelist.js Normal file
View file

@ -0,0 +1,36 @@
Ox.load('UI', {debug: true}, function() {
Ox.load('Geo', function() {
var $treeList = new Ox.TreeList({
data: {'Ox.COUNTRIES': Ox.COUNTRIES}
}),
$debug = new Ox.Element('div'),
$button = new Ox.Button({
title: 'Debug'
})
.bindEvent({
click: function() {
$text.html(JSON.stringify($treeList.$element.options('items')))
}
})
.appendTo($debug),
$text = new Ox.Element('div').appendTo($debug),
$splitPanel = new Ox.SplitPanel({
elements: [
{
element: $treeList,
size: 256,
resizable: true,
resize: [128, 256, 384]
},
{
element: $debug
}
],
orientation: 'horizontal'
}).appendTo($('body'));
});
});

1
source/Ox.UI/js/Core/Ox.DocPage.js
View file

@ -34,6 +34,7 @@ Ox.DocPage = function(options, self) {
}); });
function getItem(item, level, name) { function getItem(item, level, name) {
Ox.print('getItem', item, level, name)
var $elements = [$('<div>') var $elements = [$('<div>')
.css({paddingLeft: (level ? level * 32 - 16 : 0) + 'px'}) .css({paddingLeft: (level ? level * 32 - 16 : 0) + 'px'})
.html( .html(

4
source/Ox.UI/js/Core/Ox.DocPanel.js
View file

@ -61,9 +61,11 @@ Ox.DocPanel = function(options, self) {
}); });
function loadList(callback) { function loadList(callback) {
var counter = 0, var counter = 0,
length = self.options.files.length; length = self.options.files.length;
docItems = []; docItems = [];
self.options.files.forEach(function(file) { self.options.files.forEach(function(file) {
Ox.doc(self.options.path + file, function(fileItems) { Ox.doc(self.options.path + file, function(fileItems) {
docItems = Ox.merge(docItems, fileItems); docItems = Ox.merge(docItems, fileItems);
@ -134,6 +136,7 @@ Ox.DocPanel = function(options, self) {
*/ */
that.$element.replaceElement(0, self.$list); that.$element.replaceElement(0, self.$list);
} }
} }
function getItemByName(name) { function getItemByName(name) {
@ -151,6 +154,7 @@ Ox.DocPanel = function(options, self) {
var selected; var selected;
if (data.ids.length) { if (data.ids.length) {
selected = data.ids[0]; selected = data.ids[0];
Ox.print('selected', data.ids)
if (selected[0] != '_') { if (selected[0] != '_') {
self.$page = Ox.DocPage({ self.$page = Ox.DocPage({
item: getItemByName(selected) item: getItemByName(selected)

7
source/Ox.UI/js/Core/Ox.Element.js
View file

@ -54,13 +54,6 @@ Ox.Element <function:Ox.JQueryElement> Basic UI element object
Ox.Element = function(options, self) { Ox.Element = function(options, self) {
/*
// allow for 'Ox.Element()' instead of 'Ox.Element()'
if (!(this instanceof arguments.callee)) {
return new arguments.callee(options, self);
}
*/
// create private object // create private object
self = self || {}; self = self || {};
// create defaults and options objects // create defaults and options objects

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

@ -72,8 +72,6 @@ Ox.List = function(options, self) {
.options(options || {}) .options(options || {})
.scroll(scroll); .scroll(scroll);
//that.$content.mousedown(_mousedown);
that.$content.bindEvent({ that.$content.bindEvent({
mousedown: mousedown, mousedown: mousedown,
singleclick: singleclick, singleclick: singleclick,
@ -94,7 +92,6 @@ Ox.List = function(options, self) {
drag: move, drag: move,
dragend: moveend dragend: moveend
}); });
} }
// fixme: without this, horizontal lists don't get their full width // fixme: without this, horizontal lists don't get their full width
@ -169,7 +166,7 @@ Ox.List = function(options, self) {
] = addNextToSelection; ] = addNextToSelection;
} }
if (self.options.orientation == 'vertical') { if (self.options.orientation == 'vertical') {
$.extend(self.keyboardEvents, { Ox.extend(self.keyboardEvents, {
key_left: function() { key_left: function() {
triggerToggleEvent(false); triggerToggleEvent(false);
}, },
@ -178,7 +175,7 @@ Ox.List = function(options, self) {
} }
}); });
} else if (self.options.orientation == 'both') { } else if (self.options.orientation == 'both') {
$.extend(self.keyboardEvents, { Ox.extend(self.keyboardEvents, {
key_down: selectBelow, key_down: selectBelow,
key_up: selectAbove key_up: selectAbove
}); });
@ -458,13 +455,20 @@ Ox.List = function(options, self) {
function findItemPosition(e) { function findItemPosition(e) {
var $element = $(e.target), var $element = $(e.target),
$parent,
position = -1; position = -1;
while (!$element.hasClass('OxTarget') && !$element.hasClass('OxPage') && !$element.is('body')) { while (
$element = $element.parent(); !$element.hasClass('OxTarget') && !$element.hasClass('OxPage')
&& ($parent = $element.parent()).length
) {
$element = $parent;
} }
if ($element.hasClass('OxTarget')) { if ($element.hasClass('OxTarget')) {
while (!$element.hasClass('OxItem') && !$element.hasClass('OxPage') && !$element.is('body')) { while (
$element = $element.parent(); !$element.hasClass('OxItem') && !$element.hasClass('OxPage')
&& ($parent = $element.parent()).length
) {
$element = $parent;
} }
if ($element.hasClass('OxItem')) { if ($element.hasClass('OxItem')) {
position = $element.data('position'); position = $element.data('position');

8
source/Ox.UI/js/List/Ox.TreeList.js
View file

@ -53,8 +53,8 @@ Ox.TreeList = function(options, self) {
.css({ .css({
width: self.options.width + 'px' width: self.options.width + 'px'
}) })
.click(clickItem)
.bindEvent({ .bindEvent({
anyclick: clickItem,
toggle: toggleItems toggle: toggleItems
}); });
@ -142,7 +142,7 @@ Ox.TreeList = function(options, self) {
}, },
type = Ox.typeOf(value); type = Ox.typeOf(value);
if (type == 'array' || type == 'object') { if (type == 'array' || type == 'object') {
ret.title += Ox.toTitleCase(type); ret.title += Ox.toTitleCase(type) + ' [' + Ox.len(value) + ']';
ret.items = Ox.map(Ox.sort(Ox.keys(value)), function(k) { ret.items = Ox.map(Ox.sort(Ox.keys(value)), function(k) {
return parseData(k, value[k]); return parseData(k, value[k]);
}); });
@ -177,8 +177,8 @@ Ox.TreeList = function(options, self) {
var $img, pos; var $img, pos;
item.expanded = expanded; item.expanded = expanded;
//getItemById(item.id).expanded = expanded; //getItemById(item.id).expanded = expanded;
$.each(that.$element.find('.OxItem'), function(i, v) { $.each(that.$element.find('.OxItem'), function() {
var $item = $(v); var $item = $(this);
if ($item.data('id') == item.id) { if ($item.data('id') == item.id) {
$img = $item.find('.OxToggle'); $img = $item.find('.OxToggle');
pos = $item.data('position'); pos = $item.data('position');