Create a new view for clip lines

Move code related to clip line initialisation etc. into the new view.

4 files changed, 62 insertions, 52 deletions

diff --git a/assets/js/collections/samples.js b/assets/js/collections/samples.js
index 5965dbd..bd0b926 100644
--- a/assets/js/collections/samples.js
+++ b/assets/js/collections/samples.js
@@ -1,39 +1,3 @@
 ClipPlay.Collections.Samples = Backbone.Collection.extend({
-	model: ClipPlay.Models.Sample,
-	
-	// -----------------------------------------------------------------------
-	// What follows is WRONG. Change so that the following functions don't use 
-	// any DOM elements
-	// -----------------------------------------------------------------------
-	
-	// percentage_progress
-	//
-	// Get a percentage value from a clip-line that represents its 
-	// position within the progress bar.
-	//
-	percentage_progress: function($el) {
-		var container = $el.parents('.progress-bar');
-		var position_in_pixels = $el.css('left');
-		
-		var percentage = (position_in_pixels / container.width()) * 100;
-		
-		return percentage;
-	},
-	
-	
-	// seek_point
-	//
-	// Example:
-	// sample_editor.seek_point({
-	// 	$el: $('.clip-line'),
-	// 	video_length: 586
-	// });
-	//
-	seek_point: function(options) {
-		var options = options || {};
-		
-		var progress = this.percentage_progress(options.$el);
-		
-		return (progress * options.video_length) / 100;
-	}
+	model: ClipPlay.Models.Sample
 });
\ No newline at end of file
diff --git a/assets/js/views/clip-line.js b/assets/js/views/clip-line.js
new file mode 100644
index 0000000..93fd22e
--- /dev/null
+++ b/assets/js/views/clip-line.js
@@ -0,0 +1,51 @@
+ClipPlay.Views.ClipLine = Marionette.View.extend({
+	initialize: function(options) {
+		this.setElement(options.el);
+		
+		this.initialize_drag_handles();
+	},
+	
+	
+	initialize_drag_handles: function() {
+		this.$el.draggable({
+			axis: 'x',
+			handle: '.js-drag-handle',
+			scroll: false,
+			containment: this.$el.parents('.progress-bar')
+		});
+		
+		this.$el.on('dragstop', this.on_clip_drag_stop);
+	},
+	
+	
+	// percentage_progress
+	//
+	// Get a percentage value from a clip-line that represents its 
+	// position within the progress bar.
+	//
+	percentage_progress: function() {
+		var container = this.$el.parents('.progress-bar');
+		var position_in_pixels = this.$el.css('left');
+		
+		var percentage = (position_in_pixels / container.width()) * 100;
+		
+		return percentage;
+	},
+	
+	
+	// seek_point
+	//
+	// Get the number of seconds after the start of the video that is 
+	// represented by this clip line.
+	//
+	seek_point: function(options) {
+		var progress = this.percentage_progress();
+		
+		return (progress * this.model.get('duration')) / 100;
+	},
+	
+	
+	on_clip_drag_stop: function(e, ui) {
+		console.log('booyakacha');
+	}
+});
\ No newline at end of file
diff --git a/assets/js/views/sample.js b/assets/js/views/sample.js
index e28a964..8b08b68 100644
--- a/assets/js/views/sample.js
+++ b/assets/js/views/sample.js
@@ -3,7 +3,7 @@ ClipPlay.Views.Sample = Marionette.ItemView.extend({
 	
 	onRender: function() {
 		this.initialize_player();
-		this.initialize_clip_drag_handles();
+		this.initialize_clip_lines();
 	},
 	
 	
@@ -27,21 +27,15 @@ ClipPlay.Views.Sample = Marionette.ItemView.extend({
 	},
 	
 	
-	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')
+	initialize_clip_lines: function() {
+		this.start_clip_line = new ClipPlay.Views.ClipLine({
+			el: this.$('.js-start-position'),
+			model: this.model
 		});
 		
-		$clip_line.on('dragstop', this.on_clip_drag_stop);
-	},
-	
-	
-	on_clip_drag_stop: function(e, ui) {
-		console.log('booyakacha');
+		this.end_clip_line = new ClipPlay.Views.ClipLine({
+			el: this.$('.js-end-position'),
+			model: this.model
+		});
 	}
 });
\ No newline at end of file
diff --git a/index.html b/index.html
index 717dcf8..510a437 100644
--- a/index.html
+++ b/index.html
@@ -61,6 +61,7 @@
 	<script src="/assets/js/models/sample.js"></script>
 	<script src="/assets/js/collections/samples.js"></script>
 	<script src="/assets/js/views/sample-add-view.js"></script>
+	<script src="/assets/js/views/clip-line.js"></script>
 	<script src="/assets/js/views/sample.js"></script>
 	<script src="/assets/js/views/sample-editor.js"></script>
 	<script src="/assets/js/app.js"></script>