Feature map

discojuice/css/discojuice.css

@@ -78,7 +78,9 @@ div.discojuice > div.top {
 
 	background: #fff;
 	border-bottom: 1px solid #bbb;
-
+}
+
+div.discojuice div.top:first-child {
 	-webkit-border-top-left-radius: 15px;
 	-webkit-border-top-right-radius: 15px;
 	-moz-border-radius-topleft: 15px;
@@ -253,8 +255,12 @@ div.discojuice input.discojuice_search {
 	width: 100%;
 }
 
-
-
+/*
+ * Section for jqvmap
+ */
+body .jqvmap-label {
+	z-index:160;
+}
 
 
 

discojuice/discojuice.control.js

@@ -32,7 +32,26 @@ DiscoJuice.Control = {
 
 	// Waiter Notification Callback Registry
 	"wncr": [],
-
+
+	// Show world map
+	"map": false,
+
+	// These two settings form the section that appears above the map
+	"mapTitle": 'Select your country',
+	"mapSubtitle": 'to filter available providers',
+
+	// Color for the countries that feature available providers(s)
+    "mapValidColor" : '#3582AC',
+
+    // Map div height (in px). If null, map is automatically adjusted.
+    "mapHeight": null,
+
+    // While initializing the map you can provide parameters to change
+    // its look (view JQVMap plugin documentation for available options)
+	"mapOptions": {
+		"hoverColor":'#006499',
+		"selectedColor":'#EF4F54'
+	},
 
 	"registerCallback": function (callback) {
 		this.wncr.push(callback);
@@ -170,6 +189,11 @@ DiscoJuice.Control = {
 			that.filterCountrySetup();
 		}
 
+		var map = that.parent.Utils.options.get('map', that.map);
+
+		if (map) {
+			that.mapSetup();
+		}
 
 		that.readCookie(); // Syncronous
 		that.readExtensionResponse(); // Reading response set by the Browser extension
@@ -562,7 +586,8 @@ DiscoJuice.Control = {
 			}
 
 		}
-
+
+		this.refreshMap();
 		this.ui.refreshData(someleft, this.maxhits, hits);
 	},
 
@@ -991,6 +1016,9 @@ DiscoJuice.Control = {
 		this.ui.popup.find("select.discojuice_filterCountrySelect").val('all');
 	},
 
+	"setCategories": function (code) {
+        this.ui.popup.find("select.discojuice_filterCountrySelect").val(code);
+    },
 
 	"getCategories": function () {
 		var filters = {};
@@ -1017,7 +1045,92 @@ DiscoJuice.Control = {
 	"resetTerm": function() {
 		//this.ui.popup.find("select.discojuice_filterTypeSelect").val()
 		this.ui.popup.find("input.discojuice_search").val('');
-	}
+	},
+
+	"mapSetup": function () {
+		var that = this;
+
+		this.ui.popup.prepend('<div class="map"></div>');
 
+		var mapTitle = this.parent.Utils.options.get('mapTitle', this.mapTitle);
+		var mapSubtitle = this.parent.Utils.options.get('mapSubtitle', this.mapSubtitle);
 
+		// optimized ration for world map
+		var defaultMapHeight = 0.66* this.ui.popup.find('.map').width() + 'px';
+		if (this.mapHeight){
+			defaultMapHeight = this.mapHeight;
+		}
+		var mapHeight = this.parent.Utils.options.get('mapHeight', defaultMapHeight);
+
+		this.ui.popup.find('.map').html('<div class="vmap" style="width: 100%; height:' + mapHeight + '"></div>');
+
+		var mtext ='<div class="top">' +
+			'<p class="discojuice_maintitle">' + mapTitle  +  '</p>' +
+			'<p class="discojuice_subtitle">'+ mapSubtitle + '</p>'+
+			'</div>' ;
+		this.ui.popup.find('.map').before(mtext);
+
+		var mapOptions = {
+			colors: that.getCountriesColors(),
+			onRegionOver: function(e,code,region){
+				if (jQuery.inArray(code, that.getValidCountries())<0){
+					e.preventDefault();
+ 					return false;
+				}
+			},
+			onRegionClick: function(e,code,region){
+				if (jQuery.inArray(code, that.getValidCountries())<0){
+					e.preventDefault();
+					return false;
+				} else {
+					that.setCategories(code.toUpperCase());
+					that.ui.popup.find("select").trigger('change');
+				}
+			}
+		};
+		$.extend( true, mapOptions, this.mapOptions, that.parent.Utils.options.get('mapOptions',{}));
+		this.ui.popup.find('.vmap').vectorMap(mapOptions);
+
+ 	},
+
+	// Returns an array of  valid countries codes in lowercase
+	"getValidCountries": function(){
+		var validCountries = {};
+		for (key in this.data) {
+			if (this.data[key].country && this.data[key].country !== '_all_') {
+				validCountries[this.data[key].country] = true;
+			}
+		}
+		var validCountries = $.map(validCountries, function(val,key) { return key.toLowerCase();});
+		return validCountries
+	},
+
+	// Returns an object whose keys are the valid countries codes in
+	// lowercase and values are the valid map color
+	"getCountriesColors": function(){
+		var countriesColors = {}
+		var mapValidColor = this.parent.Utils.options.get('mapValidColor', this.mapValidColor);
+
+		$.each(this.getValidCountries(), function(key, value) {
+			countriesColors[value] = mapValidColor;
+		});
+		return countriesColors
+    },
+
+	"colorSelectedCountry": function(code){
+		var selected = {}
+		var mapSelectedColor = this.parent.Utils.options.get('mapSelectedColor', this.mapOptions.selectedColor);
+		selected[code.toLowerCase()] = mapSelectedColor;
+		this.ui.popup.find('.vmap').vectorMap('set', 'colors', selected);
+	},
+
+    "refreshMap": function () {
+		var that = this;
+		var map = that.parent.Utils.options.get('map', that.map);
+		if (map){
+			var colors = this.getCountriesColors();
+			this.ui.popup.find('.vmap').vectorMap('set', 'colors', colors);
+			this.colorSelectedCountry(that.ui.popup.find("select.discojuice_filterCountrySelect").val());
+		}
+	}
 };

docs/map.txt

@@ -0,0 +1,75 @@
+Using JQVMap with DiscoJuice
+============================
+
+You can add a map to your DiscoJuice standalone page. 
+
+The map uses the jquery plugin JQVMap https://github.com/manifestinteractive/jqvmap.
+Countries with available providers are highlighted for a visual overview and 
+act as a filter for the providers when they are clicked.
+
+The map is by default hidden.
+To activate it, you must set the map property of the djc object to  true 
+as shown:
+
+`djc.map = true`
+
+To make the plugin work properly, you need to include the JQVMap JavaScript and 
+CSS files to your html page.
+
+The prequisite files are:
+
+* jquery.vmap.js
+* jquery.world_en.js ( or other if you plan on using other area. For more info on 
+	available regions check  [JQvmap maps](https://github.com/manifestinteractive/jqvmap/tree/stable/jqvmap/maps) )
+* vmap.css
+
+and can be found inside the jqvmap/ folder of DiscoJuice or  downloaded from 
+[JQvmap] (https://github.com/manifestinteractive/jqvmap) 
+
+Note: The jquery.vmap.js used in DiscoJuice is the stable 1.0 version.
+
+User interface customization
+----------------------------
+
+After you have activated the map, you can choose to use the following settings 
+to configure the map and its area.
+
+These settings are available:
+
+mapTitle
+: String. Default : `Select your country`
+
+mapSubtitle
+: String. Default : `to filter available providers`
+
+	These two settings form the section that appears above the map.
+
+mapValidColor
+: Sting. Default : `#3582AC`
+
+	Color fot the countries that feature available providers(s).
+
+mapHeight
+: String. Default: null
+
+	Map div height. If null, map is automatically adjusted.
+
+
+All these settings can be initialised as in the following example:
+
+`djc.mapHeight = "200px";`
+
+
+Once you have your map up and running you can further customize the looks of
+your map.
+
+You can check the JQVMap documentation section for available options.
+Bellow is an example of how you can use these options to style your map:
+
+`djc.mapOptions = {
+	'color': 'blue',
+	'backgroundColor': '#f00',
+}`
+
+
+

jqvmap/css/jqvmap.css

@@ -0,0 +1,56 @@
+/*!
+ * jQVMap Version 1.0 
+ *
+ * http://jqvmap.com
+ *
+ * Copyright 2012, Peter Schmalfeldt <[email protected]>
+ * Licensed under the MIT license.
+ *
+ * Fork Me @ https://github.com/manifestinteractive/jqvmap
+ */
+.jqvmap-label
+{
+	position: absolute;
+	display: none;
+	-webkit-border-radius: 3px;
+	-moz-border-radius: 3px;
+	border-radius: 3px;
+	background: #292929;
+	color: white;
+	font-family: sans-serif, Verdana;
+	font-size: smaller;
+	padding: 3px;
+}
+.jqvmap-zoomin, .jqvmap-zoomout
+{
+	position: absolute;
+	left: 10px;
+	-webkit-border-radius: 3px;
+	-moz-border-radius: 3px;
+	border-radius: 3px;
+	background: #000000;
+	padding: 3px;
+	color: white;
+	width: 10px;
+	height: 10px;
+	cursor: pointer;
+	line-height: 10px;
+	text-align: center;
+}
+.jqvmap-zoomin
+{
+	top: 10px;
+}
+.jqvmap-zoomout
+{
+	top: 30px;
+}
+.jqvmap-region
+{
+  cursor: pointer;
+}
+.jqvmap-ajax_response
+{
+  width: 100%;
+  height: 500px;
+}