organize button added

5 files changed, 59 insertions, 27 deletions

diff --git a/css/redirector.css b/css/redirector.css
index e12a934..71c7d74 100644
--- a/css/redirector.css
+++ b/css/redirector.css
@@ -114,6 +114,10 @@ input[type="radio"] {
   border:solid 1px green;
 }
 
+.btn.blue.active {
+  color: white;
+  background:rgb(21,90,233);
+}
 
 #redirect-row-template {
   display: none;
@@ -235,6 +239,7 @@ button span {
   color:red !important;
 }
 
+/* nav btns */
 .move-up-btn, .move-down-btn, .move-downbottom-btn, .move-uptop-btn {
   width:45px !important;
 }
diff --git a/js/advancedmode.js b/js/advancedmode.js
deleted file mode 100644
index 1567223..0000000
--- a/js/advancedmode.js
+++ /dev/null
@@ -1,20 +0,0 @@
-
-function advancedModeToggle(ev) {
-    ev.preventDefault();
-    let advancedModes = ['.groupings', '.arrows']
-    for (let mode of advancedModes) {
-        let advancedModeElement = el(mode);
-        let isElementHidden = advancedModeElement.classList.contains('hidden');
-        isElementHidden ? advancedModeElement.classList.remove('hidden') : advancedModeElement.classList.add('hidden');
-    }
-
-    let buttonText = el('#advanced-mode').textContent;
-    buttonText.contains('Show') ? el('#advanced-mode').textContent = 'Hide Advanced Mode' : el('#advanced-mode').textContent = 'Show Advanced Mode';
-}
-
-
-function setupAdvancedModeEventListener() {
-    el('#advanced-mode').addEventListener('click', advancedModeToggle);
-}
-
-setupAdvancedModeEventListener();
\ No newline at end of file
diff --git a/js/organizemode.js b/js/organizemode.js
new file mode 100644
index 0000000..800a53f
--- /dev/null
+++ b/js/organizemode.js
@@ -0,0 +1,42 @@
+
+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)
+    }
+}
+
+function organizeModeToggle(ev) {
+    ev.preventDefault();
+    let organizeModes = ['.groupings', '.arrows']
+    for (let mode of organizeModes) {
+        let organizeModeElms = document.querySelectorAll(mode);
+        for (i = 0; i < organizeModeElms.length; ++i) {
+            let elm = organizeModeElms[i];
+            let isHidden = '';
+            if(mode === '.arrows') {
+                // targeting parent span for arrows
+                elm = elm.parentElement;
+            }
+            isHidden = elm.classList.contains('hidden');
+            isHidden ? elm.classList.remove('hidden') : elm.classList.add('hidden');
+        }
+    }
+
+    // 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();
+}
+
+
+function setupOrganizeModeToggleEventListener() {
+    el('#organize-mode').addEventListener('click', organizeModeToggle);
+}
+
+setupOrganizeModeToggleEventListener();
\ No newline at end of file
diff --git a/js/redirectorpage.js b/js/redirectorpage.js
index 6d0db2e..959b73c 100644
--- a/js/redirectorpage.js
+++ b/js/redirectorpage.js
@@ -28,10 +28,10 @@ function toggleSyncSetting() {
 	chrome.runtime.sendMessage({type:"toggle-sync", isSyncEnabled: !options.isSyncEnabled}, function(response) {
 		if(response.message === "sync-enabled"){
 			options.isSyncEnabled = true;
-			showMessage('Sync is enabled!',true);
+			showMessage('Sync is enabled!', true);
 		} else if(response.message === "sync-disabled"){
 			options.isSyncEnabled = false;
-			showMessage('Sync is disabled - local storage will be used!',true);
+			showMessage('Sync is disabled - local storage will be used!', true);
 		} else if(response.message.indexOf("Sync Not Possible")>-1){
 			options.isSyncEnabled = false;
 			chrome.storage.local.set({isSyncEnabled: $s.isSyncEnabled}, function(){
diff --git a/redirector.html b/redirector.html
index 03c5714..d2fbf9c 100644
--- a/redirector.html
+++ b/redirector.html
@@ -136,7 +136,7 @@
 					<input type="file" id="import-file" accept=".rjson,.json,.txt"  />
 					<label for="import-file" class="btn blue large">Import</label>
 					<a class="btn blue large" id="export-link" download="Redirector.json">Export</a>
-					<button class="btn blue large" id="advanced-mode">Show Advanced Mode</button>
+					<button class="btn blue large" id="organize-mode">Organize</button>
 				</span>
 
 				<a class="btn blue large" href="help.html" target="_blank">Help</a>
@@ -178,15 +178,20 @@
 								<button class="btn medium blue" data-action="toggleDisabled"><span data-show="disabled">Enable</span><span data-show="!disabled">Disable</span></button>
 								<button class="btn medium green" data-action="editRedirect">Edit</button>
 								<button class="btn medium red" data-action="confirmDeleteRedirect">Delete</button>
-								<button class="btn medium grey move-uptop-btn" data-action="moveUpTop" data-disabled="$first">⟰</button>
+								<span class="hidden">
+									<button class="btn medium grey move-uptop-btn arrows" data-action="moveUpTop" data-disabled="$first">⟰</button>
+								</span>
+
 								<button class="btn medium grey move-up-btn" data-action="moveUp" data-disabled="$first">▲</button>
 								<button class="btn medium grey move-down-btn" data-action="moveDown" data-disabled="$last">▼</button>
-								<button class="btn medium grey move-downbottom-btn" data-action="moveDownBottom" data-disabled="$last">⟱</button>
+								<span class="hidden">
+									<button class="btn medium grey move-downbottom-btn arrows" data-action="moveDownBottom" data-disabled="$last">⟱</button>
+								</span>
 								<button class="btn medium grey" data-action="duplicateRedirect">Duplicate</button>
 							</div>
 							<label class="toggle-container">
 								<input type="checkbox">
-								<span class="checkmark" data-action="toggleGrouping"></span>
+								<span class="checkmark groupings hidden" data-action="toggleGrouping"></span>
 							</label>
 						</div>
 					</div>
@@ -205,6 +210,6 @@
 		<script src="js/redirectorpage.js"></script>
 		<script src="js/editredirect.js"></script>
 		<script src="js/importexport.js"></script>
-		<script src="js/advancedmode.js"></script>
+		<script src="js/organizemode.js"></script>
 	</body>
 </html>