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 //test task
grunt.registerTask('test', 'server qunit:bootstrap'); grunt.registerTask('test', 'lint server qunit:bootstrap');
grunt.registerTask('testall', 'server qunit'); grunt.registerTask('testall', 'lint server qunit');
// Default task. // Default task.
// grunt.registerTask('default', 'lint qunit'); // 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 innerCss: null, //tbd in child class
init: function(element, options) { init: function(element, options) {
this.$element = $(element); 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 = $.extend({}, $.fn.editableContainer.defaults, $.fn.editableform.utils.getConfigData(this.$element), options);
this.options.trigger = 'manual'; this.splitOptions();
this.initContainer(); this.initContainer();
//bind 'destroyed' listener to destroy container when element is removed from dom //bind 'destroyed' listener to destroy container when element is removed from dom
@ -29,13 +30,27 @@ Applied as jQuery method.
}, this)); }, 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(){ initContainer: function(){
this.call(this.options); this.call(this.containerOptions);
}, },
initForm: function() { initForm: function() {
this.$form = $('<div>') this.$form = $('<div>')
.editableform(this.options) .editableform(this.formOptions)
.on({ .on({
save: $.proxy(this.save, this), save: $.proxy(this.save, this),
cancel: $.proxy(this.cancel, this), cancel: $.proxy(this.cancel, this),
@ -136,8 +151,19 @@ Applied as jQuery method.
@param {mixed} value @param {mixed} value
**/ **/
option: function(key, value) { option: function(key, value) {
this.options[key] = value; if(key in this.containerOptions) {
this.call('option', key, value); 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() { tip: function() {
return this.$form; return this.$form;
}, },

22
src/containers/editable-popover.js

@ -15,8 +15,16 @@
containerName: 'popover', containerName: 'popover',
innerCss: '.popover-content p', innerCss: '.popover-content p',
option: function(key, value) { initContainer: function(){
this.options[key] = value; $.extend(this.containerOptions, {
trigger: 'manual',
selector: 'false',
content: ' '
});
this.call(this.containerOptions);
},
setContainerOption: function(key, value) {
this.container().options[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}; tp = {top:pos.top + pos.height, left:pos.left + pos.width / 2 - actualWidth / 2};
break; break;
case 'top': 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}; tp = {top:pos.top - actualHeight, left:pos.left + pos.width / 2 - actualWidth / 2};
break; break;
case 'left': 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}; tp = {top:pos.top + pos.height / 2 - actualHeight / 2, left:pos.left - actualWidth};
break; break;
case 'right': case 'right':
@ -60,8 +64,10 @@
}); });
//defaults //defaults
/*
$.fn.editableContainer.defaults = $.extend({}, $.fn.popover.defaults, $.fn.editableContainer.defaults, { $.fn.editableContainer.defaults = $.extend({}, $.fn.popover.defaults, $.fn.editableContainer.defaults, {
content: ' '
}); });
*/
}(window.jQuery)); }(window.jQuery));

30
src/containers/editable-poshytip.js

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

53
src/containers/editable-tooltip.js

@ -15,17 +15,39 @@
containerName: 'tooltip', containerName: 'tooltip',
innerCss: '.ui-tooltip-content', 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(){ initContainer: function(){
this.handlePlacement(); this.handlePlacement();
this.options.open = $.proxy(function() { $.extend(this.containerOptions, {
//disable events hiding tooltip by default items: '*',
this.container()._on(this.container().element, { content: ' ',
mouseleave: function(e){ e.stopImmediatePropagation(); }, track: false,
focusout: function(e){ e.stopImmediatePropagation(); } open: $.proxy(function() {
}); //disable events hiding tooltip by default
}, this); this.container()._on(this.container().element, {
this.call(this.options); mouseleave: function(e){ e.stopImmediatePropagation(); },
//disable standart event to show tooltip focusout: function(e){ e.stopImmediatePropagation(); }
});
}, this)
});
this.call(this.containerOptions);
//disable standart triggering tooltip event
this.container()._off(this.container().element, 'mouseover focusin'); this.container()._off(this.container().element, 'mouseover focusin');
}, },
@ -52,7 +74,7 @@
setPosition: function() { setPosition: function() {
this.tip().position( $.extend({ this.tip().position( $.extend({
of: this.$element of: this.$element
}, this.options.position ) ); }, this.containerOptions.position ) );
}, },
handlePlacement: function() { handlePlacement: function() {
@ -84,19 +106,20 @@
break; break;
} }
this.options.position = $.extend({}, this.options.position, pos); this.containerOptions.position = pos;
}, },
destroy: function() { destroy: function() {
//jqueryui tooltip destroy itself //jqueryui tooltip destroys itself
} }
}); });
//defaults //defaults
/*
$.fn.editableContainer.defaults = $.extend({}, $.fn.tooltip.defaults, $.fn.editableContainer.defaults, { $.fn.editableContainer.defaults = $.extend({}, $.fn.tooltip.defaults, $.fn.editableContainer.defaults, {
items: '*', items: '*',
content: ' ', content: ' ',
position: {}
}); });
*/
}(window.jQuery)); }(window.jQuery));

2
test/unit/common.js

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