mode beta ready
This commit is contained in:
vitalets
parent
d375c57e97
commit
eca57a4060
@ -9,12 +9,16 @@ Applied as jQuery method.
|
||||
**/
|
||||
(function ($) {
|
||||
|
||||
var EditableContainer = function (element, options) {
|
||||
var Popup = function (element, options) {
|
||||
this.init(element, options);
|
||||
};
|
||||
|
||||
var Inline = function (element, options) {
|
||||
this.init(element, options);
|
||||
};
|
||||
|
||||
//methods
|
||||
EditableContainer.prototype = {
|
||||
Popup.prototype = {
|
||||
containerName: null, //tbd in child class
|
||||
innerCss: null, //tbd in child class
|
||||
init: function(element, options) {
|
||||
@ -48,7 +52,7 @@ Applied as jQuery method.
|
||||
return;
|
||||
} else {
|
||||
//close all open containers (except one)
|
||||
EditableContainer.prototype.closeOthers(e.target);
|
||||
Popup.prototype.closeOthers(e.target);
|
||||
}
|
||||
});
|
||||
|
||||
@ -310,11 +314,12 @@ Applied as jQuery method.
|
||||
return this.each(function () {
|
||||
var $this = $(this),
|
||||
dataKey = 'editableContainer',
|
||||
data = $this.data(dataKey),
|
||||
options = typeof option === 'object' && option;
|
||||
data = $this.data(dataKey),
|
||||
options = typeof option === 'object' && option,
|
||||
Constructor = (options.mode === 'inline') ? Inline : Popup;
|
||||
|
||||
if (!data) {
|
||||
$this.data(dataKey, (data = new EditableContainer(this, options)));
|
||||
$this.data(dataKey, (data = new Constructor(this, options)));
|
||||
}
|
||||
|
||||
if (typeof option === 'string') { //call method
|
||||
@ -323,8 +328,9 @@ Applied as jQuery method.
|
||||
});
|
||||
};
|
||||
|
||||
//store constructor
|
||||
$.fn.editableContainer.Constructor = EditableContainer;
|
||||
//store constructors
|
||||
$.fn.editableContainer.Popup = Popup;
|
||||
$.fn.editableContainer.Inline = Inline;
|
||||
|
||||
//defaults
|
||||
$.fn.editableContainer.defaults = {
|
||||
@ -363,7 +369,25 @@ Applied as jQuery method.
|
||||
@default 'cancel'
|
||||
@since 1.1.1
|
||||
**/
|
||||
onblur: 'cancel'
|
||||
onblur: 'cancel',
|
||||
|
||||
/**
|
||||
Animation speed (inline mode)
|
||||
@property anim
|
||||
@type string
|
||||
@default 'fast'
|
||||
**/
|
||||
anim: 'fast',
|
||||
|
||||
/**
|
||||
Mode of editable, can be `popup` or `inline`
|
||||
|
||||
@property mode
|
||||
@type string
|
||||
@default 'popup'
|
||||
@since 1.4.0
|
||||
**/
|
||||
mode: 'popup'
|
||||
};
|
||||
|
||||
/*
|
||||
|
||||
@ -3,9 +3,10 @@
|
||||
* ---------------------
|
||||
*/
|
||||
(function ($) {
|
||||
|
||||
|
||||
//copy prototype from EditableContainer
|
||||
//extend methods
|
||||
$.extend($.fn.editableContainer.Constructor.prototype, {
|
||||
$.extend($.fn.editableContainer.Inline.prototype, $.fn.editableContainer.Popup.prototype, {
|
||||
containerName: 'editableform',
|
||||
innerCss: null,
|
||||
|
||||
@ -51,10 +52,4 @@
|
||||
}
|
||||
});
|
||||
|
||||
//defaults
|
||||
$.fn.editableContainer.defaults = $.extend({}, $.fn.editableContainer.defaults, {
|
||||
anim: 'fast'
|
||||
});
|
||||
|
||||
|
||||
}(window.jQuery));
|
||||
@ -6,7 +6,7 @@
|
||||
(function ($) {
|
||||
|
||||
//extend methods
|
||||
$.extend($.fn.editableContainer.Constructor.prototype, {
|
||||
$.extend($.fn.editableContainer.Popup.prototype, {
|
||||
containerName: 'popover',
|
||||
//for compatibility with bootstrap <= 2.2.1 (content inserted into <p> instead of directly .popover-content)
|
||||
innerCss: $($.fn.popover.defaults.template).find('p').length ? '.popover-content p' : '.popover-content',
|
||||
@ -82,11 +82,4 @@
|
||||
}
|
||||
});
|
||||
|
||||
//defaults
|
||||
/*
|
||||
$.fn.editableContainer.defaults = $.extend({}, $.fn.popover.defaults, $.fn.editableContainer.defaults, {
|
||||
|
||||
});
|
||||
*/
|
||||
|
||||
}(window.jQuery));
|
||||
@ -6,7 +6,7 @@
|
||||
(function ($) {
|
||||
|
||||
//extend methods
|
||||
$.extend($.fn.editableContainer.Constructor.prototype, {
|
||||
$.extend($.fn.editableContainer.Popup.prototype, {
|
||||
containerName: 'poshytip',
|
||||
innerCss: 'div.tip-inner',
|
||||
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
(function ($) {
|
||||
|
||||
//extend methods
|
||||
$.extend($.fn.editableContainer.Constructor.prototype, {
|
||||
$.extend($.fn.editableContainer.Popup.prototype, {
|
||||
containerName: 'tooltip',
|
||||
innerCss: '.ui-tooltip-content',
|
||||
|
||||
@ -109,12 +109,4 @@
|
||||
}
|
||||
});
|
||||
|
||||
//defaults
|
||||
/*
|
||||
$.fn.editableContainer.defaults = $.extend({}, $.fn.tooltip.defaults, $.fn.editableContainer.defaults, {
|
||||
items: '*',
|
||||
content: ' ',
|
||||
});
|
||||
*/
|
||||
|
||||
}(window.jQuery));
|
||||
@ -554,13 +554,13 @@ Makes editable any HTML element on the page. Applied as jQuery method.
|
||||
_Parameters:_
|
||||
|
||||
* `value` current value to be displayed
|
||||
* `response` server response (if display called after ajax submit), since 1.3.1
|
||||
* `response` server response (if display called after ajax submit), since 1.4.0
|
||||
|
||||
For **inputs with source** (select, checklist) parameters are different:
|
||||
|
||||
* `value` current value to be displayed
|
||||
* `sourceData` array of items for current input (e.g. dropdown items)
|
||||
* `response` server response (if display called after ajax submit), since 1.3.1
|
||||
* `response` server response (if display called after ajax submit), since 1.4.0
|
||||
|
||||
To get currently selected items use `$.fn.editableutils.itemsByValue(value, sourceData)`.
|
||||
|
||||
|
||||
@ -248,7 +248,7 @@ List - abstract class for inputs that have source option loaded from js array or
|
||||
|
||||
If **string** - considered ajax url to load items. In that case results will be cached for fields with the same source and name. See also `sourceCache` option.
|
||||
|
||||
If **function**, it should return data in format above (since 1.3.1).
|
||||
If **function**, it should return data in format above (since 1.4.0).
|
||||
|
||||
@property source
|
||||
@type string | array | object | function
|
||||
@ -285,4 +285,4 @@ List - abstract class for inputs that have source option loaded from js array or
|
||||
|
||||
$.fn.editabletypes.list = List;
|
||||
|
||||
}(window.jQuery));
|
||||
}(window.jQuery));
|
||||
|
||||
@ -20,7 +20,11 @@ define(function () {
|
||||
init: function(require) {
|
||||
loadCss(require.toUrl("./editable-container.css"));
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
//inline container
|
||||
'containers/editable-inline': ['containers/editable-container'],
|
||||
|
||||
'element/editable-element': {
|
||||
deps: ['require'], //here should be dynamically added container
|
||||
init: function(require) {
|
||||
@ -55,11 +59,12 @@ define(function () {
|
||||
}
|
||||
},
|
||||
'editable-form/editable-form-bootstrap': [
|
||||
'editable-form/editable-form',
|
||||
'bootstrap/js/bootstrap'
|
||||
'editable-form/editable-form',
|
||||
'bootstrap/js/bootstrap'
|
||||
],
|
||||
'containers/editable-popover': ['containers/editable-container',
|
||||
'bootstrap/js/bootstrap'
|
||||
'containers/editable-popover': [
|
||||
'containers/editable-inline',
|
||||
'bootstrap/js/bootstrap'
|
||||
],
|
||||
'inputs/date/date': {
|
||||
deps: ['require',
|
||||
@ -79,19 +84,20 @@ define(function () {
|
||||
}
|
||||
},
|
||||
'editable-form/editable-form-jqueryui': [
|
||||
'editable-form/editable-form',
|
||||
'jqueryui/js/jquery-ui-1.9.1.custom'
|
||||
'editable-form/editable-form',
|
||||
'jqueryui/js/jquery-ui-1.9.1.custom'
|
||||
],
|
||||
'containers/editable-tooltip': ['containers/editable-container',
|
||||
'jqueryui/js/jquery-ui-1.9.1.custom'
|
||||
'containers/editable-tooltip': [
|
||||
'containers/editable-inline',
|
||||
'jqueryui/js/jquery-ui-1.9.1.custom'
|
||||
],
|
||||
'inputs/dateui/dateui': ['inputs/abstract'],
|
||||
|
||||
//plain
|
||||
//'inputs/dateui/dateui': ['inputs/abstract', 'inputs/date/bootstrap-datepicker/js/bootstrap-datepicker'],
|
||||
'containers/editable-poshytip': [
|
||||
'containers/editable-container',
|
||||
'poshytip/jquery.poshytip'
|
||||
'containers/editable-inline',
|
||||
'poshytip/jquery.poshytip'
|
||||
],
|
||||
'poshytip/jquery.poshytip': {
|
||||
deps: ['require'],
|
||||
@ -105,9 +111,7 @@ define(function () {
|
||||
loadCss(require.toUrl("../css/redmond/jquery-ui-1.9.1.custom.css"));
|
||||
}
|
||||
},
|
||||
|
||||
//inline container
|
||||
'containers/editable-inline': ['containers/editable-container'],
|
||||
|
||||
|
||||
//inputs-ext
|
||||
'inputs-ext/address/address': {
|
||||
@ -126,17 +130,17 @@ define(function () {
|
||||
//bootstrap
|
||||
shim['editable-form/editable-form'].deps.push('inputs/date/date');
|
||||
shim['element/editable-element'].deps.push('editable-form/editable-form-bootstrap');
|
||||
shim['element/editable-element'].deps.push(c === 'popup' ? 'containers/editable-popover' : 'containers/editable-inline');
|
||||
shim['element/editable-element'].deps.push('containers/editable-popover');
|
||||
} else if(f === 'jqueryui') {
|
||||
//jqueryui
|
||||
shim['editable-form/editable-form'].deps.push('inputs/dateui/dateui');
|
||||
shim['element/editable-element'].deps.push('editable-form/editable-form-jqueryui');
|
||||
shim['element/editable-element'].deps.push(c === 'popup' ? 'containers/editable-tooltip' : 'containers/editable-inline');
|
||||
shim['element/editable-element'].deps.push('containers/editable-tooltip');
|
||||
} else {
|
||||
//plain
|
||||
shim['editable-form/editable-form'].deps.push('inputs/dateui/dateui');
|
||||
shim['inputs/dateui/dateui'].push('inputs/dateui/jquery-ui-datepicker/js/jquery-ui-1.9.1.custom');
|
||||
shim['element/editable-element'].deps.push(c === 'popup' ? 'containers/editable-poshytip' : 'containers/editable-inline');
|
||||
shim['element/editable-element'].deps.push('containers/editable-poshytip');
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -19,7 +19,8 @@ require(["loader", jqurl], function(loader) {
|
||||
function() {
|
||||
//disable effects
|
||||
$.fx.off = true;
|
||||
$.support.transition = false;
|
||||
$.support.transition = false;
|
||||
$.fn.editable.defaults.mode = params.c === 'inline' ? 'inline' : 'popup';
|
||||
|
||||
QUnit.load();
|
||||
QUnit.start();
|
||||
|
||||
@ -64,7 +64,7 @@
|
||||
|
||||
test("container's title and placement from json options", function () {
|
||||
//do not test inline
|
||||
if($.fn.editableContainer.Constructor.prototype.containerName === 'editableform') {
|
||||
if($.fn.editable.defaults.mode === 'inline') {
|
||||
expect(0);
|
||||
return;
|
||||
}
|
||||
@ -81,7 +81,7 @@
|
||||
ok(p.is(':visible'), 'popover shown');
|
||||
|
||||
//todo: for jqueryui phantomjs calcs wrong position. Need investigation
|
||||
if(!$.browser.webkit && $.fn.editableContainer.Constructor.prototype.containerName !== 'tooltip') {
|
||||
if(!$.browser.webkit && e.data('editableContainer').containerName !== 'tooltip') {
|
||||
ok(p.offset().top > e.offset().top, 'placement ok');
|
||||
}
|
||||
|
||||
@ -520,5 +520,23 @@
|
||||
|
||||
});
|
||||
|
||||
test("mode: popup / inline", function () {
|
||||
var e = $('<a href="#" id="a"></a>').appendTo('#qunit-fixture').editable({
|
||||
mode: 'popup'
|
||||
}),
|
||||
e1 = $('<a href="#" id="a1"></a>').appendTo('#qunit-fixture').editable({
|
||||
mode: 'inline'
|
||||
});
|
||||
|
||||
e.click();
|
||||
var p = tip(e);
|
||||
ok(p.is(':visible'), 'popup visible');
|
||||
ok(!p.hasClass('editable-inline'), 'no inline class');
|
||||
|
||||
e1.click();
|
||||
p = tip(e1);
|
||||
ok(p.is(':visible'), 'inline visible visible');
|
||||
ok(p.hasClass('editable-inline'), 'has inline class');
|
||||
});
|
||||
|
||||
}(jQuery));
|
||||
Loading…
x
Reference in New Issue
Block a user