khaihihi
This commit is contained in:
KhaiNguyen
446
wp-content/plugins/keydesign-addon/elements/map.php
Normal file
446
wp-content/plugins/keydesign-addon/elements/map.php
Normal file
@@ -0,0 +1,446 @@
|
||||
<?php
|
||||
if (!class_exists('KD_ELEM_MAP')) {
|
||||
class KD_ELEM_MAP extends KEYDESIGN_ADDON_CLASS {
|
||||
function __construct() {
|
||||
add_action('init', array($this, 'kd_map_init'));
|
||||
add_shortcode('tek_map', array($this, 'kd_map_shrt'));
|
||||
}
|
||||
|
||||
|
||||
// Element configuration in admin
|
||||
function kd_map_init() {
|
||||
|
||||
if (function_exists('vc_map')) {
|
||||
vc_map(array(
|
||||
"name" => esc_html__("Google map", "keydesign"),
|
||||
"description" => esc_html__("Custom Google Map", "keydesign"),
|
||||
"base" => "tek_map",
|
||||
"class" => "",
|
||||
"icon" => plugins_url('assets/element_icons/google-map.png', dirname(__FILE__)),
|
||||
"category" => esc_html__("KeyDesign Elements", "keydesign"),
|
||||
"params" => array(
|
||||
array(
|
||||
"type" => "kd_param_notice",
|
||||
"text" => "<span style='display: block;'>Google maps requires a valid API key in order to work. You can add it in Dashboard > Ekko > Theme Options > Global Options. You can generate a new API key from <a href='https://developers.google.com/maps/faq#new-key' target='_blank' title='Google Maps API'>here</a>.</span>",
|
||||
"param_name" => "notification",
|
||||
"edit_field_class" => "vc_column vc_col-sm-12",
|
||||
),
|
||||
array(
|
||||
"type" => "textfield",
|
||||
"class" => "",
|
||||
"heading" => esc_html__("Map name", "keydesign"),
|
||||
"param_name" => "map_name",
|
||||
"value" => "",
|
||||
"description" => esc_html__("Insert a unique map name.", "keydesign"),
|
||||
"save_always" => true,
|
||||
),
|
||||
|
||||
array(
|
||||
"type" => "textfield",
|
||||
"class" => "",
|
||||
"heading" => esc_html__("Location latitude", "keydesign"),
|
||||
"param_name" => "map_latitude",
|
||||
"value" => "",
|
||||
"description" => esc_html__("Enter location latitude.", "keydesign")
|
||||
),
|
||||
|
||||
array(
|
||||
"type" => "textfield",
|
||||
"class" => "",
|
||||
"heading" => esc_html__("Location longitude", "keydesign"),
|
||||
"param_name" => "map_longitude",
|
||||
"value" => "",
|
||||
"description" => esc_html__("Enter location longitude.", "keydesign")
|
||||
),
|
||||
|
||||
array(
|
||||
"type" => "dropdown",
|
||||
"class" => "",
|
||||
"heading" => esc_html__("Map zoom", "keydesign"),
|
||||
"param_name" => "map_zoom",
|
||||
"value" => array(
|
||||
"10 - City" => "10",
|
||||
"11" => "11",
|
||||
"12" => "12",
|
||||
"13" => "13",
|
||||
"14" => "14",
|
||||
"15 - Streets" => "15",
|
||||
"16" => "16",
|
||||
"17" => "17",
|
||||
"18" => "18",
|
||||
"19" => "19",
|
||||
"20 - Buildings" => "20",
|
||||
),
|
||||
"description" => esc_html__("Enter map zoom (default 14).", "keydesign")
|
||||
),
|
||||
array(
|
||||
"type" => "dropdown",
|
||||
"class" => "",
|
||||
"heading" => esc_html__("Map style", "keydesign"),
|
||||
"param_name" => "map_style",
|
||||
"value" => array(
|
||||
esc_html__( 'Grayscale', 'keydesign' ) => 'gmap_style_grayscale',
|
||||
esc_html__( 'Google preset colors', 'keydesign' ) => 'gmap_style_normal',
|
||||
),
|
||||
"description" => esc_html__("Choose map style.", "keydesign"),
|
||||
"save_always" => true,
|
||||
),
|
||||
|
||||
array(
|
||||
"type" => "dropdown",
|
||||
"class" => "",
|
||||
"heading" => esc_html__("Marker icon source", "keydesign"),
|
||||
"param_name" => "image_source",
|
||||
"value" => array(
|
||||
"Media library" => "media_library",
|
||||
"External link" => "external_link",
|
||||
),
|
||||
"description" => esc_html__("Select image source.", "keydesign"),
|
||||
"save_always" => true,
|
||||
),
|
||||
|
||||
array(
|
||||
"type" => "attach_image",
|
||||
"heading" => esc_html__("Map marker image", "keydesign"),
|
||||
"param_name" => "map_icon",
|
||||
"description" => esc_html__("Upload map marker icon. Recommended image size: 50x50 (Width x Height).", "keydesign"),
|
||||
"dependency" => array(
|
||||
"element" => "image_source",
|
||||
"value" => array("media_library")
|
||||
),
|
||||
),
|
||||
|
||||
array(
|
||||
"type" => "textfield",
|
||||
"class" => "",
|
||||
"heading" => esc_html__("Marker image external source", "keydesign"),
|
||||
"param_name" => "ext_image",
|
||||
"value" => "",
|
||||
"description" => esc_html__("Enter image external link. Recommended image size: 50x50 (Width x Height).", "keydesign"),
|
||||
"dependency" => array(
|
||||
"element" => "image_source",
|
||||
"value" => array("external_link")
|
||||
),
|
||||
),
|
||||
|
||||
array(
|
||||
"type" => "textfield",
|
||||
"class" => "",
|
||||
"heading" => esc_html__("Map height", "keydesign"),
|
||||
"param_name" => "map_height",
|
||||
"value" => "",
|
||||
"description" => esc_html__("Enter map height in pixels. Default is 400px.", "keydesign")
|
||||
),
|
||||
|
||||
array(
|
||||
"type" => "dropdown",
|
||||
"class" => "",
|
||||
"heading" => esc_html__("Map info panel settings", "keydesign"),
|
||||
"param_name" => "map_business_panel_settings",
|
||||
"group" => esc_html__("Business info", "keydesign"),
|
||||
"value" => array(
|
||||
esc_html__( "Hide business info panel", "keydesign" ) => "hidden_info_panel",
|
||||
esc_html__( "Left aligned", "keydesign" ) => "left_info_panel",
|
||||
esc_html__( "Right aligned", "keydesign" ) => "right_info_panel",
|
||||
),
|
||||
"save_always" => true,
|
||||
),
|
||||
|
||||
array(
|
||||
"type" => "textfield",
|
||||
"class" => "",
|
||||
"heading" => esc_html__("Panel title", "keydesign"),
|
||||
"param_name" => "map_business_name",
|
||||
"value" => "",
|
||||
"group" => esc_html__("Business info", "keydesign"),
|
||||
"description" => esc_html__("Enter panel title.", "keydesign"),
|
||||
"dependency" => array(
|
||||
"element" => "map_business_panel_settings",
|
||||
"value" => array("left_info_panel", "right_info_panel")
|
||||
),
|
||||
),
|
||||
|
||||
array(
|
||||
"type" => "textfield",
|
||||
"class" => "",
|
||||
"heading" => esc_html__("Address", "keydesign"),
|
||||
"param_name" => "map_business_address",
|
||||
"value" => "",
|
||||
"group" => esc_html__("Business info", "keydesign"),
|
||||
"description" => esc_html__("Enter business address.", "keydesign"),
|
||||
"dependency" => array(
|
||||
"element" => "map_business_panel_settings",
|
||||
"value" => array("left_info_panel", "right_info_panel")
|
||||
),
|
||||
),
|
||||
|
||||
array(
|
||||
"type" => "textfield",
|
||||
"class" => "",
|
||||
"heading" => esc_html__("Email", "keydesign"),
|
||||
"param_name" => "map_business_email",
|
||||
"value" => "",
|
||||
"group" => esc_html__("Business info", "keydesign"),
|
||||
"description" => esc_html__("Enter business email.", "keydesign"),
|
||||
"dependency" => array(
|
||||
"element" => "map_business_panel_settings",
|
||||
"value" => array("left_info_panel", "right_info_panel")
|
||||
),
|
||||
),
|
||||
|
||||
array(
|
||||
"type" => "textfield",
|
||||
"class" => "",
|
||||
"heading" => esc_html__("Phone", "keydesign"),
|
||||
"param_name" => "map_business_phone",
|
||||
"value" => "",
|
||||
"group" => esc_html__("Business info", "keydesign"),
|
||||
"description" => esc_html__("Enter business phone.", "keydesign"),
|
||||
"dependency" => array(
|
||||
"element" => "map_business_panel_settings",
|
||||
"value" => array("left_info_panel", "right_info_panel")
|
||||
),
|
||||
),
|
||||
|
||||
array(
|
||||
"type" => "textfield",
|
||||
"class" => "",
|
||||
"heading" => esc_html__("Opening hours title", "keydesign"),
|
||||
"param_name" => "map_business_opening_hours",
|
||||
"value" => "",
|
||||
"group" => esc_html__("Business info", "keydesign"),
|
||||
"description" => esc_html__("Enter opening hours title text.", "keydesign"),
|
||||
"dependency" => array(
|
||||
"element" => "map_business_panel_settings",
|
||||
"value" => array("left_info_panel", "right_info_panel")
|
||||
),
|
||||
),
|
||||
|
||||
array(
|
||||
"type" => "param_group",
|
||||
"class" => "",
|
||||
"heading" => esc_html__("Opening hours schedule", "keydesign"),
|
||||
"value" => urlencode( json_encode ( array(
|
||||
array(
|
||||
"map_schedule_day" => "",
|
||||
"map_schedule_day_info" => "",
|
||||
)
|
||||
) ) ),
|
||||
"param_name" => "map_business_schedule",
|
||||
"group" => esc_html__("Business info", "keydesign"),
|
||||
"dependency" => array(
|
||||
"element" => "map_business_panel_settings",
|
||||
"value" => array("left_info_panel", "right_info_panel")
|
||||
),
|
||||
"params" => array(
|
||||
array(
|
||||
"type" => "textfield",
|
||||
"heading" => __("Day name","keydesign"),
|
||||
"param_name" => "map_schedule_day_name",
|
||||
"description" => "",
|
||||
"admin_label" => true,
|
||||
),
|
||||
array(
|
||||
"type" => "textarea",
|
||||
"heading" => __("Day opening/closing hours","keydesign"),
|
||||
"param_name" => "map_schedule_day_hours",
|
||||
"value" => "",
|
||||
"description" => "",
|
||||
),
|
||||
),
|
||||
|
||||
),
|
||||
|
||||
)
|
||||
));
|
||||
}
|
||||
}
|
||||
|
||||
// Render the element on front-end
|
||||
public function kd_map_shrt($atts, $content = null) {
|
||||
|
||||
|
||||
$api = 'https://maps.googleapis.com/maps/api/js';
|
||||
$redux_ThemeTek = get_option( 'redux_ThemeTek' );
|
||||
$map_key = $redux_ThemeTek['tek-google-api'];
|
||||
if($map_key != false) {
|
||||
$arr_params = array(
|
||||
'key' => $map_key
|
||||
);
|
||||
$api = esc_url( add_query_arg( $arr_params, $api ));
|
||||
}
|
||||
|
||||
if (isset($redux_ThemeTek['tek-google-api']) && $redux_ThemeTek['tek-google-api'] != '' ) {
|
||||
wp_enqueue_script("googleapis",$api,null,null,false);
|
||||
}
|
||||
|
||||
// Declare empty vars
|
||||
$output = $gmap_style_var = $business_data = $content_image = $map_img_array = '';
|
||||
|
||||
extract(shortcode_atts(array(
|
||||
'map_name' => '',
|
||||
'map_latitude' => '',
|
||||
'map_longitude' => '',
|
||||
'map_zoom' => '',
|
||||
'map_style' => '',
|
||||
'image_source' => '',
|
||||
'map_icon' => '',
|
||||
'ext_image' => '',
|
||||
'map_height' => '',
|
||||
'map_business_panel_settings' => '',
|
||||
'map_business_name' => '',
|
||||
'map_business_address' => '',
|
||||
'map_business_email' => '',
|
||||
'map_business_phone' => '',
|
||||
'map_business_opening_hours' => '',
|
||||
'map_business_schedule' => '',
|
||||
), $atts));
|
||||
|
||||
if ($image_source == 'external_link') {
|
||||
$content_image .= $ext_image;
|
||||
} else {
|
||||
$map_img_array = wp_get_attachment_image_src($map_icon, "large");
|
||||
$content_image = $map_img_array[0];
|
||||
}
|
||||
|
||||
switch($map_style){
|
||||
case 'gmap_style_grayscale':
|
||||
$gmap_style_var = 'var featureOpts = [
|
||||
{
|
||||
stylers: [
|
||||
{ "visibility": "on" },
|
||||
{ "weight": 1 },
|
||||
{ "saturation": -100 },
|
||||
{ "lightness": 2.2 },
|
||||
{ "gamma": 2.2 }
|
||||
]
|
||||
}, {
|
||||
featureType: "poi",
|
||||
stylers: [
|
||||
{ "visibility": "off" }
|
||||
]
|
||||
}
|
||||
];';
|
||||
break;
|
||||
|
||||
case 'gmap_style_normal':
|
||||
$gmap_style_var = 'var featureOpts = [
|
||||
{
|
||||
stylers: [
|
||||
{ "visibility": "on" },
|
||||
{ "weight": 1.1 },
|
||||
{ "saturation": 1 },
|
||||
{ "lightness": 1 },
|
||||
{ "gamma": 1 }
|
||||
]
|
||||
}
|
||||
];';
|
||||
break;
|
||||
}
|
||||
|
||||
$id = "kd".uniqid();
|
||||
|
||||
if (isset($redux_ThemeTek['tek-google-api']) && $redux_ThemeTek['tek-google-api'] != '' ) {
|
||||
$output .= '<script>
|
||||
|
||||
function initKdMap_'.$id.'() {
|
||||
var map_'.$id.';
|
||||
var gmap_location_'.$id.' = new google.maps.LatLng('.$map_latitude.', '.$map_longitude.');
|
||||
var GMAP_MODULE_'.$id.' = "customMap";
|
||||
'.$gmap_style_var.'
|
||||
var mapOptions = {
|
||||
zoom: '.$map_zoom.',
|
||||
center: gmap_location_'.$id.',
|
||||
scrollwheel: false,
|
||||
mapTypeControlOptions: {
|
||||
mapTypeIds: [google.maps.MapTypeId.ROADMAP, GMAP_MODULE_'.$id.']
|
||||
},
|
||||
mapTypeId: GMAP_MODULE_'.$id.'
|
||||
};
|
||||
map_'.$id.' = new google.maps.Map(document.getElementById("'.$id.'"), mapOptions);
|
||||
marker_'.$id.' = new google.maps.Marker({
|
||||
map: map_'.$id.',
|
||||
draggable: false,
|
||||
animation: google.maps.Animation.DROP,
|
||||
position: gmap_location_'.$id.',
|
||||
icon: "'.$content_image.'"
|
||||
});
|
||||
google.maps.event.addListener(marker_'.$id.', "click", function() {
|
||||
if (marker_'.$id.'.getAnimation() != null) {
|
||||
marker_'.$id.'.setAnimation(null);
|
||||
} else {
|
||||
marker_'.$id.'.setAnimation(google.maps.Animation.BOUNCE);
|
||||
}
|
||||
});
|
||||
var styledMapOptions = {
|
||||
name: "'.$map_name.'"
|
||||
};
|
||||
var customMapType_'.$id.' = new google.maps.StyledMapType(featureOpts, styledMapOptions);
|
||||
map_'.$id.'.mapTypes.set(GMAP_MODULE_'.$id.', customMapType_'.$id.');
|
||||
}
|
||||
jQuery(window).load(function() {
|
||||
initKdMap_'.$id.'();
|
||||
});
|
||||
</script>';
|
||||
} else {
|
||||
$output .= '<div class="kd-alertbox kd-contact-alertbox ab_info kd_map_alert">
|
||||
<div class="ab-icon"><i class="fa-question iconita"></i></div>
|
||||
<div class="ab-message"><p></p>
|
||||
<p>Google maps requires a valid API key in order to work.<br> You can add it in Dashboard > Ekko > Theme Options > Global Options. Generate a new API key from https://developers.google.com/maps</p></div>
|
||||
<a href="#" class="ab-close"><i class="fa-times iconita"></i></a>
|
||||
</div>';
|
||||
}
|
||||
|
||||
$output .= '<div class="contact-map-container '.$map_business_panel_settings.'" '.(!empty($map_height) ? 'style="height: '.$map_height.';"' : '').'>';
|
||||
if ($map_business_panel_settings != "hidden_info_panel") {
|
||||
$output .= '<div class="business-info-wrapper">
|
||||
<span class="fa fa-times toggle-map-info"></span>
|
||||
<div class="business-info-header">';
|
||||
if ($map_business_name != '') {
|
||||
$output .= '<h4>'.$map_business_name.'</h4>';
|
||||
}
|
||||
$output .= '<address>';
|
||||
if ($map_business_address != '') {
|
||||
$output .= '<span class="business-address-row"><i class="fa iconsmind-Map-Marker2"></i><span class="address-overflow">'.$map_business_address.'</span></span>';
|
||||
}
|
||||
if ($map_business_phone != '') {
|
||||
$output .= '<span class="business-phone-row"><i class="fa iconsmind-Telephone"></i>'.$map_business_phone.'</span>';
|
||||
}
|
||||
if ($map_business_email != '') {
|
||||
$output .= '<span class="business-email-row"><i class="fa iconsmind-Mail"></i><a href="mailto:'.$map_business_email.'">'.$map_business_email.'</a></span>';
|
||||
}
|
||||
$output .= '</address>
|
||||
</div>
|
||||
<div class="business-info-schedule">
|
||||
<h4>'.$map_business_opening_hours.'</h4>';
|
||||
$map_business_schedule = json_decode( urldecode( $map_business_schedule ), true );
|
||||
|
||||
if( isset( $map_business_schedule ) ) {
|
||||
foreach ( $map_business_schedule as $business_data ){
|
||||
$output .= '<div class="business-info-day">';
|
||||
if ( isset( $business_data["map_schedule_day_name"] ) ){
|
||||
$output .= '<span class="business-info-day-name">'.$business_data["map_schedule_day_name"].'</span>';
|
||||
}
|
||||
if ( isset( $business_data["map_schedule_day_hours"] ) ){
|
||||
$output .= '<span class="business-info-day-hours">'.$business_data["map_schedule_day_hours"].'</span>';
|
||||
}
|
||||
$output .= '</div>';
|
||||
}
|
||||
}
|
||||
|
||||
$output .= '</div>
|
||||
</div>';
|
||||
}
|
||||
$output .= '<div id="'.$id.'" class="kd_map" '.(!empty($map_height) ? 'style="height: '.$map_height.';"' : '').'></div>
|
||||
|
||||
</div>';
|
||||
|
||||
return $output;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (class_exists('KD_ELEM_MAP')) {
|
||||
$KD_ELEM_MAP = new KD_ELEM_MAP;
|
||||
}
|
||||
?>
|
||||
Reference in New Issue
Block a user