harry
/
calendar
2
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:14:27 +08:00
parent a00c5c4b7f
commit 36e1725fab
9 changed files with 141 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
app/assets/javascripts/calendar_widget2.js
View File

@ -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{ }else{
if (!$(this).hasClass('width-100')){ if (!event_doc.hasClass('width-100')){
$(this).addClass('width-100') event_doc.addClass('width-100')
$(this).removeClass('width-50') event_doc.removeClass('width-50')
$(this).css('width','100%') event_doc.css('width','100%')
$(this).parents('div[data-module="calendar"]').find('div').eq(0).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/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;
}
} }

21
app/controllers/calendars_controller.rb
View File

@ -10,8 +10,10 @@ class CalendarsController < ApplicationController
"extras" => { "extras" => {
"page_id" => OrbitHelper.params[:page_id], "page_id" => OrbitHelper.params[:page_id],
'widget_title' => page.name, 'widget_title' => page.name,
'widget_title_class' => page.name.blank? ? 'center' : '',
'calendar_title' => get_calendar_title, 'calendar_title' => get_calendar_title,
'style_tag' => stylesheet_link_tag(style_file) 'style_tag' => stylesheet_link_tag(style_file),
'default_column' => widget_default_column
} }
} }
end end
@ -32,7 +34,9 @@ class CalendarsController < ApplicationController
"subpart-id" => part.id.to_s, "subpart-id" => part.id.to_s,
"more_url" => OrbitHelper.widget_more_url, "more_url" => OrbitHelper.widget_more_url,
'widget_title' => part.title, 'widget_title' => part.title,
'calendar_title' => get_calendar_title 'widget_title_class' => part.title.blank? ? 'center' : '',
'calendar_title' => get_calendar_title,
'default_column' => widget_default_column
} }
} }
end end
@ -102,6 +106,19 @@ class CalendarsController < ApplicationController
month_name = I18n.locale.to_s=='zh_tw' ? now_date.month : I18n.t("calendar.month_name.#{now_date.month}") month_name = I18n.locale.to_s=='zh_tw' ? now_date.month : I18n.t("calendar.month_name.#{now_date.month}")
I18n.t("calendar.calendar_title",year: now_date.year,month: month_name) I18n.t("calendar.calendar_title",year: now_date.year,month: month_name)
end end
def widget_default_column
(1..5).collect do |i|
"<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>"
end.join("\n")
end
end end

18
bin/rails Normal file
View File

@ -0,0 +1,18 @@
#!/usr/bin/env ruby
# This command will automatically be run when you run "rails" with Rails 4 gems installed from the root of your application.
ENGINE_ROOT = File.expand_path('../..', __FILE__)
ENGINE_PATH = File.expand_path('../../lib/announcement/engine', __FILE__)
# Set up gems listed in the Gemfile.
ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../../Gemfile', __FILE__)
require 'bundler/setup' if File.exist?(ENV['BUNDLE_GEMFILE'])
# require 'rails/all'
# require 'rails/engine/commands'
require "action_controller/railtie"
require "action_mailer/railtie"
require "sprockets/railtie"
require "rails/test_unit/railtie"
require 'rails/engine/commands'
require "mongoid/railtie"

4
modules/calendar/_calendar_widget1.html.erb
View File

@ -26,7 +26,9 @@
<th>Sat</th> <th>Sat</th>
</tr> </tr>
</thead> </thead>
<tbody></tbody> <tbody>
{{default_column}}
</tbody>
</table> </table>
</div> </div>
<div class="calendar-events" style="display: none;"> <div class="calendar-events" style="display: none;">

8
modules/calendar/_calendar_widget2.html.erb
View File

@ -1,7 +1,7 @@
<div class="w-calendar widget-calendar-2" data-module="calendar"> <div class="w-calendar widget-calendar-2" data-module="calendar">
<div class="w-calendar-title"> <div class="w-calendar-title {{widget_title_class}}">
<span>{{widget_title}}</span>
<span>{{calendar_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 ">
@ -30,7 +30,9 @@
<th>Sat</th> <th>Sat</th>
</tr> </tr>
</thead> </thead>
<tbody></tbody> <tbody>
{{default_column}}
</tbody>
</table> </table>
</div> </div>
<div class="calendar-events" style="display: none;"> <div class="calendar-events" style="display: none;">

4
modules/calendar/index2.html.erb
View File

@ -28,7 +28,9 @@
<th>Sat</th> <th>Sat</th>
</tr> </tr>
</thead> </thead>
<tbody></tbody> <tbody>
{{default_column}}
</tbody>
</table> </table>
</div> </div>
<div class="calendar-events" style="display: none;"> <div class="calendar-events" style="display: none;">

8
modules/calendar/index3.html.erb
View File

@ -1,9 +1,9 @@
<script type="text/javascript" src="<%= asset_path('calendar_widget2.js') %>" id="calendar-index_module2"></script> <script type="text/javascript" src="<%= asset_path('calendar_widget2.js') %>" id="calendar-index_module2"></script>
{{style_tag}} {{style_tag}}
<div class="w-calendar widget-calendar-2 index3" data-module="calendar" data-page-id="{{page_id}}"> <div class="w-calendar widget-calendar-2 index3" data-module="calendar" data-page-id="{{page_id}}">
<div class="w-calendar-title"> <div class="w-calendar-title {{widget_title_class}}">
<span>{{widget_title}}</span>
<span>{{calendar_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 ">
@ -32,7 +32,9 @@
<th>Sat</th> <th>Sat</th>
</tr> </tr>
</thead> </thead>
<tbody></tbody> <tbody>
{{default_column}}
</tbody>
</table> </table>
</div> </div>
<div class="calendar-events" style="display: none;"> <div class="calendar-events" style="display: none;">

8
script/rails
View File

@ -1,8 +0,0 @@
#!/usr/bin/env ruby
# This command will automatically be run when you run "rails" with Rails 3 gems installed from the root of your application.
ENGINE_ROOT = File.expand_path('../..', __FILE__)
ENGINE_PATH = File.expand_path('../../lib/calendar/engine', __FILE__)
require 'rails/all'
require 'rails/engine/commands'