sanj/oxjs
1
0
Fork 0
forked from 0x2620/oxjs
Code Pull requests Activity

simpler text list column head elements, better column drag

Browse source
This commit is contained in:
rlx 2011-09-09 10:41:13 +00:00
commit 0ba258281f
12 changed files with 461 additions and 330 deletions
Download patch file Download diff file Expand all files Collapse all files

53
source/Ox.UI/css/Ox.UI.css
View file

@ -1105,25 +1105,23 @@ Lists
//-moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.75);
//-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.75);
}
.OxTextList .OxBar .OxHead {
.OxTextList .OxHead {
position: absolute;
left: 0;
height: 16px;
overflow: hidden;
white-space: nowrap;
}
.OxTextList .OxBar .OxCell {
.OxTextList .OxHead .OxHeadCell {
float: left;
padding: 2px 4px 2px 4px;
height: 12px;
}
.OxTextList .OxBar .OxCell:nthChild(1) {
margin-left: 0;
.OxTextList .OxHead .OxHeadCell:first-child {
padding-left: 2px;
}
.OxTextList .OxBar .OxTitle {
.OxTextList .OxHead .OxTitle {
float: left;
height: 15px;
padding: 1px 2px 0 2px;
height: 14px;
padding: 2px 2px 0 2px;
font-weight: bold;
font-size: 10px;
text-overflow: ellipsis;
@ -1131,47 +1129,34 @@ Lists
overflow: hidden;
white-space: nowrap;
}
.OxTextList .OxBar .OxTitle img {
width: 16px;
height: 16px;
margin: -1px 0 0 -4px;
}
.OxTextList .OxBar .OxTitle:first-child {
padding-left: 4px;
}
.OxTextList .OxBar .OxOrder {
float: left;
.OxTextList .OxHead .OxTitle img {
width: 10px;
height: 13px;
padding: 3px 0 0 6px;
font-size: 7px;
height: 10px;
margin: 1px 0 0 -1px;
}
.OxTextList .OxHead .OxOrder {
float: left;
display: none;
}
.OxTextList .OxBar .OxOrder.OxSelected {
.OxTextList .OxHead .OxHeadCell.OxSelected .OxOrder {
//cursor: pointer;
display: block;
}
.OxTextList .OxBar .OxResize {
.OxTextList .OxHead .OxResize {
float: left;
width: 5px;
height: 16px;
}
.OxTextList .OxBar .OxResize.OxResizable {
.OxTextList .OxHead .OxResize.OxResizable {
cursor: ew-resize;
}
.OxTextList .OxBar .OxResize .OxLeft,
.OxTextList .OxBar .OxResize .OxCenter,
.OxTextList .OxBar .OxResize .OxRight {
.OxTextList .OxHead .OxResize div {
float: left;
width: 2px;
height: 16px;
}
.OxTextList .OxBar .OxResize .OxLeft,
.OxTextList .OxBar .OxResize .OxRight {
width: 2px;
}
.OxTextList .OxBar .OxResize .OxCenter {
.OxTextList .OxHead .OxResize div.OxCenter {
width: 1px;
background: rgb(24, 24, 24);
}
.OxTextList .OxBar .OxSelect {
position: absolute;

11
source/Ox.UI/js/Core/Ox.Clipboard.js
View file

@ -1,13 +1,10 @@
// vim: et:ts=4:sw=4:sts=4:ft=javascript
/*@
Ox.Clipboard <o> Basic clipboard handler
copy <f> copy to clipbloard
(data) -> <u> set clipboard to data
paste <f> paste from clipbload
() -> <o> get clipboard data
_print <f> debug function
() -> <u> print clipboard contents to console
data <o> clipboard object
copy <f> Copy data to clipboard
(data) -> <u> undefined
paste <f> Paste data from clipboard
() -> <*> Clipboard data
@*/
Ox.Clipboard = function() {
var clipboard = {};

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

@ -309,6 +309,8 @@ Ox.List = function(options, self) {
}
function copyItems() {
// fixme: both copy and paste should just deal with Ox.Clipboard,
// and use a "type"
self.options.selected.length && that.triggerEvent('copy', {
ids: self.options.selected
});
@ -653,7 +655,7 @@ Ox.List = function(options, self) {
if (self.$items.length == 0) {
return self.options.selected;
} else {
return $.map(self.selected, function(pos) {
return self.selected.map(function(pos) {
return self.$items[pos].options('data')[self.options.unique];
});
}
@ -826,7 +828,7 @@ Ox.List = function(options, self) {
});
that.triggerEvent('move', {
//id: id,
ids: $.map(self.$items, function($item) {
ids: self.$items.map(function($item) {
return $item.options('data')[self.options.unique];
})
//position: pos

345
source/Ox.UI/js/List/Ox.TextList.js
View file

@ -81,59 +81,59 @@ Ox.TextList = function(options, self) {
keys: find
});
self.options.columns.forEach(function(v) { // fixme: can this go into a generic ox.js function?
self.options.columns.forEach(function(column) { // fixme: can this go into a generic ox.js function?
// fixme: and can't these just remain undefined?
if (Ox.isUndefined(v.align)) {
v.align = 'left';
if (Ox.isUndefined(column.align)) {
column.align = 'left';
}
if (Ox.isUndefined(v.clickable)) {
v.clickable = false;
if (Ox.isUndefined(column.clickable)) {
column.clickable = false;
}
if (Ox.isUndefined(v.editable)) {
v.editable = false;
if (Ox.isUndefined(column.editable)) {
column.editable = false;
}
if (Ox.isUndefined(v.unique)) {
v.unique = false;
if (Ox.isUndefined(column.unique)) {
column.unique = false;
}
if (Ox.isUndefined(v.visible)) {
v.visible = false;
if (Ox.isUndefined(column.visible)) {
column.visible = false;
}
if (v.unique) {
self.unique = v.id;
if (column.unique) {
self.unique = column.id;
}
});
$.extend(self, {
Ox.extend(self, {
columnPositions: [],
defaultColumnWidths: $.map(self.options.columns, function(v) {
return v.defaultWidth || v.width;
defaultColumnWidths: self.options.columns.map(function(column) {
return column.defaultWidth || column.width;
}),
itemHeight: 16,
page: 0,
pageLength: 100,
scrollLeft: 0,
selectedColumn: getColumnIndexById(self.options.sort[0].key),
visibleColumns: $.map(self.options.columns, function(v) {
return v.visible ? v : null;
visibleColumns: self.options.columns.filter(function(column) {
return column.visible;
})
});
// fixme: there might be a better way than passing both visible and position
self.options.columns.forEach(function(v) {
if (!Ox.isUndefined(v.position)) {
self.visibleColumns[v.position] = v;
self.options.columns.forEach(function(column) {
if (!Ox.isUndefined(column.position)) {
self.visibleColumns[column.position] = column;
}
});
$.extend(self, {
columnWidths: $.map(self.visibleColumns, function(v, i) {
return v.width;
Ox.extend(self, {
columnWidths: self.visibleColumns.map(function(column) {
return column.width;
}),
pageHeight: self.options.pageLength * self.itemHeight
});
self.format = {};
self.options.columns.forEach(function(v, i) {
if (v.format) {
self.format[v.id] = v.format;
self.options.columns.forEach(function(column) {
if (column.format) {
self.format[column.id] = column.format;
}
});
@ -147,7 +147,8 @@ Ox.TextList = function(options, self) {
that.$head = Ox.Container()
.addClass('OxHead')
.css({
right: self.options.scrollbarVisible ? Ox.UI.SCROLLBAR_SIZE + 'px' : 0
right: self.options.scrollbarVisible
? Ox.UI.SCROLLBAR_SIZE + 'px' : 0
})
.appendTo(that.$bar);
that.$head.$content.addClass('OxTitles');
@ -155,13 +156,13 @@ Ox.TextList = function(options, self) {
if (self.options.columnsRemovable) {
that.$select = Ox.Select({
id: self.options.id + 'SelectColumns',
items: $.map(self.options.columns, function(v, i) {
items: self.options.columns.map(function(column) {
return {
checked: v.visible,
disabled: v.removable === false,
id: v.id,
title: v.title
}
checked: column.visible,
disabled: column.removable === false,
id: column.id,
title: column.title
};
}),
max: -1,
min: 1,
@ -195,7 +196,7 @@ Ox.TextList = function(options, self) {
sortable: self.options.sortable,
type: 'text',
unique: self.unique
}, $.extend({}, self)) // pass event handler
}, Ox.extend({}, self)) // pass event handler
.addClass('OxBody')
.css({
top: (self.options.columnsVisible ? 16 : 0) + 'px',
@ -305,83 +306,87 @@ Ox.TextList = function(options, self) {
}
function constructHead() {
var offset = 0;
that.$titles = [];
self.columnOffsets = [];
self.visibleColumns.forEach(function(v, i) {
var $order, $resize, $left, $center, $right;
offset += self.columnWidths[i];
self.columnOffsets[i] = offset - self.columnWidths[i] / 2;
that.$titles[i] = Ox.Element()
.addClass('OxTitle OxColumn' + Ox.toTitleCase(v.id))
.css({
width: (self.columnWidths[i] - 9) + 'px',
textAlign: v.align
})
.html(v.title)
self.$heads = [];
self.$titles = [];
self.$orderButtons = [];
self.visibleColumns.forEach(function(column, i) {
var $resize;
self.$heads[i] = Ox.Element()
.addClass('OxHeadCell OxColumn' + Ox.toTitleCase(column.id))
.css({width: self.columnWidths[i] - 5 + 'px'})
.appendTo(that.$head.$content.$element);
// if sort operator is set, bind click event
if (v.operator) {
that.$titles[i].bindEvent({
anyclick: function(event, e) {
clickColumn(v.id);
if (column.operator) {
self.$heads[i].bindEvent({
anyclick: function() {
clickColumn(column.id);
}
});
}
// if columns are movable, bind drag events
if (self.options.columnsMovable) {
that.$titles[i].bindEvent({
self.$heads[i].bindEvent({
dragstart: function(event, e) {
dragstartColumn(v.id, e);
dragstartColumn(column.id, e);
},
drag: function(event, e) {
dragColumn(v.id, e);
dragColumn(column.id, e);
},
dragend: function(event, e) {
dragendColumn(v.id, e);
dragendColumn(column.id, e);
}
})
}
$order = $('<div>')
.addClass('OxOrder')
.html(Ox.UI.symbols['triangle_' + (
v.operator == '+' ? 'up' : 'down'
)])
.click(function() {
$(this).prev().trigger('click')
self.$titles[i] = Ox.Element()
.addClass('OxTitle')
.css({
width: self.columnWidths[i] - 9 + 'px',
textAlign: column.align
})
.appendTo(that.$head.$content.$element);
.html(column.title)
.appendTo(self.$heads[i]);
self.$orderButtons[i] = Ox.Button({
style: 'symbol',
title: column.operator == '+' ? 'up' : 'down',
type: 'image'
})
.addClass('OxOrder')
.css({marginTop: (column.operator == '+' ? 1 : -1) + 'px'})
.click(function() {
$(this).parent().trigger('click');
})
.appendTo(self.$heads[i]);
$resize = Ox.Element()
.addClass('OxResize')
.appendTo(that.$head.$content.$element);
$('<div>').appendTo($resize);
$('<div>').addClass('OxCenter').appendTo($resize);
$('<div>').appendTo($resize);
// if columns are resizable, bind click and drag events
if (self.options.columnsResizable) {
$resize.addClass('OxResizable')
.bindEvent({
doubleclick: function(event, e) {
resetColumn(v.id, e);
resetColumn(column.id, e);
},
dragstart: function(event, e) {
dragstartResize(v.id, e);
dragstartResize(column.id, e);
},
drag: function(event, e) {
dragResize(v.id, e);
dragResize(column.id, e);
},
dragend: function(event, e) {
dragendResize(v.id, e);
dragendResize(column.id, e);
}
});
}
$left = $('<div>').addClass('OxLeft').appendTo($resize.$element);
$center = $('<div>').addClass('OxCenter').appendTo($resize.$element);
$right = $('<div>').addClass('OxRight').appendTo($resize.$element);
});
that.$head.$content.css({
width: (Ox.sum(self.columnWidths) + 2) + 'px'
});
if (getColumnPositionById(self.options.columns[self.selectedColumn].id) > -1) { // fixme: save in var
toggleSelected(self.options.columns[self.selectedColumn].id);
that.$titles[getColumnPositionById(self.options.columns[self.selectedColumn].id)].css({
self.$titles[getColumnPositionById(self.options.columns[self.selectedColumn].id)].css({
width: (self.options.columns[self.selectedColumn].width - 25) + 'px'
});
}
@ -419,56 +424,39 @@ Ox.TextList = function(options, self) {
return $item;
}
function formatValue(key, value, data) {
// fixme: this may be obscure...
// since the format of a value may depend on another value,
// we pass all data as a second parameter to the supplied format function
var format = self.format[key];
if (value === null) {
value = '';
} else if (format) {
value = Ox.isObject(format) ?
Ox['format' + Ox.toTitleCase(format.type)]
.apply(this, Ox.merge([value], format.args || [])) :
format(value, data);
} else if (Ox.isArray(value)) {
value = value.join(', ');
}
return value;
}
function dragstartColumn(id, e) {
self.drag = {
startX: e.clientX,
columnOffsets: getColumnOffsets(),
// fixme: doesn't take into account horizontal scroll
listOffset: that.$element.offset().left,
startPos: getColumnPositionById(id)
}
$.extend(self.drag, {
stopPos: self.drag.startPos,
offsets: $.map(self.visibleColumns, function(v, i) {
return self.columnOffsets[i] - self.columnOffsets[self.drag.startPos]
})
});
$('.OxColumn' + Ox.toTitleCase(id)).css({
opacity: 0.25
});
that.$titles[self.drag.startPos].addClass('OxDrag').css({ // fixme: why does the class not work?
self.drag.stopPos = self.drag.startPos;
$('.OxColumn' + Ox.toTitleCase(id)).css({opacity: 0.25});
self.drag.startPos > 0 && self.$heads[self.drag.startPos].prev().children().eq(2).css({opacity: 0.25});
self.$heads[self.drag.startPos].next().children().eq(0).css({opacity: 0.25});
self.$heads[self.drag.startPos].addClass('OxDrag').css({ // fixme: why does the class not work?
cursor: 'move'
});
//Ox.print('columnOffsets', self.drag.columnOffsets)
}
function dragColumn(id, e) {
var d = e.clientX - self.drag.startX,
pos = self.drag.stopPos;
Ox.forEach(self.drag.offsets, function(v, i) {
if (d < 0 && d < v) {
var pos = self.drag.stopPos;
Ox.forEach(self.drag.columnOffsets, function(offset, i) {
var x = self.drag.listOffset + offset + self.columnWidths[i] / 2;
if (i < self.drag.startPos && e.clientX < x) {
self.drag.stopPos = i;
return false;
} else if (d > 0 && d > v) {
} else if (i > self.drag.startPos && e.clientX > x) {
self.drag.stopPos = i;
}
});
if (self.drag.stopPos != pos) {
moveColumn(id, self.drag.stopPos);
self.drag.columnOffsets = getColumnOffsets();
self.drag.startPos = self.drag.stopPos;
//Ox.print('columnOffsets', self.drag.columnOffsets)
}
}
@ -479,10 +467,8 @@ Ox.TextList = function(options, self) {
self.columnWidths.splice(self.drag.stopPos, 0, width);
that.$head.$content.empty();
constructHead();
$('.OxColumn' + Ox.toTitleCase(id)).css({
opacity: 1
});
that.$titles[self.drag.stopPos].removeClass('OxDrag').css({
$('.OxColumn' + Ox.toTitleCase(id)).css({opacity: 1});
self.$heads[self.drag.stopPos].removeClass('OxDrag').css({
cursor: 'pointer'
});
that.$body.clearCache();
@ -492,14 +478,13 @@ Ox.TextList = function(options, self) {
function dragstartResize(id, e) {
var pos = getColumnPositionById(id);
self.drag = {
startX: e.clientX,
startWidth: self.columnWidths[pos]
};
}
function dragResize(id, e) {
var width = Ox.limit(
self.drag.startWidth - self.drag.startX + e.clientX,
self.drag.startWidth + e.clientDX,
self.options.columnWidth[0],
self.options.columnWidth[1]
);
@ -531,6 +516,24 @@ Ox.TextList = function(options, self) {
});
}
function formatValue(key, value, data) {
// fixme: this may be obscure...
// since the format of a value may depend on another value,
// we pass all data as a second parameter to the supplied format function
var format = self.format[key];
if (value === null) {
value = '';
} else if (format) {
value = Ox.isObject(format) ?
Ox['format' + Ox.toTitleCase(format.type)]
.apply(this, Ox.merge([value], format.args || [])) :
format(value, data);
} else if (Ox.isArray(value)) {
value = value.join(', ');
}
return value;
}
function getCell(id, key) {
Ox.print('getCell', id, key)
var $item = getItem(id);
@ -538,6 +541,14 @@ Ox.TextList = function(options, self) {
return $($item.find('.OxCell.OxColumn' + Ox.toTitleCase(key))[0]);
}
function getColumnOffsets() {
return self.visibleColumns.map(function(column, i) {
return Ox.sum(self.visibleColumns.map(function(column_, i_) {
return i_ < i ? self.columnWidths[i_] : 0;
}));
});
}
function getColumnIndexById(id) {
return Ox.getPositionById(self.options.columns, id);
}
@ -549,10 +560,10 @@ Ox.TextList = function(options, self) {
function getItem(id) {
//Ox.print('getItem', id)
var $item = null;
$.each(that.find('.OxItem'), function(i, v) {
$v = $(v);
if ($v.data('id') == id) {
$item = $v;
that.find('.OxItem').each(function() {
$this = $(this);
if ($this.data('id') == id) {
$item = $this;
return false;
}
});
@ -579,37 +590,50 @@ Ox.TextList = function(options, self) {
}
function moveColumn(id, pos) {
// fixme: column head should be one element, not three
//Ox.print('moveColumn', id, pos)
var startPos = getColumnPositionById(id),
stopPos = pos,
startClassName = '.OxColumn' + Ox.toTitleCase(id),
stopClassName = '.OxColumn' + Ox.toTitleCase(self.visibleColumns[stopPos].id),
startSelector = '.OxColumn' + Ox.toTitleCase(id),
stopSelector = '.OxColumn' + Ox.toTitleCase(self.visibleColumns[stopPos].id),
insert = startPos < stopPos ? 'insertAfter' : 'insertBefore'
$column = $('.OxTitle' + startClassName),
$order = $column.next(),
$resize = $order.next();
//Ox.print(startClassName, insert, stopClassName)
$column.detach()[insert](insert == 'insertAfter' ? $('.OxTitle' + stopClassName).next().next() : $('.OxTitle' + stopClassName));
$order.detach().insertAfter($column);
$resize.detach().insertAfter($order);
$.each(that.$body.find('.OxItem'), function(i, v) {
var $v = $(v);
$v.children(startClassName).detach()[insert]($v.children(stopClassName));
$column = $('.OxHeadCell' + startSelector),
$resize = $column.next();
//Ox.print(startSelector, insert, stopSelector)
$column.detach()[insert](insert == 'insertAfter'
? $('.OxHeadCell' + stopSelector).next()
: $('.OxHeadCell' + stopSelector));
$resize.detach().insertAfter($column);
that.$body.find('.OxItem').each(function() {
var $this = $(this);
$this.children(startSelector).detach()[insert](
$this.children(stopSelector)
);
});
var column = self.visibleColumns.splice(startPos, 1)[0],
width = self.columnWidths.splice(startPos, 1)[0];
self.visibleColumns.splice(stopPos, 0, column);
self.columnWidths.splice(stopPos, 0, width);
var $head = self.$heads.splice(startPos, 1)[0],
columnWidth = self.columnWidths.splice(startPos, 1)[0],
visibleColumn = self.visibleColumns.splice(startPos, 1)[0];
self.$heads.splice(stopPos, 0, $head);
self.columnWidths.splice(stopPos, 0, columnWidth);
self.visibleColumns.splice(stopPos, 0, visibleColumn);
var pos = getColumnPositionById(self.options.columns[self.selectedColumn].id);
if (pos > -1) {
that.$element.find('.OxResize .OxSelected').removeClass('OxSelected');
pos > 0 && self.$heads[pos].prev().children().eq(2).addClass('OxSelected');
self.$heads[pos].next().children().eq(0).addClass('OxSelected');
if (pos == stopPos) {
pos > 0 && self.$heads[pos].prev().children().eq(2).css({opacity: 0.25});
self.$heads[pos].next().children().eq(0).css({opacity: 0.25});
}
}
}
function removeColumn(id) {
//Ox.print('removeColumn', id);
var className = '.OxColumn' + Ox.toTitleCase(id),
index = getColumnIndexById(id),
var index = getColumnIndexById(id),
itemWidth,
position = getColumnPositionById(id),
$column = $('.OxTitle' + className),
selector = '.OxColumn' + Ox.toTitleCase(id),
$column = $('.OxHeadCell ' + selector),
$order = $column.next(),
$resize = $order.next();
self.options.columns[index].visible = false;
@ -618,19 +642,17 @@ Ox.TextList = function(options, self) {
that.$head.$content.empty();
constructHead();
itemWidth = getItemWidth();
$.each(that.$body.find('.OxItem'), function(i, v) {
var $v = $(v);
$v.children(className).remove();
$v.css({
width: itemWidth + 'px'
});
that.$body.find('.OxItem').each(function() {
var $this = $(this);
$this.children(selector).remove();
$this.css({width: itemWidth + 'px'});
});
that.$body.$content.css({
width: itemWidth + 'px'
});
that.$body.options({
keys: Ox.merge(self.visibleColumns.map(function(column) {
return colum.id;
return column.id;
}), self.options.keys)
});
//that.$body.clearCache();
@ -654,12 +676,15 @@ Ox.TextList = function(options, self) {
that.$head.$content.css({
width: (Ox.sum(self.columnWidths) + 2) + 'px'
});
that.$titles[pos].css({
width: (width - 9 - (i == self.selectedColumn ? 16 : 0)) + 'px'
self.$heads[pos].css({
width: width - 5 + 'px'
});
self.$titles[pos].css({
width: width - 9 - (i == self.selectedColumn ? 16 : 0) + 'px'
});
}
that.$element.find('.OxCell.OxColumn' + Ox.toTitleCase(self.options.columns[i].id)).css({
width: (width - (self.options.columnsVisible ? 9 : 8)) + 'px'
width: width - (self.options.columnsVisible ? 9 : 8) + 'px'
});
setWidth();
}
@ -678,13 +703,12 @@ Ox.TextList = function(options, self) {
var pos = getColumnPositionById(id);
if (pos > -1) {
updateOrder(id);
pos > 0 && that.$titles[pos].prev().children().eq(2).toggleClass('OxSelected');
that.$titles[pos].toggleClass('OxSelected');
that.$titles[pos].next().toggleClass('OxSelected');
that.$titles[pos].next().next().children().eq(0).toggleClass('OxSelected');
that.$titles[pos].css({
pos > 0 && self.$heads[pos].prev().children().eq(2).toggleClass('OxSelected');
self.$heads[pos].toggleClass('OxSelected');
self.$heads[pos].next().children().eq(0).toggleClass('OxSelected');
self.$titles[pos].css({
width: (
that.$titles[pos].width() + (that.$titles[pos].hasClass('OxSelected') ? -16 : 16)
self.$titles[pos].width() + (self.$heads[pos].hasClass('OxSelected') ? -16 : 16)
) + 'px'
});
}
@ -692,8 +716,8 @@ Ox.TextList = function(options, self) {
function triggerColumnChangeEvent() {
that.triggerEvent('columnchange', {
ids: $.map(self.visibleColumns, function(v, i) {
return v.id;
ids: self.visibleColumns.map(function(column) {
return column.id;
})
});
}
@ -713,11 +737,14 @@ Ox.TextList = function(options, self) {
}
function updateOrder(id) {
var pos = getColumnPositionById(id);
var operator = self.options.sort[0].operator,
pos = getColumnPositionById(id);
if (pos > -1) {
that.$titles[pos].next().html(Ox.UI.symbols[
'triangle_' + (self.options.sort[0].operator == '+' ? 'up' : 'down')
]);
self.$orderButtons[pos].options({
title: operator == '+' ? 'up' : 'down'
}).css({
marginTop: (operator == '+' ? 1 : -1) + 'px'
});
}
}

28
source/Ox.UI/js/Menu/Ox.MainMenu.js
View file

@ -61,8 +61,8 @@ Ox.MainMenu = function(options, self) {
function click(event) {
var $target = $(event.target),
position = typeof $target.data('position') != 'undefined' ?
$target.data('position') : -1;
position = typeof $target.data('position') != 'undefined'
? $target.data('position') : -1;
clickTitle(position);
}
@ -84,8 +84,8 @@ Ox.MainMenu = function(options, self) {
function mousemove(event) {
var $target = $(event.target),
focused,
position = typeof $target.data('position') != 'undefined' ?
$target.data('position') : -1;
position = typeof $target.data('position') != 'undefined'
? $target.data('position') : -1;
if (self.focused && position != self.selected) {
if (position > -1) {
clickTitle(position);
@ -125,25 +125,23 @@ Ox.MainMenu = function(options, self) {
itemId = ids.pop(),
menuId = ids.join('_');
that.getMenu(menuId).checkItem(itemId);
return that;
};
/*@
disableItem <f> disableItem
@*/
that.disableItem = function(id) {
that.getItem(id).options({
disabled: true
});
that.getItem(id).options({disabled: true});
return that;
};
/*@
enableItem <f> enableItem
@*/
that.enableItem = function(id) {
Ox.print('ENABLE ITEM', id)
that.getItem(id).options({
disabled: false
});
that.getItem(id).options({disabled: false});
return that;
};
/*@
@ -180,7 +178,6 @@ Ox.MainMenu = function(options, self) {
} else {
menu = that.getMenu(ids.shift()).getSubmenu(ids.join('_'));
}
//Ox.print('getMenu', id, menu);
return menu;
};
@ -195,6 +192,7 @@ Ox.MainMenu = function(options, self) {
if (self.selected < self.options.menus.length - 1) {
clickTitle(self.selected + 1);
}
return that;
};
/*@
@ -204,15 +202,15 @@ Ox.MainMenu = function(options, self) {
if (self.selected) {
clickTitle(self.selected - 1);
}
return that;
};
/*@
uncheckItem <f> uncheckItem
@*/
that.uncheckItem = function(id) {
that.getItem(id).options({
checked: false
});
that.getItem(id).options({checked: false});
return that;
};
return that;

15
source/Ox.UI/js/Menu/Ox.Menu.js
View file

@ -178,8 +178,8 @@ Ox.Menu = function(options, self) {
self.optionGroups = {};
items.forEach(function(item, i) {
if (item.group) {
items[i] = $.map(item.items, function(v, i) {
return $.extend(v, {
items[i] = item.items.map(function(v, i) {
return Ox.extend(v, {
group: item.group
});
});
@ -196,7 +196,7 @@ Ox.Menu = function(options, self) {
items.forEach(function(item) {
var position;
if ('id' in item) {
that.items.push(Ox.MenuItem($.extend(item, {
that.items.push(Ox.MenuItem(Ox.extend(item, {
menu: that,
position: position = that.items.length
})).data('position', position).appendTo(that.$content)); // fixme: jquery bug when passing {position: position}? does not return the object?;
@ -281,10 +281,7 @@ Ox.Menu = function(options, self) {
function constructSpace() {
return $('<tr>').append(
$('<td>', {
'class': 'OxSpace',
colspan: 5
})
$('<td>', {'class': 'OxSpace', colspan: 5})
);
}
@ -720,10 +717,10 @@ Ox.Menu = function(options, self) {
};
/*@
toggelMenu <f> toggleMenu
toggleMenu <f> toggleMenu
@*/
that.toggleMenu = function() {
that.is(':hidden') ? that.showMenu() : that.hideMenu();
return that.is(':hidden') ? that.showMenu() : that.hideMenu();
};
return that;

37
source/Ox.UI/js/Menu/Ox.MenuItem.js
View file

@ -36,7 +36,7 @@ Ox.MenuItem = function(options, self) {
position: 0,
title: [],
})
.options($.extend(options, {
.options(Ox.extend(options, {
keyboard: parseKeyboard(options.keyboard || self.defaults.keyboard),
title: Ox.toArray(options.title || self.defaults.title)
}))
@ -63,10 +63,8 @@ Ox.MenuItem = function(options, self) {
that.$icon = $('<td>', {
'class': 'OxCell OxIcon'
})
.append(self.options.icon ?
$('<img>', {
src: self.options.icon
}) : null
.append(self.options.icon
? $('<img>', {src: self.options.icon}) : null
)
)
.append(
@ -78,17 +76,19 @@ Ox.MenuItem = function(options, self) {
.append(
$('<td>', {
'class': 'OxCell OxModifiers',
html: $.map(self.options.keyboard.modifiers, function(modifier) {
html: self.options.keyboard.modifiers.map(function(modifier) {
return Ox.UI.symbols[modifier];
}).join('')
})
)
.append(
$('<td>', {
'class': 'OxCell Ox' + (self.options.items.length ? 'Submenu' : 'Key'),
html: self.options.items.length ? Ox.UI.symbols.triangle_right :
Ox.UI.symbols[self.options.keyboard.key] ||
self.options.keyboard.key.toUpperCase()
'class': 'OxCell Ox'
+ (self.options.items.length ? 'Submenu' : 'Key'),
html: self.options.items.length
? Ox.UI.symbols.triangle_right
: Ox.UI.symbols[self.options.keyboard.key]
|| self.options.keyboard.key.toUpperCase()
})
);
@ -108,7 +108,7 @@ Ox.MenuItem = function(options, self) {
if (key == 'checked') {
that.$status.html(value ? Ox.UI.symbols.check : '')
} else if (key == 'disabled') {
that.toggleClass('OxDisabled'); // fixme: this will only work if onChange is only invoked on actual change
that.toggleClass('OxDisabled');
} else if (key == 'title') {
self.options.title = Ox.toArray(value);
that.$title.html(self.options.title[0]);
@ -120,12 +120,11 @@ Ox.MenuItem = function(options, self) {
};
/*@
toggelChecked <f> toggleChecked
toggleChecked <f> toggleChecked
@*/
that.toggleChecked = function() {
that.options({
checked: !self.options.checked
});
that.options({checked: !self.options.checked});
return that;
};
that.toggleDisabled = function() {
@ -133,13 +132,11 @@ Ox.MenuItem = function(options, self) {
};
/*@
toggelTitle <f> toggleTitle
toggleTitle <f> toggleTitle
@*/
that.toggleTitle = function() {
//Ox.print('s.o.t', self.options.title)
that.options({
title: self.options.title.reverse()
});
that.options({title: self.options.title.reverse()});
return that;
};
return that;

22
source/Ox.UI/themes/classic/css/classic.css
View file

@ -378,24 +378,18 @@ Lists
.OxThemeClassic .OxTextList .OxFocus .OxItem.OxSelected:nth-child(even) {
background: rgb(206, 206, 206);
}
.OxThemeClassic .OxTextList .OxBar {
background: -moz-linear-gradient(top, rgb(240, 240, 240), rgb(208, 208, 208));
background: -o-linear-gradient(top, rgb(240, 240, 240), rgb(208, 208, 208));
background: -webkit-linear-gradient(top, rgb(240, 240, 240), rgb(208, 208, 208));
}
.OxThemeClassic .OxTextList .OxBar .OxSelected {
background: -moz-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192));
background: -o-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192));
background: -webkit-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192));
//color: rgb(0, 0, 0);
}
.OxThemeClassic .OxTextList .OxBar .OxOrder {
.OxThemeClassic .OxTextList .OxHead .OxSelected {
background: -moz-linear-gradient(top, rgb(208, 208, 208), rgb(176, 176, 176));
background: -o-linear-gradient(top, rgb(208, 208, 208), rgb(176, 176, 176));
background: -webkit-linear-gradient(top, rgb(208, 208, 208), rgb(176, 176, 176));
color: rgb(0, 0, 0);
}
.OxThemeClassic .OxTextList .OxBar .OxResize .OxCenter {
.OxThemeClassic .OxTextList .OxHead .OxResize .OxCenter {
background: rgb(192, 192, 192);
}
.OxThemeClassic .OxTextList .OxBar .OxSelect {
.OxThemeClassic .OxTextList .OxHead .OxSelect {
border-color: rgb(192, 192, 192);
}
.OxThemeClassic .OxTextList .OxBody .OxItem .OxCell {

11
source/Ox.UI/themes/modern/css/modern.css
View file

@ -369,28 +369,23 @@ Lists
//background: rgb(66, 66, 82);
}
.OxThemeModern .OxTextList .OxItem.OxDroppable.OxDrop:nth-child(odd) .OxCell {
background: rgb(78, 78, 94);
background: rgb(78, 78, 78);
}
.OxThemeModern .OxTextList .OxItem.OxDroppable.OxDrop:nth-child(even) .OxCell {
background: rgb(82, 82, 98);
background: rgb(82, 82, 82);
}
.OxThemeModern .OxTextList .OxBar .OxSelected {
.OxThemeModern .OxTextList .OxHead .OxSelected {
background: -moz-linear-gradient(top, rgb(80, 80, 80), rgb(48, 48, 48));
background: -o-linear-gradient(top, rgb(80, 80, 80), rgb(48, 48, 48));
background: -webkit-linear-gradient(top, rgb(80, 80, 80), rgb(48, 48, 48));
color: rgb(255, 255, 255);
}
.OxThemeModern .OxTextList .OxBar .OxOrder {
color: rgb(255, 255, 255);
}
.OxThemeModern .OxTextList .OxBar .OxResize .OxCenter {
.OxThemeModern .OxTextList .OxHead .OxResize .OxCenter {
background: rgb(24, 24, 24);
}
.OxThemeModern .OxTextList .OxBar .OxSelect {
.OxThemeModern .OxTextList .OxHead .OxSelect {
border-color: rgb(24, 24, 24);
}
.OxThemeModern .OxTextList .OxBody .OxItem .OxCell {