hidden event: reason param added
This commit is contained in:
vitalets
parent
1c4d666176
commit
19a6dabbae
@ -4,6 +4,9 @@ X-editable changelog
|
||||
|
||||
Version 1.2.0 wip
|
||||
----------------------------
|
||||
[enh] editableContainer removed from docs as not widely used (vitalets)
|
||||
[enh] editableContainer: removed 'autohide' option and 'cancel' event. Use 'hidden' event instead (vitalets)
|
||||
[enh] 'hidden' event: added param 'reason' that points to reason caused hiding (vitalets)
|
||||
[enh] 'select' submit by enter (vitalets)
|
||||
[bug #37] fix incorrectly shown datepicker in jquery 1.7.1 + webkit (vitalets)
|
||||
[enh] added url param 'jquery' to run tests in different versions of jquery, e.g. '&jquery=1.7.2' (vitalets)
|
||||
|
||||
@ -80,8 +80,10 @@ Applied as jQuery method.
|
||||
.editableform(this.formOptions)
|
||||
.on({
|
||||
save: $.proxy(this.save, this),
|
||||
cancel: $.proxy(this.cancel, this),
|
||||
show: $.proxy(this.setPosition, this), //re-position container every time form is shown (after loading state)
|
||||
cancel: $.proxy(function(){
|
||||
this.hide('cancel');
|
||||
}, this),
|
||||
show: $.proxy(this.setPosition, this), //re-position container every time form is shown (occurs each time after loading state)
|
||||
rendering: $.proxy(this.setPosition, this), //this allows to place container correctly when loading shown
|
||||
rendered: $.proxy(function(){
|
||||
/**
|
||||
@ -144,8 +146,9 @@ Applied as jQuery method.
|
||||
/**
|
||||
Hides container with form
|
||||
@method hide()
|
||||
@param {string} reason Reason caused hiding. Can be <code>save|cancel|onblur|undefined (=manual)</code>
|
||||
**/
|
||||
hide: function() {
|
||||
hide: function(reason) {
|
||||
if(!this.tip() || !this.tip().is(':visible') || !this.$element.hasClass('editable-open')) {
|
||||
return;
|
||||
}
|
||||
@ -155,9 +158,17 @@ Applied as jQuery method.
|
||||
Fired when container was hidden. It occurs on both save or cancel.
|
||||
|
||||
@event hidden
|
||||
@param {Object} event event object
|
||||
@param {object} event event object
|
||||
@param {string} reason Reason caused hiding. Can be <code>save|cancel|onblur|undefined (=manual)</code>
|
||||
@example
|
||||
$('#username').on('hidden', function(e, reason) {
|
||||
if(reason === 'save' || reason === 'cancel') {
|
||||
//auto-open next editable
|
||||
$(this).closest('tr').next().find('.editable').editable('show');
|
||||
}
|
||||
});
|
||||
**/
|
||||
this.$element.triggerHandler('hidden');
|
||||
this.$element.triggerHandler('hidden', reason);
|
||||
},
|
||||
|
||||
/* internal hide method. To be overwritten in child classes */
|
||||
@ -186,23 +197,8 @@ Applied as jQuery method.
|
||||
//tbd in child class
|
||||
},
|
||||
|
||||
cancel: function() {
|
||||
if(this.options.autohide) {
|
||||
this.hide();
|
||||
}
|
||||
/**
|
||||
Fired when form was cancelled by user
|
||||
|
||||
@event cancel
|
||||
@param {Object} event event object
|
||||
**/
|
||||
this.$element.triggerHandler('cancel');
|
||||
},
|
||||
|
||||
save: function(e, params) {
|
||||
if(this.options.autohide) {
|
||||
this.hide();
|
||||
}
|
||||
this.hide('save');
|
||||
/**
|
||||
Fired when new value was submitted. You can use <code>$(this).data('editableContainer')</code> inside handler to access to editableContainer instance
|
||||
|
||||
@ -263,7 +259,7 @@ Applied as jQuery method.
|
||||
*/
|
||||
closeOthers: function(element) {
|
||||
$('.editable-open').each(function(i, el){
|
||||
//do nothing with passed element
|
||||
//do nothing with passed element and it's children
|
||||
if(el === element || $(el).find(element).length) {
|
||||
return;
|
||||
}
|
||||
@ -277,7 +273,7 @@ Applied as jQuery method.
|
||||
}
|
||||
|
||||
if(ec.options.onblur === 'cancel') {
|
||||
$el.data('editableContainer').hide();
|
||||
$el.data('editableContainer').hide('onblur');
|
||||
} else if(ec.options.onblur === 'submit') {
|
||||
$el.data('editableContainer').tip().find('form').submit();
|
||||
}
|
||||
|
||||
@ -246,15 +246,11 @@ Makes editable any HTML element on the page. Applied as jQuery method.
|
||||
//init editableContainer: popover, tooltip, inline, etc..
|
||||
if(!this.container) {
|
||||
var containerOptions = $.extend({}, this.options, {
|
||||
value: this.value,
|
||||
autohide: false //element will take care to show/hide container. Otherwise hide() will be called twice
|
||||
value: this.value
|
||||
});
|
||||
this.$element.editableContainer(containerOptions);
|
||||
this.$element.on({
|
||||
save: $.proxy(this.save, this),
|
||||
cancel: $.proxy(function(){
|
||||
this.hide();
|
||||
}, this)
|
||||
save: $.proxy(this.save, this)
|
||||
});
|
||||
this.container = this.$element.data('editableContainer');
|
||||
} else if(this.container.tip().is(':visible')) {
|
||||
@ -293,13 +289,13 @@ Makes editable any HTML element on the page. Applied as jQuery method.
|
||||
*/
|
||||
save: function(e, params) {
|
||||
//if url is not user's function and value was not sent to server and value changed --> mark element with unsaved css.
|
||||
if(typeof this.options.url !== 'function' && params.response === undefined && this.input.value2str(this.value) !== this.input.value2str(params.newValue)) {
|
||||
if(typeof this.options.url !== 'function' && this.options.display !== false && params.response === undefined && this.input.value2str(this.value) !== this.input.value2str(params.newValue)) {
|
||||
this.$element.addClass('editable-unsaved');
|
||||
} else {
|
||||
this.$element.removeClass('editable-unsaved');
|
||||
}
|
||||
|
||||
this.hide();
|
||||
// this.hide();
|
||||
this.setValue(params.newValue);
|
||||
|
||||
/**
|
||||
|
||||
@ -79,9 +79,9 @@ $(function () {
|
||||
e.editable();
|
||||
});
|
||||
|
||||
asyncTest("events: shown / cancel / hidden", function () {
|
||||
expect(3);
|
||||
var val = '1',
|
||||
asyncTest("events: shown / hidden (reason: cancel, onblur, manual)", function () {
|
||||
expect(11);
|
||||
var val = '1', test_reason,
|
||||
e = $('<a href="#" data-pk="1" data-type="select" data-url="post.php" data-name="text" data-value="'+val+'"></a>').appendTo(fx);
|
||||
|
||||
e.on('shown', function(event) {
|
||||
@ -89,14 +89,8 @@ $(function () {
|
||||
equal(editable.value, val, 'shown triggered, value correct');
|
||||
});
|
||||
|
||||
e.on('cancel', function(event) {
|
||||
var editable = $(this).data('editable');
|
||||
ok(true, 'cancel triggered');
|
||||
});
|
||||
|
||||
e.on('hidden', function(event) {
|
||||
var editable = $(this).data('editable');
|
||||
ok(true, 'hidden triggered');
|
||||
e.on('hidden', function(event, reason) {
|
||||
ok((reason === test_reason) || (test_reason === 'manual' && reason === undefined), 'hidden triggered, reason ok');
|
||||
});
|
||||
|
||||
e.editable({
|
||||
@ -107,28 +101,42 @@ $(function () {
|
||||
|
||||
setTimeout(function() {
|
||||
var p = tip(e);
|
||||
p.find('button[type=button]').click();
|
||||
setTimeout(function() {
|
||||
e.remove();
|
||||
start();
|
||||
}, timeout);
|
||||
|
||||
test_reason = 'cancel'
|
||||
p.find('button[type=button]').click(); //cancel
|
||||
ok(!p.is(':visible'), 'popover closed');
|
||||
|
||||
test_reason = 'onblur'
|
||||
e.click();
|
||||
p = tip(e);
|
||||
ok(p.is(':visible'), 'popover shown');
|
||||
e.parent().click();
|
||||
ok(!p.is(':visible'), 'popover closed');
|
||||
|
||||
test_reason = 'manual'
|
||||
e.click();
|
||||
p = tip(e);
|
||||
ok(p.is(':visible'), 'popover shown');
|
||||
e.editable('hide');
|
||||
ok(!p.is(':visible'), 'popover closed');
|
||||
|
||||
e.remove();
|
||||
start();
|
||||
}, timeout);
|
||||
|
||||
});
|
||||
|
||||
asyncTest("event: save / hidden", function () {
|
||||
asyncTest("event: save / hidden (reason: save)", function () {
|
||||
expect(2);
|
||||
var val = '1',
|
||||
e = $('<a href="#" data-pk="1" data-type="select" data-url="post.php" data-name="text" data-value="'+val+'"></a>').appendTo(fx);
|
||||
|
||||
e.on('save', function(event, params) {
|
||||
var editable = $(this).data('editable');
|
||||
equal(params.newValue, 2, 'save triggered, value correct');
|
||||
});
|
||||
|
||||
e.on('hidden', function(event) {
|
||||
var editable = $(this).data('editable');
|
||||
ok(true, 'hidden triggered');
|
||||
e.on('hidden', function(event, reason) {
|
||||
equal(reason, 'save', 'hidden triggered, reason ok');
|
||||
});
|
||||
|
||||
e.editable({
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user