preventDefault only if toggle=click

This commit is contained in:
vitalets 2012-11-21 14:29:10 +04:00
parent 4c94f7101a
commit d9e818d287
4 changed files with 33 additions and 20 deletions

@ -1,5 +1,12 @@
X-editable changelog
=============================
Version 1.0.1 wip
----------------------------
[enh #6] do not preventDetault() in click when toggle='manual'. This allows to have clickable links (vitalets)
[bug #3] should not mark element with unsave css if url is user's function (vitalets)
Version 1.0.0 Nov 19, 2012
----------------------------

@ -1,8 +1,18 @@
.editable-click, a.editable-click, a.editable-click:hover {
.editable-click,
a.editable-click,
a.editable-click:hover {
text-decoration: none;
border-bottom: dashed 1px #0088cc;
}
.editable-click.editable-disabled,
a.editable-click.editable-disabled,
a.editable-click.editable-disabled:hover {
color: #585858;
cursor: default;
border-bottom: none;
}
.editable-empty, .editable-empty:hover{
font-style: italic;
color: #DD1144;
@ -18,8 +28,3 @@
/* content: '*'*/
}
.editable-disabled, a.editable-disabled, a.editable-disabled:hover {
color: black;
cursor: default;
text-decoration: none;
}

@ -74,8 +74,13 @@ Makes editable any HTML element on the page. Applied as jQuery method.
//add 'editable' class
this.$element.addClass('editable');
//always attach click handler, but in disabled mode it just prevent default action (useful for links)
this.$element.on('click.editable', $.proxy(this.click, this));
//attach click handler. In disabled mode it just prevent default action (useful for links)
if(this.options.toggle === 'click') {
this.$element.addClass('editable-click');
this.$element.on('click.editable', $.proxy(this.click, this));
} else {
this.$element.attr('tabindex', -1); //do not stop focus on element when toggled manually
}
//check conditions for autotext:
//if value was generated by text or value is empty, no sense to run autotext
@ -114,8 +119,7 @@ Makes editable any HTML element on the page. Applied as jQuery method.
this.$element.removeClass('editable-disabled');
this.handleEmpty();
if(this.options.toggle === 'click') {
this.$element.addClass('editable-click');
if(this.$element.attr('tabindex') === -1) {
if(this.$element.attr('tabindex') === '-1') {
this.$element.removeAttr('tabindex');
}
}
@ -128,12 +132,10 @@ Makes editable any HTML element on the page. Applied as jQuery method.
disable: function() {
this.options.disabled = true;
this.hide();
this.$element.addClass('editable-disabled');
this.$element.addClass('editable-disabled')
this.handleEmpty();
if(this.options.toggle === 'click') {
this.$element.removeClass('editable-click');
this.$element.attr('tabindex', -1);
}
//do not stop focus on this element
this.$element.attr('tabindex', -1);
},
/**
@ -196,10 +198,10 @@ Makes editable any HTML element on the page. Applied as jQuery method.
click: function (e) {
e.preventDefault();
if(this.options.disabled || this.options.toggle !== 'click') {
if(this.options.disabled) {
return;
}
//stop propagation bacause document listen any click to hide all containers
//stop propagation bacause document listen any click to hide all editableContainers
e.stopPropagation();
this.toggle();
},

@ -238,14 +238,14 @@ $(function () {
disabled: true
});
ok(e.hasClass('editable-disabled'), 'has disabled class');
ok(!e.hasClass('editable-click'), 'does not have click class');
ok(e.hasClass('editable-click'), 'has click class');
e.click();
ok(!e.data('editableContainer'), 'nothing on click');
e.editable('enable');
ok(!e.hasClass('editable-disabled'), 'does not have disabled class');
ok(e.hasClass('editable-click'), 'has click class');
e.click();
var p = tip(e);
ok(p.is(':visible'), 'popover shown on click');
@ -253,7 +253,6 @@ $(function () {
e.editable('disable');
p = tip(e);
ok(e.hasClass('editable-disabled'), 'has disabled class');
ok(!e.hasClass('editable-click'), 'does not have click class');
ok(!p.is(':visible'), 'popover closed');
e.editable('toggleDisabled');