Merge pull request #185 from ncolletti/nav-btns

grouping works on enable toggle. code clean up.

4 files changed, 64 insertions, 95 deletions

diff --git a/js/editredirect.js b/js/editredirect.js
index c770199..ca4ea07 100644
--- a/js/editredirect.js
+++ b/js/editredirect.js
@@ -29,7 +29,6 @@ function saveRedirect() {
 		REDIRECTS[activeRedirect.index] = savedRedirect; //To strip out any extra crap we've added
 	} else {
 		REDIRECTS.push(savedRedirect);
-	
 		let newNode = template.cloneNode(true);
 		newNode.removeAttribute('id');
 		el('.redirect-rows').appendChild(newNode);
@@ -59,11 +58,10 @@ function editFormChange() {
 		let prop = input.getAttribute('data-bind');
 		activeRedirect[prop] = input.value;
 	}
-	
 	activeRedirect.appliesTo = [];
 	for (let input of el('#apply-to').querySelectorAll('input:checked')) {
 		activeRedirect.appliesTo.push(input.value);
-	}	
+	}
 
 	activeRedirect.processMatches = el('#process-matches option:checked').value;
 	activeRedirect.patternType = el('[name="patterntype"]:checked').value;
@@ -78,8 +76,8 @@ function editFormChange() {
 var deleteIndex;
 function confirmDeleteRedirect(index) {
 	deleteIndex = index;
-	let redirect = REDIRECTS[deleteIndex];
-	showForm('#delete-redirect-form', redirect);
+		let redirect = REDIRECTS[deleteIndex];
+		showForm('#delete-redirect-form', redirect);
 }
 
 function deleteRedirect() {
@@ -104,7 +102,7 @@ function setupEditAndDeleteEventListeners() {
 	el('#confirm-delete').addEventListener('click', deleteRedirect);
 	el('#cancel-delete').addEventListener('click', cancelDelete);
 
-	el('#advanced-toggle a').addEventListener('click', toggleAdvancedOptions);	
+	el('#advanced-toggle a').addEventListener('click', toggleAdvancedOptions);
 
 	el('#create-new-redirect').addEventListener('click', createNewRedirect);
 	//Listen to any change from the edit form...
diff --git a/js/organizemode.js b/js/organizemode.js
index 800a53f..f550d1b 100644
--- a/js/organizemode.js
+++ b/js/organizemode.js
@@ -3,7 +3,7 @@ function displayOrganizeModeMessage() {
     if(el('#message-box').classList.contains('visible')) {
         hideMessage();
     } else {
-        showMessage("Use ⟱ to move a redirect to the bottom, ⟰ to move to the top, and use the checkboxes to select multiple redirects and move them together.", true)
+        showMessage("Use ⟱ to move a redirect to the bottom, ⟰ to move to the top, and use the checkboxes to select multiple redirects.", true)
     }
 }
 
@@ -24,11 +24,7 @@ function organizeModeToggle(ev) {
         }
     }
 
-    // let buttonText = el('#organize-mode').textContent;
-    // buttonText.includes('Show') ? el('#organize-mode').textContent = 'Hide Organize' : el('#organize-mode').textContent = 'Show Organize';
-
     let buttonClasses = el('#organize-mode').classList;
-    console.log('NSC: organizeModeToggle -> buttonClasses', buttonClasses);
     !buttonClasses.contains('active') ? el('#organize-mode').classList.add('active') : el('#organize-mode').classList.remove('active');
 
     displayOrganizeModeMessage();
diff --git a/js/redirectorpage.js b/js/redirectorpage.js
index 959b73c..ae64785 100644
--- a/js/redirectorpage.js
+++ b/js/redirectorpage.js
@@ -116,24 +116,40 @@ function duplicateRedirect(index) {
 	saveChanges();
 }
 
+function checkIfGroupingExists() {
+	let grouping = REDIRECTS.map((row, i) => { return { row, index: i}})
+									.filter(result => result.row.grouped)
+									.sort((a, b) => a.index - b.index);
+	return grouping;
+}
+
 function toggleDisabled(index) {
-	let redirect = REDIRECTS[index];
-	redirect.disabled = !redirect.disabled
+	let grouping = checkIfGroupingExists();
+
+	if(grouping && grouping.length > 1) {
+		for (let redirect of grouping) {
+			let redirectDom = REDIRECTS[redirect.index];
+			redirectDom.disabled = !redirectDom.disabled
+			redirectDom.grouped = !redirectDom.grouped
+			let elm = document.querySelector("[data-index='" + (redirect.index).toString() + "']");
+			clearGrouping(elm);
+		}
+	} else {
+		let redirect = REDIRECTS[index];
+		redirect.disabled = !redirect.disabled
+	}
+
 	updateBindings();
 	saveChanges();
 }
 
-// function handleGroupedMove(index) {
-//     console.log(`NSC`, arguments);
-// 	let grouping = REDIRECTS.filter(row => row.grouped);
-// 	let size = grouping.length;
-// 	console.log(grouping)
-// }
-
-// function wrap(node, elm) {
-// 	node.parentNode.insertBefore(elm, node);
-// 	// node.previousElementSibling.appendChild(node);
-// }
+function clearGrouping(elm) {
+	elm.classList.remove('grouped');
+	let checkMarkElm = elm.querySelector("label > .groupings");
+	let toggleBoxElm = elm.querySelector("input");
+	checkMarkElm.classList.remove("checkMarked");
+	toggleBoxElm.classList.remove("checked");
+}
 
 function swap(node1, node2) {
     const afterNode2 = node2.nextElementSibling;
@@ -143,112 +159,75 @@ function swap(node1, node2) {
 }
 
 function groupedMoveDown(group) {
-	// let grouping = REDIRECTS.map((row, i) => { return { row, index: i}})
-	// 								.filter(result => result.row.grouped)
-	// 								.sort((a, b) => b.index - a.index);
+		var jumpLength = 1;
+
+		if(isGroupAdjacent(group)) {
+			jumpLength = group.length;
+		}
+
 		for(let rule of group) {
-			// swap positions in dom
 			let elm = document.querySelector("[data-index='" + (rule.index).toString() + "']");
-			let prev = document.querySelector("[data-index='" + (rule.index + group.length).toString() + "']");
+			let prev = document.querySelector("[data-index='" + (rule.index + jumpLength).toString() + "']");
+			clearGrouping(elm);
+			clearGrouping(prev);
 			swap(elm,prev);
 		}
 
 		for(let rule of group) {
-			// swap positions in array
-			rule.row.grouping = false;
-			let prevRedir = REDIRECTS[rule.index + group.length];
-			REDIRECTS[rule.index + group.length] = REDIRECTS[rule.index];
+			rule.row.grouped = false;
+			let prevRedir = REDIRECTS[rule.index + jumpLength];
+			REDIRECTS[rule.index + jumpLength] = REDIRECTS[rule.index];
 			REDIRECTS[rule.index] = prevRedir;
-			// REDIRECTS[rule.index].grouped = false;
 		}
+
+	updateBindings();
+	saveChanges();
 }
 
 function isGroupAdjacent(grouping) {
 	let distances = [];
 	for(let i = grouping.length - 1; i >= 0; i--) {
-
 		if(i != 0) {
 			distances.push(grouping[i].index - grouping[i - 1].index);
-
 		}
-
 	}
 	return distances.every(distance => distance === 1);
 }
 
 function groupedMoveUp(group) {
-
-
-	console.log(group);
-
-	// working config - sort of
-	// for(let rule of group) {
-	// 	// swap positions in dom
-	// 	let elm = document.querySelector("[data-index='" + (rule.index).toString() + "']");
-	// 	let prev = document.querySelector("[data-index='" + (rule.index - group.length).toString() + "']");
-	// 	elm.childNodes[7].childNodes[3].classList.remove("checkMarked");
-    //     console.log(`NSC: groupedMoveUp -> elm`, elm);
-	// 	prev.childNodes[7].childNodes[3].classList.remove("checkMarked");
-    //     console.log(`NSC: groupedMoveUp -> prev`, prev);
-	// 	swap(elm,prev);
-	// }
-
-	// for(let rule of group) {
-	// 	// swap positions in array
-	// 	rule.row.grouping = false;
-	// 	let prevRedir = REDIRECTS[rule.index - group.length];
-	// 	REDIRECTS[rule.index - group.length] = REDIRECTS[rule.index];
-	// 	REDIRECTS[rule.index] = prevRedir;
-	// 	// REDIRECTS[rule.index].grouped = false;
-	// }
-
-	// only set the below to 1 if groupings are not next to each other.
 	var jumpLength = 1;
 
 	if(isGroupAdjacent(group)) {
-		console.log('adjacent')
 		jumpLength = group.length;
 	}
 
-
-
-
 	for(let rule of group) {
-        console.log(`NSC: groupedMoveUp -> rule`, rule);
-		// swap positions in dom
 		let elm = document.querySelector("[data-index='" + (rule.index).toString() + "']");
-        console.log(`NSC: groupedMoveUp -> elm`, elm);
 		let prev = document.querySelector("[data-index='" + (rule.index - jumpLength).toString() + "']");
-        console.log(`NSC: groupedMoveUp -> prev`, prev);
-		elm.childNodes[7].childNodes[3].classList.remove("checkMarked");
-		prev.childNodes[7].childNodes[3].classList.remove("checkMarked");
+		clearGrouping(elm);
+		clearGrouping(prev);
+
 		if(jumpLength > 1) {
 			swap(elm,prev);
 		}
-
 	}
 
 	for(let rule of group) {
-		// swap positions in array
-		rule.row.grouping = false;
+		rule.row.grouped = false;
 		let prevRedir = REDIRECTS[rule.index - jumpLength];
 		REDIRECTS[rule.index - jumpLength] = REDIRECTS[rule.index];
 		REDIRECTS[rule.index] = prevRedir;
 	}
+
+	updateBindings();
+	saveChanges();
 }
 function moveUp(index) {
-	let grouping = REDIRECTS.map((row, i) => { return { row, index: i}})
-									.filter(result => result.row.grouped)
-									.sort((a, b) => a.index - b.index);
+	let grouping = checkIfGroupingExists();
 
 	if(grouping.length > 1) {
-		// many
-		console.log('many')
-
 		groupedMoveUp(grouping);
-
 	} else {
-		// one
 		let prev = REDIRECTS[index-1];
 		REDIRECTS[index-1] = REDIRECTS[index];
 		REDIRECTS[index] = prev;
@@ -259,20 +238,15 @@ function moveUp(index) {
 }
 
 function moveDown(index) {
-	let grouping = REDIRECTS.map((row, i) => { return { row, index: i}})
-									.filter(result => result.row.grouped)
-									.sort((a, b) => a.index - b.index);
+	let grouping = checkIfGroupingExists();
 
 	if(grouping.length > 1) {
-		// many
 		groupedMoveDown(grouping);
 	} else {
-		// one
 		let next = REDIRECTS[index+1];
 		REDIRECTS[index+1] = REDIRECTS[index];
 		REDIRECTS[index] = next;
 	}
-
 	updateBindings();
 	saveChanges();
 }
@@ -341,11 +315,11 @@ function pageLoad() {
 	//Setup event listeners
 	el('#hide-message').addEventListener('click', hideMessage);
 	el('#storage-sync-option input').addEventListener('click', toggleSyncSetting);
-
 	el('.redirect-rows').addEventListener('click', function(ev) {
-		// apply checkMarked class for Grouping
 		if(ev.target.type == 'checkbox') {
 			ev.target.nextElementSibling.classList.add("checkMarked");
+			ev.target.parentElement.parentElement.classList.add('grouped');
+			toggleGrouping(ev.target.index);
 		}
 
 		let action = ev.target.getAttribute('data-action');
@@ -364,7 +338,6 @@ function pageLoad() {
 	});
 }
 
-
 function updateFavicon(e) {
 	let type = e.matches ? 'dark' : 'light'
 	el('link[rel="shortcut icon"]').href = `images/icon-${type}-theme-32.png`;
@@ -377,7 +350,9 @@ mql.onchange = updateFavicon;
 updateFavicon(mql);
 
 function toggleGrouping(index) {
-	REDIRECTS[index].grouped = !REDIRECTS[index].grouped;
+	if(REDIRECTS[index]) {
+		REDIRECTS[index].grouped = !REDIRECTS[index].grouped;
+	}
 }
 
 pageLoad();
\ No newline at end of file
diff --git a/redirector.html b/redirector.html
index d2fbf9c..2d8bcd3 100644
--- a/redirector.html
+++ b/redirector.html
@@ -190,7 +190,7 @@
 								<button class="btn medium grey" data-action="duplicateRedirect">Duplicate</button>
 							</div>
 							<label class="toggle-container">
-								<input type="checkbox">
+								<input class="checkbox" type="checkbox">
 								<span class="checkmark groupings hidden" data-action="toggleGrouping"></span>
 							</label>
 						</div>