harry
/
calendar
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

finish widget 2

This commit is contained in:
chiu 2020-08-14 22:20:03 +08:00
parent 1105f57bf9
commit 35ac66dc06
4 changed files with 356 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
app/assets/javascripts/calendar_widget.js
View File

@ -78,18 +78,24 @@
}
$(window).resize(function(){
var window_w = $(window).width()
$('div.calendar-events').each(function(){
if ($(this).width()>=728 && window_w>=768){
if ($(this).css('width')!='50%'){
$('.widget-calendar-1 div.calendar-events').each(function(){
var this_w = $(this).parents('.widget-calendar-1').width()
if (this_w>=728 && window_w>=768){
if (!$(this).hasClass('width-50')){
$(this).removeClass('width-100')
$(this).addClass('width-50')
$(this).css('width','50%')
$(this).parents('div[data-module="calendar"]').find('div').eq(0).css('width','50%')
}
}else{
if ($(this).css('width')=='50%'){
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%')
}
}
})
})
var show_event = function(date,ele){
@ -374,7 +380,7 @@
})
var clicked_color = dom.find('.w-calendar-event').css('background-color')
if (clicked_color){
clicked_color = lighten_color(rgb2hex(clicked_color),-35)
clicked_color = lighten_color(rgb2hex(clicked_color),-45)
if (clicked_color!='#000000'){
dom.find('table').append($('<style>.widget-calendar-1 table.w-calendar-table .w-calendar-toggle{ background-color:'+clicked_color+';color: white;}</style>'))
}
@ -391,7 +397,7 @@
div_tag.prepend(widge_title)
dom.html(div_tag);
monthDom.find("i.loading").removeClass("hide");
fetchInterval = setTimeout(fetchEvents,300);
fetchInterval = setTimeout(fetchEvents,0);
dom.find('div').eq(0).after(eventHTML)
}

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

@ -18,9 +18,17 @@
last_inserted_date = 1,
monthDom = $("<div data-year='"+year+"' data-month='"+month+"'></div>"),
eventHTML = dom.find('div.calendar-events')[0],
event_template = dom.find('div.calendar-events .event').prop('outerHTML'),
prevMonthFunc,
nextMonthFunc,
toggle_data;
toggle_data,
hover_step=10,
hover_step_max=10,
hover_max_height=19.2,
toggling=false,
switching=false,
tp1,
tp2;
monthDom.html(template);
var format_time = function(date){
var hours = date.getHours(),
@ -40,6 +48,21 @@
return "#000000";
}
}
function hexToRGB(hex, alpha) {
if (hex){
var r = parseInt(hex.slice(1, 3), 16),
g = parseInt(hex.slice(3, 5), 16),
b = parseInt(hex.slice(5, 7), 16);
if (alpha) {
return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
} else {
return "rgb(" + r + ", " + g + ", " + b + ")";
}
}else{
return ''
}
}
function lighten_color(my_hex,percent){
if (my_hex[0] == '#'){
my_hex = my_hex.slice(1)
@ -78,92 +101,214 @@
}
$(window).resize(function(){
var window_w = $(window).width()
$('div.calendar-events').each(function(){
if ($(this).width()>=728 && window_w>=768){
if ($(this).css('width')!='50%'){
$('.widget-calendar-2 div.calendar-events').each(function(){
var this_w = $(this).parents('.widget-calendar-2').width()
if (this_w>=728 && window_w>=768){
if (!$(this).hasClass('width-50')){
$(this).removeClass('width-100')
$(this).addClass('width-50')
$(this).css('width','50%')
$(this).parents('div[data-module="calendar"]').find('div').eq(0).css('width','50%')
}
}else{
if ($(this).css('width')=='50%'){
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%')
}
}
})
})
var show_event = function(date,ele){
var date_split = date.split('-')
var event_div = $(ele).parents('div[data-module="calendar"]').find('div.calendar-events')
event_div.find('.event-header').text(parseInt(date_split[2])+'/'+(parseInt(date_split[1])+1)+'/'+parseInt(date_split[0]))
event_div.find('.event-container').remove()
$(ele).parents('.w-calendar').find('td.shown').removeClass('shown')
$(ele).addClass('shown')
$.each(events[date],function(k,v){
var tp
if (v.url_linked==''){
var time_string = ''
if(v.allDay) {
var end_time
var start_time = formate_datetime(v.start)[0]
if(v.end)
end_time = formate_datetime(v.end)[0]
else
end_time = start_time
time_string = (start_time==end_time ? "<p class='start-date'><i class='icons-calendar' /> " + start_time + "</p>" : "<i class='icons-calendar' /> " + start_time + " <i class='icons-arrow-right-5' /> " + end_time + "")
function set_event(date,active_flag){
var date_split = date.split('-')
var event_temp = $(event_template)
var read_more_text = $('html').attr('lang')=='zh_tw' ? '查看詳情' : 'Read more'
event_temp.find('.event-header .date .month').text(month_names[parseInt(date_split[1])])
event_temp.find('.event-header .date .day').text(parseInt(date_split[0]))
$.each(events[date],function(k,v){
var tp
if (v.url_linked==''){
var time_string = ''
if(v.allDay) {
var end_time
var start_time = formate_datetime(v.start)[0]
if(v.end)
end_time = formate_datetime(v.end)[0]
else
end_time = start_time
time_string = (start_time==end_time ? "<p class='start-date'><i class='icons-calendar' /> " + start_time + "</p>" : "<i class='icons-calendar' /> " + start_time + " <i class='icons-arrow-right-5' /> " + end_time + "")
}else{
var st = formate_datetime(v.start),
et = formate_datetime(v.end),
start_time = st[0],
end_time = et[0],
same = (start_time==end_time),
etime = et[1],
stime = st[1]
time_string = (same ? "<p class='date'><i class='icons-calendar' /> " + start_time + "</p><p class='time'><i class='icons-clock' /> " + stime + " <i class='icons-arrow-right-5' /> " + etime : "<p class='start-date'><i class='icons-arrow-right-2' /> " + start_time + "<span class='pull-right'>" + stime + "</span></p><p class='end-date'><i class='icons-arrow-left-2' /> " + end_time + "<span class='pull-right'>" + etime + "</p>");
}
var modal_tp = ('<div class="dialog_event" style="display: none;">' +
'<div class="modal-header">' +
'<h3>' + v.title + '</h3>' +
'</div>' +
'<div class="modal-body">' +
'<div class="event_summary">' + time_string + '</div>' +
v.note +
'</div>' +
'</div>')
tp = $('<div class="event-container-one has-dialog"><div class="title_temp"></div><div class="duration_temp"></div><div class="event-content"></div>'+modal_tp+'</div>')
}else{
var st = formate_datetime(v.start),
et = formate_datetime(v.end),
start_time = st[0],
end_time = et[0],
same = (start_time==end_time),
etime = et[1],
stime = st[1]
time_string = (same ? "<p class='date'><i class='icons-calendar' /> " + start_time + "</p><p class='time'><i class='icons-clock' /> " + stime + " <i class='icons-arrow-right-5' /> " + etime : "<p class='start-date'><i class='icons-arrow-right-2' /> " + start_time + "<span class='pull-right'>" + stime + "</span></p><p class='end-date'><i class='icons-arrow-left-2' /> " + end_time + "<span class='pull-right'>" + etime + "</p>");
tp = $('<a class="event-container-one"><div class="title_temp"></div><div class="duration_temp"></div><div class="event-content"></div></a>').attr('href',v.url_linked)
}
var modal_tp = ('<div class="dialog_event" style="display: none;">' +
'<div class="modal-header">' +
'<h3>' + v.title + '</h3>' +
'</div>' +
'<div class="modal-body">' +
'<div class="event_summary">' + time_string + '</div>' +
v.note +
'</div>' +
'</div>')
tp = $('<div class="event-container" onclick="var tmp=$(this).find(\'.dialog_event\').clone().dialog({dialogClass: \'calendar-dialog\'});$(\'.ui-dialog button\').blur();return false;"><div class="event-icon"><div class="event-bullet-event"></div></div><div class="event-info"></div><div class="model-content"></div>'+modal_tp+'</div>')
}else{
tp = $('<a class="event-container"><div class="event-icon"><div class="event-bullet-event"></div></div><div class="event-info"></div></a>').attr('href',v.url_linked)
}
var sd = formate_datetime(v.start),
ed = formate_datetime(v.end),
duration = '';
if(v.allDay){
if (sd[0]!=ed[0]){
duration = sd[0]+'>'+ed[0] +'<br>'
var sd = formate_datetime(v.start),
ed = formate_datetime(v.end),
duration = '';
if(v.allDay){
if (sd[0]!=ed[0]){
duration = sd[0]+'>'+ed[0] +'<br>'
}
}else if (sd[0]==ed[0]){
duration = sd[1]+'>'+ed[1] +'<br>'
}else{
duration = sd[0]+' '+sd[1]+'>'+ed[0]+' '+ed[1] +'<br>'
}
}else if (sd[0]==ed[0]){
duration = sd[1]+'>'+ed[1] +'<br>'
}else{
duration = sd[0]+' '+sd[1]+'>'+ed[0]+' '+ed[1] +'<br>'
tp.css('color',hexToRGB(v.color,0.45))
tp.find('.event-content').html(v.note || read_more_text)
tp.find('.title_temp').html(v.title)
tp.find('.duration_temp').html(duration)
if (k==0){
tp.addClass('active')
event_temp.find('.event-header .event-inner-title').html(v.title)
event_temp.find('.event-header .duration').html(duration)
}
event_temp.find('.event-containers').append(tp)
})
if (active_flag){
event_temp.addClass('active')
}
tp.find('.event-info').html(duration+v.title+"<div class=\"event-content\">"+v.note+"</div>")
tp.find('.event-bullet-event').css('background',v.color)
event_div.find('.event-containers').append(tp)
if (events[date].length>1){
var switch_button_wraper = $("<div class=\"switch_button_wraper\"> <button class=\"switch_button\" for=\"prev\" type=\"button\">&lt;</button>"
+"<button class=\"switch_button\" for=\"next\" type=\"button\">&gt;</button>"
+"</div>")
switch_button_wraper.find('button').click(function(){
if (!switching){
var showing_event = $(this).parents('.event-wraper').find('.event-container-one.active')
var next_event
showing_event.css('position','')
showing_event.css('right','0')
showing_event.removeClass('active')
if ($(this).attr('for')=='prev'){
next_event = showing_event.prev('.event-container-one')
if (next_event.length==0){
next_event = $(this).parents('.event-wraper').find('.event-container-one').eq(-1)
}
next_event.addClass('active')
next_event.css('right','100%')
switching = true
next_event.animate({'right': '0%'},function(){
$(this).css('right','')
if ($(this).find('.event-content').height()>$(this).height()){
$(this).css('position','relative')
}
})
showing_event.animate({'right': '-100%'},function(){
switching = false
})
}else{
next_event = showing_event.next('.event-container-one')
if (next_event.length==0){
next_event = $(this).parents('.event-wraper').find('.event-container-one').eq(0)
}
next_event.addClass('active')
next_event.css('right','-100%')
switching = true
next_event.animate({'right': '0%'},function(){
$(this).css('right','')
if ($(this).find('.event-content').height()>$(this).height()){
$(this).css('position','relative')
}
})
showing_event.animate({'right': '100%'},function(){
switching = false
})
}
$(this).parents('.event').eq(0).find('.event-header .event-inner-title').html(next_event.find('.title_temp').html())
$(this).parents('.event').eq(0).find('.event-header .duration').html(next_event.find('.duration_temp').html())
}
})
event_temp.find('.event-wraper').eq(0).append(switch_button_wraper)
}
event_div.append(event_temp)
}
event_div.html('')
set_event(date,true)
var all_event_in_table = $(ele).parents('table').eq(0).find('td.w-calendar-event')
var ele_index = all_event_in_table.index(ele)
var next_ele = all_event_in_table.eq(ele_index+1)
if (next_ele.length){
set_event(next_ele.data('date-node'),false)
}
event_div.find('.has-dialog').click(function(){
var tmp=$(this).find('.dialog_event').clone().dialog({dialogClass: 'calendar-dialog'});
$('.ui-dialog button').blur();
})
function event_hover(){
if (!$(this).hasClass('active')){
tp1 = $(this).parents('.calendar-events').eq(0).find('.event.active .event-containers')
tp2 = $(this).find('.event-containers')
if (!toggling){
tp2.css('height','0')
tp2.css('min-height','0')
hover_step = hover_step_max
}else{
hover_step = hover_step_max - hover_step
}
$(this).addClass('active')
function toggle_height(){
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')
hover_step = hover_step-1;
if (hover_step>=0){
setTimeout(toggle_height,50)
}else{
tp1.css('min-height','')
tp2.css('min-height','')
tp1.css('height','')
tp2.css('height','')
toggling = false
}
}
if (!toggling){
setTimeout(toggle_height,50)
}
tp1.css('height',tp1.height())
tp1.css('min-height','0')
tp1.parents('.event').removeClass('active')
toggling = true
}
}
event_div.find('.event').hover(event_hover)
event_div.find('.event').click(event_hover)
$(ele).parents('div[data-module="calendar"]').css('display','flex')
if ($(ele).parents('div[data-module="calendar"]').width()>=728 && $(window).width()>=768){
event_div.css('width','50%')
event_div.addClass('width-50')
event_div.removeClass('width-100')
$(ele).parents('div[data-module="calendar"]').find('div').eq(0).css('width','50%')
}else{
event_div.css('width','100%')
event_div.addClass('width-100')
event_div.removeClass('width-50')
$(ele).parents('div[data-module="calendar"]').find('div').eq(0).css('width','100%')
}
event_div.show()
$('.close_box').off('click')
$('.close_box').on('click',function(){
hide_event(this)
})
}
var hide_event = function(ele){
$(ele).parents('.w-calendar').find('td.shown').removeClass('shown')
@ -172,7 +317,7 @@
$(ele).parents('div[data-module="calendar"]').find('div').eq(0).css('width','')
event_div.hide()
//$(ele).parents('div[data-module="calendar"]').find('td.w-calendar-toggle').removeClass('w-calendar-toggle')
event_div.find('.event-container').remove()
event_div.find('.event-container-one').remove()
}
var renderMonth = function(){
var num_of_rows = getNumberOfRows(),
@ -374,7 +519,7 @@
})
var clicked_color = dom.find('.w-calendar-event').css('background-color')
if (clicked_color){
clicked_color = lighten_color(rgb2hex(clicked_color),-35)
clicked_color = lighten_color(rgb2hex(clicked_color),-45)
if (clicked_color!='#000000'){
dom.find('table').append($('<style>.widget-calendar-2 table.w-calendar-table .w-calendar-toggle{ background-color:'+clicked_color+';color: white;}</style>'))
}

167
app/assets/stylesheets/calendar_widget2.css
View File

@ -1,18 +1,6 @@
a.event-container{
a.event-container-one{
color: inherit;
}
.event-container {
display: flex;
flex-wrap: wrap;
width: 100%;
border-radius: 10px;
margin-bottom: 1em;
transition: all .3s ease;
cursor: pointer;
padding: 0.5em;
min-height: 3em;
position: relative;
}
.close_box{
font-weight: bold;
position: relative;
@ -33,38 +21,6 @@ a.event-container{
height: 2em;
border-radius: 1em;
}
.event-container:hover {
background-color: #fff;
box-shadow: 0 0.1em 0.7em -0.25em rgba(0, 0, 0, 0.65);
}
.event-container > .event-icon {
position: absolute;
display: flex;
justify-content: center;
width: 15%;
height: 100%;
z-index: 5;
}
.event-container > .event-icon::before {
content: '';
position: absolute;
top: 1em;
left: 50%;
width: 0.1em;
height: calc(100% + 1.5em);
background-color: #eaeaea;
z-index: -1;
}
.event-container:first-child > .event-icon::before {
top: 1.5em;
position: absolute;
}
.event-container:last-child > .event-icon::before {
height: 0;
}
.event-container:only-child > .event-icon::before {
background-color: unset;
}
.event-header{
width: 100%;
text-align: center;
@ -142,4 +98,125 @@ a.event-container{
}
.widget-calendar-2 table td.w-calendar-other-month {
color: #999797;
}
.widget-calendar-2 .event-header{
display: flex;
background: #dadada;
cursor: default;
}
.widget-calendar-2 .event-header .date{
width: 30%;
}
.widget-calendar-2 .event.active .event-header .day{
color: #bf1f1f;
}
.widget-calendar-2 .event.active .event-header .date{
color: #202427;
}
.widget-calendar-2 .event .event-header .day{
font-size: 1.4em;
}
.widget-calendar-2 .event .event-header .month{
font-size: 0.7em;
}
.widget-calendar-2 .event .event-header .date{
color: #a08a70;
}
.widget-calendar-2 .event-title{
width: 70%;
display: inline-flex;
flex-direction: column;
justify-content: space-between;
}
.widget-calendar-2 .event-title .duration{
font-size: 0.7em;
text-align: left;
color: #a0a1a1;
}
.widget-calendar-2 .duration_temp,.widget-calendar-2 .title_temp{
display: none;
}
.widget-calendar-2 .event-inner-title{
line-height: 2em;
text-align: left;
}
.widget-calendar-2 .event-containers{
height: 0;
min-height: unset;
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
margin: 0 10%;
}
.widget-calendar-2 .event-container-one {
position: absolute;
align-items: center;
justify-content: center;
display: flex;
width: calc(100% - 0.7em);;
height: calc(100% - 0.7em);
flex-wrap: wrap;
border-radius: 10px;
margin-bottom: 1em;
cursor: pointer;
padding: 0;
margin: 0;
color: rgba(50, 50, 50, 0.45);
}
.widget-calendar-2 .event-container-one:hover {
background-color: #fff;
box-shadow: 0 0.1em 0.7em 0em;
}
.widget-calendar-2 .event-container-one .event-content{
color: #000000;
}
button.switch_button {
margin: 10%;
width: 2.5em;
height: 2.5em;
border-radius: 1.25em;
border: 0;
background: #96231a;
color: white;
outline: 0;
}
.widget-calendar-2 .switch_button:hover {
background: #c07b76;
}
.widget-calendar-2 .switch_button_wraper{
position: absolute;
right: 0%;
margin-right: 2%;
width: 3em;
margin-bottom: 2%;
bottom: 0;
display: flex;
flex-direction: column;
}
.widget-calendar-2 .event-wraper{
position: relative;
overflow: hidden;
}
.widget-calendar-2 .event-container-one:not(.active) {
right: -100%;
}
.widget-calendar-2 .event.active .event-containers{
min-height: 19.2em;
height: auto;
}
.widget-calendar-2 .calendar-events.width-100 .switch_button_wraper{
width: 100%;
height: 100%;
margin: 0;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.widget-calendar-2 .calendar-events.width-100 .switch_button{
margin: 2%;
}
.widget-calendar-2 .calendar-events.width-100 .event-containers{
z-index: 3;
}

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

@ -34,10 +34,22 @@
</table>
</div>
<div class="calendar-events" style="display: none;">
<div class="close_box">X</div>
<div class="event-header"></div>
<div class="event-containers">
<div class="event">
<div class="event-header">
<div class="date">
<div class="day"></div>
<div class="month"></div>
</div>
<div class="event-title">
<div class="event-inner-title"></div>
<div class="duration"></div>
</div>
</div>
<div class="event-wraper">
<div class="event-containers">
</div>
</div>
</div>
</div>
</div>