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

many fixes for ie7+ compatibility

Browse Source
This commit is contained in:
vitalets 2012-11-27 13:25:42 +04:00
parent 1e757b833f
commit 18f29820f3
7 changed files with 154 additions and 135 deletions

4
src/editable-form/editable-form-bootstrap.js

@ -14,8 +14,8 @@ Editableform based on Twitter Bootstrap
});
//buttons
$.fn.editableform.buttons = '<button type="submit" class="btn btn-primary"><i class="icon-ok icon-white"></i></button>'+
'<button type="button" class="btn clearfix"><i class="icon-ban-circle"></i></button>';
$.fn.editableform.buttons = '<button type="submit" class="btn btn-primary editable-submit"><i class="icon-ok icon-white"></i></button>'+
'<button type="button" class="btn editable-cancel"><i class="icon-ban-circle"></i></button>';
//error classes
$.fn.editableform.errorGroupClass = 'error';

6
src/editable-form/editable-form-jqueryui.js

@ -8,12 +8,12 @@ Editableform based on jQuery UI
this.$form = $($.fn.editableform.template);
//buttons
this.$form.find('div.editable-buttons').append($.fn.editableform.buttons);
this.$form.find('button[type=submit]').button({
this.$form.find('.editable-buttons').append($.fn.editableform.buttons);
this.$form.find('.editable-submit').button({
icons: { primary: "ui-icon-check" },
text: false
}).removeAttr('title');
this.$form.find('button[type=button]').button({
this.$form.find('.editable-cancel').button({
icons: { primary: "ui-icon-cancel" },
text: false
}).removeAttr('title');

16
src/editable-form/editable-form.css

@ -9,15 +9,24 @@
.editable-buttons {
display: inline-block; /* should be inline to take effect of parent's white-space: nowrap */
vertical-align: top;
margin-left: 7px;
/* display-inline emulation for IE7*/
zoom: 1;
*display: inline;
}
.editable-input {
vertical-align: top;
display: inline-block; /* should be inline to take effect of parent's white-space: nowrap */
width: auto; /* bootstrap-responsive has width: 100% that breakes layout */
white-space: normal; /* reset white-space decalred in parent*/
/* display-inline emulation for IE7*/
zoom: 1;
*display: inline;
}
.editable-buttons button {
.editable-buttons .editable-cancel {
margin-left: 7px;
}
@ -29,6 +38,7 @@
.editableform-loading {
background: url('img/loading.gif') center center no-repeat;
height: 25px;
width: auto;
}
.editable-inline .editableform-loading {
@ -39,7 +49,7 @@
max-width: 300px;
padding-top: 3px;
margin: 0;
clear: both;
width: auto;
}
.editable-error {
@ -58,7 +68,7 @@
.editable-clear {
clear: both;
float: right;
font-size: 0.9em;
text-decoration: none;
text-align: right;
}

31
src/editable-form/editable-form.js

@ -63,23 +63,26 @@ Editableform is linked with one of input types, e.g. 'text' or 'select'.
//input
this.$form.find('div.editable-input').append(this.input.$input);
//clear link
//"clear" link
if(this.input.$clear) {
this.$form.find('div.editable-input').append(this.input.$clear);
this.$form.find('div.editable-input').append($('<div class="editable-clear">').append(this.input.$clear));
}
//attach 'cancel' handler
this.$form.find('button[type=button]').click($.proxy(this.cancel, this));
//append form to container
this.$element.append(this.$form);
//attach 'cancel' handler
this.$form.find('.editable-cancel').click($.proxy(this.cancel, this));
// this.$form.find('.editable-buttons button').eq(1).click($.proxy(this.cancel, this));
if(this.input.error) {
this.error(this.input.error);
this.$form.find('button[type=submit]').attr('disabled', true);
this.$form.find('.editable-submit').attr('disabled', true);
this.input.$input.attr('disabled', true);
} else {
this.error(false);
this.input.$input.removeAttr('disabled');
this.$form.find('button[type=submit]').removeAttr('disabled');
this.$form.find('.editable-submit').removeAttr('disabled');
this.input.value2input(this.value);
this.$form.submit($.proxy(this.submit, this));
}
@ -103,12 +106,18 @@ Editableform is linked with one of input types, e.g. 'text' or 'select'.
this.$element.triggerHandler('cancel');
},
showLoading: function() {
var fw, fh, iw, bh;
//set loading size equal to form
var w;
if(this.$form) {
//set loading size equal to form
this.$loading.width(this.$form.outerWidth());
this.$loading.height(this.$form.outerHeight());
this.$form.hide();
} else {
//stretch loading to fill container width
w = this.$loading.parent().width();
if(w) {
this.$loading.width(w);
}
}
this.$loading.show();
},
@ -409,7 +418,7 @@ Editableform is linked with one of input types, e.g. 'text' or 'select'.
*/
$.fn.editableform.template = '<form class="form-inline editableform">'+
'<div class="control-group">' +
'<div class="editable-input"></div><div class="editable-buttons"></div>'+
'<div><div class="editable-input"></div><div class="editable-buttons"></div></div>'+
'<div class="editable-error-block"></div>' +
'</div>' +
'</form>';
@ -418,8 +427,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" class="editable-submit">ok</button>'+
'<button type="button" class="editable-cancel">cancel</button>';
//error class attahced to control-group
$.fn.editableform.errorGroupClass = null;

8
src/element/editable-element.js

@ -35,7 +35,7 @@ Makes editable any HTML element on the page. Applied as jQuery method.
//create input of specified type. Input will be used for converting value, not in form
if(typeof $.fn.editableform.types[this.options.type] === 'function') {
TypeConstructor = $.fn.editableform.types[this.options.type];
this.typeOptions = $.fn.editableform.utils.sliceObj(this.options, Object.keys(TypeConstructor.defaults));
this.typeOptions = $.fn.editableform.utils.sliceObj(this.options, $.fn.editableform.utils.objectKeys(TypeConstructor.defaults));
this.input = new TypeConstructor(this.typeOptions);
} else {
$.error('Unknown type: '+ this.options.type);
@ -53,7 +53,7 @@ Makes editable any HTML element on the page. Applied as jQuery method.
//attach handler to close any container on escape
$(document).off('keyup.editable').on('keyup.editable', function (e) {
if (e.which === 27) {
$('.editable-container').find('button[type=button]').click();
$('.editable-container').find('.editable-cancel').click();
}
});
@ -65,7 +65,7 @@ Makes editable any HTML element on the page. Applied as jQuery method.
return;
}
//close all other containers
$('.editable-container').find('button[type=button]').click();
$('.editable-container').find('.editable-cancel').click();
});
//add 'editable' class
@ -229,7 +229,7 @@ Makes editable any HTML element on the page. Applied as jQuery method.
}
//hide all other editable containers. Required to work correctly with toggle = manual
$('.editable-container').find('button[type=button]').click();
$('.editable-container').find('.editable-cancel').click();
//show container
this.container.show();

2
src/inputs/date/date.js

@ -56,7 +56,7 @@ $(function(){
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){
this.$clear = $('<a href="#"></a>').html(this.options.clear).click($.proxy(function(e){
e.preventDefault();
e.stopPropagation();
this.clear();

2
src/inputs/dateui/dateui.js

@ -54,7 +54,7 @@ $(function(){
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){
this.$clear = $('<a href="#"></a>').html(this.options.clear).click($.proxy(function(e){
e.preventDefault();
e.stopPropagation();
this.clear();