From 3213d8c1022c762cdca60ad934fe2b575bc1a001 Mon Sep 17 00:00:00 2001 From: rlx Date: Tue, 12 Jan 2016 18:45:15 +0530 Subject: [PATCH] one toolbar for all, repanelize --- static/js/itemOuterPanel.js | 25 -------- static/js/{itemInnerPanel.js => itemPanel.js} | 6 +- static/js/itemToolbar.js | 19 ------ static/js/listOuterPanel.js | 25 -------- static/js/{listInnerPanel.js => listPanel.js} | 6 +- static/js/listToolbar.js | 32 ---------- static/js/rightPanel.js | 32 +++------- static/js/toolbar.js | 58 +++++++++++++++++++ static/js/viewPanel.js | 46 +++++++++++++++ static/json/js.json | 10 ++-- 10 files changed, 123 insertions(+), 136 deletions(-) delete mode 100644 static/js/itemOuterPanel.js rename static/js/{itemInnerPanel.js => itemPanel.js} (82%) delete mode 100644 static/js/itemToolbar.js delete mode 100644 static/js/listOuterPanel.js rename static/js/{listInnerPanel.js => listPanel.js} (87%) delete mode 100644 static/js/listToolbar.js create mode 100644 static/js/toolbar.js create mode 100644 static/js/viewPanel.js diff --git a/static/js/itemOuterPanel.js b/static/js/itemOuterPanel.js deleted file mode 100644 index 0cd425c..0000000 --- a/static/js/itemOuterPanel.js +++ /dev/null @@ -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; - -}; \ No newline at end of file diff --git a/static/js/itemInnerPanel.js b/static/js/itemPanel.js similarity index 82% rename from static/js/itemInnerPanel.js rename to static/js/itemPanel.js index f61121a..220617a 100644 --- a/static/js/itemInnerPanel.js +++ b/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); + } } }); diff --git a/static/js/itemToolbar.js b/static/js/itemToolbar.js deleted file mode 100644 index 763df5a..0000000 --- a/static/js/itemToolbar.js +++ /dev/null @@ -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; - -}; diff --git a/static/js/listOuterPanel.js b/static/js/listOuterPanel.js deleted file mode 100644 index 401ca16..0000000 --- a/static/js/listOuterPanel.js +++ /dev/null @@ -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; - -}; \ No newline at end of file diff --git a/static/js/listInnerPanel.js b/static/js/listPanel.js similarity index 87% rename from static/js/listInnerPanel.js rename to static/js/listPanel.js index 327080b..127b42d 100644 --- a/static/js/listInnerPanel.js +++ b/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); + } } }); diff --git a/static/js/listToolbar.js b/static/js/listToolbar.js deleted file mode 100644 index 6c80c39..0000000 --- a/static/js/listToolbar.js +++ /dev/null @@ -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; - -}; \ No newline at end of file diff --git a/static/js/rightPanel.js b/static/js/rightPanel.js index a6bc1bd..178d4c6 100644 --- a/static/js/rightPanel.js +++ b/static/js/rightPanel.js @@ -2,45 +2,27 @@ oml.ui.rightPanel = function() { - var ui = oml.user.ui, - - that = Ox.SlidePanel({ + var that = Ox.SplitPanel({ elements: [ { - id: 'list', - element: oml.$ui.listOuterPanel = oml.ui.listOuterPanel() + element: oml.$ui.toolbar = oml.ui.toolbar(), + size: 24 }, { - id: 'item', - element: oml.$ui.itemOuterPanel = oml.ui.itemOuterPanel() + element: oml.$ui.viewPanel = oml.ui.viewPanel() } ], - orientation: 'horizontal', - selected: !ui.item ? 'list' : 'item', - size: getSize() + orientation: 'vertical' }) .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_item: function(data) { - if (!!data.value != !!data.previousValue) { - that.options({selected: !ui.item ? 'list' : 'item'}); - } + oml.$ui.itemViewPanel.options({size: data.size}) } }); - function getSize() { - return window.innerWidth - ui.showSidebar * ui.sidebarSize - 1; - } - - that.updateElement = function() { - return that.triggerEvent('resize', {size: getSize()}); - }; - return that; }; \ No newline at end of file diff --git a/static/js/toolbar.js b/static/js/toolbar.js new file mode 100644 index 0000000..c0dc8d7 --- /dev/null +++ b/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; + +}; \ No newline at end of file diff --git a/static/js/viewPanel.js b/static/js/viewPanel.js new file mode 100644 index 0000000..378e0f5 --- /dev/null +++ b/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; + +}; \ No newline at end of file diff --git a/static/json/js.json b/static/json/js.json index 63b31de..d961e65 100644 --- a/static/json/js.json +++ b/static/json/js.json @@ -33,18 +33,14 @@ "importScreen.js", "info.js", "infoView.js", - "itemInnerPanel.js", "itemMenu.js", - "itemOuterPanel.js", - "itemToolbar.js", + "itemPanel.js", "itemViewButtons.js", "itemViewPanel.js", "leftPanel.js", "list.js", "listDialog.js", - "listInnerPanel.js", - "listOuterPanel.js", - "listToolbar.js", + "listPanel.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" ] \ No newline at end of file