diff --git a/CHANGELOG.txt b/CHANGELOG.txt
index d409431..c15f408 100644
--- a/CHANGELOG.txt
+++ b/CHANGELOG.txt
@@ -1,8 +1,10 @@
X-editable changelog
=============================
-Version 1.0.2 wip
+Version 1.1.0 wip
----------------------------
+[enh] 'clear' button added in date (vitalets)
+[enh] form template changed: added DIV.editable-input, DIV.editable.buttons and $.fn.editableform buttons (vitalets)
[enh] new input type: checklist (vitalets)
[enh] updated docs: inputs dropdown menu, global templates section (vitalets)
diff --git a/src/editable-form/editable-form.css b/src/editable-form/editable-form.css
index 35f0eb0..7a5b7b0 100644
--- a/src/editable-form/editable-form.css
+++ b/src/editable-form/editable-form.css
@@ -51,4 +51,9 @@
.editableform .editable-date {
padding: 0;
margin: 0;
+}
+
+.editable-clear {
+ float: right;
+ font-size: 0.9em;
}
\ No newline at end of file
diff --git a/src/editable-form/editable-form.js b/src/editable-form/editable-form.js
index 4dd82f2..854e40d 100644
--- a/src/editable-form/editable-form.js
+++ b/src/editable-form/editable-form.js
@@ -418,8 +418,8 @@ Editableform is linked with one of input types, e.g. 'text' or 'select'.
$.fn.editableform.loading = '<div class="editableform-loading"></div>';
//buttons
- $.fn.editableform.buttons = '<button type="submit">Ok</button>'+
- '<button type="button">Cancel</button>';
+ $.fn.editableform.buttons = '<button type="submit">ok</button>'+
+ '<button type="button">cancel</button>';
//error class attahced to control-group
$.fn.editableform.errorGroupClass = null;
diff --git a/src/inputs/abstract.js b/src/inputs/abstract.js
index bb2b243..a40d742 100644
--- a/src/inputs/abstract.js
+++ b/src/inputs/abstract.js
@@ -18,6 +18,7 @@ To create your own input you should inherit from this class.
this.type = type;
this.options = $.extend({}, defaults, options);
this.$input = null;
+ this.$clear = null;
this.error = null;
},
@@ -28,14 +29,13 @@ To create your own input you should inherit from this class.
**/
render: function() {
this.$input = $(this.options.tpl);
- this.$input.addClass('editable-input');
if(this.options.inputclass) {
this.$input.addClass(this.options.inputclass);
}
if (this.options.placeholder) {
this.$input.attr('placeholder', this.options.placeholder);
- }
+ }
},
/**
@@ -111,6 +111,15 @@ To create your own input you should inherit from this class.
if(this.$input.is(':visible')) {
this.$input.focus();
}
+ },
+
+ /**
+ Creares input.
+
+ @method clear()
+ **/
+ clear: function() {
+ this.$input.val(null);
}
};
diff --git a/src/inputs/date/date.js b/src/inputs/date/date.js
index 5081db2..b16f57e 100644
--- a/src/inputs/date/date.js
+++ b/src/inputs/date/date.js
@@ -54,6 +54,14 @@ $(function(){
render: function () {
Date.superclass.render.call(this);
this.$input.datepicker(this.options.datepicker);
+
+ if(this.options.clear) {
+ this.$clear = $('<a href="#">').addClass('editable-clear').html(this.options.clear).click($.proxy(function(e){
+ e.preventDefault();
+ e.stopPropagation();
+ this.clear();
+ }, this));
+ }
},
value2html: function(value, element) {
@@ -82,7 +90,12 @@ $(function(){
},
activate: function() {
- }
+ },
+
+ clear: function() {
+ this.$input.data('datepicker').date = null;
+ this.$input.find('.active').removeClass('active');
+ }
});
@@ -131,7 +144,16 @@ $(function(){
weekStart: 0,
startView: 0,
autoclose: false
- }
+ },
+ /**
+ Text shown as clear date button.
+ If <code>false</code> clear button will not be rendered.
+
+ @property clear
+ @type boolean|string
+ @default 'x clear'
+ **/
+ clear: '× clear'
});
$.fn.editableform.types.date = Date;
diff --git a/src/inputs/text.js b/src/inputs/text.js
index 8d2f259..8557c2a 100644
--- a/src/inputs/text.js
+++ b/src/inputs/text.js
@@ -25,8 +25,8 @@ $(function(){
$.extend(Text.prototype, {
activate: function() {
if(this.$input.is(':visible')) {
- $.fn.editableform.utils.setCursorPosition(this.$input.get(0), this.$input.val().length);
this.$input.focus();
+ $.fn.editableform.utils.setCursorPosition(this.$input.get(0), this.$input.val().length);
}
}
});
diff --git a/test/unit/date.js b/test/unit/date.js
index fec2cc7..e2ab4cc 100644
--- a/test/unit/date.js
+++ b/test/unit/date.js
@@ -14,7 +14,7 @@ $(function () {
return dpg.formatDate(date, dpg.parseFormat(format), 'en');
}
- asyncTest("popover should contain datepicker with value and save new entered date", function () {
+ asyncTest("container should contain datepicker with value and save new entered date", function () {
expect(9);
$.fn.editableform.types.date.defaults.datepicker.weekStart = 1;
@@ -130,5 +130,47 @@ $(function () {
p.find('button[type=button]').click();
ok(!p.is(':visible'), 'popover closed');
});
+
+ asyncTest("clear button", function () {
+ var d = '15.05.1984',
+ e = $('<a href="#" data-type="date" data-pk="1" data-url="post-date-clear.php">'+d+'</a>').appendTo(fx).editable({
+ format: f,
+ clear: 'abc'
+ });
+
+ $.mockjax({
+ url: 'post-date-clear.php',
+ response: function(settings) {
+ equal(settings.data.value, '', 'submitted value correct');
+ }
+ });
+
+ equal(frmt(e.data('editable').value, 'dd.mm.yyyy'), d, 'value correct');
+
+ e.click();
+ var p = tip(e);
+ ok(p.find('.datepicker').is(':visible'), 'datepicker exists');
+
+ equal(frmt(e.data('editable').value, f), d, 'day set correct');
+ equal(p.find('td.day.active').text(), 15, 'day shown correct');
+
+ var clear = p.find('.editable-clear');
+ equal(clear.text(), 'abc', 'clear link shown');
+
+ //click clear
+ clear.click();
+ ok(!p.find('td.day.active').length, 'no active day');
+
+ p.find('form').submit();
+
+ setTimeout(function() {
+ ok(!p.is(':visible'), 'popover closed');
+ equal(e.data('editable').value, null, 'null saved to value');
+ equal(e.text(), e.data('editable').options.emptytext, 'empty text shown');
+ e.remove();
+ start();
+ }, timeout);
+
+ });
});
\ No newline at end of file