diff --git a/.eslintignore b/.eslintignore index 375e6a16d..404f4fafe 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1 +1 @@ -**/web_client/extra/*.js +**/web_client/extra/**/*.js diff --git a/Gruntfile.js b/Gruntfile.js index 116d8ea71..bd3e331ea 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -13,15 +13,27 @@ module.exports = function (grunt) { src: '<%= large_image.geojs_path %>', dest: '<%= pluginDir %>/large_image/web_client/extra/geojs.js' }] + }, + large_image_slideatlas: { + files: [{ + expand: true, + cwd: 'node_modules/slideatlas-viewer/dist/', + src: '**', + dest: '<%= pluginDir %>/large_image/web_client/extra/slideatlas/' + }] } }, default: { 'copy:plugin-large_image': { - dependencies: ['copy:large_image_geojs'] + dependencies: [ + 'copy:large_image_geojs', + 'copy:large_image_slideatlas' + ] }, 'copy:large_image_geojs': { dependencies: ['large_image_resolve'] }, + 'copy:large_image_slideatlas': {}, 'large_image_resolve': {} } }); diff --git a/plugin.json b/plugin.json index 48dc6b952..90bfeea7f 100644 --- a/plugin.json +++ b/plugin.json @@ -8,7 +8,8 @@ }, "npm": { "dependencies": { - "geojs": "0.11.0" + "geojs": "0.11.0", + "slideatlas-viewer": "4.0.3" } } } diff --git a/web_client/views/imageViewerWidget/slideatlas.js b/web_client/views/imageViewerWidget/slideatlas.js index 3dde1dcba..76bb64d9b 100644 --- a/web_client/views/imageViewerWidget/slideatlas.js +++ b/web_client/views/imageViewerWidget/slideatlas.js @@ -1,4 +1,4 @@ -import _ from 'underscore'; +import { staticRoot } from 'girder/rest'; import ImageViewerWidget from './base'; @@ -6,18 +6,25 @@ var SlideAtlasImageViewerWidget = ImageViewerWidget.extend({ initialize: function (settings) { ImageViewerWidget.prototype.initialize.call(this, settings); - $('head').prepend( - $('')); + if (!$('head #large_image-slideatlas-css').length) { + $('head').prepend( + $('', { + id: 'large_image-slideatlas-css', + rel: 'stylesheet', + href: staticRoot + '/built/plugins/large_image/extra/slideatlas/sa.css' + }) + ); + } $.getScript( - 'https://beta.slide-atlas.org/webgl-viewer/static/sa.max.js', + staticRoot + '/built/plugins/large_image/extra/slideatlas/sa-all.min.js', () => this.render() ); }, render: function () { // If script or metadata isn't loaded, then abort - if (!window.SlideAtlas || !this.tileWidth || !this.tileHeight) { + if (!window.SA || !this.tileWidth || !this.tileHeight) { return; } @@ -27,19 +34,24 @@ var SlideAtlasImageViewerWidget = ImageViewerWidget.extend({ } // TODO: if a viewer already exists, do we render again? - this.$el.saViewer({ + // SlideAtlas bundles its own version of jQuery, which should attach itself to "window.$" when it's sourced + // The "this.$el" still uses the Girder version of jQuery, which will not have "saViewer" registered on it. + window.$(this.el).saViewer({ zoomWidget: true, drawWidget: true, - prefixUrl: 'https://beta.slide-atlas.org/webgl-viewer/static/', + prefixUrl: staticRoot + '/built/plugins/large_image/extra/slideatlas/img/', tileSource: { height: this.sizeY, width: this.sizeX, tileSize: this.tileWidth, minLevel: 0, maxLevel: this.levels - 1, - getTileUrl: _.bind(this._getTileUrl, this), - ajaxWithCredentials: true - }}); + getTileUrl: (level, x, y, z) => { + // Drop the "z" argument + return this._getTileUrl(level, x, y); + } + } + }); this.viewer = this.el.saViewer; return this; @@ -47,11 +59,11 @@ var SlideAtlasImageViewerWidget = ImageViewerWidget.extend({ destroy: function () { if (this.viewer) { - this.$el.saViewer('destroy'); + window.$(this.el).saViewer('destroy'); this.viewer = null; } - if (window.SlideAtlas) { - delete window.SlideAtlas; + if (window.SA) { + delete window.SA; } ImageViewerWidget.prototype.destroy.call(this); }