Fix rendering of the sidebar in Files app

When a view is rendered it should not be concerned with where it is
going to be placed in the document; in general this should be a
responsibility of the object using the view.

Moreover, when the details view is rendered it should simply prepare a
skeleton that includes the root elements provided by the plugins; those
elements will be updated by the plugins as needed when a file or a tab
is selected.

Finally, the details view should not be explicitly rendered. The
rendering removes the previous elements, but that is needed only when
the details view is in a dirty state, that is, when new plugins were
added since the last time that it was rendered. However, that dirty
state is internally handled, and the view is automatically rendered
again if needed when a file info is set.

Due to all that the details view is no longer explicitly rendered when
updating it with a different file. Also, as each file list has its own
details view, and each details view has its own element, but there can
be only one details view/sidebar element in the document, when the file
list updates the details view it also replaces the current one in the
document with its own details view if needed (that is, if it is not the
current one already).

Besides that, when the element of a details view is replaced with the
element of a different details view the old one should be detached from
the document, but never removed. Otherwise the event handlers would not
work when that element is attached again later (when changing to a
different section in the Files app and then going back to the previous
one).

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>

diff --git a/apps/files/js/detailsview.js b/apps/files/js/detailsview.js
index aed1736693a6e7746d7796d15aaba308abfb7cc4..7e2a5f0e8a9c6fdc7eb31bacb663a6a34e92ffdc 100644 (file)
--- a/apps/files/js/detailsview.js
+++ b/apps/files/js/detailsview.js
@@ -117,16 +117,6 @@
                 * Renders this details view
                 */
                render: function() {
-                       // remove old instances
-                       var $appSidebar = $('#app-sidebar');
-                       if ($appSidebar.length === 0) {
-                               this.$el.insertAfter($('#app-content'));
-                       } else {
-                               if ($appSidebar[0] !== this.el) {
-                                       $appSidebar.replaceWith(this.$el)
-                               }
-                       }
-                       
                        var templateVars = {
                                closeLabel: t('files', 'Close')
                        };

diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
index a7dadbbab3e103080d7f2c825215fe479802ce1b..0fe5aed020fee4030450101aa89329e7dabcd62e 100644 (file)
--- a/apps/files/js/filelist.js
+++ b/apps/files/js/filelist.js
@@ -568,11 +568,35 @@
                        }
 
                        this._currentFileModel = model;
+
+                       this._replaceDetailsViewElementIfNeeded();
+
                        this._detailsView.setFileInfo(model);
-                       this._detailsView.render();
                        this._detailsView.$el.scrollTop(0);
                },
 
+               /**
+                * Replaces the current details view element with the details view
+                * element of this file list.
+                *
+                * Each file list has its own DetailsView object, and each one has its
+                * own root element, but there can be just one details view/sidebar
+                * element in the document. This helper method replaces the current
+                * details view/sidebar element in the document with the element from
+                * the DetailsView object of this file list.
+                */
+               _replaceDetailsViewElementIfNeeded: function() {
+                       var $appSidebar = $('#app-sidebar');
+                       if ($appSidebar.length === 0) {
+                               this._detailsView.$el.insertAfter($('#app-content'));
+                       } else if ($appSidebar[0] !== this._detailsView.el) {
+                               // "replaceWith()" can not be used here, as it removes the old
+                               // element instead of just detaching it.
+                               this._detailsView.$el.insertBefore($appSidebar);
+                               $appSidebar.detach();
+                       }
+               },
+
                /**
                 * Event handler for when the window size changed
                 */