ClipPanel: add menu

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

@@ -34,14 +34,20 @@ Ox.ClipPanel = function(options, self) {
             }
         });
 
-    self.$viewElement = Ox.ButtonGroup({
+    self.$menu = Ox.MenuButton({
-            buttons: [
+            items: [
-                {id: 'list', title: 'list', tooltip: Ox._('View as List')},
+                {group: 'view', min: 1, max: 1, items: [
-                {id: 'grid', title: 'grid', tooltip: Ox._('View as Grid')}
+                    {id: 'list', title: Ox._('View as List'), checked: self.options.view == 'list'},
+                    {id: 'grid', title: Ox._('View as Grid'), checked: self.options.view == 'grid'},
+                ]},
+                {},
+                {id: 'split', title: 'Split Clip(s) at Cuts', disabled: true},
+                {id: 'join', title: 'Join Clip(s) at Cuts', disabled: true},
+                {id: 'dereference', title: 'Make Clip(s) Static', disabled: true}
             ],
-            selectable: true,
+            title: 'set',
-            type: 'image',
+            tooltip: Ox._('Options'),
-            value: self.options.view
+            type: 'image'
         })
         .css({
             float: 'left',
@@ -49,24 +55,30 @@ Ox.ClipPanel = function(options, self) {
         })
         .bindEvent({
             change: function(data) {
-                Ox.print(data);
+                if (data.id == 'view') {
+                    that.replaceElement(1, self.$list = getList());
+                    that.triggerEvent('view', {view: data.checked[0].id});
+                }
+            },
+            click: function(data) {
+                
             }
         })
-        .appendTo(self.$menubar);
+        .appendTo(self.$menubar),
 
     self.$sortSelect = Ox.Select({
             items: self.options.sortOptions,
             value: self.options.sort[0].key,
-            width: 84 + Ox.UI.SCROLLBAR_SIZE
+            width: 100 + Ox.UI.SCROLLBAR_SIZE
         })
         .bindEvent({
             change: function(data) {
-                that.triggerEvent('sort', {
+                that.triggerEvent('sort', [{
                     key: data.value,
                     operator: Ox.getObjectById(
                         self.options.sortOptions, data.value
                     ).operator
-                });
+                }]);
             }
         });
 
@@ -78,10 +90,10 @@ Ox.ClipPanel = function(options, self) {
         })
         .bindEvent({
             click: function() {
-                that.triggerEvent('sort', {
+                that.triggerEvent('sort', [{
                     key: self.options.sort[0].key,
                     operator: self.options.sort[0].operator == '+' ? '-' : '+'
-                });
+                }]);
             }
         });
 
@@ -95,8 +107,53 @@ Ox.ClipPanel = function(options, self) {
         })
         .appendTo(self.$menubar);
 
-    if (self.options.view == 'list') {
+    self.$list = getList();
-        self.$list = Ox.TableList({
+
+    self.$statusbar = Ox.Bar({
+        size: 16
+    });
+
+    that.setElement(
+        Ox.SplitPanel({
+            elements: [
+                {
+                    element: self.$menubar,
+                    size: 24
+                },
+                {
+                    element: self.$list
+                },
+                {
+                    element: self.$statusbar,
+                    size: 16
+                }
+            ],
+            orientation: 'vertical'
+        })
+    );
+
+    function cutClips() {
+        
+    }
+
+    function editClip(data) {
+        var value = self.$list.value(data.id, data.key);
+        if (data.value != value && !(data.value === '' && value === null)) {
+            self.$list.value(data.id, data.key, data.value || null);
+            that.triggerEvent('edit', data);
+        }
+    }
+
+    function getButtonTitle() {
+        return self.options.sort[0].operator == '+' ? 'up' : 'down';
+    }
+
+    function getButtonTooltip() {
+        return Ox._(self.options.sort[0].operator == '+' ? 'Ascending' : 'Descending');
+    }
+
+    function getList() {
+        var $list = self.options.view == 'list' ? Ox.TableList({
             columns: [
                 {
                     align: 'right',