one toolbar for all, repanelize

static/js/itemOuterPanel.js

@@ -1,25 +0,0 @@
-'use strict';
-
-oml.ui.itemOuterPanel = function() {
-
-    var ui = oml.user.ui,
-
-        that = Ox.SplitPanel({
-            elements: [
-                {
-                    element: oml.$ui.itemToolbar = oml.ui.itemToolbar(),
-                    size: 24
-                },
-                {
-                    element: oml.$ui.itemInnerPanel = oml.ui.itemInnerPanel()
-                }
-            ],
-            orientation: 'vertical'
-        })
-        .bindEvent({
-            // ...
-        });
-
-    return that;
-
-};

static/js/itemPanel.js

@@ -1,6 +1,6 @@
 'use strict';
 
-oml.ui.itemInnerPanel = function() {
+oml.ui.itemPanel = function() {
 
     var ui = oml.user.ui,
 
@@ -23,7 +23,9 @@ oml.ui.itemInnerPanel = function() {
         })
         .bindEvent({
             oml_showbrowser: function(data) {
-                data.value == that.options('elements')[0].collapsed && that.toggleElement(0);
+                if (data.value == that.options('elements')[0].collapsed) {
+                    that.toggleElement(0);
+                }
             }
         });
 

static/js/itemToolbar.js

@@ -1,19 +0,0 @@
-'use strict';
-
-oml.ui.itemToolbar = function() {
-
-    var ui = oml.user.ui,
-
-        that = Ox.Bar({size: 24})
-            .css({zIndex: 2})
-            .append(
-                oml.$ui.backButton = oml.ui.backButton()
-            ).append(
-                oml.$ui.fullscreenButton = oml.ui.fullscreenButton()
-            ).append(
-                oml.$ui.itemViewButtons = oml.ui.itemViewButtons()
-            );
-
-    return that;
-
-};

static/js/listOuterPanel.js

@@ -1,25 +0,0 @@
-'use strict';
-
-oml.ui.listOuterPanel = function() {
-
-    var ui = oml.user.ui,
-
-        that = Ox.SplitPanel({
-            elements: [
-                {
-                    element: oml.$ui.listToolbar = oml.ui.listToolbar(),
-                    size: 24
-                },
-                {
-                    element: oml.$ui.listInnerPanel = oml.ui.listInnerPanel()
-                }
-            ],
-            orientation: 'vertical'
-        })
-        .bindEvent({
-            // ...
-        });
-
-    return that;
-
-};

static/js/listPanel.js

@@ -1,6 +1,6 @@
 'use strict';
 
-oml.ui.listInnerPanel = function() {
+oml.ui.listPanel = function() {
 
     var ui = oml.user.ui,
 
@@ -31,7 +31,9 @@ oml.ui.listInnerPanel = function() {
                 that.replaceElement(1, oml.$ui.list = oml.ui.list());
             },
             oml_showfilters: function(data) {
-                data.value == that.options('elements')[0].collapsed && that.toggleElement(0);
+                if (data.value == that.options('elements')[0].collapsed) {
+                    that.toggleElement(0);
+                }
             }
         });
 

static/js/listToolbar.js

@@ -1,32 +0,0 @@
-'use strict';
-
-oml.ui.listToolbar = function() {
-
-    var ui = oml.user.ui,
-
-        that = Ox.Bar({size: 24})
-            .css({zIndex: 2})
-            .append(
-                oml.$ui.openButton = oml.ui.openButton()
-            ).append(
-                oml.$ui.previewButton = oml.ui.previewButton()
-            ).append(
-                oml.$ui.listViewButtons = oml.ui.listViewButtons()
-            ).append(
-                oml.$ui.sortElement = oml.ui.sortElement()
-            ).append(
-                oml.$ui.findElement = oml.ui.findElement()
-            )
-            .bindEvent({
-                doubleclick: function(event) {
-                    (
-                        ui.listView == 'list'
-                        ? oml.$ui.list.$body
-                        : oml.$ui.list
-                    ).animate({scrollTop: 0}, 250);
-                }
-            });
-
-    return that;
-
-};

static/js/rightPanel.js

@@ -2,45 +2,27 @@
 
 oml.ui.rightPanel = function() {
 
-    var ui = oml.user.ui,
+    var that = Ox.SplitPanel({
-
-        that = Ox.SlidePanel({
             elements: [
                 {
-                    id: 'list',
+                    element: oml.$ui.toolbar = oml.ui.toolbar(),
-                    element: oml.$ui.listOuterPanel = oml.ui.listOuterPanel()
+                    size: 24
                 },
                 {
-                    id: 'item',
+                    element: oml.$ui.viewPanel = oml.ui.viewPanel()
-                    element: oml.$ui.itemOuterPanel = oml.ui.itemOuterPanel()
                 }
             ],
-            orientation: 'horizontal',
+            orientation: 'vertical'
-            selected: !ui.item ? 'list' : 'item',
-            size: getSize()
         })
         .bindEvent({
             resize: function(data) {
-                that.options({size: data.size});
+                oml.$ui.viewPanel.options({size: data.size});
                 oml.$ui.filtersOuterPanel.updateElement();
                 oml.$ui.list.size();
-                oml.$ui.itemViewPanel.options({size: data.size});
+                oml.$ui.itemViewPanel.options({size: data.size})
-            },
-            oml_item: function(data) {
-                if (!!data.value != !!data.previousValue) {
-                    that.options({selected: !ui.item ? 'list' : 'item'});
-                }
             }
         });
 
-    function getSize() {
-        return window.innerWidth - ui.showSidebar * ui.sidebarSize - 1;
-    }
-
-    that.updateElement = function() {
-        return that.triggerEvent('resize', {size: getSize()});
-    };
-
     return that;
 
 };

static/js/toolbar.js

@@ -0,0 +1,58 @@
+'use strict';
+
+oml.ui.toolbar = function() {
+
+    var ui = oml.user.ui,
+
+        buttons = {
+            'list': ['openButton', 'previewButton', 'listViewButtons'],
+            'item': ['backButton', 'fullscreenButton', 'itemViewButtons']
+        },
+
+        view = getView(),
+
+        that = Ox.Bar({size: 24})
+            .css({zIndex: 2})
+            .bindEvent({
+                doubleclick: function(event) {
+                    if (view == 'list') {
+                        (
+                            ui.listView == 'list'
+                            ? oml.$ui.list.$body
+                            : oml.$ui.list
+                        ).animate({scrollTop: 0}, 250);
+                    }
+                },
+                oml_item: function(data) {
+                    if (!!data.value != !!data.previousValue) {
+                        view = getView();
+                        var previousView = view == 'list' ? 'item' : 'list';
+                        buttons[previousView].forEach(
+                            function(previousButton, index) {
+                                var button = buttons[view][index];
+                                oml.$ui[previousButton].replaceWith(
+                                    oml.$ui[button] = oml.ui[button]()
+                                )
+                            }
+                        );
+                    }
+                }
+            });
+
+    buttons[view].forEach(function(button) {
+        that.append(oml.$ui[button] = oml.ui[button]());
+    });
+
+    that.append(
+        oml.$ui.sortElement = oml.ui.sortElement()
+    ).append(
+        oml.$ui.findElement = oml.ui.findElement()
+    );
+
+    function getView() {
+        return !ui.item ? 'list' : 'item';
+    }
+
+    return that;
+
+};

static/js/viewPanel.js

@@ -0,0 +1,46 @@
+'use strict';
+
+oml.ui.viewPanel = function() {
+
+    var ui = oml.user.ui,
+
+        that = Ox.SlidePanel({
+            elements: [
+                {
+                    id: 'list',
+                    element: oml.$ui.listOuterPanel = oml.ui.listPanel()
+                },
+                {
+                    id: 'item',
+                    element: oml.$ui.itemOuterPanel = oml.ui.itemPanel()
+                }
+            ],
+            orientation: 'horizontal',
+            selected: !ui.item ? 'list' : 'item',
+            size: getSize()
+        })
+        .bindEvent({
+            resize: function(data) {
+                that.options({size: data.size});
+                oml.$ui.filtersOuterPanel.updateElement();
+                oml.$ui.list.size();
+                oml.$ui.itemViewPanel.options({size: data.size});
+            },
+            oml_item: function(data) {
+                if (!!data.value != !!data.previousValue) {
+                    that.options({selected: !ui.item ? 'list' : 'item'});
+                }
+            }
+        });
+
+    function getSize() {
+        return window.innerWidth - ui.showSidebar * ui.sidebarSize - 1;
+    }
+
+    //that.updateElement = function() {
+    //    return that.triggerEvent('resize', {size: getSize()});
+    //};
+
+    return that;
+
+};

static/json/js.json

@@ -33,18 +33,14 @@
     "importScreen.js",
     "info.js",
     "infoView.js",
-    "itemInnerPanel.js",
     "itemMenu.js",
-    "itemOuterPanel.js",
+    "itemPanel.js",
-    "itemToolbar.js",
     "itemViewButtons.js",
     "itemViewPanel.js",
     "leftPanel.js",
     "list.js",
     "listDialog.js",
-    "listInnerPanel.js",
+    "listPanel.js",
-    "listOuterPanel.js",
-    "listToolbar.js",
     "listView.js",
     "listViewButtons.js",
     "loadingIcon.js",
@@ -64,11 +60,13 @@
     "statusIcon.js",
     "statusbar.js",
     "titlesDialog.js",
+    "toolbar.js",
     "transfersDialog.js",
     "updateButton.js",
     "userButton.js",
     "usersDialog.js",
     "utils.js",
+    "viewPanel.js",
     "viewer.js",
     "welcomeDialog.js"
 ]