X-Git-Url: https://svn.cri.ensmp.fr/git/Portfolio.git/blobdiff_plain/7ac0ca74ce1435919f21b6a0e5b28ba40cf00780..4d5ba04bc322584f7837abf736eb9e414bfc0e44:/skins/photo_film_viewer.js diff --git a/skins/photo_film_viewer.js b/skins/photo_film_viewer.js index edf2069..0b1fde3 100644 --- a/skins/photo_film_viewer.js +++ b/skins/photo_film_viewer.js @@ -1,9 +1,7 @@ /* -* © 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; @@ -19,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; @@ -74,42 +73,89 @@ 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; + for (i=0 ; i0 ; i--) { irw = DEFAULT_IMAGE_SIZES[i]; irh = irw * ratio; - if (irw <= fw && irh <= fh) - break; + if (irw <= fw && irh <= fh) { break; } } } else { for (i=DEFAULT_IMAGE_SIZES.length -1 ; i>0 ; i--) { irh = DEFAULT_IMAGE_SIZES[i]; irw = irh / ratio; - if (irw <= fw && irh <= fh) - break; + if (irw <= fw && irh <= fh) { break; } } } 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; } @@ -176,20 +235,29 @@ 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); - var y = parseInt(this.slider.style.top); + var x = parseInt(this.slider.style.left, 10); + var y = parseInt(this.slider.style.top, 10); var p = new Point(x, y); return p; }; FilmSlider.prototype.getFilmPosition = function() { - var x = parseInt(this.film.style.left); - var y = parseInt(this.film.style.top); + var x = parseInt(this.film.style.left, 10); + var y = parseInt(this.film.style.top, 10); var p = new Point(x, y); return p; }; @@ -209,7 +277,7 @@ FilmSlider.prototype.loadSibling = function(previous) { else { var target = slide.getElementsByTagName('a')[0]; raiseMouseEvent(target, 'click'); - var index = parseInt(target.getAttribute('portfolio:position')); + var index = parseInt(target.getAttribute('portfolio:position'), 10); this.centerSlide(index); } }; @@ -220,9 +288,10 @@ 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);}); // dd listeners - addListener(this.slider, 'mousedown', this.ddHandlers['down']); + addListener(this.slider, 'mousedown', this.ddHandlers.down); if(browser.isDOM2Event){ if (browser.isAppleWebKit) { this.filmBar.addEventListener('mousewheel', function(evt){thisSlider.mouseWheelHandler(evt);}, false); @@ -234,6 +303,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);}); @@ -244,10 +318,9 @@ FilmSlider.prototype.mouseDownHandler = function(evt) { this.initialClickPoint = new Point(evt.clientX, evt.clientY); this.initialPosition = this.getSliderPosition(); this.dragInProgress = true; - addListener(document, 'mousemove', this.ddHandlers['move']); - addListener(document, 'mouseup', this.ddHandlers['up']); - addListener(document.body, 'mouseout', this.ddHandlers['out']) - + addListener(document, 'mousemove', this.ddHandlers.move); + addListener(document, 'mouseup', this.ddHandlers.up); + addListener(document.body, 'mouseout', this.ddHandlers.out); }; @@ -273,9 +346,9 @@ FilmSlider.prototype.mouseOutHandler = function(evt) { var x = evt.clientX; var y = evt.clientY; if (x < 0 || - x > this.winSize['width'] || + x > this.winSize.width || y < 0 || - y > this.winSize['height'] + y > this.winSize.height ) { this.mouseUpHandler(evt); } @@ -283,8 +356,7 @@ FilmSlider.prototype.mouseOutHandler = function(evt) { FilmSlider.prototype.thumbnailClickHandler = function(evt) { var target = getTargetedObject(evt); - while (target.tagName !== 'A' && target !== this.filmBar) - target = target.parentNode; + while (target.tagName !== 'A' && target !== this.filmBar) { target = target.parentNode; } if (target.tagName !== 'A') { return; } else { if (this.viewMode === 'full') { @@ -314,10 +386,10 @@ FilmSlider.prototype.thumbnailClickHandler = function(evt) { this.pendingImage.src = canonicalImgUrl + '/getResizedImage?size=' + bestFitSize; // update buttons - var fullScreenLink = this.buttons['full_screen'].parentNode; + var fullScreenLink = this.buttons.full_screen.parentNode; fullScreenLink.href = canonicalImgUrl + '/zoom_view'; - var toggleSelectionBtn = this.buttons['toggle_selection']; + var toggleSelectionBtn = this.buttons.toggle_selection; var toggleSelectionLink = toggleSelectionBtn.parentNode; this.selectedSlideInSelection = (target.className==='selected'); if (this.selectedSlideInSelection) { @@ -331,16 +403,16 @@ FilmSlider.prototype.thumbnailClickHandler = function(evt) { toggleSelectionLink.href = canonicalImgUrl + '/add_to_selection'; } - var showBuyableButtonLink = this.buttons['show_buyable'].parentNode; + var showBuyableButtonLink = this.buttons.show_buyable.parentNode; showBuyableButtonLink.href = canonicalImgUrl + '/get_slide_buyable_items'; this.cartSlide.innerHTML = ''; this.cartSlide.style.visibility='hidden'; - var metadataButton = this.buttons['edit_metadata'] + var metadataButton = this.buttons.edit_metadata; if (metadataButton) { var metadataEditLink = metadataButton.parentNode; - metadataEditLink.href = canonicalImgUrl + '/photo_edit_form' + metadataEditLink.href = canonicalImgUrl + '/photo_edit_form'; } @@ -363,12 +435,9 @@ FilmSlider.prototype.thumbnailClickHandler = function(evt) { break; case 4 : hideProgressImage(); - if (req.status === '200') { thisFS.populateViewer(req); } - // else - // //window.location.href = target.href; - // console.error(ajaxUrl); - - }; + if (req.status === 200) { thisFS.populateViewer(req); } + break; + } }; req.open("GET", ajaxUrl, true); @@ -380,13 +449,14 @@ FilmSlider.prototype.thumbnailClickHandler = function(evt) { var newClasses = []; var name, i; - for (i in classes) { + for (i=0 ; i