[dir view] grid view: show 'name' tip, added magnificPopup preview for images, & etc.

seahub/templates/js/templates.html

@@ -347,14 +347,10 @@
 
 <script type="text/template" id="grid-view-file-item-tmpl">
     <a href="<%= url %>" class="img-link" target="_blank">
-        <% if (dirent.is_img) { %>
+        <% if (dirent.is_img && dirent.encoded_thumbnail_src) { %>
-            <% if (dirent.encoded_thumbnail_src) { %>
             <img class="thumbnail vam" src="{{ SITE_ROOT }}<%- dirent.encoded_thumbnail_src %>" alt="" />
-            <% } else { %>
-            <img src="<%= icon_url %>" width="96" alt="" class="vam" />
-            <% } %>
         <% } else { %>
-        <img src="<%= icon_url %>" width="96" alt="" class="vam" />
+            <img src="<%= icon_url %>" width="96" alt="" class="vam" />
         <% } %>
 
         <% if (is_pro && dirent.is_locked) { %>

seahub/templates/view_shared_dir.html

@@ -170,7 +170,7 @@ var magnificOptions = {
     image: {
         titleSrc: function(item) {
             var $el = item.el;
-            var img_name = $el.closest('.file-item').attr('data-name');
+            var img_name = HTMLescape($el.closest('.file-item').attr('data-name'));
             var img_link = '<a href="' + $el.attr('href') + '" target="_blank">' + "{% trans "Open in New Tab" %}" + '</a>';
             return img_name + '<br />' + img_link;
         },

static/scripts/app/models/dirent.js

@@ -59,7 +59,6 @@ define([
             var dir = this.collection;
             var path = this.getPath();
             var model = this;
-            options = options || {};
 
             var opts = {
                 repo_id: dir.repo_id,
@@ -75,12 +74,14 @@ define([
                     // It is safer to call dir.remove() directly.
                     dir.remove(model);
                     // this.trigger('destroy');
-                    if (options.success)
+                    if (options.success) {
                         options.success(data);
+                    }
                 },
                 error: function(xhr) {
-                    if (options.error)
+                    if (options.error) {
                         options.error(xhr);
+                    }
                 }
             });
         },
@@ -88,7 +89,6 @@ define([
         rename: function(options) {
             var dir = this.collection;
             var _this = this;
-            options = options || {};
 
             var opts = {
                 repo_id: dir.repo_id,
@@ -118,12 +118,14 @@ define([
                         });
                     }
                     _this.set(renamed_dirent_data)
-                    if (options.success)
+                    if (options.success) {
                         options.success(data);
+                    }
                 },
                 error: function(xhr) {
-                    if (options.error)
+                    if (options.error) {
                         options.error(xhr);
+                    }
                 }
             });
         },
@@ -133,7 +135,10 @@ define([
                 filepath = this.getPath();
 
             $.ajax({
-                url: Common.getUrl({name: 'lock_or_unlock_file', repo_id: dir.repo_id}),
+                url: Common.getUrl({
+                    name: 'lock_or_unlock_file',
+                    repo_id: dir.repo_id
+                }),
                 type: 'PUT',
                 dataType: 'json',
                 data: {

static/scripts/app/views/dialogs/dirent-rename.js

@@ -15,7 +15,7 @@ define([
             this.dir = options.dir;
 
             this.render();
-            this.$el.modal({appendTo:'#main', autoResize:true, focus:false});
+            this.$el.modal({appendTo:'#main'});
             $('#simplemodal-container').css({'width':'auto', 'height':'auto'});
 
             this.$error = this.$('.error');
@@ -66,7 +66,6 @@ define([
                         err = gettext("Failed. Please check the network.");
                     }
                     _this.$error.html(err).removeClass('hide');
-                    $("#simplemodal-container").css({'height':'auto'});
                     Common.enableButton($submit_btn);
                 }
             });

static/scripts/app/views/dir.js

@@ -31,9 +31,10 @@ define([
             mvProgressTemplate: _.template($("#mv-progress-popup-template").html()),
 
             initialize: function(options) {
-                this.$dirent_list_body = this.$('.repo-file-list tbody');
                 this.$dirent_list = this.$('.repo-file-list');
                 this.$dirent_grid = this.$('.grid-view');
+                this.$dirent_list_body = this.$('.repo-file-list tbody');
+
                 this.$path_bar = this.$('.path');
                 // For compatible with css, we use .repo-op instead of .dir-op
                 this.$dir_op_bar = this.$('.repo-op');
@@ -53,9 +54,9 @@ define([
 
                 this.fileUploadView = new FileUploadView({dirView: this});
 
-                this.$el.magnificPopup({
+                // magnificPopup for image files
+                var magnificPopupOptions = {
                     type: 'image',
-                    delegate: '.img-name-link',
                     tClose: gettext("Close (Esc)"), // Alt text on close button
                     tLoading: gettext("Loading..."), // Text that is displayed during loading. Can contain %curr% and %total% keys
                     gallery: {
@@ -64,16 +65,34 @@ define([
                         tNext: gettext("Next (Right arrow key)"), // Alt text on right arrow
                         tCounter: gettext("%curr% of %total%") // Markup for "1 of 7" counter
                     },
+                    image: {
+                        tError: gettext('<a href="%url%" target="_blank">The image</a> could not be loaded.') // Error message when image could not be loaded
+                    }
+                };
+                // magnificPopup: for 'list view'
+                this.$dirent_list.magnificPopup($.extend({}, magnificPopupOptions, {
+                    delegate: '.img-name-link',
                     image: {
                         titleSrc: function(item) {
                             var el = item.el;
                             var img_name = el[0].innerHTML;
                             var img_link = '<a href="' + el.attr('href') + '" target="_blank">' + gettext("Open in New Tab") + '</a>';
                             return img_name + '<br />' + img_link;
-                        },
+                        }
-                        tError: gettext('<a href="%url%" target="_blank">The image</a> could not be loaded.') // Error message when image could not be loaded
                     }
-                });
+                }));
+                // magnificPopup: for 'grid view'
+                this.$dirent_grid.magnificPopup($.extend({}, magnificPopupOptions, {
+                    delegate: '.image-grid-item',
+                    image: {
+                        titleSrc: function(item) {
+                            var $el = $(item.el);
+                            var img_name = Common.HTMLescape($el.attr('data-name'));
+                            var img_link = '<a href="' + $el.attr('data-url') + '" target="_blank">' + gettext("Open in New Tab") + '</a>';
+                            return img_name + '<br />' + img_link;
+                        }
+                    }
+                }));
 
                 // scroll window: get 'more', fix 'op bar'
                 var _this = this;

static/scripts/app/views/dirent-grid.js

@@ -35,8 +35,9 @@ define([
 
         render: function() {
             var dir = this.dir;
-            var template;
+            var dirent_path = this.model.getPath();
 
+            var template;
             if (this.model.get('is_dir')) {
                 template = this.dirTemplate;
             } else {
@@ -45,7 +46,7 @@ define([
 
             this.$el.html(template({
                 dirent: this.model.attributes,
-                dirent_path: this.model.getPath(),
+                dirent_path: dirent_path,
                 icon_url: this.model.getIconUrl(192),
                 url: this.model.getWebUrl(),
                 category: dir.category,
@@ -58,6 +59,18 @@ define([
 
             this.$('.file-locked-icon').attr('title', gettext("locked by {placeholder}").replace('{placeholder}', this.model.get('lock_owner_name')));
 
+            this.$el.attr('title', this.model.get('obj_name'));
+
+            // for magnificPopup
+            if (this.model.get('is_img')) {
+                this.$el.addClass('image-grid-item');
+                this.$el.attr({
+                    'data-mfp-src': app.pageOptions.site_root + 'repo/' + dir.repo_id + '/raw' + Common.encodePath(dirent_path),
+                    'data-url': this.model.getWebUrl(),
+                    'data-name': this.model.get('obj_name')
+                });
+            }
+
             return this;
         },