support for redmine 3.3 // fixes #38

improves the attachement tabular layout and adds magnifier icons near the download icon in the comment/journal details
paginagmbh · Jul 28, 2017 · b6234f3 · b6234f3
1 parent a39d102
commit b6234f3
Show file tree

Hide file tree

Showing 5 changed files with 125 additions and 91 deletions.
diff --git a/README.md b/README.md
@@ -11,7 +11,9 @@ This is a fork of zipme's [redmine_lightbox](https://github.com/zipme/redmine_li
 Compatibility
 -------------
 
-**The latest version on `master` branch supports Redmine 3.3 only!**
+**The latest version on `master` branch supports Redmine 3.4 only!**
+
+A Redmine 3.3.x compatible version can be found in the [redmine-3.3](https://github.com/paginagmbh/redmine_lightbox2/tree/redmine-3.3) branch.
 
 A Redmine 3.0, 3.1, 3.2 compatible version can be found in the [redmine-3.0-3.2](https://github.com/paginagmbh/redmine_lightbox2/tree/redmine-3.0-3.2) branch.
 

diff --git a/app/views/attachments/_links.html.erb b/app/views/attachments/_links.html.erb
@@ -6,45 +6,59 @@
               :class => 'icon-only icon-edit'
              ) if options[:editable] %>
 </div>
+<table>
 <% for attachment in attachments %>
-  <p><%= link_to_attachment attachment, :class => 'icon icon-attachment', :download => true -%>
-  <% if attachment.is_text? %>
-    <%= link_to l(:button_view),
-                { :controller => 'attachments', :action => 'show',
-                  :id => attachment, :filename => attachment.filename },
-                :class => 'icon-only icon-magnifier',
-                :title => l(:button_view) %>
-  <% end %>
-  <% if attachment.is_image? %>
-    <%= link_to l(:button_view),
-                { :controller => 'attachments', :action => 'download',
-                  :id => attachment, :filename => attachment.filename },
-                :class => 'icon-only icon-magnifier lightbox_preview ' + attachment.filename.split('.').last.downcase,
-                :rel => 'attachments', :title => "#{attachment.filename}#{ (' - ' + attachment.description) unless attachment.description.blank? }" %>
-  <% end %>
-  <% if attachment.is_pdf? %>
-    <%= link_to l(:button_view),
-                { :controller => 'attachments', :action => 'download_inline',
-                  :id => attachment, :filename => attachment.filename },
-                :class => 'icon-only icon-magnifier lightbox_preview ' + attachment.filename.split('.').last.downcase,
-                :rel => 'attachments', :title => "#{attachment.filename}#{ (' - ' + attachment.description) unless attachment.description.blank? }",
-                :data  => {:fancybox_type => 'iframe'} %>
-  <% end %>
-  <%= attachment.description unless attachment.description.blank? %>
-  <span class="size">(<%= number_to_human_size attachment.filesize %>)</span>
-  <% if options[:deletable] %>
-    <%= link_to l(:button_delete), attachment_path(attachment),
-                :data => {:confirm => l(:text_are_you_sure)},
-                :method => :delete,
-                :class => 'delete icon-only icon-del',
-                :title => l(:button_delete) %>
-  <% end %>
-  <% if options[:author] %>
-    <span class="author"><%= attachment.author %>, <%= format_time(attachment.created_on) %></span>
-  <% end %>
-  </p>
-<% end %>
+<tr>
+  <td>
+    <% if attachment.is_image? %>
+      <%= link_to_attachment attachment, :class => 'icon icon-attachment lightbox_preview', :download => true -%>
+      </td>
+      <td class="alignrigth">
+      <%= link_to l(:button_view),
+                  { :controller => 'attachments', :action => 'download',
+                    :id => attachment, :filename => attachment.filename },
+                  :class => 'icon-only icon-magnifier lightbox_preview ' + attachment.filename.split('.').last.downcase,
+                  :rel => 'attachments', :title => "#{attachment.filename}#{ (' - ' + attachment.description) unless attachment.description.blank? }" %>
 
+    <% elsif attachment.is_pdf? %>
+      <%= link_to_attachment attachment, :class => 'icon icon-attachment lightbox_preview pdf', :download => true -%>
+      </td>
+      <td class="alignrigth">
+      <%= link_to l(:button_view),
+                  { :controller => 'attachments', :action => 'download_inline',
+                    :id => attachment, :filename => attachment.filename },
+                  :class => 'icon-only icon-magnifier lightbox_preview pdf',
+                  :rel => 'attachments', :title => "#{attachment.filename}#{ (' - ' + attachment.description) unless attachment.description.blank? }",
+                  :data  => {:fancybox_type => 'iframe'} %>
+
+    <% else %>
+      <%= link_to_attachment attachment, :class => 'icon icon-attachment' -%>
+      </td>
+      <td class="alignrigth">
+    <% end %>
+    <%= link_to_attachment attachment, class: 'icon-only icon-download', title: l(:button_download), download: true -%>
+  </td>
+  <td class="alignrigth">
+    <span class="size"><%= number_to_human_size attachment.filesize %></span>
+  </td>
+  <td><%= attachment.description unless attachment.description.blank? %></td>
+  <td>
+    <% if options[:author] %>
+      <span class="author"><%= attachment.author %>, <%= format_time(attachment.created_on) %></span>
+    <% end %>
+  </td>
+  <td>
+    <% if options[:deletable] %>
+      <%= link_to l(:button_delete), attachment_path(attachment),
+                  :data => {:confirm => l(:text_are_you_sure)},
+                  :method => :delete,
+                  :class => 'delete icon-only icon-del',
+                  :title => l(:button_delete) %>
+    <% end %>
+  </td>
+</tr>
+<% end %>
+</table>
 <% if defined?(thumbnails) && thumbnails %>
   <% images = attachments.select(&:thumbnailable?) %>
   <% if images.any? %>

diff --git a/assets/javascripts/lightbox.js b/assets/javascripts/lightbox.js
@@ -1,60 +1,69 @@
 $(document).ready(function() {
 
-    // modify thumbnail links in wiki content -> add filename from ./img/@alt to url to support fancybox preview
-    $("div.wiki a.thumbnail").attr('href', function(i, v){
-      return v.replace(/\/attachments\/(\d+)/g,'/attachments/download/$1') + '/' + $(this).children('img').attr('alt').replace(/(.*\.(png|jp(e)?g|gif))(\s\(.*\))?/g,'$1');
-    });
+  // modify thumbnail links in wiki content -> add filename from ./img/@alt to url to support fancybox preview
+  $("div.wiki a.thumbnail").attr('href', function(i, v){
+    return v.replace(/\/attachments\/(\d+)/g,'/attachments/download/$1') + '/' + $(this).children('img').attr('alt').replace(/(.*\.(png|jpe?g|gif))(\s\(.*\))?/gi,'$1');
+  });
 
-    // modify thumbnails and magnifier links in journal details -> add filename to url to support fancybox preview
-    $("div.journal div.thumbnails a, div.journal ul.details li a.icon-magnifier").attr('href', function(i, v){
+  // modify thumbnails and magnifier links in journal details -> add filename to url to support fancybox preview
+  $("div.journal div.thumbnails a, div.journal ul.details li a:not([title])").attr('href', function(i, v){
+    if($(this).attr('href').match(/(png|jp?eg|gif|pdf)$/i)) {
       return v.replace(/\/attachments\/(\d+)/g,'/attachments/download/$1');
-    });
+    } else {
+      return v;
+    }
+  });
 
-    // add rel attribute to detail links of the same journal entry
-    $("div.journal ul.details li a.icon-magnifier").attr('rel', function(i, v){
-      return 'image-details-' + $(this).closest('div.journal').attr('id');
-    });
+  // add a magnifier icon before download icon for images and pdf
+  $("div.journal ul.details li a.icon-download").each(function(i, obj) {
+    if($(this).attr('href').match(/\.(png|jp?eg|gif|pdf)$/i)) {
+      var icon = $(this).clone().attr('class', function(i, v){
+        return v.replace(/-download/g,'-magnifier');
+      });
+      icon.insertBefore($(this));
+    }
+  });
 
-    // add rel attribute to thumbnails of the same journal entry
-    $("div.journal div.thumbnails a").attr('rel', function(i, v){
-      return 'thumbnails-' + $(this).closest('div.journal').attr('id');
-    });
+  // add rel attribute to thumbnails of the same journal entry
+  $("div.journal div.thumbnails a").attr('rel', function(i, v){
+    return 'thumbnails-' + $(this).closest('div.journal').attr('id');
+  });
 
-	$("div.attachments a.lightbox," +
-      "div.attachments a.lightbox_preview," +
-	  "div.journal ul.details a[href$='.png']," +
-	  "div.journal ul.details a[href$='.PNG']," +
-	  "div.journal ul.details a[href$='.jpg']," +
-	  "div.journal ul.details a[href$='.JPG']," +
-	  "div.journal ul.details a[href$='.jpeg']," +
-	  "div.journal ul.details a[href$='.JPEG']," +
-	  "div.journal ul.details a[href$='.gif']," +
-	  "div.journal ul.details a[href$='.GIF']," +
-	  "div.journal div.thumbnails a," +
-	  "div.wiki a.thumbnail," +
-	  "div.attachments a.swf," +
-	  ".avatar a").fancybox({
-			prevEffect		: 'none',
-			nextEffect		: 'none',
-			openSpeed		: 300,
-			closeSpeed		: 150
-		});
+  $("div.attachments a.lightbox," +
+    "div.attachments a.lightbox_preview," +
+    "div.journal ul.details a[href$='.png']:not(.icon-download)," +
+    "div.journal ul.details a[href$='.PNG']:not(.icon-download)," +
+    "div.journal ul.details a[href$='.jpg']:not(.icon-download)," +
+    "div.journal ul.details a[href$='.JPG']:not(.icon-download)," +
+    "div.journal ul.details a[href$='.jpeg']:not(.icon-download)," +
+    "div.journal ul.details a[href$='.JPEG']:not(.icon-download)," +
+    "div.journal ul.details a[href$='.gif']:not(.icon-download)," +
+    "div.journal ul.details a[href$='.GIF']:not(.icon-download)," +
+    "div.journal div.thumbnails a," +
+    "div.wiki a.thumbnail," +
+    "div.attachments a.swf," +
+    ".avatar a").fancybox({
+      prevEffect    : 'none',
+      nextEffect    : 'none',
+      openSpeed     : 300,
+      closeSpeed    : 150
+  });
 
-    $("div.attachments a.pdf," +
-      "div.journal ul.details a[href$='.pdf']," +
-      "div.journal ul.details a[href$='.PDF']," +
-      "div.journal div.thumbnails a[href$='.pdf']," +
-      "div.journal div.thumbnails a[href$='.PDF']").fancybox({
+  $("div.attachments a.pdf," +
+    "div.journal ul.details a[href$='.pdf']:not(.icon-download)," +
+    "div.journal ul.details a[href$='.PDF']:not(.icon-download)," +
+    "div.journal div.thumbnails a[href$='.pdf']," +
+    "div.journal div.thumbnails a[href$='.PDF']").fancybox({
       type          : 'iframe',
-			prevEffect		: 'none',
-			nextEffect		: 'none',
-			openSpeed		: 300,
-			closeSpeed		: 150,
-			width			: '90%',
-			height			: '90%',
-			autoSize		: true,
-			iframe : {
-				preload: false
-			}
-		});
+      prevEffect    : 'none',
+      nextEffect    : 'none',
+      openSpeed     : 300,
+      closeSpeed    : 150,
+      width         : '90%',
+      height        : '90%',
+      autoSize      : true,
+      iframe : {
+        preload: false
+      }
+  });
 });
diff --git a/assets/stylesheets/lightbox.css b/assets/stylesheets/lightbox.css
@@ -1,3 +1,11 @@
+div.attachments table .size {
+  font-size: 0.9em;
+  color: #888;
+}
+div.attachments table td.alignrigth {
+  text-align: right;
+}
+
 div.attachments div.images {
   border: 1px solid #CCCCCC;
 	padding: 5px;
@@ -23,13 +31,13 @@ a.lightbox_preview img  {
 
 /* move prev/next buttons outside
  * fixes issue #5
- * 
+ *
  * source:
  * - http://fancyapps.com/fancybox/#useful
  * - http://jsfiddle.net/Xh3B2/
  */
 .fancybox-nav {
-    width: 70px;       
+    width: 70px;
 }
 .fancybox-nav span {
     visibility: visible;

diff --git a/init.rb b/init.rb
@@ -9,7 +9,8 @@
   description 'This plugin lets you preview image, pdf and swf attachments in a lightbox.'
   version '0.3.2'
   url 'https://github.com/paginagmbh/redmine_lightbox2'
-  requires_redmine :version_or_higher => '3.3.0'
+  author_url 'https://github.com/tofi86'
+  requires_redmine :version_or_higher => '3.4'
 end