From 391b0b732459c4791f6e779b26f4b7fb7b2dff34 Mon Sep 17 00:00:00 2001 From: ejb Date: Fri, 17 Jul 2015 16:00:31 +0100 Subject: [PATCH] Removed jQuery dependency --- Readme.md | 7 ++++++- bower.json | 2 +- dist/pinpoint.js | 32 ++++++++++++++++++++++---------- dist/pinpoint.min.js | 2 +- src/js/pinpoint.js | 32 ++++++++++++++++++++++---------- test/pinpoint.test.js | 36 ++++++++++++++++++++++++++++++++++++ 6 files changed, 88 insertions(+), 23 deletions(-) diff --git a/Readme.md b/Readme.md index 7bebe90..3075a8f 100644 --- a/Readme.md +++ b/Readme.md @@ -13,7 +13,7 @@ A JavaScript library for creating beautifully simple maps in seconds, developed ## Quickstart -Include `pinpoint.js`, `pinpoint.css` and jQuery on your page. +Include `pinpoint.js`, `pinpoint.css` and [Leaflet](http://leafletjs.com/download.html) (both the JS and CSS) on your page. In terms of HTML, just a single div is needed: @@ -148,6 +148,11 @@ Tests are carried out with [QUnit](http://qunitjs.com). To run tests, either ope ## Changelog + +v1.1.0 (July 17, 2015) + +- Removed jQuery dependency + v1.0.1 (July 9, 2015) - Fix bug when no head or deck diff --git a/bower.json b/bower.json index 3c01b20..4328124 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "pinpoint", - "version": "1.0.1", + "version": "1.1.0", "authors": [ "ejb " ], diff --git a/dist/pinpoint.js b/dist/pinpoint.js index daff9c9..517b5c8 100644 --- a/dist/pinpoint.js +++ b/dist/pinpoint.js @@ -49,9 +49,9 @@ function Pinpoint(opts){ if (typeof Iframe !== 'undefined') { var fm = Iframe.init(); } - if ($(window).smartresize) { - $(window).smartresize( this.onWindowResize.bind(that) ); - } + this.onResize(function(){ + that.setAspectRatio(); + }); } Pinpoint.prototype.addElements = function(){ @@ -72,6 +72,11 @@ Pinpoint.prototype.addElements = function(){ Pinpoint.prototype.setAspectRatio = function(){ + if( !this.element.querySelector('.map-inner') ){ + return; + } + + var aspectRatios = { "tall": 1.2, "square": 1, @@ -80,7 +85,10 @@ Pinpoint.prototype.setAspectRatio = function(){ var aspectRatio = aspectRatios[this.opts['aspect-ratio']]; var newHeight = this.element.querySelector('.map-inner').offsetWidth * aspectRatio; - this.element.querySelector('.map-inner, .map-cover').style.height = newHeight+'px'; + var widthEls = this.element.querySelectorAll('.map-inner, .map-cover'); + for (var i = 0; i < widthEls.length; i++) { + widthEls[i].style.height = newHeight+'px'; + } if (this.map) { this.map.invalidateSize(); @@ -88,12 +96,6 @@ Pinpoint.prototype.setAspectRatio = function(){ } -Pinpoint.prototype.onWindowResize = function(){ - this.setAspectRatio(); - $(window).trigger('resize'); - // this.map.setView([this.opts.lat, this.opts.lon]); -} - Pinpoint.prototype.setupMap = function(mapopts){ var opts = this.opts; @@ -298,6 +300,7 @@ Pinpoint.prototype.enableInteraction = function(){ } Pinpoint.prototype.remove = function(){ + clearInterval( this.resizeInterval ); this.map.outerHTML = ''; this.element.innerHTML = ''; } @@ -334,3 +337,12 @@ Pinpoint.prototype.addGeoJSON = function(geojson){ } } +Pinpoint.prototype.onResize = function(callback) { + var currentWidth = this.element.offsetWidth; + this.resizeInterval = setInterval(function(){ + if (currentWidth !== this.element.offsetWidth) { + currentWidth = currentWidth; + callback(); + } + }.bind(this), 50); +} \ No newline at end of file diff --git a/dist/pinpoint.min.js b/dist/pinpoint.min.js index de7c08f..90389cd 100644 --- a/dist/pinpoint.min.js +++ b/dist/pinpoint.min.js @@ -1 +1 @@ -function Pinpoint(a){"use strict";if(null==window.L)throw"Leaflet.js not present on page.";var b=this;this.opts=a,this.opts.el=this.opts.el||"#map-el",this.element=document.querySelector(this.opts.el),this.opts.basemap=a.basemap||"http://{s}.tile.osm.org/{z}/{x}/{y}.png",this.opts.basemapCredit=a.basemapCredit||'Leaflet | © OpenStreetMap contributors',this.addElements(),this.fillText(),this.setAspectRatio(),this.setupMap(),this.calcBounds(),this.disableInteraction(),this.opts.creation&&(this.enableInteraction(),this.map.remove(),this.map.setMaxBounds(null),this.setupMap({nozoomlimits:!0})),this.element.querySelector(".map-outer").addEventListener("click",this.enableInteraction.bind(b)),a.minimap&&this.addMinimap();for(var c=0;cZoom/Pan'+a.replace("#697379","white")+'Zoom/Pan

'+this.opts.basemapCredit+"

";this.element.innerHTML=b},Pinpoint.prototype.setAspectRatio=function(){var a={tall:1.2,square:1,wide:2/3},b=a[this.opts["aspect-ratio"]],c=this.element.querySelector(".map-inner").offsetWidth*b;this.element.querySelector(".map-inner, .map-cover").style.height=c+"px",this.map&&this.map.invalidateSize()},Pinpoint.prototype.onWindowResize=function(){this.setAspectRatio(),$(window).trigger("resize")},Pinpoint.prototype.setupMap=function(a){var b=this.opts,c=b.zoom+1,d=b.zoom-1;a&&a.nozoomlimits&&(c=20,d=1);var e={scrollWheelZoom:!0,keyboard:!1,maxZoom:c,minZoom:d,attributionControl:!1},f=this.element.querySelector(".map-inner");this.map=L.map(f,e).setView([b.lat,b.lon],b.zoom),L.control.scale({position:"topright"}).addTo(this.map);var g=this.element.querySelector(".leaflet-control-scale.leaflet-control"),h=g.querySelector(".leaflet-control-scale-line");g.appendChild(h),L.tileLayer(this.opts.basemap).addTo(this.map),b.dragend&&this.map.on("dragend",b.dragend),b.zoomend&&this.map.on("zoomend",b.zoomend)},Pinpoint.prototype.addMarker=function(a,b){this.markers=this.markers||[],a.icon=a.icon||"circle";var c=L.divIcon({className:"marker-icon marker-icon-"+a.icon}),d=L.marker([a.lat,a.lon],{icon:c,draggable:this.opts.creation,title:b}).addTo(this.map);a.label=a.label||"plain";var e=a["label-direction"]||"north";if("callout"===a.label)var f=L.divIcon({className:"marker-label-callout "+e,html:'
'+a.text+"
"});else if("plain"===a.label)var f=L.divIcon({className:"marker-label-plain "+e,html:'
'+a.text+"
"});var g=L.marker([a.lat,a.lon],{icon:f}).addTo(this.map),h=this.element.querySelectorAll(".marker-inner");mi=h[h.length-1],mi.style.marginLeft=-mi.outerWidth/2,setTimeout(function(){mi.style.marginLeft=-mi.outerWidth/2}.bind(this),100),this.opts.markerdragend&&d.on("dragend",this.opts.markerdragend),this.markers.push({icon:d,text:g})},Pinpoint.prototype.addMinimap=function(){var a=L.tileLayer(this.opts.basemap,{attribution:""}),b=new L.Control.MiniMap(a,{zoomLevelOffset:this.opts["minimap-zoom-offset"]||-5,width:100,height:100,aimingRectOptions:{color:"black",weight:1,opacity:1,fillColor:"#999",fillOpacity:0}}).addTo(this.map);b._miniMap.dragging.disable(),b._miniMap.touchZoom.disable(),b._miniMap.doubleClickZoom.disable(),b._miniMap.scrollWheelZoom.disable(),b._miniMap.tap&&b._miniMap.tap.disable()},Pinpoint.prototype.calcBounds=function(){function a(a){var b=1/3,c=a.getBounds(),d=Math.abs(c._southWest.lng-c._northEast.lng)*b,e=Math.abs(c._southWest.lat-c._northEast.lat)*b,f={lat:c._southWest.lat-e,lng:c._southWest.lng-d},g={lat:c._northEast.lat+e,lng:c._northEast.lng+d};return L.latLngBounds(f,g)}var b=a(this.map);this.map.setMaxBounds(b)},Pinpoint.prototype.fillText=function(){this.opts.hed&&this.opts.hed.length>0?this.element.querySelector(".pinpoint-hed").innerText=this.opts.hed:this.element.querySelector(".pinpoint-hed").style.display="none",this.opts.dek&&this.opts.dek.length>0?this.element.querySelector(".pinpoint-dek").innerText=this.opts.dek:this.element.querySelector(".pinpoint-dek").style.display="none",this.opts.note&&this.opts.note.length>0?this.element.querySelector(".pinpoint-note").innerHTML=this.opts.note:this.element.querySelector(".pinpoint-note").style.display="none";for(var a=this.element.querySelectorAll(".pinpoint-hed, .pinpoint-dek"),b=0;b0&&c.offsetHeight>0&&(c.className=c.className+" pinpoint-topline")}},Pinpoint.prototype.disableInteraction=function(){this.map;return this.element.querySelector(".map-outer").className+=" inactive",this},Pinpoint.prototype.enableInteraction=function(){var a=(this.map,this.element.querySelector(".map-outer"));return a.className=a.className.replace(/inactive/g,""),this},Pinpoint.prototype.remove=function(){this.map.outerHTML="",this.element.innerHTML=""},Pinpoint.prototype.addGeoJSON=function(a){function b(a,b){for(var c=0;cLeaflet | © OpenStreetMap contributors',this.addElements(),this.fillText(),this.setAspectRatio(),this.setupMap(),this.calcBounds(),this.disableInteraction(),this.opts.creation&&(this.enableInteraction(),this.map.remove(),this.map.setMaxBounds(null),this.setupMap({nozoomlimits:!0})),this.element.querySelector(".map-outer").addEventListener("click",this.enableInteraction.bind(b)),a.minimap&&this.addMinimap();for(var c=0;cZoom/Pan'+a.replace("#697379","white")+'Zoom/Pan

'+this.opts.basemapCredit+"

";this.element.innerHTML=b},Pinpoint.prototype.setAspectRatio=function(){if(this.element.querySelector(".map-inner")){for(var a={tall:1.2,square:1,wide:2/3},b=a[this.opts["aspect-ratio"]],c=this.element.querySelector(".map-inner").offsetWidth*b,d=this.element.querySelectorAll(".map-inner, .map-cover"),e=0;e'+a.text+""});else if("plain"===a.label)var f=L.divIcon({className:"marker-label-plain "+e,html:'
'+a.text+"
"});var g=L.marker([a.lat,a.lon],{icon:f}).addTo(this.map),h=this.element.querySelectorAll(".marker-inner");mi=h[h.length-1],mi.style.marginLeft=-mi.outerWidth/2,setTimeout(function(){mi.style.marginLeft=-mi.outerWidth/2}.bind(this),100),this.opts.markerdragend&&d.on("dragend",this.opts.markerdragend),this.markers.push({icon:d,text:g})},Pinpoint.prototype.addMinimap=function(){var a=L.tileLayer(this.opts.basemap,{attribution:""}),b=new L.Control.MiniMap(a,{zoomLevelOffset:this.opts["minimap-zoom-offset"]||-5,width:100,height:100,aimingRectOptions:{color:"black",weight:1,opacity:1,fillColor:"#999",fillOpacity:0}}).addTo(this.map);b._miniMap.dragging.disable(),b._miniMap.touchZoom.disable(),b._miniMap.doubleClickZoom.disable(),b._miniMap.scrollWheelZoom.disable(),b._miniMap.tap&&b._miniMap.tap.disable()},Pinpoint.prototype.calcBounds=function(){function a(a){var b=1/3,c=a.getBounds(),d=Math.abs(c._southWest.lng-c._northEast.lng)*b,e=Math.abs(c._southWest.lat-c._northEast.lat)*b,f={lat:c._southWest.lat-e,lng:c._southWest.lng-d},g={lat:c._northEast.lat+e,lng:c._northEast.lng+d};return L.latLngBounds(f,g)}var b=a(this.map);this.map.setMaxBounds(b)},Pinpoint.prototype.fillText=function(){this.opts.hed&&this.opts.hed.length>0?this.element.querySelector(".pinpoint-hed").innerText=this.opts.hed:this.element.querySelector(".pinpoint-hed").style.display="none",this.opts.dek&&this.opts.dek.length>0?this.element.querySelector(".pinpoint-dek").innerText=this.opts.dek:this.element.querySelector(".pinpoint-dek").style.display="none",this.opts.note&&this.opts.note.length>0?this.element.querySelector(".pinpoint-note").innerHTML=this.opts.note:this.element.querySelector(".pinpoint-note").style.display="none";for(var a=this.element.querySelectorAll(".pinpoint-hed, .pinpoint-dek"),b=0;b0&&c.offsetHeight>0&&(c.className=c.className+" pinpoint-topline")}},Pinpoint.prototype.disableInteraction=function(){this.map;return this.element.querySelector(".map-outer").className+=" inactive",this},Pinpoint.prototype.enableInteraction=function(){var a=(this.map,this.element.querySelector(".map-outer"));return a.className=a.className.replace(/inactive/g,""),this},Pinpoint.prototype.remove=function(){clearInterval(this.resizeInterval),this.map.outerHTML="",this.element.innerHTML=""},Pinpoint.prototype.addGeoJSON=function(a){function b(a,b){for(var c=0;c 0 ); + p.remove(); }); + +QUnit.test( "Dynamic height", function( assert ) { + var done = assert.async(); + + var data = { + "lat": 51.5049378, + "lon": - 0.0870377, + "zoom": 4, + "aspect-ratio": "square", + "markers": [{ + "lat": 51.5049378, + "lon": - 0.0870377 + }] + }; + + data.el = '.test-map'; + var p = new Pinpoint(data); + + var $m = $('.test-map'); + $m.width(100); + setTimeout(function(){ + assert.equal( $('.map-inner').height(), 100 ); + assert.equal( $('.map-cover').height(), 100 ); + $m.width(200); + setTimeout(function(){ + assert.equal( $('.map-inner').height(), 200 ); + assert.equal( $('.map-cover').height(), 200 ); + p.remove(); + done(); + },200); + },200); +}); +