Add ability to (un) check drawings and zoom / export / delete selected

magis-nc · Aug 28, 2015 · 0f00b3d · 0f00b3d
1 parent 48e2d2a
commit 0f00b3d
Show file tree

Hide file tree

Showing 5 changed files with 132 additions and 26 deletions.
diff --git a/Widget.html b/Widget.html
@@ -120,7 +120,7 @@ <h2>${nls.listDrawTitle}</h2>
                 <table class="jimu-table draw-table">
                     <thead>
                         <tr>
-                            <!--<th></th>-->
+                            <th><input type="checkbox" data-dojo-attach-event="ondijitclick:listUpdateAllCheckbox" data-dojo-attach-point="listCheckboxAll" /></th>
                             <th>${nls.nameField}</th>
                             <th>${nls.symbolField}</th>
                             <th data-dojo-attach-point="tableTH"></th>
@@ -132,9 +132,13 @@ <h2>${nls.listDrawTitle}</h2>
             <div class="footer">
                 <div data-dojo-attach-point="allActionsNode">
                     <div class="list-draw-actions">
-                        <span class="text">${nls.all} :</span>
-                        <span title="${nls.clear}" class="clear red-button" data-dojo-attach-event="ondijitclick:clear">&nbsp;</span>
+                        <!--<span class="text">${nls.all} :</span>-->
+                        <span class="text"><input type="checkbox" data-dojo-attach-event="ondijitclick:listUpdateAllCheckbox" data-dojo-attach-point="listCheckboxAll2" /></span>
                         <span title="${nls.zoomAllLabel}" class="zoom blue-button" data-dojo-attach-event="ondijitclick:zoomAll">&nbsp;</span>
+                        <a data-dojo-attach-point="exportSelectionButton" data-dojo-attach-event="ondijitclick:exportSelectionInFile">
+                            <span title="${nls.exportLabel}" class="export blue-button" >&nbsp;</span>
+                        </a>
+                        <span title="${nls.deleteAllLabel}" class="clear red-button" data-dojo-attach-event="ondijitclick:clear">&nbsp;</span>
                     </div>
                 </div>
             </div>
@@ -147,7 +151,7 @@ <h2>${nls.importExportTitle}</h2>
                     <td>
                         <h4 class="title">${nls.exportTitle}</h4>
                         <div class="list-draw-actions">
-                            <a data-dojo-attach-point="exportButton" target="_BLANK" data-dojo-attach-event="ondijitclick:exportFile" download="myDraw.json" href="#"><span class="export blue-button"></span></a>
+                            <a data-dojo-attach-point="exportButton" target="_BLANK" data-dojo-attach-event="ondijitclick:exportInFile" download="myDraw.json" href="#"><span class="export blue-button"></span></a>
                         </div>
                     </td>
                 </tr>

diff --git a/Widget.js b/Widget.js
@@ -223,30 +223,53 @@ define([
 
 			localStore.set(this._localStorageKey, this.drawingsGetJson());
 		},
-
+
+		getCheckedGraphics:function(returnAllIfNoneChecked){
+			var graphics = [];
+			for(var i=0, nb = this.drawBox.drawLayer.graphics.length; i < nb; i++)
+				if(this.drawBox.drawLayer.graphics[i].checked)
+					graphics.push(this.drawBox.drawLayer.graphics[i]);
+
+			if(returnAllIfNoneChecked && graphics.length==0)
+				return this.drawBox.drawLayer.graphics;
+			return graphics;
+		},
+
 		zoomAll : function () {
-			var graphics = this.drawBox.drawLayer.graphics;
+			var graphics = this.getCheckedGraphics(true);
 			var nb_graphics = graphics.length;
 
 			if (nb_graphics < 1)
 				return;
 
-			var ext = graphicsUtils.graphicsExtent(this.drawBox.drawLayer.graphics);
+			var ext = graphicsUtils.graphicsExtent(graphics);
 
 			this.map.setExtent(ext, true);
 			return true;
 		},
 
 		clear : function () {
+			var graphics = this.getCheckedGraphics(false);
+			var nb = graphics.length;
+
+			if(nb==0){
+				this.showMessage(this.nls.noSelection, 'error');
+				return false;
+			}
+
 			if (!this.config.confirmOnDelete || confirm(this.nls.clear)) {
-				this.drawBox.drawLayer.clear();
+				// this.drawBox.drawLayer.clear();
+				for(var i = 0; i < nb; i++)
+					this.drawBox.drawLayer.remove(graphics[i]);
 				this.setInfoWindow(false);
 				this.setMode("list");
 			}
 		},
 
-		drawingsGetJson : function (asString) {
-			if (this.drawBox.drawLayer.graphics.length < 1)
+		drawingsGetJson : function (asString, onlyChecked) {
+			var graphics = (onlyChecked) ? this.getCheckedGraphics(false) : this.drawBox.drawLayer.graphics;
+
+			if (graphics.length < 1)
 				return (asString) ? '' : false;
 
 			var content = {
@@ -257,8 +280,8 @@ define([
 				"fields" : []
 			};
 
-			for (var i in this.drawBox.drawLayer.graphics)
-				content["features"].push(this.drawBox.drawLayer.graphics[i].toJson());
+			for (var i in graphics)
+				content["features"].push(graphics[i].toJson());
 
 			if (asString) {
 				content = JSON.stringify(content);
@@ -334,7 +357,10 @@ define([
 				}
 				actions += '<span class="zoom grey-button" id="draw-action-zoom--' + i + '" title="' + this.nls.zoomLabel + '">&nbsp;</span>';
 
-				var html = '<td>' + name + '</td>'
+				var checked = (graphic.checked) ? ' checked="checked"' : '';
+
+				var html = '<td><input type="checkbox" class="td-checkbox" id="draw-action-checkclick--' + i + '" '+checked+'/></td>'
+					+ '<td>' + name + '</td>'
 					+ '<td class="td-center" id="draw-symbol--' + i + '">' + symbolHtml + '</td>' 
 					+ '<td class="' + actions_class + '">' + actions + '</td>';
 				var tr = domConstruct.create(
@@ -355,10 +381,11 @@ define([
 					on(dom.byId('draw-action-up--' + i), "click", this.listOnActionClick);
 					on(dom.byId('draw-action-down--' + i), "click", this.listOnActionClick);
 				}
-
+				on(dom.byId('draw-action-checkclick--' + i), "click", this.listOnActionClick);
 				on(tr, "dragstart", this._listOnDragStart);
 			}
 			this.saveInLocalStorage();
+			this.listUpdateAllCheckbox();
 		},
 
 		_listOnDrop:function(evt){
@@ -453,6 +480,55 @@ define([
 			}
 
 		},
+
+		listUpdateAllCheckbox:function(evt){
+			//Not called by event !
+			if(evt===undefined){
+				var all_checked = true;
+				var all_unchecked = true;
+
+				for(var i=0, nb = this.drawBox.drawLayer.graphics.length; i < nb; i++){
+					if(this.drawBox.drawLayer.graphics[i].checked)
+						all_unchecked = false;
+					else
+						all_checked = false;
+				}
+
+				if(all_checked){
+					this.listCheckboxAll.checked = true;
+					this.listCheckboxAll.indeterminate  = false;
+					this.listCheckboxAll2.checked = true;
+					this.listCheckboxAll2.indeterminate  = false;
+				}
+				else if(all_unchecked){
+					this.listCheckboxAll.checked = false;
+					this.listCheckboxAll.indeterminate  = false;
+					this.listCheckboxAll2.checked = false;
+					this.listCheckboxAll2.indeterminate  = false;
+				}
+				else{
+					this.listCheckboxAll.checked = true;
+					this.listCheckboxAll.indeterminate  = true;
+					this.listCheckboxAll2.checked = true;
+					this.listCheckboxAll2.indeterminate  = true;
+				}
+				return
+			}
+
+			//Event click on checkbox!
+			var cb = evt.target;
+			var check = evt.target.checked;
+
+			for(var i=0, nb = this.drawBox.drawLayer.graphics.length; i < nb; i++){
+				this.drawBox.drawLayer.graphics[i].checked = check;
+				dom.byId('draw-action-checkclick--' + i).checked = check;
+			}
+			this.listCheckboxAll.checked = check;
+			this.listCheckboxAll.indeterminate = false;
+			this.listCheckboxAll2.checked = check;
+			this.listCheckboxAll2.indeterminate = false;
+		},
+
 		listOnActionClick : function (evt) {
 			if (!evt.target || !evt.target.id)
 				return;
@@ -490,6 +566,10 @@ define([
 				this.map.setExtent(extent, true);
 				this.listGenerateDrawTable();
 
+				break;
+			case 'draw-action-checkclick':
+				g.checked = evt.target.checked;
+				this.listUpdateAllCheckbox();
 				break;
 			}
 		},
@@ -800,13 +880,23 @@ define([
 			this.importFileInput.files[0] = "";
 		},
 
-		exportFile : function () {
+		exportInFile : function () {
+			this.launchExport(this.exportButton, false);
+		},
+
+		exportSelectionInFile : function () {
+			this.launchExport(this.exportSelectionButton, true);
+		},
+
+		launchExport:function(link, only_graphics_checked){
 			// Be sure the link will not open if not asked :
-			this.exportButton.href = "#";
-			this.exportButton.target = "_self";
-
+			link.href = "#";
+			link.target = "_self";
+
+			var drawing_json = this.drawingsGetJson(true, only_graphics_checked);
+
 			// Control if there are drawings
-			if (this.drawBox.drawLayer.graphics.length < 1) {
+			if (drawing_json=='') {
 				this.showMessage(this.nls.importWarningNoExport0Draw, 'warning');
 				return false;
 			}
@@ -815,7 +905,7 @@ define([
 
 			//  Case IE with blob support (IE >= 10) : use MS save blob
 			if (window.navigator && window.navigator.msSaveOrOpenBlob) {
-				var fileData = [this.drawingsGetJson(true)];
+				var fileData = [drawing_json];
 				blobObject = new Blob(fileData, {
 						type : 'application/octet-stream'
 					});
@@ -826,7 +916,7 @@ define([
 			//  Case IE without blob support : write in tab. Doesn't allways work....
 			if (has("ie")) {
 				var exportWin = window.top.open("about:blank", "_blank");
-				exportWin.document.write(this.drawingsGetJson(true));
+				exportWin.document.write(drawing_json);
 				exportWin.document.close();
 				exportWin.focus();
 				exportWin.document.execCommand('SaveAs', true, export_name);
@@ -835,9 +925,9 @@ define([
 			}
 
 			//  Case HTML5 (Firefox > 25, Chrome > 30....) : use data link with download attribute
-			this.exportButton.href = 'data:application/octet-stream;charset=utf-8,' + this.drawingsGetJson(true);
-			this.exportButton.target = "_blank";
-			this.exportButton.download = export_name;
+			link.href = 'data:application/octet-stream;charset=utf-8,' + drawing_json;
+			link.target = "_blank";
+			link.download = export_name;
 			return true;
 		},
 

diff --git a/css/style.css b/css/style.css
@@ -116,6 +116,9 @@
 .jimu-widget-edraw .draw-table .td-center {
     text-align: center;
 }
+.jimu-widget-edraw .draw-table .td-checkbox {
+    width:30px;
+}
 .jimu-widget-edraw .draw-table .selected td {
     background-color: rgba(15, 108, 159, 0.2);
 }
@@ -151,6 +154,9 @@
     position: relative;
     width: auto;
 }
+.jimu-widget-edraw .list-draw-actions span.text input {
+    margin-top:10px;
+}
 .jimu-widget-edraw .list-draw-actions span.text:hover {
     border: medium none;
     cursor: auto;

diff --git a/nls/fr/strings.js b/nls/fr/strings.js
@@ -64,7 +64,10 @@ define(
 		upLabel : "Monter ce dessin",
 		downLabel : "Descendre ce dessin",
 		zoomLabel : "Zoomer sur ce dessin",
-		zoomAllLabel : "Zoomer sur tous les dessins",
+		zoomAllLabel : "Zoomer sur les dessins sélectionnés",
+		deleteAllLabel : "Supprimer les dessins sélectionnés",
+		exportLabel : "Exporter les dessins sélectionnés",
+		noSelection : "Aucun dessin sélectionné",
 		saveButton : "Sauvegarder",
 		resetButton : "Réinitialiser",
 		cancelButton : "Annuler",

diff --git a/nls/strings.js b/nls/strings.js
@@ -64,7 +64,10 @@ define({
 		upLabel : "Move this drawing up",
 		downLabel : "Move this drawing down",
 		zoomLabel : "Zoom on this drawing",
-		zoomAllLabel : "Zoom on all drawings",
+		zoomAllLabel : "Zoom on selected drawings",
+		deleteAllLabel : "Delete selected drawings",
+		exportLabel : "Export selected drawings",
+		noSelection : "No drawings selected",
 		saveButton : "Save",
 		resetButton : "Reset",
 		cancelButton : "Cancel",