diff options
| -rw-r--r-- | css/redirector.css | 5 | ||||
| -rw-r--r-- | js/advancedmode.js | 20 | ||||
| -rw-r--r-- | js/organizemode.js | 42 | ||||
| -rw-r--r-- | js/redirectorpage.js | 4 | ||||
| -rw-r--r-- | redirector.html | 15 |
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> |