Initialise drag handles on sample add

When a new sample is added, initialise the drag handles so they are
draggable.

Also remove initial sample from markup.

3 files changed, 25 insertions, 38 deletions

diff --git a/assets/js/views/sample-editor.js b/assets/js/views/sample-editor.js
index bb06b01..74dc04d 100644
--- a/assets/js/views/sample-editor.js
+++ b/assets/js/views/sample-editor.js
@@ -2,25 +2,10 @@ ClipPlay.Views.SampleEditor = Marionette.CollectionView.extend({
 	itemView: ClipPlay.Views.Sample,
 	
 	initialize: function() {
-		this.initialize_clip_drag_handles();
 		this.initialize_player();
 	},
 	
 	
-	initialize_clip_drag_handles: function() {
-		var $clip_line = $('.js-clip-line');
-		
-		$clip_line.draggable({
-			axis: 'x',
-			handle: '.js-drag-handle',
-			scroll: false,
-			containment: $clip_line.parents('.progress-bar')
-		});
-		
-		$clip_line.on('drag', this.on_clip_drag_stop);
-	},
-	
-	
 	// this will soon be obsolete
 	initialize_player: function() {
 		this.player = new OP.Player($('#single-video-lets-see-if-we-can-get-this-to-work').get(0));
@@ -33,10 +18,5 @@ ClipPlay.Views.SampleEditor = Marionette.CollectionView.extend({
 			el: $('#add-sample'),
 			collection: this.collection
 		});
-	},
-	
-	
-	on_clip_drag_stop: function(e, ui) {
-		
 	}
 });
\ No newline at end of file
diff --git a/assets/js/views/sample.js b/assets/js/views/sample.js
index 96f42b7..9f57c06 100644
--- a/assets/js/views/sample.js
+++ b/assets/js/views/sample.js
@@ -1,3 +1,26 @@
 ClipPlay.Views.Sample = Marionette.ItemView.extend({
-	template: '#sample-view-template'
+	template: '#sample-view-template',
+	
+	onRender: function() {
+		this.initialize_clip_drag_handles();
+	},
+	
+	
+	initialize_clip_drag_handles: function() {
+		var $clip_line = this.$('.js-clip-line');
+		
+		$clip_line.draggable({
+			axis: 'x',
+			handle: '.js-drag-handle',
+			scroll: false,
+			containment: $clip_line.parents('.progress-bar')
+		});
+		
+		$clip_line.on('dragstop', this.on_clip_drag_stop);
+	},
+	
+	
+	on_clip_drag_stop: function(e, ui) {
+		console.log('booyakacha');
+	}
 });
\ No newline at end of file
diff --git a/index.html b/index.html
index bd2d1c2..5a09cef 100644
--- a/index.html
+++ b/index.html
@@ -22,23 +22,7 @@
 			</form>
 		</div>
 		
-		<div id="samples">
-			<div class="edit-sample js-edit-sample">
-				<div class="progress-bar">
-					<div class="clip-line js-clip-line js-start-position">
-						<div class="drag-handle js-drag-handle"></div>
-					</div>
-
-					<div class="clip-line js-clip-line js-end-position">
-						<div class="drag-handle js-drag-handle"></div>
-					</div>
-				</div>
-
-				<div>
-					<input type="text" class="js-keyboard-key" placeholder="a" />
-				</div>
-			</div>
-		</div>
+		<div id="samples"></div>
 
 
 		<div class="video">