diff --git a/app/assets/javascripts/calendar_widget2.js b/app/assets/javascripts/calendar_widget2.js index 7771578..49e6dde 100644 --- a/app/assets/javascripts/calendar_widget2.js +++ b/app/assets/javascripts/calendar_widget2.js @@ -16,7 +16,7 @@ lastDay = new Date(Date.UTC(year,month+1,0)), today = date.getDate(), last_inserted_date = 1, - monthDom = $("
"), + monthDom = $("
"), eventHTML = dom.find('div.calendar-events')[0], event_template = dom.find('div.calendar-events .event').prop('outerHTML'), prevMonthFunc, @@ -24,7 +24,7 @@ toggle_data, hover_step=10, hover_step_max=10, - hover_max_height=19.2, + hover_max_height=13, toggling=false, switching=false, tp1, @@ -101,28 +101,28 @@ } $(window).resize(function(){ var window_w = $(window).width() - $('.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).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 this_w = dom.width() + var event_doc = dom.find('.calendar-events'); + if (this_w>=728 && window_w>=768){ + if (!event_doc.hasClass('width-50')){ + event_doc.removeClass('width-100') + event_doc.addClass('width-50') + event_doc.css('width','50%') + event_doc.parents('div.w-calendar').find('div').eq(0).css('width','50%') } + }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 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).addClass('shown') function set_event(date,active_flag){ @@ -260,63 +260,64 @@ $('.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') + var event_doc = $(this).parents('.event').eq(0); + if (!event_doc.hasClass('active')){ + tp1 = event_doc.parents('.calendar-events').eq(0).find('.event.active .event-containers'); + tp2 = event_doc.find('.event-containers'); if (!toggling){ - tp2.css('height','0') - tp2.css('min-height','0') - hover_step = hover_step_max + tp2.css('height','0'); + tp2.css('min-height','0'); + hover_step = hover_step_max; }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(){ - 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') + tp1.css('height',(hover_step*hover_max_height/hover_step_max)+'em'); + tp2.css('height',(hover_max_height-hover_step*hover_max_height/hover_step_max)+'em'); hover_step = hover_step-1; if (hover_step>=0){ - setTimeout(toggle_height,50) + setTimeout(toggle_height,50); }else{ - tp1.css('min-height','') - tp2.css('min-height','') - tp1.css('height','') - tp2.css('height','') - toggling = false + tp1.css('min-height',''); + tp2.css('min-height',''); + tp1.css('height',''); + tp2.css('height',''); + toggling = false; } } if (!toggling){ - setTimeout(toggle_height,50) + setTimeout(toggle_height,50); } - tp1.css('height',tp1.height()) - tp1.css('min-height','0') - tp1.parents('.event').removeClass('active') - toggling = true + 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.find('.event .event-header').hover(event_hover); + event_div.find('.event .event-header').click(event_hover); + $(ele).parents('div.w-calendar').css('display','flex'); + if ($(ele).parents('div.w-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%') + $(ele).parents('div.w-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%') + $(ele).parents('div.w-calendar').find('div').eq(0).css('width','100%') } event_div.show() } var hide_event = function(ele){ $(ele).parents('.w-calendar').find('td.shown').removeClass('shown') - var event_div = $(ele).parents('div[data-module="calendar"]').find('div.calendar-events') - $(ele).parents('div[data-module="calendar"]').css('display','block') - $(ele).parents('div[data-module="calendar"]').find('div').eq(0).css('width','') + var event_div = $(ele).parents('div.w-calendar').find('div.calendar-events') + $(ele).parents('div.w-calendar').css('display','block') + $(ele).parents('div.w-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') + //$(ele).parents('div.w-calendar').find('td.w-calendar-toggle').removeClass('w-calendar-toggle') event_div.find('.event-container-one').remove() } var renderMonth = function(){ @@ -462,7 +463,7 @@ type : "get" }).done(function(data){ 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){ var sd = new Date(eve.start), ed = new Date(eve.end), @@ -475,7 +476,7 @@ } if(dayDiff > 0){ 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(), td = dom.find("td[data-date-node=" + dt + "]"); if (events[dt]==undefined){ @@ -532,7 +533,7 @@ this.currentMonth = function(){ renderMonth(); - var div_tag = $('
') + var div_tag = $('
') var widge_title = dom.find('.w-calendar-title').eq(0) div_tag.html(monthDom) div_tag.prepend(widge_title) diff --git a/app/assets/stylesheets/calendar_widget2.css.scss b/app/assets/stylesheets/calendar_widget2.css.scss index 3c798fa..27e1369 100644 --- a/app/assets/stylesheets/calendar_widget2.css.scss +++ b/app/assets/stylesheets/calendar_widget2.css.scss @@ -2,6 +2,12 @@ .w-calendar-table { table-layout: fixed; width: 100%; + flex: 1; + } + .height100 { + flex: 1; + display: flex; + flex-direction: column; } a.event-container-one{ color: inherit; @@ -39,9 +45,14 @@ .calendar-events{ position: relative; background: #fbfbfb; + display: flex; + flex-direction: column; } .month_template{ position: relative; + height: 100%; + display: flex; + flex-direction: column; } flex-wrap: wrap; margin-top: 2em; @@ -55,6 +66,7 @@ color: inherit; cursor: pointer; border: 0; + vertical-align: middle; } .w-calendar-table td div{ display: inline-flex; @@ -89,11 +101,17 @@ color: rgb(255, 255, 255); padding: 0px 10%; display: flex; - flex-flow: row-reverse wrap; line-height: 2em; - justify-content: center; + justify-content: space-between; font-size: 1.85em; 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 { max-height: 20em !important; @@ -201,13 +219,14 @@ .event-wraper{ position: relative; overflow: hidden; + flex: 1; } .event-container-one:not(.active) { right: -100%; } .event.active .event-containers{ - min-height: 19.2em; - height: auto; + min-height: 13em; + height: 100%; } .calendar-events.width-100 .switch_button_wraper{ width: 100%; @@ -231,4 +250,10 @@ box-shadow: 0em 0.1em 0.3em 0em; margin-bottom: 0.25em; } + .event{ + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + } } \ No newline at end of file diff --git a/app/controllers/calendars_controller.rb b/app/controllers/calendars_controller.rb index f3c075c..5929d3e 100644 --- a/app/controllers/calendars_controller.rb +++ b/app/controllers/calendars_controller.rb @@ -10,8 +10,10 @@ class CalendarsController < ApplicationController "extras" => { "page_id" => OrbitHelper.params[:page_id], 'widget_title' => page.name, + 'widget_title_class' => page.name.blank? ? 'center' : '', '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 @@ -32,7 +34,9 @@ class CalendarsController < ApplicationController "subpart-id" => part.id.to_s, "more_url" => OrbitHelper.widget_more_url, '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 @@ -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}") I18n.t("calendar.calendar_title",year: now_date.year,month: month_name) end + def widget_default_column + (1..5).collect do |i| + " + + + + + + + + " + end.join("\n") + end end diff --git a/bin/rails b/bin/rails new file mode 100644 index 0000000..08ba0ad --- /dev/null +++ b/bin/rails @@ -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" diff --git a/modules/calendar/_calendar_widget1.html.erb b/modules/calendar/_calendar_widget1.html.erb index a1d7a7d..cb810b2 100644 --- a/modules/calendar/_calendar_widget1.html.erb +++ b/modules/calendar/_calendar_widget1.html.erb @@ -26,7 +26,9 @@ Sat - + + {{default_column}} +