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

add prerender method in inputs to fix bug on second open

Browse Source
This commit is contained in:
vitalets 2013-01-10 23:15:32 +04:00
parent 1a3f3fc725
commit 473a9d9126
6 changed files with 125 additions and 70 deletions

2
grunt.js

@ -159,6 +159,8 @@ module.exports = function(grunt) {
'src/inputs/date/*.js',
'src/inputs/dateui/*.js',
'src/inputs/wysihtml5/*.js',
'src/inputs/combodate/combodate.js',
'src/inputs/combodate/lib/combodate.js',
'src/inputs-ext/**/*.js'
]
},

1
src/editable-form/editable-form.js

@ -65,6 +65,7 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc.
this.showLoading();
//append input to form
this.input.prerender();
this.$form.find('div.editable-input').append(this.input.$tpl);
//append form to container

8
src/inputs/abstract.js

@ -21,10 +21,16 @@ To create your own input you can inherit from this class.
init: function(type, options, defaults) {
this.type = type;
this.options = $.extend({}, defaults, options);
},
/*
this method called before render to init $tpl that is inserted in DOM
*/
prerender: function() {
this.$tpl = $(this.options.tpl); //whole tpl as jquery object
this.$input = this.$tpl; //control itself, can be changed in render method
this.$clear = null; //clear button
this.error = null; //error message, if input cannot be rendered
this.error = null; //error message, if input cannot be rendered
},
/**

60
test/unit/date.js

@ -38,30 +38,44 @@ $(function () {
equal(settings.data.value, nextD, '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');
ok(p.find('.datepicker').find('.datepicker-days').is(':visible'), 'datepicker days visible');
equal(frmt(e.data('editable').value, f), d, 'day set correct');
ok(p.find('td.day.active').is(':visible'), 'active day is visible');
equal(p.find('td.day.active').text(), 15, 'day shown correct');
equal(p.find('th.dow').eq(0).text(), 'Mo', 'weekStart correct');
//set new day
p.find('td.day.active').next().click();
p.find('form').submit();
setTimeout(function() {
ok(!p.is(':visible'), 'popover closed')
equal(frmt(e.data('editable').value, f), nextD, 'new date saved to value')
equal(e.text(), nextD, 'new text shown')
e.remove();
start();
}, timeout);
//testing func, run twice!
var func = function() {
var df = $.Deferred();
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(p.find('.datepicker').length, 1, 'datepicker single');
ok(p.find('.datepicker').find('.datepicker-days').is(':visible'), 'datepicker days visible');
equal(frmt(e.data('editable').value, f), d, 'day set correct');
ok(p.find('td.day.active').is(':visible'), 'active day is visible');
equal(p.find('td.day.active').text(), 15, 'day shown correct');
equal(p.find('th.dow').eq(0).text(), 'Mo', 'weekStart correct');
//set new day
p.find('td.day.active').next().click();
p.find('form').submit();
setTimeout(function() {
ok(!p.is(':visible'), 'popover closed');
equal(frmt(e.data('editable').value, f), nextD, 'new date saved to value');
equal(e.text(), nextD, 'new text shown');
df.resolve();
}, timeout);
return df.promise();
};
$.when(func()).then(function() {
e.editable('setValue', d, true);
$.when(func()).then(function() {
e.remove();
start();
});
});
});

51
test/unit/dateui.js

@ -40,26 +40,41 @@ $(function () {
}
});
equal(frmt(e.data('editable').value, 'dd.mm.yyyy'), d, 'value correct');
//testing func, run twice!
var func = function() {
var df = $.Deferred();
equal(frmt(e.data('editable').value, 'dd.mm.yyyy'), d, 'value correct');
e.click();
var p = tip(e);
ok(p.find('.ui-datepicker').is(':visible'), 'datepicker exists');
equal(p.find('.ui-datepicker').length, 1, 'datepicker single');
e.click();
var p = tip(e);
ok(p.find('.ui-datepicker').is(':visible'), 'datepicker exists');
equal(p.find('a.ui-state-active').text(), 15, 'day shown correct');
equal(p.find('.ui-datepicker-calendar > thead > tr > th').eq(0).find('span').text(), 'Mo', 'weekStart correct');
equal(p.find('a.ui-state-active').text(), 15, 'day shown correct');
equal(p.find('.ui-datepicker-calendar > thead > tr > th').eq(0).find('span').text(), 'Mo', 'weekStart correct');
//set new day
p.find('a.ui-state-active').parent().next().click();
p.find('form').submit();
setTimeout(function() {
ok(!p.is(':visible'), 'popover closed');
equal(frmt(e.data('editable').value, 'dd.mm.yyyy'), nextD, 'new date saved to value');
equal(e.text(), nextDview, 'new text shown');
e.remove();
start();
}, timeout);
//set new day
p.find('a.ui-state-active').parent().next().click();
p.find('form').submit();
setTimeout(function() {
ok(!p.is(':visible'), 'popover closed');
equal(frmt(e.data('editable').value, 'dd.mm.yyyy'), nextD, 'new date saved to value');
equal(e.text(), nextDview, 'new text shown');
df.resolve();
}, timeout);
return df.promise();
};
$.when(func()).then(function() {
e.editable('setValue', d, true);
$.when(func()).then(function() {
e.remove();
start();
});
});
});

73
test/unit/wysihtml5.js

@ -13,41 +13,58 @@ $(function () {
e = $('<a href="#" data-pk="1" data-url="post.php">'+v1+'</a>').appendTo(fx).editable({
type: 'wysihtml5',
success: function(response, newvalue) {
// construction: replace(/\s*\n(?!\r)/g, "") required to clear newlines added in ie8
// construction replace(/\s*\n(?!\r)/g, "") required to clear newlines added in ie8
equal(newvalue.toLowerCase().replace(/\s*\n(?!\r)/g, ""), v2, 'value in success ok');
}
});
e.click();
//testing func, run twice!
var func = function() {
var df = $.Deferred();
e.click();
setTimeout(function() {
var p = tip(e);
ok(p.is(':visible'), 'container visible');
ok(p.find('textarea').is(':hidden'), 'textarea hidden');
ok(p.find('iframe').length, 'iframe shown');
ok(p.find('.wysihtml5-toolbar').length, 'toolbar shown');
equal(p.find('textarea').val().toLowerCase(), v1.toLowerCase(), 'textrea val correct');
var iframe = document.querySelectorAll('.wysihtml5-sandbox'),
$c = $(iframe[0]).contents().find('body');
equal($c.html().toLowerCase(), v1.toLowerCase(), 'content correct');
//set new value, should wait async while it render to iframe
$c.html(v2);
setTimeout(function() {
p.find('form').submit();
var p = tip(e);
ok(p.is(':visible'), 'container visible');
ok(p.find('textarea').is(':hidden'), 'textarea hidden');
equal(p.find('iframe').length, 1, 'iframe single');
ok(p.find('.wysihtml5-toolbar').length, 'toolbar shown');
equal(p.find('textarea').val().toLowerCase(), v1.toLowerCase(), 'textrea val correct');
var iframe = document.querySelectorAll('.wysihtml5-sandbox'),
$c = $(iframe[0]).contents().find('body');
ok($(iframe[0]).width() > 0, 'iframe has width');
ok($(iframe[0]).height() > 0, 'iframe has height');
equal($c.html().toLowerCase(), v1.toLowerCase(), 'content correct');
//set new value, should wait async while it render to iframe
$c.html(v2);
setTimeout(function() {
ok(!p.is(':visible'), 'popover closed');
equal(e.data('editable').value.toLowerCase().replace(/\s*\n(?!\r)/g, ""), v2, 'new text saved to value');
equal(e.html().toLowerCase().replace(/\s*\n(?!\r)/g, ""), v2.toLowerCase(), 'new text shown');
e.remove();
start();
}, timeout);
}, 700);
}, 1000);
p.find('form').submit();
setTimeout(function() {
ok(!p.is(':visible'), 'popover closed');
equal(e.data('editable').value.toLowerCase().replace(/\s*\n(?!\r)/g, ""), v2, 'new text saved to value');
equal(e.html().toLowerCase().replace(/\s*\n(?!\r)/g, ""), v2.toLowerCase(), 'new text shown');
df.resolve();
}, timeout);
}, 800);
}, 1000);
return df.promise();
};
$.when(func()).then(function() {
e.editable('setValue', v1, true);
$.when(func()).then(function() {
e.remove();
start();
});
});
});