| @@ -1,6 +1,7 @@ | ||
| 1 | -jQuery(document).ready(function () { | |
| 2 | - | |
| 1 | +/* global ol, eventpost_params */ | |
| 2 | +jQuery( window ).load(function() { | |
| 3 | + | |
| 3 | 4 | if(typeof ol !== 'undefined'){ |
| 4 | 5 | ep_maps = []; |
| 5 | 6 | ep_vectorSources = []; |
| 6 | 7 | ep_pop_elements = []; |
| @@ -8,9 +9,13 @@ | ||
| 8 | 9 | ep_icons = []; |
| 9 | 10 | ep_proj_source = new ol.proj.Projection({code: 'EPSG:4326'}); |
| 10 | 11 | ep_proj_destination = new ol.proj.Projection({code: 'EPSG:900913'}); |
| 11 | 12 | ep_interactions = eventpost_params.map_interactions; |
| 13 | + ep_retina = (window.retina || window.devicePixelRatio > 1.5); | |
| 12 | 14 | |
| 15 | + function ep_is_retina(map_id){ | |
| 16 | + return (eventpost_params.maptiles[map_id]['urls_retina'] && ep_retina); | |
| 17 | + } | |
| 13 | 18 | |
| 14 | 19 | /* ------------------------------------------------------------------------------------------------------------------ |
| 15 | 20 | * Single Location link |
| 16 | 21 | * show it in a tiny map instead of following the link |
| @@ -20,9 +25,8 @@ | ||
| 20 | 25 | var lat = jQuery(this).parent().data('latitude'); |
| 21 | 26 | var lon = jQuery(this).parent().data('longitude'); |
| 22 | 27 | var marker = jQuery(this).parent().data('marker'); |
| 23 | 28 | var id = jQuery(this).parent().data('id'); |
| 24 | - var zoom = 16; | |
| 25 | 29 | var map_id = 'event_map' + id; |
| 26 | 30 | var position = new ol.proj.transform([lon, lat], ep_proj_source, ep_proj_destination); |
| 27 | 31 | if (jQuery('#' + map_id).length === 0) { |
| 28 | 32 | jQuery(this).parent().append('<div id="' + map_id + '-wrap"><div id="' + map_id + '" class="event_map"></div></div>'); |
| @@ -37,9 +41,11 @@ | ||
| 37 | 41 | target: map_id, |
| 38 | 42 | layers: [ |
| 39 | 43 | new ol.layer.Tile({ |
| 40 | 44 | source: new ol.source.XYZ({ |
| 41 | - urls: eventpost_params.maptiles[eventpost_params.defaulttile]['urls'] | |
| 45 | + urls: (ep_is_retina(eventpost_params.defaulttile) ? eventpost_params.maptiles[eventpost_params.defaulttile]['urls_retina'] : eventpost_params.maptiles[eventpost_params.defaulttile]['urls']), | |
| 46 | + tilePixelRatio: (ep_is_retina(eventpost_params.defaulttile) ? 2 : 1), | |
| 47 | + attribution: eventpost_params.maptiles[eventpost_params.defaulttile]['attribution'] | |
| 42 | 48 | }) |
| 43 | 49 | }), |
| 44 | 50 | new ol.layer.Vector({ |
| 45 | 51 | source: ep_vectorSources[map_id] |
| @@ -46,17 +52,18 @@ | ||
| 46 | 52 | }) |
| 47 | 53 | ], |
| 48 | 54 | view: new ol.View({ |
| 49 | 55 | center: position, |
| 50 | - zoom: 12 | |
| 56 | + zoom: eventpost_params.zoom | |
| 51 | 57 | }) |
| 52 | 58 | }); |
| 59 | + | |
| 53 | 60 | ep_maps[map_id].addControl(new ol.control.Zoom()); |
| 54 | 61 | var ep_feature = new ol.Feature({ |
| 55 | 62 | geometry: new ol.geom.Point(position) |
| 56 | 63 | }); |
| 57 | 64 | |
| 58 | - if (ep_icons[marker] == undefined) { | |
| 65 | + if (ep_icons[marker] === undefined) { | |
| 59 | 66 | ep_icons[marker] = new ol.style.Style({ |
| 60 | 67 | image: new ol.style.Icon(({ |
| 61 | 68 | anchor: [16, 32], |
| 62 | 69 | anchorXUnits: 'pixels', |
| @@ -84,23 +91,24 @@ | ||
| 84 | 91 | * List of events |
| 85 | 92 | * Making a big map with all available locations |
| 86 | 93 | */ |
| 87 | 94 | // Parse all list wich have to be displayed as a map |
| 95 | + | |
| 88 | 96 | jQuery('.event_geolist').each(function () { |
| 89 | - jQuery(this).children('.event_item').hide(); | |
| 90 | 97 | var geo_id = jQuery(this).attr('id'); |
| 91 | 98 | var map_id = 'event_map_all' + geo_id; |
| 92 | 99 | var mark_id = 'event_markersall' + geo_id; |
| 93 | 100 | var width = jQuery(this).data('width'); |
| 94 | 101 | var height = jQuery(this).data('height'); |
| 102 | + var zoom = jQuery(this).data('zoom'); | |
| 95 | 103 | var maptile = jQuery(this).data('tile'); |
| 96 | - if(maptile==''){ | |
| 104 | + if(maptile===''){ | |
| 97 | 105 | maptile = eventpost_params.defaulttile; |
| 98 | 106 | } |
| 99 | 107 | var disabled_integrations = jQuery(this).data('disabled-interactions'); |
| 100 | 108 | |
| 101 | 109 | // Add html elements for map and popup |
| 102 | - jQuery(this).append('<div id="' + map_id + '" class="event_map map"></div><div id="' + map_id + '-popup" class="event_map_popup"></div>'); | |
| 110 | + jQuery(this).addClass('event_geolist_parsed').append('<div id="' + map_id + '" class="event_map map"></div><div id="' + map_id + '-popup" class="event_map_popup"></div>'); | |
| 103 | 111 | css = { |
| 104 | 112 | margin: 'auto', |
| 105 | 113 | clear: 'both' |
| 106 | 114 | }; |
| @@ -113,9 +121,9 @@ | ||
| 113 | 121 | // Create a layer for markers |
| 114 | 122 | ep_vectorSources[map_id] = new ol.source.Vector(); |
| 115 | 123 | |
| 116 | 124 | // Create a popup object |
| 117 | - ep_pop_elements[map_id] = jQuery('#' + map_id + '-popup'); | |
| 125 | + ep_pop_elements[map_id] = document.getElementById(map_id + '-popup'); | |
| 118 | 126 | ep_popups[map_id] = new ol.Overlay({ |
| 119 | 127 | element: ep_pop_elements[map_id], |
| 120 | 128 | positioning: 'bottom-center', |
| 121 | 129 | stopEvent: false |
| @@ -126,9 +134,11 @@ | ||
| 126 | 134 | target: map_id, |
| 127 | 135 | layers: [ |
| 128 | 136 | new ol.layer.Tile({ |
| 129 | 137 | source: new ol.source.XYZ({ |
| 130 | - urls: eventpost_params.maptiles[maptile]['urls'] | |
| 138 | + urls: (ep_is_retina(maptile) ? eventpost_params.maptiles[maptile]['urls_retina'] : eventpost_params.maptiles[maptile]['urls']), | |
| 139 | + tilePixelRatio: (ep_is_retina(maptile) ? 2 : 1), | |
| 140 | + attribution: eventpost_params.maptiles[maptile]['attribution'] | |
| 131 | 141 | }) |
| 132 | 142 | }), |
| 133 | 143 | new ol.layer.Vector({ |
| 134 | 144 | source: ep_vectorSources[map_id] |
| @@ -135,14 +145,14 @@ | ||
| 135 | 145 | }) |
| 136 | 146 | ], |
| 137 | 147 | view: new ol.View({ |
| 138 | 148 | center: [0, 0], |
| 139 | - zoom: 12, | |
| 149 | + zoom: isNaN(zoom) ? 12 : zoom, | |
| 140 | 150 | maxZoom: 18 |
| 141 | 151 | }), |
| 142 | 152 | overlays: [ep_popups[map_id]] |
| 143 | 153 | }; |
| 144 | - | |
| 154 | + | |
| 145 | 155 | ep_maps[map_id] = new ol.Map(map_settings); |
| 146 | 156 | ep_maps[map_id].addControl(new ol.control.ZoomSlider()); |
| 147 | 157 | |
| 148 | 158 | //Add action for each markers |
| @@ -151,9 +161,9 @@ | ||
| 151 | 161 | function (feature, layer) { |
| 152 | 162 | return feature; |
| 153 | 163 | }); |
| 154 | 164 | if (feature) { |
| 155 | - ep_pop_elements[map_id].hide(0); | |
| 165 | + jQuery(ep_pop_elements[map_id]).hide(0); | |
| 156 | 166 | view = ep_maps[map_id].getView(); |
| 157 | 167 | var geometry = feature.getGeometry(); |
| 158 | 168 | var coord = geometry.getCoordinates(); |
| 159 | 169 | var pan = ol.animation.pan({ |
| @@ -164,18 +174,18 @@ | ||
| 164 | 174 | view.setCenter(coord); |
| 165 | 175 | ep_popups[map_id].setPosition(coord); |
| 166 | 176 | |
| 167 | 177 | html_output = '<a href="' + feature.get('link') + '">' + |
| 168 | - (feature.get('thumbnail')!=''&&feature.get('thumbnail')!=undefined?'<img src="'+feature.get('thumbnail')+'">':'')+ | |
| 178 | + (feature.get('thumbnail')!==''&&feature.get('thumbnail')!==undefined?'<img src="'+feature.get('thumbnail')+'">':'')+ | |
| 169 | 179 | '<strong>' + feature.get('name') + '</strong><br>' + |
| 170 | 180 | '<time>' + feature.get('date') + '</time><br>' + |
| 171 | 181 | '<address>' + feature.get('address') + '</address>' + |
| 172 | - (feature.get('desc')!=''&&feature.get('desc')!=undefined?'<p>'+feature.get('desc')+'</p>':'')+ | |
| 182 | + (feature.get('desc')!==''&&feature.get('desc')!==undefined?'<p>'+feature.get('desc')+'</p>':'')+ | |
| 173 | 183 | '</a>'; |
| 174 | - ep_pop_elements[map_id].delay(500).html(html_output).show(500); | |
| 184 | + jQuery(ep_pop_elements[map_id]).delay(500).html(html_output).show(500); | |
| 175 | 185 | |
| 176 | 186 | } else { |
| 177 | - ep_pop_elements[map_id].hide(200); | |
| 187 | + jQuery(ep_pop_elements[map_id]).hide(200); | |
| 178 | 188 | } |
| 179 | 189 | }); |
| 180 | 190 | |
| 181 | 191 | // Parse all items to create markers and put them on the map |
| @@ -181,9 +191,9 @@ | ||
| 181 | 191 | // Parse all items to create markers and put them on the map |
| 182 | 192 | jQuery(this).find('address').each(function () { |
| 183 | 193 | var lat = parseFloat(jQuery(this).data('latitude')); |
| 184 | 194 | var lon = parseFloat(jQuery(this).data('longitude')); |
| 185 | - if (lat != undefined && lon != undefined) { | |
| 195 | + if (lat !== undefined && lon !== undefined) { | |
| 186 | 196 | var item = jQuery(this).parent().parent(); |
| 187 | 197 | var marker = jQuery(this).data('marker'); |
| 188 | 198 | var id = jQuery(this).data('id'); |
| 189 | 199 | coords = new ol.proj.transform([lon, lat], ep_proj_source, ep_proj_destination); |
| @@ -201,9 +211,9 @@ | ||
| 201 | 211 | } |
| 202 | 212 | var ep_feature = new ol.Feature(obj); |
| 203 | 213 | |
| 204 | 214 | |
| 205 | - if (ep_icons[marker] == undefined) { | |
| 215 | + if (ep_icons[marker] === undefined) { | |
| 206 | 216 | ep_icons[marker] = new ol.style.Style({ |
| 207 | 217 | image: new ol.style.Icon(({ |
| 208 | 218 | anchor: [16, 32], |
| 209 | 219 | anchorXUnits: 'pixels', |
| @@ -219,10 +229,14 @@ | ||
| 219 | 229 | }); |
| 220 | 230 | |
| 221 | 231 | //Center the map to show all markers |
| 222 | 232 | ep_maps[map_id].getView().fit(ep_vectorSources[map_id].getExtent(), ep_maps[map_id].getSize()); |
| 233 | + if(!isNaN(zoom) && zoom !== '' && zoom>0){ | |
| 234 | + ep_maps[map_id].getView().setZoom(zoom); | |
| 235 | + } | |
| 223 | 236 | |
| 224 | 237 | m_i=0; |
| 238 | + var int_key; | |
| 225 | 239 | for(int_key in ep_interactions){ |
| 226 | 240 | if(disabled_integrations.indexOf(int_key+',')>-1){ |
| 227 | 241 | ep_maps[map_id].getInteractions().getArray()[m_i].setActive(false); |
| 228 | 242 | } |
| @@ -227,12 +241,15 @@ | ||
| 227 | 241 | ep_maps[map_id].getInteractions().getArray()[m_i].setActive(false); |
| 228 | 242 | } |
| 229 | 243 | m_i++; |
| 230 | 244 | } |
| 231 | - | |
| 232 | 245 | |
| 246 | + | |
| 233 | 247 | }); |
| 234 | 248 | } |
| 249 | + else{ | |
| 250 | + jQuery('.event_geolist').hide(); | |
| 251 | + } | |
| 235 | 252 | |
| 236 | 253 | |
| 237 | 254 | /* ------------------------------------------------------------------------------------------------------------------ |
| 238 | 255 | * Calendar Widget |
| @@ -238,20 +255,20 @@ | ||
| 238 | 255 | * Calendar Widget |
| 239 | 256 | */ |
| 240 | 257 | function eventpost_cal_links() { |
| 241 | 258 | jQuery('.eventpost_cal_bt').click(function () { |
| 242 | - var calcont = jQuery(this).parent().parent().parent().parent().parent(); | |
| 259 | + var calcont = jQuery(this).parents('.eventpost_calendar'); | |
| 243 | 260 | jQuery.get( |
| 244 | - eventpost_params.ajaxurl, | |
| 261 | + eventpost_params.ajaxurl, | |
| 245 | 262 | { |
| 246 | - action: 'EventPostCalendar', | |
| 247 | - date: jQuery(this).data('date'), | |
| 248 | - cat: calcont.data('cat'), | |
| 249 | - mf: calcont.data('mf'), | |
| 250 | - dp: calcont.data('dp'), | |
| 251 | - color: calcont.data('color'), | |
| 252 | - thumbnail: calcont.data('thumbnail'), | |
| 253 | - }, | |
| 263 | + action: 'EventPostCalendar', | |
| 264 | + date: jQuery(this).data('date'), | |
| 265 | + cat: calcont.data('cat'), | |
| 266 | + mf: calcont.data('mf'), | |
| 267 | + dp: calcont.data('dp'), | |
| 268 | + color: calcont.data('color'), | |
| 269 | + thumbnail: calcont.data('thumbnail') | |
| 270 | + }, | |
| 254 | 271 | function (data) { |
| 255 | 272 | calcont.html(data); |
| 256 | 273 | eventpost_cal_links(); |
| 257 | 274 | }); |
| @@ -257,23 +274,23 @@ | ||
| 257 | 274 | }); |
| 258 | 275 | } |
| 259 | 276 | ); |
| 260 | 277 | jQuery('.eventpost_cal_link').click(function () { |
| 261 | - var calcont = jQuery(this).parent().parent().parent().parent().parent(); | |
| 262 | - calcont.find('.eventpost_cal_list').fadeOut(function () { | |
| 278 | + var calcont = jQuery(this).parents('.eventpost_calendar'); | |
| 279 | + jQuery('.eventpost_cal_list', calcont).fadeOut(function () { | |
| 263 | 280 | jQuery(this).remove(); |
| 264 | 281 | }); |
| 265 | 282 | jQuery.get( |
| 266 | - eventpost_params.ajaxurl, | |
| 283 | + eventpost_params.ajaxurl, | |
| 267 | 284 | { |
| 268 | - action: 'EventPostCalendarDate', | |
| 269 | - date: jQuery(this).data('date'), | |
| 270 | - cat: calcont.data('cat'), | |
| 271 | - mf: calcont.data('mf'), | |
| 285 | + action: 'EventPostCalendarDate', | |
| 286 | + date: jQuery(this).data('date'), | |
| 287 | + cat: calcont.data('cat'), | |
| 288 | + mf: calcont.data('mf'), | |
| 272 | 289 | dp: calcont.data('dp'), |
| 273 | - color: calcont.data('color'), | |
| 274 | - thumbnail: calcont.data('thumbnail'), | |
| 275 | - }, | |
| 290 | + color: calcont.data('color'), | |
| 291 | + thumbnail: calcont.data('thumbnail') | |
| 292 | + }, | |
| 276 | 293 | function (data) { |
| 277 | 294 | calcont.append('<div class="eventpost_cal_list"><button class="eventpost_cal_close">x</button>' + data + '</div>'); |
| 278 | 295 | calcont.find('.eventpost_cal_list').hide(1).fadeIn(500); |
| 279 | 296 | calcont.find('.eventpost_cal_close').click(function () { |
| @@ -286,18 +303,18 @@ | ||
| 286 | 303 | jQuery('.eventpost_calendar').each(function () { |
| 287 | 304 | var calcont = jQuery(this); |
| 288 | 305 | calcont.html('<img src="' + eventpost_params.imgpath + 'cal-loader.gif" class="eventpost_cal_loader"/>'); |
| 289 | 306 | jQuery.get( |
| 290 | - eventpost_params.ajaxurl, | |
| 307 | + eventpost_params.ajaxurl, | |
| 291 | 308 | { |
| 292 | - action: 'EventPostCalendar', | |
| 293 | - date: jQuery(this).data('date'), | |
| 294 | - cat: jQuery(this).data('cat'), | |
| 295 | - mf: jQuery(this).data('mf'), | |
| 309 | + action: 'EventPostCalendar', | |
| 310 | + date: jQuery(this).data('date'), | |
| 311 | + cat: jQuery(this).data('cat'), | |
| 312 | + mf: jQuery(this).data('mf'), | |
| 296 | 313 | dp: jQuery(this).data('dp'), |
| 297 | - color: jQuery(this).data('color'), | |
| 298 | - thumbnail: jQuery(this).data('thumbnail'), | |
| 299 | - }, | |
| 314 | + color: jQuery(this).data('color'), | |
| 315 | + thumbnail: jQuery(this).data('thumbnail') | |
| 316 | + }, | |
| 300 | 317 | function (data) { |
| 301 | 318 | calcont.html(data); |
| 302 | 319 | eventpost_cal_links(); |
| 303 | 320 | }); |
