selector option ready, fixes #62
This commit is contained in:
vitalets
parent
9c7a2bab60
commit
c2d8da0e11
src
test/unit
@ -23,8 +23,8 @@ Applied as jQuery method.
|
||||
innerCss: null, //tbd in child class
|
||||
init: function(element, options) {
|
||||
this.$element = $(element);
|
||||
//todo: what is in priority: data or js?
|
||||
this.options = $.extend({}, $.fn.editableContainer.defaults, $.fn.editableutils.getConfigData(this.$element), options);
|
||||
//since 1.4.1 container do not use data-* directly as they already merged into options.
|
||||
this.options = $.extend({}, $.fn.editableContainer.defaults, options);
|
||||
this.splitOptions();
|
||||
|
||||
//set scope of form callbacks to element
|
||||
|
||||
@ -11,7 +11,7 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc.
|
||||
|
||||
var EditableForm = function (div, options) {
|
||||
this.options = $.extend({}, $.fn.editableform.defaults, options);
|
||||
this.$div = $(div); //div, containing form. Not form tag! Not editable-element.
|
||||
this.$div = $(div); //div, containing form. Not form tag. Not editable-element.
|
||||
if(!this.options.scope) {
|
||||
this.options.scope = this;
|
||||
}
|
||||
|
||||
@ -8,8 +8,13 @@ Makes editable any HTML element on the page. Applied as jQuery method.
|
||||
|
||||
var Editable = function (element, options) {
|
||||
this.$element = $(element);
|
||||
this.options = $.extend({}, $.fn.editable.defaults, $.fn.editableutils.getConfigData(this.$element), options);
|
||||
this.init();
|
||||
//data-* has more priority over js options: because dynamically created elements may change data-*
|
||||
this.options = $.extend({}, $.fn.editable.defaults, options, $.fn.editableutils.getConfigData(this.$element));
|
||||
if(this.options.selector) {
|
||||
this.initLive();
|
||||
} else {
|
||||
this.init();
|
||||
}
|
||||
};
|
||||
|
||||
Editable.prototype = {
|
||||
@ -52,8 +57,10 @@ Makes editable any HTML element on the page. Applied as jQuery method.
|
||||
if(this.options.toggle !== 'manual') {
|
||||
this.$element.addClass('editable-click');
|
||||
this.$element.on(this.options.toggle + '.editable', $.proxy(function(e){
|
||||
//prevent following link
|
||||
e.preventDefault();
|
||||
//stop propagation not required anymore because in document click handler it checks event target
|
||||
|
||||
//stop propagation not required because in document click handler it checks event target
|
||||
//e.stopPropagation();
|
||||
|
||||
if(this.options.toggle === 'mouseenter') {
|
||||
@ -95,6 +102,24 @@ Makes editable any HTML element on the page. Applied as jQuery method.
|
||||
}, this));
|
||||
},
|
||||
|
||||
/*
|
||||
Initializes parent element for live editables
|
||||
*/
|
||||
initLive: function() {
|
||||
//store selector
|
||||
var selector = this.options.selector;
|
||||
//modify options for child elements
|
||||
this.options.selector = false;
|
||||
this.options.autotext = 'never';
|
||||
//listen toggle events
|
||||
this.$element.on(this.options.toggle + '.editable', selector, $.proxy(function(e){
|
||||
var $target = $(e.target);
|
||||
if(!$target.data('editable')) {
|
||||
$target.editable(this.options).trigger(e);
|
||||
}
|
||||
}, this));
|
||||
},
|
||||
|
||||
/*
|
||||
Renders value into element's text.
|
||||
Can call custom display method from options.
|
||||
@ -622,8 +647,8 @@ Makes editable any HTML element on the page. Applied as jQuery method.
|
||||
|
||||
@property emptyclass
|
||||
@type string
|
||||
@since 1.4.1
|
||||
@default editable-empty
|
||||
@since 1.4.1
|
||||
**/
|
||||
emptyclass: 'editable-empty',
|
||||
/**
|
||||
@ -632,10 +657,35 @@ Makes editable any HTML element on the page. Applied as jQuery method.
|
||||
|
||||
@property unsavedclass
|
||||
@type string
|
||||
@since 1.4.1
|
||||
@default editable-unsaved
|
||||
@since 1.4.1
|
||||
**/
|
||||
unsavedclass: 'editable-unsaved'
|
||||
unsavedclass: 'editable-unsaved',
|
||||
/**
|
||||
If a css selector is provided, editable will be delegated to the specified targets.
|
||||
Usefull for dynamically generated DOM elements.
|
||||
**Please note**, that delegated targets can't use `emptytext` and `autotext` options,
|
||||
as they are initialized after first click.
|
||||
|
||||
@property selector
|
||||
@type string
|
||||
@since 1.4.1
|
||||
@default null
|
||||
@example
|
||||
<div id="user">
|
||||
<a href="#" data-name="username" data-type="text" title="Username">awesome</a>
|
||||
<a href="#" data-name="group" data-type="select" data-source="/groups" data-value="1" title="Group">Operator</a>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$('#user').editable({
|
||||
selector: 'a',
|
||||
url: '/post',
|
||||
pk: 1
|
||||
});
|
||||
</script>
|
||||
**/
|
||||
selector: null
|
||||
};
|
||||
|
||||
}(window.jQuery));
|
||||
|
||||
@ -155,13 +155,13 @@
|
||||
ok(!p.is(':visible'), 'popover1 closed');
|
||||
ok(!p2.is(':visible'), 'popover2 closed');
|
||||
});
|
||||
|
||||
|
||||
test("onblur: submit", function () {
|
||||
var oldValue = 'abc',
|
||||
newValue = 'cde',
|
||||
e = $('<a href="#" data-type="text" data-pk="1" data-url="post.php" id="a">'+oldValue+'</a>').appendTo('#qunit-fixture').editable({
|
||||
e = $('<a href="#" data-type="text" data-pk="1" id="a">'+oldValue+'</a>').appendTo('#qunit-fixture').editable({
|
||||
onblur: 'submit',
|
||||
url: function() {}
|
||||
send: 'never'
|
||||
}),
|
||||
e2 = $('<a href="#" data-type="text" data-pk="1" data-url="post.php" id="b">abcd</a>').appendTo('#qunit-fixture').editable();
|
||||
|
||||
@ -179,7 +179,7 @@
|
||||
$('#qunit-fixture').click();
|
||||
ok(!p.is(':visible'), 'popover1 closed');
|
||||
equal(e.data('editable').value, newValue, 'new value saved');
|
||||
|
||||
|
||||
//click on another editable
|
||||
e.click();
|
||||
p = tip(e);
|
||||
@ -644,5 +644,57 @@
|
||||
|
||||
});
|
||||
|
||||
test("`selector` option", function () {
|
||||
var parent = $('<div><a href="#" id="a" data-type="text">123</a></div>').appendTo('#qunit-fixture').editable({
|
||||
selector: 'a',
|
||||
url: 'post.php',
|
||||
source: groups
|
||||
}),
|
||||
b = $('<a href="#" id="b" data-type="select" data-value="1"></a>'),
|
||||
e = $('#a'),
|
||||
selected = 2;
|
||||
|
||||
ok(!e.hasClass('editable'), 'no editable class applied');
|
||||
|
||||
e.click();
|
||||
var p = tip(e);
|
||||
|
||||
ok(e.hasClass('editable'), 'editable class applied');
|
||||
ok(e.data('editable'), 'data(editable) ok');
|
||||
ok(!e.data('editable').selector, 'selector cleared');
|
||||
equal(e.data('editable').options.url, 'post.php', 'url ok');
|
||||
equal(e.data('editable').options.type, 'text', 'type text ok');
|
||||
|
||||
ok(p.is(':visible'), 'popover visible');
|
||||
ok(p.find('input[type=text]').length, 'input exists');
|
||||
equal(p.find('input[type=text]').val(), '123', 'input contain correct value');
|
||||
|
||||
//dynamically add second element
|
||||
b.appendTo(parent);
|
||||
e = b;
|
||||
|
||||
e.click();
|
||||
ok(!p.is(':visible'), 'first popover closed');
|
||||
|
||||
ok(e.data('editable'), 'data(editable) ok');
|
||||
ok(!e.data('editable').selector, 'selector cleared');
|
||||
equal(e.data('editable').options.url, 'post.php', 'url ok');
|
||||
equal(e.data('editable').options.type, 'select', 'type select ok');
|
||||
|
||||
p = tip(e);
|
||||
ok(p.is(':visible'), 'second popover visible');
|
||||
|
||||
ok(p.find('select').length, 'select exists');
|
||||
equal(p.find('select').find('option').length, size, 'options loaded');
|
||||
equal(p.find('select').val(), e.data('editable').value, 'selected value correct');
|
||||
|
||||
p.find('select').val(selected);
|
||||
p.find('form').submit();
|
||||
|
||||
ok(!p.is(':visible'), 'popover closed');
|
||||
equal(e.data('editable').value, selected, 'new value saved');
|
||||
equal(e.text(), groups[selected], 'new text shown');
|
||||
});
|
||||
|
||||
|
||||
}(jQuery));
|
||||
Loading…
x
Reference in New Issue
Block a user