Merge branch 'add-play-selection-bar-to-progress-bar'

5 files changed, 119 insertions, 5 deletions

diff --git a/assets/css/sample-editor.css b/assets/css/sample-editor.css
index a577c7c..f72111b 100644
--- a/assets/css/sample-editor.css
+++ b/assets/css/sample-editor.css
@@ -9,12 +9,14 @@
 	border: 1px solid #777;
 	width: 50%;
 	height: 2em;
+	position: relative;
 	background-color: #ddd; /* change to something more pleasant later */
 }
 
 .clip-line {
 	display: inline-block;
 	position: relative;
+	z-index: 5;
 	width: 1px;
 	height: 2em;
 	background-color: #222;
@@ -26,5 +28,14 @@
 	position: relative;
 	top: 0.5em;
 	left: -1em;
+	cursor: ew-resize;
 	background-color: yellow;
+}
+
+.selected-bar {
+	width: 3em;/* testing purposes */
+	height: 2em;
+	position: absolute;
+	top: 0;
+	background-color: #4087a0;
 }
\ No newline at end of file
diff --git a/assets/js/views/clip-line.js b/assets/js/views/clip-line.js
index 2760d5b..2c06c48 100644
--- a/assets/js/views/clip-line.js
+++ b/assets/js/views/clip-line.js
@@ -6,9 +6,12 @@ ClipPlay.Views.ClipLine = Marionette.View.extend({
 		
 		this.type = options.type;
 		
-		this.listenTo(this.model, 'change:duration', this.initialize_time_values);
+		this.sample_view = options.sample_view;
+		
+		this.listenTo(this.model, 'change:duration', this.on_duration_change);
 		var start_or_stop = this.type;
-		this.listenTo(this.model, 'change:' + start_or_stop, this.render_time);
+		this.listenTo(this.model, 'change:' + start_or_stop, this.on_start_or_stop_change);
+		this.listenTo(this.sample_view, 'change:position:selected-bar', this.on_selected_bar_position_change);
 		
 		this.initialize_drag_handles();
 	},
@@ -19,7 +22,7 @@ ClipPlay.Views.ClipLine = Marionette.View.extend({
 			axis: 'x',
 			handle: '.js-drag-handle',
 			scroll: false,
-			containment: this.$el.parents('.progress-bar')
+			containment: 'parent'
 		});
 		
 		var that = this;
@@ -84,5 +87,36 @@ ClipPlay.Views.ClipLine = Marionette.View.extend({
 	
 	on_clip_drag: function(e, ui) {
 		this.set_seek_point();
+	},
+	
+	
+	on_duration_change: function() {
+		this.initialize_time_values();
+		this.trigger_seek_point_change();
+	},
+	
+	
+	on_start_or_stop_change: function() {
+		this.render_time();
+		this.trigger_seek_point_change();
+	},
+	
+	
+	on_selected_bar_position_change: function(params) {
+		if (this.type === 'start') {
+			this.$el.css('left', params.position + 'px');
+		}
+		else if (this.type === 'stop') {
+			var left_position = params.position + params.width;
+			this.$el.css('left', left_position + 'px');
+		}
+	},
+	
+	
+	trigger_seek_point_change: function() {
+		var start_or_stop = this.type;
+		this.sample_view.trigger('change:seek:clip-line-' + start_or_stop, {
+			position: this.$el.position().left
+		});
 	}
 });
\ No newline at end of file
diff --git a/assets/js/views/sample.js b/assets/js/views/sample.js
index ed87619..bab5488 100644
--- a/assets/js/views/sample.js
+++ b/assets/js/views/sample.js
@@ -43,13 +43,20 @@ ClipPlay.Views.Sample = Marionette.ItemView.extend({
 		this.start_clip_line = new ClipPlay.Views.ClipLine({
 			type: 'start',
 			el: this.$('.js-start-position'),
-			model: this.model
+			model: this.model,
+			sample_view: this
 		});
 
 		this.stop_clip_line = new ClipPlay.Views.ClipLine({
 			type: 'stop',
 			el: this.$('.js-end-position'),
-			model: this.model
+			model: this.model,
+			sample_view: this
+		});
+		
+		this.selected_bar = new ClipPlay.Views.SelectedBar({
+			el: this.$('.js-selected-bar'),
+			sample_view: this
 		});
 	},
 
diff --git a/assets/js/views/selected-bar.js b/assets/js/views/selected-bar.js
new file mode 100644
index 0000000..91727b6
--- /dev/null
+++ b/assets/js/views/selected-bar.js
@@ -0,0 +1,59 @@
+ClipPlay.Views.SelectedBar = Marionette.View.extend({
+	initialize: function(options) {
+		this.setElement(options.el);
+		this.sample_view = options.sample_view;
+		
+		this.listenTo(this.sample_view, 'change:seek:clip-line-start', this.on_clip_line_start_seek_change);
+		this.listenTo(this.sample_view, 'change:seek:clip-line-stop', this.on_clip_line_stop_seek_change);
+		
+		this.initialize_dragging();
+	},
+	
+	
+	initialize_dragging: function() {
+		this.$el.draggable({
+			axis: 'x',
+			scroll: false,
+			containment: 'parent'
+		});
+		
+		this.reset_position();
+		
+		var that = this;
+		this.$el.on('drag', function(e, ui) {
+			that.on_selected_bar_drag(e, ui);
+		});
+	},
+	
+	
+	// Reset position to position:absolute
+	// jQueryUI Scrollable will make your element position:relative and in 
+	// this case we want to make sure it's absolutely positioned so the layout 
+	// doesn't break.
+	reset_position: function() {
+		this.$el.css('position', 'absolute');
+	},
+	
+	
+	on_selected_bar_drag: function() {
+		this.sample_view.trigger('change:position:selected-bar', {
+			position: this.$el.position().left,
+			width: this.$el.width()
+		});
+	},
+	
+	
+	on_clip_line_start_seek_change: function(params) {
+		var end_position = this.$el.position().left + this.$el.width();
+		var width = end_position - params.position;
+		
+		this.$el.css('left', params.position + 'px');
+		this.$el.css('width', width + 'px');
+	},
+	
+	
+	on_clip_line_stop_seek_change: function(params) {
+		var width = params.position - this.$el.position().left;
+		this.$el.css('width', width + 'px');
+	}
+});
\ No newline at end of file
diff --git a/index.html b/index.html
index cac15b9..05622ec 100644
--- a/index.html
+++ b/index.html
@@ -46,6 +46,8 @@
 						<span class="js-time"></span>
 					</div>
 				</div>
+				
+				<div class="selected-bar js-selected-bar"></div>
 
 				<div class="clip-line js-clip-line js-end-position">
 					<div class="drag-handle js-drag-handle">
@@ -66,6 +68,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/selected-bar.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>