address.js 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. (function ($) {
  2. "use strict";
  3. var Address = function (options) {
  4. this.init('address', options, Address.defaults);
  5. };
  6. //inherit from Abstract input
  7. $.fn.editableutils.inherit(Address, $.fn.editabletypes.abstractinput);
  8. $.extend(Address.prototype, {
  9. /**
  10. Renders input from tpl
  11. @method render()
  12. **/
  13. render: function() {
  14. this.$input = this.$tpl.find('input');
  15. },
  16. /**
  17. Default method to show value in element. Can be overwritten by display option.
  18. @method value2html(value, element)
  19. **/
  20. value2html: function(value, element) {
  21. if(!value) {
  22. $(element).empty();
  23. return;
  24. }
  25. var html = $('<div>').text(value.city).html() + ', ' + $('<div>').text(value.street).html() + ' st., bld. ' + $('<div>').text(value.building).html();
  26. $(element).html(html);
  27. },
  28. /**
  29. Gets value from element's html
  30. @method html2value(html)
  31. **/
  32. html2value: function(html) {
  33. /*
  34. you may write parsing method to get value by element's html
  35. e.g. "Moscow, st. Lenina, bld. 15" => {city: "Moscow", street: "Lenina", building: "15"}
  36. but for complex structures it's not recommended.
  37. Better set value directly via javascript, e.g.
  38. editable({
  39. value: {
  40. city: "Moscow",
  41. street: "Lenina",
  42. building: "15"
  43. }
  44. });
  45. */
  46. return null;
  47. },
  48. /**
  49. Converts value to string.
  50. It is used in internal comparing (not for sending to server).
  51. @method value2str(value)
  52. **/
  53. value2str: function(value) {
  54. var str = '';
  55. if(value) {
  56. for(var k in value) {
  57. str = str + k + ':' + value[k] + ';';
  58. }
  59. }
  60. return str;
  61. },
  62. /*
  63. Converts string to value. Used for reading value from 'data-value' attribute.
  64. @method str2value(str)
  65. */
  66. str2value: function(str) {
  67. /*
  68. this is mainly for parsing value defined in data-value attribute.
  69. If you will always set value by javascript, no need to overwrite it
  70. */
  71. return str;
  72. },
  73. /**
  74. Sets value of input.
  75. @method value2input(value)
  76. @param {mixed} value
  77. **/
  78. value2input: function(value) {
  79. if(!value) {
  80. return;
  81. }
  82. this.$input.filter('[name="city"]').val(value.city);
  83. this.$input.filter('[name="street"]').val(value.street);
  84. this.$input.filter('[name="building"]').val(value.building);
  85. },
  86. /**
  87. Returns value of input.
  88. @method input2value()
  89. **/
  90. input2value: function() {
  91. return {
  92. city: this.$input.filter('[name="city"]').val(),
  93. street: this.$input.filter('[name="street"]').val(),
  94. building: this.$input.filter('[name="building"]').val()
  95. };
  96. },
  97. /**
  98. Activates input: sets focus on the first field.
  99. @method activate()
  100. **/
  101. activate: function() {
  102. this.$input.filter('[name="city"]').focus();
  103. },
  104. /**
  105. Attaches handler to submit form in case of 'showbuttons=false' mode
  106. @method autosubmit()
  107. **/
  108. autosubmit: function() {
  109. this.$input.keydown(function (e) {
  110. if (e.which === 13) {
  111. $(this).closest('form').submit();
  112. }
  113. });
  114. }
  115. });
  116. Address.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {
  117. tpl: '<div class="form-group editable-address margin-bottom-15"><label>City:</label> <input type="text" name="city" class="form-control"></div>'+
  118. '<div class="form-group editable-address margin-bottom-15"><label>Street:</label> <input type="text" name="street" class="form-control"></div>'+
  119. '<div class="form-group editable-address margin-bottom-15"><label>Building:</label> <input type="text" name="building" class="form-control"></div>',
  120. inputclass: ''
  121. });
  122. $.fn.editabletypes.address = Address;
  123. }(window.jQuery));