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

Fix $.indexOf pollyfill

Browse Source 
Add the original options in addLayer events
Add layers demo page
This commit is contained in:
Antoine Vandecreme 2014-01-05 19:20:45 -05:00
parent c90a1edfb5
commit b542b90590
7 changed files with 146 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/openseadragon.js
View File

@ -433,10 +433,10 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
*/
/* jshint ignore:start */
$.version = {
versionStr: '<%= osdVersion.versionStr %>',
major: <%= osdVersion.major %>,
minor: <%= osdVersion.minor %>,
revision: <%= osdVersion.revision %>
// versionStr: '<%= osdVersion.versionStr %>',
// major: <%= osdVersion.major %>,
// minor: <%= osdVersion.minor %>,
// revision: <%= osdVersion.revision %>
};
/* jshint ignore:end */
@ -1347,7 +1347,9 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
*/
indexOf: function( array, searchElement, fromIndex ) {
if ( Array.prototype.indexOf ) {
this.indexOf = Array.prototype.indexOf;
this.indexOf = function( array, searchElement, fromIndex ) {
return array.indexOf( searchElement, fromIndex );
};
} else {
this.indexOf = function( array, searchElement, fromIndex ) {
var i,

8
src/viewer.js
View File

@ -1044,11 +1044,16 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
* @memberOf OpenSeadragon.Viewer
* @type {object}
* @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 {?Object} userData - Arbitrary subscriber-defined object.
*/
_this.raiseEvent( 'add-layer', { drawer: drawer } );
_this.raiseEvent( 'add-layer', {
options: options,
drawer: drawer
});
}, function( event ) {
event.options = options;
/**
* Raised when an error occurs while adding a layer.
* @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 {String} message
* @property {String} source
* @property {Object} options The options passed to the addLayer method.
* @property {?Object} userData - Arbitrary subscriber-defined object.
*/
_this.raiseEvent( 'add-layer-failed', event );

BIN
test/data/A.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
test/data/BBlue.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
test/data/CCyan.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 48 KiB

BIN
test/data/DDandelion.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.5 KiB

131
test/demo/layers.html Normal file
View 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();">&lAarr;</button>
</div>
<div id="updown">
<div id="up">
<button onclick="up();">&uArr;</button>
</div>
<div id="down">
<button onclick="down();">&dArr;</button>
</div>
</div>
<div id="right">
<button onclick="right();">&rAarr;</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>