X-Git-Url: https://scm.cri.mines-paristech.fr/git/Portfolio.git/blobdiff_plain/e6d1eadd24491cb6194d217664169b0ab974034e..cd282ee58b2893790d06ce40a8b02c65481abbeb:/skins/photo_film_viewer.js?ds=inline diff --git a/skins/photo_film_viewer.js b/skins/photo_film_viewer.js index 7561e24..3140763 100644 --- a/skins/photo_film_viewer.js +++ b/skins/photo_film_viewer.js @@ -5,6 +5,7 @@ Licence Creative Commons http://creativecommons.org/licenses/by-nc/2.0/ */ var FilmSlider; +var s; (function(){ @@ -16,6 +17,7 @@ var DEFAULT_IMAGE_SIZES = [500, 600, 800]; FilmSlider = function(filmBar, slider, ctxInfos, image, toolbar, breadcrumbs) { var thisSlider = this; + s = this; this.filmBar = filmBar; this.filmBarWidth = getObjectWidth(this.filmBar); var film = filmBar.firstChild; @@ -289,6 +291,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); @@ -613,17 +616,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) { disableDefault(evt); - var delta = this.touchStartX - evt.pageX; + 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; }; @@ -693,11 +725,47 @@ 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'); + 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 = 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 = next.parentNode.href + '/getThumbnail'; +}; + + FilmSlider.prototype.startSlideShow = function() { this.slideShowSlide = this.pendingSlideShowSlide = this.selectedSlide; return this.slideShowSlide.href;