Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.
 
 
 
 
 
 

829 lignes
35 KiB

  1. /**
  2. * @file Jeditable - jQuery in place edit plugin
  3. * @home https://github.com/NicolasCARPi/jquery_jeditable
  4. * @author Mika Tuupola, Dylan Verheul, Nicolas CARPi
  5. * @copyright © 2006 Mika Tuupola, Dylan Verheul, Nicolas CARPi
  6. * @licence MIT (see LICENCE file)
  7. * @name Jquery-jeditable
  8. * @type jQuery
  9. *
  10. * @param {String|Function} target - URL or Function to send edited content to. Can also be 'disable', 'enable', or 'destroy'
  11. * @param {Object} [options] - Additional options
  12. * @param {Object} [options.ajaxoptions] - jQuery Ajax options. See https://api.jquery.com/jQuery.ajax/
  13. * @param {Function} [options.before] - Function to be executed before going into edit mode
  14. * @param {Function} [options.callback] - function(result, settings, submitdata) Function to run after submitting edited content
  15. * @param {String} [options.cancel] - Cancel button value, empty means no button
  16. * @param {String} [options.cancelcssclass] - CSS class to apply to cancel button
  17. * @param {Number} [options.cols] - Number of columns if using textarea
  18. * @param {String} [options.cssclass] - CSS class to apply to input form; use 'inherit' to copy from parent
  19. * @param {String} [options.inputcssclass] - CSS class to apply to input. 'inherit' to copy from parent
  20. * @param {Function} [options.intercept] - Intercept the returned data so you have a chance to process it before returning it in the page
  21. * @param {String|Function} [options.data] - Content loaded in the form
  22. * @param {String} [options.event='click'] - jQuery event such as 'click' or 'dblclick'. See https://api.jquery.com/category/events/
  23. * @param {String} [options.formid] - Give an id to the form that is produced
  24. * @param {String|Number} [options.height='auto'] - Height of the element in pixels or 'auto' or 'none'
  25. * @param {String} [options.id='id'] - POST parameter name of edited div id
  26. * @param {String} [options.indicator] - Indicator html to show when saving
  27. * @param {String} [options.label] - Label for the form
  28. * @param {String} [options.list] - HTML5 attribute for text input. Will suggest from a datalist with id of the list option
  29. * @param {String|Function} [options.loaddata] - Extra parameters to pass when fetching content before editing
  30. * @param {String} [options.loadtext='Loading…'] - Text to display while loading external content
  31. * @param {String} [options.loadtype='GET'] - Request type for loadurl (GET or POST)
  32. * @param {String} [options.loadurl] - URL to fetch input content before editing
  33. * @param {Number} [options.max] - Maximum value for number type
  34. * @param {String} [options.maxlength] - The maximum number of character in the text field
  35. * @param {String} [options.method] - Method to use to send edited content (POST or PUT)
  36. * @param {Number} [options.min] - Minimum value for number type
  37. * @param {Boolean} [options.multiple] - Allow multiple selections in a select input
  38. * @param {String} [options.name='value'] - POST parameter name of edited content
  39. * @param {String|Function} [options.onblur='cancel'] - Use 'cancel', 'submit', 'ignore' or function. If function returns false, the form is cancelled.
  40. * @param {Function} [options.onedit] - function triggered upon edition; will cancel edition if it returns false
  41. * @param {Function} [options.onerror] - function(settings, original, xhr) { ... } called on error
  42. * @param {Function} [options.onreset] - function(settings, original) { ... } called before reset
  43. * @param {Function} [options.onsubmit] - function(settings, original) { ... } called before submit
  44. * @param {String} [options.pattern] - HTML5 attribute for text or URL input
  45. * @param {String} [options.placeholder='Click to edit'] - Placeholder text or html to insert when element is empty
  46. * @param {Number} [options.rows] - number of rows if using textarea
  47. * @param {Boolean} [options.select] - When true text is selected
  48. * @param {Function} [options.showfn]- Function that can animate the element when switching to edit mode
  49. * @param {String} [options.size] - The size of the text field
  50. * @param {String} [options.sortselectoptions] - Sort the options of a select form
  51. * @param {Number} [options.step] - Step size for number type
  52. * @param {String} [options.style] - Style to apply to input form; 'inherit' to copy from parent
  53. * @param {String} [options.submit] - submit button value, empty means no button
  54. * @param {String} [options.submitcssclass] - CSS class to apply to submit button
  55. * @param {Object|Function} [options.submitdata] - Extra parameters to send when submitting edited content. function(revert, settings, submitdata)
  56. * @param {String} [options.tooltip] - Tooltip text that appears on hover (via title attribute)
  57. * @param {String} [options.type='text'] - text, textarea, select, email, number, url (or any 3rd party input type)
  58. * @param {String|Number} [options.width='auto'] - The width of the element in pixels or 'auto' or 'none'
  59. *
  60. * @example <caption>Simple usage example:</caption>
  61. * $(".editable").editable("save.php", {
  62. * cancel : 'Cancel',
  63. * submit : 'Save',
  64. * tooltip : "Click to edit...",
  65. * });
  66. */
  67. (function($) {
  68. 'use strict';
  69. // Keyboard accessibility/WAI-ARIA - allow users to navigate to an editable element using TAB/Shift+TAB
  70. $.fn.editableAriaShim = function () {
  71. this.attr({
  72. role: 'button',
  73. tabindex: 0
  74. });
  75. return this; // <-- object chaining.
  76. };
  77. // EDITABLE function
  78. $.fn.editable = function(target, options) {
  79. if ('disable' === target) {
  80. $(this).data('disabled.editable', true);
  81. return;
  82. }
  83. if ('enable' === target) {
  84. $(this).data('disabled.editable', false);
  85. return;
  86. }
  87. if ('destroy' === target) {
  88. $(this)
  89. .off($(this).data('event.editable'))
  90. .removeData('disabled.editable')
  91. .removeData('event.editable');
  92. return;
  93. }
  94. var settings = $.extend({}, $.fn.editable.defaults, {target:target}, options);
  95. /* setup some functions */
  96. var plugin = $.editable.types[settings.type].plugin || function() { };
  97. var submit = $.editable.types[settings.type].submit || function() { };
  98. var buttons = $.editable.types[settings.type].buttons || $.editable.types.defaults.buttons;
  99. var content = $.editable.types[settings.type].content || $.editable.types.defaults.content;
  100. var element = $.editable.types[settings.type].element || $.editable.types.defaults.element;
  101. var reset = $.editable.types[settings.type].reset || $.editable.types.defaults.reset;
  102. var destroy = $.editable.types[settings.type].destroy || $.editable.types.defaults.destroy;
  103. var callback = settings.callback || function() { };
  104. var intercept = settings.intercept || function(s) { return s; };
  105. var onedit = settings.onedit || function() { };
  106. var onsubmit = settings.onsubmit || function() { };
  107. var onreset = settings.onreset || function() { };
  108. var onerror = settings.onerror || reset;
  109. var before = settings.before || false;
  110. // TOOLTIP
  111. if (settings.tooltip) {
  112. $(this).attr('title', settings.tooltip);
  113. }
  114. return this.each(function() {
  115. /* Save this to self because this changes when scope changes. */
  116. var self = this;
  117. /* Save so it can be later used by $.editable('destroy') */
  118. $(this).data('event.editable', settings.event);
  119. /* If element is empty add something clickable (if requested) */
  120. if (!$(this).html().trim()) {
  121. $(this).html(settings.placeholder);
  122. }
  123. if ('destroy' === target) {
  124. destroy.apply($(this).find('form'), [settings, self]);
  125. return;
  126. }
  127. // EVENT IS FIRED
  128. $(this).on(settings.event, function(e) {
  129. /* Abort if element is disabled. */
  130. if (true === $(this).data('disabled.editable')) {
  131. return;
  132. }
  133. // do nothing if user press Tab again, just go to next element, not into edit mode
  134. if (e.which === 9) {
  135. return;
  136. }
  137. /* Prevent throwing an exception if edit field is clicked again. */
  138. if (self.editing) {
  139. return;
  140. }
  141. /* Abort if onedit hook returns false. */
  142. if (false === onedit.apply(this, [settings, self, e])) {
  143. return;
  144. }
  145. /* execute the before function if any was specified */
  146. if (settings.before && (typeof settings.before === 'function')) {
  147. settings.before(e);
  148. } else if (settings.before && !(typeof settings.before === 'function')) {
  149. throw "The 'before' option needs to be provided as a function!";
  150. }
  151. /* Prevent default action and bubbling. */
  152. e.preventDefault();
  153. e.stopPropagation();
  154. /* Remove tooltip. */
  155. if (settings.tooltip) {
  156. $(self).removeAttr('title');
  157. }
  158. /* Remove placeholder text, replace is here because of IE. */
  159. if ($(this).html().toLowerCase().replace(/(;|"|\/)/g, '') ===
  160. settings.placeholder.toLowerCase().replace(/(;|"|\/)/g, '')) {
  161. $(this).html('');
  162. }
  163. self.editing = true;
  164. self.revert = $(self).text();
  165. $(self).html('');
  166. /* Create the form object. */
  167. var form = $('<form />');
  168. /* Apply css or style or both. */
  169. if (settings.cssclass) {
  170. if ('inherit' === settings.cssclass) {
  171. form.attr('class', $(self).attr('class'));
  172. } else {
  173. form.attr('class', settings.cssclass);
  174. }
  175. }
  176. if (settings.style) {
  177. if ('inherit' === settings.style) {
  178. form.attr('style', $(self).attr('style'));
  179. /* IE needs the second line or display won't be inherited. */
  180. form.css('display', $(self).css('display'));
  181. } else {
  182. form.attr('style', settings.style);
  183. }
  184. }
  185. // add a label if it exists
  186. if (settings.label) {
  187. form.append('<label>' + settings.label + '</label>');
  188. }
  189. // add an ID to the form
  190. if (settings.formid) {
  191. form.attr('id', settings.formid);
  192. }
  193. /* Add main input element to form and store it in input. */
  194. var input = element.apply(form, [settings, self]);
  195. if (settings.inputcssclass) {
  196. if ('inherit' === settings.inputcssclass) {
  197. input.attr('class', $(self).attr('class'));
  198. } else {
  199. input.attr('class', settings.inputcssclass);
  200. }
  201. }
  202. /* Set input content via POST, GET, given data or existing value. */
  203. var input_content;
  204. // timeout function
  205. var t;
  206. var isSubmitting = false;
  207. if (settings.loadurl) {
  208. t = self.setTimeout(function() {
  209. input.disabled = true;
  210. }, 100);
  211. $(self).html(settings.loadtext);
  212. var loaddata = {};
  213. loaddata[settings.id] = self.id;
  214. if (typeof settings.loaddata === 'function') {
  215. $.extend(loaddata, settings.loaddata.apply(self, [self.revert, settings]));
  216. } else {
  217. $.extend(loaddata, settings.loaddata);
  218. }
  219. $.ajax({
  220. type : settings.loadtype,
  221. url : settings.loadurl,
  222. data : loaddata,
  223. async: false,
  224. cache : false,
  225. success: function(result) {
  226. self.clearTimeout(t);
  227. input_content = result;
  228. input.disabled = false;
  229. }
  230. });
  231. } else if (settings.data) {
  232. input_content = settings.data;
  233. if (typeof settings.data === 'function') {
  234. input_content = settings.data.apply(self, [self.revert, settings]);
  235. }
  236. } else {
  237. input_content = self.revert;
  238. }
  239. content.apply(form, [input_content, settings, self]);
  240. input.attr('name', settings.name);
  241. /* adjust the width of the element to account for the margin/padding/border */
  242. if (settings.width !== 'none') {
  243. var adj_width = settings.width - (input.outerWidth(true) - settings.width);
  244. input.width(adj_width);
  245. }
  246. /* Add buttons to the form. */
  247. buttons.apply(form, [settings, self]);
  248. /* Add created form to self. */
  249. if (settings.showfn && (typeof settings.showfn === 'function')) {
  250. form.hide();
  251. }
  252. // clear the loadtext that we put here before
  253. $(self).html('');
  254. $(self).append(form);
  255. // execute the showfn
  256. if (settings.showfn && (typeof settings.showfn === 'function')) {
  257. settings.showfn(form);
  258. }
  259. /* Attach 3rd party plugin if requested. */
  260. plugin.apply(form, [settings, self]);
  261. /* Focus to first visible form element. */
  262. form.find(':input:visible:enabled:first').trigger('focus');
  263. /* Highlight input contents when requested. */
  264. if (settings.select) {
  265. input.trigger('select');
  266. }
  267. /* discard changes if pressing esc */
  268. $(this).on('keydown', function(e) {
  269. if (e.which === 27) {
  270. e.preventDefault();
  271. reset.apply(form, [settings, self]);
  272. /* allow shift+enter to submit form (required for textarea) */
  273. } else if (e.which == 13 && e.shiftKey){
  274. e.preventDefault();
  275. form.trigger('submit');
  276. }
  277. });
  278. /* Discard, submit or nothing with changes when clicking outside. */
  279. /* Do nothing is usable when navigating with tab. */
  280. if ('cancel' === settings.onblur) {
  281. input.on('blur', function(e) {
  282. /* Prevent canceling if submit was clicked. */
  283. t = self.setTimeout(function() {
  284. reset.apply(form, [settings, self]);
  285. }, 500);
  286. });
  287. } else if ('submit' === settings.onblur) {
  288. input.on('blur', function(e) {
  289. /* Prevent double submit if submit was clicked. */
  290. t = self.setTimeout(function() {
  291. form.trigger('submit');
  292. }, 200);
  293. });
  294. } else if (typeof settings.onblur === 'function') {
  295. input.on('blur', function(e) {
  296. // reset the form if the onblur function returns false
  297. if (false === settings.onblur.apply(self, [input.val(), settings, form])) {
  298. reset.apply(form, [settings, self]);
  299. }
  300. });
  301. }
  302. form.on('submit', function(e) {
  303. /* Do no submit. */
  304. e.preventDefault();
  305. e.stopPropagation();
  306. if (isSubmitting) {
  307. // we are already submitting! Stop right here.
  308. return false;
  309. } else {
  310. isSubmitting = true;
  311. }
  312. if (t) {
  313. self.clearTimeout(t);
  314. }
  315. /* Call before submit hook. */
  316. /* If it returns false abort submitting. */
  317. isSubmitting = false !== onsubmit.apply(form, [settings, self]);
  318. if (isSubmitting) {
  319. /* Custom inputs call before submit hook. */
  320. /* If it returns false abort submitting. */
  321. isSubmitting = false !== submit.apply(form, [settings, self]);
  322. if (isSubmitting) {
  323. /* Check if given target is function */
  324. if (typeof settings.target === 'function') {
  325. /* Callback function to handle the target response */
  326. var responseHandler = function(value, complete) {
  327. isSubmitting = false;
  328. if (false !== complete) {
  329. $(self).html(value);
  330. self.editing = false;
  331. callback.apply(self, [self.innerText, settings]);
  332. if (!$(self).html().trim()) {
  333. $(self).html(settings.placeholder);
  334. }
  335. }
  336. };
  337. /* Call the user target function */
  338. var userTarget = settings.target.apply(self, [input.val(), settings, responseHandler]);
  339. /* Handle the target function return for compatibility */
  340. if (false !== userTarget && undefined !== userTarget) {
  341. responseHandler(userTarget, userTarget);
  342. }
  343. } else {
  344. /* Add edited content and id of edited element to POST. */
  345. var submitdata = {};
  346. submitdata[settings.name] = input.val();
  347. submitdata[settings.id] = self.id;
  348. /* Add extra data to be POST:ed. */
  349. if (typeof settings.submitdata === 'function') {
  350. $.extend(submitdata, settings.submitdata.apply(self, [self.revert, settings, submitdata]));
  351. } else {
  352. $.extend(submitdata, settings.submitdata);
  353. }
  354. /* Quick and dirty PUT support. */
  355. if ('PUT' === settings.method) {
  356. submitdata._method = 'put';
  357. }
  358. // SHOW INDICATOR
  359. $(self).html(settings.indicator);
  360. /* Defaults for ajaxoptions. */
  361. var ajaxoptions = {
  362. type : 'POST',
  363. complete: function (xhr, status) {
  364. isSubmitting = false;
  365. },
  366. data : submitdata,
  367. dataType: 'html',
  368. url : settings.target,
  369. success : function(result, status) {
  370. // INTERCEPT
  371. result = intercept.apply(self, [result, status]);
  372. if (ajaxoptions.dataType === 'html') {
  373. $(self).html(result);
  374. }
  375. self.editing = false;
  376. callback.apply(self, [result, settings, submitdata]);
  377. if (!$(self).html().trim()) {
  378. $(self).html(settings.placeholder);
  379. }
  380. },
  381. error : function(xhr, status, error) {
  382. onerror.apply(form, [settings, self, xhr]);
  383. }
  384. };
  385. /* Override with what is given in settings.ajaxoptions. */
  386. $.extend(ajaxoptions, settings.ajaxoptions);
  387. $.ajax(ajaxoptions);
  388. }
  389. }
  390. }
  391. /* Show tooltip again. */
  392. $(self).attr('title', settings.tooltip);
  393. return false;
  394. });
  395. });
  396. // PRIVILEGED METHODS
  397. // RESET
  398. self.reset = function(form) {
  399. /* Prevent calling reset twice when blurring. */
  400. if (self.editing) {
  401. /* Before reset hook, if it returns false abort resetting. */
  402. if (false !== onreset.apply(form, [settings, self])) {
  403. $(self).text(self.revert);
  404. self.editing = false;
  405. if (!$(self).html().trim()) {
  406. $(self).html(settings.placeholder);
  407. }
  408. /* Show tooltip again. */
  409. if (settings.tooltip) {
  410. $(self).attr('title', settings.tooltip);
  411. }
  412. }
  413. }
  414. };
  415. // DESTROY
  416. self.destroy = function(form) {
  417. $(self)
  418. .off($(self).data('event.editable'))
  419. .removeData('disabled.editable')
  420. .removeData('event.editable');
  421. self.clearTimeouts();
  422. if (self.editing) {
  423. reset.apply(form, [settings, self]);
  424. }
  425. };
  426. // CLEARTIMEOUT
  427. self.clearTimeout = function(t) {
  428. var timeouts = $(self).data('timeouts');
  429. clearTimeout(t);
  430. if(timeouts) {
  431. var i = timeouts.indexOf(t);
  432. if(i > -1) {
  433. timeouts.splice(i, 1);
  434. if(timeouts.length <= 0) {
  435. $(self).removeData('timeouts');
  436. }
  437. } else {
  438. console.warn('jeditable clearTimeout could not find timeout '+t);
  439. }
  440. }
  441. };
  442. // CLEAR ALL TIMEOUTS
  443. self.clearTimeouts = function () {
  444. var timeouts = $(self).data('timeouts');
  445. if(timeouts) {
  446. for(var i = 0, n = timeouts.length; i < n; ++i) {
  447. clearTimeout(timeouts[i]);
  448. }
  449. timeouts.length = 0;
  450. $(self).removeData('timeouts');
  451. }
  452. };
  453. // SETTIMEOUT
  454. self.setTimeout = function(callback, time) {
  455. var timeouts = $(self).data('timeouts');
  456. var t = setTimeout(function() {
  457. callback();
  458. self.clearTimeout(t);
  459. }, time);
  460. if(!timeouts) {
  461. timeouts = [];
  462. $(self).data('timeouts', timeouts);
  463. }
  464. timeouts.push(t);
  465. return t;
  466. };
  467. });
  468. };
  469. var _supportInType = function (type) {
  470. var i = document.createElement('input');
  471. i.setAttribute('type', type);
  472. return i.type !== 'text' ? type : 'text';
  473. };
  474. $.editable = {
  475. types: {
  476. defaults: {
  477. element : function(settings, original) {
  478. var input = $('<input type="hidden"></input>');
  479. $(this).append(input);
  480. return(input);
  481. },
  482. content : function(string, settings, original) {
  483. $(this).find(':input:first').val(string);
  484. },
  485. reset : function(settings, original) {
  486. original.reset(this);
  487. },
  488. destroy: function(settings, original) {
  489. original.destroy(this);
  490. },
  491. buttons : function(settings, original) {
  492. var form = this;
  493. var submit;
  494. if (settings.submit) {
  495. /* If given html string use that. */
  496. if (settings.submit.match(/>$/)) {
  497. submit = $(settings.submit).on('click', function() {
  498. if (submit.attr('type') !== 'submit') {
  499. form.trigger('submit');
  500. }
  501. });
  502. /* Otherwise use button with given string as text. */
  503. } else {
  504. submit = $('<button type="submit" />');
  505. submit.html(settings.submit);
  506. if (settings.submitcssclass) {
  507. submit.addClass(settings.submitcssclass);
  508. }
  509. }
  510. $(this).append(submit);
  511. }
  512. if (settings.cancel) {
  513. var cancel;
  514. /* If given html string use that. */
  515. if (settings.cancel.match(/>$/)) {
  516. cancel = $(settings.cancel);
  517. /* otherwise use button with given string as text */
  518. } else {
  519. cancel = $('<button type="cancel" />');
  520. cancel.html(settings.cancel);
  521. if (settings.cancelcssclass) {
  522. cancel.addClass(settings.cancelcssclass);
  523. }
  524. }
  525. $(this).append(cancel);
  526. $(cancel).on('click', function(event) {
  527. var reset;
  528. if (typeof $.editable.types[settings.type].reset === 'function') {
  529. reset = $.editable.types[settings.type].reset;
  530. } else {
  531. reset = $.editable.types.defaults.reset;
  532. }
  533. reset.apply(form, [settings, original]);
  534. return false;
  535. });
  536. }
  537. }
  538. },
  539. text: {
  540. element : function(settings, original) {
  541. var input = $('<input />').attr({
  542. autocomplete: 'off',
  543. list: settings.list,
  544. maxlength: settings.maxlength,
  545. pattern: settings.pattern,
  546. placeholder: settings.placeholder,
  547. tooltip: settings.tooltip,
  548. type: 'text'
  549. });
  550. if (settings.width !== 'none') {
  551. input.css('width', settings.width);
  552. }
  553. if (settings.height !== 'none') {
  554. input.css('height', settings.height);
  555. }
  556. if (settings.size) {
  557. input.attr('size', settings.size);
  558. }
  559. if (settings.maxlength) {
  560. input.attr('maxlength', settings.maxlength);
  561. }
  562. $(this).append(input);
  563. return(input);
  564. }
  565. },
  566. // TEXTAREA
  567. textarea: {
  568. element : function(settings, original) {
  569. var textarea = $('<textarea></textarea>');
  570. if (settings.rows) {
  571. textarea.attr('rows', settings.rows);
  572. } else if (settings.height !== 'none') {
  573. textarea.height(settings.height);
  574. }
  575. if (settings.cols) {
  576. textarea.attr('cols', settings.cols);
  577. } else if (settings.width !== 'none') {
  578. textarea.width(settings.width);
  579. }
  580. if (settings.maxlength) {
  581. textarea.attr('maxlength', settings.maxlength);
  582. }
  583. $(this).append(textarea);
  584. return(textarea);
  585. }
  586. },
  587. // SELECT
  588. select: {
  589. element : function(settings, original) {
  590. var select = $('<select />');
  591. if (settings.multiple) {
  592. select.attr('multiple', 'multiple');
  593. }
  594. $(this).append(select);
  595. return(select);
  596. },
  597. content : function(data, settings, original) {
  598. var json;
  599. // If it is string assume it is json
  600. if (String === data.constructor) {
  601. json = JSON.parse(data);
  602. } else {
  603. // Otherwise assume it is a hash already
  604. json = data;
  605. }
  606. // Create tuples for sorting
  607. var tuples = [];
  608. var key;
  609. if (Array.isArray(json) && json.every(Array.isArray)) {
  610. // Process list of tuples
  611. tuples = json // JSON already contains list of [key, value]
  612. json = {};
  613. tuples.forEach(function(e) {
  614. json[e[0]] = e[1]; // Recreate json object to comply with following code
  615. });
  616. } else {
  617. // Process object
  618. for (key in json) {
  619. tuples.push([key, json[key]]); // Store: [key, value]
  620. }
  621. }
  622. if (settings.sortselectoptions) {
  623. // sort it
  624. tuples.sort(function (a, b) {
  625. a = a[1];
  626. b = b[1];
  627. return a < b ? -1 : (a > b ? 1 : 0);
  628. });
  629. }
  630. // now add the options to our select
  631. var option;
  632. for (var i = 0; i < tuples.length; i++) {
  633. key = tuples[i][0];
  634. var value = tuples[i][1];
  635. if (!json.hasOwnProperty(key)) {
  636. continue;
  637. }
  638. if (key !== 'selected') {
  639. option = $('<option />').val(key).append(value);
  640. // add the selected prop if it's the same as original or if the key is 'selected'
  641. if (json.selected === key || key === String.prototype.trim.call(original.revert == null ? "" : original.revert)) {
  642. $(option).prop('selected', 'selected');
  643. }
  644. $(this).find('select').append(option);
  645. }
  646. }
  647. // submit on change if no submit button defined
  648. if (!settings.submit) {
  649. var form = this;
  650. $(this).find('select').change(function() {
  651. form.trigger('submit');
  652. });
  653. }
  654. }
  655. },
  656. // NUMBER
  657. number: {
  658. element: function (settings, original) {
  659. var input = $('<input />').attr({
  660. maxlength: settings.maxlength,
  661. placeholder: settings.placeholder,
  662. min : settings.min,
  663. max : settings.max,
  664. step: settings.step,
  665. tooltip: settings.tooltip,
  666. type: _supportInType('number')
  667. });
  668. if (settings.width !== 'none') {
  669. input.css('width', settings.width);
  670. }
  671. $(this).append(input);
  672. return input;
  673. }
  674. },
  675. // EMAIL
  676. email: {
  677. element: function (settings, original) {
  678. var input = $('<input />').attr({
  679. maxlength: settings.maxlength,
  680. placeholder: settings.placeholder,
  681. tooltip: settings.tooltip,
  682. type: _supportInType('email')
  683. });
  684. if (settings.width !== 'none') {
  685. input.css('width', settings.width);
  686. }
  687. $(this).append(input);
  688. return input;
  689. }
  690. },
  691. // URL
  692. url: {
  693. element: function (settings, original) {
  694. var input = $('<input />').attr({
  695. maxlength: settings.maxlength,
  696. pattern: settings.pattern,
  697. placeholder: settings.placeholder,
  698. tooltip: settings.tooltip,
  699. type: _supportInType('url')
  700. });
  701. if (settings.width !== 'none') {
  702. input.css('width', settings.width);
  703. }
  704. $(this).append(input);
  705. return input;
  706. }
  707. }
  708. },
  709. // add new input type
  710. addInputType: function(name, input) {
  711. $.editable.types[name] = input;
  712. }
  713. };
  714. /* Publicly accessible defaults. */
  715. $.fn.editable.defaults = {
  716. name : 'value',
  717. id : 'id',
  718. type : 'text',
  719. width : 'auto',
  720. height : 'auto',
  721. // Keyboard accessibility - use mouse click OR press any key to enable editing
  722. event : 'click.editable keydown.editable',
  723. onblur : 'cancel',
  724. tooltip : 'Click to edit',
  725. loadtype : 'GET',
  726. loadtext : 'Loading...',
  727. placeholder: 'Click to edit',
  728. sortselectoptions: false,
  729. loaddata : {},
  730. submitdata : {},
  731. ajaxoptions: {}
  732. };
  733. })(jQuery);