move dateui to folder, add jquery-ui-datepicker

This commit is contained in:
vitalets 2012-11-14 22:44:18 +04:00
parent 8a64d3fb28
commit 00a451278a
44 changed files with 3691 additions and 9517 deletions

File diff suppressed because it is too large Load Diff

@ -1,8 +1,11 @@
/**
Container for editableform. It can be popup (bootstrap-popover, jqueryui-tooltip, poshytip..) or inline.
Applied as jQuery method to any element. Element is used only for positioning!
Attaches stand-alone container with editable-form to HTML element. Element is used only for positioning, value is not stored anywhere.<br>
This method applied internally in <code>$().editable()</code>. You should subscribe on it's events (save / cancel) to get profit of it.<br>
Final realization can be different: bootstrap-popover, jqueryui-tooltip, poshytip, inline-div. It depends on which js file you include.<br>
Applied as jQuery method.
@class editableContainer
@uses editableform
**/
(function ($) {
@ -168,10 +171,11 @@ Applied as jQuery method to any element. Element is used only for positioning!
@property value
@type mixed
@default null
@private
**/
value: null,
/**
Placement of container relative to element. Can be top|right|bottom|left. Not used for inline container.
Placement of container relative to element. Can be <code>top|right|bottom|left</code>. Not used for inline container.
@property placement
@type string
@ -184,6 +188,7 @@ Applied as jQuery method to any element. Element is used only for positioning!
@property autohide
@type boolean
@default true
@private
**/
autohide: true
};

@ -1,10 +1,6 @@
/**
/*
Editableform based on Twitter Bootstrap
@class editableform (bootstrap)
@module editableform
@uses editableform
**/
*/
(function ($) {
//form template

@ -1,10 +1,6 @@
/**
/*
Editableform based on jQuery UI
@class editableform (jqueryui)
@module editableform
@uses editableform
**/
*/
(function ($) {
$.extend($.fn.editableform.Constructor.prototype, {

@ -1,5 +1,5 @@
/**
* EditableForm utils
* EditableForm utilites
*/
(function ($) {
$.extend($.fn.editableform, {

@ -4,6 +4,8 @@ Applied as jQuery method to DIV tag (not to form tag!)
Editableform is linked with one of input types, e.g. 'text' or 'select'.
@class editableform
@uses text
@uses textarea
**/
(function ($) {
@ -39,7 +41,7 @@ Editableform is linked with one of input types, e.g. 'text' or 'select'.
@method render
**/
render: function() {
this.$loading = $(this.options.loading);
this.$loading = $($.fn.editableform.loading);
this.$container.empty().append(this.$loading);
this.showLoading();
@ -258,7 +260,7 @@ Editableform is linked with one of input types, e.g. 'text' or 'select'.
/* see also defaults for input */
/**
Type of input. Can be text|textarea|select|date
Type of input. Can be <code>text|textarea|select|date</code>
@property type
@type String
@ -316,14 +318,6 @@ Editableform is linked with one of input types, e.g. 'text' or 'select'.
**/
send: 'auto',
/**
Template for loading element
@property loading
@type String
@default <div class="editableform-loading"></div>
**/
loading: '<div class="editableform-loading"></div>',
/**
Function for client-side validation. If returns string - means validation not passed and string showed as error.
@property validate
@ -348,14 +342,18 @@ Editableform is linked with one of input types, e.g. 'text' or 'select'.
'<div class="editable-error-block"></div>' +
'</form>';
//loading div
$.fn.editableform.loading = '<div class="editableform-loading"></div>';
//error class attahced to control-group
$.fn.editableform.errorGroupClass = null;
$.fn.editableform.errorGroupClass = null;
//error class attahced to editable-error-block
$.fn.editableform.errorBlockClass = 'editable-error';
//input types
$.fn.editableform.types = {};
$.fn.editableform.utils = {};
// $.fn.editableform.types = {};
//$.fn.editableform.utils = {};
}(window.jQuery));

@ -1,8 +1,8 @@
/**
Makes editable any HTML element on page.
Applied as jquery method.
Makes editable any HTML element on the page. Applied as jQuery method.
@class editable
@uses editableContainer
**/
(function ($) {
@ -449,7 +449,7 @@ Applied as jquery method.
$.fn.editable.defaults = {
/**
Type of input. Can be text|textarea|select|date
Type of input. Can be <code>text|textarea|select|date</code>
@property type
@type String
@ -482,7 +482,7 @@ Applied as jquery method.
emptytext: 'Empty',
/**
Allows to automatically set element's text based on it's value. Usefull for select and date.
For example, if element's list is <code>{1: 'a', 2: 'b'}</code> value set to <code>1</code>, it's text will be automatically set to <code>a</code>.
For example, if dropdown list is <code>{1: 'a', 2: 'b'}</code> and elements value set to <code>1</code>, it's html will be automatically set to <code>a</code>.
Can be auto|always|never. <code>auto</code> means text will be set only if element is empty.
<code>always|never</code> means always(never) try to set element's text.
@ -501,6 +501,14 @@ Applied as jquery method.
**/
enablefocus: false,
/**
Initial value of input
@property value
@type mixed
@default element's text
**/
value: null,
/**
Success callback. Called when value successfully sent on server and response status = 200.
Can be used to process json response. If this function returns string - means error occured and string is shown as error message.

@ -1,16 +1,19 @@
/**
* editable abstract type definition
* Every new type must implement this interface
* It does not store value or text. It just store settings and input
*/
Abstract editable input class.
To create your own input you should inherit from this class.
@class abstract
**/
(function ($) {
var Abstract = function () { };
Abstract.prototype = {
/**
* initialize settings
*/
Iinitializes input
@method init()
**/
init: function(type, options, defaults) {
this.type = type;
this.options = $.extend({}, defaults, options);
@ -19,9 +22,10 @@
},
/**
* creates DOM element which is ready to be shown
* Can return jQuery deferred object
*/
Renders input. Can return jQuery deferred object.
@method render()
**/
render: function() {
this.$input = $(this.options.tpl);
if(this.options.inputclass) {
@ -34,51 +38,74 @@
},
/**
* set element's html by value
*/
Sets element's html by value.
@method value2html(value, element)
@param {mixed} value
@param {DOMElement} element
**/
value2html: function(value, element) {
var html = $('<div>').text(value).html();
$(element).html(html);
},
/**
* returns value from element's html
*/
Converts element's html to value
@method html2value(html)
@param {string} html
@returns {mixed}
**/
html2value: function(html) {
return $('<div>').html(html).text();
},
/**
* convert value to string for submiting on server
*/
Converts value to string (for submiting to server)
@method value2str(value)
@param {mixed} value
@returns {string}
**/
value2str: function(value) {
return value;
},
/**
* convert string received from server (data-value or options.value) into value object
*/
Converts string received from server into value.
@method str2value(str)
@param {string} str
@returns {mixed}
**/
str2value: function(str) {
return str;
},
/**
* set value to input
*/
Sets value of input.
@method value2input(value)
@param {mixed} value
**/
value2input: function(value) {
this.$input.val(value);
},
/**
* returns value (object) by input
*/
Returns value of input. Value can be object (e.g. datepicker)
@method input2value()
**/
input2value: function() {
return this.$input.val();
},
/**
* method called to focus input again
*/
Activates input. For text it sets focus.
@method activate()
**/
activate: function() {
if(this.$input.is(':visible')) {
this.$input.focus();
@ -86,11 +113,31 @@
}
};
Abstract.defaults = {
Abstract.defaults = {
/**
HTML template of input
@property tpl
@type string
@default ''
**/
tpl: '',
/**
CSS class automatically applied to input
@property inputclass
@type string
@default 'span2'
**/
inputclass: 'span2',
name: null,
placeholder: false
/**
Name attribute of input
@property name
@type string
@default null
**/
name: null
};
$.extend($.fn.editableform.types, {abstract: Abstract});

@ -1,7 +1,10 @@
/**
* jQuery UI Datepicker
* Note: you can not use both date and dateui on the one page!
*/
jQuery UI Datepicker
Note: you can not use both date and dateui on the same page.
@class dateui
@extends abstract
**/
(function ($) {
var DateUI = function (options) {
@ -86,14 +89,48 @@
});
DateUI.defaults = $.extend({}, $.fn.editableform.types.abstract.defaults, {
/**
@property tpl
@default <div style="float: left"></div>
**/
tpl:'<div style="float: left"></div>',
/**
@property inputclass
@default ''
**/
inputclass: '',
format:'yyyy-mm-dd', //format used for sending to server and converting from value
viewformat: null, //used for display date in element
/**
Format used for sending value to server. Also applied when converting date from <code>data-value</code> attribute.<br>
Full <a href="http://docs.jquery.com/UI/Datepicker/formatDate">list of tokens</a>.
//special options
firstDay: 0,
datepicker:{
@property format
@type string
@default yyyy-mm-dd
**/
format:'yyyy-mm-dd',
/**
Format used for displaying date. If not specified equals to <code>format</code>
@property viewformat
@type string
@default null
**/
viewformat: null,
/**
Configuration of datepicker.
Full list of <a href="http://api.jqueryui.com/datepicker">possible options</a>.
@property datepicker
@type object
@default {
firstDay: 0,
changeYear: true,
changeMonth: true
}
**/
datepicker: {
firstDay: 0,
changeYear: true,
changeMonth: true
}

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

@ -1,6 +1,9 @@
/**
* select
*/
Select input
@class select
@extends abstract
**/
(function ($) {
var Select = function (options) {
@ -213,9 +216,38 @@
});
Select.defaults = $.extend({}, $.fn.editableform.types.abstract.defaults, {
/**
@property tpl
@default <select></select>
**/
tpl:'<select></select>',
source:null, //can be string (url), object or array [{value: 1, text: 'abc'}, {...}]
/**
Source data for dropdown list. If string - considered ajax url to load items. Otherwise should be an array.
Array format is: <code>[{value: 1, text: "text"}, {...}]</code><br>
For compability it also supports format <code>{value1: text1, value2: text2 ...}</code> but it does not guarantee elements order.
@property source
@type string|array|object
@default null
@example
source: 'groups.php'
**/
source:null,
/**
Data automatically prepended to the begining of dropdown list.
@property prepend
@type string|array|object
@default false
**/
prepend:false,
/**
Error message shown when list cannot be loaded (e.g. ajax error)
@property sourceError
@type string
@default Error when loading options
**/
sourceError: 'Error when loading options'
});

@ -1,6 +1,9 @@
/**
* text
*/
Text input
@class text
@extends abstract
**/
(function ($) {
var Text = function (options) {
this.init('text', options, Text.defaults);
@ -18,9 +21,21 @@
});
Text.defaults = $.extend({}, $.fn.editableform.types.abstract.defaults, {
tpl: '<input type="text">'
/**
@property tpl
@default <input type="text">
**/
tpl: '<input type="text">',
/**
Placeholder attribute of input. Shown when input is empty.
@property placeholder
@type string
@default null
**/
placeholder: null
});
$.fn.editableform.types.text = Text;
}(window.jQuery));
}(window.jQuery));

@ -1,6 +1,10 @@
/**
* textarea
*/
Textarea input
@class textarea
@extends abstract
@module inputs
**/
(function ($) {
var Textarea = function (options) {
@ -53,8 +57,24 @@
});
Textarea.defaults = $.extend({}, $.fn.editableform.types.abstract.defaults, {
/**
@property tpl
@default <textarea rows="8"></textarea>
**/
tpl:'<textarea rows="8"></textarea>',
inputclass:'span3'
/**
@property inputclass
@default 'span3'
**/
inputclass:'span3',
/**
Placeholder attribute of input. Shown when input is empty.
@property placeholder
@type string
@default null
**/
placeholder: null
});
$.fn.editableform.types.textarea = Textarea;