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

split container options

Browse Source
This commit is contained in:
vitalets 2012-11-16 18:06:04 +04:00
parent 01b242d9da
commit 8b3755a19d
7 changed files with 109 additions and 43 deletions

4
grunt.js

@ -244,8 +244,8 @@ module.exports = function(grunt) {
});
//test task
grunt.registerTask('test', 'server qunit:bootstrap');
grunt.registerTask('testall', 'server qunit');
grunt.registerTask('test', 'lint server qunit:bootstrap');
grunt.registerTask('testall', 'lint server qunit');
// Default task.
// grunt.registerTask('default', 'lint qunit');

36
src/containers/editable-container.js

@ -19,8 +19,9 @@ Applied as jQuery method.
innerCss: null, //tbd in child class
init: function(element, options) {
this.$element = $(element);
//todo: what is in priority: data or js?
this.options = $.extend({}, $.fn.editableContainer.defaults, $.fn.editableform.utils.getConfigData(this.$element), options);
this.options.trigger = 'manual';
this.splitOptions();
this.initContainer();
//bind 'destroyed' listener to destroy container when element is removed from dom
@ -29,13 +30,27 @@ Applied as jQuery method.
}, this));
},
//split options on containerOptions and formOptions
splitOptions: function() {
this.containerOptions = {};
this.formOptions = {};
var cDef = $.fn[this.containerName].defaults;
for(var k in this.options) {
if(k in cDef) {
this.containerOptions[k] = this.options[k];
} else {
this.formOptions[k] = this.options[k];
}
}
},
initContainer: function(){
this.call(this.options);
this.call(this.containerOptions);
},
initForm: function() {
this.$form = $('<div>')
.editableform(this.options)
.editableform(this.formOptions)
.on({
save: $.proxy(this.save, this),
cancel: $.proxy(this.cancel, this),
@ -136,8 +151,19 @@ Applied as jQuery method.
@param {mixed} value
**/
option: function(key, value) {
this.options[key] = value;
this.call('option', key, value);
if(key in this.containerOptions) {
this.containerOptions[key] = value;
this.setContainerOption(key, value);
} else {
this.formOptions[key] = value;
if(this.$form) {
this.$form.editableform('option', key, value);
}
}
},
setContainerOption: function(key, value) {
this.call('option', key, value);
},
/**

5
src/containers/editable-inline.js

@ -17,6 +17,11 @@
}
},
splitOptions: function() {
this.containerOptions = {};
this.formOptions = this.options;
},
tip: function() {
return this.$form;
},

22
src/containers/editable-popover.js

@ -15,8 +15,16 @@
containerName: 'popover',
innerCss: '.popover-content p',
option: function(key, value) {
this.options[key] = value;
initContainer: function(){
$.extend(this.containerOptions, {
trigger: 'manual',
selector: 'false',
content: ' '
});
this.call(this.containerOptions);
},
setContainerOption: function(key, value) {
this.container().options[key] = value;
},
@ -41,13 +49,9 @@
tp = {top:pos.top + pos.height, left:pos.left + pos.width / 2 - actualWidth / 2};
break;
case 'top':
/* For Bootstrap 2.1.0 - 2.1.1: 10 pixels needed to correct popover position. See https://github.com/twitter/bootstrap/issues/4665 */
//if($tip.find('.arrow').get(0).offsetHeight === 10) {actualHeight += 10;}
tp = {top:pos.top - actualHeight, left:pos.left + pos.width / 2 - actualWidth / 2};
break;
case 'left':
/* For Bootstrap 2.1.0 - 2.1.1: 10 pixels needed to correct popover position. See https://github.com/twitter/bootstrap/issues/4665 */
//if($tip.find('.arrow').get(0).offsetWidth === 10) {actualWidth += 10;}
tp = {top:pos.top + pos.height / 2 - actualHeight / 2, left:pos.left - actualWidth};
break;
case 'right':
@ -60,8 +64,10 @@
});
//defaults
/*
$.fn.editableContainer.defaults = $.extend({}, $.fn.popover.defaults, $.fn.editableContainer.defaults, {
content: ' '
});
});
*/
}(window.jQuery));

30
src/containers/editable-poshytip.js

@ -12,10 +12,17 @@
initContainer: function(){
this.handlePlacement();
this.call(this.options);
$.extend(this.containerOptions, {
showOn: 'none',
content: '',
alignTo: 'target'
});
this.call(this.containerOptions);
var $content = $('<div>')
.append($('<label>').text(this.options.title || this.$element.data( "ui-tooltip-title") || this.$element.data( "originalTitle")))
.append($('<label>').text(this.options.title || this.$element.data( "title") || this.$element.data( "originalTitle")))
.append(this.initForm());
this.call('update', $content);
@ -25,7 +32,6 @@
this.$form.editableform('render');
this.tip().addClass('editable-container');
this.call('show');
this.$form.data('editableform').input.activate();
},
@ -59,20 +65,18 @@
break;
}
this.options.alignX = x;
this.options.offsetX = ox;
this.options.alignY = y;
this.options.offsetY = oy;
$.extend(this.containerOptions, {
alignX: x,
offsetX: ox,
alignY: y,
offsetY:oy
});
}
});
//defaults
$.fn.editableContainer.defaults = $.extend({}, $.fn.poshytip.defaults, $.fn.editableContainer.defaults, {
className: 'tip-yellowsimple',
showOn: 'none',
content: '',
alignTo: 'target'
$.fn.editableContainer.defaults = $.extend({}, $.fn.editableContainer.defaults, {
className: 'tip-yellowsimple'
});

53
src/containers/editable-tooltip.js

@ -15,17 +15,39 @@
containerName: 'tooltip',
innerCss: '.ui-tooltip-content',
//split options on containerOptions and formOptions
splitOptions: function() {
this.containerOptions = {};
this.formOptions = {};
//defaults for tooltip
var cDef = $.ui[this.containerName].prototype.options;
for(var k in this.options) {
if(k in cDef) {
this.containerOptions[k] = this.options[k];
} else {
this.formOptions[k] = this.options[k];
}
}
},
initContainer: function(){
this.handlePlacement();
this.options.open = $.proxy(function() {
//disable events hiding tooltip by default
this.container()._on(this.container().element, {
mouseleave: function(e){ e.stopImmediatePropagation(); },
focusout: function(e){ e.stopImmediatePropagation(); }
});
}, this);
this.call(this.options);
//disable standart event to show tooltip
$.extend(this.containerOptions, {
items: '*',
content: ' ',
track: false,
open: $.proxy(function() {
//disable events hiding tooltip by default
this.container()._on(this.container().element, {
mouseleave: function(e){ e.stopImmediatePropagation(); },
focusout: function(e){ e.stopImmediatePropagation(); }
});
}, this)
});
this.call(this.containerOptions);
//disable standart triggering tooltip event
this.container()._off(this.container().element, 'mouseover focusin');
},
@ -52,7 +74,7 @@
setPosition: function() {
this.tip().position( $.extend({
of: this.$element
}, this.options.position ) );
}, this.containerOptions.position ) );
},
handlePlacement: function() {
@ -84,19 +106,20 @@
break;
}
this.options.position = $.extend({}, this.options.position, pos);
this.containerOptions.position = pos;
},
destroy: function() {
//jqueryui tooltip destroy itself
}
destroy: function() {
//jqueryui tooltip destroys itself
}
});
//defaults
/*
$.fn.editableContainer.defaults = $.extend({}, $.fn.tooltip.defaults, $.fn.editableContainer.defaults, {
items: '*',
content: ' ',
position: {}
});
*/
}(window.jQuery));

2
test/unit/common.js

@ -83,6 +83,8 @@
if(!$.browser.webkit && fc.f !== 'jqueryui') {
ok(p.offset().top > e.offset().top, 'placement ok');
}
//check title
ok(p.find(':contains("'+title+'")').length, 'title ok');
e.remove();
});