diff options
| -rw-r--r-- | assets/css/sample-editor.css | 11 | ||||
| -rw-r--r-- | assets/js/views/clip-line.js | 40 | ||||
| -rw-r--r-- | assets/js/views/sample.js | 11 | ||||
| -rw-r--r-- | assets/js/views/selected-bar.js | 59 | ||||
| -rw-r--r-- | index.html | 3 |
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 @@ -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> |