Make the add button semi-work

Paste a URL, click the '+' button, and a new sample progress bar
appears on the page (woo!).

TODO: initialise drag handles on add of a new sample progress bar

3 files changed, 17 insertions, 3 deletions

diff --git a/assets/js/views/sample-add-view.js b/assets/js/views/sample-add-view.js
index 65ade2d..0eb3349 100644
--- a/assets/js/views/sample-add-view.js
+++ b/assets/js/views/sample-add-view.js
@@ -1,5 +1,17 @@
 ClipPlay.Views.SampleAddView = Marionette.View.extend({
+	events: {
+		'click .js-create-sample': 'on_sample_add'
+	},
+	
 	initialize: function(options) {
 		this.setElement(options.el);
+	},
+	
+	on_sample_add: function() {
+		this.collection.add({
+			url: this.$('.js-sample-url').val()
+		});
+		
+		return false;
 	}
 });
\ No newline at end of file
diff --git a/assets/js/views/sample-editor.js b/assets/js/views/sample-editor.js
index 99c2630..bb06b01 100644
--- a/assets/js/views/sample-editor.js
+++ b/assets/js/views/sample-editor.js
@@ -28,8 +28,10 @@ ClipPlay.Views.SampleEditor = Marionette.CollectionView.extend({
 	
 	
 	onRender: function() {
+		// Initialize view for adding new samples
 		this.sample_add_view = new ClipPlay.Views.SampleAddView({
-			el: $('#add-sample')
+			el: $('#add-sample'),
+			collection: this.collection
 		});
 	},
 	
diff --git a/index.html b/index.html
index 3701c11..bd2d1c2 100644
--- a/index.html
+++ b/index.html
@@ -17,8 +17,8 @@
 	<div role="main">
 		<div id="add-sample">
 			<form action="" method="get">
-				<input type="text" placeholder="Video URL" />
-				<input type="submit" value="Add" />
+				<input type="text" class="js-sample-url" placeholder="Video URL" />
+				<button type="button" class="js-create-sample">+</button>
 			</form>
 		</div>