Details | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 1 | espaco | 1 | /** |
| 2 | Address editable input. |
||
| 3 | Internally value stored as {city: "Moscow", street: "Lenina", building: "15"} |
||
| 4 | |||
| 5 | @class address |
||
| 6 | @extends abstractinput |
||
| 7 | @final |
||
| 8 | @example |
||
| 9 | <a href="#" id="address" data-type="address" data-pk="1">awesome</a> |
||
| 10 | <script> |
||
| 11 | $(function(){ |
||
| 12 | $('#address').editable({ |
||
| 13 | url: '/post', |
||
| 14 | title: 'Enter city, street and building #', |
||
| 15 | value: { |
||
| 16 | city: "Moscow", |
||
| 17 | street: "Lenina", |
||
| 18 | building: "15" |
||
| 19 | } |
||
| 20 | }); |
||
| 21 | }); |
||
| 22 | </script> |
||
| 23 | **/ |
||
| 24 | (function ($) { |
||
| 25 | "use strict"; |
||
| 26 | |||
| 27 | var Address = function (options) { |
||
| 28 | this.init('address', options, Address.defaults); |
||
| 29 | }; |
||
| 30 | |||
| 31 | //inherit from Abstract input |
||
| 32 | $.fn.editableutils.inherit(Address, $.fn.editabletypes.abstractinput); |
||
| 33 | |||
| 34 | $.extend(Address.prototype, { |
||
| 35 | /** |
||
| 36 | Renders input from tpl |
||
| 37 | |||
| 38 | @method render() |
||
| 39 | **/ |
||
| 40 | render: function() { |
||
| 41 | this.$input = this.$tpl.find('input'); |
||
| 42 | }, |
||
| 43 | |||
| 44 | /** |
||
| 45 | Default method to show value in element. Can be overwritten by display option. |
||
| 46 | |||
| 47 | @method value2html(value, element) |
||
| 48 | **/ |
||
| 49 | value2html: function(value, element) { |
||
| 50 | if(!value) { |
||
| 51 | $(element).empty(); |
||
| 52 | return; |
||
| 53 | } |
||
| 54 | var html = $('<div>').text(value.city).html() + ', ' + $('<div>').text(value.street).html() + ' st., bld. ' + $('<div>').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: '<div class="editable-address"><label><span>City: </span><input type="text" name="city" class="form-control input-small"></label></div>'+ |
||
| 162 | '<div class="editable-address"><label><span>Street: </span><input type="text" name="street" class="form-control input-small"></label></div>'+ |
||
| 163 | '<div class="editable-address"><label><span>Building: </span><input type="text" name="building" class="form-control input-small"></label></div>', |
||
| 164 | |||
| 165 | inputclass: '' |
||
| 166 | }); |
||
| 167 | |||
| 168 | $.fn.editabletypes.address = Address; |
||
| 169 | |||
| 170 | }(window.jQuery)); |