mirror of
https://github.com/openseadragon/openseadragon.git
synced 2024-11-22 05:06:09 +03:00
Fix $.indexOf pollyfill
Add the original options in addLayer events Add layers demo page
This commit is contained in:
parent
c90a1edfb5
commit
b542b90590
@ -433,10 +433,10 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
|
|||||||
*/
|
*/
|
||||||
/* jshint ignore:start */
|
/* jshint ignore:start */
|
||||||
$.version = {
|
$.version = {
|
||||||
versionStr: '<%= osdVersion.versionStr %>',
|
// versionStr: '<%= osdVersion.versionStr %>',
|
||||||
major: <%= osdVersion.major %>,
|
// major: <%= osdVersion.major %>,
|
||||||
minor: <%= osdVersion.minor %>,
|
// minor: <%= osdVersion.minor %>,
|
||||||
revision: <%= osdVersion.revision %>
|
// revision: <%= osdVersion.revision %>
|
||||||
};
|
};
|
||||||
/* jshint ignore:end */
|
/* jshint ignore:end */
|
||||||
|
|
||||||
@ -1347,7 +1347,9 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
|
|||||||
*/
|
*/
|
||||||
indexOf: function( array, searchElement, fromIndex ) {
|
indexOf: function( array, searchElement, fromIndex ) {
|
||||||
if ( Array.prototype.indexOf ) {
|
if ( Array.prototype.indexOf ) {
|
||||||
this.indexOf = Array.prototype.indexOf;
|
this.indexOf = function( array, searchElement, fromIndex ) {
|
||||||
|
return array.indexOf( searchElement, fromIndex );
|
||||||
|
};
|
||||||
} else {
|
} else {
|
||||||
this.indexOf = function( array, searchElement, fromIndex ) {
|
this.indexOf = function( array, searchElement, fromIndex ) {
|
||||||
var i,
|
var i,
|
||||||
|
@ -1044,11 +1044,16 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
|
|||||||
* @memberOf OpenSeadragon.Viewer
|
* @memberOf OpenSeadragon.Viewer
|
||||||
* @type {object}
|
* @type {object}
|
||||||
* @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised the event.
|
* @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised the event.
|
||||||
|
* @property {Object} options The options passed to the addLayer method.
|
||||||
* @property {OpenSeadragon.Drawer} drawer The layer's underlying drawer.
|
* @property {OpenSeadragon.Drawer} drawer The layer's underlying drawer.
|
||||||
* @property {?Object} userData - Arbitrary subscriber-defined object.
|
* @property {?Object} userData - Arbitrary subscriber-defined object.
|
||||||
*/
|
*/
|
||||||
_this.raiseEvent( 'add-layer', { drawer: drawer } );
|
_this.raiseEvent( 'add-layer', {
|
||||||
|
options: options,
|
||||||
|
drawer: drawer
|
||||||
|
});
|
||||||
}, function( event ) {
|
}, function( event ) {
|
||||||
|
event.options = options;
|
||||||
/**
|
/**
|
||||||
* Raised when an error occurs while adding a layer.
|
* Raised when an error occurs while adding a layer.
|
||||||
* @event add-layer-failed
|
* @event add-layer-failed
|
||||||
@ -1057,6 +1062,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
|
|||||||
* @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised the event.
|
* @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised the event.
|
||||||
* @property {String} message
|
* @property {String} message
|
||||||
* @property {String} source
|
* @property {String} source
|
||||||
|
* @property {Object} options The options passed to the addLayer method.
|
||||||
* @property {?Object} userData - Arbitrary subscriber-defined object.
|
* @property {?Object} userData - Arbitrary subscriber-defined object.
|
||||||
*/
|
*/
|
||||||
_this.raiseEvent( 'add-layer-failed', event );
|
_this.raiseEvent( 'add-layer-failed', event );
|
||||||
@ -1496,7 +1502,7 @@ function _getSafeElemSize (oElement) {
|
|||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
function getTileSourceImplementation( viewer, tileSource, successCallback,
|
function getTileSourceImplementation( viewer, tileSource, successCallback,
|
||||||
failCallback) {
|
failCallback ) {
|
||||||
var _this = viewer;
|
var _this = viewer;
|
||||||
|
|
||||||
//allow plain xml strings or json strings to be parsed here
|
//allow plain xml strings or json strings to be parsed here
|
||||||
|
BIN
test/data/A.png
Normal file
BIN
test/data/A.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 16 KiB |
BIN
test/data/BBlue.png
Normal file
BIN
test/data/BBlue.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 19 KiB |
BIN
test/data/CCyan.png
Normal file
BIN
test/data/CCyan.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 48 KiB |
BIN
test/data/DDandelion.png
Normal file
BIN
test/data/DDandelion.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 9.5 KiB |
131
test/demo/layers.html
Normal file
131
test/demo/layers.html
Normal file
@ -0,0 +1,131 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>OpenSeadragon Layers Demo</title>
|
||||||
|
<script type="text/javascript" src='../../build/openseadragon/openseadragon.js'></script>
|
||||||
|
<script type="text/javascript" src='../lib/jquery-1.9.1.min.js'></script>
|
||||||
|
<style type="text/css">
|
||||||
|
|
||||||
|
.openseadragon1 {
|
||||||
|
width: 800px;
|
||||||
|
height: 600px;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
#availables, #used, #arrows, #left, #updown, #right {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div>
|
||||||
|
Simple demo page to show an OpenSeadragon viewer with layers.
|
||||||
|
</div>
|
||||||
|
<div id="contentDiv" class="openseadragon1"></div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div id="availables">
|
||||||
|
Availables layers<br>
|
||||||
|
<select name="layers-availables" size="4" multiple="multiple">
|
||||||
|
<option>A</option>
|
||||||
|
<option>BBlue</option>
|
||||||
|
<option>CCyan</option>
|
||||||
|
<option>DDandelion</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div id="arrows">
|
||||||
|
<div id="left">
|
||||||
|
<button onclick="left();">⇚</button>
|
||||||
|
</div>
|
||||||
|
<div id="updown">
|
||||||
|
<div id="up">
|
||||||
|
<button onclick="up();">⇑</button>
|
||||||
|
</div>
|
||||||
|
<div id="down">
|
||||||
|
<button onclick="down();">⇓</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="right">
|
||||||
|
<button onclick="right();">⇛</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="used">
|
||||||
|
Used layers<br>
|
||||||
|
<select name="layers-used" size="4" multiple="multiple">
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
|
||||||
|
function right() {
|
||||||
|
var added = $( "#availables select option:selected" ).detach();
|
||||||
|
$( "#used select" ).append( added );
|
||||||
|
$.each( added, function( index, value ) {
|
||||||
|
var layer = value.innerHTML;
|
||||||
|
var options = {
|
||||||
|
tileSource: {
|
||||||
|
type: 'legacy-image-pyramid',
|
||||||
|
levels: [ {
|
||||||
|
url: "../data/" + layer + ".png",
|
||||||
|
width: 1000,
|
||||||
|
height: 1000
|
||||||
|
} ]
|
||||||
|
}
|
||||||
|
};
|
||||||
|
var addLayerHandler = function( event ) {
|
||||||
|
if ( event.options === options ) {
|
||||||
|
viewer.removeHandler( "add-layer", addLayerHandler );
|
||||||
|
layers[layer] = event.drawer;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
viewer.addHandler( "add-layer", addLayerHandler );
|
||||||
|
viewer.addLayer( options );
|
||||||
|
} );
|
||||||
|
}
|
||||||
|
|
||||||
|
function left() {
|
||||||
|
var removed = $( "#used select option:selected" ).detach();
|
||||||
|
$( "#availables select" ).append( removed );
|
||||||
|
$.each( removed, function( index, value ) {
|
||||||
|
var layer = value.innerHTML;
|
||||||
|
viewer.removeLayer( layers[layer] );
|
||||||
|
delete layers[layer];
|
||||||
|
} );
|
||||||
|
}
|
||||||
|
|
||||||
|
function up() {
|
||||||
|
$.each( $( "#used select option:selected" ), function( index, value ) {
|
||||||
|
$( value ).prev( "option" ).insertAfter( value );
|
||||||
|
} );
|
||||||
|
updateOrder();
|
||||||
|
}
|
||||||
|
|
||||||
|
function down() {
|
||||||
|
$.each( $( "#used select option:selected" ).get().reverse(),
|
||||||
|
function( index, value ) {
|
||||||
|
$( value ).next( "option" ).insertBefore( value );
|
||||||
|
} );
|
||||||
|
updateOrder();
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateOrder() {
|
||||||
|
$.each( $( "#used select option" ), function( index, value ) {
|
||||||
|
var layer = value.innerHTML;
|
||||||
|
viewer.setLayerLevel( layers[layer], index + 1 );
|
||||||
|
} );
|
||||||
|
}
|
||||||
|
|
||||||
|
var viewer = OpenSeadragon( {
|
||||||
|
id: "contentDiv",
|
||||||
|
prefixUrl: "../../build/openseadragon/images/",
|
||||||
|
tileSources: "../data/testpattern.dzi",
|
||||||
|
showNavigator: true
|
||||||
|
} );
|
||||||
|
|
||||||
|
var layers = { };
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
Loading…
Reference in New Issue
Block a user