X-Git-Url: https://scm.cri.minesparis.psl.eu/git/Portfolio.git/blobdiff_plain/7ac0ca74ce1435919f21b6a0e5b28ba40cf00780..cd282ee58b2893790d06ce40a8b02c65481abbeb:/skins/photo_film_viewer.js?ds=sidebyside diff --git a/skins/photo_film_viewer.js b/skins/photo_film_viewer.js index edf2069..3140763 100644 --- a/skins/photo_film_viewer.js +++ b/skins/photo_film_viewer.js @@ -1,12 +1,11 @@ /* -* © 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; +var s; (function(){ @@ -18,7 +17,9 @@ 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; if (film.nodeType === 3) { film = film.nextSibling; } this.film = film; @@ -74,42 +75,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 ; i<this._barSizes.length - 1 ; i++) { + if (this._barSizes[i] !== this._barSizes[i+1]) { + this._barSizes = []; + setTimeout(function(evt){self._checkSizeStability();}, 250); + return; + } } + clearInterval(this._checkSizeIntervalId); + delete this._barSizes; + delete this._checkSizeIntervalId; }; FilmSlider.prototype.fitToScreen = function(evt) { @@ -120,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; @@ -144,30 +197,38 @@ FilmSlider.prototype.getBestFitSize = function(ratio) { for (i=DEFAULT_IMAGE_SIZES.length -1 ; i>0 ; 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 +237,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 +279,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 +290,11 @@ 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']); + 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 +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);}); @@ -244,10 +321,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 +349,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 +359,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 +389,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 +406,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 +438,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 +452,14 @@ FilmSlider.prototype.thumbnailClickHandler = function(evt) { var newClasses = []; var name, i; - for (i in classes) { + for (i=0 ; i<classes.length ; i++) { name = classes[i]; - if (name === 'displayed') { continue; } - else { newClasses.push(name); } + if (name !== 'displayed') { + newClasses.push(name); + } } - this.selectedSlide.className = newClasses.join(' ') + this.selectedSlide.className = newClasses.join(' '); // hightlight new displayed slide this.selectedSlide = target; @@ -399,21 +472,22 @@ FilmSlider.prototype.thumbnailClickHandler = function(evt) { FilmSlider.prototype.toolbarClickHandler = function(evt) { var target = getTargetedObject(evt); + var button, link, url; if(target.tagName === 'IMG' && target.getAttribute('name')) { switch(target.getAttribute('name')) { case 'previous' : disableDefault(evt); disablePropagation(evt); - var button = target; - var link = button.parentNode; + button = target; + link = button.parentNode; link.blur(); this.loadSibling(true); break; case 'next' : disableDefault(evt); disablePropagation(evt); - var button = target; - var link = button.parentNode; + button = target; + link = button.parentNode; link.blur(); this.loadSibling(false); break; @@ -428,7 +502,7 @@ FilmSlider.prototype.toolbarClickHandler = function(evt) { return; } var main = document.getElementById('photo_viewer'); - var url = target.parentNode.href; + url = target.parentNode.href; url = url.substring(0, url.length - '/zoom_view'.length); var margins = {'top':0, 'right':-1, 'bottom':0, 'left':0}; this.mosaique = new Mosaique(main, url, margins); @@ -438,12 +512,12 @@ FilmSlider.prototype.toolbarClickHandler = function(evt) { case 'toggle_selection': disableDefault(evt); disablePropagation(evt); - var button = target; - var link = button.parentNode; + button = target; + link = button.parentNode; link.blur(); var req = new XMLHttpRequest(); - var url = link.href; + url = link.href; req.open("POST", url, true); req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8"); req.send("ajax=1"); @@ -473,8 +547,8 @@ FilmSlider.prototype.toolbarClickHandler = function(evt) { case 'show_buyable': disableDefault(evt); disablePropagation(evt); - var button = target; - var link = button.parentNode; + button = target; + link = button.parentNode; link.blur(); var slide = this.cartSlide; slide.innerHTML = ''; @@ -540,8 +614,54 @@ 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 + 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; +}; + + FilmSlider.prototype.keyDownHandler = function(evt) { - var evt = getEventObject(evt); + evt = getEventObject(evt); switch (evt.keyCode) { case keyLeft : this.loadSibling(true); @@ -558,19 +678,20 @@ FilmSlider.prototype.keyDownHandler = function(evt) { FilmSlider.prototype.keyPressHandler = function(evt) { var target = getTargetedObject(evt); if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') { return; } - var evt = getEventObject(evt); + evt = getEventObject(evt); var charPress = String.fromCharCode((evt.keyCode) ? evt.keyCode : evt.which); switch(charPress) { case 'f': case 'F': - raiseMouseEvent(this.buttons['full_screen'], 'click'); + raiseMouseEvent(this.buttons.full_screen, 'click'); break; } }; FilmSlider.prototype.populateViewer = function(req) { var elements = req.responseXML.documentElement.childNodes; - for(var i=0 ; i < elements.length ; i++ ) { + var i; + for(i=0 ; i < elements.length ; i++ ) { element = elements[i]; switch (element.nodeName) { case 'fragment' : @@ -578,14 +699,14 @@ FilmSlider.prototype.populateViewer = function(req) { if (dest) { dest.innerHTML = element.firstChild.nodeValue; } break; case 'imageattributes' : - var link = this.buttons['back_to_portfolio'].parentNode; - link.href = element.getAttribute('backToContextUrl'); - link = this.buttons['show_buyable'].parentNode; + var link = this.buttons.back_to_portfolio.parentNode; + 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; } @@ -604,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; @@ -626,8 +783,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; } @@ -657,7 +813,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); }; @@ -669,7 +825,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) + ")"; }; -})(); +}());