diff --git a/themes/bootstrap3/css/vudl.css b/themes/bootstrap3/css/vudl.css
index 36c35992cd1561c1f252c7066626d933843e1564..360c0a9842cbb7cbf474450e975b1b3e9a60d0ed 100644
--- a/themes/bootstrap3/css/vudl.css
+++ b/themes/bootstrap3/css/vudl.css
@@ -18,6 +18,7 @@
.panel {border:1px solid #DDD}
.panel .panel-heading {background:#EEE}
+.panel-collapse {max-height:500px;}
.details {text-align:center}
.details .copyright {margin-bottom:1em}
@@ -46,6 +47,8 @@
#view #preview {max-width:100%}
.front {position:absolute;left:10%;top:150px;width:80%;z-index:5}
+#zoomy {background:#F0F0F0}
+
#allFiles .btn {display:block;margin:auto;max-width:400px}
#download-button .details {font-size:14px}
div.xml { display:block;font:10pt Courier;text-align:left;padding-left:1em }
diff --git a/themes/bootstrap3/js/vudl/record.js b/themes/bootstrap3/js/vudl/record.js
index 5a3e2fdb68be2677ba52f867c3b84cd4e3ea5c01..925d89828205196a9132be158d1a38c6693b71ba 100644
--- a/themes/bootstrap3/js/vudl/record.js
+++ b/themes/bootstrap3/js/vudl/record.js
@@ -23,8 +23,6 @@ function ajaxGetView(pageObject) {
} else {
currTab = $('.nav-tabs li a:eq(0)')[0].id;
}
- // Accordion size
- resizeAccordions();
},
error: function(d,e){
console.log(d.responseText);
@@ -123,31 +121,6 @@ function scrollToSelected() {
scrollTop: $('#collapse1 .selected').offset().top-$('#collapse1').offset().top+$('#collapse1').scrollTop()-12
});
}
-function scrollAdjust() {
- $('#collapse1').scrollTop($('#'+topScrollItem).offset().top-$('#collapse1').offset().top+$('#collapse1').scrollTop());
-}
-// Accordion size
-var vudlAccordionHeight
-function resizeAccordions(offset) {
- vudlAccordionHeight = window.innerHeight // Window height
- // Add scroll distance
- + Math.min($('#side-nav').position().top, document.body.scrollTop)
- // Minus the top of the accordion
- - $('#side-nav').position().top
- // Minus the target distance from the bottom
- - vudlSettings.accordion.bottom
- // Subtract height of the headers
- - ($('#side-nav .accordion-heading').length*vudlSettings.accordion.headerHeight);
- // All accordions
- $('#side-nav .panel-collapse').css({
- 'max-height':vudlAccordionHeight,
- 'overflow-y':'auto'
- });
- $('#zoom').css({
- 'height':vudlAccordionHeight,
- 'overflow-y':'auto'
- });
-}
// Toggle side menu
function toggleSideNav() {
$('#side-nav').toggle();
@@ -194,7 +167,4 @@ $(document).ready(function() {
});
});
// Initial alignment
-$( window ).load( scrollToSelected );
-// Accordion size
-$( window ).resize( resizeAccordions );
-$( document ).scroll( resizeAccordions );
\ No newline at end of file
+$( window ).load( scrollToSelected );
\ No newline at end of file
diff --git a/themes/bootstrap3/js/zoomy/canvas-zoomy.js b/themes/bootstrap3/js/zoomy/canvas-zoomy.js
index 54bc5600004e0d6cec66506cd28425d0823f0c2b..f25705b9ff47f227408da02ffa69c3fc7c9a652d 100644
--- a/themes/bootstrap3/js/zoomy/canvas-zoomy.js
+++ b/themes/bootstrap3/js/zoomy/canvas-zoomy.js
@@ -10,6 +10,7 @@ var Zoomy = {
Zoomy.canvas.height = Math.floor(Zoomy.canvas.clientHeight);
Zoomy.width = Zoomy.canvas.width;
Zoomy.height = Zoomy.canvas.height;
+ Zoomy.minimap = null;
Zoomy.rebound();
Zoomy.draw();
}, false);
@@ -42,6 +43,23 @@ var Zoomy = {
Math.TWO_PI = Math.PI*2;
Math.HALF_PI = Math.PI/2;
},
+ initMinimap: function() {
+ var aspectRatio = this.image.width / this.image.height;
+ var size = 150;
+ var mm = {
+ width : this.image.width > this.image.height ? size : size * aspectRatio,
+ height : this.image.height > this.image.width ? size : size / aspectRatio,
+ size : size
+ };
+ if(this.image.sideways) {
+ var t = mm.width;
+ mm.width = mm.height;
+ mm.height = t;
+ }
+ mm.x = this.width - (size+mm.width)/2 - 10;
+ mm.y = this.height - (size+mm.height)/2 - 10;
+ return mm;
+ },
mouseHandle: function(e) {
if(!Zoomy.mouseDown) return;
e.preventDefault();
@@ -78,14 +96,17 @@ var Zoomy = {
x: 0,
y: 0,
angle: 0,
+ sideways: false,
content: img,
transX: 0,
transY: 0,
}
+ Zoomy.minimap = null;
Zoomy.center();
},
draw: function() {
this.context.clearRect(0,0,this.width,this.height);
+ // Image
this.context.save();
this.context.translate(this.image.x, this.image.y);
this.context.rotate(this.image.angle);
@@ -96,6 +117,61 @@ var Zoomy = {
this.image.rheight
);
this.context.restore();
+ // Minimap
+ if(this.minimap == null) {
+ this.minimap = this.initMinimap();
+ }
+ this.context.save();
+ this.context.translate(this.minimap.x, this.minimap.y);
+ this.context.drawImage(
+ this.image.content,
+ 0, 0,
+ this.minimap.width,
+ this.minimap.height
+ );
+ this.context.strokeStyle = "#00F";
+
+ var hLength = (this.width / this.image.rwidth) * this.minimap.width;
+ var vLength = (this.height / this.image.rheight) * this.minimap.height;
+ var drawWidth = this.image.sideways ? vLength : hLength;
+ var drawHeight = this.image.sideways ? hLength : vLength;
+
+ var xdiff = this.image.sideways
+ ? -(this.image.y / this.image.height) * this.minimap.width
+ : -(this.image.x / this.image.width) * this.minimap.width;
+ var ydiff = this.image.sideways
+ ? -(this.image.x / this.image.width) * this.minimap.height
+ : -(this.image.y / this.image.height) * this.minimap.height;
+ switch(this.image.angle % Math.TWO_PI) {
+ case 0:
+ break;
+ case Math.HALF_PI: // On right side
+ ydiff = this.minimap.height - drawHeight - ydiff;
+ break;
+ case Math.PI: // Upside-down
+ xdiff = this.minimap.width - drawWidth - xdiff;
+ ydiff = this.minimap.height - drawHeight - ydiff;
+ break;
+ default: // On left side
+ xdiff = this.minimap.width - drawWidth - xdiff;
+ break;
+ }
+
+ if(drawWidth > this.minimap.width) {
+ xdiff = 0;
+ drawWidth = this.minimap.width;
+ }
+ if(drawHeight > this.minimap.height) {
+ ydiff = 0;
+ drawHeight = this.minimap.height;
+ }
+ this.context.strokeRect(
+ Math.max(0, xdiff),
+ Math.max(0, ydiff),
+ drawWidth,
+ drawHeight
+ );
+ this.context.restore();
},
center: function() {
this.width = this.canvas.width;
@@ -118,6 +194,7 @@ var Zoomy = {
this.image.angle = (this.image.angle + Math.PI + Math.HALF_PI) % Math.TWO_PI;
this.image.width = [this.image.height, this.image.height=this.image.width][0];
+ this.image.sideways = !this.image.sideways;
this.rebound();
this.draw();
@@ -130,6 +207,7 @@ var Zoomy = {
this.image.angle = (this.image.angle + Math.HALF_PI) % Math.TWO_PI;
this.image.width = [this.image.height, this.image.height=this.image.width][0];
+ this.image.sideways = !this.image.sideways;
this.rebound();
this.draw();
diff --git a/themes/bootstrap3/templates/vudl/views/page.phtml b/themes/bootstrap3/templates/vudl/views/page.phtml
index b2a1bc9a607330698632331e6f517d10fbb4aeb0..a6760b8ec1229e0588d983922deb903f781dd05a 100644
--- a/themes/bootstrap3/templates/vudl/views/page.phtml
+++ b/themes/bootstrap3/templates/vudl/views/page.phtml
@@ -41,9 +41,10 @@
// Initialize the size of Zoomy
$('#zoom-tab').on('shown.bs.tab', function(e) {
$('.loading-bar').removeClass('hidden');
- var sidenav = document.getElementById('side-nav');
- $('#zoomy').css('width', '100%');
- $('#zoomy').css('height', vudlAccordionHeight);
+ $('#zoomy').css({
+ 'width' : '100%',
+ 'height': Math.ceil($('#side-nav').offset().top+$('#side-nav').height()-$('#zoomy').offset().top)
+ });
Zoomy.init(document.getElementById('zoomy'));
Zoomy.load(pageData['large'], function() { $('.loading-bar').addClass('hidden'); });
});