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

fix some error

This commit is contained in:
chiu 2021-09-06 13:44:20 +08:00
parent cb51768c5a
commit 687dcb8f8c
5 changed files with 125 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
app/assets/javascripts/event_news_calendar_widget2.js
View File

@ -1,4 +1,4 @@
var CalendarModuleMonth2 = function(date,dom,subpart,url,index_flag){ var EventCalendarModuleMonth2 = function(date,dom,subpart,url,index_flag){
_this = this; _this = this;
var events = {} var events = {}
var template = dom.find(".month_template"), var template = dom.find(".month_template"),
@ -16,7 +16,7 @@
lastDay = new Date(Date.UTC(year,month+1,0)), lastDay = new Date(Date.UTC(year,month+1,0)),
today = date.getDate(), today = date.getDate(),
last_inserted_date = 1, last_inserted_date = 1,
monthDom = $("<div data-year='"+year+"' data-month='"+month+"'></div>"), monthDom = $("<div class=\"height100\" data-year='"+year+"' data-month='"+month+"'></div>"),
eventHTML = dom.find('div.calendar-events')[0], eventHTML = dom.find('div.calendar-events')[0],
event_template = dom.find('div.calendar-events .event').prop('outerHTML'), event_template = dom.find('div.calendar-events .event').prop('outerHTML'),
prevMonthFunc, prevMonthFunc,
@ -24,7 +24,7 @@
toggle_data, toggle_data,
hover_step=10, hover_step=10,
hover_step_max=10, hover_step_max=10,
hover_max_height=19.2, hover_max_height=13,
toggling=false, toggling=false,
switching=false, switching=false,
tp1, tp1,
@ -101,28 +101,28 @@
} }
$(window).resize(function(){ $(window).resize(function(){
var window_w = $(window).width() var window_w = $(window).width()
$('.widget-calendar-2 div.calendar-events').each(function(){ var this_w = dom.width()
var this_w = $(this).parents('.widget-calendar-2').width() var event_doc = dom.find('.calendar-events');
if (this_w>=728 && window_w>=768){ if (this_w>=728 && window_w>=768){
if (!$(this).hasClass('width-50')){ if (!event_doc.hasClass('width-50')){
$(this).removeClass('width-100') event_doc.removeClass('width-100')
$(this).addClass('width-50') event_doc.addClass('width-50')
$(this).css('width','50%') event_doc.css('width','50%')
$(this).parents('div[data-module="calendar"]').find('div').eq(0).css('width','50%') event_doc.parents('div.w-calendar').find('div').eq(0).css('width','50%')
}
}else{
if (!$(this).hasClass('width-100')){
$(this).addClass('width-100')
$(this).removeClass('width-50')
$(this).css('width','100%')
$(this).parents('div[data-module="calendar"]').find('div').eq(0).css('width','100%')
}
} }
}else{
if (!event_doc.hasClass('width-100')){
event_doc.addClass('width-100')
event_doc.removeClass('width-50')
event_doc.css('width','100%')
event_doc.parents('div.w-calendar').find('div').eq(0).css('width','100%')
}
}
})
}) })
var show_event = function(date,ele){ var show_event = function(date,ele){
var event_div = $(ele).parents('div[data-module="calendar"]').find('div.calendar-events') var event_div = $(ele).parents('div.w-calendar').find('div.calendar-events')
$(ele).parents('.w-calendar').find('td.shown').removeClass('shown') $(ele).parents('.w-calendar').find('td.shown').removeClass('shown')
$(ele).addClass('shown') $(ele).addClass('shown')
function set_event(date,active_flag){ function set_event(date,active_flag){
@ -260,63 +260,64 @@
$('.ui-dialog button').blur(); $('.ui-dialog button').blur();
}) })
function event_hover(){ function event_hover(){
if (!$(this).hasClass('active')){ var event_doc = $(this).parents('.event').eq(0);
tp1 = $(this).parents('.calendar-events').eq(0).find('.event.active .event-containers') if (!event_doc.hasClass('active')){
tp2 = $(this).find('.event-containers') tp1 = event_doc.parents('.calendar-events').eq(0).find('.event.active .event-containers');
tp2 = event_doc.find('.event-containers');
if (!toggling){ if (!toggling){
tp2.css('height','0') tp2.css('height','0');
tp2.css('min-height','0') tp2.css('min-height','0');
hover_step = hover_step_max hover_step = hover_step_max;
}else{ }else{
hover_step = hover_step_max - hover_step hover_step = hover_step_max - hover_step;
} }
$(this).addClass('active') event_doc.addClass('active');
function toggle_height(){ function toggle_height(){
tp1.css('height',(hover_step*hover_max_height/hover_step_max)+'em') tp1.css('height',(hover_step*hover_max_height/hover_step_max)+'em');
tp2.css('height',(hover_max_height-hover_step*hover_max_height/20)+'em') tp2.css('height',(hover_max_height-hover_step*hover_max_height/hover_step_max)+'em');
hover_step = hover_step-1; hover_step = hover_step-1;
if (hover_step>=0){ if (hover_step>=0){
setTimeout(toggle_height,50) setTimeout(toggle_height,50);
}else{ }else{
tp1.css('min-height','') tp1.css('min-height','');
tp2.css('min-height','') tp2.css('min-height','');
tp1.css('height','') tp1.css('height','');
tp2.css('height','') tp2.css('height','');
toggling = false toggling = false;
} }
} }
if (!toggling){ if (!toggling){
setTimeout(toggle_height,50) setTimeout(toggle_height,50);
} }
tp1.css('height',tp1.height()) tp1.css('height',tp1.height());
tp1.css('min-height','0') tp1.css('min-height','0');
tp1.parents('.event').removeClass('active') tp1.parents('.event').removeClass('active');
toggling = true toggling = true;
} }
} }
event_div.find('.event').hover(event_hover) event_div.find('.event .event-header').hover(event_hover);
event_div.find('.event').click(event_hover) event_div.find('.event .event-header').click(event_hover);
$(ele).parents('div[data-module="calendar"]').css('display','flex') $(ele).parents('div.w-calendar').css('display','flex');
if ($(ele).parents('div[data-module="calendar"]').width()>=728 && $(window).width()>=768){ if ($(ele).parents('div.w-calendar').width()>=728 && $(window).width()>=768){
event_div.css('width','50%') event_div.css('width','50%')
event_div.addClass('width-50') event_div.addClass('width-50')
event_div.removeClass('width-100') event_div.removeClass('width-100')
$(ele).parents('div[data-module="calendar"]').find('div').eq(0).css('width','50%') $(ele).parents('div.w-calendar').find('div').eq(0).css('width','50%')
}else{ }else{
event_div.css('width','100%') event_div.css('width','100%')
event_div.addClass('width-100') event_div.addClass('width-100')
event_div.removeClass('width-50') event_div.removeClass('width-50')
$(ele).parents('div[data-module="calendar"]').find('div').eq(0).css('width','100%') $(ele).parents('div.w-calendar').find('div').eq(0).css('width','100%')
} }
event_div.show() event_div.show()
} }
var hide_event = function(ele){ var hide_event = function(ele){
$(ele).parents('.w-calendar').find('td.shown').removeClass('shown') $(ele).parents('.w-calendar').find('td.shown').removeClass('shown')
var event_div = $(ele).parents('div[data-module="calendar"]').find('div.calendar-events') var event_div = $(ele).parents('div.w-calendar').find('div.calendar-events')
$(ele).parents('div[data-module="calendar"]').css('display','block') $(ele).parents('div.w-calendar').css('display','block')
$(ele).parents('div[data-module="calendar"]').find('div').eq(0).css('width','') $(ele).parents('div.w-calendar').find('div').eq(0).css('width','')
event_div.hide() event_div.hide()
//$(ele).parents('div[data-module="calendar"]').find('td.w-calendar-toggle').removeClass('w-calendar-toggle') //$(ele).parents('div.w-calendar').find('td.w-calendar-toggle').removeClass('w-calendar-toggle')
event_div.find('.event-container-one').remove() event_div.find('.event-container-one').remove()
} }
var renderMonth = function(){ var renderMonth = function(){
@ -462,7 +463,7 @@
type : "get" type : "get"
}).done(function(data){ }).done(function(data){
events = {} events = {}
$(dom).find('.w-calendar-title span').eq(-1).html(data['calendar_title']) $(dom).find('.w-calendar-title span').eq(0).html(data['calendar_title'])
$.each(data.events,function(index,eve){ $.each(data.events,function(index,eve){
var sd = new Date(eve.start), var sd = new Date(eve.start),
ed = new Date(eve.end), ed = new Date(eve.end),
@ -475,7 +476,7 @@
} }
if(dayDiff > 0){ if(dayDiff > 0){
var inserting_date = sd.getDate(); var inserting_date = sd.getDate();
for(var i = 0;i <= dayDiff; i++){ for(var i = 0;i < dayDiff; i++){
var dt = inserting_date + "-" + sd.getMonth() + "-" + sd.getFullYear(), var dt = inserting_date + "-" + sd.getMonth() + "-" + sd.getFullYear(),
td = dom.find("td[data-date-node=" + dt + "]"); td = dom.find("td[data-date-node=" + dt + "]");
if (events[dt]==undefined){ if (events[dt]==undefined){
@ -532,7 +533,7 @@
this.currentMonth = function(){ this.currentMonth = function(){
renderMonth(); renderMonth();
var div_tag = $('<div></div>') var div_tag = $('<div class="height100"></div>')
var widge_title = dom.find('.w-calendar-title').eq(0) var widge_title = dom.find('.w-calendar-title').eq(0)
div_tag.html(monthDom) div_tag.html(monthDom)
div_tag.prepend(widge_title) div_tag.prepend(widge_title)

33
app/assets/stylesheets/event_news_calendar_widget2.css.scss
View File

@ -2,6 +2,12 @@
.w-calendar-table { .w-calendar-table {
table-layout: fixed; table-layout: fixed;
width: 100%; width: 100%;
flex: 1;
}
.height100 {
flex: 1;
display: flex;
flex-direction: column;
} }
a.event-container-one{ a.event-container-one{
color: inherit; color: inherit;
@ -39,9 +45,14 @@
.calendar-events{ .calendar-events{
position: relative; position: relative;
background: #fbfbfb; background: #fbfbfb;
display: flex;
flex-direction: column;
} }
.month_template{ .month_template{
position: relative; position: relative;
height: 100%;
display: flex;
flex-direction: column;
} }
flex-wrap: wrap; flex-wrap: wrap;
margin-top: 2em; margin-top: 2em;
@ -55,6 +66,7 @@
color: inherit; color: inherit;
cursor: pointer; cursor: pointer;
border: 0; border: 0;
vertical-align: middle;
} }
.w-calendar-table td div{ .w-calendar-table td div{
display: inline-flex; display: inline-flex;
@ -89,11 +101,17 @@
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
padding: 0px 10%; padding: 0px 10%;
display: flex; display: flex;
flex-flow: row-reverse wrap;
line-height: 2em; line-height: 2em;
justify-content: center; justify-content: space-between;
font-size: 1.85em; font-size: 1.85em;
width: 100%; width: 100%;
.w-calendar-title span:last-child{
float: right;
}
}
.w-calendar-title.center{
text-align: center;
justify-content: center;
} }
.calendar-dialog div.ui-dialog-content { .calendar-dialog div.ui-dialog-content {
max-height: 20em !important; max-height: 20em !important;
@ -201,13 +219,14 @@
.event-wraper{ .event-wraper{
position: relative; position: relative;
overflow: hidden; overflow: hidden;
flex: 1;
} }
.event-container-one:not(.active) { .event-container-one:not(.active) {
right: -100%; right: -100%;
} }
.event.active .event-containers{ .event.active .event-containers{
min-height: 19.2em; min-height: 13em;
height: auto; height: 100%;
} }
.calendar-events.width-100 .switch_button_wraper{ .calendar-events.width-100 .switch_button_wraper{
width: 100%; width: 100%;
@ -231,4 +250,10 @@
box-shadow: 0em 0.1em 0.3em 0em; box-shadow: 0em 0.1em 0.3em 0em;
margin-bottom: 0.25em; margin-bottom: 0.25em;
} }
.event{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
} }

15
app/controllers/event_news_controller.rb
View File

@ -432,7 +432,10 @@ class EventNewsController < ApplicationController
"read_more" => read_more_url, "read_more" => read_more_url,
"read_more_text" => "read more", "read_more_text" => "read more",
"extra_brefore_html" => extra_html, "extra_brefore_html" => extra_html,
"extra_after_html" => extra_after_html "extra_after_html" => extra_after_html,
"calendar_title" => get_calendar_title,
"widget_title" => subpart.title,
'widget_title_class' => subpart.title.blank? ? 'center' : '',
} }
} }
end end
@ -818,14 +821,16 @@ class EventNewsController < ApplicationController
all_tags = ['all'] if all_tags.length==0 all_tags = ['all'] if all_tags.length==0
page = Page.where(:page_id=> subpart.read_more_page_id).first rescue nil page = Page.where(:page_id=> subpart.read_more_page_id).first rescue nil
page = Page.where(:module => "event_news").first rescue nil if page.nil? page = Page.where(:module => "event_news").first rescue nil if page.nil?
read_more_url = "/#{I18n.locale.to_s + page.url}" rescue "" read_more_url_root = "/#{I18n.locale.to_s + page.url}" rescue ""
read_more_url = read_more_url + "?" + {"category"=>all_cats,"tags"=> all_tags}.to_param if read_more_url != "" read_more_url = read_more_url_root + "?" + {"category"=>all_cats,"tags"=> all_tags}.to_param if read_more_url != ""
else
page = Page.where(:module => "event_news").first
read_more_url_root = "/#{I18n.locale.to_s + page.url}" rescue ""
end end
if params[:unix_start].present? && params[:unix_end].present? if params[:unix_start].present? && params[:unix_end].present?
agenda_start = Time.at(params[:unix_start].to_i).utc.to_s agenda_start = Time.at(params[:unix_start].to_i).utc.to_s
agenda_end = Time.at(params[:unix_end].to_i).utc.to_s agenda_end = Time.at(params[:unix_end].to_i).utc.to_s
events = EventNews.agenda_events(agenda_start,agenda_end) events = EventNews.agenda_events(agenda_start,agenda_end,read_more_url_root)
end end
render json: {"events" => events,"calendar_title"=>get_calendar_title(Time.at(params[:month_start].to_i).utc)}.to_json({"frontend" => true}) render json: {"events" => events,"calendar_title"=>get_calendar_title(Time.at(params[:month_start].to_i).utc)}.to_json({"frontend" => true})
end end

8
app/models/event_news.rb
View File

@ -207,20 +207,20 @@ class EventNews
(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)
end end
def self.agenda_events(agenda_start, agenda_end) def self.agenda_events(agenda_start, agenda_end,read_more_url)
events = self.monthly_event(agenda_start, agenda_end).convert_front events = self.monthly_event(agenda_start, agenda_end).convert_front(read_more_url)
end end
def self.monthly_event(start_date,end_date) def self.monthly_event(start_date,end_date)
self.any_of({:event_date.lte => start_date,:event_end_date.gte => start_date},{:event_date.gte => start_date,:event_end_date.lte => end_date},{:event_date.lte => end_date,:event_end_date.gte => end_date}).asc(:event_date) self.any_of({:event_date.lte => start_date,:event_end_date.gte => start_date},{:event_date.gte => start_date,:event_end_date.lte => end_date},{:event_date.lte => end_date,:event_end_date.gte => end_date}).asc(:event_date)
end end
def self.convert_front def self.convert_front(read_more_url)
self.all.collect do |re| self.all.collect do |re|
{:id => re.id.to_s, {:id => re.id.to_s,
:title=>re.title, :title=>re.title,
:note=>re.subtitle || "", :note=>re.subtitle || "",
:allDay => false, :allDay => false,
:color => nil, :color => nil,
:url_linked => (re.is_external_link? ? re.external_link : OrbitHelper.widget_item_url(re.to_param) rescue ""), :url_linked => (re.is_external_link? ? re.external_link : "#{read_more_url}/#{re.to_param}" rescue ""),
:start => re.event_date, :start => re.event_date,
:end => re.event_end_date} :end => re.event_end_date}
end end

49
modules/event_news/_event_news_widget18.html.erb
View File

@ -1,6 +1,7 @@
<div class="w-calendar widget-calendar-2 widget-event-news-calendar-2" data-module="event_news"> <div class="w-calendar widget-calendar-2 widget-event-news-calendar-2" data-module="event_news">
<div class="w-calendar-title"> <div class="w-calendar-title {{widget_title_class}}">
<span>{{widget-title}}</span> <span>{{calendar_title}}</span>
<span>{{widget_title}}</span>
</div> </div>
<div class='month_template'> <div class='month_template'>
<h4 class="widget-title "> <h4 class="widget-title ">
@ -54,27 +55,29 @@
</div> </div>
<%= stylesheet_link_tag "event_news_calendar_widget2" %> <%= stylesheet_link_tag "event_news_calendar_widget2" %>
<script> <script>
if(document.getElementById("event-news-calendar-widget_module2") == null){ $(document).ready(function(){
var tag = document.createElement('script'); if(document.getElementById("event-news-calendar-widget_module2") == null){
tag.setAttribute("id", "event-news-calendar-widget_module2"); var tag = document.createElement('script');
tag.src = "/assets/event_news_calendar_widget2.js"; tag.setAttribute("id", "event-news-calendar-widget_module2");
tag.onload = function(){ tag.src = "<%= asset_path('event_news_calendar_widget2.js') %>";
$("div.widget-calendar-2[data-module=event_news]").each(function(index){ tag.onload = function(){
var calendar = $(this), $("div.widget-calendar-2[data-module=event_news]").each(function(index){
cmi = new CalendarModuleMonth2(new Date(), calendar,calendar.data("subpart-id"),"{{more_url}}",false); var calendar = $(this),
cmi.currentMonth(); cmi = new EventCalendarModuleMonth2(new Date(), calendar,calendar.data("subpart-id"),"{{more_url}}",false);
calendar.find("div.w-calendar-nav a").on("click",function(){ cmi.currentMonth();
var el = $(this); calendar.find("div.w-calendar-nav a").on("click",function(){
if(el.hasClass("w-calendar-nav-prev")){ var el = $(this);
cmi.prevMonth(); if(el.hasClass("w-calendar-nav-prev")){
}else if(el.hasClass("w-calendar-nav-next")){ cmi.prevMonth();
cmi.nextMonth(); }else if(el.hasClass("w-calendar-nav-next")){
} cmi.nextMonth();
return false; }
return false;
})
}) })
}) }
var head = document.getElementsByTagName("head");
head[0].appendChild(tag);
} }
var head = document.getElementsByTagName("head"); })
head[0].appendChild(tag);
}
</script> </script>