Merge pull request #77 from mejackreed/remove-jquery

Remove jquery dependency
mejackreed · Nov 11, 2019 · 5731d4e · 5731d4e
2 parents aedf332 + db87d74
commit 5731d4e
Show file tree

Hide file tree

Showing 10 changed files with 28 additions and 1,763 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,3 @@
-node_modules/
+node_modules/
+package-lock.json
+yarn.lock
diff --git a/.travis.yml b/.travis.yml
@@ -1,3 +1,10 @@
-sudo: false
 language: node_js
-node_js: 'node'
+
+node_js:
+  - 'lts/*'
+
+before_script:
+  - npm install
+
+script:
+  - npm test
diff --git a/README.md b/README.md
@@ -2,7 +2,9 @@
 
 A Leaflet plugin for viewing IIIF images. [See the demo](http://mejackreed.github.io/Leaflet-IIIF/examples/example.html)
 
-Requires [Leaflet.js](http://leafletjs.com/) and [jQuery](http://jquery.com/)
+Requires [Leaflet.js](http://leafletjs.com/).
+
+Leaflet-IIIF relies on browser support for [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) and [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API). If you need to support IE or other browsers without this, please use a polyfill.
 
 **Note on Leaflet Compatibility**
 

diff --git a/examples/example.html b/examples/example.html
@@ -4,7 +4,6 @@
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
     <script src="../leaflet-iiif.js"></script>
   </head>
   <body>

diff --git a/examples/index.html b/examples/index.html
@@ -4,7 +4,6 @@
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
     <script src="../leaflet-iiif.js"></script>
   </head>
   <body>

diff --git a/leaflet-iiif.js b/leaflet-iiif.js
@@ -32,7 +32,7 @@ L.TileLayer.Iiif = L.TileLayer.extend({
     }
 
     options = L.setOptions(this, options);
-    this._infoDeferred = new $.Deferred();
+    this._infoPromise = null;
     this._infoUrl = url;
     this._baseUrl = this._templateUrl();
     this._getInfo();
@@ -63,9 +63,8 @@ L.TileLayer.Iiif = L.TileLayer.extend({
   onAdd: function(map) {
     var _this = this;
 
-    // Wait for deferred to complete
-    $.when(_this._infoDeferred).done(function() {
-
+    // Wait for info.json fetch and parse to complete
+    Promise.all([_this._infoPromise]).then(function() {
       // Store unmutated imageSizes
       _this._imageSizesOriginal = _this._imageSizes.slice(0); 
 
@@ -160,9 +159,11 @@ L.TileLayer.Iiif = L.TileLayer.extend({
   _getInfo: function() {
     var _this = this;
 
-    // Look for a way to do this without jQuery
-    $.getJSON(_this._infoUrl)
-      .done(function(data) {
+    _this._infoPromise = fetch(_this._infoUrl)
+      .then(function(response) {
+        return response.json();
+      })
+      .then(function(data) {
         _this.y = data.height;
         _this.x = data.width;
 
@@ -228,9 +229,6 @@ L.TileLayer.Iiif = L.TileLayer.extend({
 
         _this._tierSizes = tierSizes;
         _this._imageSizes = imageSizes;
-
-        // Resolved Deferred to initiate tilelayer load
-        _this._infoDeferred.resolve();
       });
   },
 

diff --git a/package.json b/package.json
@@ -32,11 +32,10 @@
   "devDependencies": {
     "http-server": "^0.9.0",
     "jasmine": "^2.5",
-    "jquery": "~> 3.0.0",
     "karma": "^1.3",
+    "karma-chrome-launcher": "^3.1.0",
     "karma-jasmine": "^1.0",
-    "karma-phantomjs-launcher": "^1.0.0",
     "leaflet": "^1.0",
-    "phantomjs-prebuilt": "^2.1.5"
+    "puppeteer": "^1.20.0"
   }
 }
diff --git a/spec/LTileLayerIiifSpec.js b/spec/LTileLayerIiifSpec.js
@@ -248,11 +248,9 @@ describe('L.TileLayer.Iiif', function() {
 
     it('with a large tileSize and negative minZoom, ensure that the layer does not persist zoom changes', function(done) {
 
-      $.when(iiifLayer._infoDeferred).done( function() {
-
+      Promise.all([iiifLayer._infoPromise]).then(function() {
         map.removeLayer(iiifLayer);
         map.addLayer(iiifLayer);
-
       });
 
         iiifLayer.on('load', function() {

diff --git a/spec/karma.conf.js b/spec/karma.conf.js
@@ -1,5 +1,6 @@
 // Karma configuration
 // Generated on Wed Mar 16 2016 06:58:00 GMT-0700 (PDT)
+process.env.CHROME_BIN = require('puppeteer').executablePath()
 
 module.exports = function(config) {
   config.set({
@@ -16,7 +17,6 @@ module.exports = function(config) {
     // list of files / patterns to load in the browser
     files: [
       './../node_modules/leaflet/dist/leaflet.js',
-      './../node_modules/jquery/dist/jquery.js',
       './../leaflet-iiif.js',
       './**/*.js',
       {
@@ -64,7 +64,7 @@ module.exports = function(config) {
 
     // start these browsers
     // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
-    browsers: ['PhantomJS'],
+    browsers: ['ChromeHeadless'],
 
 
     // Continuous Integration mode