diff options
| -rw-r--r-- | assets/js/collections/samples.js | 38 | ||||
| -rw-r--r-- | assets/js/views/sample-editor.js | 99 |
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 |