Skip to content

Commit

Permalink
Display file preview for readme, metadata and json files, grouped in …
Browse files Browse the repository at this point in the history
…their tab
  • Loading branch information
anusharanganathan committed May 23, 2023
1 parent 23dd10a commit 91f3712
Show file tree
Hide file tree
Showing 8 changed files with 141 additions and 153 deletions.
47 changes: 28 additions & 19 deletions hyrax/app/assets/javascripts/file_preview.js
Original file line number Diff line number Diff line change
@@ -1,22 +1,31 @@
Blacklight.onLoad(function() {
function showFile(evt, file_id) {
// Declare all variables
var i, tabcontent, tablinks;
$(function() {
$("div.vertical-tab-menu>div.list-group>a").click(function (e) {
e.preventDefault();
$(this).siblings('a.active').removeClass("active");
$("div.vertical-tab>div.vertical-tab-content").removeClass("active");
$(this).addClass("active");
var ele_id = $(this).attr("href");
$(ele_id).addClass("active");
});
});
});

// Get all elements with class="vertical-tab-content" and hide them
tabcontent = document.getElementsByClassName("vertical-tab-content");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}

// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("vertical-tab-links");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
Blacklight.onLoad(function() {
$(function() {
$(".preview_file_types").click(function(e) {
// e.preventDefault();
var ele_id = $(this).attr("href");
var ele = $(ele_id);
var active_inner_tab = ele.find(".list-group-item.active");
if(active_inner_tab.length === 1) {
$(active_inner_tab[0]).trigger('click');
} else {
var inner_tab = ele.find(".list-group-item:first");
if(inner_tab.length === 1) {
$(inner_tab[0]).trigger('click');
}
}

// Show the current tab, and add an "active" class to the link that opened the tab
document.getElementById(file_id).style.display = "block";
evt.currentTarget.className += " active";
}
} );
});
});
});
2 changes: 0 additions & 2 deletions hyrax/app/assets/javascripts/txt_preview.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,6 @@ Blacklight.onLoad(function() {
preview.find('.txt-preview-error').hide();
let ele_id = preview.data("ele");
let ele = document.getElementById(ele_id);
console.log(ele_id);
// console.log(data['content']);
ele.innerText = data['content'];
preview.addClass('done')
},
Expand Down
67 changes: 41 additions & 26 deletions hyrax/app/assets/stylesheets/ngdr.scss
Original file line number Diff line number Diff line change
Expand Up @@ -171,35 +171,50 @@ div#announcement {
}

/* Style the buttons that are used to open the tab content */
.vertical-tab button {
display: block;
background-color: inherit;
color: black;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
transition: 0.3s;
div.vertical-tab-menu{
padding-right: 0;
padding-left: 0;
padding-bottom: 0;
}

/* Change background color of buttons on hover */
.vertical-tab button:hover {
background-color: #ddd;
div.vertical-tab-menu div.list-group{
margin-bottom: 0;
}
div.vertical-tab-menu div.list-group>a{
margin-bottom: 0;
}
div.vertical-tab-menu div.list-group>a .glyphicon,
div.vertical-tab-menu div.list-group>a .fa {
color: #7DB928;
}
div.vertical-tab-menu div.list-group>a:first-child{
border-top-right-radius: 0;
}
div.vertical-tab-menu div.list-group>a:last-child{
border-bottom-right-radius: 0;
}
div.vertical-tab-menu div.list-group>a.active{
background-color: #7DB928;
color: #000000;
}
div.vertical-tab-menu div.list-group>a.active:after{
content: '';
position: absolute;
left: 100%;
top: 50%;
margin-top: -13px;
border-left: 0;
border-bottom: 13px solid transparent;
border-top: 13px solid transparent;
border-left: 10px solid #7DB928;
}

/* Create an active/current "tab button" class */
.vertical-tab button.active {
background-color: #ccc;
div.vertical-tab-content{
background-color: #ffffff;
/* border: 1px solid #eeeeee; */
padding-left: 20px;
padding-top: 10px;
}

/* Style the tab content */
.vertical-tab-content {
float: left;
padding: 0px 12px;
border: 1px solid #ccc;
width: 70%;
border-left: none;
height: 100%;
div.vertical-tab div.vertical-tab-content:not(.active){
display: none;
}
39 changes: 9 additions & 30 deletions hyrax/app/views/hyrax/base/_preview_files.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -11,30 +11,20 @@
<% end %>
<% if @presenter.member_presenters.length > 0 && readme_presenters.size > 0 %>
<li class="nav-item <%= active_class %>" role="presentation">
<a href="#readmeview" aria-controls="readme view" role="tab" data-toggle="tab">Readme</a>
<a class="preview_file_types" href="#readmeview" aria-controls="readme view" role="tab" data-toggle="tab">Readme</a>
</li>
<% active_class = '' %>
<% end %>
<% if @presenter.member_presenters.length > 0 && metadata_presenters.size > 0 %>
<li class="nav-item <%= active_class %>" role="presentation">
<a href="#metadataview" aria-controls="metadata view" role="tab" data-toggle="tab">Metadata</a>
<a class="preview_file_types" href="#metadataview" aria-controls="metadata view" role="tab" data-toggle="tab">Metadata</a>
</li>
<% active_class = '' %>
<% end %>
<% if @presenter.member_presenters.length > 0 && json_presenters.size > 0 %>
<li class="nav-item <%= active_class %>" role="presentation">
<a href="#jsonview" aria-controls="json view" role="tab" data-toggle="tab">Json</a>
<a class="preview_file_types" href="#jsonview" aria-controls="json view" role="tab" data-toggle="tab">Json</a>
</li>
<% active_class = '' %>
<% end %>
<% @presenter.member_presenters.each do |member_presenter| %>
<% if (member_presenter&.respond_to?(:display_readme?) && member_presenter&.display_readme?) or
(member_presenter&.respond_to?(:metadata_json?) && member_presenter&.metadata_json?) %>
<li class="nav-item <%= active_class %>" role="presentation">
<a href="#preview-<%= member_presenter.id %>" aria-controls="preview" role="tab" data-toggle="tab"><%= member_presenter.link_name%></a>
</li>
<% active_class = '' %>
<% end %>
<% end %>
</ul>
<!-- Tab panes -->
Expand All @@ -49,32 +39,21 @@
<% if @presenter.member_presenters.length > 0 && readme_presenters.size > 0 %>
<div class="tab-pane <%= active_class %>" id="readmeview" role="tabpanel" aria-labelledby="readmeview-tab">
<%= render 'preview_same_file_types', presenter: @presenter,
file_presenters: readme_presenters%>
file_presenters: readme_presenters, active_class: active_class, file_group: "readme" %>
</div>
<% active_class = '' %>
<% end %>
<% if @presenter.member_presenters.length > 0 && metadata_presenters.size > 0 %>
<div class="tab-pane <%= active_class %>" id="metadataview" role="tabpanel" aria-labelledby="metadataview-tab">
<%= render 'preview_same_file_types', presenter: @presenter,
file_presenters: metadata_presenters%>
file_presenters: metadata_presenters, active_class: active_class, file_group: "metadata" %>
</div>
<% active_class = '' %>
<% end %>
<% if @presenter.member_presenters.length > 0 && json_presenters.size > 0 %>
<div class="tab-pane <%= active_class %>" id="jsonview" role="tabpanel" aria-labelledby="jsonview-tab">
<%= render 'preview_same_file_types', presenter: @presenter,
file_presenters: json_presenters%>
file_presenters: json_presenters, active_class: active_class, file_group: "json" %>
</div>
<% end %>
<% @presenter.member_presenters.each_with_index do |member_presenter, index| %>
<% if member_presenter&.respond_to?(:display_readme?) && member_presenter&.display_readme? %>
<div class="tab-pane <%= active_class %>" id="preview-<%= member_presenter.id %>" role="tabpanel" aria-labelledby="preview-<%= member_presenter.id %>-tab">
<%= nims_media_display(member_presenter, content: true) %>
</div>
<% active_class = '' %>
<% elsif member_presenter&.respond_to?(:metadata_json?) && member_presenter&.metadata_json? %>
<div class="tab-pane <%= active_class %>" id="preview-<%= member_presenter.id %>" role="tabpanel" aria-labelledby="preview-<%= member_presenter.id %>-tab">
<%= nims_media_display(member_presenter, graph: true) %>
</div>
<% active_class = '' %>
<% end %>
<% end %>
</div>
</div>
70 changes: 57 additions & 13 deletions hyrax/app/views/hyrax/base/_preview_same_file_types.html.erb
Original file line number Diff line number Diff line change
@@ -1,18 +1,62 @@
<div class="vertical-tab">
<% file_presenters.each do |p| %>
<button class="vertical-tab-links" id="<%= p.id %>"
onclick="showFile(event, 'tab-content-<%= p.id %>')">
<%= p.link_name %>
</button>
<% end %>
</div>
<% this_active_class = active_class %>

<% file_presenters.each do |p| %>
<div id="tab-content-<%= p.id %>" class="vertical-tab-content">
File content should be here
<%#= nims_media_display(p, content: true) %>
<div class="files-preview panel panel-default <%= active_class %>">
<a id="<%= file_group %>-preview-panel"></a>
<div class="panel-heading" data-toggle="collapse" data-target="#<%= file_group %>-preview">
<h4 class="panel-title">
<a class="<%= file_group %>-preview-title accordion-toggle">Preview <%= file_group %> files</a>
</h4>
</div>
<% end %>
<div id="<%= file_group %>-preview" class="panel-collapse collapse in">
<div class="panel-body overflow-scroll">

<div class="col-lg-3 col-md-3 vertical-tab-menu">
<div class="list-group">
<% file_presenters.each do |p| %>
<a href="#type-preview-<%= p.id %>" aria-controls="preview <%= p.link_name %>"
class="list-group-item <%= this_active_class %> text-center">
<%= p.link_name %>
</a>
<% this_active_class = '' %>
<% end %>
</div>
</div>

<% this_active_class = active_class %>
<div class="col-lg-9 col-md-9 vertical-tab">
<% file_presenters.each do |p| %>
<% if p.json? %>
<% member_type = "graph" %>
<% member_class = "json-preview" %>
<% elsif p.markdown? %>
<% member_type = "content" %>
<% member_class = "md-preview" %>
<% else # should be text %>
<% member_type = "content" %>
<% member_class = "txt-preview" %>
<% end %>
<div class="vertical-tab-content <%= member_class %> <%= this_active_class %>" id="type-preview-<%= p.id %>"
aria-labelledby="preview <%= p.link_name %>"
data-url="<%= main_app.export_file_path(p.id)%>"
data-ele="<%= member_class %>-<%= member_type %>-<%= p.id %>"
data-title="<%= p.link_name %>">
<% if member_type == "graph" %>
<%= nims_media_display(p, graph: true) %>
<% else %>
<%= nims_media_display(p, content: true) %>
<% end %>
</div>
<% this_active_class = '' %>
<% end %>
</div>
</div>
<div class="panel-footer <%= file_group %>-preview-size" style="display: none;">
<!-- size -->
</div>
</div>
</div>




23 changes: 2 additions & 21 deletions hyrax/app/views/hyrax/file_sets/media_display/_json.html.erb
Original file line number Diff line number Diff line change
@@ -1,25 +1,6 @@
<% if local_assigns[:graph] %>
<div class="json-preview panel panel-default"
data-url="<%= main_app.export_file_path(file_set.id)%>"
data-ele="json-preview-graph-<%= file_set.id %>"
data-title="<%= file_set.link_name %>"
>
<a id="json-preview-panel-<%= file_set.id %>"></a>
<div class="panel-heading" data-toggle="collapse" data-target="#json-preview-<%= file_set.id %>">
<h4 class="panel-title">
<a class="json-preview-title accordion-toggle">Preview: <%= file_set.link_name %></a>
</h4>
</div>
<div id="json-preview-<%= file_set.id %>" class="panel-collapse collapse in">
<div class="panel-body overflow-scroll">
<div class="json-preview-error" style="display: none;">There was an error generating the jsonld preview; please download the file instead.</div>
<div id="json-preview-graph-<%= file_set.id %>" class="json-preview-graph display full-width" style="width:100%"></div>
</div>
<div class="panel-footer json-preview-size" style="display: none;">
<!-- size -->
</div>
</div>
</div>
<div class="json-preview-error" style="display: none;">There was an error generating the jsonld preview; please download the file instead.</div>
<div id="json-preview-graph-<%= file_set.id %>" class="json-preview-graph display full-width" style="width:100%"></div>
<% elsif Hyrax.config.display_media_download_link? %>
<div>
<%= link_to t('hyrax.file_set.show.download'), hyrax.download_path(file_set.id), id: "file_download_"+file_set.id, data: { label: file_set.id }, target: "_new" %>
Expand Down
23 changes: 2 additions & 21 deletions hyrax/app/views/hyrax/file_sets/media_display/_md.html.erb
Original file line number Diff line number Diff line change
@@ -1,25 +1,6 @@
<% if local_assigns[:content] %>
<div class="md-preview panel panel-default"
data-url="<%= main_app.export_file_path(file_set.id)%>"
data-ele="md-preview-content-<%= file_set.id %>"
data-title="<%= file_set.link_name %>"
>
<a id="md-preview-panel-<%= file_set.id %>"></a>
<div class="panel-heading" data-toggle="collapse" data-target="#md-preview-<%= file_set.id %>">
<h4 class="panel-title">
<a class="md-preview-title accordion-toggle">Preview: <%= file_set.link_name %></a>
</h4>
</div>
<div id="md-preview-<%= file_set.id %>" class="panel-collapse collapse in">
<div class="panel-body overflow-scroll">
<div class="md-preview-error" style="display: none;">There was an error generating the markdown preview; please download the file instead.</div>
<div id="md-preview-content-<%= file_set.id %>" class="md-preview-content display full-width" style="width:100%"></div>
</div>
<div class="panel-footer md-preview-size" style="display: none;">
<!-- size -->
</div>
</div>
</div>
<div class="md-preview-error" style="display: none;">There was an error generating the markdown preview; please download the file instead.</div>
<div id="md-preview-content-<%= file_set.id %>" class="md-preview-content display full-width" style="width:100%"></div>
<% elsif Hyrax.config.display_media_download_link? %>
<div>
<%= link_to t('hyrax.file_set.show.download'), hyrax.download_path(file_set.id), id: "file_download_"+file_set.id, data: { label: file_set.id }, target: "_new" %>
Expand Down
23 changes: 2 additions & 21 deletions hyrax/app/views/hyrax/file_sets/media_display/_txt.html.erb
Original file line number Diff line number Diff line change
@@ -1,25 +1,6 @@
<% if local_assigns[:content] %>
<div class="txt-preview panel panel-default"
data-url="<%= main_app.export_file_path(file_set.id)%>"
data-ele="txt-preview-content-<%= file_set.id %>"
data-title="<%= file_set.link_name %>"
>
<a id="txt-preview-panel-<%= file_set.id %>"></a>
<div class="panel-heading" data-toggle="collapse" data-target="#txt-preview-<%= file_set.id %>">
<h4 class="panel-title">
<a class="txt-preview-title accordion-toggle">Preview: <%= file_set.link_name %></a>
</h4>
</div>
<div id="txt-preview-<%= file_set.id %>" class="panel-collapse collapse in">
<div class="panel-body overflow-scroll">
<div class="txt-preview-error" style="display: none;">There was an error generating the text preview; please download the file instead.</div>
<div class="txt-preview-content display full-width" style="width:100%"><pre id="txt-preview-content-<%= file_set.id %>"></pre></div>
</div>
<div class="panel-footer txt-preview-size" style="display: none;">
<!-- size -->
</div>
</div>
</div>
<div class="txt-preview-error" style="display: none;">There was an error generating the text preview; please download the file instead.</div>
<div class="txt-preview-content display full-width" style="width:100%"><pre id="txt-preview-content-<%= file_set.id %>"></pre></div>
<% elsif Hyrax.config.display_media_download_link? %>
<div>
<%= link_to t('hyrax.file_set.show.download'), hyrax.download_path(file_set.id), id: "file_download_"+file_set.id, data: { label: file_set.id }, target: "_new" %>
Expand Down

0 comments on commit 91f3712

Please sign in to comment.