X-Git-Url: https://svn.cri.ensmp.fr/git/Portfolio.git/blobdiff_plain/4f04a5762f82ec39ed45338648daab0533784926..a21714242076697ef8c9b4c61c1e229bb7afa352:/skins/photo_film_viewer.js?ds=inline diff --git a/skins/photo_film_viewer.js b/skins/photo_film_viewer.js index efda660..226e6dd 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; @@ -80,13 +79,8 @@ FilmSlider = function(filmBar, slider, ctxInfos, image, toolbar, breadcrumbs) { FilmSlider.prototype.resizeSlider = function(evt) { - var filmBarWidth = getObjectWidth(this.filmBar); - if (!filmBarWidth) { - var thisSlider = this; - addListener(window, 'load', function(evt){thisSlider.resizeSlider(evt);}); - return; - } - + var filmBarWidth = this.filmBarWidth; + if (!filmBarWidth) { return; } var filmWidth = this.slideSize * this.filmLength; var sliderRatio = this.sliderRatio = filmBarWidth / filmWidth; var sliderWidth = filmBarWidth * sliderRatio; @@ -112,6 +106,40 @@ FilmSlider.prototype.resizeSlider = function(evt) { } }; +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(); + } +}; + +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) { this._fitToScreen(); var thisSlider = this; @@ -218,6 +246,7 @@ 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); @@ -333,10 +362,10 @@ FilmSlider.prototype.thumbnailClickHandler = function(evt) { 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'; } @@ -359,12 +388,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); @@ -376,13 +402,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; @@ -395,21 +422,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; @@ -424,7 +452,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); @@ -434,12 +462,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"); @@ -469,8 +497,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 = ''; @@ -537,7 +565,7 @@ else if (browser.isIE6up) { } FilmSlider.prototype.keyDownHandler = function(evt) { - var evt = getEventObject(evt); + evt = getEventObject(evt); switch (evt.keyCode) { case keyLeft : this.loadSibling(true); @@ -554,19 +582,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' : @@ -574,14 +603,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; } @@ -622,8 +651,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 +681,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 +693,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) + ")"; }; -})(); +}());