forked from 0x2620/oxjs
blur editing
This commit is contained in:
j
parent
b4139a7388
commit
ba9423462f
8 changed files with 180 additions and 91 deletions
|
|
@ -16,6 +16,7 @@ Ox.ArrayEditable = function(options, self) {
|
|||
items: [],
|
||||
position: -1,
|
||||
selected: '',
|
||||
submitOnBlur: true,
|
||||
type: 'input',
|
||||
width: 256
|
||||
})
|
||||
|
|
@ -43,14 +44,26 @@ Ox.ArrayEditable = function(options, self) {
|
|||
var $target = $(e.target),
|
||||
$parent = $target.parent(),
|
||||
position = $parent.data('position');
|
||||
!$target.is('.OxInput') && that.gainFocus();
|
||||
if ($parent.is('.OxEditableElement')) {
|
||||
selectItem(
|
||||
e.metaKey && position == self.selected
|
||||
? -1 : $parent.data('position')
|
||||
);
|
||||
} else {
|
||||
selectNone();
|
||||
//ignore clicks while editing
|
||||
if (!$target.is('.OxInput')) {
|
||||
if (self.selected > -1) {
|
||||
//end editing but keep selected if clicked next to a keyword
|
||||
if (self.editing || self.$items[self.selected].options('editing')) {
|
||||
self.editing = false;
|
||||
self.$items[self.selected].options({editing: false});
|
||||
//deselect if not editing and not going to select antoher one
|
||||
} else if (!$parent.is('.OxEditableElement')) {
|
||||
selectNone();
|
||||
}
|
||||
}
|
||||
//select if clicked on other editable element
|
||||
if ($parent.is('.OxEditableElement')) {
|
||||
selectItem(
|
||||
e.metaKey && position == self.selected
|
||||
? '' : $parent.data('position')
|
||||
);
|
||||
}
|
||||
that.gainFocus();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -103,6 +116,7 @@ Ox.ArrayEditable = function(options, self) {
|
|||
format: function(value) {
|
||||
return value || ' '
|
||||
},
|
||||
submitOnBlur: self.options.submitOnBlur,
|
||||
tooltip: 'Click to select' + (
|
||||
item.editable ? ', doubleclick to edit' : ''
|
||||
),
|
||||
|
|
@ -113,13 +127,18 @@ Ox.ArrayEditable = function(options, self) {
|
|||
.addClass(item.id == self.options.selected ? 'OxSelected' : '')
|
||||
.data({position: i})
|
||||
.bindEvent({
|
||||
blur: function(data) {
|
||||
that.triggerEvent('blur', data);
|
||||
},
|
||||
cancel: function(data) {
|
||||
|
||||
},
|
||||
edit: function(data) {
|
||||
self.editing = true;
|
||||
that.triggerEvent('edit', data);
|
||||
},
|
||||
submit: function(data) {
|
||||
Ox.Log("AE", "SUBMIT", data);
|
||||
submit(i, data.value);
|
||||
}
|
||||
})
|
||||
|
|
@ -131,10 +150,17 @@ Ox.ArrayEditable = function(options, self) {
|
|||
self.selected > -1 && selectItem(0);
|
||||
}
|
||||
|
||||
function selectItem(position) {
|
||||
self.selected = position;
|
||||
self.options.selected = getSelectedId();
|
||||
that.selectItem(self.options.selected);
|
||||
function selectItem(idOrPosition) {
|
||||
if (Ox.isString(idOrPosition)) {
|
||||
self.options.selected = idOrPosition;
|
||||
self.selected = getSelectedPosition();
|
||||
} else {
|
||||
self.selected = idOrPosition;
|
||||
self.options.selected = getSelectedId();
|
||||
}
|
||||
that.find('.OxSelected').removeClass('OxSelected');
|
||||
self.selected > -1 && self.$items[self.selected].addClass('OxSelected');
|
||||
that.triggerEvent('select', {id: self.options.selected});
|
||||
}
|
||||
|
||||
function selectLast() {
|
||||
|
|
@ -158,9 +184,12 @@ Ox.ArrayEditable = function(options, self) {
|
|||
function submit(position, value) {
|
||||
var item = self.options.items[position];
|
||||
if (value === '') {
|
||||
|
||||
deleteItem();
|
||||
} else {
|
||||
item.value != value && that.triggerEvent('submit', {
|
||||
} /*else if (item.value === value) {
|
||||
that.triggerEvent('blur');
|
||||
} else*/ {
|
||||
that.triggerEvent('submit', {
|
||||
id: item.id,
|
||||
value: value
|
||||
});
|
||||
|
|
@ -172,7 +201,7 @@ Ox.ArrayEditable = function(options, self) {
|
|||
if (key == 'items') {
|
||||
renderItems();
|
||||
} else if (key == 'selected') {
|
||||
that.selectItem(value);
|
||||
selectItem(value);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -190,17 +219,16 @@ Ox.ArrayEditable = function(options, self) {
|
|||
*/
|
||||
};
|
||||
|
||||
that.editItem = function(position) {
|
||||
selectItem(position);
|
||||
editItem();
|
||||
that.blurItem = function() {
|
||||
Ox.Log('AE', 'bI', self.selected);
|
||||
self.selected > -1 && self.$items[self.selected].options({editing: false});
|
||||
};
|
||||
|
||||
that.selectItem = function(id) {
|
||||
that.editItem = function(id) {
|
||||
Ox.Log('AE', 'editItem', id);
|
||||
self.options.selected = id;
|
||||
self.selected = getSelectedPosition();
|
||||
that.find('.OxSelected').removeClass('OxSelected');
|
||||
self.selected > -1 && self.$items[self.selected].addClass('OxSelected');
|
||||
that.triggerEvent('select', {id: self.options.selected});
|
||||
editItem();
|
||||
};
|
||||
|
||||
that.removeItem = function(position) {
|
||||
|
|
|
|||
|
|
@ -62,11 +62,15 @@ Ox.Editable = function(options, self) {
|
|||
.appendTo(that);
|
||||
|
||||
if (self.options.editing) {
|
||||
self.options.editing = false;
|
||||
// edit will toggle self.options.editing
|
||||
self.options.editing = false;
|
||||
edit();
|
||||
}
|
||||
|
||||
function blur() {
|
||||
that.triggerEvent('blur');
|
||||
}
|
||||
|
||||
function cancel() {
|
||||
self.options.value = self.originalValue;
|
||||
self.$input.value(formatInputValue()).hide();
|
||||
|
|
@ -139,7 +143,9 @@ Ox.Editable = function(options, self) {
|
|||
submit: submit
|
||||
})
|
||||
.appendTo(that.$element);
|
||||
self.options.submitOnBlur && self.$input.bindEvent({blur: submit});
|
||||
self.$input.bindEvent({
|
||||
blur: self.options.submitOnBlur ? submit : blur
|
||||
});
|
||||
self.$input.find('input').css(self.css);
|
||||
}
|
||||
self.$input.options({
|
||||
|
|
@ -163,7 +169,7 @@ Ox.Editable = function(options, self) {
|
|||
self.$input.focusInput(self.options.type == 'input');
|
||||
}, 0);
|
||||
that.$tooltip && that.$tooltip.options({title: ''});
|
||||
that.triggerEvent('edit', {editing: true});
|
||||
that.triggerEvent('edit');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -205,7 +211,15 @@ Ox.Editable = function(options, self) {
|
|||
}
|
||||
|
||||
self.setOption = function(key, value) {
|
||||
if (key == 'height' || key == 'width') {
|
||||
if (key == 'editing') {
|
||||
if (value) {
|
||||
// edit will toggle self.options.editing
|
||||
self.options.editing = false;
|
||||
edit();
|
||||
} else {
|
||||
submit();
|
||||
}
|
||||
} else if (key == 'height' || key == 'width') {
|
||||
var css = {};
|
||||
css[key] = value + 'px';
|
||||
self.$test && self.$test.css(css);
|
||||
|
|
|
|||
|
|
@ -454,8 +454,10 @@ Ox.Filter = function(options, self) {
|
|||
return Ox.merge([
|
||||
Ox.Button({
|
||||
id: 'remove',
|
||||
title: self.options.query.conditions.length == 1
|
||||
? 'close' : 'remove',
|
||||
title: self.options.query.conditions.length == 1 ? 'close' : 'remove',
|
||||
tooltip: self.options.query.conditions.length == 1 ? 'Reset this condition'
|
||||
: isGroup ? 'Remove this group of conditions'
|
||||
: 'Remove this condition',
|
||||
type: 'image'
|
||||
})
|
||||
.css({margin: '0 4px 0 ' + (isGroup ? '292px' : '8px')}) // fixme: 296 is probably correct, but labels seem to be too wide
|
||||
|
|
@ -484,6 +486,7 @@ Ox.Filter = function(options, self) {
|
|||
Ox.Button({
|
||||
id: 'add',
|
||||
title: 'add',
|
||||
tooltip: 'Add a condition',
|
||||
type: 'image'
|
||||
})
|
||||
.css({margin: '0 ' + (subpos == -1 ? '4px' : '0') + ' 0 4px'})
|
||||
|
|
@ -504,6 +507,7 @@ Ox.Filter = function(options, self) {
|
|||
Ox.Button({
|
||||
id: 'addgroup',
|
||||
title: 'bracket',
|
||||
tooltip: 'Add a group of conditions',
|
||||
type: 'image'
|
||||
})
|
||||
.css({margin: '0 0 0 4px'})
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue