fixing a bug where in a list, the click target loop would not exit when items are added or removed on click
This commit is contained in:
parent
5efe54c0e2
commit
c3b59a62fe
8 changed files with 71 additions and 22 deletions
|
@ -3,7 +3,7 @@ Ox.load('UI', {
|
|||
theme: 'classic'
|
||||
}, function() {
|
||||
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({
|
||||
files: Ox.merge([
|
||||
'Ox.js',
|
||||
|
@ -25,9 +25,10 @@ Ox.load('UI', {
|
|||
doc.selectItem(document.location.hash.substring(1));
|
||||
},
|
||||
select: function(data) {
|
||||
if(data.ids)
|
||||
if (data.ids) {
|
||||
document.location.hash = data.ids[0];
|
||||
}
|
||||
}
|
||||
});
|
||||
doc.appendTo(Ox.UI.$body);
|
||||
window.onhashchange = function() {
|
||||
|
|
10
demos/treelist/index.html
Normal file
10
demos/treelist/index.html
Normal 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
36
demos/treelist/js/treelist.js
Normal 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'));
|
||||
|
||||
});
|
||||
|
||||
});
|
|
@ -34,6 +34,7 @@ Ox.DocPage = function(options, self) {
|
|||
});
|
||||
|
||||
function getItem(item, level, name) {
|
||||
Ox.print('getItem', item, level, name)
|
||||
var $elements = [$('<div>')
|
||||
.css({paddingLeft: (level ? level * 32 - 16 : 0) + 'px'})
|
||||
.html(
|
||||
|
|
|
@ -61,9 +61,11 @@ Ox.DocPanel = function(options, self) {
|
|||
});
|
||||
|
||||
function loadList(callback) {
|
||||
|
||||
var counter = 0,
|
||||
length = self.options.files.length;
|
||||
docItems = [];
|
||||
|
||||
self.options.files.forEach(function(file) {
|
||||
Ox.doc(self.options.path + file, function(fileItems) {
|
||||
docItems = Ox.merge(docItems, fileItems);
|
||||
|
@ -134,6 +136,7 @@ Ox.DocPanel = function(options, self) {
|
|||
*/
|
||||
that.$element.replaceElement(0, self.$list);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function getItemByName(name) {
|
||||
|
@ -151,6 +154,7 @@ Ox.DocPanel = function(options, self) {
|
|||
var selected;
|
||||
if (data.ids.length) {
|
||||
selected = data.ids[0];
|
||||
Ox.print('selected', data.ids)
|
||||
if (selected[0] != '_') {
|
||||
self.$page = Ox.DocPage({
|
||||
item: getItemByName(selected)
|
||||
|
|
|
@ -54,13 +54,6 @@ Ox.Element <function:Ox.JQueryElement> Basic UI element object
|
|||
|
||||
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
|
||||
self = self || {};
|
||||
// create defaults and options objects
|
||||
|
|
|
@ -72,8 +72,6 @@ Ox.List = function(options, self) {
|
|||
.options(options || {})
|
||||
.scroll(scroll);
|
||||
|
||||
//that.$content.mousedown(_mousedown);
|
||||
|
||||
that.$content.bindEvent({
|
||||
mousedown: mousedown,
|
||||
singleclick: singleclick,
|
||||
|
@ -94,7 +92,6 @@ Ox.List = function(options, self) {
|
|||
drag: move,
|
||||
dragend: moveend
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// fixme: without this, horizontal lists don't get their full width
|
||||
|
@ -169,7 +166,7 @@ Ox.List = function(options, self) {
|
|||
] = addNextToSelection;
|
||||
}
|
||||
if (self.options.orientation == 'vertical') {
|
||||
$.extend(self.keyboardEvents, {
|
||||
Ox.extend(self.keyboardEvents, {
|
||||
key_left: function() {
|
||||
triggerToggleEvent(false);
|
||||
},
|
||||
|
@ -178,7 +175,7 @@ Ox.List = function(options, self) {
|
|||
}
|
||||
});
|
||||
} else if (self.options.orientation == 'both') {
|
||||
$.extend(self.keyboardEvents, {
|
||||
Ox.extend(self.keyboardEvents, {
|
||||
key_down: selectBelow,
|
||||
key_up: selectAbove
|
||||
});
|
||||
|
@ -458,13 +455,20 @@ Ox.List = function(options, self) {
|
|||
|
||||
function findItemPosition(e) {
|
||||
var $element = $(e.target),
|
||||
$parent,
|
||||
position = -1;
|
||||
while (!$element.hasClass('OxTarget') && !$element.hasClass('OxPage') && !$element.is('body')) {
|
||||
$element = $element.parent();
|
||||
while (
|
||||
!$element.hasClass('OxTarget') && !$element.hasClass('OxPage')
|
||||
&& ($parent = $element.parent()).length
|
||||
) {
|
||||
$element = $parent;
|
||||
}
|
||||
if ($element.hasClass('OxTarget')) {
|
||||
while (!$element.hasClass('OxItem') && !$element.hasClass('OxPage') && !$element.is('body')) {
|
||||
$element = $element.parent();
|
||||
while (
|
||||
!$element.hasClass('OxItem') && !$element.hasClass('OxPage')
|
||||
&& ($parent = $element.parent()).length
|
||||
) {
|
||||
$element = $parent;
|
||||
}
|
||||
if ($element.hasClass('OxItem')) {
|
||||
position = $element.data('position');
|
||||
|
|
|
@ -53,8 +53,8 @@ Ox.TreeList = function(options, self) {
|
|||
.css({
|
||||
width: self.options.width + 'px'
|
||||
})
|
||||
.click(clickItem)
|
||||
.bindEvent({
|
||||
anyclick: clickItem,
|
||||
toggle: toggleItems
|
||||
});
|
||||
|
||||
|
@ -142,7 +142,7 @@ Ox.TreeList = function(options, self) {
|
|||
},
|
||||
type = Ox.typeOf(value);
|
||||
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) {
|
||||
return parseData(k, value[k]);
|
||||
});
|
||||
|
@ -177,8 +177,8 @@ Ox.TreeList = function(options, self) {
|
|||
var $img, pos;
|
||||
item.expanded = expanded;
|
||||
//getItemById(item.id).expanded = expanded;
|
||||
$.each(that.$element.find('.OxItem'), function(i, v) {
|
||||
var $item = $(v);
|
||||
$.each(that.$element.find('.OxItem'), function() {
|
||||
var $item = $(this);
|
||||
if ($item.data('id') == item.id) {
|
||||
$img = $item.find('.OxToggle');
|
||||
pos = $item.data('position');
|
||||
|
|
Loading…
Reference in a new issue