saurabh
/
announcement-test
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add display sub anncs feature. 

Add select carousel image layout feature.
This commit is contained in:
BoHung Chiu 2021-09-25 19:26:13 +08:00
parent d0f01780c1
commit d9d22aa397
17 changed files with 816 additions and 334 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/assets/images/bulletin/AAAAAA.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 182 B

42
app/controllers/admin/announcements_controller.rb
View File

@ -32,6 +32,41 @@ class Admin::AnnouncementsController < OrbitAdminController
@tags = @module_app.tags
@table_fields = [:status, :category, :title, :start_date, :end_date, "announcement.comment", :last_modified]
@current_user = current_user
if AnnouncementSetting.first.is_display_edit_only && !current_user.is_admin? && !current_user.is_manager?(@module_app)
current_user_is_sub_manager = !current_user.is_manager?(@module_app) && (current_user.is_sub_manager?(@module_app) || current_user.is_sub_manager_with_role?(@module_app)) rescue false
if current_user_is_sub_manager
@categories = current_user.approved_categories.select{|c| c.module_app_id == @module_app.id} rescue []
@filter_fields = filter_fields(@categories, @tags)
@bulletins = Bulletin.where(:create_user_id=>current_user.id,:is_preview.in=>[false,nil])
.order_by(sort)
.with_categories(filters("category"))
.with_tags(filters("tag"))
.with_status(filters("status"))
else
@bulletins = Bulletin.where(:uid=>nil)
@categories = @module_app.categories.enabled
@filter_fields = filter_fields(@categories, @tags)
end
else
@categories = @module_app.categories.enabled
@filter_fields = filter_fields(@categories, @tags)
@bulletins = Bulletin.where(:is_preview.in=>[false,nil])
.order_by(sort)
.with_categories(filters("category"))
.with_tags(filters("tag"))
.with_status(filters("status"))
end
@bulletins = search_data(@bulletins,[:title]).page(params[:page]).per(10)
if request.xhr?
render :partial => "index"
end
end
def get_all_anncs_without_subannc
Bulletin.remove_expired_status
@tags = @module_app.tags
@table_fields = [:category, :title, :start_date]
@current_user = current_user
if AnnouncementSetting.first.is_display_edit_only && !current_user.is_admin? && !current_user.is_manager?(@module_app)
current_user_is_sub_manager = !current_user.is_manager?(@module_app) && (current_user.is_sub_manager?(@module_app) || current_user.is_sub_manager_with_role?(@module_app)) rescue false
if current_user_is_sub_manager
@ -56,13 +91,14 @@ class Admin::AnnouncementsController < OrbitAdminController
.with_tags(filters("tag"))
.with_status(filters("status"))
end
@bulletins = @bulletins.where(:id.nin=>params[:subannc_ids]) if params[:subannc_ids]
@bulletins = search_data(@bulletins,[:title]).page(params[:page]).per(10)
if request.xhr?
render :partial => "index"
render :partial => "get_all_anncs_without_subannc"
else
render :layout => false
end
end
def feed
@table_feed_fields = ["announcement.feed_name",:tags , :category , "announcement.rssfeed", "announcement.jsonfeed"]
@feeds = BulletinFeed.all.asc(:created_at)

71
app/controllers/announcements_controller.rb
View File

@ -608,11 +608,49 @@ class AnnouncementsController < ApplicationController
pause_btn_title = (I18n.locale.to_s =="zh_tw") ? "暫停播放" : "pause"
prev_btn_title = (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev"
next_btn_title = (I18n.locale.to_s =="zh_tw") ? "下一張" : "next"
sub_anncs_text = ""
sub_annc_list = announcement.sub_annc_list
if announcement.enable_sub_annc && sub_annc_list.count != 0
params = OrbitHelper.params
page = OrbitHelper.page rescue Page.where(:url=>params[:url]).first
page_url = page.get_url rescue page.url
sub_anncs = announcement.get_sub_annc_list
display_sub_annc_date = announcement.display_sub_annc_date
sub_anncs_text = "<style type=\"text/css\">.dataTables_paginate {float: right;margin: 4px 0 0;}.dataTables_wrapper .dataTables_paginate a.paginate_button{display: inline;}</style>"
sub_anncs_text += "<div class=\"i-annc\"><table class=\"sub_anncs_table i-annc__table table table-striped\">
<thead><tr>
<th class=\"i-annc__th i-annc__th--title\">#{announcement.get_sub_annc_title_trans}</th>
#{display_sub_annc_date ? "<th class=\"i-annc__th i-annc__th--date\">#{I18n.t("announcement.table.date")}</th>" : ''}
</tr></thead>
<tbody>"
sub_anncs.each do |sub_annc|
sub_anncs_text += "<tr><td><a href=\"#{page_url}/#{sub_annc.to_param}\" title=\"#{sub_annc.title}\" target=\"_blank\">#{sub_annc.title}</a></td>#{(display_sub_annc_date ? ('<td class="i-annc__postdate">'+sub_annc.display_postdate+'</td>') : '')}</tr>"
end
sub_anncs_text += "</tbody></table></div>"
sub_anncs_text += '<script>
var DataTables_language = {};
DataTables_language["zh_tw"] = {"info":"本頁為第 _START_ 項至第 _END_ 項，共有 _TOTAL_ 項","infoEmpty":"本頁為第 0 至第 0 項，共有 0 項","infoFiltered":"(來自總共 _MAX_ 項中的符合項目)","infoPostFix":"","lengthMenu":"每頁顯示 _MENU_ 個項目","processing":"處理中...","search":"快速搜尋：","zeroRecords":"沒有找到符合的項目","paginate": {"first":"第一頁","previous":"上一頁","next":"下一頁","last":"最後一頁"},"decimal":"","thousands":","};
$(".sub_anncs_table").dataTable({"language":DataTables_language["'+I18n.locale.to_s+'"],"order":[],"orderClasses":false,"stripeClasses":["even","odd"],"pagingType":"simple"});
</script>'
end
carousel_data = {
"bulletin_carousel_images" => bulletin_carousel_images,
"resume_btn_title" => resume_btn_title,
"pause_btn_title" => pause_btn_title,
"prev_btn_title" => prev_btn_title,
"next_btn_title" => next_btn_title,
"carousel_display_style" => (bulletin_carousel_images.count == 0 ? 'display: none' : "width: #{announcement.carousel_image_width};margin: auto;"),
"carousel_count" => bulletin_carousel_images.count}
carousel_html = ""
if carousel_data["carousel_count"] != 0
carousel_image_type = announcement.carousel_image_type
ac = ActionController::Base.new()
carousel_html = ac.render_to_string(:partial=>'announcements/bulletin_carousels',:locals=>{:data=>carousel_data,:carousel_image_type=>carousel_image_type})
end
{
"tags" => tags,
"bulletin_files" => files,
"bulletin_links" => links,
"bulletin_carousel_images" => bulletin_carousel_images,
"data" => {
"title" => announcement.title,
"subtitle_ann" => subtitle_ann,
@ -624,12 +662,8 @@ class AnnouncementsController < ApplicationController
"img_description" => img_description,
"hide_class" => announcement.display_img? ? announcement.image_display_class : ' hide',
"alt_title" => desc,
"resume_btn_title" => resume_btn_title,
"pause_btn_title" => pause_btn_title,
"prev_btn_title" => prev_btn_title,
"next_btn_title" => next_btn_title,
"carousel_display_style" => (bulletin_carousel_images.count == 0 ? 'display: none' : "width: #{announcement.carousel_image_width};margin: auto;"),
"carousel_count" => bulletin_carousel_images.count
"carousel_html" => carousel_html,
"sub_anncs_text" => sub_anncs_text
},
"comments" => announcement.comments,
"show_comment_flag" => show_comment_flag,
@ -691,12 +725,23 @@ class AnnouncementsController < ApplicationController
pause_btn_title = (I18n.locale.to_s =="zh_tw") ? "暫停播放" : "pause"
prev_btn_title = (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev"
next_btn_title = (I18n.locale.to_s =="zh_tw") ? "下一張" : "next"
carousel_data = {
"bulletin_carousel_images" => bulletin_carousel_images,
"resume_btn_title" => resume_btn_title,
"pause_btn_title" => pause_btn_title,
"prev_btn_title" => prev_btn_title,
"next_btn_title" => next_btn_title,
"carousel_display_style" => (bulletin_carousel_images.count == 0 ? 'display: none' : "width: #{AnnouncementSetting.last.carousel_image_width};margin: auto;"),
"carousel_count" => bulletin_carousel_images.count}
carousel_html = ""
if carousel_data["carousel_count"] != 0
carousel_image_type = announcement["carousel_image_type"].to_i
carousel_html = render(:partial=>'bulletin_carousels',:locals=>{:data=>carousel_data,:carousel_image_type=>carousel_image_type})
end
{
"tags" => tags,
"bulletin_files" => files,
"bulletin_links" => links,
"bulletin_carousel_images" => bulletin_carousel_images,
"data" => {
"title" => announcement["title_translations"][locale],
"subtitle_ann" => subtitle_ann,
@ -708,12 +753,8 @@ class AnnouncementsController < ApplicationController
"img_description" => img_description,
"hide_class" => announcement["display_img"] ? '' : ' hide',
"alt_title" => desc,
"resume_btn_title" => resume_btn_title,
"pause_btn_title" => pause_btn_title,
"prev_btn_title" => prev_btn_title,
"next_btn_title" => next_btn_title,
"carousel_display_style" => (bulletin_carousel_images.count == 0 ? 'display: none' : "width: #{AnnouncementSetting.last.carousel_image_width};margin: auto;"),
"carousel_count" => bulletin_carousel_images.count
"carousel_html" => carousel_html,
"sub_anncs_text" => ""
},
"comments" => [],
"show_comment_flag" => false,

8
app/models/announcement_setting.rb
View File

@ -1,6 +1,8 @@
class AnnouncementSetting
include Mongoid::Document
include Mongoid::Timestamps
field :carousel_image_type, :type => Integer, :default => 0 # 0: carousel, 1: album
field :sub_annc_title_trans, :type => String, :default => "", :localize => true
field :carousel_image_width, type: String, :default => "75%"
field :top_limit, type: Integer, :default => 0
field :pro_enabled, type: Boolean, :default => false
@ -23,4 +25,10 @@ class AnnouncementSetting
def self.is_pro?
self.first.pro_enabled rescue false
end
def get_sub_annc_title_trans(locale=I18n.locale)
I18n.with_locale(locale) do
self.sub_annc_title_trans.blank? ? I18n.t("announcement.table.title") : self.sub_annc_title_trans
end
end
end

20
app/models/bulletin.rb
View File

@ -28,6 +28,7 @@ class Bulletin
end
field :is_edit, type: Boolean, default: false #use to check whether the preview record changed
field :copy_id
field :custom_carousel_image_type, :type => Integer, :default => 0 # 0: default, 1: carousel, 2: album
field :custom_carousel_image_width, type: String, default: ""
field :image_display_class, type: String, default: "full-size-img" #3 choices: full-size-img , pull-left , pull-right
field :add_to_calendar,type: Boolean,default: false
@ -69,6 +70,8 @@ class Bulletin
field :comment_role, :type => Array, :default => []
field :enable_sub_annc, :type => Boolean, :default => false
field :sub_annc_list, :type => Array, :default => []
field :custom_sub_annc_title_trans, :type => String, :default => "", :localize => true
field :display_sub_annc_date, :type => Boolean, :default => false
mount_uploader :image, ImageUploader
has_many :bulletin_links, :autosave => true, :dependent => :destroy
@ -239,8 +242,11 @@ class Bulletin
def hidden_text
I18n.t("announcement.status.hidden")
end
def carousel_image_type
(self.custom_carousel_image_type == 0 ? AnnouncementSetting.last.carousel_image_type : self.custom_carousel_image_type - 1) rescue 0
end
def carousel_image_width
(self.custom_carousel_image_width.blank? ? AnnouncementSetting.last.carousel_image_width : self.custom_carousel_image_width)
(self.custom_carousel_image_width.blank? ? AnnouncementSetting.last.carousel_image_width : self.custom_carousel_image_width) rescue "75%"
end
def self.agenda_events(agenda_start, agenda_end,read_more_url)
events = self.monthly_event(agenda_start, agenda_end).convert_front(read_more_url)
@ -260,4 +266,16 @@ class Bulletin
:end => re.deadline}
end
end
def get_sub_annc_title_trans(locale=I18n.locale)
I18n.with_locale(locale) do
self.custom_sub_annc_title_trans.blank? ? (AnnouncementSetting.first.get_sub_annc_title_trans(locale) rescue I18n.t("announcement.table.title")) : self.custom_sub_annc_title_trans
end
end
def get_sub_annc_list
sub_anncs = self.class.where(:id.in=>self.sub_annc_list).to_a
sub_anncs = sub_anncs.sort_by{|a| sub_annc_list.index(a.id.to_s)}
end
def display_postdate
self.postdate.present? ? self.postdate.strftime("%Y/%m/%d") : ""
end
end

219
app/views/admin/announcements/_form.html.erb
View File

@ -3,6 +3,28 @@
<%= stylesheet_link_tag "lib/fileupload" %>
<%= stylesheet_link_tag "lib/main-list" %>
<% end %>
<style type="text/css">
.icons-list-2 {
cursor: all-scroll;
}
#show_anncs .modal-body {
background-color: #fff;
padding: 0;
max-height: none;
height: 100%;
overflow: hidden;
}
#show_anncs iframe {
border: 0;
outline: none;
width: 100%;
height: 100%;
}
#show_anncs .modal {
width: 90%;
margin-left: -45%;
}
</style>
<style type="text/css">
.reach_limit{
background: #a90c0c;
@ -19,6 +41,13 @@
.main-forms fieldset .input-area .controls .input-prepend a:hover{
color: #fff;
}
.image_group{
border: 0.2em solid #333;
padding-top: 0;
}
.image_group:last-child {
margin-bottom: 1em;
}
</style>
<% content_for :page_specific_javascript do %>
<%= javascript_include_tag "lib/bootstrap-fileupload" %>
@ -53,6 +82,7 @@
<li><a href="#tag" data-toggle="tab"><%= t(:tags) %></a></li>
<li><a href="#imageupload" data-toggle="tab"><%= t('announcement.image') %></a></li>
<li><a href="#carousel_image_upload" data-toggle="tab" title="<%= t('announcement.carousel_image_title') %>"><%= t('announcement.carousel_image') %></a></li>
<li><a href="#relation_announcements_list" data-toggle="tab" title="<%= t('announcement.relation_announcements_list') %>"><%= t('announcement.relation_announcements_list') %></a></li>
<li><a href="#mail-group" data-toggle="tab"><%= t('announcement.email_reminder')%></a></li>
</ul>
<!-- Module -->
@ -271,7 +301,7 @@
<% if @bulletin.image.file %>
<%= image_tag @bulletin.image %>
<% else %>
<img src="http://www.placehold.it/50x50/EFEFEF/AAAAAA" />
<img src="/assets/bulletin/AAAAAA" />
<% end %>
</div>
<div class="fileupload-preview fileupload-exists thumbnail pull-left"></div>
@ -303,6 +333,13 @@
</div>
<!-- Images Module -->
<div class="tab-pane fade" id="carousel_image_upload">
<div class="control-group">
<%= f.label :custom_carousel_image_type, t("announcement.default_carousel_image_type"), :class => "control-label muted" %>
<div class="controls">
<% carousel_image_types = ["default","carousel","album"] %>
<%= f.select :custom_carousel_image_type, options_for_select(carousel_image_types.map.with_index{|type,i| [t("announcement.carousel_image_types.#{type}"),i]}.to_h,:selected => f.object.custom_carousel_image_type) %>
</div>
</div>
<div class="control-group">
<label class="control-label muted" for="carousel_image_width"><%= t("announcement.carousel_image_width") %></label>
<div class="controls">
@ -327,20 +364,87 @@
<a id="add_carousel_image" class="trigger btn btn-small btn-primary"><i class="icons-plus"></i> <%= t(:add) %></a>
</p>
</div>
<!-- relation_announcements_list -->
<div class="tab-pane fade" id="relation_announcements_list">
<!-- Enable relations-->
<div class="control-group">
<label class="control-label muted" for="enable_sub_annc"><%= t("announcement.enable") %></label>
<div class="controls">
<label class="checkbox inline">
<%= f.check_box :enable_sub_annc, {:id=>"enable_sub_annc"} %>
<%= t('announcement.enable')%>
</label>
</div>
</div>
<div id="sub_annc_block" class="<%= 'hide' if !(f.object.enable_sub_annc) %>">
<div class="control-group">
<%= f.label :sub_annc_title_trans, t("announcement.sub_annc_title_trans"), :class => "control-label muted" %>
<div class="controls">
<div class="input-append">
<div class="tab-content">
<% @site_in_use_locales.each_with_index do |locale, i| %>
<div class="tab-pane fade <%= ( i == 0 ) ? "active in" : '' %>" id="sub_annc_title_trans_<%= locale %>">
<%= f.fields_for :custom_sub_annc_title_trans_translations,f.object do |f| %>
<%= f.text_field locale, :value => (f.object.custom_sub_annc_title_trans_translations[locale] rescue nil), :placeholder=>t("announcement.sub_annc_title_trans_hint"),:id=> ((i == 0) ? "sub_annc_title_trans_input" : "") %>
<% end %>
</div>
<% end %>
</div>
<div class="btn-group" data-toggle="buttons-radio">
<% @site_in_use_locales.each_with_index do |locale, i| %>
<a class="btn <%= ( i == 0 ) ? "active" : '' %>" href="#sub_annc_title_trans_<%= locale %>" data-toggle="tab"><%= t(locale.to_s) %></a>
<% end %>
</div>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label muted"><%= t("announcement.display_sub_annc_date") %></label>
<div class="controls">
<%= f.check_box :display_sub_annc_date,:id=>"display_sub_annc_date" %>
</div>
</div>
<div class="control-group">
<label class="control-label muted"><%= t("announcement.relation_announcements_list") %></label>
<div class="controls">
<table class="table table-bordered">
<thead>
<tr>
<th></th>
<th></th>
<th id="sub_annc_title_trans_text"><%=f.object.get_sub_annc_title_trans%></th>
<th id="annc_date_text" class="<%='hide' if !f.object.display_sub_annc_date %> annc_date"><%=t("announcement.table.date")%></th>
</tr>
</thead>
<tbody id="relation_announcements_list_target">
<% if f.object.sub_annc_list.count != 0 %>
<% f.object.get_sub_annc_list.each do |annc| %>
<tr>
<td><span class="brand"><i class="icons-list-2"></i></span></td>
<td><button class="remove_tr btn btn-danger" type="button">X</button><%= hidden_field_tag "#{f.object_name}[sub_annc_list][]", annc.id %></td>
<td><%=annc.title%></td>
<td class="<%='hide' if !f.object.display_sub_annc_date %> annc_date"><%=annc.display_postdate %></td>
</tr>
<% end %>
<% end %>
</tbody>
</table>
<div class="clearfix"></div>
<button id="add_sub_annc" class="btn btn-primary" type="button"><%= t(:add) %></button>
</div>
</div>
</div>
</div>
<!-- Mail Group Module -->
<div class="tab-pane fade" id="mail-group">
<!-- Mail Group -->
<div class="control-group">
<label class="control-label muted"><%= t("announcement.email_to") %></label>
<label class="control-label muted" for="remind-check"><%= t("announcement.email_to") %></label>
<div class="controls">
<label class="checkbox inline">
<%= check_box_tag('bulletin[email_sent]', '1', (!@bulletin.email_sent.blank? ? true : false), :id=>'remind-check') %><%= t('announcement.activate_email_reminder')%>
<%= f.check_box :email_sent, {:id=>'remind-check'} %>
<%= t('announcement.activate_email_reminder')%>
</label>
<div class="content-box">
<%= render partial: 'admin/member_selects/email_selection_box', locals: {field: 'bulletin[email_member_ids][]', email_members: @bulletin.email_members} %>
</div>
@ -355,7 +459,6 @@
</div>
</div>
</div>
<div class="content-box">
<div class="control-group">
<label class="control-label muted"><%= t("announcement.email_sentdate") %></label>
@ -364,7 +467,6 @@
</div>
</div>
</div>
<% if (@bulletin.email.is_sent rescue false) %>
<div class="content-box">
<div class="control-group">
@ -375,9 +477,7 @@
</div>
</div>
<% end %>
</div>
</div>
<!-- Language Tabs -->
@ -503,7 +603,20 @@
<%= button_tag t("preview"), id: "button_for_preview", name: "commit", class: 'btn', type: :button %>
<%= link_to t('cancel'), admin_announcements_path, :class=>"btn" %>
</div>
<span id='show_anncs'>
<div class="modal hide fade in banner-anncs" id="">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3><%= t("announcement.select_relation_announcements") %></h3>
</div>
<div class="modal-body">
<iframe id="anncs-iframe" src=""></iframe>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal"><%= t("announcement.confirm") %></a>
</div>
</div>
</span>
<span id='show_preview'>
<div class="modal hide fade in banner-preview" id="">
<div class="modal-header">
@ -538,6 +651,47 @@
}
</style>
<script>
var display_sub_annc_date = <%=f.object.display_sub_annc_date%>;
function calc_relation_table_width(){
window.relation_announcements_list_width = [];
$( "#relation_announcements_list_target" ).siblings('thead').find("th").each(function(j,th){
window.relation_announcements_list_width.push($(th).outerWidth(true));
})
}
$(window).resize(function(){
calc_relation_table_width();
})
$("#display_sub_annc_date").click(function(){
display_sub_annc_date = !display_sub_annc_date;
if(display_sub_annc_date){
$(".annc_date").removeClass("hide");
}else{
$(".annc_date").addClass("hide");
}
calc_relation_table_width();
})
$('a[href="#relation_announcements_list"]').on('shown.bs.tab',calc_relation_table_width);
function sub_anncs_sort(){
calc_relation_table_width();
$( "#relation_announcements_list_target" ).sortable({
revert: true,
axis: "y",
handle: ".brand",
start: function(event, ui){
var item = ui.item;
var target = $(event.target);
item.css("width",target.width());
item.find("td").each(function(i,td){
$(td).width(window.relation_announcements_list_width[i]);
})
},
stop: function(event, ui) {
var item = ui.item;
item.css("width","");
item.find("td").css("width","");
}
});
}
$("#bulletin_display_img").click(function(){$("#image_display_setting").toggleClass("hide")})
function Appendzero(obj)
{
@ -561,6 +715,29 @@
})
}
$(function() {
sub_anncs_sort();
$("#add_sub_annc").click(function(){
var all_sub_anncs = $("#relation_announcements_list_target input[name='<%=f.object_name%>[sub_annc_list][]']").map(function(){return $(this).val()}).toArray();
window.tmp_sub_anncs = {};
$("#anncs-iframe").attr("src","<%=admin_announcement_get_all_anncs_without_subannc_path%>?" + $.param({"subannc_ids": all_sub_anncs}));
$('#show_anncs .modal').modal();
$('#show_anncs .modal').height(function() {
return $(window).height() * 0.7;
});
$('#show_anncs .modal').on('hidden.bs.modal', function () {
Object.keys(window.tmp_sub_anncs).forEach(function(annc_id){
var annc_data = window.tmp_sub_anncs[annc_id];
var annc_row = "<tr><td><span class=\"brand\"><i class=\"icons-list-2\"></i></span></td><td><button class=\"remove_tr btn btn-danger\" type=\"button\">X</button><input type=\"hidden\" name=\"<%=f.object_name%>[sub_annc_list][]\" value=\""+annc_id+"\"></td><td>"+annc_data.title+"</td><td class=\""+(display_sub_annc_date ? '' : 'hide')+" annc_date\">"+annc_data.date+"</td></tr>"
$("#relation_announcements_list_target").append(annc_row);
})
window.tmp_sub_anncs = {};
sub_anncs_sort();
});
})
$(document).on("click",".remove_tr",function(){
if(window.confirm("<%=t('announcement.are_you_sure_you_want_to_delete_relation')%>"))
$(this).parents("tr").eq(0).remove();
})
$('#bulletin_open_comment').change(function(){
$(this).prop('checked') ? $('div[data-for="open_comment"]').removeClass('hide') : $('div[data-for="open_comment"]').addClass('hide')
})
@ -622,6 +799,16 @@
$(this).children('.tab-pane').eq(on).addClass('in active').siblings().removeClass('in active');
});
});
$(document).on('click', '.image-form-remove', function(){
if($(this).find(".remove_existing_record").length != 0){
if(confirm("<%= I18n.t(:sure?)%>")){
$(this).find('.should_destroy').attr('value', 1);
$(this).parents('.image_group').hide();
}
}else{
$(this).parents('.image_group').remove();
}
});
$(document).on('click', '.fileupload-remove', function(){
if($(this).find(".delete_image").length != 0){
$(this).parents('.image_group').remove();
@ -639,7 +826,10 @@
$(this).parents('.start-line').hide();
}
});
$("#enable_sub_annc").click(function(){
$("#sub_annc_block").toggleClass("hide");
calc_relation_table_width();
})
$('#remind-check').prop('checked') ? '':$('.content-box').addClass('hide')
$('#remind-check').on('change', function() {
$(this).prop('checked') ? $('.content-box').removeClass('hide'):$('.content-box').addClass('hide')
@ -716,6 +906,9 @@
$("#external_link_box").hide();
}
});
$("#sub_annc_title_trans_input").on("input",function(){
$("#sub_annc_title_trans_text").html($(this).val());
})
$("#bulletin_is_external_link").trigger('change');
add_click_for_privacy()
});

30
app/views/admin/announcements/_form_image.html.erb
View File

@ -1,5 +1,18 @@
<!-- Images Upload -->
<div class="image_group">
<label class="checkbox inline btn btn-danger image-form-remove">
<% if f.object.new_record? %>
<span class="delete_form" title="<%= t(:delete_) %>">
X
</span>
<% else %>
<span class="remove_existing_record" title="<%= t(:remove) %>">
<%= f.hidden_field :id %>
<%= f.hidden_field :_destroy, :value => nil, :class => 'should_destroy' %>
X
</span>
<% end %>
</label>
<div class="control-group">
<label class="control-label muted"><%= t(:image) %></label>
<div class="controls">
@ -8,7 +21,7 @@
<% if form_image.file.file %>
<%= image_tag form_image.file %>
<% else %>
<img src="http://www.placehold.it/50x50/EFEFEF/AAAAAA" />
<img src="/assets/bulletin/AAAAAA" />
<% end %>
</div>
<div class="fileupload-preview fileupload-exists thumbnail pull-left"></div>
@ -18,21 +31,6 @@
<%= f.file_field :file %>
</span>
<a href="#" class="btn fileupload-exists" data-dismiss="fileupload"><%= t(:cancel) %></a>
<div class="controls" data-toggle="buttons-checkbox">
<label class="checkbox inline btn btn-danger fileupload-remove">
<% if form_image.new_record? %>
<span class="delete_file delete_image add-on" title="<%= t(:delete_) %>">
<%= t(:delete_) %>
</span>
<% else %>
<span class="remove_existing_record add-on" title="<%= t(:remove) %>">
<%= f.hidden_field :id %>
<%= f.hidden_field :_destroy, :value => nil, :class => 'should_destroy' %>
<%= t(:remove) %>
</span>
<% end %>
</label>
</div>
</div>
</div>
</div>

52
app/views/admin/announcements/_get_all_anncs_without_subannc.html.erb Normal file
View File

@ -0,0 +1,52 @@
<table class="table main-list">
<thead>
<tr class="sort-header">
<th style="width: 1em;"><%=t("announcement.select")%></th>
<% @table_fields.each do |f| %>
<%= thead(f) %>
<% end %>
</tr>
</thead>
<tbody>
<% @bulletins.each do |b| %>
<tr class="annc_row">
<td><input type="checkbox" name="ids" value="<%=b.id.to_s%>"></td>
<td>
<%= b.category.title rescue "" %>
<% if (b.category.disable rescue false) %>
<span class='label'><%= t(:disabled) %></span>
<% end %>
</td>
<td>
<span class="annc_title">
<%= b.title.to_s.html_safe %>
</span>
<% if b.expired? %>
<span class='label'><%= t(:expired) %></span>
<% end %>
<% if b.reapproval %>
<span class='label'><%= t("announcement.reapproval") + " " + t(:pending) %></span>
<% end %>
<% if b.rejected %>
<span class='label'><%= t(:rejected) %> : <%= b.rejection_reason rescue "" %></span>
<% end %>
<% if !b.approved? && !b.rejected %>
<span class='label'><%= t(:pending) %></span>
<% end %>
</td>
<td>
<span class="annc_date">
<%= b.display_postdate %>
</span>
</td>
</tr>
<% end %>
</tbody>
</table>
<%=
content_tag :div, class: "bottomnav_block clearfix" do
content_tag(:div, paginate(@bulletins), class: "pagination pagination-centered")
end
%>

53
app/views/admin/announcements/get_all_anncs_without_subannc.html.erb Normal file
View File

@ -0,0 +1,53 @@
<!DOCTYPE html>
<html>
<head>
<title><%= current_site.title %> | <%= t('dashboard_') %></title>
<script type="text/javascript">
var currentLocaleForCKEDITOR = "<%= (I18n.locale.to_s == "zh_tw" ? (session[:zh_cn] ? 'zh-cn' : 'zh' ) : "en" ) %>";
</script>
<%= render 'shared/google_font' %>
<%= stylesheet_link_tag "back_end", media: "all" %>
<%= stylesheet_link_tag params[:controller] if Rails.application.assets.find_asset "#{params[:controller]}.css" %>
<%= stylesheet_link_tag params[:org_controller] if Rails.application.assets.find_asset "#{params[:org_controller]}.css" %>
<%= yield :page_specific_css %>
<%= render 'shared/ie_html5_fix' %>
<%= javascript_include_tag "back_end" %>
<%= javascript_include_tag params[:controller] if Rails.application.assets.find_asset "#{params[:controller]}.js" %>
<%= javascript_include_tag params[:org_controller] if Rails.application.assets.find_asset "#{params[:org_controller]}.js" %>
<%= yield :page_specific_javascript %>
</head>
<body>
<section id="main-wrap">
<div class="wrap-inner">
<%= render_filter @filter_fields, "index_table" %>
<% if @module_app.present?%>
<div id="filter" class="topnav clearfix">
<%= yield :right_nav %>
</div>
<%end%>
<script>
$("#filter-input").bind("input", function() {queueSearch();});
$("#module-search-form").submit(function(){queueSearch(); return false; });
</script>
<span id="index_table">
<%= render 'get_all_anncs_without_subannc'%>
</span>
<%= render 'layouts/delete_modal', delete_options: @delete_options %>
</div>
</section>
<%= javascript_include_tag "lib/pageslide.js" %>
<script>
$(document).on("click","#index_table table input[name=\"ids\"]",function(){
var val = $(this).val();
if($(this).is(":checked")){
var annc_row = $(this).parents(".annc_row");
var annc_title = annc_row.find(".annc_title").html();
var annc_date = annc_row.find(".annc_date").text();
window.parent.tmp_sub_anncs[val] = {"title": annc_title, "date": annc_date};
}else{
window.parent.tmp_sub_anncs.delete(val);
}
})
</script>
</body>
</html>

28
app/views/admin/announcements/settings.html.erb
View File

@ -129,6 +129,34 @@
<div id="notification"><%= t("announcement.click_on_submit") %></div>
<%= form_for @setting, url: (@setting.new_record? ? admin_announcement_createsettings_path : admin_announcement_updatesettings_path), html: {class: "form-horizontal main-forms"} do |f| %>
<div class="input-area">
<div class="control-group">
<%= f.label :sub_annc_title_trans, t("announcement.default_sub_annc_title_trans"), :class => "control-label muted" %>
<div class="controls">
<div class="input-append">
<div class="tab-content">
<% @site_in_use_locales.each_with_index do |locale, i| %>
<div class="tab-pane fade <%= ( i == 0 ) ? "active in" : '' %>" id="sub_annc_title_trans_<%= locale %>">
<%= f.fields_for :sub_annc_title_trans_translations,f.object do |f| %>
<%= f.text_field locale, :value => f.object.get_sub_annc_title_trans(locale), :placeholder=>t("announcement.default_sub_annc_title_trans") %>
<% end %>
</div>
<% end %>
</div>
<div class="btn-group" data-toggle="buttons-radio">
<% @site_in_use_locales.each_with_index do |locale, i| %>
<a class="btn <%= ( i == 0 ) ? "active" : '' %>" href="#sub_annc_title_trans_<%= locale %>" data-toggle="tab"><%= t(locale.to_s) %></a>
<% end %>
</div>
</div>
</div>
</div>
<div class="control-group">
<%= f.label :carousel_image_type, t("announcement.default_carousel_image_type"), :class => "control-label muted" %>
<div class="controls">
<% carousel_image_types = ["carousel","album"] %>
<%= f.select :carousel_image_type, options_for_select(carousel_image_types.map.with_index{|type,i| [t("announcement.carousel_image_types.#{type}"),i]}.to_h,:selected => f.object.carousel_image_type) %>
</div>
</div>
<div class="control-group">
<%= f.label :carousel_image_width, t("announcement.default_carousel_image_width"), :class => "control-label muted" %>
<div class="controls">

1
app/views/announcements/_bulletin_carousels.html.erb Normal file
View File

@ -0,0 +1 @@
<%= render(:partial=>"announcements/bulletin_carousels#{carousel_image_type}", :locals=>{:data=>data}) %>

283
app/views/announcements/_bulletin_carousels0.html.erb Normal file
View File

@ -0,0 +1,283 @@
<style type="text/css">
strong.carousel__description {
color: white;
}
.carousel_images{
<%=data["carousel_display_style"]%>
}
@media (max-width: 767px){
.carousel_images{
width: 100%;
}
}
</style>
<div class="carousel_images">
<div class="w-ba-banner ba-banner-widget-1">
<div class="w-ba-banner__wrap cycle-slideshow"
data-cycle-slides=".bulletin_carousel_slide"
data-cycle-log="false"
data-cycle-auto-height="0"
data-cycle-speed="300"
data-cycle-timeout="5000"
data-cycle-fx="fade"
data-pager-active-class="active-slide"
data-cycle-swipe=true
data-cycle-swipe-fx="scrollHorz"
>
<%data["bulletin_carousel_images"].each do |bulletin_carousel_image|%>
<div class="w-ba-banner__slide bulletin_carousel_slide"
data-cycle-title="<%=bulletin_carousel_image["description_text"]%>"
>
<img class="w-ba-banner__image banner-responsive" src="<%=bulletin_carousel_image["src"]%>" alt="<%=bulletin_carousel_image["description_text"]%>">
<div class="ad-overlay w-ad-banner__overlay bulletin_carousel__overlay">
<p><strong class="carousel__description"><%=bulletin_carousel_image["description"]%></strong></p>
</div>
<div class="transitionfade"></div>
</div>
<% end %>
</div>
<ul class="controlplay"><a class="resume-slide" title = "<%=data["resume_btn_title"]%>"><i></i></a><a class="pause-slide" title = "<%=data["pause_btn_title"]%>"><i></i></a></ul>
<ul class="button-mid">
<i class="fa fa-angle-left prev-button" aria-hidden="true" title = "<%=data["prev_btn_title"]%>"></i>
<i class="fa fa-angle-right next-button" aria-hidden="true" title = "<%=data["next_btn_title"]%>"></i>
</ul>
</div>
<div style="position: relative;">
<h4><span class="active_slide">1</span>/<%=data["carousel_count"]%></h4>
<ul class="carousel_images_slide w-annc__list row list-unstyled">
<%data["bulletin_carousel_images"].each do |bulletin_carousel_image|%>
<li class="carousel_img_item col-sm-3">
<div class="carousel_img-wrap">
<img class="carousel_img" src="<%=bulletin_carousel_image["src"]%>" alt="<%=bulletin_carousel_image["description_text"]%>">
</div>
</li>
<%end%>
</ul>
<ul class="button-mid">
<i class="fa fa-angle-left prev-button prev_img" aria-hidden="true" title="<%=data["prev_btn_title"]%>"></i>
<i class="fa fa-angle-right next-button next_img" aria-hidden="true" title="<%=data["next_btn_title"]%>"></i>
</ul>
</div>
</div>
<style type="text/css">
.carousel_img_item{
display: none;
float: left;
}
.controlplay {
position: absolute;
right: 1em;
top: 3%;
z-index: 200;
}
.controlplay a {
display: inline-block;
margin-right: 0.25em;
cursor: pointer;
padding: 5px 10px;
border: 1px solid rgba(255,255,255,0.5);
background: rgba(0,0,0,0.2);
}
.controlplay a i {
font-family: FontAwesome;
position: relative;
font-size: 1rem;
line-height: 1;
color: #FFF;
vertical-align: middle;
font-style: unset;
}
.controlplay .resume-slide i::before {
content: "\f04b";
}
.controlplay .pause-slide i::before {
content: "\f04c";
}
ul.button-mid .prev-button {
transition: 0.4s;
position: relative;
float: left;
left: 0.5rem;
width: 2.5rem;
height: 2.5rem;
font-size: 2.2rem;
color: #ffffff;
background: rgba(0,0,0,0.2);
text-align: center;
line-height: 2.5rem;
top: 50%;
position: absolute;
transform: translateY(-50%);
z-index: 999;
}
ul.button-mid .next-button {
float: right;
transition: 0.4s;
position: relative;
right: 0.5rem;
width: 2.5rem;
height: 2.5rem;
font-size: 2.2rem;
color: #fff;
background: rgba(0,0,0,0.2);
text-align: center;
line-height: 2.5rem;
top: 50%;
position: absolute;
transform: translateY(-50%);
z-index: 999;
}
.carousel_images_slide{
padding: 3em;
}
.carousel_img_item img{
cursor: pointer;
}
@media (max-width: 479px){
.carousel_img_item:nth-child(-n+1){
display: block;
width: 100%;
float: left;
}
.carousel_img_item{
width: 100%;
}
}
@media (min-width: 480px){
.carousel_img_item:nth-child(-n+2){
display: block;
width: 50%;
float: left;
}
.carousel_img_item{
width: 50%;
}
}
@media (min-width: 768px){
.carousel_img_item:nth-child(-n+3){
display: block;
width: 33%;
float: left;
}
.carousel_img_item{
width: 33%;
}
}
@media (min-width: 1280px){
.carousel_img_item:nth-child(-n+4){
display: block;
width: 25%;
float: left;
}
.carousel_img_item{
width: 25%;
}
}
</style>
<script>
(function($) {
$('.pause-slide').click(function(){
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('pause');
});
$('.resume-slide').click(function(){
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('resume');
});
$('.next-button').off('click').on('click',function(){
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("next");
})
$('.prev-button').off('click').on('click',function(){
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("prev");
})
window.active_slide = 0;
$('.prev_img').off('click').on('click',function(){
var carousel_images_slide = $('.carousel_images_slide');
var carousel_images_slide_first_child = carousel_images_slide.find(">li").eq(active_slide);
if(carousel_images_slide_first_child.length > 0){
var content_size = Math.floor((carousel_images_slide.outerWidth() - Number.parseInt(carousel_images_slide.css('font-size')) * 3) / carousel_images_slide_first_child.outerWidth(true));
content_size = Math.max(content_size,1);
if(carousel_images_slide.find(">li").length > content_size && active_slide > 0){
active_slide -= content_size;
carousel_images_slide.find(">li").css("display","none");
for(var i = active_slide; i < active_slide + content_size;i++){
carousel_images_slide.find(">li").eq(i).css("display","block");
}
}
}
})
$('.next_img').off('click').on('click',function(){
var carousel_images_slide = $('.carousel_images_slide');
var carousel_images_slide_first_child = carousel_images_slide.find(">li").eq(active_slide);
if(carousel_images_slide_first_child.length > 0){
var content_size = Math.floor((carousel_images_slide.outerWidth() - Number.parseInt(carousel_images_slide.css('font-size')) * 3) / carousel_images_slide_first_child.outerWidth(true));
content_size = Math.max(content_size,1);
var li_length = carousel_images_slide.find(">li").length;
if(li_length > content_size){
active_slide += content_size;
active_slide = Math.min(active_slide,li_length - 1);
carousel_images_slide.find(">li").css("display","none");
for(var i = active_slide; i < active_slide + content_size;i++){
carousel_images_slide.find(">li").eq(i).css("display","block");
}
}
}
})
$(".carousel_img_item img").off("click").on("click",function(){
$(".carousel_images .cycle-slideshow").cycle($(this).index(".carousel_img_item img"));
})
$(document).ready(function(){
$(".carousel_images .cycle-slideshow").cycle('pause');
var carousel_image_block_width = $('.carousel_images').width();
var heights = $(".bulletin_carousel_slide").map(function(i,v){
return $(v).height() * carousel_image_block_width / $(v).width();
})
var max_height = Math.max.apply(null,heights);
$(".bulletin_carousel_slide").each(function(i,v){
$(v).height(max_height);
})
$(".carousel_images .cycle-slideshow").cycle('resume');
$('.cycle-slideshow').on('cycle-after',function(){
$(".active_slide").text($('.bulletin_carousel_slide.cycle-slide-active').index());
})
})
$(window).on("load",function(){
$(".carousel_images .cycle-slideshow").cycle('pause');
var carousel_image_block_width = $('.carousel_images').width();
var heights = $(".bulletin_carousel_slide").map(function(i,v){
return $(v).height() * carousel_image_block_width / $(v).width();
})
var max_height = Math.max.apply(null,heights);
$(".bulletin_carousel_slide").each(function(i,v){
$(v).height(max_height);
})
$(".carousel_images .cycle-slideshow").cycle('resume');
})
$(window).resize(function(){
var carousel_images_slide = $('.carousel_images_slide');
var carousel_images_slide_first_child = carousel_images_slide.find(">li").eq(active_slide);
if(carousel_images_slide_first_child.length > 0){
var content_size = Math.floor((carousel_images_slide.outerWidth() - Number.parseInt(carousel_images_slide.css('font-size')) * 3) / carousel_images_slide_first_child.outerWidth(true));
content_size = Math.max(content_size,1);
carousel_images_slide.find(">li").css("display","none");
var active_count = carousel_images_slide.find(">li").length - active_slide;
if(active_count < content_size){
active_slide -= (content_size - active_count);
}
active_slide = Math.max(active_slide,0);
console.log(content_size)
for(var i = active_slide; i < active_slide + content_size;i++){
carousel_images_slide.find(">li").eq(i).css("display","block");
}
}
var carousel_image_block_width = $('.carousel_images').width();
$(".bulletin_carousel_slide").css("height",'');
var heights = $(".bulletin_carousel_slide").map(function(i,v){
return $(v).height() * carousel_image_block_width / $(v).width();
})
var max_height = Math.max.apply(null,heights);
$(".bulletin_carousel_slide").each(function(i,v){
$(v).height(max_height);
})
})
}(jQuery));
</script>

13
app/views/announcements/_bulletin_carousels1.html.erb Normal file
View File

@ -0,0 +1,13 @@
<style>
.carousel_image p{
text-align: center;
}
</style>
<div class="carousel_images">
<%data["bulletin_carousel_images"].each do |bulletin_carousel_image|%>
<div class="carousel_image col-sm-6">
<a href="<%=bulletin_carousel_image["src"]%>" title="<%=bulletin_carousel_image["description_text"]%>"><img src="<%=bulletin_carousel_image["src"]%>" alt="<%=bulletin_carousel_image["description_text"]%>"></a>
<p><strong class="carousel__description"><%=bulletin_carousel_image["description"]%></strong></p>
</div>
<% end %>
</div>

16
config/locales/en.yml
View File

@ -3,6 +3,22 @@ en:
feed: Feed
import: Import
announcement:
carousel_image_types:
default: Default
carousel: Carousel
album: Album
default_carousel_image_type: Default carousel image type
carousel_image_type: Carousel image type
display_sub_annc_date: "Display relation announcements date"
are_you_sure_you_want_to_delete_relation: "Are you sure you want to delete relation?"
confirm: Confirm
select: Select
select_relation_announcements: "Select Relation Announcements"
sub_annc_title_trans_hint: "If blank, translations will be default value."
sub_annc_title_trans: "Title translations of relation announcements"
default_sub_annc_title_trans: "Default title translations of relation announcements"
relation_announcements_list: "Relation Announcements List"
enable: Enable
custom_carousel_image_width_hint: "If blank, width will be default value."
carousel_image_width: Carousel Image Width
default_carousel_image_width: Default Carousel Image Width

17
config/locales/zh_tw.yml
View File

@ -2,7 +2,24 @@ zh_tw:
restful_actions:
feed: 供給
import: 匯入
get_all_anncs_without_subannc: "選擇相關公告"
announcement:
carousel_image_types:
default: 預設
carousel: 輪播
album: 相本排版
default_carousel_image_type: 預設輪播樣式
carousel_image_type: 預設輪播樣式
display_sub_annc_date: "顯示相關公告日期"
are_you_sure_you_want_to_delete_relation: "你確定要移除關聯嗎?"
confirm: 確認
select: 選取
select_relation_announcements: "選擇相關公告"
sub_annc_title_trans_hint: "未填寫，則使用預設翻譯"
sub_annc_title_trans: "相關公告標題翻譯"
default_sub_annc_title_trans: "預設相關公告標題翻譯"
relation_announcements_list: "相關公告列表"
enable: 啟用
custom_carousel_image_width_hint: "未填寫，則使用預設寬度"
carousel_image_width: 輪播圖片寬度
default_carousel_image_width: 預設輪播圖片寬度

1
config/routes.rb
View File

@ -8,6 +8,7 @@ Rails.application.routes.draw do
scope "(:locale)", locale: Regexp.new(locales.join("|")) do
namespace :admin do
get "announcement/get_all_anncs_without_subannc", to: "announcements#get_all_anncs_without_subannc"
post 'announcement/get_preview_action', to: 'announcements#get_preview_action'
post 'announcement/preview', to: 'announcements#preview'
post 'announcement/createfeed', to: 'announcements#createfeed'

280
modules/announcement/show.html.erb
View File

@ -11,17 +11,6 @@
.s-annc__sub-img.pull-left {
margin-right: 2em;
}
strong.carousel__description {
color: white;
}
.carousel_images{
{{carousel_display_style}}
}
@media (max-width: 767px){
.carousel_images{
width: 100%;
}
}
</style>
<article class="s-annc show-announcement">
<h1 class="s-annc__show-title">{{title}}</h1>
@ -51,7 +40,7 @@
<div class="s-annc__subtitle">{{subtitle_ann}}</div>
<div class="s-annc__post-body">{{body}}</div>
</section>
<div id="sub_anncs_list">{{sub_anncs_text}}</div>
<ul class="s-annc__related-wrap list-unstyled no-print">
<li class="s-annc__related-file">
<i class="fa fa-fw fa-paperclip"></i>
@ -69,169 +58,8 @@
</ul>
</article>
<div class="carousel_images">
<div class="w-ba-banner ba-banner-widget-1">
<div class="w-ba-banner__wrap cycle-slideshow"
data-list="bulletin_carousel_images"
data-level="0"
data-cycle-slides=".bulletin_carousel_slide"
data-cycle-log="false"
data-cycle-auto-height="0"
data-cycle-speed="300"
data-cycle-timeout="5000"
data-cycle-fx="fade"
data-pager-active-class="active-slide"
data-cycle-swipe=true
data-cycle-swipe-fx="scrollHorz"
>
<div class="w-ba-banner__slide bulletin_carousel_slide"
data-cycle-title="{{description_text}}"
>
<img class="w-ba-banner__image banner-responsive" src="{{src}}" alt="{{description_text}}">
<div class="ad-overlay w-ad-banner__overlay bulletin_carousel__overlay">
<p><strong class="carousel__description">{{description}}</strong></p>
</div>
<div class="transitionfade"></div>
</div>
</div>
<ul class="controlplay"><a class="resume-slide" title = "{{resume_btn_title}}"><i></i></a><a class="pause-slide" title = "{{pause_btn_title}}"><i></i></a></ul>
<ul class="button-mid">
<i class="fa fa-angle-left prev-button" aria-hidden="true" title = "{{prev_btn_title}}"></i>
<i class="fa fa-angle-right next-button" aria-hidden="true" title = "{{next_btn_title}}"></i>
</ul>
</div>
<div style="position: relative;">
<h4><span class="active_slide">1</span>/{{carousel_count}}</h4>
<ul class="carousel_images_slide w-annc__list row list-unstyled" data-level="0" data-list="bulletin_carousel_images">
<li class="carousel_img_item col-sm-3">
<div class="carousel_img-wrap">
<img class="carousel_img" src="{{src}}" alt="{{description_text}}">
</div>
</li>
</ul>
<ul class="button-mid">
<i class="fa fa-angle-left prev-button prev_img" aria-hidden="true" title = "{{prev_btn_title}}"></i>
<i class="fa fa-angle-right next-button next_img" aria-hidden="true" title = "{{next_btn_title}}"></i>
</ul>
</div>
</div>
{{carousel_html}}
{{link_to_edit}}
<style type="text/css">
.carousel_img_item{
display: none;
float: left;
}
.controlplay {
position: absolute;
right: 1em;
top: 3%;
z-index: 200;
}
.controlplay a {
display: inline-block;
margin-right: 0.25em;
cursor: pointer;
padding: 5px 10px;
border: 1px solid rgba(255,255,255,0.5);
background: rgba(0,0,0,0.2);
}
.controlplay a i {
font-family: FontAwesome;
position: relative;
font-size: 1rem;
line-height: 1;
color: #FFF;
vertical-align: middle;
font-style: unset;
}
.controlplay .resume-slide i::before {
content: "\f04b";
}
.controlplay .pause-slide i::before {
content: "\f04c";
}
ul.button-mid .prev-button {
transition: 0.4s;
position: relative;
float: left;
left: 0.5rem;
width: 2.5rem;
height: 2.5rem;
font-size: 2.2rem;
color: #ffffff;
background: rgba(0,0,0,0.2);
text-align: center;
line-height: 2.5rem;
top: 50%;
position: absolute;
transform: translateY(-50%);
z-index: 999;
}
ul.button-mid .next-button {
float: right;
transition: 0.4s;
position: relative;
right: 0.5rem;
width: 2.5rem;
height: 2.5rem;
font-size: 2.2rem;
color: #fff;
background: rgba(0,0,0,0.2);
text-align: center;
line-height: 2.5rem;
top: 50%;
position: absolute;
transform: translateY(-50%);
z-index: 999;
}
.carousel_images_slide{
padding: 3em;
}
.carousel_img_item img{
cursor: pointer;
}
@media (max-width: 479px){
.carousel_img_item:nth-child(-n+1){
display: block;
width: 100%;
float: left;
}
.carousel_img_item{
width: 100%;
}
}
@media (min-width: 480px){
.carousel_img_item:nth-child(-n+2){
display: block;
width: 50%;
float: left;
}
.carousel_img_item{
width: 50%;
}
}
@media (min-width: 768px){
.carousel_img_item:nth-child(-n+3){
display: block;
width: 33%;
float: left;
}
.carousel_img_item{
width: 33%;
}
}
@media (min-width: 1280px){
.carousel_img_item:nth-child(-n+4){
display: block;
width: 25%;
float: left;
}
.carousel_img_item{
width: 25%;
}
}
</style>
<script>
(function($) {
@ -250,110 +78,6 @@
// Links
hideEmptyEl($('.s-annc__link-title'), $('.s-annc__related-link'));
$("img[src='']").remove();
$('.pause-slide').click(function(){
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('pause');
});
$('.resume-slide').click(function(){
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('resume');
});
$('.next-button').off('click').on('click',function(){
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("next");
})
$('.prev-button').off('click').on('click',function(){
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("prev");
})
window.active_slide = 0;
$('.prev_img').off('click').on('click',function(){
var carousel_images_slide = $('.carousel_images_slide');
var carousel_images_slide_first_child = carousel_images_slide.find(">li").eq(active_slide);
if(carousel_images_slide_first_child.length > 0){
var content_size = Math.floor((carousel_images_slide.outerWidth() - Number.parseInt(carousel_images_slide.css('font-size')) * 3) / carousel_images_slide_first_child.outerWidth(true));
content_size = Math.max(content_size,1);
if(carousel_images_slide.find(">li").length > content_size && active_slide > 0){
active_slide -= content_size;
carousel_images_slide.find(">li").css("display","none");
for(var i = active_slide; i < active_slide + content_size;i++){
carousel_images_slide.find(">li").eq(i).css("display","block");
}
}
}
})
$('.next_img').off('click').on('click',function(){
var carousel_images_slide = $('.carousel_images_slide');
var carousel_images_slide_first_child = carousel_images_slide.find(">li").eq(active_slide);
if(carousel_images_slide_first_child.length > 0){
var content_size = Math.floor((carousel_images_slide.outerWidth() - Number.parseInt(carousel_images_slide.css('font-size')) * 3) / carousel_images_slide_first_child.outerWidth(true));
content_size = Math.max(content_size,1);
var li_length = carousel_images_slide.find(">li").length;
if(li_length > content_size){
active_slide += content_size;
active_slide = Math.min(active_slide,li_length - 1);
carousel_images_slide.find(">li").css("display","none");
for(var i = active_slide; i < active_slide + content_size;i++){
carousel_images_slide.find(">li").eq(i).css("display","block");
}
}
}
})
$(".carousel_img_item img").off("click").on("click",function(){
$(".carousel_images .cycle-slideshow").cycle($(this).index(".carousel_img_item img"));
})
$(document).ready(function(){
$(".carousel_images .cycle-slideshow").cycle('pause');
var carousel_image_block_width = $('.carousel_images').width();
var heights = $(".bulletin_carousel_slide").map(function(i,v){
return $(v).height() * carousel_image_block_width / $(v).width();
})
var max_height = Math.max.apply(null,heights);
$(".bulletin_carousel_slide").each(function(i,v){
$(v).height(max_height);
})
$(".carousel_images .cycle-slideshow").cycle('resume');
$('.cycle-slideshow').on('cycle-after',function(){
$(".active_slide").text($('.bulletin_carousel_slide.cycle-slide-active').index());
})
})
$(window).on("load",function(){
$(".carousel_images .cycle-slideshow").cycle('pause');
var carousel_image_block_width = $('.carousel_images').width();
var heights = $(".bulletin_carousel_slide").map(function(i,v){
return $(v).height() * carousel_image_block_width / $(v).width();
})
var max_height = Math.max.apply(null,heights);
$(".bulletin_carousel_slide").each(function(i,v){
$(v).height(max_height);
})
$(".carousel_images .cycle-slideshow").cycle('resume');
})
$(window).resize(function(){
var carousel_images_slide = $('.carousel_images_slide');
var carousel_images_slide_first_child = carousel_images_slide.find(">li").eq(active_slide);
if(carousel_images_slide_first_child.length > 0){
var content_size = Math.floor((carousel_images_slide.outerWidth() - Number.parseInt(carousel_images_slide.css('font-size')) * 3) / carousel_images_slide_first_child.outerWidth(true));
content_size = Math.max(content_size,1);
carousel_images_slide.find(">li").css("display","none");
var active_count = carousel_images_slide.find(">li").length - active_slide;
if(active_count < content_size){
active_slide -= (content_size - active_count);
}
active_slide = Math.max(active_slide,0);
console.log(content_size)
for(var i = active_slide; i < active_slide + content_size;i++){
carousel_images_slide.find(">li").eq(i).css("display","block");
}
}
var carousel_image_block_width = $('.carousel_images').width();
$(".bulletin_carousel_slide").css("height",'');
var heights = $(".bulletin_carousel_slide").map(function(i,v){
return $(v).height() * carousel_image_block_width / $(v).width();
})
var max_height = Math.max.apply(null,heights);
$(".bulletin_carousel_slide").each(function(i,v){
$(v).height(max_height);
})
})
}(jQuery));
</script>