diff --git a/app/apps/core/static/js/panels/transcription.js b/app/apps/core/static/js/panels/transcription.js index f572ad962d563f1b2d8adfa65a6086becdfc46e8..e00ba6e14eace7e51cad7bd54c318ab792749625 100644 --- a/app/apps/core/static/js/panels/transcription.js +++ b/app/apps/core/static/js/panels/transcription.js @@ -288,6 +288,9 @@ class TranscriptionPanel extends Panel { $('#trans-modal #trans-input .ql-editor').html($('.js-version-content', $tr).html()); }); + + this.$container = $('.img-container', this.$panel); + WheelZoom(this.$container, false, 1, 1); editor = new Quill('#trans-input', { theme: 'bubble', @@ -328,7 +331,9 @@ class TranscriptionPanel extends Panel { this.addLine(this.part.lines[i]); } super.load(part); - this.$panel.css('min-height', this.bottom*this.ratio+20); + + $('.zoom-container', this.$container).css('height', this.bottom*this.ratio+20); + this.$container.trigger('wheelzoom.refresh'); } reset() { @@ -339,6 +344,7 @@ class TranscriptionPanel extends Panel { this.lines[i].setPosition(); } } - this.$panel.css('min-height', this.bottom*this.ratio+20); + $('.zoom-container', this.$container).css('height', this.bottom*this.ratio+20); + this.$container.trigger('wheelzoom.refresh'); } } diff --git a/app/escriptorium/static/js/wheelzoom.js b/app/escriptorium/static/js/wheelzoom.js index 0db730c9aa88a5781decb6c28dcbebb99cc28a53..d272e98be7b4c80aec213f1938da0dd9f0d6212c 100644 --- a/app/escriptorium/static/js/wheelzoom.js +++ b/app/escriptorium/static/js/wheelzoom.js @@ -8,7 +8,7 @@ function WheelZoom(container, disabled_, initial_scale, min_scale_opt, max_scale var zoom_target = {x:0, y:0}; var zoom_point = {x:0, y:0}; var previousEvent; - var disabled = disabled_; + var disabled = disabled_ || target.height() === 0; target.css({transformOrigin: '0 0', transition: 'transform 0.3s', cursor: 'zoom-in'}); container.on("mousewheel DOMMouseScroll", scrolled); container.on('mousedown', draggable); @@ -112,6 +112,7 @@ function WheelZoom(container, disabled_, initial_scale, min_scale_opt, max_scale function refresh() { size = {w: target.width(), h: target.height()}; + disabled = disabled_ || target.height() === 0; api.min_scale = min_scale_opt || Math.min( $(window).width() / (size.w * initial_scale) * 0.9, $(window).height() / (size.h * initial_scale) * 0.9);