2011-12-06 07:50:25 +04:00
|
|
|
|
|
|
|
(function( $ ){
|
|
|
|
|
2011-12-14 02:38:36 +04:00
|
|
|
$.OverlayPlacement = {
|
2012-01-24 07:48:45 +04:00
|
|
|
CENTER: 0,
|
|
|
|
TOP_LEFT: 1,
|
|
|
|
TOP: 2,
|
|
|
|
TOP_RIGHT: 3,
|
|
|
|
RIGHT: 4,
|
2011-12-14 02:38:36 +04:00
|
|
|
BOTTOM_RIGHT: 5,
|
2012-01-24 07:48:45 +04:00
|
|
|
BOTTOM: 6,
|
|
|
|
BOTTOM_LEFT: 7,
|
|
|
|
LEFT: 8
|
2011-12-14 02:38:36 +04:00
|
|
|
};
|
2011-12-06 07:50:25 +04:00
|
|
|
|
2012-01-24 07:48:45 +04:00
|
|
|
$.Overlay = function( elmt, location, placement ) {
|
2011-12-14 02:38:36 +04:00
|
|
|
this.elmt = elmt;
|
2011-12-30 02:14:42 +04:00
|
|
|
this.scales = location instanceof $.Rect;
|
|
|
|
this.bounds = new $.Rect(
|
|
|
|
location.x,
|
|
|
|
location.y,
|
|
|
|
location.width,
|
2012-01-24 07:48:45 +04:00
|
|
|
location.height
|
|
|
|
);
|
2011-12-30 02:14:42 +04:00
|
|
|
this.position = new $.Point(
|
|
|
|
location.x,
|
|
|
|
location.y
|
|
|
|
);
|
|
|
|
this.size = new $.Point(
|
|
|
|
location.width,
|
|
|
|
location.height
|
|
|
|
);
|
2011-12-14 02:38:36 +04:00
|
|
|
this.style = elmt.style;
|
|
|
|
// rects are always top-left
|
2011-12-30 02:14:42 +04:00
|
|
|
this.placement = location instanceof $.Point ?
|
2011-12-14 02:38:36 +04:00
|
|
|
placement :
|
|
|
|
$.OverlayPlacement.TOP_LEFT;
|
|
|
|
};
|
2011-12-06 07:50:25 +04:00
|
|
|
|
2011-12-14 02:38:36 +04:00
|
|
|
$.Overlay.prototype = {
|
2011-12-06 07:50:25 +04:00
|
|
|
|
2012-01-24 07:48:45 +04:00
|
|
|
adjust: function( position, size ) {
|
|
|
|
switch ( this.placement ) {
|
2011-12-14 02:38:36 +04:00
|
|
|
case $.OverlayPlacement.TOP_LEFT:
|
|
|
|
break;
|
|
|
|
case $.OverlayPlacement.TOP:
|
|
|
|
position.x -= size.x / 2;
|
|
|
|
break;
|
|
|
|
case $.OverlayPlacement.TOP_RIGHT:
|
|
|
|
position.x -= size.x;
|
|
|
|
break;
|
|
|
|
case $.OverlayPlacement.RIGHT:
|
|
|
|
position.x -= size.x;
|
|
|
|
position.y -= size.y / 2;
|
|
|
|
break;
|
|
|
|
case $.OverlayPlacement.BOTTOM_RIGHT:
|
|
|
|
position.x -= size.x;
|
|
|
|
position.y -= size.y;
|
|
|
|
break;
|
|
|
|
case $.OverlayPlacement.BOTTOM:
|
|
|
|
position.x -= size.x / 2;
|
|
|
|
position.y -= size.y;
|
|
|
|
break;
|
|
|
|
case $.OverlayPlacement.BOTTOM_LEFT:
|
|
|
|
position.y -= size.y;
|
|
|
|
break;
|
|
|
|
case $.OverlayPlacement.LEFT:
|
|
|
|
position.y -= size.y / 2;
|
|
|
|
break;
|
|
|
|
case $.OverlayPlacement.CENTER:
|
|
|
|
default:
|
|
|
|
position.x -= size.x / 2;
|
|
|
|
position.y -= size.y / 2;
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
},
|
2012-01-24 07:48:45 +04:00
|
|
|
|
2011-12-14 02:38:36 +04:00
|
|
|
destroy: function() {
|
2012-01-24 07:48:45 +04:00
|
|
|
var element = this.elmt,
|
|
|
|
style = this.style;
|
2011-12-14 02:38:36 +04:00
|
|
|
|
2012-01-24 07:48:45 +04:00
|
|
|
if ( element.parentNode ) {
|
|
|
|
element.parentNode.removeChild( element );
|
2011-12-14 02:38:36 +04:00
|
|
|
}
|
2011-12-06 07:50:25 +04:00
|
|
|
|
2011-12-14 02:38:36 +04:00
|
|
|
style.top = "";
|
|
|
|
style.left = "";
|
|
|
|
style.position = "";
|
2011-12-06 07:50:25 +04:00
|
|
|
|
2012-01-24 07:48:45 +04:00
|
|
|
if ( this.scales ) {
|
2011-12-14 02:38:36 +04:00
|
|
|
style.width = "";
|
|
|
|
style.height = "";
|
|
|
|
}
|
|
|
|
},
|
2012-01-24 07:48:45 +04:00
|
|
|
|
2011-12-30 02:14:42 +04:00
|
|
|
drawHTML: function( container ) {
|
2012-01-24 07:48:45 +04:00
|
|
|
var element = this.elmt,
|
2011-12-30 02:14:42 +04:00
|
|
|
style = this.style,
|
|
|
|
scales = this.scales,
|
|
|
|
position,
|
|
|
|
size;
|
|
|
|
|
2012-01-24 07:48:45 +04:00
|
|
|
if ( element.parentNode != container ) {
|
|
|
|
container.appendChild( element );
|
2011-12-14 02:38:36 +04:00
|
|
|
}
|
2011-12-06 07:50:25 +04:00
|
|
|
|
2011-12-30 02:14:42 +04:00
|
|
|
if ( !scales ) {
|
2012-01-24 07:48:45 +04:00
|
|
|
this.size = $.getElementSize( element );
|
2011-12-14 02:38:36 +04:00
|
|
|
}
|
2011-12-06 07:50:25 +04:00
|
|
|
|
2011-12-30 02:14:42 +04:00
|
|
|
position = this.position;
|
|
|
|
size = this.size;
|
2011-12-14 02:38:36 +04:00
|
|
|
|
2011-12-30 02:14:42 +04:00
|
|
|
this.adjust( position, size );
|
2011-12-14 02:38:36 +04:00
|
|
|
|
2011-12-30 02:14:42 +04:00
|
|
|
position = position.apply( Math.floor );
|
|
|
|
size = size.apply( Math.ceil );
|
2011-12-14 02:38:36 +04:00
|
|
|
|
2011-12-30 02:14:42 +04:00
|
|
|
style.left = position.x + "px";
|
|
|
|
style.top = position.y + "px";
|
2011-12-14 02:38:36 +04:00
|
|
|
style.position = "absolute";
|
|
|
|
|
2011-12-30 02:14:42 +04:00
|
|
|
if ( scales ) {
|
|
|
|
style.width = size.x + "px";
|
2011-12-14 02:38:36 +04:00
|
|
|
style.height = size.y + "px";
|
|
|
|
}
|
|
|
|
},
|
2012-01-24 07:48:45 +04:00
|
|
|
|
|
|
|
update: function( location, placement ) {
|
|
|
|
this.scales = location instanceof $.Rect;
|
|
|
|
this.bounds = new $.Rect(
|
|
|
|
location.x,
|
|
|
|
location.y,
|
|
|
|
location.width,
|
|
|
|
location.height
|
|
|
|
);
|
2011-12-30 02:14:42 +04:00
|
|
|
// rects are always top-left
|
2012-01-24 07:48:45 +04:00
|
|
|
this.placement = location instanceof $.Point ?
|
|
|
|
placement :
|
|
|
|
$.OverlayPlacement.TOP_LEFT;
|
2011-12-06 07:50:25 +04:00
|
|
|
}
|
2011-12-14 02:38:36 +04:00
|
|
|
|
|
|
|
};
|
2011-12-06 07:50:25 +04:00
|
|
|
|
|
|
|
}( OpenSeadragon ));
|