added toggle values dblclick and hover
This commit is contained in:
vitalets
parent
518b2d88b1
commit
5b8f00d01b
@ -4,9 +4,10 @@ X-editable changelog
|
||||
|
||||
Version 1.1.1 wip
|
||||
----------------------------
|
||||
[enh] added 'inputs-ext' directory with sample input 'address'. They will not be concatenated to main files (vitalets)
|
||||
[enh #13] 'onblur' option: to cancel, submit or ignore when user clicks outside the form (vitalets)
|
||||
[enh] 'ajaxOptions' parameter for advanced ajax configuration (vitalets)
|
||||
[enh] success callback can return object to overwrite submitted value (vitalets)
|
||||
[enh] 'success' callback can return object to overwrite submitted value (vitalets)
|
||||
|
||||
|
||||
Version 1.1.0 Nov 27, 2012
|
||||
|
||||
@ -159,12 +159,12 @@ Applied as jQuery method.
|
||||
/**
|
||||
Shows container with form
|
||||
@method show()
|
||||
@param {boolean} multi if true - other editable containers will not be closed. Default false.
|
||||
@param {boolean} closeAll Wether to close all other editable containers when showing this one. Default true.
|
||||
**/
|
||||
show: function (multi) {
|
||||
show: function (closeAll) {
|
||||
this.$element.addClass('editable-open');
|
||||
if(!multi) {
|
||||
//close all open containers (except one)
|
||||
if(closeAll !== false) {
|
||||
//close all open containers (except this)
|
||||
this.closeOthers(this.$element[0]);
|
||||
}
|
||||
|
||||
@ -207,12 +207,13 @@ Applied as jQuery method.
|
||||
/**
|
||||
Toggles container visibility (show / hide)
|
||||
@method toggle()
|
||||
@param {boolean} closeAll Wether to close all other editable containers when showing this one. Default true.
|
||||
**/
|
||||
toggle: function() {
|
||||
toggle: function(closeAll) {
|
||||
if(this.tip && this.tip().is(':visible')) {
|
||||
this.hide();
|
||||
} else {
|
||||
this.show();
|
||||
this.show(closeAll);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@ -57,9 +57,9 @@ Makes editable any HTML element on the page. Applied as jQuery method.
|
||||
this.$element.addClass('editable');
|
||||
|
||||
//attach click handler. In disabled mode it just prevent default action (useful for links)
|
||||
if(this.options.toggle === 'click') {
|
||||
if(this.options.toggle !== 'manual') {
|
||||
this.$element.addClass('editable-click');
|
||||
this.$element.on('click.editable', $.proxy(this.click, this));
|
||||
this.$element.on(this.options.toggle + '.editable', $.proxy(this.activate, this));
|
||||
} else {
|
||||
this.$element.attr('tabindex', -1); //do not stop focus on element when toggled manually
|
||||
}
|
||||
@ -100,7 +100,7 @@ Makes editable any HTML element on the page. Applied as jQuery method.
|
||||
this.options.disabled = false;
|
||||
this.$element.removeClass('editable-disabled');
|
||||
this.handleEmpty();
|
||||
if(this.options.toggle === 'click') {
|
||||
if(this.options.toggle !== 'manual') {
|
||||
if(this.$element.attr('tabindex') === '-1') {
|
||||
this.$element.removeAttr('tabindex');
|
||||
}
|
||||
@ -178,22 +178,34 @@ Makes editable any HTML element on the page. Applied as jQuery method.
|
||||
}
|
||||
},
|
||||
|
||||
click: function (e) {
|
||||
activate: function (e) {
|
||||
e.preventDefault();
|
||||
if(this.options.disabled) {
|
||||
return;
|
||||
}
|
||||
//stop propagation bacause document listen any click to hide all editableContainers
|
||||
/*
|
||||
stop propagation not required anymore because in document click handler it checks event target
|
||||
*/
|
||||
//e.stopPropagation();
|
||||
this.toggle();
|
||||
|
||||
if(this.options.toggle === 'mouseenter') {
|
||||
//for hover only show container
|
||||
this.show();
|
||||
} else {
|
||||
/*
|
||||
if toggle = click we should not close all other containers as they will be closed automatically in document click listener
|
||||
*/
|
||||
var closeAll = (this.options.toggle !== 'click');
|
||||
this.toggle(closeAll);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
Shows container with form
|
||||
@method show()
|
||||
@param {boolean} multi if true - other editable containers will not be closed. Default false.
|
||||
@param {boolean} closeAll Wether to close all other editable containers when showing this one. Default true.
|
||||
**/
|
||||
show: function (multi) {
|
||||
show: function (closeAll) {
|
||||
if(this.options.disabled) {
|
||||
return;
|
||||
}
|
||||
@ -213,13 +225,9 @@ Makes editable any HTML element on the page. Applied as jQuery method.
|
||||
} else if(this.container.tip().is(':visible')) {
|
||||
return;
|
||||
}
|
||||
|
||||
//hide all other editable containers. Required to work correctly with toggle = manual
|
||||
//temp
|
||||
//$('.editable-container').find('.editable-cancel').click();
|
||||
|
||||
//show container
|
||||
this.container.show(multi);
|
||||
this.container.show(closeAll);
|
||||
},
|
||||
|
||||
/**
|
||||
@ -240,12 +248,13 @@ Makes editable any HTML element on the page. Applied as jQuery method.
|
||||
/**
|
||||
Toggles container visibility (show / hide)
|
||||
@method toggle()
|
||||
@param {boolean} closeAll Wether to close all other editable containers when showing this one. Default true.
|
||||
**/
|
||||
toggle: function() {
|
||||
toggle: function(closeAll) {
|
||||
if(this.container && this.container.tip().is(':visible')) {
|
||||
this.hide();
|
||||
} else {
|
||||
this.show();
|
||||
this.show(closeAll);
|
||||
}
|
||||
},
|
||||
|
||||
@ -462,9 +471,10 @@ Makes editable any HTML element on the page. Applied as jQuery method.
|
||||
**/
|
||||
disabled: false,
|
||||
/**
|
||||
How to toggle editable. Can be <code>click|manual</code>.
|
||||
How to toggle editable. Can be <code>click|dblclick|mouseenter|manual</code>.
|
||||
When set to <code>manual</code> you should manually call <code>show/hide</code> methods of editable.
|
||||
Note: if you are calling <code>show</code> on **click** event you need to apply <code>e.stopPropagation()</code> because container has behavior to hide on any click outside.
|
||||
**Note**: if you call <code>show</code> or <code>toggle</code> inside **click** handler of some DOM element,
|
||||
you need to apply <code>e.stopPropagation()</code> because containers are being closed on any click on document.
|
||||
|
||||
@example
|
||||
$('#edit-button').click(function(e) {
|
||||
@ -477,6 +487,7 @@ Makes editable any HTML element on the page. Applied as jQuery method.
|
||||
@default 'click'
|
||||
**/
|
||||
toggle: 'click',
|
||||
|
||||
/**
|
||||
Text shown when element is empty.
|
||||
|
||||
|
||||
@ -89,39 +89,6 @@
|
||||
ok(p.find(':contains("'+title+'")').length, 'title ok');
|
||||
e.remove();
|
||||
});
|
||||
/*
|
||||
test("should close all other containers on click on editable", function () {
|
||||
var e1 = $('<a href="#" data-pk="1" data-url="post.php" id="a">abc</a>').appendTo('#qunit-fixture').editable(),
|
||||
e2 = $('<a href="#" data-pk="1" data-url="post.php" id="b">abcd</a>').appendTo('#qunit-fixture').editable();
|
||||
|
||||
e1.click()
|
||||
var p1 = tip(e1);
|
||||
ok(p1.is(':visible'), 'popover1 visible');
|
||||
|
||||
e2.click()
|
||||
var p2 = tip(e2);
|
||||
ok(p2.is(':visible'), 'popover2 visible');
|
||||
ok(!p1.is(':visible'), 'popover1 closed');
|
||||
|
||||
p2.find('button[type=button]').click();
|
||||
ok(!p2.is(':visible'), 'popover2 closed');
|
||||
});
|
||||
|
||||
test("click outside container should hide it", function () {
|
||||
var e = $('<a href="#" data-pk="1" data-url="post.php" data-name="text1">abc</a>').appendTo('#qunit-fixture').editable(),
|
||||
e1 = $('<div>').appendTo('body');
|
||||
|
||||
e.click();
|
||||
var p = tip(e);
|
||||
ok(p.is(':visible'), 'popover shown');
|
||||
|
||||
p.click();
|
||||
ok(p.is(':visible'), 'popover still shown');
|
||||
|
||||
e1.click();
|
||||
ok(!p.is(':visible'), 'popover closed');
|
||||
});
|
||||
*/
|
||||
|
||||
test("onblur: cancel", function () {
|
||||
var oldValue = 'abc',
|
||||
@ -160,7 +127,7 @@
|
||||
e2.editable('hide');
|
||||
ok(!p2.is(':visible'), 'popover2 closed');
|
||||
|
||||
//call show method of another editable (multi = false)
|
||||
//call show method of another editable, closeAll = true (default)
|
||||
e.click();
|
||||
p = tip(e);
|
||||
ok(p.is(':visible'), 'popover1 visible');
|
||||
@ -173,12 +140,12 @@
|
||||
e2.editable('hide');
|
||||
ok(!p2.is(':visible'), 'popover2 closed');
|
||||
|
||||
//call show method of another editable (multi = true)
|
||||
//call show method of another editable, closeAll = false
|
||||
e.click();
|
||||
p = tip(e);
|
||||
ok(p.is(':visible'), 'popover1 visible');
|
||||
p.find('input').val(newValue);
|
||||
e2.editable('show', true);
|
||||
e2.editable('show', false);
|
||||
p2 = tip(e2);
|
||||
ok(p.is(':visible'), 'popover1 visible');
|
||||
ok(p2.is(':visible'), 'popover2 visible');
|
||||
@ -226,7 +193,7 @@
|
||||
e2.editable('hide');
|
||||
ok(!p2.is(':visible'), 'popover2 closed');
|
||||
|
||||
//call show method of another editable (multi = false)
|
||||
//call show method of another editable, closeAll = true (default)
|
||||
e.click();
|
||||
p = tip(e);
|
||||
ok(p.is(':visible'), 'popover1 visible');
|
||||
@ -239,12 +206,12 @@
|
||||
e2.editable('hide');
|
||||
ok(!p2.is(':visible'), 'popover2 closed');
|
||||
|
||||
//call show method of another editable (multi = true)
|
||||
//call show method of another editable, closeAll = false
|
||||
e.click();
|
||||
p = tip(e);
|
||||
ok(p.is(':visible'), 'popover1 visible');
|
||||
p.find('input').val(oldValue);
|
||||
e2.editable('show', true);
|
||||
e2.editable('show', false);
|
||||
p2 = tip(e2);
|
||||
ok(p.is(':visible'), 'popover1 visible');
|
||||
ok(p2.is(':visible'), 'popover2 visible');
|
||||
@ -286,7 +253,7 @@
|
||||
e2.editable('hide');
|
||||
ok(!p2.is(':visible'), 'popover2 closed');
|
||||
|
||||
//call show method of another editable (multi = false)
|
||||
//call show method of another editable, closeAll = true (default)
|
||||
e2.editable('show');
|
||||
p2 = tip(e2);
|
||||
ok(p.is(':visible'), 'popover1 still visible');
|
||||
@ -294,8 +261,8 @@
|
||||
e2.editable('hide');
|
||||
ok(!p2.is(':visible'), 'popover2 closed');
|
||||
|
||||
//call show method of another editable (multi = true)
|
||||
e2.editable('show', true);
|
||||
//call show method of another editable, closeAll = false
|
||||
e2.editable('show', false);
|
||||
p2 = tip(e2);
|
||||
ok(p.is(':visible'), 'popover1 still visible');
|
||||
ok(p2.is(':visible'), 'popover2 visible');
|
||||
@ -317,7 +284,68 @@
|
||||
ok(p.find('button').offset().left > p.find('.editable-input').offset().left + p.find('.editable-input').width(), 'buttons left ok');
|
||||
|
||||
d.remove();
|
||||
});
|
||||
});
|
||||
|
||||
test("toggle: manual", function () {
|
||||
var e = $('<a href="#" id="a"></a>').appendTo('#qunit-fixture').editable({
|
||||
toggle: 'manual'
|
||||
});
|
||||
|
||||
e.click();
|
||||
ok(!e.data('editableContainer'), 'popover not visible after click');
|
||||
e.editable('show');
|
||||
var p = tip(e);
|
||||
ok(p.is(':visible'), 'shown manually');
|
||||
});
|
||||
|
||||
test("toggle: dblclick", function () {
|
||||
var e = $('<a href="#" id="a"></a>').appendTo('#qunit-fixture').editable({
|
||||
toggle: 'dblclick'
|
||||
}),
|
||||
p, p2,
|
||||
e2 = $('<a href="#" data-type="text" data-pk="1" data-url="post.php" id="b">abcd</a>').appendTo('#qunit-fixture').editable();
|
||||
|
||||
e.click();
|
||||
ok(!e.data('editableContainer'), 'popover not visible after click');
|
||||
|
||||
e2.click();
|
||||
p2 = tip(e2);
|
||||
ok(p2.is(':visible'), 'popover2 visible');
|
||||
|
||||
e.dblclick();
|
||||
p = tip(e);
|
||||
ok(p.is(':visible'), 'popover1 visible');
|
||||
ok(!p2.is(':visible'), 'popover2 closed');
|
||||
});
|
||||
|
||||
test("toggle: mouseenter", function () {
|
||||
var e = $('<a href="#" id="a"></a>').appendTo('#qunit-fixture').editable({
|
||||
toggle: 'mouseenter'
|
||||
}),
|
||||
p, p2,
|
||||
e2 = $('<a href="#" data-type="text" data-pk="1" data-url="post.php" id="b">abcd</a>').appendTo('#qunit-fixture').editable();
|
||||
|
||||
e.click();
|
||||
ok(!e.data('editableContainer'), 'popover not visible after click');
|
||||
|
||||
e.dblclick();
|
||||
ok(!e.data('editableContainer'), 'popover not visible after dblclick');
|
||||
|
||||
e2.click();
|
||||
p2 = tip(e2);
|
||||
ok(p2.is(':visible'), 'popover2 visible');
|
||||
|
||||
e.mouseenter();
|
||||
ok(e.data('editableContainer'), 'container defined');
|
||||
p = tip(e);
|
||||
ok(p.is(':visible'), 'popover1 visible');
|
||||
ok(!p2.is(':visible'), 'popover2 closed');
|
||||
|
||||
//hover once again --> container should stay open
|
||||
e.hover();
|
||||
p = tip(e);
|
||||
ok(p.is(':visible'), 'popover1 visible after second hover');
|
||||
});
|
||||
|
||||
//unfortunatly, testing this feature does not always work in browsers. Tested manually.
|
||||
/*
|
||||
|
||||
@ -39,18 +39,6 @@ $(function () {
|
||||
p.find('button[type=button]').click();
|
||||
ok(!p.is(':visible'), 'popover was removed');
|
||||
});
|
||||
|
||||
test("option 'toggle' = manual", function () {
|
||||
var e = $('<a href="#" id="a"></a>').appendTo('#qunit-fixture').editable({
|
||||
toggle: 'manual'
|
||||
});
|
||||
|
||||
e.click();
|
||||
ok(!e.data().editableContainer, 'popover not visible after click');
|
||||
e.editable('show');
|
||||
var p = tip(e);
|
||||
ok(p.is(':visible'), 'shown manually');
|
||||
});
|
||||
|
||||
asyncTest("should load correct value and save new entered text (and value)", function () {
|
||||
var v = 'ab<b>"',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user