dnet45/modules/uoa-repository-dashboard-gui/branches/new-ui/src/assets/js/pages/plugins_xeditable.js @ 57088
1 |
$(function(){ |
---|---|
2 |
altair_xeditable.x_ajax(); |
3 |
altair_xeditable.x_options(); |
4 |
altair_xeditable.x_plugins(); |
5 |
altair_xeditable.x_address(); |
6 |
});
|
7 |
|
8 |
altair_xeditable = { |
9 |
x_ajax: function() { |
10 |
//ajax mocks
|
11 |
$.mockjaxSettings.responseTime = 500; |
12 |
|
13 |
$.mockjax({ |
14 |
url: '/post', |
15 |
response: function(settings) { |
16 |
log(settings, this); |
17 |
}
|
18 |
});
|
19 |
|
20 |
$.mockjax({ |
21 |
url: '/error', |
22 |
status: 400, |
23 |
statusText: 'Bad Request', |
24 |
response: function(settings) { |
25 |
this.responseText = 'Please input correct value'; |
26 |
log(settings, this); |
27 |
}
|
28 |
});
|
29 |
|
30 |
$.mockjax({ |
31 |
url: '/status', |
32 |
status: 500, |
33 |
response: function(settings) { |
34 |
this.responseText = 'Internal Server Error'; |
35 |
log(settings, this); |
36 |
}
|
37 |
});
|
38 |
|
39 |
$.mockjax({ |
40 |
url: '/groups', |
41 |
response: function(settings) { |
42 |
this.responseText = [ |
43 |
{value: 0, text: 'Guest'}, |
44 |
{value: 1, text: 'Service'}, |
45 |
{value: 2, text: 'Customer'}, |
46 |
{value: 3, text: 'Operator'}, |
47 |
{value: 4, text: 'Support'}, |
48 |
{value: 5, text: 'Admin'} |
49 |
];
|
50 |
log(settings, this); |
51 |
}
|
52 |
});
|
53 |
|
54 |
function log(settings, response) { |
55 |
var s = [], str; |
56 |
s.push(settings.type.toUpperCase() + ' url = "' + settings.url + '"'); |
57 |
for(var a in settings.data) { |
58 |
if(settings.data[a] && typeof settings.data[a] === 'object') { |
59 |
str = []; |
60 |
for(var j in settings.data[a]) {str.push(j+': "'+settings.data[a][j]+'"');} |
61 |
str = '{ '+str.join(', ')+' }'; |
62 |
} else { |
63 |
str = '"'+settings.data[a]+'"'; |
64 |
}
|
65 |
s.push(a + ' = ' + str); |
66 |
}
|
67 |
s.push('RESPONSE: status = ' + response.status); |
68 |
|
69 |
if(response.responseText) { |
70 |
if($.isArray(response.responseText)) { |
71 |
s.push('['); |
72 |
$.each(response.responseText, function(i, v){ |
73 |
s.push('{value: ' + v.value+', text: "'+v.text+'"}'); |
74 |
});
|
75 |
s.push(']'); |
76 |
} else { |
77 |
s.push($.trim(response.responseText)); |
78 |
}
|
79 |
}
|
80 |
s.push('--------------------------------------\n'); |
81 |
$('#console').val(s.join('\n') + $('#console').val()); |
82 |
}
|
83 |
},
|
84 |
x_options: function () { |
85 |
//defaults
|
86 |
//$.fn.editable.defaults.mode = 'inline';
|
87 |
$.fn.editable.defaults.url = '/post'; |
88 |
$.fn.editabletypes.combodate.defaults.inputclass = 'md-input'; |
89 |
$.fn.editabletypes.email.defaults.inputclass = 'md-input'; |
90 |
$.fn.editabletypes.number.defaults.inputclass = 'md-input'; |
91 |
$.fn.editabletypes.password.defaults.inputclass = 'md-input'; |
92 |
$.fn.editabletypes.select.defaults.inputclass = 'md-input'; |
93 |
$.fn.editabletypes.tel.defaults.inputclass = 'md-input'; |
94 |
$.fn.editabletypes.text.defaults.inputclass = 'md-input'; |
95 |
$.fn.editabletypes.textarea.defaults.inputclass = 'md-input'; |
96 |
$.fn.editabletypes.time.defaults.inputclass = 'md-input'; |
97 |
$.fn.editabletypes.url.defaults.inputclass = 'md-input'; |
98 |
|
99 |
|
100 |
$.fn.editableform.buttons = '<div class="editable-footer">' + |
101 |
'<button type="button" class="editable-cancel md-btn md-btn-small md-btn-flat">cancel</button>' + |
102 |
'<button type="submit" class="editable-submit md-btn md-btn-small md-btn-flat md-btn-flat-primary">ok</button>'+ |
103 |
'</div>'; |
104 |
},
|
105 |
x_address: function() { |
106 |
|
107 |
(function ($) { |
108 |
"use strict"; |
109 |
|
110 |
var Address = function (options) { |
111 |
this.init('address', options, Address.defaults); |
112 |
};
|
113 |
|
114 |
//inherit from Abstract input
|
115 |
$.fn.editableutils.inherit(Address, $.fn.editabletypes.abstractinput); |
116 |
|
117 |
$.extend(Address.prototype, { |
118 |
/**
|
119 |
Renders input from tpl
|
120 |
|
121 |
@method render()
|
122 |
**/
|
123 |
render: function() { |
124 |
this.$input = this.$tpl.find('input'); |
125 |
},
|
126 |
|
127 |
/**
|
128 |
Default method to show value in element. Can be overwritten by display option.
|
129 |
|
130 |
@method value2html(value, element)
|
131 |
**/
|
132 |
value2html: function(value, element) { |
133 |
if(!value) { |
134 |
$(element).empty(); |
135 |
return; |
136 |
}
|
137 |
var html = $('<div>').text(value.city).html() + ', ' + $('<div>').text(value.street).html() + ' st., bld. ' + $('<div>').text(value.building).html(); |
138 |
$(element).html(html); |
139 |
},
|
140 |
|
141 |
/**
|
142 |
Gets value from element's html
|
143 |
|
144 |
@method html2value(html)
|
145 |
**/
|
146 |
html2value: function(html) { |
147 |
/*
|
148 |
you may write parsing method to get value by element's html
|
149 |
e.g. "Moscow, st. Lenina, bld. 15" => {city: "Moscow", street: "Lenina", building: "15"}
|
150 |
but for complex structures it's not recommended.
|
151 |
Better set value directly via javascript, e.g.
|
152 |
editable({
|
153 |
value: {
|
154 |
city: "Moscow",
|
155 |
street: "Lenina",
|
156 |
building: "15"
|
157 |
}
|
158 |
});
|
159 |
*/
|
160 |
return null; |
161 |
},
|
162 |
|
163 |
/**
|
164 |
Converts value to string.
|
165 |
It is used in internal comparing (not for sending to server).
|
166 |
|
167 |
@method value2str(value)
|
168 |
**/
|
169 |
value2str: function(value) { |
170 |
var str = ''; |
171 |
if(value) { |
172 |
for(var k in value) { |
173 |
str = str + k + ':' + value[k] + ';'; |
174 |
}
|
175 |
}
|
176 |
return str; |
177 |
},
|
178 |
|
179 |
/*
|
180 |
Converts string to value. Used for reading value from 'data-value' attribute.
|
181 |
|
182 |
@method str2value(str)
|
183 |
*/
|
184 |
str2value: function(str) { |
185 |
/*
|
186 |
this is mainly for parsing value defined in data-value attribute.
|
187 |
If you will always set value by javascript, no need to overwrite it
|
188 |
*/
|
189 |
return str; |
190 |
},
|
191 |
|
192 |
/**
|
193 |
Sets value of input.
|
194 |
|
195 |
@method value2input(value)
|
196 |
@param {mixed} value
|
197 |
**/
|
198 |
value2input: function(value) { |
199 |
if(!value) { |
200 |
return; |
201 |
}
|
202 |
this.$input.filter('[name="city"]').val(value.city); |
203 |
this.$input.filter('[name="street"]').val(value.street); |
204 |
this.$input.filter('[name="building"]').val(value.building); |
205 |
},
|
206 |
|
207 |
/**
|
208 |
Returns value of input.
|
209 |
|
210 |
@method input2value()
|
211 |
**/
|
212 |
input2value: function() { |
213 |
return { |
214 |
city: this.$input.filter('[name="city"]').val(), |
215 |
street: this.$input.filter('[name="street"]').val(), |
216 |
building: this.$input.filter('[name="building"]').val() |
217 |
};
|
218 |
},
|
219 |
|
220 |
/**
|
221 |
Activates input: sets focus on the first field.
|
222 |
|
223 |
@method activate()
|
224 |
**/
|
225 |
activate: function() { |
226 |
this.$input.filter('[name="city"]').focus(); |
227 |
},
|
228 |
|
229 |
/**
|
230 |
Attaches handler to submit form in case of 'showbuttons=false' mode
|
231 |
|
232 |
@method autosubmit()
|
233 |
**/
|
234 |
autosubmit: function() { |
235 |
this.$input.keydown(function (e) { |
236 |
if (e.which === 13) { |
237 |
$(this).closest('form').submit(); |
238 |
}
|
239 |
});
|
240 |
}
|
241 |
});
|
242 |
|
243 |
Address.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, { |
244 |
tpl: '<div class="editable-address"><label><span>City: </span><input type="text" name="city" class="md-input"></label></div>'+ |
245 |
'<div class="editable-address"><label><span>Street: </span><input type="text" name="street" class="md-input"></label></div>'+ |
246 |
'<div class="editable-address"><label><span>Building: </span><input type="text" name="building" class="md-input"></label></div>' |
247 |
});
|
248 |
|
249 |
$.fn.editabletypes.address = Address; |
250 |
|
251 |
}(window.jQuery)); |
252 |
|
253 |
$('#address').editable({ |
254 |
url: '/post', |
255 |
value: { |
256 |
city: "Moscow", |
257 |
street: "Lenina", |
258 |
building: "12" |
259 |
},
|
260 |
validate: function(value) { |
261 |
if(value.city == '') return 'city is required!'; |
262 |
},
|
263 |
display: function(value) { |
264 |
if(!value) { |
265 |
$(this).empty(); |
266 |
return; |
267 |
}
|
268 |
var html = '<b>' + $('<div>').text(value.city).html() + '</b>, ' + $('<div>').text(value.street).html() + ' st., bld. ' + $('<div>').text(value.building).html(); |
269 |
$(this).html(html); |
270 |
}
|
271 |
});
|
272 |
|
273 |
},
|
274 |
x_plugins: function() { |
275 |
|
276 |
//editables
|
277 |
$('#username').editable({ |
278 |
url: '/post', |
279 |
type: 'text', |
280 |
pk: 1, |
281 |
name: 'username', |
282 |
title: 'Enter username' |
283 |
});
|
284 |
|
285 |
$('#firstname').editable({ |
286 |
validate: function(value) { |
287 |
if($.trim(value) == '') return 'This field is required'; |
288 |
}
|
289 |
});
|
290 |
|
291 |
$('#sex').editable({ |
292 |
prepend: "not selected", |
293 |
source: [ |
294 |
{value: 1, text: 'Male'}, |
295 |
{value: 2, text: 'Female'} |
296 |
],
|
297 |
display: function(value, sourceData) { |
298 |
var colors = {"": "gray", 1: "green", 2: "blue"}, |
299 |
elem = $.grep(sourceData, function(o){return o.value == value;}); |
300 |
|
301 |
if(elem.length) { |
302 |
$(this).text(elem[0].text).css("color", colors[value]); |
303 |
} else { |
304 |
$(this).empty(); |
305 |
}
|
306 |
}
|
307 |
});
|
308 |
|
309 |
$('#status').editable(); |
310 |
|
311 |
$('#group').editable({ |
312 |
showbuttons: false |
313 |
});
|
314 |
|
315 |
$('#vacation').editable({ |
316 |
datepicker: { |
317 |
todayBtn: 'linked' |
318 |
}
|
319 |
});
|
320 |
|
321 |
$('#dob').editable(); |
322 |
|
323 |
$('#event').editable({ |
324 |
placement: 'right', |
325 |
combodate: { |
326 |
firstItem: 'name' |
327 |
}
|
328 |
});
|
329 |
|
330 |
$('#comments').editable({ |
331 |
showbuttons: 'bottom' |
332 |
});
|
333 |
|
334 |
$('#note').editable(); |
335 |
$('#pencil').click(function(e) { |
336 |
e.stopPropagation(); |
337 |
e.preventDefault(); |
338 |
$('#note').editable('toggle'); |
339 |
});
|
340 |
|
341 |
$('#state').editable({ |
342 |
source: ["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"] |
343 |
});
|
344 |
|
345 |
$('#state2').editable({ |
346 |
value: 'California', |
347 |
typeahead: { |
348 |
name: 'state', |
349 |
local: ["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"] |
350 |
}
|
351 |
});
|
352 |
|
353 |
$('#fruits').editable({ |
354 |
pk: 1, |
355 |
limit: 3, |
356 |
source: [ |
357 |
{value: 1, text: 'banana'}, |
358 |
{value: 2, text: 'peach'}, |
359 |
{value: 3, text: 'apple'}, |
360 |
{value: 4, text: 'watermelon'}, |
361 |
{value: 5, text: 'orange'} |
362 |
]
|
363 |
});
|
364 |
$('#fruits').on('shown', function(e, editable) { |
365 |
editable.input.$input.each(function() { |
366 |
altair_md.checkbox_radio($(this)); |
367 |
})
|
368 |
});
|
369 |
|
370 |
$('#tags').editable({ |
371 |
inputclass: 'input-large', |
372 |
select2: { |
373 |
tags: ['html', 'javascript', 'css', 'ajax'], |
374 |
tokenSeparators: [",", " "] |
375 |
}
|
376 |
});
|
377 |
|
378 |
var countries = []; |
379 |
$.each({"BD": "Bangladesh", "BE": "Belgium", "BF": "Burkina Faso", "BG": "Bulgaria", "BA": "Bosnia and Herzegovina", "BB": "Barbados", "WF": "Wallis and Futuna", "BL": "Saint Bartelemey", "BM": "Bermuda", "BN": "Brunei Darussalam", "BO": "Bolivia", "BH": "Bahrain", "BI": "Burundi", "BJ": "Benin", "BT": "Bhutan", "JM": "Jamaica", "BV": "Bouvet Island", "BW": "Botswana", "WS": "Samoa", "BR": "Brazil", "BS": "Bahamas", "JE": "Jersey", "BY": "Belarus", "O1": "Other Country", "LV": "Latvia", "RW": "Rwanda", "RS": "Serbia", "TL": "Timor-Leste", "RE": "Reunion", "LU": "Luxembourg", "TJ": "Tajikistan", "RO": "Romania", "PG": "Papua New Guinea", "GW": "Guinea-Bissau", "GU": "Guam", "GT": "Guatemala", "GS": "South Georgia and the South Sandwich Islands", "GR": "Greece", "GQ": "Equatorial Guinea", "GP": "Guadeloupe", "JP": "Japan", "GY": "Guyana", "GG": "Guernsey", "GF": "French Guiana", "GE": "Georgia", "GD": "Grenada", "GB": "United Kingdom", "GA": "Gabon", "SV": "El Salvador", "GN": "Guinea", "GM": "Gambia", "GL": "Greenland", "GI": "Gibraltar", "GH": "Ghana", "OM": "Oman", "TN": "Tunisia", "JO": "Jordan", "HR": "Croatia", "HT": "Haiti", "HU": "Hungary", "HK": "Hong Kong", "HN": "Honduras", "HM": "Heard Island and McDonald Islands", "VE": "Venezuela", "PR": "Puerto Rico", "PS": "Palestinian Territory", "PW": "Palau", "PT": "Portugal", "SJ": "Svalbard and Jan Mayen", "PY": "Paraguay", "IQ": "Iraq", "PA": "Panama", "PF": "French Polynesia", "BZ": "Belize", "PE": "Peru", "PK": "Pakistan", "PH": "Philippines", "PN": "Pitcairn", "TM": "Turkmenistan", "PL": "Poland", "PM": "Saint Pierre and Miquelon", "ZM": "Zambia", "EH": "Western Sahara", "RU": "Russian Federation", "EE": "Estonia", "EG": "Egypt", "TK": "Tokelau", "ZA": "South Africa", "EC": "Ecuador", "IT": "Italy", "VN": "Vietnam", "SB": "Solomon Islands", "EU": "Europe", "ET": "Ethiopia", "SO": "Somalia", "ZW": "Zimbabwe", "SA": "Saudi Arabia", "ES": "Spain", "ER": "Eritrea", "ME": "Montenegro", "MD": "Moldova, Republic of", "MG": "Madagascar", "MF": "Saint Martin", "MA": "Morocco", "MC": "Monaco", "UZ": "Uzbekistan", "MM": "Myanmar", "ML": "Mali", "MO": "Macao", "MN": "Mongolia", "MH": "Marshall Islands", "MK": "Macedonia", "MU": "Mauritius", "MT": "Malta", "MW": "Malawi", "MV": "Maldives", "MQ": "Martinique", "MP": "Northern Mariana Islands", "MS": "Montserrat", "MR": "Mauritania", "IM": "Isle of Man", "UG": "Uganda", "TZ": "Tanzania, United Republic of", "MY": "Malaysia", "MX": "Mexico", "IL": "Israel", "FR": "France", "IO": "British Indian Ocean Territory", "FX": "France, Metropolitan", "SH": "Saint Helena", "FI": "Finland", "FJ": "Fiji", "FK": "Falkland Islands (Malvinas)", "FM": "Micronesia, Federated States of", "FO": "Faroe Islands", "NI": "Nicaragua", "NL": "Netherlands", "NO": "Norway", "NA": "Namibia", "VU": "Vanuatu", "NC": "New Caledonia", "NE": "Niger", "NF": "Norfolk Island", "NG": "Nigeria", "NZ": "New Zealand", "NP": "Nepal", "NR": "Nauru", "NU": "Niue", "CK": "Cook Islands", "CI": "Cote d'Ivoire", "CH": "Switzerland", "CO": "Colombia", "CN": "China", "CM": "Cameroon", "CL": "Chile", "CC": "Cocos (Keeling) Islands", "CA": "Canada", "CG": "Congo", "CF": "Central African Republic", "CD": "Congo, The Democratic Republic of the", "CZ": "Czech Republic", "CY": "Cyprus", "CX": "Christmas Island", "CR": "Costa Rica", "CV": "Cape Verde", "CU": "Cuba", "SZ": "Swaziland", "SY": "Syrian Arab Republic", "KG": "Kyrgyzstan", "KE": "Kenya", "SR": "Suriname", "KI": "Kiribati", "KH": "Cambodia", "KN": "Saint Kitts and Nevis", "KM": "Comoros", "ST": "Sao Tome and Principe", "SK": "Slovakia", "KR": "Korea, Republic of", "SI": "Slovenia", "KP": "Korea, Democratic People's Republic of", "KW": "Kuwait", "SN": "Senegal", "SM": "San Marino", "SL": "Sierra Leone", "SC": "Seychelles", "KZ": "Kazakhstan", "KY": "Cayman Islands", "SG": "Singapore", "SE": "Sweden", "SD": "Sudan", "DO": "Dominican Republic", "DM": "Dominica", "DJ": "Djibouti", "DK": "Denmark", "VG": "Virgin Islands, British", "DE": "Germany", "YE": "Yemen", "DZ": "Algeria", "US": "United States", "UY": "Uruguay", "YT": "Mayotte", "UM": "United States Minor Outlying Islands", "LB": "Lebanon", "LC": "Saint Lucia", "LA": "Lao People's Democratic Republic", "TV": "Tuvalu", "TW": "Taiwan", "TT": "Trinidad and Tobago", "TR": "Turkey", "LK": "Sri Lanka", "LI": "Liechtenstein", "A1": "Anonymous Proxy", "TO": "Tonga", "LT": "Lithuania", "A2": "Satellite Provider", "LR": "Liberia", "LS": "Lesotho", "TH": "Thailand", "TF": "French Southern Territories", "TG": "Togo", "TD": "Chad", "TC": "Turks and Caicos Islands", "LY": "Libyan Arab Jamahiriya", "VA": "Holy See (Vatican City State)", "VC": "Saint Vincent and the Grenadines", "AE": "United Arab Emirates", "AD": "Andorra", "AG": "Antigua and Barbuda", "AF": "Afghanistan", "AI": "Anguilla", "VI": "Virgin Islands, U.S.", "IS": "Iceland", "IR": "Iran, Islamic Republic of", "AM": "Armenia", "AL": "Albania", "AO": "Angola", "AN": "Netherlands Antilles", "AQ": "Antarctica", "AP": "Asia/Pacific Region", "AS": "American Samoa", "AR": "Argentina", "AU": "Australia", "AT": "Austria", "AW": "Aruba", "IN": "India", "AX": "Aland Islands", "AZ": "Azerbaijan", "IE": "Ireland", "ID": "Indonesia", "UA": "Ukraine", "QA": "Qatar", "MZ": "Mozambique"}, function(k, v) { |
380 |
countries.push({id: k, text: v}); |
381 |
});
|
382 |
$('#country').editable({ |
383 |
source: countries, |
384 |
select2: { |
385 |
width: 200, |
386 |
placeholder: 'Select country', |
387 |
allowClear: true |
388 |
}
|
389 |
});
|
390 |
|
391 |
$('#user .editable').on('hidden', function(e, reason){ |
392 |
if(reason === 'save' || reason === 'nochange') { |
393 |
var $next = $(this).closest('tr').next().find('.editable'); |
394 |
if($('#autoopen').is(':checked')) { |
395 |
setTimeout(function() { |
396 |
$next.editable('show'); |
397 |
}, 300); |
398 |
} else { |
399 |
$next.focus(); |
400 |
}
|
401 |
}
|
402 |
});
|
403 |
|
404 |
console.log($.fn.editabletypes); |
405 |
|
406 |
}
|
407 |
};
|