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/date/*.js',
'src/inputs/dateui/*.js', 'src/inputs/dateui/*.js',
'src/inputs/wysihtml5/*.js', 'src/inputs/wysihtml5/*.js',
'src/inputs/combodate/combodate.js',
'src/inputs/combodate/lib/combodate.js',
'src/inputs-ext/**/*.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(); this.showLoading();
//append input to form //append input to form
this.input.prerender();
this.$form.find('div.editable-input').append(this.input.$tpl); this.$form.find('div.editable-input').append(this.input.$tpl);
//append form to container //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) { init: function(type, options, defaults) {
this.type = type; this.type = type;
this.options = $.extend({}, defaults, options); 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.$tpl = $(this.options.tpl); //whole tpl as jquery object
this.$input = this.$tpl; //control itself, can be changed in render method this.$input = this.$tpl; //control itself, can be changed in render method
this.$clear = null; //clear button 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(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 //testing func, run twice!
p.find('td.day.active').next().click(); var func = function() {
p.find('form').submit(); var df = $.Deferred();
equal(frmt(e.data('editable').value, 'dd.mm.yyyy'), d, 'value correct');
setTimeout(function() {
ok(!p.is(':visible'), 'popover closed') e.click();
equal(frmt(e.data('editable').value, f), nextD, 'new date saved to value') var p = tip(e);
equal(e.text(), nextD, 'new text shown') ok(p.find('.datepicker').is(':visible'), 'datepicker exists');
e.remove(); equal(p.find('.datepicker').length, 1, 'datepicker single');
start(); ok(p.find('.datepicker').find('.datepicker-days').is(':visible'), 'datepicker days visible');
}, timeout);
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(); equal(p.find('a.ui-state-active').text(), 15, 'day shown correct');
var p = tip(e); equal(p.find('.ui-datepicker-calendar > thead > tr > th').eq(0).find('span').text(), 'Mo', 'weekStart correct');
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');
//set new day //set new day
p.find('a.ui-state-active').parent().next().click(); p.find('a.ui-state-active').parent().next().click();
p.find('form').submit(); p.find('form').submit();
setTimeout(function() { setTimeout(function() {
ok(!p.is(':visible'), 'popover closed'); ok(!p.is(':visible'), 'popover closed');
equal(frmt(e.data('editable').value, 'dd.mm.yyyy'), nextD, 'new date saved to value'); equal(frmt(e.data('editable').value, 'dd.mm.yyyy'), nextD, 'new date saved to value');
equal(e.text(), nextDview, 'new text shown'); equal(e.text(), nextDview, 'new text shown');
e.remove(); df.resolve();
start(); }, timeout);
}, 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({ e = $('<a href="#" data-pk="1" data-url="post.php">'+v1+'</a>').appendTo(fx).editable({
type: 'wysihtml5', type: 'wysihtml5',
success: function(response, newvalue) { 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'); 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() { 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() { setTimeout(function() {
ok(!p.is(':visible'), 'popover closed'); p.find('form').submit();
equal(e.data('editable').value.toLowerCase().replace(/\s*\n(?!\r)/g, ""), v2, 'new text saved to value'); setTimeout(function() {
equal(e.html().toLowerCase().replace(/\s*\n(?!\r)/g, ""), v2.toLowerCase(), 'new text shown'); ok(!p.is(':visible'), 'popover closed');
e.remove(); equal(e.data('editable').value.toLowerCase().replace(/\s*\n(?!\r)/g, ""), v2, 'new text saved to value');
start(); equal(e.html().toLowerCase().replace(/\s*\n(?!\r)/g, ""), v2.toLowerCase(), 'new text shown');
}, timeout); df.resolve();
}, 700); }, timeout);
}, 1000); }, 800);
}, 1000);
return df.promise();
};
$.when(func()).then(function() {
e.editable('setValue', v1, true);
$.when(func()).then(function() {
e.remove();
start();
});
});
}); });