From: Benoît Pin <benoit.pin@gmail.com>
Date: Tue, 1 Jul 2014 04:58:22 +0000 (+0200)
Subject: Ajout cases à cocher pour réaliser une sélection sur les photos. Implémentation du... 
X-Git-Url: https://scm.cri.mines-paristech.fr/git/Portfolio.git/commitdiff_plain/8c870898f8c5b34896619b4f33be97f0eeb228b6?hp=b0c1ded6394ded5256536121116e5968996dd7c7

Ajout cases à cocher pour réaliser une sélection sur les photos. Implémentation du js pour sélectionner des éléments contigus.
---

diff --git a/skins/photo_layout_macros.pt b/skins/photo_layout_macros.pt
index b13e237..6fe4a89 100644
--- a/skins/photo_layout_macros.pt
+++ b/skins/photo_layout_macros.pt
@@ -66,6 +66,9 @@
                      i18n:attributes="alt"/>
               </a>
             </span>
+            <span class="button cb">
+              <input type="checkbox" />
+            </span>
             <tal:block tal:condition="features/hideAnonymous|nothing">
               <span class="button slide-hide"
                     tal:define="mtop python:margin_top + 4;
diff --git a/skins/photo_lightbox_viewer.js b/skins/photo_lightbox_viewer.js
index dc2547e..f7afe84 100644
--- a/skins/photo_lightbox_viewer.js
+++ b/skins/photo_lightbox_viewer.js
@@ -13,6 +13,7 @@ var reSelected = /.*selected.*/;
 
 Lightbox = function(grid) {
 	this.grid = grid;
+	this.lastCBChecked = undefined;
 	thisLightbox = this;
 	addListener(this.grid, 'click', function(evt){thisLightbox.mouseClickHandler(evt);});
 	if (!browser.isGecko){
@@ -99,6 +100,15 @@ 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);
 	}
 };
 
@@ -124,6 +134,47 @@ Lightbox.prototype.mouseOutHandler = function(evt) {
 	}
 };
 
+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.selectCBRange = function(evt) {
+	var target = getTargetedObject(evt);
+	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) {
@@ -139,4 +190,4 @@ else {
 	};
 }
 
-})();
\ No newline at end of file
+}());
\ No newline at end of file
diff --git a/skins/portfolio_style.css.dtml b/skins/portfolio_style.css.dtml
index 8078a37..997b17b 100755
--- a/skins/portfolio_style.css.dtml
+++ b/skins/portfolio_style.css.dtml
@@ -276,6 +276,16 @@ div.lightbox {
   background: url(&dtml-portal_url;/slide-del-btn.png);
 }
 
+/* slide checkbox */
+.lightbox .cb {
+	margin-left: <dtml-var expr="slide_size - 22">px;
+	margin-top: 5px;
+}
+
+.lightbox .cb input[checked] {
+	visibility: visible;
+}
+
 
 .lightbox .slide-hide,
 .lightbox .slide-show {