X-Git-Url: https://scm.cri.ensmp.fr/git/Portfolio.git/blobdiff_plain/c41e535e2e805f096dfe6554c0ab760350bb3729..2e2f4ddd5166f4ddc77c688040cc697f84dbfcf1:/skins/photo_film_viewer.js diff --git a/skins/photo_film_viewer.js b/skins/photo_film_viewer.js index c9615fb..b86e94d 100644 --- a/skins/photo_film_viewer.js +++ b/skins/photo_film_viewer.js @@ -17,6 +17,7 @@ var DEFAULT_IMAGE_SIZES = [500, 600, 800]; FilmSlider = function(filmBar, slider, ctxInfos, image, toolbar, breadcrumbs) { var thisSlider = this; this.filmBar = filmBar; + this.filmBarWidth = getObjectWidth(this.filmBar); var film = filmBar.firstChild; if (film.nodeType === 3) { film = film.nextSibling; } this.film = film; @@ -72,42 +73,90 @@ FilmSlider = function(filmBar, slider, ctxInfos, image, toolbar, breadcrumbs) { 'out' : function(evt){thisSlider.mouseOutHandler(evt);} }; - this.resizeSlider(); + if (browser.isMobile) { + this.rail.className = 'hidden'; + } + else { + this.resizeSlider(); + } this.addEventListeners(); }; - -FilmSlider.prototype.resizeSlider = function(evt) { - var filmBarWidth = getObjectWidth(this.filmBar); - if (!filmBarWidth) { - var thisSlider = this; - addListener(window, 'load', function(evt){thisSlider.resizeSlider(evt);}); - return; - } +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'; + } - 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; + } + }; +} + +else { + // 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) { + this._barSizes = []; + this.filmBarWidth = this._barSizes[this._barSizes.length] = getObjectWidth(this.filmBar); + this.resizeSlider(); + var self = this; + this._checkSizeIntervalId = setInterval(function(evt){self._checkSize(evt);}, 25); + setTimeout(function(evt){self._checkSizeStability();}, 250); +}; + +FilmSlider.prototype._checkSize = function(evt) { + this._barSizes[this._barSizes.length] = getObjectWidth(this.filmBar); + if (this._barSizes.length >= 2 && + this._barSizes[this._barSizes.length-2] !== this._barSizes[this._barSizes.length-1]) { + this.filmBarWidth = this._barSizes[this._barSizes.length-1]; + this.initialized = false; + this.resizeSlider(); } - - 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; +}; + +FilmSlider.prototype._checkSizeStability = function(evt) { + var self = this; + var i; + var checkAgain = function(evt){self._checkSizeStability();}; + for (i=0 ; i 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; } @@ -172,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); @@ -216,6 +290,8 @@ FilmSlider.prototype.addEventListeners = function() { addListener(this.filmBar, 'click', function(evt){thisSlider.thumbnailClickHandler(evt);}); 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); @@ -230,6 +306,11 @@ FilmSlider.prototype.addEventListeners = function() { else if (browser.isIE6up) { addListener(this.filmBar, 'mousewheel', function(evt){thisSlider.mouseWheelHandler(evt);}); } + if (browser.isMobile) { + this.filmBar.addEventListener('touchstart', function(evt){thisSlider.touchStartHandler(evt);}, false); + this.filmBar.addEventListener('touchmove', function(evt){thisSlider.touchMoveHandler(evt);}, false); + this.filmBar.addEventListener('touchend', function(evt){thisSlider.touchEndHandler(evt);}, false); + } addListener(document, 'keydown', function(evt){thisSlider.keyDownHandler(evt);}); addListener(document, 'keypress', function(evt){thisSlider.keyPressHandler(evt);}); @@ -276,6 +357,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; } @@ -292,12 +385,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; @@ -357,7 +445,7 @@ FilmSlider.prototype.thumbnailClickHandler = function(evt) { break; case 4 : hideProgressImage(); - if (req.status === '200') { thisFS.populateViewer(req); } + if (req.status === 200) { thisFS.populateViewer(req); } break; } }; @@ -533,6 +621,52 @@ else if (browser.isIE6up) { }; } +FilmSlider.prototype.touchStartHandler = function(evt) { + this.filmStartX = parseInt(this.film.style.left, 10); + this.touchStartX = evt.changedTouches[0].screenX; + this.touchStartTime = (new Date()).getTime(); +}; + +FilmSlider.prototype.touchMoveHandler = function(evt) { + 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 + delta = 0; + var dt = 25; + var self = this; + + var animate = function() { + // 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; +}; + + FilmSlider.prototype.keyDownHandler = function(evt) { evt = getEventObject(evt); switch (evt.keyCode) { @@ -573,13 +707,13 @@ FilmSlider.prototype.populateViewer = function(req) { break; case 'imageattributes' : var link = this.buttons.back_to_portfolio.parentNode; - link.href = element.getAttribute('backToContextUrl'); + link.href = element.getAttribute('back_to_context_url'); link = this.buttons.show_buyable.parentNode; var buyable = element.getAttribute('buyable'); if(buyable === 'True') { link.className = null; } else if(buyable === 'False') { link.className = 'hidden'; } this.image.alt = element.getAttribute('alt'); - this.updateBreadcrumbs(element.getAttribute('lastBcUrl'), + this.updateBreadcrumbs(element.getAttribute('last_bc_url'), element.getAttribute('img_id')); break; } @@ -598,11 +732,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'); + 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--) { + this.thumbnailsLoadingOrder.push(thumbnails[i]); + } + } + else if (leftSize < rightSize) { + for (i = this.center + leftSize + 1 ; 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;