feat(ui): split export image in two layers

One layer is for locally generated canvas; the other, remotely generated. Fixes issue with Firefox where the preview image wouldn't update after setting src to the new dataurl. Doesn't not apply to IE of course. Signed-off-by: Aleksuei Riabtsev <aleksuei.riabtsev@ec.gc.ca>
RAMP-PCAR · Jul 6, 2015 · 7c3da87 · 7c3da87
1 parent f0abf54
commit 7c3da87
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 28 deletions.
diff --git a/site/includes/mapexport.hbs b/site/includes/mapexport.hbs
@@ -4,7 +4,8 @@
         <div class="row">
             <div class="map-export-preview">
                 <div class="map-export-image">
-                    <img class="blurred-5" src="data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=" crossorigin="anonymous" alt="">
+                    <img class="remote blurred-5" src="data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=" crossorigin="anonymous" alt="">
+                    <img class="local blurred-5" src="data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=" crossorigin="anonymous" alt="">
                 </div>
                 <div class="map-export-stretcher" role="presentation">
                     <div class="map-export-notice-container">

diff --git a/src/css/toolbar/map-export.less b/src/css/toolbar/map-export.less
@@ -107,6 +107,11 @@
         //padding: 1px;
         img {
             width: 100%;
+
+            &.local {
+                position: absolute;
+                top: 0;
+            }
         }
     }
 

diff --git a/src/js/RAMP/Modules/imageExport.js b/src/js/RAMP/Modules/imageExport.js
@@ -56,6 +56,7 @@ define([
         var ui = (function () {
             var mapExportToggle,
                 mapExportStretcher,
+                mapExportImgLocal,
                 mapExportImg,
                 mapExportSpinner,
 
@@ -117,7 +118,11 @@ define([
                     .set(mapExportNotice, { display: "none" }) // hide error notice
                     .set(mapExportSpinner, { display: "block" }) // show loading animation
                     .set(mapExportImg, { display: "none" }) // hide image
-                    .call(function () { mapExportImg.attr("src", ""); })
+                    .set(mapExportImgLocal, { display: "none" }) // hide image
+                    .call(function () {
+                        mapExportImg.attr("src", "");
+                        mapExportImgLocal.attr("src", "");
+                    })
                     .set(mapExportStretcher, { clearProps: "all" })
                 ;
 
@@ -131,40 +136,47 @@ define([
 
                         console.log('--->', event);
 
-                        // no canvas smashing for IE...
-                        if (RAMP.flags.brokenWebBrowser || RAMP.flags.ie10client) {
-                            // wait for the image to fully load
-                            mapExportImg.on("load", function () {
-                                mapExportImg.attr({ class: '' });
+                        // wait for the image to fully load
+                        mapExportImg.on("load", function (event) {
+
+                            // no canvas smashing for IE...
+                            if (RAMP.flags.brokenWebBrowser || RAMP.flags.ie10client) {
+
+                                mapExportImg.attr({ class: 'remote' });
                                 mapExportSpinner.css({ display: "none" });
 
                                 downloadDropdown
                                     .find(".btn")
                                     .attr({ disabled: false })
                                 ;
-                                mapExportImg.off("load");
-                            });
-                        } else {
-                            // create a canvas out of feature and file layers
-                            html2canvas($("#mainMap_layers"), {
-                                onrendered: function (c) {
-                                    localCanvas = c;
-                                    d.resolve();
-                                }
-                            });
-
-                            // wait for the image to fully load
-                            mapExportImg.on("load", function (event) {
+                            } else {
+
+                                // create a canvas out of feature and file layers
+                                html2canvas($("#mainMap_layers"), {
+                                    onrendered: function (c) {
+                                        localCanvas = c;
+
+                                        //show image with local canvas
+                                        mapExportImgLocal
+                                            .attr({ src: c.toDataURL(), class: 'local' })
+                                            .css({ display: 'block' })
+                                        ;
+
+                                        d.resolve();
+                                    }
+                                });
+
                                 // convert image to canvas for saving
-                                canvas = MiscUtil.convertImageToCanvas(event.target);//,
+                                canvas = MiscUtil.convertImageToCanvas(event.target);
                                 d.promise.then(function () {
                                     // smash local and print service canvases
                                     var tc = canvas.getContext('2d');
                                     tc.drawImage(localCanvas, 0, 0);
                                     canvas = tc.canvas;
 
-                                    // update preview image
-                                    mapExportImg.attr({ src: canvas.toDataURL(), class: '' });
+                                    //// update preview image
+                                    //mapExportImg.attr({ src: canvas.toDataURL(), class: '' });
+                                    mapExportImg.attr({ class: 'remote' });
                                     // hide loading animation
                                     mapExportSpinner.css({ display: "none" });
 
@@ -175,9 +187,9 @@ define([
                                     ;
                                 });
 
-                                mapExportImg.off("load");
-                            });
-                        }
+                            }
+                            mapExportImg.off("load");
+                        });
 
                         tl
                             .call(function () { downloadDefault.attr({ href: event.result.url }); }) // set default button url to image url - for IE9 sake
@@ -214,7 +226,8 @@ define([
 
                     mapExportToggle = $("#map-export-toggle");
                     mapExportStretcher = $(".map-export-stretcher");
-                    mapExportImg = $(".map-export-image > img");
+                    mapExportImgLocal = $(".map-export-image > img.local");
+                    mapExportImg = $(".map-export-image > img.remote");
                     mapExportSpinner = mapExportStretcher.find(".loading-simple");
 
                     mapExportNoticeContainer = mapExportStretcher.find(".map-export-notice-container");
@@ -289,7 +302,8 @@ define([
                             .attr({ disabled: true, href: "" })
                         ;
 
-                        mapExportImg.attr({ src: '', class: 'blurred-5' });
+                        mapExportImg.attr({ src: '', class: 'blurred-5 remote' });
+                        mapExportImgLocal.attr({ src: '', class: 'blurred-5 local' });
                     });
                 }
             };