662 lines
26 KiB
JavaScript
Executable File
662 lines
26 KiB
JavaScript
Executable File
;(function ($, settings) {
|
|
"use strict";
|
|
|
|
if (window.Opalestate === undefined) {
|
|
window.Opalestate = {};
|
|
}
|
|
|
|
/**
|
|
* GooglemapSearch
|
|
*/
|
|
var GooglemapSingle = Opalestate.GooglemapSingle = function ( data , id ) {
|
|
|
|
/**
|
|
* Create Google Map In Single Property Only
|
|
*/
|
|
var initializePropertyMap = function ( data , id ){
|
|
|
|
var propertyMarkerInfo = data;
|
|
var enable = true ;
|
|
var url = propertyMarkerInfo.icon;
|
|
var size = new google.maps.Size( 42, 57 );
|
|
|
|
|
|
var allMarkers = [];
|
|
|
|
var setMapOnAll = function (markers, map) {
|
|
for (var i = 0; i < markers.length; i++) {
|
|
markers[i].setMap( map );
|
|
}
|
|
}
|
|
// retina
|
|
if( window.devicePixelRatio > 1.5 ) {
|
|
if ( propertyMarkerInfo.retinaIcon ) {
|
|
url = propertyMarkerInfo.retinaIcon;
|
|
size = new google.maps.Size( 83, 113 );
|
|
}
|
|
}
|
|
|
|
var propertyLocation = new google.maps.LatLng( propertyMarkerInfo.latitude, propertyMarkerInfo.longitude );
|
|
var propertyMapOptions = {
|
|
center: propertyLocation,
|
|
zoom: 15,
|
|
mapTypeId: google.maps.MapTypeId.ROADMAP,
|
|
scrollwheel: false
|
|
};
|
|
var propertyMap = new google.maps.Map( document.getElementById( id ), propertyMapOptions );
|
|
|
|
/**
|
|
*
|
|
*/
|
|
|
|
var createMarker = function ( position, icon ) {
|
|
|
|
var image = {
|
|
url: icon,
|
|
size: size,
|
|
scaledSize: new google.maps.Size( 32, 57 ),
|
|
origin: new google.maps.Point( 0, 0 ),
|
|
anchor: new google.maps.Point( 21, 56 )
|
|
};
|
|
|
|
var _marker = new google.maps.Marker({
|
|
map: propertyMap,
|
|
position: position,
|
|
icon: image
|
|
});
|
|
return _marker;
|
|
}
|
|
|
|
|
|
var infowindow = new google.maps.InfoWindow();
|
|
|
|
createMarker( propertyLocation, url );
|
|
|
|
/**
|
|
* Places near with actived types
|
|
*/
|
|
if( enable ){
|
|
var $navs = $("#"+id).parent().find( '.property-search-places' );
|
|
$(' .btn-map-search', $navs ).unbind('click').bind( 'click', function(){
|
|
var service = new google.maps.places.PlacesService( propertyMap ) ;
|
|
var type = $(this).data('type');
|
|
var $this = $(this).parent();
|
|
|
|
var icon = {
|
|
url: opalesateJS.mapiconurl+$(this).data('icon'),
|
|
scaledSize: new google.maps.Size( 28, 28 ),
|
|
anchor: new google.maps.Point( 21, 16 ),
|
|
origin: new google.maps.Point( 0, 0 )
|
|
};
|
|
|
|
if( !allMarkers[type] || allMarkers[type].length <= 0 ){
|
|
var markers = [] ;
|
|
var bounds = propertyMap.getBounds();
|
|
|
|
var $this = $(this);
|
|
|
|
service.nearbySearch({
|
|
location: propertyLocation,
|
|
radius: 2000,
|
|
bounds: bounds,
|
|
type: type
|
|
}, callbackNearBy);
|
|
|
|
function callbackNearBy(results, status) {
|
|
if (status === google.maps.places.PlacesServiceStatus.OK) {
|
|
for (var i = 0; i < results.length; i++) {
|
|
createMarkerNearBy(results[i]);
|
|
}
|
|
|
|
$('.nearby-counter',$this).remove();
|
|
$('span',$this).append( $('<em class="nearby-counter">'+markers.length+'</em>') );
|
|
allMarkers[type] = markers;
|
|
}
|
|
}
|
|
|
|
function abc(){
|
|
if (status === google.maps.places.PlacesServiceStatus.OK) {
|
|
for (var i = 0; i < results.length; i++) {
|
|
var place = results[i];
|
|
var marker = new google.maps.Marker({
|
|
map: propertyMap,
|
|
position: place.geometry.location,
|
|
icon: icon,
|
|
visible: true
|
|
});
|
|
|
|
marker.setMap( propertyMap );
|
|
|
|
google.maps.event.addListener(marker, 'click', function() {
|
|
|
|
infowindow.setContent( place.name );
|
|
|
|
infowindow.open(propertyMap, this);
|
|
});
|
|
|
|
markers.push( marker );
|
|
}
|
|
$('.nearby-counter',$this).remove();
|
|
$('span',$this).append( $('<em class="nearby-counter">'+markers.length+'</em>') );
|
|
allMarkers[type] = markers;
|
|
//console.log( place );
|
|
}
|
|
}
|
|
|
|
function createMarkerNearBy(place) {
|
|
var placeLoc = place.geometry.location;
|
|
var marker = new google.maps.Marker({
|
|
map: propertyMap,
|
|
position: place.geometry.location,
|
|
icon: icon,
|
|
visible: true
|
|
});
|
|
|
|
marker.setMap( propertyMap );
|
|
|
|
google.maps.event.addListener(marker, 'click', function() {
|
|
infowindow.setContent(place.name);
|
|
infowindow.open(propertyMap, this);
|
|
});
|
|
|
|
markers.push( marker );
|
|
}
|
|
}else {
|
|
for( var i=0 ; i < allMarkers[type].length; i++ ){
|
|
allMarkers[type][i].setMap( null );
|
|
}
|
|
allMarkers[type] = [];
|
|
}
|
|
|
|
$(this).toggleClass('active');
|
|
} );
|
|
}
|
|
}
|
|
initializePropertyMap( data , id );
|
|
}
|
|
|
|
var GoogleMapSearch = Opalestate.GooglemapSingle = function ( data ) {
|
|
var initializePropertiesMap = function ( properties ) {
|
|
// Properties Array
|
|
var mapOptions = {
|
|
zoom: 12,
|
|
maxZoom: 16,
|
|
scrollwheel: false,
|
|
mapTypeId: google.maps.MapTypeId.ROADMAP,
|
|
panControl: false,
|
|
zoomControl: true,
|
|
mapTypeControl: false,
|
|
scaleControl: false,
|
|
streetViewControl: true,
|
|
overviewMapControl: false,
|
|
zoomControlOptions: {
|
|
style: google.maps.ZoomControlStyle.SMALL,
|
|
position: google.maps.ControlPosition.RIGHT_TOP
|
|
},
|
|
streetViewControlOptions: {
|
|
position: google.maps.ControlPosition.RIGHT_TOP
|
|
}
|
|
};
|
|
|
|
var map = new google.maps.Map( document.getElementById( "opalestate-map-preview" ), mapOptions );
|
|
|
|
var bounds = new google.maps.LatLngBounds();
|
|
|
|
// Loop to generate marker and infowindow based on properties array
|
|
var markers = new Array();
|
|
|
|
for ( var i=0; i < properties.length; i++ ) {
|
|
|
|
// console.log( properties[i] );
|
|
var url = properties[i].icon;
|
|
var size = new google.maps.Size( 42, 57 );
|
|
if( window.devicePixelRatio > 1.5 ) {
|
|
if ( properties[i].retinaIcon ) {
|
|
url = properties[i].retinaIcon;
|
|
size = new google.maps.Size( 83, 113 );
|
|
}
|
|
}
|
|
|
|
var image = {
|
|
url: url,
|
|
size: size,
|
|
scaledSize: new google.maps.Size( 30, 51 ),
|
|
origin: new google.maps.Point( 0, 0 ),
|
|
anchor: new google.maps.Point( 21, 56 )
|
|
};
|
|
|
|
markers[i] = new google.maps.Marker({
|
|
position: new google.maps.LatLng( properties[i].lat, properties[i].lng ),
|
|
map: map,
|
|
icon: image,
|
|
title: properties[i].title,
|
|
animation: google.maps.Animation.DROP,
|
|
visible: true
|
|
});
|
|
|
|
bounds.extend( markers[i].getPosition() );
|
|
|
|
var boxText = document.createElement( "div" );
|
|
var pricelabel = '';
|
|
|
|
if( properties[i].pricelabel ){
|
|
pricelabel = ' / ' + properties[i].pricelabel;
|
|
}
|
|
|
|
boxText.className = 'map-info-preview media';
|
|
function opalestate_get_property_icon( $key ) {
|
|
var $icon = $key;
|
|
switch ( $key ) {
|
|
case 'builtyear':
|
|
$icon = 'fas fa-calendar';
|
|
break;
|
|
case 'parking':
|
|
$icon = 'fas fa-car';
|
|
break;
|
|
case 'bedrooms':
|
|
$icon = 'fas fa-bed';
|
|
break;
|
|
case 'bathrooms':
|
|
$icon = 'fas fa-bath';
|
|
break;
|
|
case 'plotsize':
|
|
$icon = 'fas fa-map';
|
|
break;
|
|
case 'areasize':
|
|
$icon = 'fas fa-arrows-alt';
|
|
break;
|
|
case 'orientation':
|
|
$icon = 'fas fa-compass';
|
|
break;
|
|
case 'livingrooms':
|
|
$icon = 'fas fa-tv';
|
|
break;
|
|
case 'kitchens':
|
|
$icon = 'fas fa-utensils';
|
|
break;
|
|
case 'amountrooms':
|
|
$icon = 'fas fa-building';
|
|
break;
|
|
default:
|
|
$icon = $key;
|
|
break;
|
|
}
|
|
|
|
return $icon;
|
|
}
|
|
|
|
var meta = '<ul class="list-inline property-meta-list">';
|
|
if( properties[i].metas ){
|
|
for ( var x in properties[i].metas ){
|
|
var m = properties[i].metas[x];
|
|
meta += '<li><i class="icon-property-'+x+' ' + opalestate_get_property_icon(x) + '"></i>' + m.value +'<span' +
|
|
' class="label-property">' + m.label + '</span></li>'
|
|
}
|
|
}
|
|
meta += '</ul>';
|
|
|
|
boxText.innerHTML = '<div class="media-top"><a class="thumb-link" href="' + properties[i].url + '">' +
|
|
'<img class="prop-thumb" src="' + properties[i].thumb + '" alt="' + properties[i].title + '"/>' +
|
|
'</a>'+ properties[i].status +'</div>' +
|
|
'<div class="info-container media-body">' +
|
|
'<h5 class="prop-title"><a class="title-link" href="' + properties[i].url + '">' + properties[i].title +
|
|
'</a></h5><p class="prop-address"><em>' + properties[i].address + '</em></p><p><span class="price text-primary">' + properties[i].pricehtml + pricelabel +
|
|
'</span></p>'+meta+'</div>'+'<div class="arrow-down"></div>';
|
|
|
|
var myOptions = {
|
|
content: boxText,
|
|
disableAutoPan: true,
|
|
maxWidth: 0,
|
|
alignBottom: true,
|
|
pixelOffset: new google.maps.Size( -122, -48 ),
|
|
zIndex: null,
|
|
closeBoxMargin: "0 0 -16px -16px",
|
|
closeBoxURL: opalesateJS.mapiconurl+"close.png",
|
|
infoBoxClearance: new google.maps.Size( 1, 1 ),
|
|
isHidden: false,
|
|
pane: "floatPane",
|
|
enableEventPropagation: false
|
|
};
|
|
|
|
var ib = new InfoBox( myOptions );
|
|
|
|
attachInfoBoxToMarker( map, markers[i], ib, i );
|
|
}
|
|
|
|
var last = null ;
|
|
|
|
$('body').delegate( '[data-related="map"]', 'mouseenter', function(){
|
|
if( $(this).hasClass('map-active') ){
|
|
return true;
|
|
}
|
|
|
|
var i = $(this).data( 'id' );
|
|
$( '[data-related="map"]' ).removeClass( 'map-active' );
|
|
$(this).addClass( 'active' );
|
|
map.setZoom( 65536 );// alert( scale );
|
|
|
|
if( markers[i] ){
|
|
var marker = markers[i];
|
|
google.maps.event.trigger( markers[i], 'click' );
|
|
|
|
var scale = Math.pow( 2, map.getZoom() );
|
|
var offsety = ( (100/scale) || 0 );
|
|
var projection = map.getProjection();
|
|
var markerPosition = marker.getPosition();
|
|
var markerScreenPosition = projection.fromLatLngToPoint( markerPosition );
|
|
var pointHalfScreenAbove = new google.maps.Point( markerScreenPosition.x, markerScreenPosition.y - offsety );
|
|
var aboveMarkerLatLng = projection.fromPointToLatLng( pointHalfScreenAbove );
|
|
map.setZoom( scale );
|
|
map.setCenter( aboveMarkerLatLng );
|
|
|
|
}
|
|
return false;
|
|
});
|
|
|
|
map.fitBounds(bounds);
|
|
|
|
/* Marker Clusters */
|
|
var markerClustererOptions = {
|
|
ignoreHidden: true,
|
|
maxZoom: 14,
|
|
styles: [{
|
|
textColor: '#000000',
|
|
url: opalesateJS.mapiconurl+"cluster-icon.png",
|
|
height: 51,
|
|
width: 30
|
|
}]
|
|
};
|
|
|
|
var markerClusterer = new MarkerClusterer( map, markers, markerClustererOptions );
|
|
|
|
|
|
|
|
function attachInfoBoxToMarker( map, marker, infoBox , i ){
|
|
|
|
google.maps.event.addListener( marker, 'click', function(){
|
|
|
|
if( $( '[data-related="map"]' ).filter('[data-id="'+i+'"]').length > 0 ){
|
|
var $m = $( '[data-related="map"]' ).filter('[data-id="'+i+'"]');
|
|
$( '[data-related="map"]' ).removeClass( 'map-active' );
|
|
$m.addClass('map-active');
|
|
}
|
|
|
|
if( last != null ){
|
|
last.close();
|
|
}
|
|
|
|
var scale = Math.pow( 2, map.getZoom() );
|
|
var offsety = ( (100/scale) || 0 );
|
|
var projection = map.getProjection();
|
|
var markerPosition = marker.getPosition();
|
|
var markerScreenPosition = projection.fromLatLngToPoint( markerPosition );
|
|
var pointHalfScreenAbove = new google.maps.Point( markerScreenPosition.x, markerScreenPosition.y - offsety );
|
|
var aboveMarkerLatLng = projection.fromPointToLatLng( pointHalfScreenAbove );
|
|
map.setCenter( aboveMarkerLatLng );
|
|
infoBox.open( map, marker );
|
|
last = infoBox;
|
|
});
|
|
}
|
|
}
|
|
initializePropertiesMap( data );
|
|
}
|
|
|
|
/////
|
|
$(document).ready(function () {
|
|
|
|
function initialize_property_street_view( data , id ){
|
|
|
|
var propertyMarkerInfo = data;
|
|
|
|
var propertyLocation = new google.maps.LatLng( propertyMarkerInfo.latitude, propertyMarkerInfo.longitude );
|
|
|
|
/**
|
|
* Street View
|
|
*/
|
|
var panoramaOptions = {
|
|
position: propertyLocation,
|
|
pov: {
|
|
heading: 34,
|
|
pitch: 10
|
|
}
|
|
};
|
|
var panorama = new google.maps.StreetViewPanorama( document.getElementById( id ), panoramaOptions);
|
|
google.maps.event.trigger(panorama, 'resize');
|
|
}
|
|
|
|
$( ".property-preview-map").each( function(){
|
|
new GooglemapSingle( $(this).data() , $(this).attr('id') );
|
|
} );
|
|
|
|
$( ".tab-google-street-view-btn") .click( function(){
|
|
$( ".property-preview-street-map").hide();
|
|
$( ".property-preview-street-map").each( function(){
|
|
|
|
var d = $(this).data() ;
|
|
var i = $(this).attr('id') ;
|
|
|
|
initialize_property_street_view( d , i );
|
|
} );
|
|
$( ".property-preview-street-map").show( 100 );
|
|
} );
|
|
///
|
|
// auto set height for split google map
|
|
$( '.split-maps-container' ).each( function() {
|
|
$( "#opalestate-map-preview ").height( $(window).height() );
|
|
} );
|
|
})
|
|
|
|
|
|
$(document).ready(function () {
|
|
|
|
// search
|
|
// show google maps
|
|
// update google maps
|
|
var updatePreviewGoogleMap = function( url ) {
|
|
if( $('#opalestate-map-preview').length > 0 ) {
|
|
$.ajax({
|
|
type: 'GET',
|
|
dataType: 'json',
|
|
url: opalesateJS.ajaxurl,
|
|
data: url,
|
|
success: function(data) {
|
|
new GoogleMapSearch( data );
|
|
}
|
|
});
|
|
}
|
|
};
|
|
if( $('#opalestate-map-preview').length > 0 || $( '.opalesate-properties-results').length > 0 ) {
|
|
var currentLocation = location.search.substr(1)+"&action=opalestate_ajx_get_properties&paged="+$('#opalestate-map-preview').data('page');
|
|
updatePreviewGoogleMap( currentLocation );
|
|
}
|
|
// update results
|
|
function updatePropertiesResults( data ){
|
|
$( '.opalesate-properties-results').append( $('<div class="opalestate-loading"></div>') );
|
|
$.ajax({
|
|
type: "GET",
|
|
url: opalesateJS.ajaxurl,
|
|
data: data+"&action=opalestate_render_get_properties" ,
|
|
success: function( response ) {
|
|
if( response ){
|
|
|
|
$( '.opalesate-properties-results' ).html( response );
|
|
}
|
|
$( '.opalesate-properties-results .opalestate-loading').remove();
|
|
$('.opalestate-sortable select').select2( {
|
|
width: '100%',
|
|
minimumResultsForSearch: -1
|
|
} );
|
|
}
|
|
});
|
|
}
|
|
|
|
function updatePropertiesByParseringHtml( newurl ){
|
|
$( '.opalesate-properties-results .opalesate-archive-bottom').append( $('<div class="opalestate-loading"></div>') );
|
|
$.ajax({
|
|
type: "GET",
|
|
url: newurl,
|
|
dataType : 'html',
|
|
cache: false,
|
|
success: function( data ) {
|
|
if( data ){
|
|
$( '.opalesate-properties-results' ).html( $(data).find('.opalesate-properties-results').html() );
|
|
$('.opalestate-sortable select').select2( {
|
|
width: '100%',
|
|
minimumResultsForSearch: -1
|
|
} );
|
|
}
|
|
// $( '.opalesate-properties-results .opalestate-loading').remove();
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
$('form.opalestate-search-form').submit( function ( ){
|
|
if( $('#opalestate-map-preview').length > 0 ) {
|
|
if( $(".opalesate-properties-results") && $(".opalesate-properties-results").data('mode') == 'html' ) {
|
|
var $form = $(this);
|
|
if (history.pushState) {
|
|
var ps = $form.serialize();
|
|
var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?'+ ps;
|
|
window.history.pushState({path:newurl},'',newurl);
|
|
updatePropertiesByParseringHtml( newurl );
|
|
}
|
|
|
|
} else {
|
|
updatePropertiesResults( $(this).serialize() );
|
|
}
|
|
|
|
return false;
|
|
}
|
|
return true;
|
|
} );
|
|
|
|
|
|
$( '.ajax-search-form form.opalestate-search-form' ).each( function(){
|
|
var $form = $(this);
|
|
$( '.ajax-change select', this ).change( function(){
|
|
if (history.pushState) {
|
|
var ps = $form.serialize();
|
|
var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?'+ ps;
|
|
window.history.pushState({path:newurl},'',newurl);
|
|
}
|
|
$form.submit();
|
|
return false;
|
|
} );
|
|
} );
|
|
|
|
// // Sortable Change // //
|
|
$("body").delegate( '#opalestate-sortable-form select', 'change', function(){
|
|
|
|
var ps = '';
|
|
if( $('form.opalestate-search-form').length > 0 ) {
|
|
var $form =$('form.opalestate-search-form');
|
|
var ps = $form.serialize()+"&opalsortable="+$(this).val()+"&display="+$(".display-mode a.active").data('mode');
|
|
}
|
|
|
|
if( $(".opalesate-properties-results") && ps ) {
|
|
if (history.pushState) {
|
|
var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?'+ ps;
|
|
window.history.pushState({path:newurl},'',newurl);
|
|
updatePropertiesByParseringHtml( newurl );
|
|
}
|
|
} else {
|
|
$("#opalestate-sortable-form").submit();
|
|
}
|
|
} );
|
|
// display mode
|
|
$( "body" ).delegate( ".display-mode a", 'click', function() {
|
|
if( $(".opalesate-properties-results").length > 0 ){
|
|
var newurl = $(this).attr('href');
|
|
window.history.pushState({path:newurl},'',newurl);
|
|
updatePropertiesByParseringHtml( newurl );
|
|
return false;
|
|
}
|
|
} );
|
|
// check any estate search form is enabled /////////////////
|
|
if( $('#opalestate-map-preview').length > 0 ) {
|
|
$( "body" ).delegate( "form.opalestate-search-form select", "change", function () {
|
|
var params = $( "form.opalestate-search-form" ).serialize();
|
|
var url = "action=opalestate_ajx_get_properties&"+params;
|
|
|
|
updatePreviewGoogleMap( url );
|
|
$('form.opalestate-search-form').submit();
|
|
return true;
|
|
} );
|
|
|
|
$( "body" ).delegate( "form.opalestate-search-form input", "change", function () {
|
|
|
|
if( $(this).hasClass("ranger-geo_radius") ){
|
|
return false;
|
|
}
|
|
|
|
var params = $( "form.opalestate-search-form" ).serialize();
|
|
var url = "action=opalestate_ajx_get_properties&"+params;
|
|
updatePreviewGoogleMap( url );
|
|
$('form.opalestate-search-form').submit();
|
|
} );
|
|
}
|
|
/////////// ///////
|
|
|
|
|
|
} );
|
|
})(jQuery);
|
|
|
|
//// //////
|
|
(function( $ ) {
|
|
'use strict';
|
|
|
|
|
|
$(document).ready(function () {
|
|
$( '.opalestate-search-opal-map' ).each( function() {
|
|
initializeMapAdressSearch( $(this) );
|
|
});
|
|
} );
|
|
|
|
|
|
function initializeMapAdressSearch( mapInstance ) {
|
|
var searchInput = mapInstance.find( '.opal-map-search' );
|
|
|
|
// Search
|
|
var autocomplete = new google.maps.places.Autocomplete( searchInput[0] );
|
|
// autocomplete.bindTo( 'bounds', map );
|
|
var latitude = mapInstance.find( '.opal-map-latitude' );
|
|
var longitude = mapInstance.find( '.opal-map-longitude' );
|
|
|
|
google.maps.event.addListener( autocomplete, 'place_changed', function() {
|
|
|
|
var place = autocomplete.getPlace();
|
|
|
|
|
|
if ( ! place.geometry ) {
|
|
return;
|
|
}
|
|
|
|
if( place.geometry.location.lat() ){
|
|
$(mapInstance).addClass("active");
|
|
} else {
|
|
$(mapInstance).removeClass("active");
|
|
}
|
|
|
|
latitude.val( place.geometry.location.lat() );
|
|
longitude.val( place.geometry.location.lng() );
|
|
});
|
|
|
|
$( ".map-remove", mapInstance ).click( function() {
|
|
latitude.val( "" );
|
|
longitude.val( "" );
|
|
searchInput.val("");
|
|
latitude.change();
|
|
} );
|
|
|
|
$( searchInput ).keypress( function( event ) {
|
|
if ( 13 === event.keyCode ) {
|
|
event.preventDefault();
|
|
}
|
|
});
|
|
|
|
|
|
}
|
|
|
|
})( jQuery );
|