Untitled diff

Created Diff never expires
20 removals
120 lines
20 additions
120 lines
<script>
<script>
<!--
<!--
var GoogleMapsFormFieldMultipleMarkers = function(){
var GoogleMapsFormFieldMultipleMarkers = function(){
this.integer = {NBR_FIELDS};
this.integer = {NBR_FIELDS};
this.id_input = ${escapejs(HTML_ID)};
this.id_input = ${escapejs(HTML_ID)};
this.max_input = {MAX_INPUT};
this.max_input = {MAX_INPUT};
};
};
GoogleMapsFormFieldMultipleMarkers.prototype = {
GoogleMapsFormFieldMultipleMarkers.prototype = {
add : function () {
add : function () {
if (this.integer <= this.max_input) {
if (this.integer <= this.max_input) {
var id = this.id_input + '-' + this.integer;
var id = this.id_input + '-' + this.integer;
jQuery('<div/>', {id : 'marker-' + id, class: 'marker-container'}).appendTo('#input-fields-' + this.id_input);
jQuery('<div/>', {id : 'marker-' + id, class: 'marker-container'}).appendTo('#input-fields-' + this.id_input);
jQuery('<div/>', {id : 'field-' + id, class: 'map-input-container'}).appendTo('#marker-' + id);
jQuery('<div/>', {id : 'field-' + id, class: 'map-input-container'}).appendTo('#marker-' + id);
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);
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);
jQuery('#field-' + id).append(' ');
jQuery('#field-' + id).append(' ');
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);
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);
jQuery('#field-' + id).append(' ');
jQuery('#field-' + id).append(' ');
jQuery('<input/> ', {type : 'hidden', id : 'latitude-' + id, name : 'latitude-' + id}).appendTo('#field-' + id);
jQuery('<input/> ', {type : 'hidden', id : 'latitude-' + id, name : 'latitude-' + id}).appendTo('#field-' + id);
jQuery('<input/> ', {type : 'hidden', id : 'longitude-' + id, name : 'longitude-' + id}).appendTo('#field-' + id);
jQuery('<input/> ', {type : 'hidden', id : 'longitude-' + id, name : 'longitude-' + id}).appendTo('#field-' + id);
jQuery('<input/> ', {type : 'hidden', id : 'zoom-' + id, name : 'zoom-' + id}).appendTo('#field-' + id);
jQuery('<input/> ', {type : 'hidden', id : 'zoom-' + id, name : 'zoom-' + id}).appendTo('#field-' + id);
jQuery('<a/> ', {href : 'javascript:GoogleMapsFormFieldMultipleMarkers.delete('+ this.integer +');', title : "${LangLoader::get_message('delete', 'common')}"}).html('<i class="fa fa-delete"></i>').appendTo('#field-' + id);
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);
jQuery('<div/>', {id : 'map-' + id, class: 'map-canvas'}).appendTo('#marker-' + id);
jQuery('<div/>', {id : 'map-' + id, class: 'map-canvas'}).appendTo('#marker-' + id);
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);
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);
this.integer++;
this.integer++;
}
}
if (this.integer == this.max_input) {
if (this.integer == this.max_input) {
jQuery('#add-' + this.id_input).hide();
jQuery('#add-' + this.id_input).hide();
}
}
},
},
delete : function (id) {
delete : function (id) {
var id = 'marker-' + this.id_input + '-' + id;
var id = 'marker-' + this.id_input + '-' + id;
jQuery('#' + id).remove();
jQuery('#' + id).remove();
this.integer--;
this.integer--;
jQuery('#add-' + this.id_input).show();
jQuery('#add-' + this.id_input).show();
},
},
};
};
var GoogleMapsFormFieldMultipleMarkers = new GoogleMapsFormFieldMultipleMarkers();
var GoogleMapsFormFieldMultipleMarkers = new GoogleMapsFormFieldMultipleMarkers();
-->
-->
</script>
</script>
<div id="input-fields-${escape(HTML_ID)}" class="multiple-markers-container">
<div id="input-fields-${escape(HTML_ID)}" class="multiple-markers-container">
# START fieldelements #
# START fieldelements #
<div id="marker-${escape(HTML_ID)}-{fieldelements.ID}" class="marker-container">
<div id="marker-${escape(HTML_ID)}-{fieldelements.ID}" class="marker-container">
<div id="field-${escape(HTML_ID)}-{fieldelements.ID} map-input-container">
<div id="field-${escape(HTML_ID)}-{fieldelements.ID} map-input-container">
<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 # />
<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 # />
<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 # />
<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 # />
<input type="hidden" id="latitude-${escape(HTML_ID)}-{fieldelements.ID}" name="latitude-${escape(HTML_ID)}-{fieldelements.ID}" value="{fieldelements.LATITUDE}" />
<input type="hidden" id="latitude-${escape(HTML_ID)}-{fieldelements.ID}" name="latitude-${escape(HTML_ID)}-{fieldelements.ID}" value="{fieldelements.LATITUDE}" />
<input type="hidden" id="longitude-${escape(HTML_ID)}-{fieldelements.ID}" name="longitude-${escape(HTML_ID)}-{fieldelements.ID}" value="{fieldelements.LONGITUDE}" />
<input type="hidden" id="longitude-${escape(HTML_ID)}-{fieldelements.ID}" name="longitude-${escape(HTML_ID)}-{fieldelements.ID}" value="{fieldelements.LONGITUDE}" />
<input type="hidden" id="zoom-${escape(HTML_ID)}-{fieldelements.ID}" name="zoom-${escape(HTML_ID)}-{fieldelements.ID}" value="{fieldelements.ZOOM}" />
<input type="hidden" id="zoom-${escape(HTML_ID)}-{fieldelements.ID}" name="zoom-${escape(HTML_ID)}-{fieldelements.ID}" value="{fieldelements.ZOOM}" />
<a href="javascript:GoogleMapsFormFieldMultipleMarkers.delete({fieldelements.ID});" title="${LangLoader::get_message('delete', 'common')}" data-confirmation="delete-element"><i class="fa fa-delete"></i></a>
<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>
</div>
</div>
<div class="map-canvas" id="map-${escape(HTML_ID)}-{fieldelements.ID}"></div>
<div class="map-canvas" id="map-${escape(HTML_ID)}-{fieldelements.ID}"></div>
<script>
<script>
<!--
<!--
jQuery("#${escape(HTML_ID)}-{fieldelements.ID}").on('blur',function(){
jQuery("#${escape(HTML_ID)}-{fieldelements.ID}").on('blur',function(){
var marker = jQuery("#${escape(HTML_ID)}-{fieldelements.ID}").geocomplete("marker");
var marker = jQuery("#${escape(HTML_ID)}-{fieldelements.ID}").geocomplete("marker");
if (jQuery("#${escape(HTML_ID)}-{fieldelements.ID}").val())
if (jQuery("#${escape(HTML_ID)}-{fieldelements.ID}").val())
marker.setVisible(true);
marker.setVisible(true);
else
else
marker.setVisible(false);
marker.setVisible(false);
});
});
jQuery(function(){
jQuery(function(){
# IF fieldelements.C_ADDRESS #
# IF fieldelements.C_ADDRESS #
var address = "{fieldelements.ADDRESS}";
var address = "{fieldelements.ADDRESS}";
# ELSE #
# ELSE #
var address = [{DEFAULT_LATITUDE}, {DEFAULT_LONGITUDE}];
var address = [{DEFAULT_LATITUDE}, {DEFAULT_LONGITUDE}];
# ENDIF #
# ENDIF #
jQuery("#${escape(HTML_ID)}-{fieldelements.ID}").geocomplete({
jQuery("#${escape(HTML_ID)}-{fieldelements.ID}").geocomplete({
map: "#map-${escape(HTML_ID)}-{fieldelements.ID}",
map: "#map-${escape(HTML_ID)}-{fieldelements.ID}",
location: # IF fieldelements.C_COORDONATES #[{fieldelements.LATITUDE}, {fieldelements.LONGITUDE}]# ELSE #address# ENDIF #,
location: # IF fieldelements.C_COORDONATES #[{fieldelements.LATITUDE}, {fieldelements.LONGITUDE}]# ELSE #address# ENDIF #,
types: ["geocode", "establishment"],
types: ["geocode", "establishment"],
markerOptions: {
markerOptions: {
draggable: true# IF NOT fieldelements.C_ADDRESS #,
draggable: true# IF NOT fieldelements.C_ADDRESS #,
visible: false# ENDIF #
visible: false# ENDIF #
},
},
mapOptions: {
mapOptions: {
scrollwheel: true# IF fieldelements.C_ZOOM #,
scrollwheel: true# IF fieldelements.C_ZOOM #,
zoom: {fieldelements.ZOOM}# ENDIF #
zoom: {fieldelements.ZOOM}# ENDIF #
}
}
});
});
jQuery("#${escape(HTML_ID)}-{fieldelements.ID}").bind("geocode:dragged", function(event, latLng){
jQuery("#${escape(HTML_ID)}-{fieldelements.ID}").bind("geocode:dragged", function(event, latLng){
jQuery("input[name=latitude-${escape(HTML_ID)}-{fieldelements.ID}]").val(latLng.lat());
jQuery("input[name=latitude-${escape(HTML_ID)}-{fieldelements.ID}]").val(latLng.lat());
jQuery("input[name=longitude-${escape(HTML_ID)}-{fieldelements.ID}]").val(latLng.lng());
jQuery("input[name=longitude-${escape(HTML_ID)}-{fieldelements.ID}]").val(latLng.lng());
});
});
jQuery("#${escape(HTML_ID)}-{fieldelements.ID}").bind("geocode:idle", function(event, latLng){
jQuery("#${escape(HTML_ID)}-{fieldelements.ID}").bind("geocode:idle", function(event, latLng){
jQuery("input[name=latitude-${escape(HTML_ID)}-{fieldelements.ID}]").val(latLng.lat());
jQuery("input[name=latitude-${escape(HTML_ID)}-{fieldelements.ID}]").val(latLng.lat());
jQuery("input[name=longitude-${escape(HTML_ID)}-{fieldelements.ID}]").val(latLng.lng());
jQuery("input[name=longitude-${escape(HTML_ID)}-{fieldelements.ID}]").val(latLng.lng());
});
});
jQuery("#${escape(HTML_ID)}-{fieldelements.ID}").bind("geocode:zoom", function(event, value){
jQuery("#${escape(HTML_ID)}-{fieldelements.ID}").bind("geocode:zoom", function(event, value){
jQuery("input[name=zoom-${escape(HTML_ID)}-{fieldelements.ID}]").val(value);
jQuery("input[name=zoom-${escape(HTML_ID)}-{fieldelements.ID}]").val(value);
});
});
});
});
-->
-->
</script>
</script>
</div>
</div>
# END fieldelements #
# END fieldelements #
</div>
</div>
<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>
<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>
# IF C_INCLUDE_API #
# IF C_INCLUDE_API #
<script src="//maps.googleapis.com/maps/api/js?key={API_KEY}&amp;libraries=places"></script>
<script src="//maps.googleapis.com/maps/api/js?key={API_KEY}&amp;libraries=places"></script>
<script src="{PATH_TO_ROOT}/GoogleMaps/templates/js/jquery.geocomplete.js"></script>
<script src="{PATH_TO_ROOT}/GoogleMaps/templates/js/jquery.geocomplete.js"></script>
# ENDIF #
# ENDIF #