fix file preview height - when line is longer than browser page it is splitted...

fix file preview height - when line is longer than browser page it is splitted in multiline which causes file pre to get a dinamic height, setting a smart css max-height avoid problem

debomatic-webui/public/javascripts/page_distribution.js

@@ -102,8 +102,7 @@ function Page_Distrubion(socket) {
                     view.file.path = config.paths.debomatic + '/' + view.distribution.name + '/pool/' + view.package.orig_name + '/' + complete_name;
                 label += ' <a class="btn btn-link btn-lg" title="Download" href="' + view.file.path + '"> ' +
                     '<span class="glyphicon glyphicon-download-alt"></span></a>';
-                if (config.file.preview.indexOf(view.file.name) >= 0) {
-                    current_file_in_preview = true;
+                if (current_file_in_preview) {
                     var view_all = $('<a id="get-whole-file" class="btn btn-link btn-lg" title="View the whole file"></a>');
                     view_all.html('<span class="glyphicon glyphicon-eye-open"></span>');
                     label += view_all.get(0).outerHTML;
@@ -120,8 +119,9 @@ function Page_Distrubion(socket) {
 
             // set onclick get-whole-file
             $("#get-whole-file").on('click', function () {
+                debug(1, "get the whole file");
                 file.get(true);
-                current_file_in_preview = false;
+                $(this).remove();
             });
         },
         clean: function () {
@@ -282,6 +282,8 @@ function Page_Distrubion(socket) {
             view.file = Utils.clone(socket_data.file);
             $('#file pre').html(socket_data.file.content);
             $('#file').show();
+            if (current_file_in_preview)
+                $('#file pre').scrollTop($('#file pre')[0].scrollHeight);
         },
         clean: function () {
             $('#file pre').html('');
@@ -297,6 +299,7 @@ function Page_Distrubion(socket) {
                 content = content.concat(new_content.replace(/\n$/, '').split('\n'));
                 content = content.slice(-config.file.num_lines).join('\n');
                 $('#file pre').html(content);
+                $('#file pre').scrollTop($('#file pre')[0].scrollHeight);
             }
 
             if (config.preferences.autoscroll) {
@@ -313,6 +316,11 @@ function Page_Distrubion(socket) {
         },
         get: function (force) {
             if (Utils.check_view_file(view)) {
+                if (force) {
+                    file.set_preview(false);
+                } else {
+                    file.set_preview();
+                }
                 var query_data = {};
                 query_data.distribution = view.distribution;
                 query_data.package = view.package;
@@ -325,7 +333,26 @@ function Page_Distrubion(socket) {
                 debug_socket('emit', _e.file.get, query_data);
                 socket.emit(_e.file.get, query_data);
             }
+        },
+        set_preview: function (preview) {
+            if (preview === undefined) {
+                preview = config.file.preview.indexOf(view.file.name) >= 0;
             }
+            debug(2, "file set preview", preview);
+            current_file_in_preview = preview;
+            if (preview) {
+                $('#file pre').addClass('preview');
+                var height = (config.file.num_lines) *
+                    parseInt($('#file pre').css('line-height').replace(/[^-\d\.]/g, '')) +
+                    parseInt($('#file pre').css('padding-top').replace(/[^-\d\.]/g, '')) +
+                    parseInt($('#file pre').css('padding-bottom').replace(/[^-\d\.]/g, ''));
+                $('#file pre').css('max-height', height);
+            } else {
+                $('#file pre').removeClass('preview');
+                $('#file pre').css('max-height', 'auto');
+            }
+        }
+
     };
 
     var breadcrumb = {

debomatic-webui/public/stylesheets/style.css

@@ -156,6 +156,10 @@ footer {
   color: #101010;
 }
 
+#file pre.preview {
+  overflow:hidden;
+}
+
 #title a.btn {
   padding-right: 0;
   float: right;