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

fix for dialog center/reset

Browse source
This commit is contained in:
rolux 2010-09-04 16:28:40 +02:00
parent fb91aca1aa
commit 6117bc31c3
4 changed files with 266 additions and 110 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
build/css/ox.ui.classic.css
View file

@ -41,18 +41,25 @@ Dialog
}
.OxThemeClassic .OxDialog .OxBar {
background: -moz-linear-gradient(top, rgba(208, 208, 208, 0.96), rgba(176, 176, 176, 0.96));
background: -webkit-gradient(linear, left top, left bottom, from(rgba(208, 208, 208, 0.96)), to(rgba(176, 176, 176, 0.96)));
//background: -moz-linear-gradient(top, rgba(208, 208, 208, 0.96), rgba(176, 176, 176, 0.96));
//background: -webkit-gradient(linear, left top, left bottom, from(rgba(208, 208, 208, 0.96)), to(rgba(176, 176, 176, 0.96)));
background: -moz-linear-gradient(top, rgba(224, 224, 224, 0.96), rgba(192, 192, 192, 0.96));
background: -webkit-gradient(linear, left top, left bottom, from(rgba(224, 224, 224, 0.96)), to(rgba(192, 192, 192, 0.96)));
}
.OxThemeClassic .OxDialog .OxContent {
background: rgba(224, 224, 224, 0.96);
//background: rgba(224, 224, 224, 0.96);
background: rgba(208, 208, 208, 0.96);
}
.OxThemeClassic .OxDialog .OxTitle {
color: rgb(48, 48, 48);
}
.OxThemeClassic .OxLayer {
background: rgb(255, 255, 255);
}
/*
================================================================================
Forms
@ -131,7 +138,8 @@ Forms
//-moz-box-shadow: 0 0 2px rgb(128, 128, 128);
//-webkit-box-shadow: 0 0 2px rgb(128, 128, 128);
}
.OxThemeClassic div.OxInput.OxFocus {
.OxThemeClassic div.OxInput.OxFocus,
.OxThemeClassic .OxSelect.OxFocus {
-moz-box-shadow: 0 0 2px rgb(128, 128, 128);
-webkit-box-shadow: 0 0 2px rgb(128, 128, 128);
}
@ -173,10 +181,10 @@ Lists
background: rgb(222, 222, 222);
}
.OxThemeClassic .OxTextList .OxFocus .OxItem.OxSelected:nth-child(odd) {
background: rgb(194, 194, 194);
background: rgb(210, 210, 210);
}
.OxThemeClassic .OxTextList .OxFocus .OxItem.OxSelected:nth-child(even) {
background: rgb(190, 190, 190);
background: rgb(206, 206, 206);
}
.OxThemeClassic .OxTextList .OxBar {
background: -moz-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192));
@ -200,7 +208,7 @@ Lists
border-right: 1px solid rgb(216, 216, 216);
}
.OxThemeClassic .OxTextList .OxFocus .OxItem.OxSelected .OxCell {
border-right: 1px solid rgb(184, 184, 184);
border-right: 1px solid rgb(200, 200, 200);
color: rgb(0, 0, 0);
}
.OxThemeClassic .OxTextList .OxBody .OxItem .OxLine {

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

@ -746,14 +746,23 @@ Lists
background: rgb(24, 24, 24);
cursor: ew-resize;
}
.OxTextList .OxBar .OxButton {
.OxTextList .OxBar .OxSelect {
position: absolute;
right: 0px;
width: 11px;
width: 10px;
height: 16px;
border-width: 0 1px 0 1px;
border-color: rgb(32, 32, 32);
background: rgba(0, 0, 0, 0);
font-size: 11px;
text-align: center;
cursor: pointer;
overflow: hidden;
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
.OxTextList .OxBar .OxSelect > input {
margin-right: -3px;
}
.OxTextList .OxBody {

7
build/css/ox.ui.modern.css
View file

@ -51,6 +51,10 @@ Dialog
background: rgba(48, 48, 48, 0.96);
}
.OxThemeModern .OxLayer {
background: rgb(0, 0, 0);
}
/*
================================================================================
@ -118,7 +122,8 @@ Forms
background: -moz-linear-gradient(top, rgb(0, 0, 0), rgb(32, 32, 32));
background: -webkit-gradient(linear, left top, left bottom, from(rgb(0, 0, 0)), to(rgb(32, 32, 32)));
}
.OxThemeModern div.OxInput.OxFocus {
.OxThemeModern div.OxInput.OxFocus,
.OxThemeModern .OxSelect.OxFocus {
//border: 1px solid rgb(80, 80, 80);
-moz-box-shadow: 0 0 2px rgb(128, 128, 128);
-webkit-box-shadow: 0 0 2px rgb(128, 128, 128);

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

@ -312,12 +312,13 @@ requires
blur: function(id) {
var index = stack.indexOf(id);
if (index == stack.length - 1) {
$elements[id].removeClass('OxFocus');
//$('.OxFocus').removeClass('OxFocus'); // fixme: the above is better, and should work
stack.length == 1 ? stack.pop() :
stack.splice(stack.length - 2, 0, stack.pop());
Ox.Event.unbindKeyboard($elements[id].options('id'));
stack.length && Ox.Event.bindKeyboard($elements[stack[stack.length - 1]].options('id'));
//$elements[id].removeClass('OxFocus');
$('.OxFocus').removeClass('OxFocus'); // fixme: the above is better, and should work
stack.length && $elements[stack[stack.length - 1]].addClass('OxFocus');
Ox.print('blur', id, stack);
}
},
@ -327,8 +328,9 @@ requires
stack.length && Ox.Event.unbindKeyboard($elements[stack[stack.length - 1]].options('id'));
index > -1 && stack.splice(index, 1);
stack.push(id);
$elements[id].addClass('OxFocus');
Ox.Event.bindKeyboard($elements[id].options('id'));
$('.OxFocus').removeClass('OxFocus'); // fixme: see above
$elements[id].addClass('OxFocus');
Ox.print('focus', id, stack);
}
},
@ -1471,6 +1473,7 @@ requires
// fixme: dialog should be derived from a generic draggable
// fixme: pass button elements directly
// fixme: buttons should have a close attribute, or the dialog a close id
var self = self || {},
that = new Ox.Element('div', self)
.defaults({
@ -1483,7 +1486,12 @@ requires
width: 384
})
.options(options || {})
.addClass('OxDialog');
.addClass('OxDialog')
.addEvent({
key_escape: function() {
that.close();
}
});
if (!Ox.isArray(self.options.buttons[0])) {
self.options.buttons = [[], self.options.buttons];
@ -1496,10 +1504,12 @@ requires
.mousedown(drag)
.dblclick(center)
.appendTo(that);
that.$title = new Ox.Element()
.addClass('OxTitle')
.html(self.options.title)
.appendTo(that.$titlebar);
// fixme: should the following be a container?
that.$content = new Ox.Element()
.addClass('OxContent')
@ -1508,9 +1518,11 @@ requires
overflow: 'auto'
})
.appendTo(that);
that.$buttonsbar = new Ox.Bar({})
.addClass('OxButtonsBar')
.appendTo(that);
that.$buttons = [];
$.each(self.options.buttons[0], function(i, button) {
that.$buttons[i] = new Ox.Button({
@ -1522,11 +1534,13 @@ requires
.click(button.click) // fixme: rather use event?
.appendTo(that.$buttonsbar);
});
that.$resize = new Ox.Element()
.addClass('OxResize')
.mousedown(resize)
.dblclick(reset)
.appendTo(that.$buttonsbar);
$.each(self.options.buttons[1].reverse(), function(i, button) {
that.$buttons[that.$buttons.length] = new Ox.Button({
disabled: button.disabled || false,
@ -1538,8 +1552,10 @@ requires
.click(button.click) // fixme: rather use event?
.appendTo(that.$buttonsbar);
});
that.$buttons[0].focus();
that.$layer = new Ox.Element() // fixme: Layer widget, that would handle click?
that.$layer = new Ox.Element() // fixme: Layer widget that would handle click?
.addClass('OxLayer')
.mousedown(mousedownLayer)
.mouseup(mouseupLayer);
@ -1610,9 +1626,9 @@ requires
}
function reset() {
that.css({
that/*.css({
left: Math.max(that.offset().left, 24 - that.width())
})
})*/
.width(self.options.width)
.height(self.options.height);
that.$content.height(self.options.height - 48 - 2 * self.options.padding); // fixme: this should happen automatically
@ -1695,6 +1711,7 @@ requires
getButtonById(id).options({
disabled: true
});
return that;
};
that.enable = function() {
@ -1706,17 +1723,19 @@ requires
getButtonById(id).options({
disabled: false
});
return that;
};
that.open = function() {
that.$layer.appendTo($body);
center();
reset();
that.css({
opacity: 0
}).appendTo($body).animate({
opacity: 1
}, 200);
center();
reset();
that.gainFocus();
$window.bind('mouseup', mouseupLayer)
return that;
};
@ -2273,9 +2292,10 @@ requires
autocompleteSelect boolean, if true, menu is displayed
autocompleteSelectHighlight boolean, if true, value in menu is highlighted
autocompleteSelectSubmit boolean, if true, submit input on menu selection
autovalidate string ('email', 'float', 'integer', 'phone', 'url'), or
autocorrect string ('email', 'float', 'integer', 'phone', 'url'), or
regexp(value), or
function(key, value, blur, callback), returns value
auto validate --remote validation--
clear boolean, if true, has clear button
disabled boolean, if true, is disabled
height integer, px (for type='textarea' and type='range' with orientation='horizontal')
@ -2892,7 +2912,9 @@ requires
self.onChange = function(key, value) {
var inputWidth, val;
if (key == 'value') {
if (key == 'placeholder') {
setPlaceholder();
} else if (key == 'value') {
val = self.$input.val();
self.$input.val(value);
setPlaceholder();
@ -3974,6 +3996,10 @@ requires
)
.css(self.options.width == 'auto' ? {} : {
width: self.options.width + 'px'
})
.addEvent({
key_escape: loseFocus,
key_down: showMenu
});
$.extend(self, {
@ -4002,7 +4028,7 @@ requires
self.options.title ? self.options.title :
self.options.items[self.checked[0]].title
)
.click(clickButton)
.click(showMenu)
.appendTo(that.$element);
}
@ -4012,7 +4038,7 @@ requires
title: 'select',
type: 'image'
})
.bindEvent('click', clickButton)
.bindEvent('click', showMenu)
.appendTo(that);
self.$menu = new Ox.Menu({
@ -4033,11 +4059,6 @@ requires
hide: hideMenu
});
function clickButton() {
that.addClass('OxSelected');
self.$menu.showMenu();
}
function clickMenu(event, data) {
}
@ -4049,7 +4070,9 @@ requires
self.options.title ? self.options.title :
data.checked[0].title
);
that.triggerEvent('change', data);
that.triggerEvent('change', {
selected: data.checked
});
}
function hideMenu() {
@ -4057,6 +4080,16 @@ requires
self.$button.removeClass('OxSelected');
}
function loseFocus() {
that.loseFocus();
}
function showMenu() {
that.gainFocus();
that.addClass('OxSelected');
self.$menu.showMenu();
}
self.onChange = function(key, value) {
};
@ -6182,8 +6215,17 @@ requires
}
};
that.clearCache = function() { // fixme: unused? make private?
that.clearCache = function() { // used by TextList resizeColumn
self.$pages = [];
return that;
};
that.reload = function() {
clear();
that.clearCache();
that.$content.empty();
loadPages(self.page);
return that;
};
that.sort = function(key, operator) {
@ -6195,6 +6237,7 @@ requires
that.triggerEvent('sort', self.options.sort[0]);
updateSort();
}
return that;
}
return that;
@ -6241,7 +6284,9 @@ requires
that = new Ox.Element({}, self)
.defaults({
columns: [],
columnWidth: [40, 800],
columnsMovable: false,
columnsRemovable: false,
//columnWidth: [40, 800],
id: '',
request: function() {}, // {sort, range, keys, callback}
sort: []
@ -6287,82 +6332,25 @@ requires
.addClass('OxHead')
.appendTo(that.$bar);
that.$head.$content.addClass('OxTitles');
that.$titles = [];
$.each(self.visibleColumns, function(i, v) {
var $order, $resize, $left, $center, $right, timeout = 0;
self.columnWidths[i] = v.width;
that.$titles[i] = $('<div>')
.addClass('OxTitle OxColumn' + Ox.toTitleCase(v.id))
.css({
width: (v.width - 9) + 'px',
textAlign: v.align
constructHead();
if (self.options.columnsRemovable) {
that.$select = new Ox.Select({
id: self.options.id + 'SelectColumns',
items: $.map(self.options.columns, function(v, i) {
return {
checked: v.visible,
disabled: v.removable === false,
id: v.id,
title: v.title
}
}),
max: -1,
min: 1,
type: 'image'
})
.html(v.title)
.mousedown(function(e) {
timeout = setTimeout(function() {
dragColumn(v.id, e);
timeout = 0;
}, 250);
})
.mouseup(function() {
if (timeout) {
clearTimeout(timeout);
timeout = 0;
clickColumn(v.id);
}
})
.appendTo(that.$head.$content.$element);
self.columnPositions[i] = Ox.sum(self.columnWidths) - self.columnWidths[i] / 2;
$order = $('<div>')
.addClass('OxOrder')
.html(oxui.symbols['triangle_' + (
v.operator === '' ? 'up' : 'down'
)])
.click(function() {
$(this).prev().trigger('click')
})
.appendTo(that.$head.$content.$element);
$resize = $('<div>')
.addClass('OxResize')
.mousedown(function(e) {
var startWidth = self.columnWidths[i],
startX = e.clientX;
$window.mousemove(function(e) {
var x = e.clientX,
width = Ox.limit(
startWidth - startX + x,
self.options.columnWidth[0],
self.options.columnWidth[1]
);
resizeColumn(v.id, width);
});
$window.one('mouseup', function() {
$window.unbind('mousemove');
});
})
.dblclick(function() {
resizeColumn(v.id, v.width);
})
.appendTo(that.$head.$content.$element);
$left = $('<div>').addClass('OxLeft').appendTo($resize);
$center = $('<div>').addClass('OxCenter').appendTo($resize);
$right = $('<div>').addClass('OxRight').appendTo($resize);
});
that.$head.$content.css({
width: (Ox.sum(self.columnWidths) + 2) + 'px'
});
Ox.print('s.sC', self.selectedColumn)
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({
width: (self.options.columns[self.selectedColumn].width - 25) + 'px'
});
.bindEvent('change', changeColumns)
.appendTo(that.$bar.$element);
}
that.$select = new Ox.Button({
style: 'symbol',
title: 'select',
type: 'image'
}).appendTo(that.$bar.$element);
// Body
@ -6396,7 +6384,49 @@ requires
Ox.print('s.vC', self.visibleColumns)
function addColumn(id) {
Ox.print('addColumn', id);
var column,
index = 0;
$.each(self.options.columns, function(i, v) {
if (v.visible) {
index++;
} else if (v.id == id) {
column = v;
return false;
}
});
column.visible = true;
self.visibleColumns.splice(index, 0, column);
that.$head.$content.empty();
constructHead();
that.$body.options({
keys: $.map(self.visibleColumns, function(v, i) {
return v.id;
})
});
that.$body.reload();
}
function changeColumns(event, data) {
var add,
ids = [];
$.each(data.selected, function(i, column) {
var index = getColumnIndexById(column.id);
if (!self.options.columns[index].visible) {
addColumn(column.id);
add = true;
return false;
}
ids.push(column.id);
});
if (!add) {
$.each(self.visibleColumns, function(i, column) {
if (ids.indexOf(column.id) == -1) {
removeColumn(column.id);
return false
}
});
}
}
function clickColumn(id) {
@ -6410,10 +6440,86 @@ requires
);
}
function constructHead() {
that.$titles = [];
self.columnPositions = [];
self.columnWidths = [];
$.each(self.visibleColumns, function(i, v) {
var $order, $resize, $left, $center, $right, timeout = 0;
self.columnWidths[i] = v.width;
that.$titles[i] = $('<div>')
.addClass('OxTitle OxColumn' + Ox.toTitleCase(v.id))
.css({
width: (v.width - 9) + 'px',
textAlign: v.align
})
.html(v.title)
.mousedown(function(e) {
timeout = setTimeout(function() {
dragColumn(v.id, e);
timeout = 0;
}, 250);
})
.mouseup(function() {
if (timeout) {
clearTimeout(timeout);
timeout = 0;
clickColumn(v.id);
}
})
.appendTo(that.$head.$content.$element);
self.columnPositions[i] = Ox.sum(self.columnWidths) - self.columnWidths[i] / 2;
$order = $('<div>')
.addClass('OxOrder')
.html(oxui.symbols['triangle_' + (
v.operator === '' ? 'up' : 'down'
)])
.click(function() {
$(this).prev().trigger('click')
})
.appendTo(that.$head.$content.$element);
$resize = $('<div>')
.addClass('OxResize')
.mousedown(function(e) {
var startWidth = self.columnWidths[i],
startX = e.clientX;
$window.mousemove(function(e) {
var x = e.clientX,
width = Ox.limit(
startWidth - startX + x,
self.options.columnWidth[0],
self.options.columnWidth[1]
);
resizeColumn(v.id, width);
});
$window.one('mouseup', function() {
$window.unbind('mousemove');
});
})
.dblclick(function() {
resizeColumn(v.id, v.width);
})
.appendTo(that.$head.$content.$element);
$left = $('<div>').addClass('OxLeft').appendTo($resize);
$center = $('<div>').addClass('OxCenter').appendTo($resize);
$right = $('<div>').addClass('OxRight').appendTo($resize);
});
that.$head.$content.css({
width: (Ox.sum(self.columnWidths) + 2) + 'px'
});
Ox.print('s.sC', self.selectedColumn)
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({
width: (self.options.columns[self.selectedColumn].width - 25) + 'px'
});
}
}
function constructItem(data) {
var $item = $('<div>')
.css({
width: Math.max(Ox.sum(self.columnWidths), that.$element.width() - oxui.scrollbarSize) + 'px'
width: getItemWidth() + 'px'
});
$.each(self.visibleColumns, function(i, v) {
var $cell = $('<div>')
@ -6506,8 +6612,8 @@ requires
}
function getItemWidth() {
return Ox.sum(self.columnWidths)
return Math.max(Ox.sum(self.columnWidths), that.$element.width() - oxui.scrollbarSize);
//return Ox.sum(self.columnWidths)
}
function moveColumn(id, pos) {
@ -6529,7 +6635,35 @@ requires
}
function removeColumn(id) {
Ox.print('removeColumn', id);
var className = '.OxColumn' + Ox.toTitleCase(id),
index = getColumnIndexById(id),
position = getColumnPositionById(id),
$column = $('.OxTitle' + className),
$order = $column.next(),
$resize = $order.next();
self.options.columns[index].visible = false;
self.visibleColumns.splice(position, 1);
self.columnWidths.splice(position, 1);
itemWidth = getItemWidth();
$column.remove();
$order.remove();
$resize.remove();
$.each(that.$body.find('.OxItem'), function(i, v) {
var $v = $(v);
$v.children(className).remove();
$v.css({
width: itemWidth + 'px'
});
});
that.$body.$content.css({
width: itemWidth + 'px'
});
that.$body.options({
keys: $.map(self.visibleColumns, function(v, i) {
return v.id;
})
});
}
function resize() {
@ -7339,6 +7473,7 @@ requires
function clickItem(position) {
var item = that.items[position],
toggled;
that.hideMenu();
if (!item.options('items').length) {
if (that.options('parent')) {
that.options('parent').hideMenu().triggerEvent('click');
@ -7381,7 +7516,6 @@ requires
item.toggleTitle();
}
}
that.hideMenu();
}
function clickSelectedItem() {