X-Git-Url: https://svn.cri.ensmp.fr/git/Portfolio.git/blobdiff_plain/a3732c58de2390b45546badf2e36cf4fe33c72aa..cd282ee58b2893790d06ce40a8b02c65481abbeb:/skins/photo_film_viewer.js diff --git a/skins/photo_film_viewer.js b/skins/photo_film_viewer.js index 9bbf5ef..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; @@ -83,37 +85,45 @@ FilmSlider = function(filmBar, slider, ctxInfos, image, toolbar, breadcrumbs) { }; if (!browser.isMobile) { -FilmSlider.prototype.resizeSlider = function(evt) { - var filmBarWidth = this.filmBarWidth; - if (!filmBarWidth) { return; } - var filmWidth = this.slideSize * this.filmLength; - var sliderRatio = this.sliderRatio = filmBarWidth / filmWidth; - var sliderWidth = filmBarWidth * sliderRatio; - this.rail.style.width = filmBarWidth + 'px'; - this.rail.style.display = 'block'; - this.rail.style.visibility = 'visible'; - if (sliderRatio < 1) { - this.slider.style.width = Math.round(sliderWidth) + 'px'; - this.slider.style.visibility = 'visible'; - } - else { - this.slider.style.visibility = 'hidden'; - } + FilmSlider.prototype.resizeSlider = function(evt) { + var filmBarWidth = this.filmBarWidth; + if (!filmBarWidth) { return; } + var filmWidth = this.slideSize * this.filmLength; + var sliderRatio = this.sliderRatio = filmBarWidth / filmWidth; + var sliderWidth = filmBarWidth * sliderRatio; + this.rail.style.width = filmBarWidth + 'px'; + this.rail.style.display = 'block'; + this.rail.style.visibility = 'visible'; + if (sliderRatio < 1) { + this.slider.style.width = Math.round(sliderWidth) + 'px'; + this.slider.style.visibility = 'visible'; + } + else { + this.slider.style.visibility = 'hidden'; + } - this.winSize = {'width' : getWindowWidth(), - 'height' : getWindowHeight()}; - this.maxRightPosition = filmBarWidth - sliderWidth; - this.sliderSpeedRatio = - (filmBarWidth - sliderWidth) / (filmWidth - filmBarWidth); - if (!this.initialized) { - this.centerSlide(this.center); - this.selectedSlide = this.filmBar.getElementsByTagName('img')[this.center].parentNode; - this.initialized = true; - } -}; + this.winSize = {'width' : getWindowWidth(), + 'height' : getWindowHeight()}; + this.maxRightPosition = filmBarWidth - sliderWidth; + this.sliderSpeedRatio = - (filmBarWidth - sliderWidth) / (filmWidth - filmBarWidth); + if (!this.initialized) { + this.centerSlide(this.center); + this.selectedSlide = this.filmBar.getElementsByTagName('img')[this.center].parentNode; + this.initialized = true; + } + }; } else { - FilmSlider.prototype.resizeSlider = function(evt) {}; + // pas de barre de scroll horizontal pour les tablettes + FilmSlider.prototype.resizeSlider = function(evt) { + this.filmMaxX = - (getObjectWidth(this.film) - this.filmBarWidth); + if (!this.initialized) { + this.centerSlide(this.center); + this.selectedSlide = this.filmBar.getElementsByTagName('img')[this.center].parentNode; + this.initialized = true; + } + }; } FilmSlider.prototype._checkSizeAfterLoad = function(evt) { @@ -158,7 +168,12 @@ FilmSlider.prototype.fitToScreen = function(evt) { FilmSlider.prototype._fitToScreen = function(evt) { var wh = getWindowHeight(); - var rb = getObjectTop(this.rail) + getObjectHeight(this.rail); // rail bottom + if (!browser.isMobile) { + var rb = getObjectTop(this.rail) + getObjectHeight(this.rail); // rail bottom + } + else { + var rb = getObjectTop(this.filmBar) + getObjectHeight(this.filmBar); // film bottom + } var delta = wh - rb; var sh = getObjectHeight(this.stretchable); var newSize = sh + delta; @@ -195,15 +210,25 @@ FilmSlider.prototype.getBestFitSize = function(ratio) { return DEFAULT_IMAGE_SIZES[i]; }; -FilmSlider.prototype.centerSlide = function(slideIndex) { - if (this.sliderRatio > 1) { return; } - var filmBarWidth = getObjectWidth(this.filmBar); - var x = slideIndex * this.slideSize; - x = x - (filmBarWidth - this.slideSize) / 2.0; - x = x * this.sliderSpeedRatio; - var p = new Point( -x, 0 ); - this.setSliderPosition(p); -}; +if (!browser.isMobile) { + FilmSlider.prototype.centerSlide = function(slideIndex) { + if (this.sliderRatio > 1) { return; } + var filmBarWidth = getObjectWidth(this.filmBar); + var x = slideIndex * this.slideSize; + x = x - (filmBarWidth - this.slideSize) / 2.0; + x = x * this.sliderSpeedRatio; + var p = new Point( -x, 0 ); + this.setSliderPosition(p); + }; +} +else { + FilmSlider.prototype.centerSlide = function(slideIndex) { + var filmBarWidth = getObjectWidth(this.filmBar); + var x = slideIndex * this.slideSize; + x = x - (filmBarWidth - this.slideSize) / 2.0; + this.setFilmPosition(-x); + }; +} FilmSlider.prototype.setSliderPosition = function(point) { if(point.x < 0) { point.x = 0; } @@ -212,9 +237,18 @@ FilmSlider.prototype.setSliderPosition = function(point) { this.setFilmPosition(point); }; -FilmSlider.prototype.setFilmPosition = function(point) { - this.film.style.left = point.x / this.sliderSpeedRatio + 'px'; -}; +if (!browser.isMobile) { + FilmSlider.prototype.setFilmPosition = function(point) { + this.film.style.left = point.x / this.sliderSpeedRatio + 'px'; + }; +} +else { + FilmSlider.prototype.setFilmPosition = function(x) { + x = Math.min(0, x); + x = Math.max(this.filmMaxX, x); + this.film.style.left = String(x) + 'px'; + }; +} FilmSlider.prototype.getSliderPosition = function() { var x = parseInt(this.slider.style.left, 10); @@ -257,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); @@ -581,15 +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) { - var delta = this.touchStartX - evt.pageX; - this.film.style.left = String(this.filmStartX - delta) + 'px'; + 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; }; @@ -659,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;