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

mode beta ready

Browse Source
This commit is contained in:
vitalets 2013-01-04 11:09:22 +04:00
parent d375c57e97
commit eca57a4060
10 changed files with 86 additions and 59 deletions

42
src/containers/editable-container.js

@ -9,12 +9,16 @@ Applied as jQuery method.
**/ **/
(function ($) { (function ($) {
var EditableContainer = function (element, options) { var Popup = function (element, options) {
this.init(element, options); this.init(element, options);
}; };
var Inline = function (element, options) {
this.init(element, options);
};
//methods //methods
EditableContainer.prototype = { Popup.prototype = {
containerName: null, //tbd in child class containerName: null, //tbd in child class
innerCss: null, //tbd in child class innerCss: null, //tbd in child class
init: function(element, options) { init: function(element, options) {
@ -48,7 +52,7 @@ Applied as jQuery method.
return; return;
} else { } else {
//close all open containers (except one) //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 () { return this.each(function () {
var $this = $(this), var $this = $(this),
dataKey = 'editableContainer', dataKey = 'editableContainer',
data = $this.data(dataKey), data = $this.data(dataKey),
options = typeof option === 'object' && option; options = typeof option === 'object' && option,
Constructor = (options.mode === 'inline') ? Inline : Popup;
if (!data) { if (!data) {
$this.data(dataKey, (data = new EditableContainer(this, options))); $this.data(dataKey, (data = new Constructor(this, options)));
} }
if (typeof option === 'string') { //call method if (typeof option === 'string') { //call method
@ -323,8 +328,9 @@ Applied as jQuery method.
}); });
}; };
//store constructor //store constructors
$.fn.editableContainer.Constructor = EditableContainer; $.fn.editableContainer.Popup = Popup;
$.fn.editableContainer.Inline = Inline;
//defaults //defaults
$.fn.editableContainer.defaults = { $.fn.editableContainer.defaults = {
@ -363,7 +369,25 @@ Applied as jQuery method.
@default 'cancel' @default 'cancel'
@since 1.1.1 @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'
}; };
/* /*

11
src/containers/editable-inline.js

@ -3,9 +3,10 @@
* --------------------- * ---------------------
*/ */
(function ($) { (function ($) {
//copy prototype from EditableContainer
//extend methods //extend methods
$.extend($.fn.editableContainer.Constructor.prototype, { $.extend($.fn.editableContainer.Inline.prototype, $.fn.editableContainer.Popup.prototype, {
containerName: 'editableform', containerName: 'editableform',
innerCss: null, innerCss: null,
@ -51,10 +52,4 @@
} }
}); });
//defaults
$.fn.editableContainer.defaults = $.extend({}, $.fn.editableContainer.defaults, {
anim: 'fast'
});
}(window.jQuery)); }(window.jQuery));

9
src/containers/editable-popover.js

@ -6,7 +6,7 @@
(function ($) { (function ($) {
//extend methods //extend methods
$.extend($.fn.editableContainer.Constructor.prototype, { $.extend($.fn.editableContainer.Popup.prototype, {
containerName: 'popover', containerName: 'popover',
//for compatibility with bootstrap <= 2.2.1 (content inserted into <p> instead of directly .popover-content) //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', 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)); }(window.jQuery));

2
src/containers/editable-poshytip.js

@ -6,7 +6,7 @@
(function ($) { (function ($) {
//extend methods //extend methods
$.extend($.fn.editableContainer.Constructor.prototype, { $.extend($.fn.editableContainer.Popup.prototype, {
containerName: 'poshytip', containerName: 'poshytip',
innerCss: 'div.tip-inner', innerCss: 'div.tip-inner',

10
src/containers/editable-tooltip.js

@ -6,7 +6,7 @@
(function ($) { (function ($) {
//extend methods //extend methods
$.extend($.fn.editableContainer.Constructor.prototype, { $.extend($.fn.editableContainer.Popup.prototype, {
containerName: 'tooltip', containerName: 'tooltip',
innerCss: '.ui-tooltip-content', innerCss: '.ui-tooltip-content',
@ -109,12 +109,4 @@
} }
}); });
//defaults
/*
$.fn.editableContainer.defaults = $.extend({}, $.fn.tooltip.defaults, $.fn.editableContainer.defaults, {
items: '*',
content: ' ',
});
*/
}(window.jQuery)); }(window.jQuery));

4
src/element/editable-element.js

@ -554,13 +554,13 @@ Makes editable any HTML element on the page. Applied as jQuery method.
_Parameters:_ _Parameters:_
* `value` current value to be displayed * `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: For **inputs with source** (select, checklist) parameters are different:
* `value` current value to be displayed * `value` current value to be displayed
* `sourceData` array of items for current input (e.g. dropdown items) * `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)`. To get currently selected items use `$.fn.editableutils.itemsByValue(value, sourceData)`.

4
src/inputs/list.js

@ -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 **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 @property source
@type string | array | object | function @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; $.fn.editabletypes.list = List;
}(window.jQuery)); }(window.jQuery));

38
test/loader.js

@ -20,7 +20,11 @@ define(function () {
init: function(require) { init: function(require) {
loadCss(require.toUrl("./editable-container.css")); loadCss(require.toUrl("./editable-container.css"));
} }
}, },
//inline container
'containers/editable-inline': ['containers/editable-container'],
'element/editable-element': { 'element/editable-element': {
deps: ['require'], //here should be dynamically added container deps: ['require'], //here should be dynamically added container
init: function(require) { init: function(require) {
@ -55,11 +59,12 @@ define(function () {
} }
}, },
'editable-form/editable-form-bootstrap': [ 'editable-form/editable-form-bootstrap': [
'editable-form/editable-form', 'editable-form/editable-form',
'bootstrap/js/bootstrap' 'bootstrap/js/bootstrap'
], ],
'containers/editable-popover': ['containers/editable-container', 'containers/editable-popover': [
'bootstrap/js/bootstrap' 'containers/editable-inline',
'bootstrap/js/bootstrap'
], ],
'inputs/date/date': { 'inputs/date/date': {
deps: ['require', deps: ['require',
@ -79,19 +84,20 @@ define(function () {
} }
}, },
'editable-form/editable-form-jqueryui': [ 'editable-form/editable-form-jqueryui': [
'editable-form/editable-form', 'editable-form/editable-form',
'jqueryui/js/jquery-ui-1.9.1.custom' 'jqueryui/js/jquery-ui-1.9.1.custom'
], ],
'containers/editable-tooltip': ['containers/editable-container', 'containers/editable-tooltip': [
'jqueryui/js/jquery-ui-1.9.1.custom' 'containers/editable-inline',
'jqueryui/js/jquery-ui-1.9.1.custom'
], ],
'inputs/dateui/dateui': ['inputs/abstract'], 'inputs/dateui/dateui': ['inputs/abstract'],
//plain //plain
//'inputs/dateui/dateui': ['inputs/abstract', 'inputs/date/bootstrap-datepicker/js/bootstrap-datepicker'], //'inputs/dateui/dateui': ['inputs/abstract', 'inputs/date/bootstrap-datepicker/js/bootstrap-datepicker'],
'containers/editable-poshytip': [ 'containers/editable-poshytip': [
'containers/editable-container', 'containers/editable-inline',
'poshytip/jquery.poshytip' 'poshytip/jquery.poshytip'
], ],
'poshytip/jquery.poshytip': { 'poshytip/jquery.poshytip': {
deps: ['require'], deps: ['require'],
@ -105,9 +111,7 @@ define(function () {
loadCss(require.toUrl("../css/redmond/jquery-ui-1.9.1.custom.css")); loadCss(require.toUrl("../css/redmond/jquery-ui-1.9.1.custom.css"));
} }
}, },
//inline container
'containers/editable-inline': ['containers/editable-container'],
//inputs-ext //inputs-ext
'inputs-ext/address/address': { 'inputs-ext/address/address': {
@ -126,17 +130,17 @@ define(function () {
//bootstrap //bootstrap
shim['editable-form/editable-form'].deps.push('inputs/date/date'); 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('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') { } else if(f === 'jqueryui') {
//jqueryui //jqueryui
shim['editable-form/editable-form'].deps.push('inputs/dateui/dateui'); 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('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 { } else {
//plain //plain
shim['editable-form/editable-form'].deps.push('inputs/dateui/dateui'); 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['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');
} }

3
test/main.js

@ -19,7 +19,8 @@ require(["loader", jqurl], function(loader) {
function() { function() {
//disable effects //disable effects
$.fx.off = true; $.fx.off = true;
$.support.transition = false; $.support.transition = false;
$.fn.editable.defaults.mode = params.c === 'inline' ? 'inline' : 'popup';
QUnit.load(); QUnit.load();
QUnit.start(); QUnit.start();

22
test/unit/common.js

@ -64,7 +64,7 @@
test("container's title and placement from json options", function () { test("container's title and placement from json options", function () {
//do not test inline //do not test inline
if($.fn.editableContainer.Constructor.prototype.containerName === 'editableform') { if($.fn.editable.defaults.mode === 'inline') {
expect(0); expect(0);
return; return;
} }
@ -81,7 +81,7 @@
ok(p.is(':visible'), 'popover shown'); ok(p.is(':visible'), 'popover shown');
//todo: for jqueryui phantomjs calcs wrong position. Need investigation //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'); 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)); }(jQuery));