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

preventDefault only if toggle=click

Browse Source
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

7
CHANGELOG.txt

@ -1,5 +1,12 @@
X-editable changelog 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 Version 1.0.0 Nov 19, 2012
---------------------------- ----------------------------

17
src/element/editable-element.css

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

24
src/element/editable-element.js

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

5
test/unit/api.js

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