mirror of
https://github.com/openseadragon/openseadragon.git
synced 2025-02-16 14:53:14 +03:00
Initial pass at making the navigator float
This commit is contained in:
houseofyin
parent
6285a779f3
commit
3b2bde2940
@ -32,9 +32,12 @@ $.ControlAnchor = {
|
||||
* @property {Element} wrapper - a nuetral element surrounding the control
|
||||
* element.
|
||||
*/
|
||||
$.Control = function ( element, anchor, container ) {
|
||||
$.Control = function ( element, options, container ) {
|
||||
var parent = element.parentNode;
|
||||
options.attachToViewer = (typeof options.attachToViewer === 'undefined') ? true : options.attachToViewer;
|
||||
this.autoFade = (typeof options.autoFade === 'undefined') ? true : options.autoFade;
|
||||
this.element = element;
|
||||
this.anchor = anchor;
|
||||
this.anchor = options.anchor;
|
||||
this.container = container;
|
||||
this.wrapper = $.makeNeutralElement( "span" );
|
||||
this.wrapper.style.display = "inline-block";
|
||||
@ -45,14 +48,18 @@ $.Control = function ( element, anchor, container ) {
|
||||
this.wrapper.style.width = this.wrapper.style.height = "100%";
|
||||
}
|
||||
|
||||
if ( this.anchor == $.ControlAnchor.TOP_RIGHT ||
|
||||
this.anchor == $.ControlAnchor.BOTTOM_RIGHT ) {
|
||||
this.container.insertBefore(
|
||||
this.wrapper,
|
||||
this.container.firstChild
|
||||
);
|
||||
if (options.attachToViewer ) {
|
||||
if ( this.anchor == $.ControlAnchor.TOP_RIGHT ||
|
||||
this.anchor == $.ControlAnchor.BOTTOM_RIGHT ) {
|
||||
this.container.insertBefore(
|
||||
this.wrapper,
|
||||
this.container.firstChild
|
||||
);
|
||||
} else {
|
||||
this.container.appendChild( this.wrapper );
|
||||
}
|
||||
} else {
|
||||
this.container.appendChild( this.wrapper );
|
||||
parent.appendChild( this.wrapper );
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -54,7 +54,7 @@
|
||||
/**
|
||||
* @function
|
||||
*/
|
||||
addControl: function ( element, anchor ) {
|
||||
addControl: function ( element, controlOptions ) {
|
||||
element = $.getElement( element );
|
||||
var div = null;
|
||||
|
||||
@ -62,7 +62,7 @@
|
||||
return; // they're trying to add a duplicate control
|
||||
}
|
||||
|
||||
switch ( anchor ) {
|
||||
switch ( controlOptions.anchor ) {
|
||||
case $.ControlAnchor.TOP_RIGHT:
|
||||
div = this.controls.topright;
|
||||
element.style.position = "relative";
|
||||
@ -96,7 +96,7 @@
|
||||
}
|
||||
|
||||
this.controls.push(
|
||||
new $.Control( element, anchor, div )
|
||||
new $.Control( element, controlOptions, div )
|
||||
);
|
||||
element.style.display = "inline-block";
|
||||
},
|
||||
|
||||
@ -24,9 +24,19 @@ $.Navigator = function( options ){
|
||||
if( !options.id ){
|
||||
options.id = 'navigator-' + (+new Date());
|
||||
this.element = $.makeNeutralElement( "div" );
|
||||
this.element.id = options.id;
|
||||
this.element.className = 'navigator';
|
||||
options.controlOptions = {anchor: $.ControlAnchor.TOP_RIGHT,
|
||||
attachToViewer: true,
|
||||
autoFade: true};
|
||||
}
|
||||
else
|
||||
{
|
||||
this.element = document.getElementById( options.id );
|
||||
options.controlOptions = {anchor: $.ControlAnchor.NONE,
|
||||
attachToViewer: false,
|
||||
autoFade: false};
|
||||
}
|
||||
this.element.id = options.id;
|
||||
this.element.className += ' navigator';
|
||||
|
||||
options = $.extend( true, {
|
||||
sizeRatio: $.DEFAULT_SETTINGS.navigatorSizeRatio
|
||||
@ -179,7 +189,7 @@ $.Navigator = function( options ){
|
||||
|
||||
viewer.addControl(
|
||||
this.element,
|
||||
$.ControlAnchor.TOP_RIGHT
|
||||
options.controlOptions
|
||||
);
|
||||
|
||||
if( options.width && options.height ){
|
||||
|
||||
@ -503,7 +503,7 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
|
||||
|
||||
//VIEWPORT NAVIGATOR SETTINGS
|
||||
showNavigator: true, //promoted to default in 0.9.64
|
||||
navigatorElement: null,
|
||||
navigatorId: null,
|
||||
navigatorHeight: null,
|
||||
navigatorWidth: null,
|
||||
navigatorPosition: null,
|
||||
|
||||
@ -97,7 +97,7 @@ $.ReferenceStrip = function( options ){
|
||||
this.element.style.height = options.height + 'px';
|
||||
viewer.addControl(
|
||||
this.element,
|
||||
$.ControlAnchor.BOTTOM_LEFT
|
||||
{anchor: $.ControlAnchor.BOTTOM_LEFT}
|
||||
);
|
||||
} else {
|
||||
if( "horizontal" == options.scroll ){
|
||||
@ -114,7 +114,7 @@ $.ReferenceStrip = function( options ){
|
||||
|
||||
viewer.addControl(
|
||||
this.element,
|
||||
$.ControlAnchor.BOTTOM_LEFT
|
||||
{anchor: $.ControlAnchor.BOTTOM_LEFT}
|
||||
);
|
||||
}else {
|
||||
this.element.style.height = (
|
||||
@ -130,7 +130,7 @@ $.ReferenceStrip = function( options ){
|
||||
|
||||
viewer.addControl(
|
||||
this.element,
|
||||
$.ControlAnchor.TOP_LEFT
|
||||
{anchor: $.ControlAnchor.TOP_LEFT}
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
@ -230,7 +230,7 @@ $.Viewer = function( options ) {
|
||||
for ( i = 0; i < this.customControls.length; i++ ) {
|
||||
this.addControl(
|
||||
this.customControls[ i ].id,
|
||||
this.customControls[ i ].anchor
|
||||
{anchor: this.customControls[ i ].anchor}
|
||||
);
|
||||
}
|
||||
|
||||
@ -432,7 +432,7 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
|
||||
//Instantiate a navigator if configured
|
||||
if ( this.showNavigator && ! this.navigator && !this.collectionMode ){
|
||||
this.navigator = new $.Navigator({
|
||||
id: this.navigatorElement,
|
||||
id: this.navigatorId,
|
||||
position: this.navigatorPosition,
|
||||
sizeRatio: this.navigatorSizeRatio,
|
||||
height: this.navigatorHeight,
|
||||
@ -883,12 +883,12 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
|
||||
if( this.toolbar ){
|
||||
this.toolbar.addControl(
|
||||
this.pagingControl,
|
||||
$.ControlAnchor.BOTTOM_RIGHT
|
||||
{anchor: $.ControlAnchor.BOTTOM_RIGHT}
|
||||
);
|
||||
}else{
|
||||
this.addControl(
|
||||
this.pagingControl,
|
||||
$.ControlAnchor.TOP_LEFT
|
||||
{anchor: $.ControlAnchor.TOP_LEFT}
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1005,12 +1005,12 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
|
||||
if( this.toolbar ){
|
||||
this.toolbar.addControl(
|
||||
this.navControl,
|
||||
$.ControlAnchor.TOP_LEFT
|
||||
{anchor: $.ControlAnchor.TOP_LEFT}
|
||||
);
|
||||
}else{
|
||||
this.addControl(
|
||||
this.navControl,
|
||||
$.ControlAnchor.TOP_LEFT
|
||||
{anchor: $.ControlAnchor.TOP_LEFT}
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1135,7 +1135,9 @@ function updateControlsFade( viewer ) {
|
||||
opacity = Math.max( 0.0, opacity );
|
||||
|
||||
for ( i = viewer.controls.length - 1; i >= 0; i--) {
|
||||
viewer.controls[ i ].setOpacity( opacity );
|
||||
if (viewer.controls[ i ].autoFade) {
|
||||
viewer.controls[ i ].setOpacity( opacity );
|
||||
}
|
||||
}
|
||||
|
||||
if ( opacity > 0 ) {
|
||||
|
||||
64
test/navigatordemo.html
Normal file
64
test/navigatordemo.html
Normal file
@ -0,0 +1,64 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>OpenSeadragon Expose Origina Event Demo</title>
|
||||
<script type="text/javascript" src='openseadragon/build/openseadragon/openseadragon.js'></script>
|
||||
<script type="text/javascript" src='jquery-1.9.1.min.js'></script>
|
||||
<script type="text/javascript" src='jquery-ui-1.10.2.custom/js/jquery-ui-1.10.2.custom.min.js'></script>
|
||||
<link rel="stylesheet" type="text/css" href="jquery-ui-1.10.2.custom/css/smoothness/jquery-ui-1.10.2.custom.min.css"/>
|
||||
<style type="text/css">
|
||||
.openseadragon
|
||||
{
|
||||
width: 800px;
|
||||
height: 600px;
|
||||
border: 1px solid black;
|
||||
color: #333; /* text color for messages */
|
||||
background-color: black;
|
||||
}
|
||||
.openseadragon-small
|
||||
{
|
||||
width: 40px;
|
||||
height: 30px;
|
||||
border: 1px solid black;
|
||||
color: #333; /* text color for messages */
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="demoarea">
|
||||
<div>
|
||||
Simple demo page to verify that event handlers pass along the original source event
|
||||
</div>
|
||||
<div id="contentDiv" class="openseadragon"></div>
|
||||
<div id="navigatorDialog">
|
||||
<div id="navigatorDiv" class="findme"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
$('#navigatorDialog').dialog();
|
||||
|
||||
var viewer = OpenSeadragon({
|
||||
id:"contentDiv",
|
||||
navigatorId: "navigatorDiv",
|
||||
prefixUrl:"openseadragon/build/openseadragon/images/",
|
||||
tileSources:{
|
||||
Image:{
|
||||
xmlns:"http://schemas.microsoft.com/deepzoom/2008",
|
||||
Url:"example-images/highsmith/highsmith_files/",
|
||||
Format:"jpg",
|
||||
Overlap:"2",
|
||||
TileSize:"256",
|
||||
Size:{
|
||||
Height:"9221",
|
||||
Width:"7026"
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user