phcthemes_web_theme_pack 0.1.0

data/app/assets/javascripts/themes/zoner/custom-maps/custom-map.js

@@ -0,0 +1,289 @@
+var mapStyles = [{featureType:'water',elementType:'all',stylers:[{hue:'#d7ebef'},{saturation:-5},{lightness:54},{visibility:'on'}]},{featureType:'landscape',elementType:'all',stylers:[{hue:'#eceae6'},{saturation:-49},{lightness:22},{visibility:'on'}]},{featureType:'poi.park',elementType:'all',stylers:[{hue:'#dddbd7'},{saturation:-81},{lightness:34},{visibility:'on'}]},{featureType:'poi.medical',elementType:'all',stylers:[{hue:'#dddbd7'},{saturation:-80},{lightness:-2},{visibility:'on'}]},{featureType:'poi.school',elementType:'all',stylers:[{hue:'#c8c6c3'},{saturation:-91},{lightness:-7},{visibility:'on'}]},{featureType:'landscape.natural',elementType:'all',stylers:[{hue:'#c8c6c3'},{saturation:-71},{lightness:-18},{visibility:'on'}]},{featureType:'road.highway',elementType:'all',stylers:[{hue:'#dddbd7'},{saturation:-92},{lightness:60},{visibility:'on'}]},{featureType:'poi',elementType:'all',stylers:[{hue:'#dddbd7'},{saturation:-81},{lightness:34},{visibility:'on'}]},{featureType:'road.arterial',elementType:'all',stylers:[{hue:'#dddbd7'},{saturation:-92},{lightness:37},{visibility:'on'}]},{featureType:'transit',elementType:'geometry',stylers:[{hue:'#c8c6c3'},{saturation:4},{lightness:10},{visibility:'on'}]}];
+
+$.ajaxSetup({
+    cache: true
+});
+
+////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+// Google Map - Homepage
+////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+function createHomepageGoogleMap(_latitude,_longitude){
+    setMapHeight();
+    if( document.getElementById('map') != null ){
+        $.getScript("assets/js/locations.js", function(){
+            var map = new google.maps.Map(document.getElementById('map'), {
+                zoom: 14,
+                scrollwheel: false,
+                center: new google.maps.LatLng(_latitude, _longitude),
+                mapTypeId: google.maps.MapTypeId.ROADMAP,
+                styles: mapStyles
+            });
+            var i;
+            var newMarkers = [];
+            for (i = 0; i < locations.length; i++) {
+                var pictureLabel = document.createElement("img");
+                pictureLabel.src = locations[i][7];
+                var boxText = document.createElement("div");
+                infoboxOptions = {
+                    content: boxText,
+                    disableAutoPan: false,
+                    //maxWidth: 150,
+                    pixelOffset: new google.maps.Size(-100, 0),
+                    zIndex: null,
+                    alignBottom: true,
+                    boxClass: "infobox-wrapper",
+                    enableEventPropagation: true,
+                    closeBoxMargin: "0px 0px -8px 0px",
+                    closeBoxURL: "assets/img/close-btn.png",
+                    infoBoxClearance: new google.maps.Size(1, 1)
+                };
+                var marker = new MarkerWithLabel({
+                    title: locations[i][0],
+                    position: new google.maps.LatLng(locations[i][3], locations[i][4]),
+                    map: map,
+                    icon: 'assets/img/marker.png',
+                    labelContent: pictureLabel,
+                    labelAnchor: new google.maps.Point(50, 0),
+                    labelClass: "marker-style"
+                });
+                newMarkers.push(marker);
+                boxText.innerHTML =
+                    '<div class="infobox-inner">' +
+                        '<a href="' + locations[i][5] + '">' +
+                        '<div class="infobox-image" style="position: relative">' +
+                        '<img src="' + locations[i][6] + '">' + '<div><span class="infobox-price">' + locations[i][2] + '</span></div>' +
+                        '</div>' +
+                        '</a>' +
+                        '<div class="infobox-description">' +
+                        '<div class="infobox-title"><a href="'+ locations[i][5] +'">' + locations[i][0] + '</a></div>' +
+                        '<div class="infobox-location">' + locations[i][1] + '</div>' +
+                        '</div>' +
+                        '</div>';
+                //Define the infobox
+                newMarkers[i].infobox = new InfoBox(infoboxOptions);
+                google.maps.event.addListener(marker, 'click', (function(marker, i) {
+                    return function() {
+                        for (h = 0; h < newMarkers.length; h++) {
+                            newMarkers[h].infobox.close();
+                        }
+                        newMarkers[i].infobox.open(map, this);
+                    }
+                })(marker, i));
+
+            }
+            var clusterStyles = [
+                {
+                    url: 'assets/img/cluster.png',
+                    height: 37,
+                    width: 37
+                }
+            ];
+            var markerCluster = new MarkerClusterer(map, newMarkers, {styles: clusterStyles, maxZoom: 15});
+            $('body').addClass('loaded');
+            setTimeout(function() {
+                $('body').removeClass('has-fullscreen-map');
+            }, 1000);
+            $('#map').removeClass('fade-map');
+
+            //  Dynamically show/hide markers --------------------------------------------------------------
+
+            google.maps.event.addListener(map, 'idle', function() {
+
+                for (var i=0; i < locations.length; i++) {
+                    if ( map.getBounds().contains(newMarkers[i].getPosition()) ){
+                        // newMarkers[i].setVisible(true); // <- Uncomment this line to use dynamic displaying of markers
+
+                        //newMarkers[i].setMap(map);
+                        //markerCluster.setMap(map);
+                    } else {
+                        // newMarkers[i].setVisible(false); // <- Uncomment this line to use dynamic displaying of markers
+
+                        //newMarkers[i].setMap(null);
+                        //markerCluster.setMap(null);
+                    }
+                }
+            });
+
+            // Function which set marker to the user position
+            function success(position) {
+                var center = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
+                map.panTo(center);
+                $('#map').removeClass('fade-map');
+            }
+
+        });
+        // Enable Geo Location on button click
+        $('.geo-location').on("click", function() {
+            if (navigator.geolocation) {
+                $('#map').addClass('fade-map');
+                navigator.geolocation.getCurrentPosition(success);
+            } else {
+                error('Geo Location is not supported');
+            }
+        });
+    }
+}
+
+// Function which set marker to the user position
+function success(position) {
+    createHomepageGoogleMap(position.coords.latitude, position.coords.longitude);
+}
+
+////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+// Google Map - Property Detail
+////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+function initMap(propertyId) {
+    $.getScript("assets/js/locations.js", function(){
+        var subtractPosition = 0;
+        var mapWrapper = $('#property-detail-map.float');
+
+        if (document.documentElement.clientWidth > 1200) {
+            subtractPosition = 0.013;
+        }
+        if (document.documentElement.clientWidth < 1199) {
+            subtractPosition = 0.006;
+        }
+        if (document.documentElement.clientWidth < 979) {
+            subtractPosition = 0.001;
+        }
+        if (document.documentElement.clientWidth < 767) {
+            subtractPosition = 0;
+        }
+
+        var mapCenter = new google.maps.LatLng(locations[propertyId][3],locations[propertyId][4]);
+
+        if ( $("#property-detail-map").hasClass("float") ) {
+            mapCenter = new google.maps.LatLng(locations[propertyId][3],locations[propertyId][4] - subtractPosition);
+            mapWrapper.css('width', mapWrapper.width() + mapWrapper.offset().left )
+        }
+
+        var mapOptions = {
+            zoom: 15,
+            center: mapCenter,
+            disableDefaultUI: false,
+            scrollwheel: false,
+            styles: mapStyles
+        };
+        var mapElement = document.getElementById('property-detail-map');
+        var map = new google.maps.Map(mapElement, mapOptions);
+
+        var pictureLabel = document.createElement("img");
+        pictureLabel.src = locations[propertyId][7];
+        var markerPosition = new google.maps.LatLng(locations[propertyId][3],locations[propertyId][4]);
+        var marker = new MarkerWithLabel({
+            position: markerPosition,
+            map: map,
+            icon: 'assets/img/marker.png',
+            labelContent: pictureLabel,
+            labelAnchor: new google.maps.Point(50, 0),
+            labelClass: "marker-style"
+        });
+    });
+}
+
+////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+// Google Map - Contact
+////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+function contactUsMap(){
+    var mapCenter = new google.maps.LatLng(_latitude,_longitude);
+    var mapOptions = {
+        zoom: 15,
+        center: mapCenter,
+        disableDefaultUI: false,
+        scrollwheel: false,
+        styles: mapStyles
+    };
+    var mapElement = document.getElementById('contact-map');
+    var map = new google.maps.Map(mapElement, mapOptions);
+
+    var marker = new MarkerWithLabel({
+        position: mapCenter,
+        map: map,
+        icon: 'assets/img/marker.png',
+        //labelContent: pictureLabel,
+        labelAnchor: new google.maps.Point(50, 0),
+        labelClass: "marker-style"
+    });
+}
+
+////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+// OpenStreetMap - Homepage
+////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+function createHomepageOSM(_latitude,_longitude){
+    setMapHeight();
+    if( document.getElementById('map') != null ){
+        $.getScript("assets/js/locations.js", function(){
+            var map = L.map('map', {
+                center: [_latitude,_longitude],
+                zoom: 14,
+                scrollWheelZoom: false
+            });
+            L.tileLayer('http://openmapsurfer.uni-hd.de/tiles/roadsg/x={x}&y={y}&z={z}', {
+                //L.tileLayer('http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
+                //subdomains: '0123',
+                attribution: 'Imagery from <a href="http://giscience.uni-hd.de/">GIScience Research Group @ University of Heidelberg</a> &mdash; Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
+            }).addTo(map);
+            var markers = L.markerClusterGroup({
+                showCoverageOnHover: false
+            });
+            for (var i = 0; i < locations.length; i++) {
+                var _icon = L.divIcon({
+                    html: '<img src="' + locations[i][7] +'">',
+                    iconSize:     [40, 48],
+                    iconAnchor:   [20, 48],
+                    popupAnchor:  [0, -48]
+                });
+                var title = locations[i][0];
+                var marker = L.marker(new L.LatLng(locations[i][3],locations[i][4]), {
+                    title: title,
+                    icon: _icon
+                });
+                marker.bindPopup(
+                    '<div class="property">' +
+                        '<a href="' + locations[i][5] + '">' +
+                            '<div class="property-image">' +
+                                '<img src="' + locations[i][6] + '">' +
+                            '</div>' +
+                            '<div class="overlay">' +
+                                '<div class="info">' +
+                                    '<div class="tag price"> ' + locations[i][2] + '</div>' +
+                                    '<h3>' + locations[i][0] + '</h3>' +
+                                    '<figure>' + locations[i][1] + '</figure>' +
+                                '</div>' +
+                            '</div>' +
+                        '</a>' +
+                    '</div>'
+                );
+                markers.addLayer(marker);
+            }
+
+            map.addLayer(markers);
+            map.on('locationfound', onLocationFound);
+
+            function locateUser() {
+                $('#map').addClass('fade-map');
+                map.locate({setView : true})
+            }
+
+            function onLocationFound(){
+                $('#map').removeClass('fade-map');
+            }
+
+            $('.geo-location').on("click", function() {
+                locateUser();
+            });
+
+            $('body').addClass('loaded');
+            setTimeout(function() {
+                $('body').removeClass('has-fullscreen-map');
+            }, 1000);
+            $('#map').removeClass('fade-map');
+        });
+
+    }
+}
+

data/app/assets/javascripts/themes/zoner/draggable/draggable.js

@@ -0,0 +1,196 @@
+/**
+ * draggable - Class allows to make any element draggable
+ * 
+ * Written by
+ * Egor Khmelev (hmelyoff@gmail.com)
+ *
+ * Licensed under the MIT (MIT-LICENSE.txt).
+ *
+ * @author Egor Khmelev
+ * @version 0.1.0-BETA ($Id$)
+ * 
+ **/
+
+(function( $ ){
+
+  function Draggable(){
+  	this._init.apply( this, arguments );
+  };
+
+	Draggable.prototype.oninit = function(){
+	  
+	};
+	
+	Draggable.prototype.events = function(){
+	  
+	};
+	
+	Draggable.prototype.onmousedown = function(){
+		this.ptr.css({ position: "absolute" });
+	};
+	
+	Draggable.prototype.onmousemove = function( evt, x, y ){
+		this.ptr.css({ left: x, top: y });
+	};
+	
+	Draggable.prototype.onmouseup = function(){
+	  
+	};
+
+	Draggable.prototype.isDefault = {
+		drag: false,
+		clicked: false,
+		toclick: true,
+		mouseup: false
+	};
+
+	Draggable.prototype._init = function(){
+		if( arguments.length > 0 ){
+			this.ptr = $(arguments[0]);
+			this.outer = $(".draggable-outer");
+
+			this.is = {};
+			$.extend( this.is, this.isDefault );
+
+			var _offset = this.ptr.offset();
+			this.d = {
+				left: _offset.left,
+				top: _offset.top,
+				width: this.ptr.width(),
+				height: this.ptr.height()
+			};
+
+			this.oninit.apply( this, arguments );
+
+			this._events();
+		}
+	};
+	
+	Draggable.prototype._getPageCoords = function( event ){
+	  if( event.targetTouches && event.targetTouches[0] ){
+	    return { x: event.targetTouches[0].pageX, y: event.targetTouches[0].pageY };
+	  } else
+	    return { x: event.pageX, y: event.pageY };
+	};
+	
+	Draggable.prototype._bindEvent = function( ptr, eventType, handler ){
+	  var self = this;
+
+	  if( this.supportTouches_ )
+      ptr.get(0).addEventListener( this.events_[ eventType ], handler, false );
+	  
+	  else
+	    ptr.bind( this.events_[ eventType ], handler );
+	};
+	
+	Draggable.prototype._events = function(){
+		var self = this;
+
+    this.supportTouches_ = 'ontouchend' in document;
+    this.events_ = {
+      "click": this.supportTouches_ ? "touchstart" : "click",
+      "down": this.supportTouches_ ? "touchstart" : "mousedown",
+      "move": this.supportTouches_ ? "touchmove" : "mousemove",
+      "up"  : this.supportTouches_ ? "touchend" : "mouseup"
+    };
+
+    this._bindEvent( $( document ), "move", function( event ){
+			if( self.is.drag ){
+        event.stopPropagation();
+        event.preventDefault();
+				self._mousemove( event );
+			}
+		});
+    this._bindEvent( $( document ), "down", function( event ){
+			if( self.is.drag ){
+        event.stopPropagation();
+        event.preventDefault();
+			}
+		});
+    this._bindEvent( $( document ), "up", function( event ){
+			self._mouseup( event );
+		});
+		
+    this._bindEvent( this.ptr, "down", function( event ){
+			self._mousedown( event );
+			return false;
+		});
+    this._bindEvent( this.ptr, "up", function( event ){
+			self._mouseup( event );
+		});
+		
+		this.ptr.find("a")
+			.click(function(){
+				self.is.clicked = true;
+
+				if( !self.is.toclick ){
+					self.is.toclick = true;
+					return false;
+				}
+			})
+			.mousedown(function( event ){
+				self._mousedown( event );
+				return false;
+			});
+
+		this.events();
+	};
+	
+	Draggable.prototype._mousedown = function( evt ){
+		this.is.drag = true;
+		this.is.clicked = false;
+		this.is.mouseup = false;
+
+		var _offset = this.ptr.offset();
+		var coords = this._getPageCoords( evt );
+		this.cx = coords.x - _offset.left;
+		this.cy = coords.y - _offset.top;
+
+		$.extend(this.d, {
+			left: _offset.left,
+			top: _offset.top,
+			width: this.ptr.width(),
+			height: this.ptr.height()
+		});
+
+		if( this.outer && this.outer.get(0) ){
+			this.outer.css({ height: Math.max(this.outer.height(), $(document.body).height()), overflow: "hidden" });
+		}
+
+		this.onmousedown( evt );
+	};
+	
+	Draggable.prototype._mousemove = function( evt ){
+		this.is.toclick = false;
+		var coords = this._getPageCoords( evt );
+		this.onmousemove( evt, coords.x - this.cx, coords.y - this.cy );
+	};
+	
+	Draggable.prototype._mouseup = function( evt ){
+		var oThis = this;
+
+		if( this.is.drag ){
+			this.is.drag = false;
+
+			if( this.outer && this.outer.get(0) ){
+
+				if( $.browser.mozilla ){
+					this.outer.css({ overflow: "hidden" });
+				} else {
+					this.outer.css({ overflow: "visible" });
+				}
+
+        if( $.browser.msie && $.browser.version == '6.0' ){
+         this.outer.css({ height: "100%" });
+        } else {
+         this.outer.css({ height: "auto" });
+        }  
+			}
+
+			this.onmouseup( evt );
+		}
+	};
+	
+	window.Draggable = Draggable;
+
+})( jQuery );