Merge pull request #185 from ncolletti/nav-btns

grouping works on enable toggle. code clean up.

1 files changed, 58 insertions, 83 deletions

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