list fires open vent on enter and dblclick

This commit is contained in:
rolux 2010-09-05 22:18:00 +02:00
parent d66c252469
commit 9241b3e66c
2 changed files with 88 additions and 25 deletions

View file

@ -668,6 +668,31 @@ Lists
position: absolute; position: absolute;
} }
.OxIconList .OxPage {
margin: 4px;
}
.OxIconList .OxItem {
float: left;
}
.OxIconList .OxItem > div {
position: relative;
}
.OxIconList .OxItem > .OxIcon > img {
position: absolute;
left: 0;
right: 0;
margin: auto;
}
.OxIconList .OxItem > .OxText > div {
font-size: 9px;
font-weight: bold;
text-align: center;
}
.OxTextList .OxCell { .OxTextList .OxCell {
float: left; float: left;
height: 12px; height: 12px;

View file

@ -5633,7 +5633,8 @@ requires
rowLength: 1, rowLength: 1,
size: 128, size: 128,
type: 'icon', type: 'icon',
}, self) }/*, self*/)
.addClass('OxIconList')
.click(click) .click(click)
.dblclick(dblclick) .dblclick(dblclick)
.scroll(scroll); .scroll(scroll);
@ -5678,6 +5679,8 @@ requires
}) })
.options(options || {}); .options(options || {});
Ox.print('IconItem', options);
$.extend(self, { $.extend(self, {
height: self.options.size * 1.5, height: self.options.size * 1.5,
url: oxui.path + '/png/ox.ui.' + Ox.theme() + '/icon.png', url: oxui.path + '/png/ox.ui.' + Ox.theme() + '/icon.png',
@ -5697,11 +5700,11 @@ requires
}); });
that.$iconImage = $('<img>') that.$iconImage = $('<img>')
.attr({ .attr({
src: self.url src: self.options.url
}) })
.css({ .css({
width: iconWidth + 'px', //width: self.options.size + 'px',
height: iconHeight + 'px' //height: self.options.size + 'px'
}) })
.mouseenter(mouseenter) .mouseenter(mouseenter)
.mouseleave(mouseleave) .mouseleave(mouseleave)
@ -5731,7 +5734,7 @@ requires
that.$reflectionImage = $('<img>') that.$reflectionImage = $('<img>')
.addClass('OxReflection') .addClass('OxReflection')
.attr({ .attr({
src: self.url src: /*self.url*/self.options.url
}) })
.css({ .css({
width: self.options.width + 'px', width: self.options.width + 'px',
@ -5786,6 +5789,7 @@ requires
itemWidth: 16, itemWidth: 16,
keys: [], keys: [],
orientation: 'vertical', orientation: 'vertical',
pageLength: 100,
request: function() {}, // {sort:, range:, callback:}, without parameter returns {items, size etc.} request: function() {}, // {sort:, range:, callback:}, without parameter returns {items, size etc.}
rowLength: 1, rowLength: 1,
sort: [], sort: [],
@ -5799,6 +5803,7 @@ requires
$.extend(self, { $.extend(self, {
$items: [], $items: [],
$pages: [], $pages: [],
clickTimeout: 0,
ids: {}, ids: {},
keyboardEvents: { keyboardEvents: {
key_alt_control_a: invertSelection, key_alt_control_a: invertSelection,
@ -5812,7 +5817,6 @@ requires
key_space: preview key_space: preview
}, },
page: 0, page: 0,
pageLength: 100,
preview: false, preview: false,
requests: [], requests: [],
selected: [] selected: []
@ -5902,20 +5906,42 @@ requires
} }
function click(e) { function click(e) {
var $element = $(e.target), pos; Ox.print('click')
var $item = findItem(e),
pos,
deselectTimeout = false;
selectTimeout = false;
that.gainFocus(); that.gainFocus();
while (!$element.hasClass('OxItem') && !$element.hasClass('OxPage')) { if ($item) {
$element = $element.parent(); if (!self.clickTimeout) {
} // click
if ($element.hasClass('OxItem')) { pos = $item.data('position');
Ox.print($element.attr('id'), $element.data('position')); if (e.metaKey) {
pos = $element.data('position'); if (!isSelected(pos)) {
if (e.shiftKey) { addToSelection(pos);
addAllToSelection(pos); } else {
} else if (e.metaKey) { deselectTimeout = true;
toggleSelection(pos); }
} else if (e.shiftKey) {
addAllToSelection(pos);
} else if (!isSelected(pos)) {
select(pos);
} else {
selectTimeout = true;
}
self.clickTimeout = setTimeout(function() {
self.clickTimeout = 0;
if (deselectTimeout) {
deselect(pos);
} else if (selectTimeout) {
select(pos);
}
}, 250);
} else { } else {
select(pos); // dblclick
clearTimeout(self.clickTimeout);
self.clickTimeout = 0;
open();
} }
} else { } else {
selectNone(); selectNone();
@ -5932,6 +5958,18 @@ requires
} }
} }
function findItem(e) {
var $element = $(e.target),
$item = null;
while (!$element.hasClass('OxItem') && !$element.hasClass('OxPage') && !$element.is('body')) {
$element = $element.parent();
}
if ($element.hasClass('OxItem')) {
$item = $element;
}
return $item;
}
function getHeight() { function getHeight() {
return that.height() - (that.$content.width() > that.width() ? oxui.scrollbarSize : 0); return that.height() - (that.$content.width() > that.width() ? oxui.scrollbarSize : 0);
} }
@ -6029,9 +6067,9 @@ requires
} }
var keys = $.inArray('id', self.options.keys) > -1 ? self.options.keys : var keys = $.inArray('id', self.options.keys) > -1 ? self.options.keys :
$.merge(self.options.keys, ['id']), $.merge(self.options.keys, ['id']),
offset = page * self.pageLength, offset = page * self.options.pageLength,
range = [offset, offset + (page < self.pages - 1 ? range = [offset, offset + (page < self.pages - 1 ?
self.pageLength : self.listLength % self.pageLength)]; self.options.pageLength : self.listLength % self.options.pageLength)];
if (Ox.isUndefined(self.$pages[page])) { if (Ox.isUndefined(self.$pages[page])) {
self.requests.push(self.options.request({ self.requests.push(self.options.request({
callback: function(result) { callback: function(result) {
@ -6281,11 +6319,11 @@ requires
$.extend(self, { $.extend(self, {
listHeight: result.data.items * self.options.itemHeight, // fixme: should be listSize listHeight: result.data.items * self.options.itemHeight, // fixme: should be listSize
listLength: result.data.items, listLength: result.data.items,
pages: Math.ceil(result.data.items / self.pageLength), pages: Math.ceil(result.data.items / self.options.pageLength),
pageWidth: self.options.orientation == 'horizontal' ? pageWidth: self.options.orientation == 'horizontal' ?
self.pageLength * self.options.itemWidth : 0, self.options.pageLength * self.options.itemWidth : 0,
pageHeight: self.options.orientation == 'horizontal' ? 0 : pageHeight: self.options.orientation == 'horizontal' ? 0 :
self.pageLength * self.options.itemHeight / self.options.rowLength self.options.pageLength * self.options.itemHeight / self.options.rowLength
}); });
that.$content.css({ that.$content.css({
height: self.listHeight + 'px' height: self.listHeight + 'px'
@ -6413,7 +6451,7 @@ requires
}) })
}); });
$.extend(self, { $.extend(self, {
pageHeight: self.pageLength * self.itemHeight pageHeight: self.options.pageLength * self.itemHeight
}); });
// Head // Head