custom_gallery/app/views/custom_galleries/show.html.erb

144 lines
5.7 KiB
Plaintext

<%
params = OrbitHelper.params
page = Page.where(url:params['url']).first
@layout_type = 0
if page.methods.include?(:select_option_items)
@show_option_items = ModuleApp.where(key: 'custom_gallery').last.show_option_items rescue nil
page.select_option_items.each do |select_option_item|
if !(@show_option_items.nil?) && select_option_item.field_name == @show_option_items.keys.first.to_s
value = YAML.load(select_option_item.value)
tmp = value[:en]
I18n.with_locale(:en) do
if tmp == t('custom_gallery.grid_style')
@layout_type = 0
elsif tmp == t('custom_gallery.card_style')
@layout_type = 1
elsif tmp == t('custom_gallery.slideshow_style')
@layout_type = 2
end
end
end
end
end
data = action_data
%>
<% if @layout_type==0 %>
<%= render_view %>
<% elsif @layout_type==1 %>
<div class="show-custom_gallery custom_gallery card-group">
<h1 class="show-title">
<span><%= data['data']['custom_album-title'] %></span>
</h1>
<%= data['data']['custom_album-description'].html_safe %>
<link rel="stylesheet" type="text/css" href="/assets/custom_gallery_card.css">
<div class="row show-content" data-level="0" data-list="images">
<% data['images'].each do |image| %>
<div class="card card-flip h-100">
<div class="card-front">
<div class="card-body" style="padding:0;">
<img
srcset="
<%= image['thumb-large-src'] %> 1024w,
<%= image['thumb-src'] %> 768w"
src="<%= image['thumb-src'] %>"
alt="<%= image['alt_title'] %>"
>
<div class="card-footer">
<h3 class="card-title"><%= image['image_short_description'] %></h3>
</div>
</div>
</div>
<div class="card-back">
<div class="card-body" style="background-color: <%= image['custom_album_color'] %>;color: <%= image['custom_album_card_text_color'] %>;">
<h3 class="card-title"><%= image['image_short_description'] %></h3>
<%= image['image_description'] %></h3>
<div class="card-button-group">
<a href="<%= image['link_to_show'] %>" class="btn btn-secondary view" onclick="window.location.hash = '<%= image['link_to_show'] %>';CustomGalleryTheater();return false;">
<i class="fa fa-link" aria-hidden="true"></i>
</a>
<a href="<%= image['src'] %>" data-toggle="lightbox" data-custom_gallery="custom_gallery" class="btn btn-secondary preview" data-title="<%= image['alt_title'] %>" data-type="image">
<i class="fa fa-eye" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
<% end %>
</div>
</div>
<% elsif @layout_type==2 %>
<script type="text/javascript">
if (window.location.hash==''){
window.location.hash = '#page='+window.location.href.split(/\/|-/).slice(-1)[0].split('#')[0]
}
function set_custom_gallery_height(){
var h = $('.custom_gallery-thumb-container').height()+$('.custom_gallery-image.gal-active').height()+$('.custom_gallery-actions').height()+$('.theaterButton').height()+20
$('.show-custom_gallery-2.custom_gallery').css('height',h)
}
$(window).resize(function(){
set_custom_gallery_height()
})
</script>
<% end %>
<% OrbitHelper.render_css_in_head(["custom_theater.css"]) %>
<%= javascript_include_tag "jquery.touchSwipe.min" %>
<%= javascript_include_tag "custom_theater" %>
<% OrbitHelper.render_meta_tags([{"name" => "mobile-web-app-capable","content" => "yes"},{"name" => "apple-mobile-web-app-status-bar-style","content" => "black-translucent"}]) %>
<div id="custom_gallery-theater-stage">
<div class="<%= @layout_type==2 ? 'show-custom_gallery-2 ' : '' %>custom_gallery" style="margin-top: 2.4em;">
<div class="custom_gallery-loader">
<div class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
</div>
<div class="custom_gallery-actions">
<div class="custom_gallery-show-original custom_gallery-actions-btn">
<a title="<%= t('custom_gallery.show_original_image') %>"><i class="fa fa-image"></i></a>
</div>
<div class="custom_gallery-toggle-desc custom_gallery-actions-btn">
<i class="fa fa-comment"></i>
</div>
<div class="custom_gallery-theme-switch custom_gallery-actions-btn">
<i class="fa fa-circle"></i>
</div>
<div class="custom_gallery-close custom_gallery-actions-btn">
<i class="fa fa-times"></i>
</div>
</div>
<div class="image-container" id="image-container"></div>
<div class="custom_gallery-thumb-toggle custom_gallery-thumb-line">
<i class="fa fa-angle-double-up"></i>
</div>
<div class="custom_gallery-thumb-container">
<div class="custom_gallery-thumb-navs">
<div class="custom_gallery-thumb-prev custom_gallery-thumb-nav">
<i class="fa fa-arrow-circle-o-left"></i>
</div>
<div class="custom_gallery-thumb-next custom_gallery-thumb-nav">
<i class="fa fa-arrow-circle-o-right"></i>
</div>
</div>
<ul class="custom_gallery-thumb-wrap">
</ul>
</div>
<div class="custom_gallery-img-desc">
<div class="custom_gallery-img-desc-inner">
</div>
</div>
</div>
</div>
<script type="text/javascript">
if(typeof Modernizr == "undefined"){
var script = $("<script>");
script.attr("src","/assets/modernizr.js");
$("head").append(script);
}
var gt = new CustomGalleryTheater();
</script>