finish widget 2

app/assets/javascripts/calendar_widget.js

@@ -78,18 +78,24 @@
     }
     $(window).resize(function(){
       var window_w = $(window).width()
-      $('div.calendar-events').each(function(){
+      $('.widget-calendar-1 div.calendar-events').each(function(){
-        if ($(this).width()>=728 && window_w>=768){
+        var this_w = $(this).parents('.widget-calendar-1').width()
-          if ($(this).css('width')!='50%'){
+        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)
     }
 

app/assets/javascripts/calendar_widget2.js

@@ -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(){
+      $('.widget-calendar-2 div.calendar-events').each(function(){
-        if ($(this).width()>=728 && window_w>=768){
+        var this_w = $(this).parents('.widget-calendar-2').width()
-          if ($(this).css('width')!='50%'){
+        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){
+      function set_event(date,active_flag){
-        var tp
+        var date_split = date.split('-')
-        if (v.url_linked==''){
+        var event_temp = $(event_template)
-          var time_string = ''
+        var read_more_text = $('html').attr('lang')=='zh_tw' ? '查看詳情' : 'Read more'
-          if(v.allDay) {
+        event_temp.find('.event-header .date .month').text(month_names[parseInt(date_split[1])])
-            var end_time
+        event_temp.find('.event-header .date .day').text(parseInt(date_split[0]))
-            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" 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>'
-          }
-        }else if (sd[0]==ed[0]){
-          duration = sd[1]+'>'+ed[1] +'<br>'
-        }else{
-          duration = sd[0]+' '+sd[1]+'>'+ed[0]+' '+ed[1] +'<br>'
-        }
-        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)
-      })
         
+        $.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{
+            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 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>'
+          }
+          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')
+        }
+        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>'))
           }

app/assets/stylesheets/calendar_widget2.css

@@ -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;
@@ -143,3 +99,124 @@ 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;
+}

modules/calendar/_calendar_widget2.html.erb

@@ -34,10 +34,22 @@
         </table>
     </div>
     <div class="calendar-events" style="display: none;">
-        <div class="close_box">X</div>
+        <div class="event">
-        <div class="event-header"></div>
+            <div class="event-header">
-        <div class="event-containers">
+                <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>