added move to First and Last buttons

4 files changed, 45 insertions, 22 deletions

diff --git a/css/redirector.css b/css/redirector.css
index 34ecaa3..29cec4f 100644
--- a/css/redirector.css
+++ b/css/redirector.css
@@ -235,10 +235,13 @@ button span {
   color:red !important;
 }
 
-.move-up-btn, .move-down-btn {
+.move-up-btn, .move-down-btn, .move-downbottom-btn, .move-uptop-btn {
   width:45px !important;
 }
 
+.move-downbottom-btn, .move-uptop-btn {
+  height:25px !important;
+}
 
 .redirect-row label {
   display:inline-block;
@@ -312,8 +315,8 @@ a.disabled:hover, button[disabled]:hover {
 }
 
 .blur {
-  -webkit-filter:blur(3px); 
-  filter:blur(3px); 
+  -webkit-filter:blur(3px);
+  filter:blur(3px);
 }
 
 #edit-redirect-form {
@@ -353,7 +356,7 @@ a.disabled:hover, button[disabled]:hover {
 
 .input-cell {
   padding-top:1px;
-} 
+}
 
 .form-grid div input[type='text'] {
   width:510px;
@@ -404,7 +407,7 @@ a.disabled:hover, button[disabled]:hover {
 }
 
 ::-moz-placeholder {  /* Firefox 19+ */
-   color: #c0c0c0;  
+   color: #c0c0c0;
 }
 
 .advanced {
@@ -509,10 +512,10 @@ footer small a:hover {
 
   .redirect-row:nth-child(odd) {
     background: rgb(31,32,35);
-  } 
+  }
   .redirect-row:nth-child(even) {
     background: rgb(41,42,45);
-  } 
+  }
 
   .btn {
     background-color: rgb(32,33,36);
@@ -590,7 +593,7 @@ footer small a:hover {
   }
 
   .example-result-error {
-    color:rgb(252,87,84) !important; 
+    color:rgb(252,87,84) !important;
   }
 
   #edit-redirect-form input {
diff --git a/js/redirectorpage.js b/js/redirectorpage.js
index f82b0b7..1cad8a8 100644
--- a/js/redirectorpage.js
+++ b/js/redirectorpage.js
@@ -23,7 +23,7 @@ function saveChanges() {
 		}
 	});
 }
-		
+
 function toggleSyncSetting() {
 	chrome.runtime.sendMessage({type:"toggle-sync", isSyncEnabled: !options.isSyncEnabled}, function(response) {
 		if(response.message === "sync-enabled"){
@@ -60,16 +60,16 @@ function renderRedirects() {
 }
 
 function renderSingleRedirect(node, redirect, index) {
-	
+
 	//Add extra props to help with rendering...
 	if (index === 0) {
 		redirect.$first = true;
 	}
 	if (index === REDIRECTS.length - 1) {
 		redirect.$last = true;
-	} 
+	}
 	redirect.$index = index;
-	
+
 	dataBind(node, redirect);
 
 	node.setAttribute('data-index', index);
@@ -134,11 +134,25 @@ function moveDown(index) {
 	saveChanges();
 }
 
+function moveUpTop(index) {
+	let top = REDIRECTS[0];
+	move(REDIRECTS, index, top);
+	updateBindings();
+	saveChanges();
+}
+
+function moveDownBottom(index) {
+	let bottom = REDIRECTS.length - 1;
+	move(REDIRECTS, index, bottom);
+	updateBindings();
+	saveChanges();
+}
+
 //All the setup stuff for the page
 function pageLoad() {
 	template = el('#redirect-row-template');
 	template.parentNode.removeChild(template);
-	
+
 	//Need to proxy this through the background page, because Firefox gives us dead objects
 	//nonsense when accessing chrome.storage directly.
 	chrome.runtime.sendMessage({type: "get-redirects"}, function(response) {
@@ -169,7 +183,7 @@ function pageLoad() {
 			));
 		}
 		renderRedirects();
-	}); 
+	});
 
 	chrome.storage.local.get({isSyncEnabled:false}, function(obj){
 		options.isSyncEnabled = obj.isSyncEnabled;
diff --git a/js/util.js b/js/util.js
index a751497..4249acc 100644
--- a/js/util.js
+++ b/js/util.js
@@ -36,12 +36,12 @@ function dataBind(el, dataObject) {
 		}
 	}
 	for (let tag of el.querySelectorAll('[data-show]')) {
-		let shouldShow = boolValue(tag.getAttribute('data-show'));	
+		let shouldShow = boolValue(tag.getAttribute('data-show'));
 		tag.style.display = shouldShow ? '' : 'none';
 	}
 	for (let tag of el.querySelectorAll('[data-disabled]')) {
 		let isDisabled = boolValue(tag.getAttribute('data-disabled'));
-		
+
 		if (isDisabled) {
 			tag.classList.add('disabled');
 			tag.setAttribute('disabled', 'disabled');
@@ -82,6 +82,10 @@ function showForm(selector, dataObject) {
 	show(selector);
 }
 
+function move(arr, from, to) {
+    arr.splice(to, 0, arr.splice(from, 1)[0]);
+}
+
 function hideForm(selector) {
 	hide('#cover');
 	hide(selector);
diff --git a/redirector.html b/redirector.html
index af11b6b..6a2e492 100644
--- a/redirector.html
+++ b/redirector.html
@@ -10,7 +10,7 @@
 	<body>
 		<div id="cover">
 		</div>
-		
+
 		<!-- Confirmation form for deleting redirects -->
 		<div id="delete-redirect-form">
 			<h3>Are you sure you want to delete this redirect?</h3>
@@ -39,7 +39,7 @@
 				<button id="cancel-delete" class="btn grey large">No, don't delete it</button>
 			</div>
 		</div>
-		
+
 
 		<!-- Form for creating and editing redirects -->
 		<div id="edit-redirect-form">
@@ -124,20 +124,20 @@
 
 
 		<div id="blur-wrapper">
-			
+
 			<h1>REDIRECTOR</h1>
 			<h5>Go where <em>YOU</em> want!</h5>
 
 			<div id="menu">
 				<a id="create-new-redirect" class="btn blue large">Create new redirect</a>
-				
+
 				<!-- Importing/Exporting of redirects -->
 				<span>
 					<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>
 				</span>
-	
+
 				<a class="btn blue large" href="help.html" target="_blank">Help</a>
 			</div>
 
@@ -177,8 +177,10 @@
 								<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>
 								<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>
 								<button class="btn medium grey" data-action="duplicateRedirect">Duplicate</button>
 							</div>
 						</div>
@@ -189,7 +191,7 @@
 			<footer>
 				<small>Redirector is created by <a target="_blank" href="http://einaregilsson.com">Einar Egilsson</a></small>
 			</footer>
-		
+
 		</div>
 
 		<script src="js/stub.js"></script>