X-Git-Url: https://svn.cri.ensmp.fr/git/Portfolio.git/blobdiff_plain/ee0633b788ca7650b0cab7f57ef6b846333c26f7..ed700777982ff5e0a5740ea993111bc439e2d9a2:/skins/photo_film_viewer.js diff --git a/skins/photo_film_viewer.js b/skins/photo_film_viewer.js index a1ec07d..c6f583b 100644 --- a/skins/photo_film_viewer.js +++ b/skins/photo_film_viewer.js @@ -1,13 +1,10 @@ /* -* © 2008-2014 Benoît Pin – Centre de recherche en informatique – MINES ParisTech -* http://plinn.org -* Licence Creative Commons http://creativecommons.org/licenses/by-nc/2.0/ -* -* +copyright 2008-2014 Benoit Pin - Centre de recherche en informatique - MINES ParisTech +http://plinn.org +Licence Creative Commons http://creativecommons.org/licenses/by-nc/2.0/ */ var FilmSlider; - (function(){ var keyLeft = 37, keyRight = 39; @@ -19,6 +16,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; @@ -74,42 +72,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 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; @@ -622,8 +812,7 @@ FilmSlider.prototype.slideShowNext = function() { else { var row = this.slideShowSlide.parentNode.parentNode; var first = row.firstChild; - if (first.nodeType===3) - first = first.nextSibling; + if (first.nodeType===3) { first = first.nextSibling; } this.pendingSlideShowSlide = first.getElementsByTagName('a')[0]; return this.pendingSlideShowSlide.href; } @@ -653,7 +842,7 @@ FilmSlider.prototype.slideShowImageLoaded = function() { FilmSlider.prototype.stopSlideShow = function() { raiseMouseEvent(this.slideShowSlide, 'click'); - var index = parseInt(this.selectedSlide.getAttribute('portfolio:position')); + var index = parseInt(this.selectedSlide.getAttribute('portfolio:position'), 10); this.centerSlide(index); }; @@ -665,7 +854,7 @@ function Point(x, y) { } Point.prototype.diff = function(point) { return new Point(this.x - point.x, this.y - point.y); }; Point.prototype.add = function(point) { return new Point(this.x + point.x, this.y + point.y); }; -Point.prototype.mul = function(k) { return new Point(this.x * k, this.y *k)}; +Point.prototype.mul = function(k) { return new Point(this.x * k, this.y *k); }; Point.prototype.toString = function() { return "(" + String(this.x) + ", " + String(this.y) + ")"; }; -})(); +}());