From 77d92e6edd9d5aadd86f7259994dc824b5eda376 Mon Sep 17 00:00:00 2001 From: Nick Colletti Date: Tue, 4 Feb 2020 19:15:46 -0500 Subject: grouping works on enable toggle. cleaned up. --- js/redirectorpage.js | 143 +++++++++++++++++++++++++++------------------------ 1 file changed, 76 insertions(+), 67 deletions(-) (limited to 'js/redirectorpage.js') diff --git a/js/redirectorpage.js b/js/redirectorpage.js index 959b73c..d0a7b67 100644 --- a/js/redirectorpage.js +++ b/js/redirectorpage.js @@ -116,24 +116,41 @@ 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() + "']"); + elm.classList.remove('grouped') + elm.childNodes[7].childNodes[3].classList.remove("checkMarked"); + elm.childNodes[7].childNodes[1].removeAttribute("checked"); + } + } 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(element) { + element.childNodes[7].childNodes[3].classList.remove("checkMarked"); + element.childNodes[7].childNodes[1].removeAttribute("checked"); + element.classList.remove('grouped'); +} function swap(node1, node2) { const afterNode2 = node2.nextElementSibling; @@ -143,24 +160,41 @@ 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)) { + console.log('adjacent') + 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() + "']"); + // elm.childNodes[7].childNodes[3].classList.remove("checkMarked"); + // elm.childNodes[7].childNodes[1].removeAttribute("checked"); + // elm.classList.remove('grouped'); + clearGrouping(elm); + + let prev = document.querySelector("[data-index='" + (rule.index + jumpLength).toString() + "']"); + // prev.childNodes[7].childNodes[3].classList.remove("checkMarked"); + // prev.childNodes[7].childNodes[1].removeAttribute("checked"); + // prev.classList.remove('grouped'); + clearGrouping(prev); + swap(elm,prev); } for(let rule of group) { + console.log('NSC: groupedMoveDown -> rule', rule); // 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) { @@ -177,31 +211,6 @@ function isGroupAdjacent(grouping) { } 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; @@ -210,43 +219,42 @@ function groupedMoveUp(group) { 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); + // elm.classList.remove('grouped') + // elm.childNodes[7].childNodes[3].classList.remove("checkMarked"); + // elm.childNodes[7].childNodes[1].removeAttribute("checked"); + clearGrouping(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"); + // prev.classList.remove('grouped') + // prev.childNodes[7].childNodes[3].classList.remove("checkMarked"); + // prev.childNodes[7].childNodes[1].removeAttribute("checked"); + 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]; @@ -259,9 +267,7 @@ 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 @@ -272,7 +278,6 @@ function moveDown(index) { REDIRECTS[index+1] = REDIRECTS[index]; REDIRECTS[index] = next; } - updateBindings(); saveChanges(); } @@ -346,6 +351,8 @@ function pageLoad() { // 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'); @@ -377,7 +384,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 -- cgit v1.2.3 From 226071781cb4bc63f4587cf2df5b3c95b5fd0ccd Mon Sep 17 00:00:00 2001 From: Nick Colletti Date: Wed, 5 Feb 2020 11:38:30 -0500 Subject: removed comments. added querySelectors. --- js/redirectorpage.js | 54 ++++++++++------------------------------------------ redirector.html | 2 +- 2 files changed, 11 insertions(+), 45 deletions(-) (limited to 'js/redirectorpage.js') diff --git a/js/redirectorpage.js b/js/redirectorpage.js index d0a7b67..ae64785 100644 --- a/js/redirectorpage.js +++ b/js/redirectorpage.js @@ -131,11 +131,8 @@ function toggleDisabled(index) { let redirectDom = REDIRECTS[redirect.index]; redirectDom.disabled = !redirectDom.disabled redirectDom.grouped = !redirectDom.grouped - let elm = document.querySelector("[data-index='" + (redirect.index).toString() + "']"); - elm.classList.remove('grouped') - elm.childNodes[7].childNodes[3].classList.remove("checkMarked"); - elm.childNodes[7].childNodes[1].removeAttribute("checked"); + clearGrouping(elm); } } else { let redirect = REDIRECTS[index]; @@ -146,10 +143,12 @@ function toggleDisabled(index) { saveChanges(); } -function clearGrouping(element) { - element.childNodes[7].childNodes[3].classList.remove("checkMarked"); - element.childNodes[7].childNodes[1].removeAttribute("checked"); - element.classList.remove('grouped'); +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) { @@ -163,30 +162,18 @@ function groupedMoveDown(group) { var jumpLength = 1; if(isGroupAdjacent(group)) { - console.log('adjacent') jumpLength = group.length; } for(let rule of group) { - // swap positions in dom let elm = document.querySelector("[data-index='" + (rule.index).toString() + "']"); - // elm.childNodes[7].childNodes[3].classList.remove("checkMarked"); - // elm.childNodes[7].childNodes[1].removeAttribute("checked"); - // elm.classList.remove('grouped'); - clearGrouping(elm); - let prev = document.querySelector("[data-index='" + (rule.index + jumpLength).toString() + "']"); - // prev.childNodes[7].childNodes[3].classList.remove("checkMarked"); - // prev.childNodes[7].childNodes[1].removeAttribute("checked"); - // prev.classList.remove('grouped'); + clearGrouping(elm); clearGrouping(prev); - swap(elm,prev); } for(let rule of group) { - console.log('NSC: groupedMoveDown -> rule', rule); - // swap positions in array rule.row.grouped = false; let prevRedir = REDIRECTS[rule.index + jumpLength]; REDIRECTS[rule.index + jumpLength] = REDIRECTS[rule.index]; @@ -200,37 +187,24 @@ function groupedMoveDown(group) { 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) { - // 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) { - // swap positions in dom let elm = document.querySelector("[data-index='" + (rule.index).toString() + "']"); - // elm.classList.remove('grouped') - // elm.childNodes[7].childNodes[3].classList.remove("checkMarked"); - // elm.childNodes[7].childNodes[1].removeAttribute("checked"); - clearGrouping(elm); - let prev = document.querySelector("[data-index='" + (rule.index - jumpLength).toString() + "']"); - // prev.classList.remove('grouped') - // prev.childNodes[7].childNodes[3].classList.remove("checkMarked"); - // prev.childNodes[7].childNodes[1].removeAttribute("checked"); + clearGrouping(elm); clearGrouping(prev); if(jumpLength > 1) { @@ -239,7 +213,6 @@ function groupedMoveUp(group) { } for(let rule of group) { - // swap positions in array rule.row.grouped = false; let prevRedir = REDIRECTS[rule.index - jumpLength]; REDIRECTS[rule.index - jumpLength] = REDIRECTS[rule.index]; @@ -253,10 +226,8 @@ function moveUp(index) { let grouping = checkIfGroupingExists(); if(grouping.length > 1) { - // many groupedMoveUp(grouping); } else { - // one let prev = REDIRECTS[index-1]; REDIRECTS[index-1] = REDIRECTS[index]; REDIRECTS[index] = prev; @@ -270,10 +241,8 @@ function moveDown(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; @@ -346,12 +315,10 @@ 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'); + ev.target.parentElement.parentElement.classList.add('grouped'); toggleGrouping(ev.target.index); } @@ -371,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`; diff --git a/redirector.html b/redirector.html index d2fbf9c..2d8bcd3 100644 --- a/redirector.html +++ b/redirector.html @@ -190,7 +190,7 @@ -- cgit v1.2.3