Skip to content

Commit b6234f3

Browse files
tofi86tofi86
committed
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
1 parent a39d102 commit b6234f3

File tree

5 files changed

+125
-91
lines changed

5 files changed

+125
-91
lines changed

‎README.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,9 @@ This is a fork of zipme's [redmine_lightbox](https://github.com/zipme/redmine_li
1111
Compatibility
1212
-------------
1313

14-
**The latest version on `master` branch supports Redmine 3.3 only!**
14+
**The latest version on `master` branch supports Redmine 3.4 only!**
15+
16+
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.
1517

1618
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.
1719

‎app/views/attachments/_links.html.erb‎

Lines changed: 51 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -6,45 +6,59 @@
66
:class => 'icon-only icon-edit'
77
) if options[:editable] %>
88
</div>
9+
<table>
910
<% for attachment in attachments %>
10-
<p><%= link_to_attachment attachment, :class => 'icon icon-attachment', :download => true -%>
11-
<% if attachment.is_text? %>
12-
<%= link_to l(:button_view),
13-
{ :controller => 'attachments', :action => 'show',
14-
:id => attachment, :filename => attachment.filename },
15-
:class => 'icon-only icon-magnifier',
16-
:title => l(:button_view) %>
17-
<% end %>
18-
<% if attachment.is_image? %>
19-
<%= link_to l(:button_view),
20-
{ :controller => 'attachments', :action => 'download',
21-
:id => attachment, :filename => attachment.filename },
22-
:class => 'icon-only icon-magnifier lightbox_preview ' + attachment.filename.split('.').last.downcase,
23-
:rel => 'attachments', :title => "#{attachment.filename}#{ (' - ' + attachment.description) unless attachment.description.blank? }" %>
24-
<% end %>
25-
<% if attachment.is_pdf? %>
26-
<%= link_to l(:button_view),
27-
{ :controller => 'attachments', :action => 'download_inline',
28-
:id => attachment, :filename => attachment.filename },
29-
:class => 'icon-only icon-magnifier lightbox_preview ' + attachment.filename.split('.').last.downcase,
30-
:rel => 'attachments', :title => "#{attachment.filename}#{ (' - ' + attachment.description) unless attachment.description.blank? }",
31-
:data => {:fancybox_type => 'iframe'} %>
32-
<% end %>
33-
<%= attachment.description unless attachment.description.blank? %>
34-
<span class="size">(<%= number_to_human_size attachment.filesize %>)</span>
35-
<% if options[:deletable] %>
36-
<%= link_to l(:button_delete), attachment_path(attachment),
37-
:data => {:confirm => l(:text_are_you_sure)},
38-
:method => :delete,
39-
:class => 'delete icon-only icon-del',
40-
:title => l(:button_delete) %>
41-
<% end %>
42-
<% if options[:author] %>
43-
<span class="author"><%= attachment.author %>, <%= format_time(attachment.created_on) %></span>
44-
<% end %>
45-
</p>
46-
<% end %>
11+
<tr>
12+
<td>
13+
<% if attachment.is_image? %>
14+
<%= link_to_attachment attachment, :class => 'icon icon-attachment lightbox_preview', :download => true -%>
15+
</td>
16+
<td class="alignrigth">
17+
<%= link_to l(:button_view),
18+
{ :controller => 'attachments', :action => 'download',
19+
:id => attachment, :filename => attachment.filename },
20+
:class => 'icon-only icon-magnifier lightbox_preview ' + attachment.filename.split('.').last.downcase,
21+
:rel => 'attachments', :title => "#{attachment.filename}#{ (' - ' + attachment.description) unless attachment.description.blank? }" %>
4722

23+
<% elsif attachment.is_pdf? %>
24+
<%= link_to_attachment attachment, :class => 'icon icon-attachment lightbox_preview pdf', :download => true -%>
25+
</td>
26+
<td class="alignrigth">
27+
<%= link_to l(:button_view),
28+
{ :controller => 'attachments', :action => 'download_inline',
29+
:id => attachment, :filename => attachment.filename },
30+
:class => 'icon-only icon-magnifier lightbox_preview pdf',
31+
:rel => 'attachments', :title => "#{attachment.filename}#{ (' - ' + attachment.description) unless attachment.description.blank? }",
32+
:data => {:fancybox_type => 'iframe'} %>
33+
34+
<% else %>
35+
<%= link_to_attachment attachment, :class => 'icon icon-attachment' -%>
36+
</td>
37+
<td class="alignrigth">
38+
<% end %>
39+
<%= link_to_attachment attachment, class: 'icon-only icon-download', title: l(:button_download), download: true -%>
40+
</td>
41+
<td class="alignrigth">
42+
<span class="size"><%= number_to_human_size attachment.filesize %></span>
43+
</td>
44+
<td><%= attachment.description unless attachment.description.blank? %></td>
45+
<td>
46+
<% if options[:author] %>
47+
<span class="author"><%= attachment.author %>, <%= format_time(attachment.created_on) %></span>
48+
<% end %>
49+
</td>
50+
<td>
51+
<% if options[:deletable] %>
52+
<%= link_to l(:button_delete), attachment_path(attachment),
53+
:data => {:confirm => l(:text_are_you_sure)},
54+
:method => :delete,
55+
:class => 'delete icon-only icon-del',
56+
:title => l(:button_delete) %>
57+
<% end %>
58+
</td>
59+
</tr>
60+
<% end %>
61+
</table>
4862
<% if defined?(thumbnails) && thumbnails %>
4963
<% images = attachments.select(&:thumbnailable?) %>
5064
<% if images.any? %>

‎assets/javascripts/lightbox.js‎

Lines changed: 59 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,69 @@
11
$(document).ready(function() {
22

3-
// modify thumbnail links in wiki content -> add filename from ./img/@alt to url to support fancybox preview
4-
$("div.wiki a.thumbnail").attr('href', function(i, v){
5-
return v.replace(/\/attachments\/(\d+)/g,'/attachments/download/$1') + '/' + $(this).children('img').attr('alt').replace(/(.*\.(png|jp(e)?g|gif))(\s\(.*\))?/g,'$1');
6-
});
3+
// modify thumbnail links in wiki content -> add filename from ./img/@alt to url to support fancybox preview
4+
$("div.wiki a.thumbnail").attr('href', function(i, v){
5+
return v.replace(/\/attachments\/(\d+)/g,'/attachments/download/$1') + '/' + $(this).children('img').attr('alt').replace(/(.*\.(png|jpe?g|gif))(\s\(.*\))?/gi,'$1');
6+
});
77

8-
// modify thumbnails and magnifier links in journal details -> add filename to url to support fancybox preview
9-
$("div.journal div.thumbnails a, div.journal ul.details li a.icon-magnifier").attr('href', function(i, v){
8+
// modify thumbnails and magnifier links in journal details -> add filename to url to support fancybox preview
9+
$("div.journal div.thumbnails a, div.journal ul.details li a:not([title])").attr('href', function(i, v){
10+
if($(this).attr('href').match(/(png|jp?eg|gif|pdf)$/i)) {
1011
return v.replace(/\/attachments\/(\d+)/g,'/attachments/download/$1');
11-
});
12+
} else {
13+
return v;
14+
}
15+
});
1216

13-
// add rel attribute to detail links of the same journal entry
14-
$("div.journal ul.details li a.icon-magnifier").attr('rel', function(i, v){
15-
return 'image-details-' + $(this).closest('div.journal').attr('id');
16-
});
17+
// add a magnifier icon before download icon for images and pdf
18+
$("div.journal ul.details li a.icon-download").each(function(i, obj) {
19+
if($(this).attr('href').match(/\.(png|jp?eg|gif|pdf)$/i)) {
20+
var icon = $(this).clone().attr('class', function(i, v){
21+
return v.replace(/-download/g,'-magnifier');
22+
});
23+
icon.insertBefore($(this));
24+
}
25+
});
1726

18-
// add rel attribute to thumbnails of the same journal entry
19-
$("div.journal div.thumbnails a").attr('rel', function(i, v){
20-
return 'thumbnails-' + $(this).closest('div.journal').attr('id');
21-
});
27+
// add rel attribute to thumbnails of the same journal entry
28+
$("div.journal div.thumbnails a").attr('rel', function(i, v){
29+
return 'thumbnails-' + $(this).closest('div.journal').attr('id');
30+
});
2231

23-
$("div.attachments a.lightbox," +
24-
"div.attachments a.lightbox_preview," +
25-
"div.journal ul.details a[href$='.png']," +
26-
"div.journal ul.details a[href$='.PNG']," +
27-
"div.journal ul.details a[href$='.jpg']," +
28-
"div.journal ul.details a[href$='.JPG']," +
29-
"div.journal ul.details a[href$='.jpeg']," +
30-
"div.journal ul.details a[href$='.JPEG']," +
31-
"div.journal ul.details a[href$='.gif']," +
32-
"div.journal ul.details a[href$='.GIF']," +
33-
"div.journal div.thumbnails a," +
34-
"div.wiki a.thumbnail," +
35-
"div.attachments a.swf," +
36-
".avatar a").fancybox({
37-
prevEffect : 'none',
38-
nextEffect : 'none',
39-
openSpeed : 300,
40-
closeSpeed : 150
41-
});
32+
$("div.attachments a.lightbox," +
33+
"div.attachments a.lightbox_preview," +
34+
"div.journal ul.details a[href$='.png']:not(.icon-download)," +
35+
"div.journal ul.details a[href$='.PNG']:not(.icon-download)," +
36+
"div.journal ul.details a[href$='.jpg']:not(.icon-download)," +
37+
"div.journal ul.details a[href$='.JPG']:not(.icon-download)," +
38+
"div.journal ul.details a[href$='.jpeg']:not(.icon-download)," +
39+
"div.journal ul.details a[href$='.JPEG']:not(.icon-download)," +
40+
"div.journal ul.details a[href$='.gif']:not(.icon-download)," +
41+
"div.journal ul.details a[href$='.GIF']:not(.icon-download)," +
42+
"div.journal div.thumbnails a," +
43+
"div.wiki a.thumbnail," +
44+
"div.attachments a.swf," +
45+
".avatar a").fancybox({
46+
prevEffect : 'none',
47+
nextEffect : 'none',
48+
openSpeed : 300,
49+
closeSpeed : 150
50+
});
4251

43-
$("div.attachments a.pdf," +
44-
"div.journal ul.details a[href$='.pdf']," +
45-
"div.journal ul.details a[href$='.PDF']," +
46-
"div.journal div.thumbnails a[href$='.pdf']," +
47-
"div.journal div.thumbnails a[href$='.PDF']").fancybox({
52+
$("div.attachments a.pdf," +
53+
"div.journal ul.details a[href$='.pdf']:not(.icon-download)," +
54+
"div.journal ul.details a[href$='.PDF']:not(.icon-download)," +
55+
"div.journal div.thumbnails a[href$='.pdf']," +
56+
"div.journal div.thumbnails a[href$='.PDF']").fancybox({
4857
type : 'iframe',
49-
prevEffect : 'none',
50-
nextEffect : 'none',
51-
openSpeed : 300,
52-
closeSpeed : 150,
53-
width : '90%',
54-
height : '90%',
55-
autoSize : true,
56-
iframe : {
57-
preload: false
58-
}
59-
});
58+
prevEffect : 'none',
59+
nextEffect : 'none',
60+
openSpeed : 300,
61+
closeSpeed : 150,
62+
width : '90%',
63+
height : '90%',
64+
autoSize : true,
65+
iframe : {
66+
preload: false
67+
}
68+
});
6069
});

‎assets/stylesheets/lightbox.css‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
1+
div.attachments table .size {
2+
font-size: 0.9em;
3+
color: #888;
4+
}
5+
div.attachments table td.alignrigth {
6+
text-align: right;
7+
}
8+
19
div.attachments div.images {
210
border: 1px solid #CCCCCC;
311
padding: 5px;
@@ -23,13 +31,13 @@ a.lightbox_preview img {
2331

2432
/* move prev/next buttons outside
2533
* fixes issue #5
26-
*
34+
*
2735
* source:
2836
* - http://fancyapps.com/fancybox/#useful
2937
* - http://jsfiddle.net/Xh3B2/
3038
*/
3139
.fancybox-nav {
32-
width: 70px;
40+
width: 70px;
3341
}
3442
.fancybox-nav span {
3543
visibility: visible;

‎init.rb‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@
99
description 'This plugin lets you preview image, pdf and swf attachments in a lightbox.'
1010
version '0.3.2'
1111
url 'https://github.com/paginagmbh/redmine_lightbox2'
12-
requires_redmine :version_or_higher => '3.3.0'
12+
author_url 'https://github.com/tofi86'
13+
requires_redmine :version_or_higher => '3.4'
1314
end
1415

1516

0 commit comments

Comments
 (0)