tracer/x-editable
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

success moved to editableform

Browse Source
This commit is contained in:
vitalets 2012-11-22 18:14:57 +04:00
parent c3b53ec070
commit e79118f0cf
8 changed files with 118 additions and 51 deletions

28
src/containers/editable-container.js

@ -107,8 +107,30 @@ Applied as jQuery method.
Hides container with form
@method hide()
**/
hide: function() {
hide: function() {
if(!this.tip() || !this.tip().is(':visible')) {
return;
}
this.call('hide');
/**
Fired when container was hidden. It occurs on both save or cancel.
@event hidden
@param {Object} event event object
**/
this.$element.triggerHandler('hidden');
},
/**
Toggles container visibility (show / hide)
@method toggle()
**/
toggle: function() {
if(this.tip && this.tip().is(':visible')) {
this.hide();
} else {
this.show();
}
},
/*
@ -119,12 +141,12 @@ Applied as jQuery method.
//tbd in child class
},
cancel: function() {
cancel: function() {
if(this.options.autohide) {
this.hide();
}
/**
Fired when form was cancelled
Fired when form was cancelled by user
@event cancel
@param {Object} event event object

8
src/containers/editable-inline.js

@ -41,12 +41,18 @@
},
hide: function () {
if(!this.tip() || !this.tip().is(':visible')) {
return;
}
this.$form.hide(this.options.anim, $.proxy(function() {
this.$element.show();
//return focus on element
if (this.options.enablefocus) {
this.$element.focus();
}
}
//trigger event
this.$element.triggerHandler('hidden');
}, this));
},

6
src/containers/editable-tooltip.js

@ -63,7 +63,11 @@
},
hide: function() {
this.call('close');
if(!this.tip() || !this.tip().is(':visible')) {
return;
}
this.call('close');
this.$element.triggerHandler('hidden');
},
setPosition: function() {

23
src/editable-form/editable-form.js

@ -167,6 +167,14 @@ Editableform is linked with one of input types, e.g. 'text' or 'select'.
//sending data to server
$.when(this.save(newValueStr))
.done($.proxy(function(response) {
var error;
//call success callback. if it returns string --> show error
if(error = this.options.success.call(this, response, newValue)) {
this.error(error);
this.showForm();
return;
}
//clear error message
this.error(false);
this.value = newValue;
@ -367,7 +375,20 @@ Editableform is linked with one of input types, e.g. 'text' or 'select'.
}
}
**/
validate: null
validate: null,
/**
Success callback. Called when value successfully sent on server and response status = 200.
Can be used to process json response. If this function returns string - means error occured and string is shown as error message.
@property success
@type function
@default null
@example
success: function(response, newValue) {
if(!response.success) return response.msg;
}
**/
success: function(response, newValue) {}
};
/*

43
src/element/editable-element.js

@ -220,7 +220,7 @@ Makes editable any HTML element on the page. Applied as jQuery method.
if(!this.container) {
var containerOptions = $.extend({}, this.options, {
value: this.value,
autohide: false
autohide: false //element itsef will show/hide container
});
this.$element.editableContainer(containerOptions);
this.$element.on({
@ -243,22 +243,22 @@ Makes editable any HTML element on the page. Applied as jQuery method.
Hides container with form
@method hide()
**/
hide: function () {
if(this.container && this.container.tip().is(':visible')) {
hide: function () {
if(this.container) {
this.container.hide();
//return focus on element
if (this.options.enablefocus && this.options.toggle === 'click') {
this.$element.focus();
}
}
//return focus on element
if (this.options.enablefocus && this.options.toggle === 'click') {
this.$element.focus();
}
},
/**
Toggles container visibility (show / hide)
@method toggle()
**/
toggle: function () {
toggle: function() {
if(this.container && this.container.tip().is(':visible')) {
this.hide();
} else {
@ -270,16 +270,6 @@ Makes editable any HTML element on the page. Applied as jQuery method.
* called when form was submitted
*/
save: function(e, params) {
var error, form;
//if sent to server, call success callback. if it return string --> show error
if((params.response !== undefined) && (error = this.options.success.call(this, params.response, params.newValue))) {
form = this.container.tip().find('form').parent().data('editableform');
form.error(error);
form.showForm();
return;
}
//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)) {
this.$element.addClass('editable-unsaved');
@ -539,20 +529,7 @@ Makes editable any HTML element on the page. Applied as jQuery method.
@type mixed
@default element's text
**/
value: null,
/**
Success callback. Called when value successfully sent on server and response status = 200.
Can be used to process json response. If this function returns string - means error occured and string is shown as error message.
@property success
@type function
@default null
@example
success: function(response, newValue) {
if(!response.success) return response.msg;
}
**/
success: function(response, newValue) {}
value: null
};
}(window.jQuery));

46
test/unit/api.js

@ -179,8 +179,8 @@ $(function () {
});
asyncTest("events: shown / cancel", function () {
expect(2);
asyncTest("events: shown / cancel / hidden", function () {
expect(3);
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);
@ -192,7 +192,12 @@ $(function () {
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.editable({
source: 'groups.php',
@ -209,7 +214,38 @@ $(function () {
}, timeout);
}, timeout);
});
});
asyncTest("event: save / hidden", 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.editable({
source: 'groups.php',
});
e.click();
var p = tip(e);
p.find('select').val(2);
p.find('form').submit();
setTimeout(function() {
p.find('button[type=button]').click();
e.remove();
start();
}, timeout);
});
test("show/hide/toggle methods", function () {
@ -375,7 +411,7 @@ $(function () {
});
test("setValue", function () {
test("setValue method", function () {
var e = $('<a href="#" data-name="name" data-type="select" data-url="post.php"></a>').appendTo('#qunit-fixture').editable({
value: 1,
source: groups

2
test/unit/common.js

@ -107,7 +107,7 @@
ok(!p2.is(':visible'), 'popover2 closed');
});
test("click outside popoover should hide it", function () {
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');

13
test/unit/text.js

@ -186,13 +186,14 @@ $(function () {
}, timeout);
});
asyncTest("should show error if success callback return string", function () {
var e = $('<a href="#" data-pk="1" data-url="post.php" data-name="text1">abc</a>').appendTo(fx).editable({
success: function(data) {
asyncTest("should show error if success callback returns string", function () {
var newText = 'cd<e>;"',
e = $('<a href="#" data-pk="1" data-url="post.php" data-name="text1">abc</a>').appendTo(fx).editable({
success: function(response, newValue) {
equal(newValue, newText, 'value in success passed correctly');
return 'error';
}
}),
newText = 'cd<e>;"'
});
e.click()
var p = tip(e);
@ -211,7 +212,7 @@ $(function () {
start();
}, timeout);
})
});
asyncTest("should submit all required params", function () {
var e = $('<a href="#" data-pk="1" data-url="post-resp.php">abc</a>').appendTo(fx).editable({