diff options
| -rw-r--r-- | assets/css/application.css | 4 | ||||
| -rw-r--r-- | assets/js/views/sample-editor.js | 5 | ||||
| -rw-r--r-- | assets/js/views/sample.js | 26 |
3 files changed, 29 insertions, 6 deletions
diff --git a/assets/css/application.css b/assets/css/application.css index 1c6d241..1dcfc0b 100644 --- a/assets/css/application.css +++ b/assets/css/application.css @@ -168,8 +168,8 @@ header { .button.red{ - background-color: #887c7c; - border-color: #887c7c; + background-color: #882222; + border-color: #882222; color: #eee; text-shadow: 0px 1px 2px rgba(0,0,0,0.9); -webkit-box-shadow: 0px 4px 1px 0px rgba(92, 5, 5, 1); diff --git a/assets/js/views/sample-editor.js b/assets/js/views/sample-editor.js index 6accd89..088e588 100644 --- a/assets/js/views/sample-editor.js +++ b/assets/js/views/sample-editor.js @@ -1,5 +1,10 @@ ClipPlay.Views.SampleEditor = Marionette.CollectionView.extend({ itemView: ClipPlay.Views.Sample, + itemViewOptions: function(model, index) { + return { + collection: this.collection + }; + }, onRender: function() { // Initialize view for adding new samples diff --git a/assets/js/views/sample.js b/assets/js/views/sample.js index c728e47..5b10a0b 100644 --- a/assets/js/views/sample.js +++ b/assets/js/views/sample.js @@ -11,7 +11,9 @@ ClipPlay.Views.Sample = Marionette.ItemView.extend({ this.$('.js-keyboard-key').val(this.model.get('key')); }, - initialize: function(){ + initialize: function(options){ + this.collection = options.collection; + this.listenTo(this.model, 'change:key', this.key_bind); this.key_bind(); }, @@ -26,7 +28,8 @@ ClipPlay.Views.Sample = Marionette.ItemView.extend({ var schema = data.provider_name.toLowerCase(); var iframe_src= BASE_IFRAME +"?schema="+schema+"&type=text%2Fhtml&html="+src; var iframe = $('<iframe/>', { - src: iframe_src + src: iframe_src, + id: 'video-sample-' + that.model.cid }); $('#video').append(iframe[0]); var player = new OP.Player(iframe[0]); @@ -81,6 +84,21 @@ ClipPlay.Views.Sample = Marionette.ItemView.extend({ }, remove_sample: function(){ - console.log('removed sample'); - } + this.collection.remove(this.model); + + var $iframe_video = $('#video-sample-' + this.model.cid); + $iframe_video.fadeOut(400, function() { + $iframe_video.remove(); + }); + }, + + close: function() { + var that = this; + this.$el.animate({ + height: 0, + opacity: 0 + }, 500, function() { + Marionette.View.prototype.close.call(that, arguments); + }); + } }); |