Navigate renaming choices with keyboard

couchpotato/static/scripts/page/settings.js

@@ -909,6 +909,7 @@ Option.Choice = new Class({
 						var input = self.tag_input.getElement('li:last-child input');
 						input.fireEvent('focus');
 						input.focus();
+						input.setCaretPosition(input.get('value').length);
 					}
 
 					self.el.addEvent('outerClick', function(){
@@ -965,6 +966,12 @@ Option.Choice = new Class({
 			'onChange': self.setOrder.bind(self),
 			'onBlur': function(){
 				self.addLastTag();
+			},
+			'onGoLeft': function(){
+				self.goLeft(this)
+			},
+			'onGoRight': function(){
+				self.goRight(this)
 			}
 		});
 		$(tag).inject(self.tag_input);
@@ -979,6 +986,30 @@ Option.Choice = new Class({
 		return tag;
 	},
 
+	goLeft: function(from_tag){
+		var self = this;
+
+		from_tag.blur();
+
+		var prev_index = self.tags.indexOf(from_tag)-1;
+		if(prev_index >= 0)
+			self.tags[prev_index].selectFrom('right')
+		else
+			from_tag.focus();
+
+	},
+	goRight: function(from_tag){
+		var self = this;
+
+		from_tag.blur();
+
+		var next_index = self.tags.indexOf(from_tag)+1;
+		if(next_index < self.tags.length)
+			self.tags[next_index].selectFrom('left')
+		else
+			from_tag.focus();
+	},
+
 	setOrder: function(){
 		var self = this;
 
@@ -1059,7 +1090,16 @@ Option.Choice.Tag = new Class({
 					'width': 0
 				},
 				'events': {
-					'keyup': self.is_choice ? null : function(){
+					'keyup': self.is_choice ? null : function(e){
+						var current_caret_pos = self.input.getCaretPosition();
+						if(e.key == 'left' && current_caret_pos == self.last_caret_pos){
+							self.fireEvent('goLeft');
+						}
+						else if (e.key == 'right' && self.last_caret_pos === current_caret_pos){
+							self.fireEvent('goRight');
+						}
+						self.last_caret_pos = self.input.getCaretPosition();
+
 						self.setWidth();
 						self.fireEvent('change');
 					},
@@ -1081,8 +1121,70 @@ Option.Choice.Tag = new Class({
 
 	},
 
+	blur: function(){
+		var self = this;
+
+		self.input.blur();
+
+		self.selected = false;
+		self.el.removeClass('selected');
+		self.input.removeEvents('outerClick');
+	},
+
 	focus: function(){
-		this.input.focus();
+		var self = this;
+		if(!self.is_choice){
+			this.input.focus();
+		}
+		else {
+			if(self.selected) return;
+			self.selected = true;
+			self.el.addClass('selected');
+			self.input.addEvent('outerClick', self.blur.bind(self));
+
+			var temp_input = new Element('input', {
+				'events': {
+					'keyup': function(e){
+						e.stop();
+
+						if(e.key == 'right'){
+							self.fireEvent('goRight');
+							this.destroy();
+						}
+						else if (e.key == 'left'){
+							self.fireEvent('goLeft');
+							this.destroy();
+						}
+						else if (e.key == 'backspace'){
+							self.del();
+							this.destroy();
+						}
+					}
+				},
+				'styles': {
+					'height': 0,
+					'width': 0,
+					'position': 'absolute',
+					'top': -200
+				}
+			});
+			self.el.adopt(temp_input)
+			temp_input.focus();
+		}
+	},
+
+	selectFrom: function(direction){
+		var self = this;
+
+		if(!direction || self.is_choice){
+			self.focus();
+		}
+		else {
+			self.focus();
+			var position = direction == 'left' ? 0 : self.input.get('value').length;
+			self.input.setCaretPosition(position);
+		}
+
 	},
 
 	setWidth: function(){

couchpotato/static/style/page/settings.css

@@ -362,28 +362,29 @@
 				border-radius: 2px;
 			}
 			.page .tag_input > ul:hover > li.choice {
-				background: url('../../images/sprite.png') no-repeat 94% -53px, -webkit-gradient(
+				background: -webkit-gradient(
 				    linear,
 				    left bottom,
 				    left top,
 				    color-stop(0, rgba(255,255,255,0.1)),
 				    color-stop(1, rgba(255,255,255,0.3))
 				);
-				background: url('../../images/sprite.png') no-repeat 94% -53px, -moz-linear-gradient(
+				background: -moz-linear-gradient(
 				    center top,
 				    rgba(255,255,255,0.3) 0%,
 				    rgba(255,255,255,0.1) 100%
 				);
 			}
-			.page .tag_input > ul > li.choice:hover {
+			.page .tag_input > ul > li.choice:hover,
-				background: url('../../images/sprite.png') no-repeat 94% -53px, -webkit-gradient(
+			.page .tag_input > ul > li.choice.selected {
+				background: -webkit-gradient(
 				    linear,
 				    left bottom,
 				    left top,
 				    color-stop(0, #406db8),
 				    color-stop(1, #5b9bd1)
 				);
-				background: url('../../images/sprite.png') no-repeat 94% -53px, -moz-linear-gradient(
+				background: -moz-linear-gradient(
 				    center top,
 				    #5b9bd1 0%,
 				    #406db8 100%
@@ -436,7 +437,8 @@
 				);
 				background-size: 65%;
 			}
-			.page .tag_input .choice:hover .delete { display: inline-block; }
+			.page .tag_input .choice:hover .delete, 
+			.page .tag_input .choice.selected .delete { display: inline-block; }
 			.page .tag_input .choice .delete:hover {
 				height: 14px;
 				margin-top: -13px;