From 8758e947be9b7458f9b89bebebacfd0c690f943d Mon Sep 17 00:00:00 2001 From: bleams Date: Fri, 29 Jan 2016 10:00:50 +0100 Subject: [PATCH 1/3] fix attempts on the large previewer issues --- .../interactions/UploadInteraction.js | 61 ++++++++++++++++--- views/scss/qti/_upload.scss | 28 ++++++--- 2 files changed, 72 insertions(+), 17 deletions(-) diff --git a/views/js/qtiCommonRenderer/renderers/interactions/UploadInteraction.js b/views/js/qtiCommonRenderer/renderers/interactions/UploadInteraction.js index 3a06c5d2bd..494e6ba9dc 100755 --- a/views/js/qtiCommonRenderer/renderers/interactions/UploadInteraction.js +++ b/views/js/qtiCommonRenderer/renderers/interactions/UploadInteraction.js @@ -32,6 +32,7 @@ define([ 'ui/progressbar', 'ui/previewer', 'ui/modal', + 'ui/waitForMedia', 'filereader' ], function ($, _, __, context, tpl, containerHelper, instructionMgr) { 'use strict'; @@ -90,20 +91,58 @@ define([ type: filetype.substr(0, filetype.indexOf('/')) }); - var $previewImg = $('img', $previewArea), - $largeDisplayer = $('.file-upload-preview-popup'), - $modalBody = $largeDisplayer.find('.modal-body'); + // we wait for the image to be completely loaded + $previewArea.waitForMedia(function(){ + var $originalImg = $previewArea.find('img'), // the previable image + imgNaturalWidth = $originalImg[0].naturalWidth; + //imgNaturalHeight = $originalImg[0].naturalHeight; - $previewImg.on('click', function (e) { - // remove any previous unnecessary content - $modalBody.empty(); + // if the image natural width is smaller than the qti-item, we do nothing + if( imgNaturalWidth <= $('.qti-item').width() ) { + return; + } + + // otherwise, we allow the user to see the preview image in its natural width inside the modal + $previewArea.on('click', function(){ + + console.log(imgNaturalWidth); + + var $popupImg = $originalImg.clone(), + $largeDisplayer = $('.file-upload-preview-popup'), + $modalBody = $largeDisplayer.find('.modal-body'), + winWidth = $(window).width(); + + // remove any previous unnecessary content before inserting the preview image + $modalBody.empty().append($popupImg); + + $largeDisplayer + .on('opened.modal', function(){ + console.log($modalBody.length); + // setting the modal width depending on the size of the popup image + var width = Math.min(winWidth, imgNaturalWidth); + + // prevents the rest of the page from scrolling when modal is open + $('.tao-item-scope.tao-preview-scope').css('overflow', 'hidden'); + + $largeDisplayer.width(width); + $largeDisplayer.height($(document).height()); + }) + .on('closed.modal', function(){ + // make the page scrollable again + $('.tao-item-scope.tao-preview-scope').css('overflow', 'auto'); + + //$largeDisplayer.modal('destroy'); + }) + .modal(); + /*.on('destroyed.modal', function(){ + console.log('destroyed'); + })*/ + + }); - var $clonedImg = $(this).clone(); - $modalBody.append($clonedImg); - $largeDisplayer.modal(); }); @@ -120,6 +159,10 @@ define([ $container.find('.progressbar').progressbar('value', percentProgress); }; + /*reader.onloadend = function () { + console.log('end load', $('.modal-body').length ); + }; +*/ reader.readAsDataURL(file); }; diff --git a/views/scss/qti/_upload.scss b/views/scss/qti/_upload.scss index 5b6f956802..400515db65 100755 --- a/views/scss/qti/_upload.scss +++ b/views/scss/qti/_upload.scss @@ -38,18 +38,19 @@ height: auto; position: relative; overflow: hidden; - cursor: pointer; - display: none; - &.visible-file-upload-preview { - display: block; - } + //display: none; + + //&.visible-file-upload-preview { + // display: block; + //} &.runtime-visible-file-upload-preview { min-width: unset; min-height: unset; height: auto; background: transparent; + //cursor: pointer; } p.nopreview { @@ -77,16 +78,27 @@ .file-upload-preview-popup { padding: 40px 0; max-width: 100%; - width: auto !important; + overflow: scroll; + //width: auto !important; // position absolute allows the scroll on the a big picture - &.modal { - position: absolute; + //&.modal { + // position: absolute; + //} + + //& > div { + // min-height: 100%; + // min-width: 100%; + //} + + .modal-body { + overflow: scroll; } img { display: block; margin: auto; + max-width: none; } } } From de145df84ddd7417a1c14a31257b6159444682b4 Mon Sep 17 00:00:00 2001 From: bleams Date: Fri, 29 Jan 2016 15:33:30 +0100 Subject: [PATCH 2/3] new fixes for the file upload previewer --- .../interactions/UploadInteraction.js | 34 ++++++++++++------- views/scss/qti/_upload.scss | 18 ++++++---- 2 files changed, 33 insertions(+), 19 deletions(-) diff --git a/views/js/qtiCommonRenderer/renderers/interactions/UploadInteraction.js b/views/js/qtiCommonRenderer/renderers/interactions/UploadInteraction.js index 494e6ba9dc..46d093f23e 100755 --- a/views/js/qtiCommonRenderer/renderers/interactions/UploadInteraction.js +++ b/views/js/qtiCommonRenderer/renderers/interactions/UploadInteraction.js @@ -84,7 +84,7 @@ define([ var $previewArea = $container.find('.file-upload-preview'); $previewArea - .toggleClass('visible-file-upload-preview runtime-visible-file-upload-preview', visibleFileUploadPreview.isPreviewable) + .toggleClass('visible-file-upload-preview runtime-visible-file-upload-preview', !visibleFileUploadPreview.isPreviewable) .previewer({ url: reader.result, name: filename, @@ -95,8 +95,8 @@ define([ $previewArea.waitForMedia(function(){ var $originalImg = $previewArea.find('img'), // the previable image - imgNaturalWidth = $originalImg[0].naturalWidth; - //imgNaturalHeight = $originalImg[0].naturalHeight; + imgNaturalWidth = $originalImg[0].naturalWidth, + imgNaturalHeight = $originalImg[0].naturalHeight; // if the image natural width is smaller than the qti-item, we do nothing if( imgNaturalWidth <= $('.qti-item').width() ) { @@ -111,34 +111,44 @@ define([ var $popupImg = $originalImg.clone(), $largeDisplayer = $('.file-upload-preview-popup'), $modalBody = $largeDisplayer.find('.modal-body'), - winWidth = $(window).width(); + winWidth = $(window).width(), + winHeight = $(window).height(), + $modalOverlay = $container.find('.modal-bg'), + $taoItemScope = $('.tao-item-scope'); + + if( imgNaturalWidth <= $('.qti-item').width() ) { + $largeDisplayer.modal('remove'); + } // remove any previous unnecessary content before inserting the preview image + $modalOverlay.remove(); $modalBody.empty().append($popupImg); + $popupImg.wrap('
'); + $largeDisplayer .on('opened.modal', function(){ - console.log($modalBody.length); // setting the modal width depending on the size of the popup image var width = Math.min(winWidth, imgNaturalWidth); + var height = Math.min(winHeight, imgNaturalHeight); // prevents the rest of the page from scrolling when modal is open - $('.tao-item-scope.tao-preview-scope').css('overflow', 'hidden'); + $taoItemScope.css('overflow', 'hidden'); $largeDisplayer.width(width); - $largeDisplayer.height($(document).height()); + $largeDisplayer.height(height); + + console.log('$largeDisplayer width =' , $largeDisplayer.width()); + console.log('$largeDisplayer height =' , $largeDisplayer.height()); + console.log('imgNaturalHeight' , imgNaturalHeight); }) .on('closed.modal', function(){ // make the page scrollable again - $('.tao-item-scope.tao-preview-scope').css('overflow', 'auto'); + $taoItemScope.css('overflow', 'auto'); - //$largeDisplayer.modal('destroy'); }) .modal(); - /*.on('destroyed.modal', function(){ - console.log('destroyed'); - })*/ }); diff --git a/views/scss/qti/_upload.scss b/views/scss/qti/_upload.scss index 400515db65..06b6f34bcd 100755 --- a/views/scss/qti/_upload.scss +++ b/views/scss/qti/_upload.scss @@ -78,7 +78,8 @@ .file-upload-preview-popup { padding: 40px 0; max-width: 100%; - overflow: scroll; + overflow: auto; + top: 0 !important; //width: auto !important; // position absolute allows the scroll on the a big picture @@ -86,19 +87,22 @@ // position: absolute; //} - //& > div { - // min-height: 100%; - // min-width: 100%; - //} - .modal-body { - overflow: scroll; + overflow: auto; + height: 100%; + width: 100%; + + div { + height: 100%; + width: 100%; + } } img { display: block; margin: auto; max-width: none; + overflow: auto; } } } From 225a1f742bf9cf4dd93d23c62531aae1c8f3b0d3 Mon Sep 17 00:00:00 2001 From: bleams Date: Fri, 29 Jan 2016 15:59:26 +0100 Subject: [PATCH 3/3] last fixes. from now on all should work as wanted --- .../interactions/UploadInteraction.js | 30 ++++++++----------- views/scss/qti/_upload.scss | 4 +++ 2 files changed, 17 insertions(+), 17 deletions(-) diff --git a/views/js/qtiCommonRenderer/renderers/interactions/UploadInteraction.js b/views/js/qtiCommonRenderer/renderers/interactions/UploadInteraction.js index 46d093f23e..df4f901a68 100755 --- a/views/js/qtiCommonRenderer/renderers/interactions/UploadInteraction.js +++ b/views/js/qtiCommonRenderer/renderers/interactions/UploadInteraction.js @@ -94,7 +94,7 @@ define([ // we wait for the image to be completely loaded $previewArea.waitForMedia(function(){ - var $originalImg = $previewArea.find('img'), // the previable image + var $originalImg = $previewArea.find('img'), // the previewable image imgNaturalWidth = $originalImg[0].naturalWidth, imgNaturalHeight = $originalImg[0].naturalHeight; @@ -104,9 +104,17 @@ define([ } // otherwise, we allow the user to see the preview image in its natural width inside the modal + + $originalImg.addClass('cursor-pointer'); + $previewArea.on('click', function(){ - console.log(imgNaturalWidth); + var $self = $(this), + clickedImgNatWidth = $self.find('img')[0].naturalWidth; + + if( clickedImgNatWidth <= $('.qti-item').width() ) { + return; + } var $popupImg = $originalImg.clone(), $largeDisplayer = $('.file-upload-preview-popup'), @@ -116,9 +124,6 @@ define([ $modalOverlay = $container.find('.modal-bg'), $taoItemScope = $('.tao-item-scope'); - if( imgNaturalWidth <= $('.qti-item').width() ) { - $largeDisplayer.modal('remove'); - } // remove any previous unnecessary content before inserting the preview image $modalOverlay.remove(); @@ -133,20 +138,15 @@ define([ var width = Math.min(winWidth, imgNaturalWidth); var height = Math.min(winHeight, imgNaturalHeight); - // prevents the rest of the page from scrolling when modal is open - $taoItemScope.css('overflow', 'hidden'); - $largeDisplayer.width(width); $largeDisplayer.height(height); - console.log('$largeDisplayer width =' , $largeDisplayer.width()); - console.log('$largeDisplayer height =' , $largeDisplayer.height()); - console.log('imgNaturalHeight' , imgNaturalHeight); - }) + // prevents the rest of the page from scrolling when modal is open + $taoItemScope.css('overflow', 'hidden'); + }) .on('closed.modal', function(){ // make the page scrollable again $taoItemScope.css('overflow', 'auto'); - }) .modal(); @@ -169,10 +169,6 @@ define([ $container.find('.progressbar').progressbar('value', percentProgress); }; - /*reader.onloadend = function () { - console.log('end load', $('.modal-body').length ); - }; -*/ reader.readAsDataURL(file); }; diff --git a/views/scss/qti/_upload.scss b/views/scss/qti/_upload.scss index 06b6f34bcd..ac703b4437 100755 --- a/views/scss/qti/_upload.scss +++ b/views/scss/qti/_upload.scss @@ -73,6 +73,10 @@ display: block !important; } } + + img.cursor-pointer { + cursor: pointer; + } } .file-upload-preview-popup {