clip panel: implement split

source/Ox.UI/js/Video/ClipPanel.js

@@ -32,9 +32,7 @@ Ox.ClipPanel = function(options, self) {
             height: function() {
                 self.$list.size();
             },
-            selected: function() {
+            selected: selectClips,
-                self.$list.options({selected: self.options.selected});
-            },
             sort: function() {
                 updateSortElement();
                 self.$list.options({
@@ -67,9 +65,9 @@ Ox.ClipPanel = function(options, self) {
                     {id: 'grid', title: Ox._('View as Grid'), checked: self.options.view == 'grid'},
                 ]},
                 {},
-                {id: 'split', title: Ox._('Split Selected Clips at Cuts'), disabled: true},
+                {id: 'split', title: Ox._('Split Selected Clips at Cuts'), disabled: !self.options.editable || !self.options.selected.length},
-                {id: 'join', title: Ox._('Join Selected Clips at Cuts'), disabled: true},
+                {id: 'join', title: Ox._('Join Selected Clips at Cuts'), disabled: !self.options.editable || !self.options.selected.length},
-                {id: 'dereference', title: Ox._('Make Selected Clips Static'), disabled: true}
+                {id: 'dereference', title: Ox._('Make Selected Clips Static'), disabled: !self.options.editable || !self.options.selected.length}
             ],
             title: 'set',
             tooltip: Ox._('Options'),
@@ -88,7 +86,25 @@ Ox.ClipPanel = function(options, self) {
                 }
             },
             click: function(data) {
-                
+                if (data.id == 'split') {
+                    var ids = getEditable(self.options.selected).filter(function(id) {
+                            var clip = Ox.getObjectById(self.options.clips, id);
+                            return clip.cuts.length;
+                        }),
+                        split = Ox.flatten(ids.map(function(id) {
+                            var clip = Ox.getObjectById(self.options.clips, id),
+                                cuts = [clip['in']].concat(clip.cuts).concat([clip.out]);
+                            return Ox.range(0, cuts.length - 1).map(function(i) {
+                                return {'in': cuts[i], item: clip.item, out: cuts[i + 1]};
+                            });
+                        }));
+                    if (split.length > ids.length) {
+                        that.triggerEvent('split', {ids: ids, split: split});
+                    }
+                } else if (data.id == 'join') {
+                    var ids = getEditable(self.options.selected);
+                    ids.length && that.triggerEvent('join', {ids: ids});
+                }
             }
         })
         .appendTo(self.$menubar),
@@ -190,6 +206,12 @@ Ox.ClipPanel = function(options, self) {
         return Ox._(self.options.sort[0].operator == '+' ? 'Ascending' : 'Descending');
     }
 
+    function getEditable(ids) {
+        return ids.filter(function(id) {
+            return isEditable(Ox.getObjectById(self.options.clips, id));
+        });
+    }
+
     function getList() {
         var $list;
         if (self.options.view == 'list') {
@@ -311,13 +333,13 @@ Ox.ClipPanel = function(options, self) {
                 that.triggerEvent('copyadd', data);
             },
             cut: function(data) {
-                that.triggerEvent('cut', data);
+                self.options.editable && that.triggerEvent('cut', data);
             },
             cutadd: function(data) {
-                that.triggerEvent('cutadd', data);
+                self.options.editable && that.triggerEvent('cutadd', data);
             },
             'delete': function(data) {
-                that.triggerEvent('delete', data);
+                self.options.editable && that.triggerEvent('delete', data);
             },
             move: function(data) {
                 data.ids.forEach(function(id, index) {
@@ -329,9 +351,11 @@ Ox.ClipPanel = function(options, self) {
                 that.triggerEvent('open', data);
             },
             paste: function() {
-                that.triggerEvent('paste');
+                self.options.editable && that.triggerEvent('paste');
             },
             select: function(data) {
+                self.options.selected = data.ids;
+                selectClips();
                 that.triggerEvent('select', data);
             },
             sort: function(data) {
@@ -360,6 +384,16 @@ Ox.ClipPanel = function(options, self) {
             && self.options.sort[0].operator == '+';
     }
 
+    function selectClips() {
+        var action;
+        if (self.options.editable) {
+            action = self.options.selected.length ? 'enableItem' : 'disableItem';
+            self.$menu[action]('split');
+            self.$menu[action]('join');
+        }
+        self.$list.options({selected: self.options.selected});
+    }
+
     function updateSortElement() {
         self.$sortSelect.options({
             value: self.options.sort[0].key,
@@ -378,6 +412,7 @@ Ox.ClipPanel = function(options, self) {
     }
 
     that.updateItem = function(id, data) {
+        self.options.clips[Ox.getIndexById(self.options.clips, id)] = data;
         ['in', 'out', 'duration'].forEach(function(key) {
             self.$list.value(id, key, data[key]);
         });