mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2024-11-22 05:06:09 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #2072 from Aiosa/master

Browse Source 
Ajax POST data in the OpenSeadragon.
This commit is contained in:
Ian Gilman 2022-01-21 11:53:07 -08:00 committed by GitHub
commit b1ec71e91c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 364 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/dzitilesource.js
View File

@ -124,10 +124,11 @@ $.extend( $.DziTileSource.prototype, $.TileSource.prototype, /** @lends OpenSead
* @function
* @param {Object|XMLDocument} data - the raw configuration
* @param {String} url - the url the data was retrieved from if any.
* @param {String} postData - HTTP POST data in k=v&k2=v2... form; or null;
* @return {Object} options - A dictionary of keyword arguments sufficient
* to configure this tile sources constructor.
*/
configure: function( data, url ){
configure: function( data, url, postData ){
var options;

4
src/iiiftilesource.js
View File

@ -183,6 +183,8 @@ $.extend( $.IIIFTileSource.prototype, $.TileSource.prototype, /** @lends OpenSea
*
* @function
* @param {Object} data - the raw configuration
* @param {String} url - the url configuration was retrieved from
* @param {String} postData - HTTP POST data in k=v&k2=v2... form; or null;
* @example <caption>IIIF 1.1 Info Looks like this</caption>
* {
* "@context" : "http://library.stanford.edu/iiif/image-api/1.1/context.json",
@ -197,7 +199,7 @@ $.extend( $.IIIFTileSource.prototype, $.TileSource.prototype, /** @lends OpenSea
* "profile" : "http://library.stanford.edu/iiif/image-api/1.1/compliance.html#level0"
* }
*/
configure: function( data, url ){
configure: function( data, url, postData ){
// Try to deduce our version and fake it upwards if needed
if ( !$.isPlainObject(data) ) {
var options = configureFromXml10( data );

4
src/imageloader.js
View File

@ -43,6 +43,7 @@
* @param {String} [options.loadWithAjax] - Whether to load this image with AJAX.
* @param {String} [options.ajaxHeaders] - Headers to add to the image request if using AJAX.
* @param {String} [options.crossOriginPolicy] - CORS policy to use for downloads
* @param {String} [options.postData] - HTTP POST data in k=v&k2=v2... form; or null
* @param {Function} [options.callback] - Called once image has been downloaded.
* @param {Function} [options.abort] - Called when this image job is aborted.
* @param {Number} [options.timeout] - The max number of milliseconds that this image job may take to complete.
@ -96,6 +97,7 @@ ImageJob.prototype = {
withCredentials: this.ajaxWithCredentials,
headers: this.ajaxHeaders,
responseType: "arraybuffer",
postData: this.postData,
success: function(request) {
var blb;
// Make the raw data into a blob.
@ -196,6 +198,7 @@ $.ImageLoader.prototype = {
* @param {String} [options.loadWithAjax] - Whether to load this image with AJAX.
* @param {String} [options.ajaxHeaders] - Headers to add to the image request if using AJAX.
* @param {String|Boolean} [options.crossOriginPolicy] - CORS policy to use for downloads
* @param {String} [options.postData] - POST parameters in k=v&k2=v2... form or null
* @param {Boolean} [options.ajaxWithCredentials] - Whether to set withCredentials on AJAX
* requests.
* @param {Function} [options.callback] - Called once image has been downloaded.
@ -212,6 +215,7 @@ $.ImageLoader.prototype = {
ajaxHeaders: options.loadWithAjax ? options.ajaxHeaders : null,
crossOriginPolicy: options.crossOriginPolicy,
ajaxWithCredentials: options.ajaxWithCredentials,
postData: options.postData,
callback: complete,
abort: options.abort,
timeout: this.timeout

3
src/imagetilesource.js
View File

@ -89,10 +89,11 @@
* @function
* @param {Object} options - the options
* @param {String} dataUrl - the url the image was retrieved from, if any.
* @param {String} postData - HTTP POST data in k=v&k2=v2... form; or null
* @return {Object} options - A dictionary of keyword arguments sufficient
* to configure this tile sources constructor.
*/
configure: function (options, dataUrl) {
configure: function (options, dataUrl, postData) {
return options;
},
/**

3
src/legacytilesource.js
View File

@ -122,10 +122,11 @@ $.extend( $.LegacyTileSource.prototype, $.TileSource.prototype, /** @lends OpenS
* @function
* @param {Object|XMLDocument} configuration - the raw configuration
* @param {String} dataUrl - the url the data was retrieved from if any.
* @param {String} postData - HTTP POST data in k=v&k2=v2... form; or null
* @return {Object} options - A dictionary of keyword arguments sufficient
* to configure this tile sources constructor.
*/
configure: function( configuration, dataUrl ){
configure: function( configuration, dataUrl, postData ){
var options;

18
src/openseadragon.js
View File

@ -659,6 +659,15 @@
* @property {Object} [ajaxHeaders={}]
* A set of headers to include when making AJAX requests for tile sources or tiles.
*
* @property {Boolean} [splitHashDataForPost=false]
* Allows to treat _first_ hash ('#') symbol as a separator for POST data:
* URL to be opened by a {@link OpenSeadragon.TileSource} can thus look like: http://some.url#postdata=here .
* The URL is split to 'http://some.url' and 'postdata=here'; post data is given to the
* {@link OpenSeadragon.TileSource} of the choice and can be further used within tile requests
* (see TileSource methods). {@link OpenSeadragon.TileSource.prototype.configure} return value
* should contain the post data so that it is given to its subclass in the constructor.
* NOTE: post data is expected to be ampersand-separated (just like GET parameters), and is not used
* to fetch tile image data if loadTilesWithAjax=false (but it is still used for the initial request).
*/
/**
@ -1140,6 +1149,7 @@ function OpenSeadragon( options ){
ajaxWithCredentials: false,
loadTilesWithAjax: false,
ajaxHeaders: {},
splitHashDataForPost: false,
//PAN AND ZOOM SETTINGS AND CONSTRAINTS
panHorizontal: true,
@ -2299,6 +2309,7 @@ function OpenSeadragon( options ){
* @param {Function} options.error - a function to call on when an error occurs
* @param {Object} options.headers - headers to add to the AJAX request
* @param {String} options.responseType - the response type of the the AJAX request
* @param {String} options.postData - HTTP POST data in k=v&k2=v2... form, GET method used if null
* @param {Boolean} [options.withCredentials=false] - whether to set the XHR's withCredentials
* @throws {Error}
* @returns {XMLHttpRequest}
@ -2307,6 +2318,7 @@ function OpenSeadragon( options ){
var withCredentials;
var headers;
var responseType;
var postData;
// Note that our preferred API is that you pass in a single object; the named
// arguments are for legacy support.
@ -2316,6 +2328,7 @@ function OpenSeadragon( options ){
withCredentials = url.withCredentials;
headers = url.headers;
responseType = url.responseType || null;
postData = url.postData || null;
url = url.url;
}
@ -2348,8 +2361,9 @@ function OpenSeadragon( options ){
}
};
var method = postData ? "POST" : "GET";
try {
request.open( "GET", url, true );
request.open( method, url, true );
if (responseType) {
request.responseType = responseType;
@ -2367,7 +2381,7 @@ function OpenSeadragon( options ){
request.withCredentials = true;
}
request.send(null);
request.send(postData);
} catch (e) {
$.console.error( "%s while making AJAX request: %s", e.name, e.message );

3
src/osmtilesource.js
View File

@ -122,10 +122,11 @@ $.extend( $.OsmTileSource.prototype, $.TileSource.prototype, /** @lends OpenSead
* @function
* @param {Object} data - the raw configuration
* @param {String} url - the url the data was retrieved from if any.
* @param {String} postData - HTTP POST data in k=v&k2=v2... form; or null
* @return {Object} options - A dictionary of keyword arguments sufficient
* to configure this tile sources constructor.
*/
configure: function( data, url ){
configure: function( data, url, postData ){
return data;
},

10
src/tile.js
View File

@ -50,10 +50,11 @@
* @param {Boolean} loadWithAjax Whether this tile image should be loaded with an AJAX request .
* @param {Object} ajaxHeaders The headers to send with this tile's AJAX request (if applicable).
* @param {OpenSeadragon.Rect} sourceBounds The portion of the tile to use as the source of the
* @param {String} postData HTTP POST data in k=v&k2=v2... form; or null
* drawing operation, in pixels. Note that this only works when drawing with canvas; when drawing
* with HTML the entire tile is always used.
*/
$.Tile = function(level, x, y, bounds, exists, url, context2D, loadWithAjax, ajaxHeaders, sourceBounds) {
$.Tile = function(level, x, y, bounds, exists, url, context2D, loadWithAjax, ajaxHeaders, sourceBounds, postData) {
/**
* The zoom level this tile belongs to.
* @member {Number} level
@ -97,6 +98,13 @@ $.Tile = function(level, x, y, bounds, exists, url, context2D, loadWithAjax, aja
* @memberof OpenSeadragon.Tile#
*/
this.url = url;
/**
* Post parameters for this tile. Either it is an URL-encoded string
* in k1=v1&k2=v2... format or null
* @member {String} postData HTTP POST data in k=v&k2=v2... form; or null
* @memberof OpenSeadragon.Tile#
*/
this.postData = postData;
/**
* The context2D of this tile if it is provided directly by the tile source.
* @member {CanvasRenderingContext2D} context2D

6
src/tiledimage.js
View File

@ -1500,6 +1500,7 @@ function getTile(
sourceBounds,
exists,
url,
post,
ajaxHeaders,
context2D,
tile;
@ -1518,6 +1519,7 @@ function getTile(
sourceBounds = tileSource.getTileBounds( level, xMod, yMod, true );
exists = tileSource.tileExists( level, xMod, yMod );
url = tileSource.getTileUrl( level, xMod, yMod );
post = tileSource.getTilePostData( level, xMod, yMod );
// Headers are only applicable if loadTilesWithAjax is set
if (tiledImage.loadTilesWithAjax) {
@ -1543,7 +1545,8 @@ function getTile(
context2D,
tiledImage.loadTilesWithAjax,
ajaxHeaders,
sourceBounds
sourceBounds,
post
);
if (tiledImage.getFlip()) {
@ -1583,6 +1586,7 @@ function loadTile( tiledImage, tile, time ) {
tile.loading = true;
tiledImage._imageLoader.addJob({
src: tile.url,
postData: tile.postData,
loadWithAjax: tile.loadWithAjax,
ajaxHeaders: tile.ajaxHeaders,
crossOriginPolicy: tiledImage.crossOriginPolicy,

40
src/tilesource.js
View File

@ -69,6 +69,9 @@
* the XHR's withCredentials (for accessing secure data).
* @param {Object} [options.ajaxHeaders]
* A set of headers to include in AJAX requests.
* @param {Boolean} [options.splitHashDataForPost]
* First occurrence of '#' in the options.url is used to split URL
* and the latter part is treated as POST data (applies to getImageInfo(...))
* @param {Number} [options.width]
* Width of the source image at max resolution in pixels.
* @param {Number} [options.height]
@ -445,6 +448,15 @@ $.TileSource.prototype = {
}
}
var postData = null;
if (this.splitHashDataForPost) {
var hashIdx = url.indexOf("#");
if (hashIdx !== -1) {
postData = url.substring(hashIdx + 1);
url = url.substr(0, hashIdx);
}
}
callback = function( data ){
if( typeof (data) === "string" ) {
data = $.parseXml( data );
@ -466,7 +478,7 @@ $.TileSource.prototype = {
return;
}
options = $TileSource.prototype.configure.apply( _this, [ data, url ]);
options = $TileSource.prototype.configure.apply( _this, [ data, url, postData ]);
if (options.ajaxWithCredentials === undefined) {
options.ajaxWithCredentials = _this.ajaxWithCredentials;
}
@ -501,6 +513,7 @@ $.TileSource.prototype = {
// request info via xhr asynchronously.
$.makeAjaxRequest( {
url: url,
postData: postData,
withCredentials: this.ajaxWithCredentials,
headers: this.ajaxHeaders,
success: function( xhr ) {
@ -537,11 +550,13 @@ $.TileSource.prototype = {
* @property {OpenSeadragon.TileSource} eventSource - A reference to the TileSource which raised the event.
* @property {String} message
* @property {String} source
* @property {String} postData - HTTP POST data in k=v&k2=v2... form; or null
* @property {?Object} userData - Arbitrary subscriber-defined object.
*/
_this.raiseEvent( 'open-failed', {
message: msg,
source: url
source: url,
postData: postData
});
}
});
@ -578,11 +593,14 @@ $.TileSource.prototype = {
* @param {String|Object|Array|Document} data
* @param {String} url - the url the data was loaded
* from if any.
* @param {String} postData - HTTP POST data in k=v&k2=v2... form; or null; value obtained from
* the protocol URL after '#' sign if flag splitHashDataForPost set to 'true'
* @return {Object} options - A dictionary of keyword arguments sufficient
* to configure this tile sources constructor.
* to configure the tile source constructor (include all values you want to
* instantiate the TileSource subclass with - what _options_ object should contain).
* @throws {Error}
*/
configure: function( data, url ) {
configure: function( data, url, postData ) {
throw new Error( "Method not implemented." );
},
@ -603,6 +621,20 @@ $.TileSource.prototype = {
throw new Error( "Method not implemented." );
},
/**
* Must use AJAX in order to work, i.e. loadTilesWithAjax = true is set.
* It should return url-encoded string with the following structure:
* key=value&key2=value2...
* or null in case GET is used instead.
* @param level
* @param x
* @param y
* @return {string || null} post data to send with tile configuration request
*/
getTilePostData: function( level, x, y ) {
return null;
},
/**
* Responsible for retrieving the headers which will be attached to the image request for the
* region specified by the given x, y, and level components.

3
src/tmstilesource.js
View File

@ -111,10 +111,11 @@ $.extend( $.TmsTileSource.prototype, $.TileSource.prototype, /** @lends OpenSead
* @function
* @param {Object} data - the raw configuration
* @param {String} url - the url the data was retrieved from if any.
* @param {String} postData - HTTP POST data in k=v&k2=v2... form; or null
* @return {Object} options - A dictionary of keyword arguments sufficient
* to configure this tile sources constructor.
*/
configure: function( data, url ){
configure: function( data, url, postData ){
return data;
},

1
src/viewer.js
View File

@ -2432,6 +2432,7 @@ function getTileSourceImplementation( viewer, tileSource, imgOptions, successCal
ajaxWithCredentials: viewer.ajaxWithCredentials,
ajaxHeaders: imgOptions.ajaxHeaders ?
imgOptions.ajaxHeaders : viewer.ajaxHeaders,
splitHashDataForPost: viewer.splitHashDataForPost,
useCanvas: viewer.useCanvas,
success: function( event ) {
successCallback( event.tileSource );

3
src/zoomifytilesource.js
View File

@ -122,10 +122,11 @@
* @function
* @param {Object} data - the raw configuration
* @param {String} url - the url the data was retrieved from if any.
* @param {String} postData - HTTP POST data in k=v&k2=v2... form; or null
* @return {Object} options - A dictionary of keyword arguments sufficient
* to configure this tile sources constructor.
*/
configure: function(data, url) {
configure: function(data, url, postData) {
return data;
},

1
test/coverage.html
View File

@ -86,6 +86,7 @@
<script src="/test/modules/spring.js"></script>
<script src="/test/modules/rectangle.js"></script>
<script src="/test/modules/ajax-tiles.js"></script>
<script src="/test/modules/ajax-post-data.js"></script>
<script src="/test/modules/imageloader.js"></script>
<script src="/test/modules/iiif.js"></script>
<!-- The navigator tests are the slowest (for now; hopefully they can be sped up)

276
test/modules/ajax-post-data.js Normal file
View File

@ -0,0 +1,276 @@
/* global QUnit, testLog, Util */
//Testing of POST data propagation through the system
(function() {
var POST_CAN_BE_MISSING = false;
var POST_DATA = "";
var URL_USED = "";
var ASSERT = null;
var testPostData = function(data, context) {
ASSERT.ok((POST_CAN_BE_MISSING && (data === undefined || data === null))
|| data === POST_DATA,
`${context} ${POST_CAN_BE_MISSING ? "has no POST data" : "receives expected POST data"}`);
};
var testUrl = function (url, context) {
ASSERT.ok((!POST_CAN_BE_MISSING && URL_USED.startsWith(url) && (url.indexOf(POST_DATA) === -1 || POST_DATA === ""))
|| url === URL_USED,
`${context} ${POST_CAN_BE_MISSING ? "URL was not modified" : "URL was stripped of POST data"}`);
};
//each test must call these
var configure = function(postDataNotAccepted, postDataUsed, urlUsed, assert) {
POST_CAN_BE_MISSING = postDataNotAccepted;
POST_DATA = postDataUsed;
URL_USED = urlUsed;
ASSERT = assert;
};
var viewer = null;
var OriginalLoader = OpenSeadragon.ImageLoader;
var OriginalAjax = OpenSeadragon.makeAjaxRequest;
QUnit.module('AjaxPostData', {
beforeEach: function () {
testLog.reset();
$("#qunit-fixture").html("<div id='example'></div>");
//Substitute OSD parts so that it reports what it is doing
OpenSeadragon.PostTestTileSource = function( options ) {
//double test, actually received from configure(...)
testPostData(options.postData, "TileSource::constructor");
OpenSeadragon.TileSource.apply( this, [ options ] );
};
OpenSeadragon.extend( OpenSeadragon.PostTestTileSource.prototype, OpenSeadragon.TileSource.prototype, {
supports: function( data, url ){
return url.indexOf('.post') !== -1;
},
configure: function( data, url, postData ){
testUrl(url, "TileSource::configure");
testPostData(postData, "TileSource::configure");
//some default data to trigger painting
return {
postData: postData, //!important, pass to options object in the constructor
tilesUrl: url,
fileFormat: "jpg",
sizeData: {Width: 55, Height: 55},
width: 55,
height: 55,
tileSize: 55,
tileOverlap: 55,
minLevel: 1,
maxLevel: 1,
displayRects: []
};
},
getTileUrl: function( level, x, y ) {
return URL_USED;
},
getTileAjaxHeaders: function( level, x, y ) {
return {'Content-type': 'application/x-www-form-urlencoded'};
},
getTilePostData: function(level, x, y) {
return this.postData;
},
tileExists: function ( level, x, y ) {
return true;
}
});
var Loader = function(options) {
OriginalLoader.apply(this, [options]);
};
OpenSeadragon.extend( Loader.prototype, OpenSeadragon.ImageLoader.prototype, {
addJob: function(options) {
testUrl(options.src, "ImageJob::addJob");
testPostData(options.postData, "ImageJob::addJob");
if (viewer.loadTilesWithAjax) {
OriginalLoader.prototype.addJob.apply(this, [options]);
} else {
//no ajax means we would wait for invalid image link to load, close - passed
viewer.close();
}
}
});
OpenSeadragon.ImageLoader = Loader;
var ajaxCounter = 0;
OpenSeadragon.makeAjaxRequest = function( url, onSuccess, onError ) {
var withCredentials;
var headers;
var responseType;
var postData;
var options;
// Note that our preferred API is that you pass in a single object; the named
// arguments are for legacy support.
if( $.isPlainObject( url ) ){
onSuccess = url.success;
onError = url.error;
withCredentials = url.withCredentials;
headers = url.headers;
responseType = url.responseType || null;
postData = url.postData || null;
options = url; //save original stuff
url = url.url;
//since we test that postData value equals to "" but here is correctly parsed to null
//to avoid POST request
if (options.postData === "") {
ASSERT.ok(postData == null, "Empty post data is parsed as null");
} else {
testPostData(postData, "AJAX");
}
} else {
testPostData(postData, "AJAX");
}
testUrl(url, "AJAX");
//first AJAX firing is the image info getter, second is the first tile request: can exit
ajaxCounter++;
if (ajaxCounter > 1) {
viewer.close();
return null;
}
var request = Promise.resolve(url);
//some required properties to pass through processResponse(...)
request.responseText = "some text";
request.status = 200;
onSuccess(request);
return request;
};
},
afterEach: function () {
ASSERT = null;
if (viewer && viewer.close) {
viewer.close();
}
viewer = null;
OpenSeadragon.ImageLoader = OriginalLoader;
OpenSeadragon.makeAjaxRequest = OriginalAjax;
}
});
// ----------
var testOpenUrl = function(withPost, withAjax) {
testOpen(URL_USED, withPost, withAjax);
};
var testOpen = function(tileSource, withPost, withAjax) {
var timeWatcher = Util.timeWatcher(ASSERT, 7000);
viewer = OpenSeadragon({
id: 'example',
prefixUrl: '/build/openseadragon/images/',
tileSources: tileSource,
loadTilesWithAjax: withAjax,
splitHashDataForPost: withPost,
});
var failHandler = function (event) {
testPostData(event.postData, "event: 'open-failed'");
viewer.removeHandler('open-failed', failHandler);
viewer.close();
};
viewer.addHandler('open-failed', failHandler);
var readyHandler = function (event) {
//relies on Tilesource contructor extending itself with options object
testPostData(event.postData, "event: 'ready'");
viewer.removeHandler('ready', readyHandler);
};
viewer.addHandler('ready', readyHandler);
var openHandler = function(event) {
viewer.removeHandler('open', openHandler);
ASSERT.ok(true, 'Open event was sent');
viewer.addHandler('close', closeHandler);
viewer.world.draw();
};
var closeHandler = function(event) {
viewer.removeHandler('close', closeHandler);
$('#example').empty();
ASSERT.ok(true, 'Close event was sent');
timeWatcher.done();
};
viewer.addHandler('open', openHandler);
};
// ----------
QUnit.test('Without Post Data, Without Ajax', function(assert) {
configure(true, "", 'someURL.post#somePostData=1&key=2', assert);
testOpenUrl(false, false);
});
QUnit.test('Without Post Data: Ajax GET', function(assert) {
configure(true, "", 'someURL.post#somePostData=1&key=2', assert);
testOpenUrl(false, true);
});
QUnit.test('With Post Data: Ajax POST', function(assert) {
configure(false, "testingPostDataSimple", 'someURL.post#testingPostDataSimple', assert);
testOpenUrl(true, true, assert);
});
QUnit.test('With Post Data But No Ajax', function(assert) {
configure(false, "somePostData=1&key=2", 'someURL.post#somePostData=1&key=2', assert);
testOpenUrl(true, false, assert);
});
QUnit.test('With Post Data BUT no post data', function(assert) {
configure(false, null, 'someURL.post', assert);
testOpenUrl(true, true, assert);
});
QUnit.test('With Post Data Empty post data', function(assert) {
configure(false, "", 'someURL.post#', assert);
testOpenUrl(true, true, assert);
});
QUnit.test('CustomTileSource No Ajax', function(assert) {
configure(true, "", 'someURL.post', assert);
testOpen({
height: 512 * 256,
width: 512 * 256,
tileSize: 256,
minLevel: 8,
getTileUrl: function (level, x, y) {
return "someURL.post";
}
}, false, true);
});
QUnit.test('CustomTileSource With Ajax', function(assert) {
configure(false, "d1=a1&d2=a2###", 'someURL.post', assert);
testOpen({
height: 512 * 256,
width: 512 * 256,
tileSize: 256,
minLevel: 8,
getTileUrl: function (level, x, y) {
return "someURL.post";
},
getTilePostData (level, x, y) {
return "d1=a1&d2=a2###";
},
}, true, true);
});
})();

1
test/test.html
View File

@ -44,6 +44,7 @@
<script src="/test/modules/spring.js"></script>
<script src="/test/modules/rectangle.js"></script>
<script src="/test/modules/ajax-tiles.js"></script>
<script src="/test/modules/ajax-post-data.js"></script>
<script src="/test/modules/imageloader.js"></script>
<script src="/test/modules/iiif.js"></script>
<!--The navigator tests are the slowest (for now; hopefully they can be sped up)