Backbone-ify old SampleEditor class code

2 files changed, 68 insertions, 69 deletions

diff --git a/assets/js/collections/samples.js b/assets/js/collections/samples.js
index bd0b926..5965dbd 100644
--- a/assets/js/collections/samples.js
+++ b/assets/js/collections/samples.js
@@ -1,3 +1,39 @@
 ClipPlay.Collections.Samples = Backbone.Collection.extend({
-	model: ClipPlay.Models.Sample
+	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;
+	}
 });
\ No newline at end of file
diff --git a/assets/js/views/sample-editor.js b/assets/js/views/sample-editor.js
index 831bf18..99c2630 100644
--- a/assets/js/views/sample-editor.js
+++ b/assets/js/views/sample-editor.js
@@ -1,77 +1,40 @@
-var SampleEditor = SampleEditor || {};
-
-(function($) {
-	SampleEditor = function() {
-		this.player = null;
-		
-		
-		this.initialize = 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.player = new OP.Player($('#single-video-lets-see-if-we-can-get-this-to-work').get(0));
-		};
-		
-		
-		// percentage_progress
-		//
-		// Get a percentage value from a clip-line that represents its 
-		// position within the progress bar.
-		//
-		this.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
-		// });
-		//
-		this.seek_point = function(options) {
-			var options = options || {};
-			
-			var progress = this.percentage_progress(options.$el);
-			
-			return (progress * options.video_length) / 100;
-		};
-		
-		
-		this.on_clip_drag_stop = function(e, ui) {
-			
-		};
-		
-		
-		return this;
-	};
-})(jQuery);
-
-
-
-// --------------------------------------------------------
 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));
+	},
+	
+	
 	onRender: function() {
 		this.sample_add_view = new ClipPlay.Views.SampleAddView({
 			el: $('#add-sample')
 		});
+	},
+	
+	
+	on_clip_drag_stop: function(e, ui) {
+		
 	}
 });
\ No newline at end of file