X-Git-Url: https://svn.cri.ensmp.fr/git/Portfolio.git/blobdiff_plain/26f695c080134260ae2133136b62048dcd43c376..803504e79c7201ae6f4004c6ee9aa5275b3218c3:/skins/photo_film_viewer.js?ds=sidebyside diff --git a/skins/photo_film_viewer.js b/skins/photo_film_viewer.js index 35679e1..884dac0 100644 --- a/skins/photo_film_viewer.js +++ b/skins/photo_film_viewer.js @@ -289,6 +289,7 @@ FilmSlider.prototype.addEventListeners = function() { addListener(this.toolbar, 'click', function(evt){thisSlider.toolbarClickHandler(evt);}); addListener(window, 'load', function(evt){thisSlider.fitToScreen(evt);}); addListener(window, 'load', function(evt){thisSlider._checkSizeAfterLoad(evt);}); + addListener(window, 'load', function(evt){thisSlider.startThumbnailsLoadQueue(evt);}); // dd listeners addListener(this.slider, 'mousedown', this.ddHandlers.down); @@ -354,6 +355,18 @@ FilmSlider.prototype.mouseOutHandler = function(evt) { } }; +FilmSlider.prototype.translateImgUrl = function(url) { + var canonicalImgUrl; + if (this.ctxUrlTranslation[0]) { + canonicalImgUrl = url.replace(this.ctxUrlTranslation[0], + this.ctxUrlTranslation[1]); + } + else { + canonicalImgUrl = url; + } + return canonicalImgUrl; +}; + FilmSlider.prototype.thumbnailClickHandler = function(evt) { var target = getTargetedObject(evt); while (target.tagName !== 'A' && target !== this.filmBar) { target = target.parentNode; } @@ -370,12 +383,7 @@ FilmSlider.prototype.thumbnailClickHandler = function(evt) { history.pushState(target.href, '', target.href); var imgBaseUrl = target.href; - var canonicalImgUrl; - if (this.ctxUrlTranslation[0]) { - canonicalImgUrl = imgBaseUrl.replace(this.ctxUrlTranslation[0], - this.ctxUrlTranslation[1]); - } - else { canonicalImgUrl = imgBaseUrl; } + var canonicalImgUrl = this.translateImgUrl(imgBaseUrl); var ajaxUrl = imgBaseUrl + '/photo_view_ajax'; var thisFS = this; @@ -613,16 +621,46 @@ else if (browser.isIE6up) { FilmSlider.prototype.touchStartHandler = function(evt) { this.filmStartX = parseInt(this.film.style.left, 10); - this.touchStartX = evt.pageX; + this.touchStartX = evt.changedTouches[0].screenX; + this.touchStartTime = (new Date()).getTime(); }; FilmSlider.prototype.touchMoveHandler = function(evt) { - var delta = this.touchStartX - evt.pageX; + disableDefault(evt); + var delta = this.touchStartX - evt.changedTouches[0].screenX; var posX = this.filmStartX - delta; this.setFilmPosition(posX); + this.lastMoveTime = (new Date()).getTime(); }; FilmSlider.prototype.touchEndHandler = function(evt) { + var x = evt.changedTouches[0].screenX; + var delta = x - this.touchStartX; + if (delta) { + disableDefault(evt); + var now = (new Date()).getTime(); + if (now - this.lastMoveTime < 100) { + // au delà de 100 ms de maintient, on annule l'inertie + var speed = delta / (now - this.touchStartTime) + var x0 = parseInt(this.film.style.left, 10); + var t0 = (new Date()).getTime(); + var d = 500; // milisecondes + var delta = 0; + var dt = 25 + var self = this; + + function animate() { + // inertie + var t = (new Date()).getTime() - t0; + if (t < d) { + setTimeout(animate, dt); + delta = delta + (1-t/d) * speed * dt; // décelleration linéaire + self.setFilmPosition(x0 + delta); + } + } + animate(); + } + } this.touchStartX = undefined; }; @@ -692,11 +730,48 @@ FilmSlider.prototype.refreshImage = function() { FilmSlider.prototype.updateBreadcrumbs = function(url, title) { if (this.hasBreadcrumbs) { - this.lastBCElement.href = element.getAttribute('lastBcUrl'); - this.lastBCElement.innerHTML = element.getAttribute('img_id'); + this.lastBCElement.href = url; + this.lastBCElement.innerHTML = title; + } +}; + +FilmSlider.prototype.startThumbnailsLoadQueue = function(evt) { + var thumbnails = this.film.getElementsByTagName('img'); + if (thumbnails.length === 1) { return; } + this.thumbnailsLoadingOrder = []; + var leftSize = this.center; + var rightSize = thumbnails.length - this.center - 1; + var i; + for (i=1 ; i<=Math.min(leftSize, rightSize) ; i++) { + this.thumbnailsLoadingOrder.push(thumbnails[this.center + i]); + this.thumbnailsLoadingOrder.push(thumbnails[this.center - i]); + } + if (leftSize > rightSize) { + for (i = this.center - rightSize - 1 ; i >= 0 ; i--) { + console.log(i); + this.thumbnailsLoadingOrder.push(thumbnails[i]); + } + } + else if (leftSize < rightSize) { + for (i = this.center + leftSize ; i < thumbnails.length ; i++) { + this.thumbnailsLoadingOrder.push(thumbnails[i]); + } } + var next = this.thumbnailsLoadingOrder.shift(); + var self = this; + addListener(next, 'load', function(evt){self._loadNextThumb(evt);}); + next.src = this.translateImgUrl(next.parentNode.href) + '/getThumbnail'; }; +FilmSlider.prototype._loadNextThumb = function(evt) { + var next = this.thumbnailsLoadingOrder.shift(); + if (!next) {return;} + var self = this; + addListener(next, 'load', function(evt){self._loadNextThumb(evt);}); + next.src = this.translateImgUrl(next.parentNode.href) + '/getThumbnail'; +}; + + FilmSlider.prototype.startSlideShow = function() { this.slideShowSlide = this.pendingSlideShowSlide = this.selectedSlide; return this.slideShowSlide.href;