Removed jQuery dependency

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

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "pinpoint",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "authors": [
     "ejb <[email protected]>"
   ],

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,20 +85,17 @@ 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();
     }
 
 }
 
-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);
+}

src/js/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,20 +85,17 @@ 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();
     }
 
 }
 
-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);
+}

test/pinpoint.test.js

@@ -13,6 +13,7 @@ QUnit.test( "Most basic map", function( assert ) {
     var p = new Pinpoint(data);
 
     assert.ok( p instanceof Pinpoint );
+    p.remove();
 });
 
 QUnit.test( "Map with a marker", function( assert ) { 
@@ -32,4 +33,39 @@ QUnit.test( "Map with a marker", function( assert ) {
     var p = new Pinpoint(data);
 
     assert.ok( p instanceof Pinpoint );
+    assert.ok( $('.marker-icon').length > 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);
+});
+