').text(value.street).html() + ' st., bld. ' + $('
').text(value.building).html();
55 | $(element).html(html);
56 | },
57 |
58 | /**
59 | Gets value from element's html
60 |
61 | @method html2value(html)
62 | **/
63 | html2value: function(html) {
64 | /*
65 | you may write parsing method to get value by element's html
66 | e.g. "Moscow, st. Lenina, bld. 15" => {city: "Moscow", street: "Lenina", building: "15"}
67 | but for complex structures it's not recommended.
68 | Better set value directly via javascript, e.g.
69 | editable({
70 | value: {
71 | city: "Moscow",
72 | street: "Lenina",
73 | building: "15"
74 | }
75 | });
76 | */
77 | return null;
78 | },
79 |
80 | /**
81 | Converts value to string.
82 | It is used in internal comparing (not for sending to server).
83 |
84 | @method value2str(value)
85 | **/
86 | value2str: function(value) {
87 | var str = '';
88 | if(value) {
89 | for(var k in value) {
90 | str = str + k + ':' + value[k] + ';';
91 | }
92 | }
93 | return str;
94 | },
95 |
96 | /*
97 | Converts string to value. Used for reading value from 'data-value' attribute.
98 |
99 | @method str2value(str)
100 | */
101 | str2value: function(str) {
102 | /*
103 | this is mainly for parsing value defined in data-value attribute.
104 | If you will always set value by javascript, no need to overwrite it
105 | */
106 | return str;
107 | },
108 |
109 | /**
110 | Sets value of input.
111 |
112 | @method value2input(value)
113 | @param {mixed} value
114 | **/
115 | value2input: function(value) {
116 | if(!value) {
117 | return;
118 | }
119 | this.$input.filter('[name="city"]').val(value.city);
120 | this.$input.filter('[name="street"]').val(value.street);
121 | this.$input.filter('[name="building"]').val(value.building);
122 | },
123 |
124 | /**
125 | Returns value of input.
126 |
127 | @method input2value()
128 | **/
129 | input2value: function() {
130 | return {
131 | city: this.$input.filter('[name="city"]').val(),
132 | street: this.$input.filter('[name="street"]').val(),
133 | building: this.$input.filter('[name="building"]').val()
134 | };
135 | },
136 |
137 | /**
138 | Activates input: sets focus on the first field.
139 |
140 | @method activate()
141 | **/
142 | activate: function() {
143 | this.$input.filter('[name="city"]').focus();
144 | },
145 |
146 | /**
147 | Attaches handler to submit form in case of 'showbuttons=false' mode
148 |
149 | @method autosubmit()
150 | **/
151 | autosubmit: function() {
152 | this.$input.keydown(function (e) {
153 | if (e.which === 13) {
154 | $(this).closest('form').submit();
155 | }
156 | });
157 | }
158 | });
159 |
160 | Address.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {
161 | tpl: '
'+
162 | '
'+
163 | '
',
164 |
165 | inputclass: ''
166 | });
167 |
168 | $.fn.editabletypes.address = Address;
169 |
170 | }(window.jQuery));
--------------------------------------------------------------------------------
/dist/jquery-editable/css/jquery-editable.css:
--------------------------------------------------------------------------------
1 | /*! X-editable - v1.5.1
2 | * In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery
3 | * http://github.com/vitalets/x-editable
4 | * Copyright (c) 2013 Vitaliy Potapov; Licensed MIT */
5 | .editableform {
6 | margin-bottom: 0; /* overwrites bootstrap margin */
7 | }
8 |
9 | .editableform .control-group {
10 | margin-bottom: 0; /* overwrites bootstrap margin */
11 | white-space: nowrap; /* prevent wrapping buttons on new line */
12 | line-height: 20px; /* overwriting bootstrap line-height. See #133 */
13 | }
14 |
15 | /*
16 | BS3 width:1005 for inputs breaks editable form in popup
17 | See: https://github.com/vitalets/x-editable/issues/393
18 | */
19 | .editableform .form-control {
20 | width: auto;
21 | }
22 |
23 | .editable-buttons {
24 | display: inline-block; /* should be inline to take effect of parent's white-space: nowrap */
25 | vertical-align: top;
26 | margin-left: 7px;
27 | /* inline-block emulation for IE7*/
28 | zoom: 1;
29 | *display: inline;
30 | }
31 |
32 | .editable-buttons.editable-buttons-bottom {
33 | display: block;
34 | margin-top: 7px;
35 | margin-left: 0;
36 | }
37 |
38 | .editable-input {
39 | vertical-align: top;
40 | display: inline-block; /* should be inline to take effect of parent's white-space: nowrap */
41 | width: auto; /* bootstrap-responsive has width: 100% that breakes layout */
42 | white-space: normal; /* reset white-space decalred in parent*/
43 | /* display-inline emulation for IE7*/
44 | zoom: 1;
45 | *display: inline;
46 | }
47 |
48 | .editable-buttons .editable-cancel {
49 | margin-left: 7px;
50 | }
51 |
52 | /*for jquery-ui buttons need set height to look more pretty*/
53 | .editable-buttons button.ui-button-icon-only {
54 | height: 24px;
55 | width: 30px;
56 | }
57 |
58 | .editableform-loading {
59 | background: url('../img/loading.gif') center center no-repeat;
60 | height: 25px;
61 | width: auto;
62 | min-width: 25px;
63 | }
64 |
65 | .editable-inline .editableform-loading {
66 | background-position: left 5px;
67 | }
68 |
69 | .editable-error-block {
70 | max-width: 300px;
71 | margin: 5px 0 0 0;
72 | width: auto;
73 | white-space: normal;
74 | }
75 |
76 | /*add padding for jquery ui*/
77 | .editable-error-block.ui-state-error {
78 | padding: 3px;
79 | }
80 |
81 | .editable-error {
82 | color: red;
83 | }
84 |
85 | /* ---- For specific types ---- */
86 |
87 | .editableform .editable-date {
88 | padding: 0;
89 | margin: 0;
90 | float: left;
91 | }
92 |
93 | /* move datepicker icon to center of add-on button. See https://github.com/vitalets/x-editable/issues/183 */
94 | .editable-inline .add-on .icon-th {
95 | margin-top: 3px;
96 | margin-left: 1px;
97 | }
98 |
99 |
100 | /* checklist vertical alignment */
101 | .editable-checklist label input[type="checkbox"],
102 | .editable-checklist label span {
103 | vertical-align: middle;
104 | margin: 0;
105 | }
106 |
107 | .editable-checklist label {
108 | white-space: nowrap;
109 | }
110 |
111 | /* set exact width of textarea to fit buttons toolbar */
112 | .editable-wysihtml5 {
113 | width: 566px;
114 | height: 250px;
115 | }
116 |
117 | /* clear button shown as link in date inputs */
118 | .editable-clear {
119 | clear: both;
120 | font-size: 0.9em;
121 | text-decoration: none;
122 | text-align: right;
123 | }
124 |
125 | /* IOS-style clear button for text inputs */
126 | .editable-clear-x {
127 | background: url('../img/clear.png') center center no-repeat;
128 | display: block;
129 | width: 13px;
130 | height: 13px;
131 | position: absolute;
132 | opacity: 0.6;
133 | z-index: 100;
134 |
135 | top: 50%;
136 | right: 6px;
137 | margin-top: -6px;
138 |
139 | }
140 |
141 | .editable-clear-x:hover {
142 | opacity: 1;
143 | }
144 |
145 | .editable-pre-wrapped {
146 | white-space: pre-wrap;
147 | }
148 | .editable-container.editable-popup {
149 | max-width: none !important; /* without this rule poshytip/tooltip does not stretch */
150 | }
151 |
152 | .editable-container.popover {
153 | width: auto; /* without this rule popover does not stretch */
154 | }
155 |
156 | .editable-container.editable-inline {
157 | display: inline-block;
158 | vertical-align: middle;
159 | width: auto;
160 | /* inline-block emulation for IE7*/
161 | zoom: 1;
162 | *display: inline;
163 | }
164 |
165 | .editable-container.ui-widget {
166 | font-size: inherit; /* jqueryui widget font 1.1em too big, overwrite it */
167 | z-index: 9990; /* should be less than select2 dropdown z-index to close dropdown first when click */
168 | }
169 | .editable-click,
170 | a.editable-click,
171 | a.editable-click:hover {
172 | text-decoration: none;
173 | border-bottom: dashed 1px #0088cc;
174 | }
175 |
176 | .editable-click.editable-disabled,
177 | a.editable-click.editable-disabled,
178 | a.editable-click.editable-disabled:hover {
179 | color: #585858;
180 | cursor: default;
181 | border-bottom: none;
182 | }
183 |
184 | .editable-empty, .editable-empty:hover, .editable-empty:focus{
185 | font-style: italic;
186 | color: #DD1144;
187 | /* border-bottom: none; */
188 | text-decoration: none;
189 | }
190 |
191 | .editable-unsaved {
192 | font-weight: bold;
193 | }
194 |
195 | .editable-unsaved:after {
196 | /* content: '*'*/
197 | }
198 |
199 | .editable-bg-transition {
200 | -webkit-transition: background-color 1400ms ease-out;
201 | -moz-transition: background-color 1400ms ease-out;
202 | -o-transition: background-color 1400ms ease-out;
203 | -ms-transition: background-color 1400ms ease-out;
204 | transition: background-color 1400ms ease-out;
205 | }
206 |
207 | /*see https://github.com/vitalets/x-editable/issues/139 */
208 | .form-horizontal .editable
209 | {
210 | padding-top: 5px;
211 | display:inline-block;
212 | }
213 |
214 |
--------------------------------------------------------------------------------
/dist/jqueryui-editable/css/jqueryui-editable.css:
--------------------------------------------------------------------------------
1 | /*! X-editable - v1.5.1
2 | * In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery
3 | * http://github.com/vitalets/x-editable
4 | * Copyright (c) 2013 Vitaliy Potapov; Licensed MIT */
5 | .editableform {
6 | margin-bottom: 0; /* overwrites bootstrap margin */
7 | }
8 |
9 | .editableform .control-group {
10 | margin-bottom: 0; /* overwrites bootstrap margin */
11 | white-space: nowrap; /* prevent wrapping buttons on new line */
12 | line-height: 20px; /* overwriting bootstrap line-height. See #133 */
13 | }
14 |
15 | /*
16 | BS3 width:1005 for inputs breaks editable form in popup
17 | See: https://github.com/vitalets/x-editable/issues/393
18 | */
19 | .editableform .form-control {
20 | width: auto;
21 | }
22 |
23 | .editable-buttons {
24 | display: inline-block; /* should be inline to take effect of parent's white-space: nowrap */
25 | vertical-align: top;
26 | margin-left: 7px;
27 | /* inline-block emulation for IE7*/
28 | zoom: 1;
29 | *display: inline;
30 | }
31 |
32 | .editable-buttons.editable-buttons-bottom {
33 | display: block;
34 | margin-top: 7px;
35 | margin-left: 0;
36 | }
37 |
38 | .editable-input {
39 | vertical-align: top;
40 | display: inline-block; /* should be inline to take effect of parent's white-space: nowrap */
41 | width: auto; /* bootstrap-responsive has width: 100% that breakes layout */
42 | white-space: normal; /* reset white-space decalred in parent*/
43 | /* display-inline emulation for IE7*/
44 | zoom: 1;
45 | *display: inline;
46 | }
47 |
48 | .editable-buttons .editable-cancel {
49 | margin-left: 7px;
50 | }
51 |
52 | /*for jquery-ui buttons need set height to look more pretty*/
53 | .editable-buttons button.ui-button-icon-only {
54 | height: 24px;
55 | width: 30px;
56 | }
57 |
58 | .editableform-loading {
59 | background: url('../img/loading.gif') center center no-repeat;
60 | height: 25px;
61 | width: auto;
62 | min-width: 25px;
63 | }
64 |
65 | .editable-inline .editableform-loading {
66 | background-position: left 5px;
67 | }
68 |
69 | .editable-error-block {
70 | max-width: 300px;
71 | margin: 5px 0 0 0;
72 | width: auto;
73 | white-space: normal;
74 | }
75 |
76 | /*add padding for jquery ui*/
77 | .editable-error-block.ui-state-error {
78 | padding: 3px;
79 | }
80 |
81 | .editable-error {
82 | color: red;
83 | }
84 |
85 | /* ---- For specific types ---- */
86 |
87 | .editableform .editable-date {
88 | padding: 0;
89 | margin: 0;
90 | float: left;
91 | }
92 |
93 | /* move datepicker icon to center of add-on button. See https://github.com/vitalets/x-editable/issues/183 */
94 | .editable-inline .add-on .icon-th {
95 | margin-top: 3px;
96 | margin-left: 1px;
97 | }
98 |
99 |
100 | /* checklist vertical alignment */
101 | .editable-checklist label input[type="checkbox"],
102 | .editable-checklist label span {
103 | vertical-align: middle;
104 | margin: 0;
105 | }
106 |
107 | .editable-checklist label {
108 | white-space: nowrap;
109 | }
110 |
111 | /* set exact width of textarea to fit buttons toolbar */
112 | .editable-wysihtml5 {
113 | width: 566px;
114 | height: 250px;
115 | }
116 |
117 | /* clear button shown as link in date inputs */
118 | .editable-clear {
119 | clear: both;
120 | font-size: 0.9em;
121 | text-decoration: none;
122 | text-align: right;
123 | }
124 |
125 | /* IOS-style clear button for text inputs */
126 | .editable-clear-x {
127 | background: url('../img/clear.png') center center no-repeat;
128 | display: block;
129 | width: 13px;
130 | height: 13px;
131 | position: absolute;
132 | opacity: 0.6;
133 | z-index: 100;
134 |
135 | top: 50%;
136 | right: 6px;
137 | margin-top: -6px;
138 |
139 | }
140 |
141 | .editable-clear-x:hover {
142 | opacity: 1;
143 | }
144 |
145 | .editable-pre-wrapped {
146 | white-space: pre-wrap;
147 | }
148 | .editable-container.editable-popup {
149 | max-width: none !important; /* without this rule poshytip/tooltip does not stretch */
150 | }
151 |
152 | .editable-container.popover {
153 | width: auto; /* without this rule popover does not stretch */
154 | }
155 |
156 | .editable-container.editable-inline {
157 | display: inline-block;
158 | vertical-align: middle;
159 | width: auto;
160 | /* inline-block emulation for IE7*/
161 | zoom: 1;
162 | *display: inline;
163 | }
164 |
165 | .editable-container.ui-widget {
166 | font-size: inherit; /* jqueryui widget font 1.1em too big, overwrite it */
167 | z-index: 9990; /* should be less than select2 dropdown z-index to close dropdown first when click */
168 | }
169 | .editable-click,
170 | a.editable-click,
171 | a.editable-click:hover {
172 | text-decoration: none;
173 | border-bottom: dashed 1px #0088cc;
174 | }
175 |
176 | .editable-click.editable-disabled,
177 | a.editable-click.editable-disabled,
178 | a.editable-click.editable-disabled:hover {
179 | color: #585858;
180 | cursor: default;
181 | border-bottom: none;
182 | }
183 |
184 | .editable-empty, .editable-empty:hover, .editable-empty:focus{
185 | font-style: italic;
186 | color: #DD1144;
187 | /* border-bottom: none; */
188 | text-decoration: none;
189 | }
190 |
191 | .editable-unsaved {
192 | font-weight: bold;
193 | }
194 |
195 | .editable-unsaved:after {
196 | /* content: '*'*/
197 | }
198 |
199 | .editable-bg-transition {
200 | -webkit-transition: background-color 1400ms ease-out;
201 | -moz-transition: background-color 1400ms ease-out;
202 | -o-transition: background-color 1400ms ease-out;
203 | -ms-transition: background-color 1400ms ease-out;
204 | transition: background-color 1400ms ease-out;
205 | }
206 |
207 | /*see https://github.com/vitalets/x-editable/issues/139 */
208 | .form-horizontal .editable
209 | {
210 | padding-top: 5px;
211 | display:inline-block;
212 | }
213 |
214 |
--------------------------------------------------------------------------------
/test/unit/datetimefield.js:
--------------------------------------------------------------------------------
1 | $(function () {
2 |
3 | var dpg, f = 'dd.mm.yyyy hh:ii', mode;
4 |
5 | module("datetimefield", {
6 | setup: function(){
7 | fx = $('#async-fixture');
8 | dpg = $.fn.datetimepicker.DPGlobal;
9 | $.support.transition = false;
10 | mode = $.fn.editable.defaults.mode;
11 | $.fn.editable.defaults.mode = 'inline';
12 | },
13 | teardown: function() {
14 | //restore mode
15 | $.fn.editable.defaults.mode = mode;
16 | }
17 | });
18 |
19 | function frmt(date, format) {
20 | //convert to utc
21 | date = $.fn.editabletypes.datetime.prototype.toUTC(date);
22 | return dpg.formatDate(date, dpg.parseFormat(format, 'standard'), 'en', 'standard');
23 | }
24 |
25 | asyncTest("container should contain datetimepicker with value and save new entered date", function () {
26 | $.fn.editabletypes.datetimefield.defaults.datetimepicker.weekStart = 1;
27 |
28 | var d = '15.05.1984 20:30',
29 | e = $('
'+d+'').appendTo(fx).editable({
30 | format: f,
31 | datetimepicker: {
32 |
33 | }
34 | }),
35 | nextD = '16.05.1984 21:35';
36 |
37 | $.mockjax({
38 | url: 'post-datetimefield',
39 | response: function(settings) {
40 | equal(settings.data.value, nextD, 'submitted value correct');
41 | }
42 | });
43 |
44 | //testing func, run twice!
45 | var func = function() {
46 | var df = $.Deferred();
47 | equal(frmt(e.data('editable').value, 'dd.mm.yyyy hh:ii'), d, 'value correct');
48 |
49 | e.click();
50 | var cont = tip(e);
51 | //check input
52 | ok(cont.find('input[type="text"]').is(':visible'), 'input exists');
53 | equal(cont.find('input').val(), d, 'value set correct');
54 |
55 | //open picker
56 | cont.find('span.add-on').click();
57 | var p = cont.find('span.add-on').parent().data().datetimepicker.picker;
58 |
59 | //check date in picker
60 | ok(p.is(':visible'), 'datetimepicker exists');
61 | equal(p.length, 1, 'datetimepicker single');
62 | ok(p.find('.datetimepicker-days').is(':visible'), 'datetimepicker days visible');
63 |
64 | equal(frmt(e.data('editable').value, f), d, 'day set correct');
65 | ok(p.find('td.day.active').is(':visible'), 'active day is visible');
66 | equal(p.find('td.day.active').text(), 15, 'day shown correct');
67 | equal(p.find('th.dow').eq(0).text(), 'Mo', 'weekStart correct');
68 |
69 | //set new day
70 | p.find('.day.active').next().click();
71 |
72 | //hours appeared?
73 | ok(p.find('.datetimepicker-hours').is(':visible'), 'datetimepicker hours visible');
74 | //set hours 21
75 | p.find('.hour.active').next().click();
76 |
77 | //minutes appeared?
78 | ok(p.find('.datetimepicker-minutes').is(':visible'), 'datetimepicker minutes visible');
79 | //set minutes 21:35
80 | p.find('.minute.active').next().click();
81 |
82 | //submit
83 | cont.find('form').submit();
84 |
85 | setTimeout(function() {
86 | ok(!cont.is(':visible'), 'popover closed');
87 | equal(frmt(e.data('editable').value, f), nextD, 'new date saved to value');
88 | equal(e.text(), nextD, 'new text shown');
89 | df.resolve();
90 | }, timeout);
91 |
92 | return df.promise();
93 | };
94 |
95 | $.when(func()).then(function() {
96 | e.editable('setValue', d, true);
97 | $.when(func()).then(function() {
98 | e.remove();
99 | start();
100 | });
101 | });
102 |
103 | });
104 |
105 | test("viewformat, init by text", function () {
106 | var dview = '15/05/1984 11:50',
107 | d = '1984-05-15 11:50',
108 | e = $('
'+dview+'').appendTo('#qunit-fixture').editable({
109 | format: 'yyyy-mm-dd hh:ii',
110 | viewformat: 'dd/mm/yyyy hh:ii',
111 | datetimepicker: {
112 |
113 | }
114 | });
115 |
116 | equal(frmt(e.data('editable').value, 'yyyy-mm-dd hh:ii'), d, 'value correct');
117 | });
118 |
119 | test("viewformat, init by value", function () {
120 | var dview = '15/05/1984 15:45',
121 | d = '1984-05-15 15:45',
122 | e = $('
').appendTo('#qunit-fixture').editable();
123 |
124 | equal(frmt(e.data('editable').value, 'yyyy-mm-dd hh:ii'), d, 'value correct');
125 | equal(e.text(), dview, 'text correct');
126 | });
127 |
128 | test("incorrect datetime", function () {
129 | var dview = '15/05/1984 15:45',
130 | d = '1984-05-15 15:45',
131 | e = $('
').appendTo('#qunit-fixture').editable();
132 |
133 | e.click();
134 | var p = tip(e);
135 | ok(p.find('input').is(':visible'), 'input exists');
136 |
137 | //enter incorrect date
138 | p.find('input').val('abcde');
139 |
140 | //submit
141 | p.find('form').submit();
142 |
143 | ok(!p.is(':visible'), 'popover closed');
144 | equal(e.data('editable').value, null, 'date set to null');
145 | equal(e.text(), $.fn.editable.defaults.emptytext , 'emptytext shown');
146 | });
147 |
148 | });
--------------------------------------------------------------------------------
/src/inputs/html5types.js:
--------------------------------------------------------------------------------
1 | /**
2 | HTML5 input types.
3 | Following types are supported:
4 |
5 | * password
6 | * email
7 | * url
8 | * tel
9 | * number
10 | * range
11 | * time
12 |
13 | Learn more about html5 inputs:
14 | http://www.w3.org/wiki/HTML5_form_additions
15 | To check browser compatibility please see:
16 | https://developer.mozilla.org/en-US/docs/HTML/Element/Input
17 |
18 | @class html5types
19 | @extends text
20 | @final
21 | @since 1.3.0
22 | @example
23 |
admin@example.com
24 |
32 | **/
33 |
34 | /**
35 | @property tpl
36 | @default depends on type
37 | **/
38 |
39 | /*
40 | Password
41 | */
42 | (function ($) {
43 | "use strict";
44 |
45 | var Password = function (options) {
46 | this.init('password', options, Password.defaults);
47 | };
48 | $.fn.editableutils.inherit(Password, $.fn.editabletypes.text);
49 | $.extend(Password.prototype, {
50 | //do not display password, show '[hidden]' instead
51 | value2html: function(value, element) {
52 | if(value) {
53 | $(element).text('[hidden]');
54 | } else {
55 | $(element).empty();
56 | }
57 | },
58 | //as password not displayed, should not set value by html
59 | html2value: function(html) {
60 | return null;
61 | }
62 | });
63 | Password.defaults = $.extend({}, $.fn.editabletypes.text.defaults, {
64 | tpl: '
'
65 | });
66 | $.fn.editabletypes.password = Password;
67 | }(window.jQuery));
68 |
69 |
70 | /*
71 | Email
72 | */
73 | (function ($) {
74 | "use strict";
75 |
76 | var Email = function (options) {
77 | this.init('email', options, Email.defaults);
78 | };
79 | $.fn.editableutils.inherit(Email, $.fn.editabletypes.text);
80 | Email.defaults = $.extend({}, $.fn.editabletypes.text.defaults, {
81 | tpl: '
'
82 | });
83 | $.fn.editabletypes.email = Email;
84 | }(window.jQuery));
85 |
86 |
87 | /*
88 | Url
89 | */
90 | (function ($) {
91 | "use strict";
92 |
93 | var Url = function (options) {
94 | this.init('url', options, Url.defaults);
95 | };
96 | $.fn.editableutils.inherit(Url, $.fn.editabletypes.text);
97 | Url.defaults = $.extend({}, $.fn.editabletypes.text.defaults, {
98 | tpl: '
'
99 | });
100 | $.fn.editabletypes.url = Url;
101 | }(window.jQuery));
102 |
103 |
104 | /*
105 | Tel
106 | */
107 | (function ($) {
108 | "use strict";
109 |
110 | var Tel = function (options) {
111 | this.init('tel', options, Tel.defaults);
112 | };
113 | $.fn.editableutils.inherit(Tel, $.fn.editabletypes.text);
114 | Tel.defaults = $.extend({}, $.fn.editabletypes.text.defaults, {
115 | tpl: '
'
116 | });
117 | $.fn.editabletypes.tel = Tel;
118 | }(window.jQuery));
119 |
120 |
121 | /*
122 | Number
123 | */
124 | (function ($) {
125 | "use strict";
126 |
127 | var NumberInput = function (options) {
128 | this.init('number', options, NumberInput.defaults);
129 | };
130 | $.fn.editableutils.inherit(NumberInput, $.fn.editabletypes.text);
131 | $.extend(NumberInput.prototype, {
132 | render: function () {
133 | NumberInput.superclass.render.call(this);
134 | this.setAttr('min');
135 | this.setAttr('max');
136 | this.setAttr('step');
137 | },
138 | postrender: function() {
139 | if(this.$clear) {
140 | //increase right ffset for up/down arrows
141 | this.$clear.css({right: 24});
142 | /*
143 | //can position clear button only here, when form is shown and height can be calculated
144 | var h = this.$input.outerHeight(true) || 20,
145 | delta = (h - this.$clear.height()) / 2;
146 |
147 | //add 12px to offset right for up/down arrows
148 | this.$clear.css({top: delta, right: delta + 16});
149 | */
150 | }
151 | }
152 | });
153 | NumberInput.defaults = $.extend({}, $.fn.editabletypes.text.defaults, {
154 | tpl: '
',
155 | inputclass: 'input-mini',
156 | min: null,
157 | max: null,
158 | step: null
159 | });
160 | $.fn.editabletypes.number = NumberInput;
161 | }(window.jQuery));
162 |
163 |
164 | /*
165 | Range (inherit from number)
166 | */
167 | (function ($) {
168 | "use strict";
169 |
170 | var Range = function (options) {
171 | this.init('range', options, Range.defaults);
172 | };
173 | $.fn.editableutils.inherit(Range, $.fn.editabletypes.number);
174 | $.extend(Range.prototype, {
175 | render: function () {
176 | this.$input = this.$tpl.filter('input');
177 |
178 | this.setClass();
179 | this.setAttr('min');
180 | this.setAttr('max');
181 | this.setAttr('step');
182 |
183 | this.$input.on('input', function(){
184 | $(this).siblings('output').text($(this).val());
185 | });
186 | },
187 | activate: function() {
188 | this.$input.focus();
189 | }
190 | });
191 | Range.defaults = $.extend({}, $.fn.editabletypes.number.defaults, {
192 | tpl: '
',
193 | inputclass: 'input-medium'
194 | });
195 | $.fn.editabletypes.range = Range;
196 | }(window.jQuery));
197 |
198 | /*
199 | Time
200 | */
201 | (function ($) {
202 | "use strict";
203 |
204 | var Time = function (options) {
205 | this.init('time', options, Time.defaults);
206 | };
207 | //inherit from abstract, as inheritance from text gives selection error.
208 | $.fn.editableutils.inherit(Time, $.fn.editabletypes.abstractinput);
209 | $.extend(Time.prototype, {
210 | render: function() {
211 | this.setClass();
212 | }
213 | });
214 | Time.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {
215 | tpl: '
'
216 | });
217 | $.fn.editabletypes.time = Time;
218 | }(window.jQuery));
219 |
--------------------------------------------------------------------------------