From 0f89388ff7db429b26233e3190d6a6184fdf6e93 Mon Sep 17 00:00:00 2001 From: Ray Nicholus Date: Mon, 23 Dec 2013 17:01:48 -0600 Subject: [PATCH] feat($session) #784 thumbnail-related fixes & cache buster --- client/js/session.ajax.requester.js | 7 +++- client/js/templating.js | 54 ++++++++++++++++++----------- client/js/uploader.api.js | 2 +- client/js/uploader.basic.api.js | 12 ++++--- 4 files changed, 48 insertions(+), 27 deletions(-) diff --git a/client/js/session.ajax.requester.js b/client/js/session.ajax.requester.js index 85a29760c..6b93d32d3 100644 --- a/client/js/session.ajax.requester.js +++ b/client/js/session.ajax.requester.js @@ -52,10 +52,15 @@ qq.SessionAjaxRequester = function(spec) { qq.extend(this, { queryServer: function() { + var params = qq.extend({}, options.params); + + // cache buster, particularly for IE & iOS + params.qqcache = new Date().getTime(); + options.log("Session query request."); requester.initTransport("sessionRefresh") - .withParams(options.params) + .withParams(params) .send(); } }); diff --git a/client/js/templating.js b/client/js/templating.js index 5a7949025..a6eccc1b3 100644 --- a/client/js/templating.js +++ b/client/js/templating.js @@ -61,6 +61,8 @@ qq.Templating = function(spec) { thumbnail: "qq-thumbnail-selector" }, previewGeneration = {}, + cachedThumbnailNotAvailableImg = new qq.Promise(), + cachedWaitingForThumbnailImg = new qq.Promise(), log, isEditElementsExist, isRetryElementExist, @@ -68,9 +70,7 @@ qq.Templating = function(spec) { container, fileList, showThumbnails, - serverScale, - cachedThumbnailNotAvailableImg, - cachedWaitingForThumbnailImg; + serverScale; /** * Grabs the HTML from the script tag holding the template markup. This function will also adjust @@ -300,41 +300,51 @@ qq.Templating = function(spec) { if (notAvailableUrl) { options.imageGenerator.generate(notAvailableUrl, new Image(), spec).then( function(updatedImg) { - cachedThumbnailNotAvailableImg = updatedImg; + cachedThumbnailNotAvailableImg.success(updatedImg); }, function() { + cachedThumbnailNotAvailableImg.failure(); log("Problem loading 'not available' placeholder image at " + notAvailableUrl, "error"); } ); } + else { + cachedThumbnailNotAvailableImg.failure(); + } if (waitingUrl) { options.imageGenerator.generate(waitingUrl, new Image(), spec).then( function(updatedImg) { - cachedWaitingForThumbnailImg = updatedImg; + cachedWaitingForThumbnailImg.success(updatedImg); }, function() { + cachedWaitingForThumbnailImg.failure(); log("Problem loading 'waiting for thumbnail' placeholder image at " + waitingUrl, "error"); } ); } + else { + cachedWaitingForThumbnailImg.failure(); + } } } // Displays a "waiting for thumbnail" type placeholder image // iff we were able to load it during initialization of the templating module. function displayWaitingImg(thumbnail) { - if (cachedWaitingForThumbnailImg) { - maybeScalePlaceholderViaCss(cachedWaitingForThumbnailImg, thumbnail); - thumbnail.src = cachedWaitingForThumbnailImg.src; - show(thumbnail); - } - // In some browsers (such as IE9 and older) an img w/out a src attribute - // are displayed as "broken" images, so we sohuld just hide the img tag - // if we aren't going to display the "waiting" placeholder. - else { + cachedWaitingForThumbnailImg.then(function(img) { + maybeScalePlaceholderViaCss(img, thumbnail); + /* jshint eqnull:true */ + if (thumbnail.getAttribute("src") == null) { + thumbnail.src = img.src; + show(thumbnail); + } + }, function() { + // In some browsers (such as IE9 and older) an img w/out a src attribute + // are displayed as "broken" images, so we sohuld just hide the img tag + // if we aren't going to display the "waiting" placeholder. hide(thumbnail); - } + }); } // Displays a "thumbnail not available" type placeholder image @@ -343,19 +353,19 @@ qq.Templating = function(spec) { function maybeSetDisplayNotAvailableImg(id, thumbnail) { var previewing = previewGeneration[id] || new qq.Promise().failure(); - if (cachedThumbnailNotAvailableImg) { + cachedThumbnailNotAvailableImg.then(function(img) { previewing.then( function() { delete previewGeneration[id]; }, function() { - maybeScalePlaceholderViaCss(cachedThumbnailNotAvailableImg, thumbnail); - thumbnail.src = cachedThumbnailNotAvailableImg.src; + maybeScalePlaceholderViaCss(img, thumbnail); + thumbnail.src = img.src; show(thumbnail); delete previewGeneration[id]; } ); - } + }); } // Ensures a placeholder image does not exceed any max size specified @@ -693,7 +703,7 @@ qq.Templating = function(spec) { } }, - updateThumbnail: function(id, thumbnailUrl) { + updateThumbnail: function(id, thumbnailUrl, showWaitingImg) { var thumbnail = getThumbnail(id), spec = { maxSize: thumbnailMaxSize, @@ -702,6 +712,10 @@ qq.Templating = function(spec) { if (thumbnail) { if (thumbnailUrl) { + if (showWaitingImg) { + displayWaitingImg(thumbnail); + } + return options.imageGenerator.generate(thumbnailUrl, thumbnail, spec).then( function() { show(thumbnail); diff --git a/client/js/uploader.api.js b/client/js/uploader.api.js index 147d7c23a..fc14a348b 100644 --- a/client/js/uploader.api.js +++ b/client/js/uploader.api.js @@ -490,7 +490,7 @@ this._templating.addFile(id, this._options.formatFileName(name), prependData); if (canned) { - this._thumbnailUrls[id] && this._templating.updateThumbnail(id, this._thumbnailUrls[id]); + this._thumbnailUrls[id] && this._templating.updateThumbnail(id, this._thumbnailUrls[id], true); } else { this._templating.generatePreview(id, this.getFile(id)); diff --git a/client/js/uploader.basic.api.js b/client/js/uploader.basic.api.js index a082a8067..a5f8b6d8a 100644 --- a/client/js/uploader.basic.api.js +++ b/client/js/uploader.basic.api.js @@ -351,14 +351,16 @@ this._session = new qq.Session(options); } - this._session.refresh().then(function(response, xhrOrXdr) { + setTimeout(function() { + self._session.refresh().then(function(response, xhrOrXdr) { - self._options.callbacks.onSessionRequestComplete(response, true, xhrOrXdr); + self._options.callbacks.onSessionRequestComplete(response, true, xhrOrXdr); - }, function(response, xhrOrXdr) { + }, function(response, xhrOrXdr) { - self._options.callbacks.onSessionRequestComplete(response, false, xhrOrXdr); - }); + self._options.callbacks.onSessionRequestComplete(response, false, xhrOrXdr); + }); + }, 0); } },