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);
}