X-Git-Url: https://svn.cri.ensmp.fr/git/Portfolio.git/blobdiff_plain/011a53d5681ad1f5fa88a534ec041c93d3e7be95..7d1d5b450a86762cd8dceb6a2e15eafa6231a755:/skins/photo_lightbox_viewer.js diff --git a/skins/photo_lightbox_viewer.js b/skins/photo_lightbox_viewer.js index 5146b99..dbea64c 100644 --- a/skins/photo_lightbox_viewer.js +++ b/skins/photo_lightbox_viewer.js @@ -1,9 +1,7 @@ /* -* © 2008 Benoît Pin â Centre de recherche en informatique â Ãcole des mines de Paris +* 2008-2014 Benoit Pin - MINES ParisTech * http://plinn.org * Licence Creative Commons http://creativecommons.org/licenses/by-nc/2.0/ -* $Id: photo_lightbox_viewer.js 1006 2009-05-16 16:20:20Z pin $ -* $URL: http://svn.luxia.fr/svn/labo/projects/zope/Portfolio/trunk/skins/photo_lightbox_viewer.js $ */ @@ -15,28 +13,43 @@ var reSelected = /.*selected.*/; Lightbox = function(grid) { this.grid = grid; + this.lastCBChecked = undefined; + this.form = undefined; + var parent = this.grid.parentNode; + while(parent) { + parent = parent.parentNode; + if (parent.tagName === 'FORM') { + this.form = parent; + break; + } + else if (parent.tagName === 'BODY') { + break; + } + } thisLightbox = this; addListener(this.grid, 'click', function(evt){thisLightbox.mouseClickHandler(evt);}); - if (!browser.isGecko){ - addListener(this.grid, 'mouseover', function(evt){thisLightbox.mouseOverHandler(evt);}); - addListener(this.grid, 'mouseout', function(evt){thisLightbox.mouseOutHandler(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);}; } -} +}; Lightbox.prototype.mouseClickHandler = function(evt) { var target = getTargetedObject(evt); - if (target.tagName == 'IMG') { + if (target.tagName === 'IMG') { var img = target; var link = target.parentNode; var button = link.parentNode; var slide = button.parentNode; - if (link.tagName == 'A') { + var req, url; + if (link.tagName === 'A') { switch(link.getAttribute('name')) { case 'add_to_selection': disableDefault(evt); link.blur(); - var req = new XMLHttpRequest(); - var url = link.href; + req = new XMLHttpRequest(); + url = link.href; req.open("POST", url, true); req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8"); req.send("ajax=1"); @@ -52,8 +65,8 @@ Lightbox.prototype.mouseClickHandler = function(evt) { case 'remove_to_selection': disableDefault(evt); link.blur(); - var req = new XMLHttpRequest(); - var url = link.href; + req = new XMLHttpRequest(); + url = link.href; req.open("POST", url, true); req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8"); req.send("ajax=1"); @@ -72,8 +85,8 @@ Lightbox.prototype.mouseClickHandler = function(evt) { case 'hide_for_anonymous': disableDefault(evt); link.blur(); - var req = new XMLHttpRequest(); - var url = link.href; + req = new XMLHttpRequest(); + url = link.href; req.open("POST", url, true); req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8"); req.send(null); @@ -87,8 +100,8 @@ Lightbox.prototype.mouseClickHandler = function(evt) { case 'show_for_anonymous': disableDefault(evt); link.blur(); - var req = new XMLHttpRequest(); - var url = link.href; + req = new XMLHttpRequest(); + url = link.href; req.open("POST", url, true); req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8"); req.send(null); @@ -100,43 +113,144 @@ Lightbox.prototype.mouseClickHandler = function(evt) { break; } } + } else if(target.tagName === 'INPUT' && target.type === 'checkbox') { + var cb = target; + if (cb.checked) { + cb.setAttribute('checked', 'checked'); + } + else { + cb.removeAttribute('checked'); + } + this.selectCBRange(evt); } }; -Lightbox.prototype.mouseOverHandler = function(evt) { - var target = getTargetedObject(evt); - if (target.tagName=='AREA') { - var slide = target.parentNode.parentNode; - if(reSelected.test(slide.className)) - slide.className = 'slide_over_selected'; - else - slide.className = 'slide_over'; +Lightbox.prototype.onBeforeSubmit = function(fm, evt) { + switch(fm.submitButton.name) { + case 'delete' : + this.hideSelection(); + break; + } +}; + +Lightbox.prototype.onResponseLoad = function(req) { + switch(req.responseXML.documentElement.nodeName) { + case 'deleted' : + this.deleteSelection(); + break; + case 'error' : + this.showSelection(); + break; + } +}; + +Lightbox.prototype.hideSelection = function() { + var i, e, slide; + for (i=0 ; i<this.form.elements.length ; i++) { + e = this.form.elements[i]; + if (e.type === 'checkbox' && e.checked) { + slide = e.parentNode.parentNode; + slide.classList.add('zero_opacity'); + } + } +}; + +Lightbox.prototype.showSelection = function() { + var i, e, slide; + for (i=0 ; i<this.form.elements.length ; i++) { + e = this.form.elements[i]; + if (e.type === 'checkbox' && e.checked) { + slide = e.parentNode.parentNode; + slide.classList.remove('zero_opacity'); + } + } +}; + +Lightbox.prototype.deleteSelection = function() { + var i, e, slide; + for (i=0 ; i<this.form.elements.length ; i++) { + e = this.form.elements[i]; + if (e.type === 'checkbox' && e.checked) { + slide = e.parentNode.parentNode; + slide.classList.add('zero_width'); + } + } + var self = this; + // if you change this, delay you should also change this css rule : + // .lightbox span { transition: width 1s + setTimeout(function(){self._removeSelection();}, 1000); +}; + +Lightbox.prototype._removeSelection = function() { + var i, e, slide; + var toRemove = []; + for (i=0 ; i<this.form.elements.length ; i++) { + e = this.form.elements[i]; + if (e.type === 'checkbox' && e.checked) { + toRemove.push(e.parentNode.parentNode); + } + } + for (i=0 ; i<toRemove.length ; i++) { + slide = toRemove[i]; + slide.parentNode.removeChild(slide); + } + this.cbIndex = undefined; +}; + +Lightbox.prototype.getCBIndex = function(cb) { + if (!this.cbIndex) { + // 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; + } + } } + return cb.index; }; -Lightbox.prototype.mouseOutHandler = function(evt) { +Lightbox.prototype.selectCBRange = function(evt) { var target = getTargetedObject(evt); - if (target.tagName=='AREA') { - var slide = target.parentNode.parentNode; - if(reSelected.test(slide.className)) - slide.className = 'selected'; - else - slide.className = undefined; + evt = getEventObject(evt); + var shift = evt.shiftKey; + if (shift && this.lastCBChecked) { + var from = this.getCBIndex(this.lastCBChecked); + var to = this.getCBIndex(target); + var start = Math.min(from, to); + var stop = Math.max(from, to); + var i; + for (i=start ; i<stop ; i++ ) { + this.cbIndex[i].setAttribute('checked', 'checked'); + } + } + else if (target.checked) { + this.lastCBChecked = target; + } + else { + this.lastCBChecked = undefined; } }; + var _outlineSelectedSlide; if (browser.isGecko) { _outlineSelectedSlide = function(slide) { slide.className = 'selected'; - } + }; } else { _outlineSelectedSlide = function(slide) { - if (slide.className) - if (!reSelected.test(slide.className)) + if (slide.className && + !reSelected.test(slide.className)) { slide.className = slide.className + ' selected'; - } + } + }; } -})(); \ No newline at end of file +}()); \ No newline at end of file