chiu
/
event_news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add carousel images and event end date.

This commit is contained in:
BoHung Chiu 2021-08-09 10:45:06 +08:00
parent 21958fe1d3
commit f7039d6d1c
11 changed files with 524 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
app/controllers/event_news_controller.rb
View File

@ -22,6 +22,10 @@ class EventNewsController < ApplicationController
target = a.is_external_link ? "_blank" : "_self"
doc = Nokogiri::HTML(a.title)
title = doc.text.empty? ? 'no content' : doc.text
event_time = (a.event_date.strftime('%Y-%m-%d %H:%M') rescue "")
if a.event_end_date
event_time = "<span class=\"start_date\">#{event_time.split(" ")[0]}</span> ~ <span class=\"end_date\">#{a.event_end_date.strftime('%Y-%m-%d')}</span>"
end
{
"department" => author,
"event_news_links" => links,
@ -37,7 +41,7 @@ class EventNewsController < ApplicationController
"subtitle" => a.subtitle,
"statuses" => statuses,
"category" => (a.category.title rescue ""),
"postdate" => a.event_date,
"postdate" => event_time,
"author" => author,
"is_top" => (a.is_top? ? 1 : 0),
"link_to_show" => link_to_show+"\" title=\"#{title}\"",
@ -541,11 +545,21 @@ class EventNewsController < ApplicationController
subtitle_ann = event_news.subtitle if event_news.display_subtitle?
img_src = (event_news.image.thumb.url || "/assets/event_news-default.jpg") if event_news.display_img?
img_description = event_news.image_description if (event_news.image_description.present?) && (event_news.display_img?)
event_carousel_images = event_news.event_carousel_images.map{|image| {"src"=>image.file.url,"description"=>image.description.to_s,"description_text"=>image.description_text }}
resume_btn_title = (I18n.locale.to_s =="zh_tw") ? "繼續播放" : "resume"
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"
event_time = (event_news.event_date.strftime('%Y-%m-%d %H:%M') rescue "")
if event_news.event_end_date
event_time = "<span class=\"start_date\">#{event_time.split(" ")[0]}</span> ~ <span class=\"end_date\">#{event_news.event_end_date.strftime('%Y-%m-%d')}</span>"
end
{
"tags" => tags,
"event_news_files" => files,
"event_news_links" => links,
"event_carousel_images" => event_carousel_images,
"data" => {
"speaker-head" => t('event_news.speaker'),
"host-head" => t('event_news.host'),
@ -556,13 +570,19 @@ class EventNewsController < ApplicationController
"title" => event_news.title,
"subtitle_ann" => subtitle_ann,
"update_user" => update_user,
"updated_at" => (event_news.event_date.strftime('%Y-%m-%d %H:%M') rescue ""),
"updated_at" => event_time,
"body" =>event_news.text,
"image" => event_news.image.url,
"img_src" => img_src,
"img_description" => img_description,
"hide_class" => event_news.display_img? ? event_news.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" => (event_carousel_images.count == 0 ? 'display: none' : "width: #{event_news.carousel_image_width};margin: auto;"),
"carousel_count" => event_carousel_images.count,
"place_text" => (event_news.place.present? rescue false) ? "#{I18n.t("event_news.place")}: #{event_news.place}" : ""
},
"impressionist" => (event_news.is_preview ? nil : event_news),
@ -602,7 +622,11 @@ class EventNewsController < ApplicationController
update_user = event_news["author"]
desc = event_news["image_description_translations"][locale] rescue ""
desc = (desc.nil? || desc == "" ? "EventNews image" : desc)
img_description = nil
img_description = event_news["image_description_translations"][I18n.locale] if event_news['display_img']
img_src = nil
img_src = (event_news['image']['original'] || "/assets/event_news-default.jpg") if event_news['display_img']
subtitle_ann = event_news['subtitle_ann']
request = OrbitHelper.request
if event_news["subtitle_translations"].present?
meta_desc = event_news["subtitle_translations"][locale] != "" ? event_news["subtitle_translations"][locale] : event_news["text_translations"][locale][0..200] rescue ""
@ -612,13 +636,28 @@ class EventNewsController < ApplicationController
OrbitHelper.render_meta_tags([{"property" => "og:title", "content" => event_news["title_translations"][locale]},{"property" => "og:site_name", "content" => Site.first.title},{"property" => "og:url", "content" => request.original_url.split("?").first},{"property" => "og:description", "content" => meta_desc},{"property" => "og:image", "content" => event_news["image"]["original"]},{"property" => "og:type", "content" => "Article"}])
datetime = DateTime.parse(event_news["event_date"].to_s) rescue ""
event_date = DateTime.parse(event_news["event_date"].to_s) rescue nil
event_end_date = DateTime.parse(event_news["event_end_date"].to_s) rescue nil
event_time = (event_date.strftime('%Y-%m-%d %H:%M') rescue "")
if event_end_date
event_time = "<span class=\"start_date\">#{event_time.split(" ")[0]}</span> ~ <span class=\"end_date\">#{event_end_date.strftime('%Y-%m-%d')}</span>"
end
event_carousel_images = Array(event_news["event_carousel_images"])
resume_btn_title = (I18n.locale.to_s =="zh_tw") ? "繼續播放" : "resume"
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"
{
"tags" => tags,
"event_news_files" => files,
"event_news_links" => links,
"event_carousel_images" => event_carousel_images,
"data" => {
"title" => event_news["title_translations"][locale],
"subtitle_ann" => subtitle_ann,
"update_user" => update_user,
"updated_at" => event_time,
"body" => event_news["text_translations"][locale],
"speaker-head" => t('event_news.speaker'),
"host-head" => t('event_news.host'),
"notes-head" => t('event_news.notes'),
@ -626,12 +665,17 @@ class EventNewsController < ApplicationController
"speaker" => (event_news["speaker_translations"][locale].to_s rescue ""),
"host" => (event_news["host_translations"][locale].to_s rescue ""),
"notes" => (event_news["notes_translations"][locale].to_s rescue ""),
"title" => event_news["title_translations"][locale],
"update_user" => update_user,
"updated_at" => (datetime.strftime('%Y-%m-%d %H:%M') rescue ""),
"body" => event_news["text_translations"][locale],
"image" => event_news["image"]["original"],
"img_src" => img_src,
"img_description" => img_description,
"hide_class" => event_news["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" => (event_carousel_images.count == 0 ? 'display: none' : "width: #{EventNewsSetting.last.carousel_image_width};margin: auto;"),
"carousel_count" => event_carousel_images.count,
"place_text" => (event_news["place"].present? rescue false) ? "#{I18n.t("event_news.place")}: #{event_news["place"]}" : ""
},
"impressionist" => nil,
@ -687,6 +731,10 @@ class EventNewsController < ApplicationController
target = a.is_external_link ? "_blank" : "_self"
doc = Nokogiri::HTML(a.title)
title = doc.text.empty? ? 'no content' : doc.text
event_time = (a.event_date.strftime('%Y-%m-%d %H:%M') rescue "")
if a.event_end_date
event_time = "<span class=\"start_date\">#{event_time.split(" ")[0]}</span> ~ <span class=\"end_date\">#{a.event_end_date.strftime('%Y-%m-%d')}</span>"
end
{
"department" => author,
"event_news_links" => links,
@ -702,7 +750,7 @@ class EventNewsController < ApplicationController
"subtitle" => a.subtitle,
"statuses" => statuses,
"category" => (a.category.title rescue ""),
"postdate" => a.event_date,
"postdate" => event_time,
"author" => author,
"is_top" => (a.is_top? ? 1 : 0),
"link_to_show" => link_to_show+"\" title=\"#{title}\"",

2
app/controllers/event_news_feeds_controller.rb
View File

@ -125,6 +125,7 @@ class EventNewsFeedsController < ApplicationController
a["text_translations"]["en"] = smart_convertor(anns.text_translations["en"]) if !anns.text_translations["en"].blank?
a["text_translations"]["zh_tw"] = smart_convertor(anns.text_translations["zh_tw"]) if !anns.text_translations["zh_tw"].blank?
a["event_date"] = anns.event_date
a["event_end_date"] = anns.event_end_date
a["postdate"] = anns.event_date#anns.postdate
a["image_description_translations"] = anns.image_description_translations
a["image"] = {}
@ -138,6 +139,7 @@ class EventNewsFeedsController < ApplicationController
a["params"] = anns.to_param
a["event_news_links"] = []
a["event_news_files"] = []
a["event_carousel_images"] = anns.event_carousel_images.map{|image| {"src"=>"#{request.base_url}" + image.file.url,"description"=>image.description.to_s,"description_text"=>image.description_text }}
anns.tags.each do |tag|
if !tag_ids.include?(tag.id.to_s)
tag_ids << tag.id.to_s

15
app/models/event_carousel_image.rb Normal file
View File

@ -0,0 +1,15 @@
# encoding: utf-8
class EventCarouselImage
include Mongoid::Document
include Mongoid::Timestamps
mount_uploader :file, AssetUploader
field :description, localize: true
belongs_to :event_news
def description_text
Nokogiri::HTML(self.description.to_s).css("body").text() rescue ""
end
end

39
app/models/event_news.rb
View File

@ -15,6 +15,7 @@ class EventNews
before_destroy do
EventNewsCache.all.destroy
end
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
field :calendar_start_date, :type => DateTime
@ -33,6 +34,7 @@ class EventNews
field :update_user_id
field :public, :type => Boolean, :default => true
field :event_date , :type => DateTime, :default => Time.now
field :event_end_date , :type => DateTime, :default => Time.now
field :postdate , :type => DateTime, :default => Time.now
field :deadline , :type => DateTime
field :rss2_sn
@ -59,10 +61,10 @@ class EventNews
has_many :event_news_links, :autosave => true, :dependent => :destroy
has_many :event_news_files, :autosave => true, :dependent => :destroy
has_many :event_carousel_images, :autosave => true, :dependent => :destroy
accepts_nested_attributes_for :event_news_files, :allow_destroy => true
accepts_nested_attributes_for :event_news_links, :allow_destroy => true
accepts_nested_attributes_for :event_carousel_images, :allow_destroy => true
before_destroy :destroy_email
scope :can_display_and_sorted, ->{where(:is_hidden=>false,:is_preview => false).any_of({:postdate.lte=>Time.now, :deadline.gte=>Time.now},{:postdate.lte=>Time.now, :deadline=>nil}).order(is_top: :desc,event_date: :desc,id: :desc)}
@ -171,4 +173,37 @@ class EventNews
def display_img?
self.display_img rescue false
end
def statuses
statuses = []
statuses << top_text if is_top?
statuses << hot_text if is_hot?
statuses << hidden_text if is_hidden?
statuses
end
def statuses_with_classname
statuses = []
statuses << {"name" => top_text, "classname" => "top"} if is_top?
statuses << {"name" => hot_text, "classname" => "hot"} if is_hot?
statuses << {"name" => hidden_text, "classname" => "hidden"} if is_hidden?
statuses
end
def status_for_table
status = ""
status << "<span class='label label-success'>#{top_text}</span> " if self.is_top
status << "<span class='label label-important'>#{hot_text}</span> " if self.is_hot
status << "<span class='label'>#{hidden_text}</span>"if self.is_hidden
status.html_safe
end
def top_text
I18n.t("announcement.status.top")
end
def hot_text
I18n.t("announcement.status.hot")
end
def hidden_text
I18n.t("announcement.status.hidden")
end
def carousel_image_width
(self.custom_carousel_image_width.blank? ? AnnouncementSetting.last.carousel_image_width : self.custom_carousel_image_width)
end
end

2
app/models/event_news_setting.rb
View File

@ -1,7 +1,7 @@
class EventNewsSetting
include Mongoid::Document
include Mongoid::Timestamps
field :carousel_image_width, type: String, :default => "75%"
field :top_limit, type: Integer, :default => 0
field :pro_enabled, type: Boolean, :default => false
field :approvers, type: Array, :default => []

54
app/views/admin/event_news/_form.html.erb
View File

@ -46,6 +46,7 @@
<% end %>
<li><a href="#tag" data-toggle="tab"><%= t(:tags) %></a></li>
<li><a href="#imageupload" data-toggle="tab"><%= t('event_news.image') %></a></li>
<li><a href="#carousel_image_upload" data-toggle="tab" title="<%= t('event_news.carousel_image_title') %>"><%= t('event_news.carousel_image') %></a></li>
<li><a href="#mail-group" data-toggle="tab"><%= t('event_news.email_reminder')%></a></li>
</ul>
<!-- Module -->
@ -69,6 +70,12 @@
<%= f.datetime_picker :event_date, :no_label => true, :new_record => @event_news.new_record?, :data=>{"picker-type" => "range", "range" => "start"} %>
</div>
</div>
<div class="control-group">
<label class="control-label muted"><%= t("event_news.event_end_date") %></label>
<div class="controls">
<%= f.datetime_picker :event_end_date, :no_label => true, :new_record => @event_news.new_record?, :data=>{"picker-type" => "range", "range" => "start"} %>
</div>
</div>
<div class="control-group">
<label class="control-label muted"><%= t("event_news.start_date") %></label>
<div class="controls">
@ -116,12 +123,12 @@
<!-- Image display setting -->
<% image_display_class_relation = {"full_width"=>"full-size-img","up_left_corner"=>"pull-left","up_right_corner"=>"pull-right"} %>
<div class="control-group <%='hide' if !f.object.display_img %>" id="image_display_setting">
<%= f.label :image_display_class, t("announcement.cover_image_display_setting"), :class => "control-label muted" %>
<%= f.label :image_display_class, t("event_news.cover_image_display_setting"), :class => "control-label muted" %>
<div class="controls">
<% image_display_class_relation.each.with_index do |(key,value),i| %>
<label>
<%= radio_button_tag "#{f.object_name}[image_display_class]", value , (f.object.image_display_class == value) %>
<%= t("announcement.#{key}") %>
<%= t("event_news.#{key}") %>
</label>
<% end %>
</div>
@ -268,6 +275,33 @@
</div>
<!-- Images Module -->
<div class="tab-pane fade" id="carousel_image_upload">
<div class="control-group">
<label class="control-label muted" for="carousel_image_width"><%= t("event_news.carousel_image_width") %></label>
<div class="controls">
<%= f.text_field :custom_carousel_image_width, :placeholder => t("event_news.custom_carousel_image_width_hint") %>
</div>
</div>
<% if (!f.object.event_carousel_images.blank? rescue false) %>
<div class="exist">
<% f.object.event_carousel_images.each_with_index do |event_carousel_image, i| %>
<%= f.fields_for :event_carousel_images, event_carousel_image do |f| %>
<%= render :partial => 'form_image', :object => event_carousel_image, :locals => {:f => f, :i => i} %>
<% end %>
<% end %>
<hr>
</div>
<% end %>
<!-- Add -->
<div class="add-target">
</div>
<p class="add-btn controls">
<%= hidden_field_tag 'bulletin_carousel_image_count', f.object.event_carousel_images.count %>
<a id="add_carousel_image" class="trigger btn btn-small btn-primary"><i class="icons-plus"></i> <%= t(:add) %></a>
</p>
</div>
</div>
<!-- Mail Group Module -->
<div class="tab-pane fade" id="mail-group">
@ -546,6 +580,22 @@
});
formTip();
});
$(document).on('click', '#add_carousel_image', function(){
var new_id = $(this).prev().attr('value');
var old_id = new RegExp("new_event_carousel_images", "g");
var on = $('.language-nav li.active').index();
var le = $(this).parent('.add-btn').prev('.add-target').children('.start-line').length;
$(this).prev().attr('value', parseInt(new_id) + 1);
$(this).parent().siblings('.add-target').append(("<%= escape_javascript(add_attribute 'form_image', f, :event_carousel_images) %>").replace(old_id, new_id));
$(this).parent('.add-btn').prev('.add-target').children('.start-line').eq(le).children('.input-append').find('.tab-content').each(function() {
$(this).children('.tab-pane').eq(on).addClass('in active').siblings().removeClass('in active');
});
});
$(document).on('click', '.fileupload-remove', function(){
if($(this).find(".delete_image").length != 0){
$(this).parents('.image_group').remove();
}
});
$(document).on('click', '.delete_link', function(){
$(this).parents('.input-prepend').remove();
});

49
app/views/admin/event_news/_form_image.html.erb Normal file
View File

@ -0,0 +1,49 @@
<!-- Images Upload -->
<div class="image_group">
<div class="control-group">
<label class="control-label muted"><%= t(:image) %></label>
<div class="controls">
<div class="fileupload fileupload-new clearfix <%= 'fileupload-edit' if form_image.file.present? %>" data-provides="fileupload">
<div class="fileupload-new thumbnail pull-left">
<% if form_image.file.file %>
<%= image_tag form_image.file %>
<% else %>
<img src="http://www.placehold.it/50x50/EFEFEF/AAAAAA" />
<% end %>
</div>
<div class="fileupload-preview fileupload-exists thumbnail pull-left"></div>
<span class="btn btn-file">
<span class="fileupload-new"><%= t(:select_image) %></span>
<span class="fileupload-exists"><%= t(:change) %></span>
<%= 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>
<% @site_in_use_locales.each do |locale| %>
<%= f.fields_for :description_translations do |f| %>
<div class="control-group">
<label class="control-label muted" for="image_description_<%= locale.to_s %>"><%= t(:description) + " (#{t(locale.to_s)})" %></label>
<div class="controls">
<%= f.text_field locale, value: (form_image.description_translations[locale.to_s] rescue nil) %>
</div>
</div>
<% end %>
<% end %>
</div>

6
app/views/admin/event_news/settings.html.erb
View File

@ -127,6 +127,12 @@
<div id="notification"><%= t("event_news.click_on_submit") %></div>
<%= form_for @setting, url: (@setting.new_record? ? admin_event_news_createsettings_path : admin_event_news_updatesettings_path), html: {class: "form-horizontal main-forms"} do |f| %>
<div class="input-area">
<div class="control-group">
<%= f.label :carousel_image_width, t("event_news.default_carousel_image_width"), :class => "control-label muted" %>
<div class="controls">
<%= f.text_field :carousel_image_width %>
</div>
</div>
<div class="control-group">
<%= f.label :only_manager_can_edit_status, t("event_news.only_manager_can_edit_status"), :class => "control-label muted" %>
<div class="controls">

6
config/locales/en.yml
View File

@ -2,6 +2,9 @@ en:
module_name:
event_news: Event News
event_news:
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
place: Place
cover_image_display_setting: Cover Image display setting
full_width: Full width
@ -24,6 +27,7 @@ en:
speaker: Speaker
host: Host
event_date: Event Date
event_end_date: Event End Date
start_date: Start date
end_date: End date
add_to_calendar: Add to calendar
@ -37,6 +41,8 @@ en:
'yes': 'Yes'
'no': 'No'
image: Cover Image
carousel_image: Carousel Image
carousel_image_title: Carousel Image(display at the bottom of show page)
picture_showing_size: Picture Showing Size
orignal_size: Original Size
small_size: Small Size

6
config/locales/zh_tw.yml
View File

@ -2,6 +2,9 @@ zh_tw:
module_name:
event_news: 活動公告
event_news:
custom_carousel_image_width_hint: "未填寫，則使用預設寬度"
carousel_image_width: 輪播圖片寬度
default_carousel_image_width: 預設輪播圖片寬度
place: 地點
cover_image_display_setting: 封面圖片顯示設定
full_width: 滿版呈現
@ -24,6 +27,7 @@ zh_tw:
speaker: 演講者
host: 主持人
event_date: 事件日期
event_end_date: 事件結束日期
start_date: 公告日期
end_date: 下架日期
add_to_calendar: 加入行事曆
@ -37,6 +41,8 @@ zh_tw:
'yes': 是
'no': 否
image: 封面圖片
carousel_image: 輪播圖片
carousel_image_title: 輪播圖片(在show頁面底部顯示)
picture_showing_size: 圖片顯示大小
orignal_size: 原圖大小
small_size: 小張縮圖

295
modules/event_news/show.html.erb
View File

@ -1,3 +1,143 @@
<style type="text/css">
.full-size-img img {
width: 100%;
}
.full-size-img {
width: 100%;
}
.s-annc__sub-img.pull-right {
margin-left: 2em;
}
.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>
<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>
<article class="s-annc show-annc">
<h1 class="s-annc__show-title">{{title}}</h1>
@ -31,7 +171,7 @@
</ul>
<section class="s-annc__post-wrap">
<div class="s-annc__sub-img pull-left {{hide_class}}">
<div class="s-annc__sub-img {{hide_class}}">
<img src="{{img_src}}"></img>
<span class="s-annc__img_description">{{img_description}}</span>
</div>
@ -59,9 +199,53 @@
</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="event_carousel_images"
data-level="0"
data-cycle-slides=".event_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 event_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 event_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="event_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>
{{link_to_edit}}
<script>
(function($) {
@ -80,6 +264,109 @@
// 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 = $(".event_carousel_slide").map(function(i,v){
return $(v).height() * carousel_image_block_width / $(v).width();
})
var max_height = Math.max.apply(null,heights);
$(".event_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($('.event_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 = $(".event_carousel_slide").map(function(i,v){
return $(v).height() * carousel_image_block_width / $(v).width();
})
var max_height = Math.max.apply(null,heights);
$(".event_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();
$(".event_carousel_slide").css("height",'');
var heights = $(".event_carousel_slide").map(function(i,v){
return $(v).height() * carousel_image_block_width / $(v).width();
})
var max_height = Math.max.apply(null,heights);
$(".event_carousel_slide").each(function(i,v){
$(v).height(max_height);
})
})
}(jQuery));
</script>