X-Git-Url: https://svn.cri.ensmp.fr/git/Portfolio.git/blobdiff_plain/e3221dd5738f0c8410573ae0980e7c8c2065b32c..362525bf290b43724237432ce8480f5dbd7049b8:/skins/photo_lightbox_viewer.js?ds=sidebyside diff --git a/skins/photo_lightbox_viewer.js b/skins/photo_lightbox_viewer.js index dbea64c..8dfbaf4 100644 --- a/skins/photo_lightbox_viewer.js +++ b/skins/photo_lightbox_viewer.js @@ -11,8 +11,21 @@ var Lightbox; var reSelected = /.*selected.*/; -Lightbox = function(grid) { +Lightbox = function(grid, toolbar, complete, container_type) { + var self = this; this.grid = grid; + this._buildSlidesIndex(); // set this.slides and this.lastSlide; + this.fetchingDisabled = false; + this.complete = complete; + this.container_type = container_type; + this.toolbar = toolbar; + if (toolbar) { + this.toolbarFixed = false; + addListener(window, 'scroll', function(evt){self.windowScrollToolbarlHandler(evt);}); + } + addListener(window, 'scroll', function(evt){self.windowScrollGridHandler(evt);}); + // addListener(window, 'load', function(evt){ self.windowScrollGridHandler();}); + registerStartupFunction(function(){ self.windowScrollGridHandler();}); this.lastCBChecked = undefined; this.form = undefined; var parent = this.grid.parentNode; @@ -26,12 +39,46 @@ Lightbox = function(grid) { break; } } - thisLightbox = this; - addListener(this.grid, 'click', function(evt){thisLightbox.mouseClickHandler(evt);}); + addListener(this.grid, 'click', function(evt){self.mouseClickHandler(evt);}); if (this.form) { - var fm = new FormManager(this.form); - fm.onBeforeSubmit = function(fm_, evt) {return thisLightbox.onBeforeSubmit(fm_, evt);}; - fm.onResponseLoad = function(req) {return thisLightbox.onResponseLoad(req);}; + var fm = this.fm = new FormManager(this.form); + addListener(this.form, 'change', function(evt){self.onChangeHandler(evt);}); + fm.onBeforeSubmit = function(fm_, evt) {return self.onBeforeSubmit(fm_, evt);}; + fm.onResponseLoad = function(req) {return self.onResponseLoad(req);}; + } +}; + +Lightbox.prototype._buildSlidesIndex = function() { + this.slides = []; + var node, i; + for (i=0 ; i<this.grid.childNodes.length ; i++) { + node = this.grid.childNodes[i]; + if (node.nodeType === 1) { // is element + this.slides.push(node); + } + } + this.lastSlide = this.slides[this.slides.length-1]; +}; + +Lightbox.prototype.windowScrollToolbarlHandler = function(evt) { + if (this.toolbar.offsetTop < getWindowScrollY() && !this.toolbarFixed) { + this.toolbarFixed = true; + this.backThreshold = this.toolbar.offsetTop; + this.switchToolBarPositioning(true); + } + else if (this.toolbarFixed && getWindowScrollY() < this.backThreshold) { + this.toolbarFixed = false; + this.switchToolBarPositioning(false); + } +}; +Lightbox.prototype.windowScrollGridHandler = function(evt) { + if (!this.complete && + !this.fetchingDisabled && + getWindowScrollY() > + (this.lastSlide.firstElementChild || this.lastSlide.children[0]).offsetTop + - getWindowHeight()) { + this.fetchingDisabled = true; + this.fetchTail(); } }; @@ -39,7 +86,7 @@ Lightbox.prototype.mouseClickHandler = function(evt) { var target = getTargetedObject(evt); if (target.tagName === 'IMG') { var img = target; - var link = target.parentNode; + var link = target.parentNode; var button = link.parentNode; var slide = button.parentNode; var req, url; @@ -125,6 +172,14 @@ Lightbox.prototype.mouseClickHandler = function(evt) { } }; +Lightbox.prototype.onChangeHandler = function(evt) { + var target = getTargetedObject(evt); + if (target.name === 'sort_on') { + this.fm.submitButton = {'name' : 'set_sorting', 'value' : 'ok'}; + this.fm.submit(evt); + } +}; + Lightbox.prototype.onBeforeSubmit = function(fm, evt) { switch(fm.submitButton.name) { case 'delete' : @@ -141,9 +196,34 @@ Lightbox.prototype.onResponseLoad = function(req) { case 'error' : this.showSelection(); break; + case 'sorted' : + this.fm.submitButton = undefined; + this.refreshGrid(); + break; + } +}; + +Lightbox.prototype.switchToolBarPositioning = function(fixed) { + var tbs = this.toolbar.style; + if (fixed) { + this.toolbar.defaultCssText = this.toolbar.style.cssText; + tbs.width = String(this.toolbar.offsetWidth) + 'px'; + tbs.height = String(this.toolbar.offsetHeight) + 'px'; + tbs.position = 'fixed'; + tbs.top = '0'; + this.toolbarPlaceholder = document.createElement('div'); + var phs = this.toolbarPlaceholder.style; + phs.cssText = tbs.cssText; + phs.position = 'relative'; + this.toolbar.parentNode.insertBefore(this.toolbarPlaceholder, this.toolbar); + } + else { + this.toolbarPlaceholder.parentNode.removeChild(this.toolbarPlaceholder); + tbs.cssText = this.toolbar.defaultCssText; } }; + Lightbox.prototype.hideSelection = function() { var i, e, slide; for (i=0 ; i<this.form.elements.length ; i++) { @@ -182,7 +262,7 @@ Lightbox.prototype.deleteSelection = function() { }; Lightbox.prototype._removeSelection = function() { - var i, e, slide; + var i, e; var toRemove = []; for (i=0 ; i<this.form.elements.length ; i++) { e = this.form.elements[i]; @@ -191,10 +271,11 @@ Lightbox.prototype._removeSelection = function() { } } for (i=0 ; i<toRemove.length ; i++) { - slide = toRemove[i]; - slide.parentNode.removeChild(slide); + this.grid.removeChild(toRemove[i]); } + this._buildSlidesIndex(); this.cbIndex = undefined; + this.windowScrollGridHandler(); }; Lightbox.prototype.getCBIndex = function(cb) { @@ -202,14 +283,11 @@ Lightbox.prototype.getCBIndex = function(cb) { // build checkbox index this.cbIndex = []; var i, node, c; - var nodes = this.grid.childNodes; - for (i=0 ; i<nodes.length ; i++) { - node = nodes[i]; - if (node.nodeName === 'SPAN') { - c = node.getElementsByTagName('input')[0]; - c.index = this.cbIndex.length; - this.cbIndex[this.cbIndex.length] = c; - } + for (i=0 ; i<this.slides.length ; i++) { + node = this.slides[i]; + c = node.getElementsByTagName('input')[0]; + c.index = this.cbIndex.length; + this.cbIndex.push(c); } } return cb.index; @@ -237,6 +315,96 @@ Lightbox.prototype.selectCBRange = function(evt) { } }; +Lightbox.prototype.refreshGrid = function() { + var req = new XMLHttpRequest(); + self = this; + req.onreadystatechange = function() { + switch (req.readyState) { + case 1 : + showProgressImage(); + break; + case 4 : + hideProgressImage(); + if (req.status === 200) { + self._refreshGrid(req); + } + break; + } + }; + + var url = absolute_url() + + '/portfolio_thumbnails_tail?start:int=0&size:int=' + + this.slides.length; + req.open('GET', url, true); + req.send(); +}; + +Lightbox.prototype._refreshGrid = function(req) { + var doc = req.responseXML.documentElement; + var i, node; + var j = 0; + for (i=0 ; i<doc.childNodes.length ; i++) { + node = doc.childNodes[i]; + if (node.nodeType === 1) { + node = getCopyOfNode(node); + this.grid.replaceChild(node, this.slides[j]); + this.slides[j] = node; + j++; + } + } + this.cbIndex = undefined; +}; + +Lightbox.prototype.fetchTail = function() { + var req = new XMLHttpRequest(); + var self = this; + req.onreadystatechange = function() { + switch (req.readyState) { + case 1 : + showProgressImage(); + break; + case 4 : + hideProgressImage(); + if (req.status === 200) { + self._appendTail(req); + } + break; + } + }; + + var url = absolute_url() + + '/portfolio_thumbnails_tail?start:int=' + + String(this.slides.length) + + '&size:int=10' + + '&container_type=' + + this.container_type; + req.open('GET', url, true); + req.send(); +}; + +Lightbox.prototype._appendTail = function(req) { + var doc = req.responseXML.documentElement; + var i, node, c; + for (i=0 ; i<doc.childNodes.length ; i++) { + node = doc.childNodes[i]; + if (node.nodeType === 1) { + this.lastSlide = this.grid.appendChild(getCopyOfNode(node)); + this.slides.push(this.lastSlide); + if (this.cbIndex) { + c = this.lastSlide.getElementsByTagName('input')[0]; + c.index = this.cbIndex.length; + this.cbIndex.push(c); + + } + } + } + this.fetchingDisabled = false; + if (doc.getAttribute('nomore')) { + this.complete = true; + } + this.windowScrollGridHandler(); +}; + var _outlineSelectedSlide; if (browser.isGecko) {