-20 Removals
+20 Additions

Created by:phpboost

1<script> 1<script>
2<!-- 2<!--
3var GoogleMapsFormFieldMultipleMarkers = function(){ 3var GoogleMapsFormFieldMultipleMarkers = function(){
4 this.integer = {NBR_FIELDS}; 4 this.integer = {NBR_FIELDS};
5 this.id_input = ${escapejs(HTML_ID)}; 5 this.id_input = ${escapejs(HTML_ID)};
6 this.max_input = {MAX_INPUT}; 6 this.max_input = {MAX_INPUT};
7}; 7};
8 8
9GoogleMapsFormFieldMultipleMarkers.prototype = { 9GoogleMapsFormFieldMultipleMarkers.prototype = {
10 add : function () { 10 add : function () {
11 if (this.integer <= this.max_input) { 11 if (this.integer <= this.max_input) {
12 var id = this.id_input + '-' + this.integer; 12 var id = this.id_input + '-' + this.integer;
13 13
14 jQuery('<div/>', {id : 'marker-' + id, class: 'marker-container'}).appendTo('#input-fields-' + this.id_input); 14 jQuery('<div/>', {id : 'marker-' + id, class: 'marker-container'}).appendTo('#input-fields-' + this.id_input);
15 15
16 jQuery('<div/>', {id : 'field-' + id, class: 'map-input-container'}).appendTo('#marker-' + id); 16 jQuery('<div/>', {id : 'field-' + id, class: 'map-input-container'}).appendTo('#marker-' + id);
17 17
18 jQuery('<input/> ', {type : 'text', id : id, name : id, required : "required", placeholder : '{@form.marker.address}', class: 'marker-address-input# IF C_CLASS # ${escape(CLASS)}# ENDIF #'}).appendTo('#field-' + id); 18 jQuery('<input/> ', {type : 'text', id : id, name : id, required : "required", placeholder : '{@form.marker.address}', class: 'marker-address-input# IF C_CLASS # ${escape(CLASS)}# ENDIF #'}).appendTo('#field-' + id);
19 jQuery('#field-' + id).append(' '); 19 jQuery('#field-' + id).append(' ');
20 20
21 jQuery('<input/> ', {type : 'text', id : 'name-' + id, name : 'name-' + id, placeholder : '{@form.marker.name}', class: 'marker-desc-input# IF C_CLASS # ${escape(CLASS)}# ENDIF #'}).appendTo('#field-' + id); 21 jQuery('<input/> ', {type : 'text', id : 'name-' + id, name : 'name-' + id, placeholder : '{@form.marker.name}', class: 'marker-desc-input# IF C_CLASS # ${escape(CLASS)}# ENDIF #'}).appendTo('#field-' + id);
22 jQuery('#field-' + id).append(' '); 22 jQuery('#field-' + id).append(' ');
23 23
24 jQuery('<input/> ', {type : 'hidden', id : 'latitude-' + id, name : 'latitude-' + id}).appendTo('#field-' + id); 24 jQuery('<input/> ', {type : 'hidden', id : 'latitude-' + id, name : 'latitude-' + id}).appendTo('#field-' + id);
25 jQuery('<input/> ', {type : 'hidden', id : 'longitude-' + id, name : 'longitude-' + id}).appendTo('#field-' + id); 25 jQuery('<input/> ', {type : 'hidden', id : 'longitude-' + id, name : 'longitude-' + id}).appendTo('#field-' + id);
26 jQuery('<input/> ', {type : 'hidden', id : 'zoom-' + id, name : 'zoom-' + id}).appendTo('#field-' + id); 26 jQuery('<input/> ', {type : 'hidden', id : 'zoom-' + id, name : 'zoom-' + id}).appendTo('#field-' + id);
27 27
28 jQuery('<a/> ', {href : 'javascript:GoogleMapsFormFieldMultipleMarkers.delete('+ this.integer +');', title : "${LangLoader::get_message('delete', 'common')}"}).html('<i class="fa fa-delete"></i>').appendTo('#field-' + id); 28 jQuery('<a/> ', {href : 'javascript:GoogleMapsFormFieldMultipleMarkers.delete('+ this.integer +');', 'aria-label' : '{@form.del.marker}'}).html('<i class="fa fa-delete" aria-hidden="true" title="{@form.del.marker}"></i>').appendTo('#field-' + id);
29 29
30 jQuery('<div/>', {id : 'map-' + id, class: 'map-canvas'}).appendTo('#marker-' + id); 30 jQuery('<div/>', {id : 'map-' + id, class: 'map-canvas'}).appendTo('#marker-' + id);
31 31
32 jQuery('<script/>').html('jQuery("#' + id + '").on(\'blur\',function(){ var marker = jQuery("#' + id + '").geocomplete("marker"); if (jQuery("#' + id + '").val()) marker.setVisible(true); else marker.setVisible(false); }); jQuery(function(){ jQuery("#' + id + '").geocomplete({ map: "#map-' + id + '", location: [{DEFAULT_LATITUDE}, {DEFAULT_LONGITUDE}], types: ["geocode", "establishment"], markerOptions: { draggable: true, visible: false }, mapOptions: { scrollwheel: true } }); jQuery("#' + id + '").bind("geocode:dragged", function(event, latLng){ jQuery("input[name=latitude-' + id + ']").val(latLng.lat()); jQuery("input[name=longitude-' + id + ']").val(latLng.lng()); }); jQuery("#' + id + '").bind("geocode:idle", function(event, latLng){ jQuery("input[name=latitude-' + id + ']").val(latLng.lat()); jQuery("input[name=longitude-' + id + ']").val(latLng.lng()); }); jQuery("#' + id + '").bind("geocode:zoom", function(event, value){ jQuery("input[name=zoom-' + id + ']").val(value); }); });').appendTo('#marker-' + id); 32 jQuery('<script/>').html('jQuery("#' + id + '").on(\'blur\',function(){ var marker = jQuery("#' + id + '").geocomplete("marker"); if (jQuery("#' + id + '").val()) marker.setVisible(true); else marker.setVisible(false); }); jQuery(function(){ jQuery("#' + id + '").geocomplete({ map: "#map-' + id + '", location: [{DEFAULT_LATITUDE}, {DEFAULT_LONGITUDE}], types: ["geocode", "establishment"], markerOptions: { draggable: true, visible: false }, mapOptions: { scrollwheel: true } }); jQuery("#' + id + '").bind("geocode:dragged", function(event, latLng){ jQuery("input[name=latitude-' + id + ']").val(latLng.lat()); jQuery("input[name=longitude-' + id + ']").val(latLng.lng()); }); jQuery("#' + id + '").bind("geocode:idle", function(event, latLng){ jQuery("input[name=latitude-' + id + ']").val(latLng.lat()); jQuery("input[name=longitude-' + id + ']").val(latLng.lng()); }); jQuery("#' + id + '").bind("geocode:zoom", function(event, value){ jQuery("input[name=zoom-' + id + ']").val(value); }); });').appendTo('#marker-' + id);
33 33
34 this.integer++; 34 this.integer++;
35 } 35 }
36 if (this.integer == this.max_input) { 36 if (this.integer == this.max_input) {
37 jQuery('#add-' + this.id_input).hide(); 37 jQuery('#add-' + this.id_input).hide();
38 } 38 }
39 }, 39 },
40 delete : function (id) { 40 delete : function (id) {
41 var id = 'marker-' + this.id_input + '-' + id; 41 var id = 'marker-' + this.id_input + '-' + id;
42 jQuery('#' + id).remove(); 42 jQuery('#' + id).remove();
43 this.integer--; 43 this.integer--;
44 jQuery('#add-' + this.id_input).show(); 44 jQuery('#add-' + this.id_input).show();
45 }, 45 },
46}; 46};
47 47
48var GoogleMapsFormFieldMultipleMarkers = new GoogleMapsFormFieldMultipleMarkers(); 48var GoogleMapsFormFieldMultipleMarkers = new GoogleMapsFormFieldMultipleMarkers();
49--> 49-->
50</script> 50</script>
51 51
52<div id="input-fields-${escape(HTML_ID)}" class="multiple-markers-container"> 52<div id="input-fields-${escape(HTML_ID)}" class="multiple-markers-container">
53# START fieldelements # 53# START fieldelements #
54 <div id="marker-${escape(HTML_ID)}-{fieldelements.ID}" class="marker-container"> 54 <div id="marker-${escape(HTML_ID)}-{fieldelements.ID}" class="marker-container">
55 <div id="field-${escape(HTML_ID)}-{fieldelements.ID} map-input-container"> 55 <div id="field-${escape(HTML_ID)}-{fieldelements.ID} map-input-container">
56 <input type="text" name="${escape(HTML_ID)}-{fieldelements.ID}" id="${escape(HTML_ID)}-{fieldelements.ID}" value="{fieldelements.ADDRESS}" placeholder="{@form.marker.address}" class="marker-address-input# IF C_READONLY # low-opacity# ENDIF ## IF C_CLASS # ${escape(CLASS)}# ENDIF #" # IF C_DISABLED # disabled="disabled" # ENDIF # /> 56 <input type="text" name="${escape(HTML_ID)}-{fieldelements.ID}" id="${escape(HTML_ID)}-{fieldelements.ID}" value="{fieldelements.ADDRESS}" placeholder="{@form.marker.address}" class="marker-address-input# IF C_READONLY # low-opacity# ENDIF ## IF C_CLASS # ${escape(CLASS)}# ENDIF #" # IF C_DISABLED # disabled="disabled" # ENDIF # />
57 <input type="text" name="name-${escape(HTML_ID)}-{fieldelements.ID}" id="name-${escape(HTML_ID)}-{fieldelements.ID}" value="{fieldelements.MARKER_NAME}" placeholder="{@form.marker.name}" class="marker-desc-input# IF C_READONLY # low-opacity# ENDIF ## IF C_CLASS # ${escape(CLASS)}# ENDIF #" # IF C_DISABLED # disabled="disabled" # ENDIF # /> 57 <input type="text" name="name-${escape(HTML_ID)}-{fieldelements.ID}" id="name-${escape(HTML_ID)}-{fieldelements.ID}" value="{fieldelements.MARKER_NAME}" placeholder="{@form.marker.name}" class="marker-desc-input# IF C_READONLY # low-opacity# ENDIF ## IF C_CLASS # ${escape(CLASS)}# ENDIF #" # IF C_DISABLED # disabled="disabled" # ENDIF # />
58 <input type="hidden" id="latitude-${escape(HTML_ID)}-{fieldelements.ID}" name="latitude-${escape(HTML_ID)}-{fieldelements.ID}" value="{fieldelements.LATITUDE}" /> 58 <input type="hidden" id="latitude-${escape(HTML_ID)}-{fieldelements.ID}" name="latitude-${escape(HTML_ID)}-{fieldelements.ID}" value="{fieldelements.LATITUDE}" />
59 <input type="hidden" id="longitude-${escape(HTML_ID)}-{fieldelements.ID}" name="longitude-${escape(HTML_ID)}-{fieldelements.ID}" value="{fieldelements.LONGITUDE}" /> 59 <input type="hidden" id="longitude-${escape(HTML_ID)}-{fieldelements.ID}" name="longitude-${escape(HTML_ID)}-{fieldelements.ID}" value="{fieldelements.LONGITUDE}" />
60 <input type="hidden" id="zoom-${escape(HTML_ID)}-{fieldelements.ID}" name="zoom-${escape(HTML_ID)}-{fieldelements.ID}" value="{fieldelements.ZOOM}" /> 60 <input type="hidden" id="zoom-${escape(HTML_ID)}-{fieldelements.ID}" name="zoom-${escape(HTML_ID)}-{fieldelements.ID}" value="{fieldelements.ZOOM}" />
61 <a href="javascript:GoogleMapsFormFieldMultipleMarkers.delete({fieldelements.ID});" title="${LangLoader::get_message('delete', 'common')}" data-confirmation="delete-element"><i class="fa fa-delete"></i></a> 61 <a href="javascript:GoogleMapsFormFieldMultipleMarkers.delete({fieldelements.ID});" aria-label="{@form.del.marker}" data-confirmation="delete-element"><i class="fa fa-delete" aria-hidden="true" title="{@form.del.marker}"></i></a>
62 </div> 62 </div>
63 <div class="map-canvas" id="map-${escape(HTML_ID)}-{fieldelements.ID}"></div> 63 <div class="map-canvas" id="map-${escape(HTML_ID)}-{fieldelements.ID}"></div>
64 <script> 64 <script>
65 <!-- 65 <!--
66 jQuery("#${escape(HTML_ID)}-{fieldelements.ID}").on('blur',function(){ 66 jQuery("#${escape(HTML_ID)}-{fieldelements.ID}").on('blur',function(){
67 var marker = jQuery("#${escape(HTML_ID)}-{fieldelements.ID}").geocomplete("marker"); 67 var marker = jQuery("#${escape(HTML_ID)}-{fieldelements.ID}").geocomplete("marker");
68 if (jQuery("#${escape(HTML_ID)}-{fieldelements.ID}").val()) 68 if (jQuery("#${escape(HTML_ID)}-{fieldelements.ID}").val())
69 marker.setVisible(true); 69 marker.setVisible(true);
70 else 70 else
71 marker.setVisible(false); 71 marker.setVisible(false);
72 }); 72 });
73 73
74 jQuery(function(){ 74 jQuery(function(){
75 # IF fieldelements.C_ADDRESS # 75 # IF fieldelements.C_ADDRESS #
76 var address = "{fieldelements.ADDRESS}"; 76 var address = "{fieldelements.ADDRESS}";
77 # ELSE # 77 # ELSE #
78 var address = [{DEFAULT_LATITUDE}, {DEFAULT_LONGITUDE}]; 78 var address = [{DEFAULT_LATITUDE}, {DEFAULT_LONGITUDE}];
79 # ENDIF # 79 # ENDIF #
80 80
81 jQuery("#${escape(HTML_ID)}-{fieldelements.ID}").geocomplete({ 81 jQuery("#${escape(HTML_ID)}-{fieldelements.ID}").geocomplete({
82 map: "#map-${escape(HTML_ID)}-{fieldelements.ID}", 82 map: "#map-${escape(HTML_ID)}-{fieldelements.ID}",
83 location: # IF fieldelements.C_COORDONATES #[{fieldelements.LATITUDE}, {fieldelements.LONGITUDE}]# ELSE #address# ENDIF #, 83 location: # IF fieldelements.C_COORDONATES #[{fieldelements.LATITUDE}, {fieldelements.LONGITUDE}]# ELSE #address# ENDIF #,
84 types: ["geocode", "establishment"], 84 types: ["geocode", "establishment"],
85 markerOptions: { 85 markerOptions: {
86 draggable: true# IF NOT fieldelements.C_ADDRESS #, 86 draggable: true# IF NOT fieldelements.C_ADDRESS #,
87 visible: false# ENDIF # 87 visible: false# ENDIF #
88 }, 88 },
89 mapOptions: { 89 mapOptions: {
90 scrollwheel: true# IF fieldelements.C_ZOOM #, 90 scrollwheel: true# IF fieldelements.C_ZOOM #,
91 zoom: {fieldelements.ZOOM}# ENDIF # 91 zoom: {fieldelements.ZOOM}# ENDIF #
92 } 92 }
93 }); 93 });
94 94
95 jQuery("#${escape(HTML_ID)}-{fieldelements.ID}").bind("geocode:dragged", function(event, latLng){ 95 jQuery("#${escape(HTML_ID)}-{fieldelements.ID}").bind("geocode:dragged", function(event, latLng){
96 jQuery("input[name=latitude-${escape(HTML_ID)}-{fieldelements.ID}]").val(latLng.lat()); 96 jQuery("input[name=latitude-${escape(HTML_ID)}-{fieldelements.ID}]").val(latLng.lat());
97 jQuery("input[name=longitude-${escape(HTML_ID)}-{fieldelements.ID}]").val(latLng.lng()); 97 jQuery("input[name=longitude-${escape(HTML_ID)}-{fieldelements.ID}]").val(latLng.lng());
98 }); 98 });
99 99
100 jQuery("#${escape(HTML_ID)}-{fieldelements.ID}").bind("geocode:idle", function(event, latLng){ 100 jQuery("#${escape(HTML_ID)}-{fieldelements.ID}").bind("geocode:idle", function(event, latLng){
101 jQuery("input[name=latitude-${escape(HTML_ID)}-{fieldelements.ID}]").val(latLng.lat()); 101 jQuery("input[name=latitude-${escape(HTML_ID)}-{fieldelements.ID}]").val(latLng.lat());
102 jQuery("input[name=longitude-${escape(HTML_ID)}-{fieldelements.ID}]").val(latLng.lng()); 102 jQuery("input[name=longitude-${escape(HTML_ID)}-{fieldelements.ID}]").val(latLng.lng());
103 }); 103 });
104 104
105 jQuery("#${escape(HTML_ID)}-{fieldelements.ID}").bind("geocode:zoom", function(event, value){ 105 jQuery("#${escape(HTML_ID)}-{fieldelements.ID}").bind("geocode:zoom", function(event, value){
106 jQuery("input[name=zoom-${escape(HTML_ID)}-{fieldelements.ID}]").val(value); 106 jQuery("input[name=zoom-${escape(HTML_ID)}-{fieldelements.ID}]").val(value);
107 }); 107 });
108 }); 108 });
109 --> 109 -->
110 </script> 110 </script>
111 </div> 111 </div>
112# END fieldelements # 112# END fieldelements #
113</div> 113</div>
114<a href="javascript:GoogleMapsFormFieldMultipleMarkers.add();" id="add-${escape(HTML_ID)}" class="form-field-checkbox-more" title="${LangLoader::get_message('add', 'common')}"><i class="fa fa-plus"></i></a> 114<a href="javascript:GoogleMapsFormFieldMultipleMarkers.add();" id="add-${escape(HTML_ID)}" class="form-field-checkbox-more" aria-label="{@form.add.marker}"><i class="fa fa-plus" aria-hidden="true" title="{@form.add.marker}"></i></a>
115 115
116# IF C_INCLUDE_API # 116# IF C_INCLUDE_API #
117<script src="//maps.googleapis.com/maps/api/js?key={API_KEY}&amp;libraries=places"></script> 117<script src="//maps.googleapis.com/maps/api/js?key={API_KEY}&amp;libraries=places"></script>
118<script src="{PATH_TO_ROOT}/GoogleMaps/templates/js/jquery.geocomplete.js"></script> 118<script src="{PATH_TO_ROOT}/GoogleMaps/templates/js/jquery.geocomplete.js"></script>
119# ENDIF # 119# ENDIF #
Editor
Original Text
Changed Text
Recommended videos