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

bs3 first working version

Browse Source
This commit is contained in:
vitalets 2013-08-31 09:53:34 +04:00
parent 99eb7223ce
commit 5c5a24b86b
14 changed files with 339 additions and 24 deletions

5
src/containers/editable-container.js

@ -24,6 +24,8 @@ Applied as jQuery method.
containerDataName: null, //object name in element's .data()
innerCss: null, //tbd in child class
containerClass: 'editable-container editable-popup', //css class applied to container element
defaults: {}, //container itself defaults
init: function(element, options) {
this.$element = $(element);
//since 1.4.1 container do not use data-* directly as they already merged into options.
@ -101,10 +103,9 @@ Applied as jQuery method.
throw new Error(this.containerName + ' not found. Have you included corresponding js file?');
}
var cDef = $.fn[this.containerName].defaults;
//keys defined in container defaults go to container, others go to form
for(var k in this.options) {
if(k in cDef) {
if(k in this.defaults) {
this.containerOptions[k] = this.options[k];
} else {
this.formOptions[k] = this.options[k];

5
src/containers/editable-popover.js

@ -11,13 +11,14 @@
containerName: 'popover',
//for compatibility with bootstrap <= 2.2.1 (content inserted into <p> instead of directly .popover-content)
innerCss: $.fn.popover && $($.fn.popover.defaults.template).find('p').length ? '.popover-content p' : '.popover-content',
defaults: $.fn.popover.defaults,
initContainer: function(){
$.extend(this.containerOptions, {
trigger: 'manual',
selector: false,
content: ' ',
template: $.fn.popover.defaults.template
template: this.defaults.template
});
//as template property is used in inputs, hide it from popover

199
src/containers/editable-popover3.js Normal file

@ -0,0 +1,199 @@
/**
* Editable Popover3 (for Bootstrap 3)
* ---------------------
* requires bootstrap-popover.js
*/
(function ($) {
"use strict";
//extend methods
$.extend($.fn.editableContainer.Popup.prototype, {
containerName: 'popover',
containerDataName: 'bs.popover',
innerCss: '.popover-content',
defaults: $.fn.popover.Constructor.DEFAULTS,
initContainer: function(){
$.extend(this.containerOptions, {
trigger: 'manual',
selector: false,
content: ' ',
template: this.defaults.template
});
//as template property is used in inputs, hide it from popover
var t;
if(this.$element.data('template')) {
t = this.$element.data('template');
this.$element.removeData('template');
}
this.call(this.containerOptions);
if(t) {
//restore data('template')
this.$element.data('template', t);
}
},
/* show */
innerShow: function () {
this.call('show');
},
/* hide */
innerHide: function () {
this.call('hide');
},
/* destroy */
innerDestroy: function() {
this.call('destroy');
},
setContainerOption: function(key, value) {
this.container().options[key] = value;
},
/**
* move popover to new position. This function mainly copied from bootstrap-popover.
*/
/*jshint laxcomma: true*/
setPosition: function () {
(function() {
/*
var $tip = this.tip()
, inside
, pos
, actualWidth
, actualHeight
, placement
, tp
, tpt
, tpb
, tpl
, tpr;
placement = typeof this.options.placement === 'function' ?
this.options.placement.call(this, $tip[0], this.$element[0]) :
this.options.placement;
inside = /in/.test(placement);
$tip
// .detach()
//vitalets: remove any placement class because otherwise they dont influence on re-positioning of visible popover
.removeClass('top right bottom left')
.css({ top: 0, left: 0, display: 'block' });
// .insertAfter(this.$element);
pos = this.getPosition(inside);
actualWidth = $tip[0].offsetWidth;
actualHeight = $tip[0].offsetHeight;
placement = inside ? placement.split(' ')[1] : placement;
tpb = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2};
tpt = {top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2};
tpl = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth};
tpr = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width};
switch (placement) {
case 'bottom':
if ((tpb.top + actualHeight) > ($(window).scrollTop() + $(window).height())) {
if (tpt.top > $(window).scrollTop()) {
placement = 'top';
} else if ((tpr.left + actualWidth) < ($(window).scrollLeft() + $(window).width())) {
placement = 'right';
} else if (tpl.left > $(window).scrollLeft()) {
placement = 'left';
} else {
placement = 'right';
}
}
break;
case 'top':
if (tpt.top < $(window).scrollTop()) {
if ((tpb.top + actualHeight) < ($(window).scrollTop() + $(window).height())) {
placement = 'bottom';
} else if ((tpr.left + actualWidth) < ($(window).scrollLeft() + $(window).width())) {
placement = 'right';
} else if (tpl.left > $(window).scrollLeft()) {
placement = 'left';
} else {
placement = 'right';
}
}
break;
case 'left':
if (tpl.left < $(window).scrollLeft()) {
if ((tpr.left + actualWidth) < ($(window).scrollLeft() + $(window).width())) {
placement = 'right';
} else if (tpt.top > $(window).scrollTop()) {
placement = 'top';
} else if (tpt.top > $(window).scrollTop()) {
placement = 'bottom';
} else {
placement = 'right';
}
}
break;
case 'right':
if ((tpr.left + actualWidth) > ($(window).scrollLeft() + $(window).width())) {
if (tpl.left > $(window).scrollLeft()) {
placement = 'left';
} else if (tpt.top > $(window).scrollTop()) {
placement = 'top';
} else if (tpt.top > $(window).scrollTop()) {
placement = 'bottom';
}
}
break;
}
switch (placement) {
case 'bottom':
tp = tpb;
break;
case 'top':
tp = tpt;
break;
case 'left':
tp = tpl;
break;
case 'right':
tp = tpr;
break;
}
$tip
.offset(tp)
.addClass(placement)
.addClass('in');
*/
var $tip = this.tip();
var placement = typeof this.options.placement == 'function' ?
this.options.placement.call(this, $tip[0], this.$element[0]) :
this.options.placement;
var pos = this.getPosition();
var actualWidth = $tip[0].offsetWidth;
var actualHeight = $tip[0].offsetHeight;
var calculatedOffset = this.getCalculatedOffset(placement, pos, actualWidth, actualHeight);
this.applyPlacement(calculatedOffset, placement);
}).call(this.container());
/*jshint laxcomma: false*/
}
});
}(window.jQuery));

1
src/containers/editable-poshytip.js

@ -10,6 +10,7 @@
$.extend($.fn.editableContainer.Popup.prototype, {
containerName: 'poshytip',
innerCss: 'div.tip-inner',
defaults: $.fn.poshytip.defaults,
initContainer: function(){
this.handlePlacement();

5
src/containers/editable-tooltip.js

@ -12,6 +12,7 @@
//object name in element's .data()
containerDataName: 'ui-tooltip',
innerCss: '.ui-tooltip-content',
defaults: $.ui.tooltip.prototype.options,
//split options on containerOptions and formOptions
splitOptions: function() {
@ -23,10 +24,10 @@
$.error('Please use jQueryUI with "tooltip" widget! http://jqueryui.com/download');
return;
}
//defaults for tooltip
var cDef = $.ui[this.containerName].prototype.options;
for(var k in this.options) {
if(k in cDef) {
if(k in this.defaults) {
this.containerOptions[k] = this.options[k];
} else {
this.formOptions[k] = this.options[k];

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

@ -1,13 +1,31 @@
/*
Editableform based on Twitter Bootstrap
Editableform based on Twitter Bootstrap 2
*/
(function ($) {
"use strict";
//store parent methods
var pInitInput = $.fn.editableform.Constructor.prototype.initInput;
$.extend($.fn.editableform.Constructor.prototype, {
initTemplate: function() {
this.$form = $($.fn.editableform.template);
this.$form.find('.editable-error-block').addClass('help-block');
},
initInput: function() {
pInitInput.apply(this);
//for bs2 set default class `input-medium` to standard inputs
var emptyInputClass = this.input.options.inputclass === null || this.input.options.inputclass === false;
var defaultClass = 'input-medium';
//add bs2 default class to standard inputs
//if(this.input.$input.is('input,select,textarea')) {
var stdtypes = 'text,select,textarea,password,email,url,tel,number,range,time'.split(',');
if(~$.inArray(this.input.type, stdtypes) && emptyInputClass) {
this.input.options.inputclass = defaultClass;
this.input.$input.addClass(defaultClass);
}
}
});
@ -17,6 +35,8 @@ Editableform based on Twitter Bootstrap
//error classes
$.fn.editableform.errorGroupClass = 'error';
$.fn.editableform.errorBlockClass = null;
$.fn.editableform.errorBlockClass = null;
//engine
$.fn.editableform.engine = 'bs2';
}(window.jQuery));

61
src/editable-form/editable-form-bootstrap3.js Normal file

@ -0,0 +1,61 @@
/*
Editableform based on Twitter Bootstrap 3
*/
(function ($) {
"use strict";
//store parent methods
var pInitInput = $.fn.editableform.Constructor.prototype.initInput;
$.extend($.fn.editableform.Constructor.prototype, {
initTemplate: function() {
this.$form = $($.fn.editableform.template);
this.$form.find('.control-group').addClass('form-group');
this.$form.find('.editable-error-block').addClass('help-block');
},
initInput: function() {
pInitInput.apply(this);
//for bs3 set default class `input-sm` to standard inputs
var emptyInputClass = this.input.options.inputclass === null || this.input.options.inputclass === false;
var defaultClass = 'input-sm';
//bs3 add `form-control` class to standard inputs
var stdtypes = 'text,select,textarea,password,email,url,tel,number,range,time'.split(',');
if(~$.inArray(this.input.type, stdtypes)) {
this.input.$input.addClass('form-control');
if(emptyInputClass) {
this.input.options.inputclass = defaultClass;
this.input.$input.addClass(defaultClass);
}
}
//apply bs3 size class also to buttons (to fit size of control)
var $btn = this.$form.find('.editable-buttons');
var classes = emptyInputClass ? [defaultClass] : this.input.options.inputclass.split(' ');
for(var i=0; i<classes.length; i++) {
if(classes[i].toLowerCase() === 'input-sm') {
$btn.find('button').addClass('btn-sm');
}
if(classes[i].toLowerCase() === 'input-lg') {
$btn.find('button').addClass('btn-lg');
}
}
}
});
//buttons
$.fn.editableform.buttons =
'<button type="submit" class="btn btn-primary editable-submit">'+
'<i class="glyphicon glyphicon-ok"></i>'+
'</button>'+
'<button type="button" class="btn btn-default editable-cancel">'+
'<i class="glyphicon glyphicon-remove"></i>'+
'</button>';
//error classes
$.fn.editableform.errorGroupClass = 'has-error';
$.fn.editableform.errorBlockClass = null;
//engine
$.fn.editableform.engine = 'bs3';
}(window.jQuery));

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

@ -26,5 +26,7 @@ Editableform based on jQuery UI
//error classes
$.fn.editableform.errorGroupClass = null;
$.fn.editableform.errorBlockClass = 'ui-state-error';
//engine
$.fn.editableform.engine = 'jqeury-ui';
}(window.jQuery));

9
src/editable-form/editable-form.js

@ -28,6 +28,9 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc.
//set initial value
//todo: may be add check: typeof str === 'string' ?
this.value = this.input.str2value(this.options.value);
//prerender: get input.$input
this.input.prerender();
},
initTemplate: function() {
this.$form = $($.fn.editableform.template);
@ -75,9 +78,8 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc.
this.initInput();
//append input to form
this.input.prerender();
this.$form.find('div.editable-input').append(this.input.$tpl);
//append form to container
this.$div.append(this.$form);
@ -615,4 +617,7 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc.
//error class attached to editable-error-block
$.fn.editableform.errorBlockClass = 'editable-error';
//engine
$.fn.editableform.engine = 'jqeury';
}(window.jQuery));

2
src/element/editable-element.js

@ -806,7 +806,7 @@ Makes editable any HTML element on the page. Applied as jQuery method.
@since 1.4.5
@default #FFFF80
**/
highlight: '#FFFF80'
highlight: '#FFFF80'
};
}(window.jQuery));

6
src/inputs/abstract.js

@ -159,7 +159,7 @@ To create your own input you can inherit from this class.
},
// -------- helper functions --------
setClass: function() {
setClass: function() {
if(this.options.inputclass) {
this.$input.addClass(this.options.inputclass);
}
@ -191,9 +191,9 @@ To create your own input you can inherit from this class.
@property inputclass
@type string
@default input-medium
@default null
**/
inputclass: 'input-medium',
inputclass: null,
//scope for external methods (e.g. source defined as function)
//for internal use only
scope: null,

7
src/inputs/combodate/combodate.js

@ -64,7 +64,14 @@ $(function(){
$.extend(Constructor.prototype, {
render: function () {
this.$input.combodate(this.options.combodate);
if($.fn.editableform.engine === 'bs3') {
this.$input.siblings().find('select').addClass('form-control');
}
if(this.options.inputclass) {
this.$input.siblings().find('select').addClass(this.options.inputclass);
}
//"clear" link
/*
if(this.options.clear) {

2
src/inputs/select2/select2.js vendored

@ -316,7 +316,7 @@ $(function(){
@type string
@default ', '
**/
viewseparator: ', '
viewseparator: ', '
});
$.fn.editabletypes.select2 = Constructor;

35
test/loader.js

@ -14,15 +14,18 @@ define(function () {
return {
loadCss: loadCss,
getConfig: function (baseUrl) {
var
jqueryui_ver = '1.10.3',
// jqueryui_ver = '1.9.1',
bs_ver = '300',
bs_major_ver = bs_ver.substr(0,1),
paths = {
// "bootstrap": "../test/libs/bootstrap221",
// "bootstrap": "../test/libs/bootstrap222",
// "bootstrap": "../test/libs/bootstrap231",
"bootstrap": "../test/libs/bootstrap232",
// "bootstrap": "../test/libs/bootstrap232",
"bootstrap": "../test/libs/bootstrap"+bs_ver,
// "jqueryui": "../test/libs/jquery-ui-"+jqueryui_ver+".custom",
"jqueryui_js": "../test/libs/jquery-ui-"+jqueryui_ver+".custom/js/jquery-ui-"+jqueryui_ver+".custom",
@ -92,17 +95,27 @@ define(function () {
init: function(require) {
loadCss(require.toUrl("../css/bootstrap.css"));
//add responsive css
loadCss(require.toUrl("../css/bootstrap-responsive.css"));
if(bs_major_ver < 3) {
loadCss(require.toUrl("../css/bootstrap-responsive.css"));
}
}
},
'editable-form/editable-form-bootstrap': [
'editable-form/editable-form',
'bootstrap/js/bootstrap'
],
'editable-form/editable-form-bootstrap3': [
'editable-form/editable-form',
'bootstrap/js/bootstrap'
],
'containers/editable-popover': [
'containers/editable-inline',
'bootstrap/js/bootstrap'
],
'containers/editable-popover3': [
'containers/editable-inline',
'bootstrap/js/bootstrap'
],
'inputs/date/date': {
deps: ['require',
'bootstrap/js/bootstrap',
@ -217,12 +230,16 @@ define(function () {
if(f === 'bootstrap') {
//bootstrap
shim['editable-form/editable-form'].deps.push('inputs/date/datefield');
shim['editable-form/editable-form'].deps.push('inputs/datetime/datetimefield');
shim['editable-form/editable-form'].deps.push('inputs-ext/wysihtml5/wysihtml5');
shim['editable-form/editable-form'].deps.push('inputs/typeahead');
shim['element/editable-element'].deps.push('editable-form/editable-form-bootstrap');
shim['element/editable-element'].deps.push('containers/editable-popover');
shim['editable-form/editable-form'].deps = shim['editable-form/editable-form'].deps.concat(
[
'inputs/date/datefield',
'inputs/datetime/datetimefield',
'inputs-ext/wysihtml5/wysihtml5',
'inputs/typeahead'
]);
var suffix = bs_major_ver < 3 ? '' : bs_major_ver;
shim['element/editable-element'].deps.push('editable-form/editable-form-bootstrap'+suffix);
shim['element/editable-element'].deps.push('containers/editable-popover'+suffix);
} else if(f === 'jqueryui') {
//jqueryui
shim['editable-form/editable-form'].deps.push('inputs/dateui/dateuifield');