Combined setting list

couchpotato/static/scripts/page/settings.js

@@ -1003,3 +1003,165 @@ Option.Choice.Tag = new Class({
 	}
 
 });
+
+Option.Combined = new Class({
+
+	Extends: Option.String,
+
+	afterInject: function(){
+		var self = this;
+
+		self.fieldset = self.input.getParent('fieldset');
+		self.combined_list = new Element('div.combined_table').inject(self.fieldset.getElement('h2'), 'after');
+		self.values = {}
+		self.inputs = {}
+		self.items = []
+
+		self.options.combine.each(function(name){
+
+			self.inputs[name] = self.fieldset.getElement('input[name='+self.section+'['+name+']]');
+			var values = self.inputs[name].get('value').split(',');
+
+			values.each(function(value, nr){
+				if (!self.values[nr]) self.values[nr] = {};
+				self.values[nr][name] = value.trim();
+			});
+
+			self.inputs[name].getParent('.ctrlHolder').hide();
+			self.inputs[name].addEvent('change', self.addEmpty.bind(self))
+
+		});
+
+		var head = new Element('div.head').inject(self.combined_list)
+
+		Object.each(self.inputs, function(input, name){
+			new Element('abbr', {
+				'class': name,
+				'text': input.getPrevious().get('text'),
+				//'title': input.getNext().get('text')
+			}).inject(head)
+		})
+
+
+		Object.each(self.values, function(item, nr){
+			self.createItem(item);
+		});
+
+		self.addEmpty();
+
+	},
+
+	add_empty_timeout: 0,
+	addEmpty: function(){
+		var self = this;
+
+		if(self.add_empty_timeout) clearTimeout(self.add_empty_timeout);
+
+		var has_empty = 0;
+		self.items.each(function(ctrl_holder){
+			var empty_count = 0;
+			self.options.combine.each(function(name){
+				var input = ctrl_holder.getElement('input.'+name)
+				if(input.get('value') == '' || input.get('type') == 'checkbox')
+					empty_count++
+			});
+			has_empty += (empty_count == self.options.combine.length) ? 1 : 0;
+			ctrl_holder[(empty_count == self.options.combine.length) ? 'addClass' : 'removeClass']('is_empty');
+		});
+		if(has_empty > 0) return;
+
+		self.add_empty_timeout = setTimeout(function(){
+			self.createItem(false, null);
+		}, 10);
+	},
+
+	createItem: function(values){
+		var self = this;
+
+		var item = new Element('div.ctrlHolder').inject(self.combined_list),
+			value_count = 0,
+			value_empty = 0;
+
+		self.options.combine.each(function(name){
+			var value = values[name] || ''
+
+			if(name.indexOf('use') != -1){
+				var checkbox = new Element('input[type=checkbox].inlay.'+name, {
+					'checked': +value,
+					'events': {
+						'click': self.saveCombined.bind(self),
+						'change': self.saveCombined.bind(self)
+					}
+				}).inject(item);
+
+				new Form.Check(checkbox);
+			}
+			else {
+				value_count++;
+				new Element('input[type=text].inlay.'+name, {
+					'value': value,
+					'placeholder': name,
+					'events': {
+						'keyup': self.saveCombined.bind(self),
+						'change': self.saveCombined.bind(self)
+					}
+				}).inject(item);
+
+				if(!value)
+					value_empty++;
+			}
+
+
+		});
+
+		item[value_empty == value_count ? 'addClass' : 'removeClass']('is_empty');
+
+		new Element('a.icon.delete', {
+			'events': {
+				'click': self.deleteCombinedItem.bind(self)
+			}
+		}).inject(item)
+
+		self.items.include(item);
+
+
+	},
+
+	saveCombined: function(){
+		var self = this;
+
+
+		var temp = {}
+		self.items.each(function(item, nr){
+			self.options.combine.each(function(name){
+				var input = item.getElement('input.'+name);
+				if(item.hasClass('is_empty')) return;
+
+				if(!temp[name]) temp[name] = [];
+				temp[name][nr] = input.get('type') == 'checkbox' ? +input.get('checked') : input.get('value').trim();
+
+			})
+		});
+
+		self.options.combine.each(function(name){
+			self.inputs[name].set('value', (temp[name] || []).join(','));
+			self.inputs[name].fireEvent('change');
+		});
+
+		self.addEmpty()
+
+	},
+
+	deleteCombinedItem: function(e){
+		var self = this;
+		(e).stop();
+
+		var item = e.target.getParent();
+
+		self.items.erase(item);
+		item.destroy();
+
+		self.saveCombined();
+	}
+
+});

couchpotato/static/style/page/settings.css

@@ -86,7 +86,7 @@
 			.page fieldset.disabled .ctrlHolder {
 				display: none;
 			}
-			.page fieldset .ctrlHolder:first-child {
+			.page fieldset > .ctrlHolder:first-child {
 				display: block;
 				padding: 0;
 				width: auto;
@@ -454,40 +454,46 @@
 				margin-top: -13px;
 			}
 	
-	.page .section_newznab .head {
+	.page .combined_table .head {
 		margin: 0 0 0 60px;
 	}
 		.page .disabled .head { display: none; }
-		.page .section_newznab .head abbr {
+		.page .combined_table .head abbr {
 			display: inline-block;
 			font-weight: bold;
 			border-bottom: 1px dotted #fff;
 			line-height: 140%;
 			cursor: help;
 		}
-		.page .section_newznab .head abbr.host {
+		.page .combined_table .head abbr.use, .page .combined_table .head abbr.automation_urls_use {
+			display: none;
+		}
+		.page .combined_table .head abbr.host {
 			margin-right: 197px;
 		}
 		
-	.page .section_newznab .ctrlHolder {
+	.page .combined_table .ctrlHolder {
 		padding-top: 2px;
 		padding-bottom: 3px;
 	}
-	.page .section_newznab .ctrlHolder.hide { display: none; }
+	.page .combined_table .ctrlHolder.hide { display: none; }
 		
-	.page .section_newznab .ctrlHolder > * {
+	.page .combined_table .ctrlHolder > * {
 		margin: 0 10px 0 0;
 	}
 		
-	.page .section_newznab .ctrlHolder .delete {
-		display: inline-block;
+	.page .combined_table .ctrlHolder .delete {
+		display: none;
 		width: 22px;
 		height: 22px;
 		vertical-align: middle;
 		background-position: left center;
 	}
+	.page .combined_table .ctrlHolder:hover .delete {
+		display: inline-block;
+	}
 	
-	.page .section_newznab .ctrlHolder.is_empty .delete, .page.settings .section_newznab .ctrlHolder.is_empty .use {
+	.page .combined_table .ctrlHolder.is_empty .delete, .page.settings .combined_table .ctrlHolder.is_empty .check {
 		visibility: hidden;
 }