| 5 |
lars |
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));
|