simple_calendar-timeslot 0.5.0 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 500f5c006fc960a430d0a699af5dc48ddc9eafab0e3b4a9516b57c2cca11b1ba
4
- data.tar.gz: '031169d10721e7fedbf94c1e797c1ef9f820c6b72eeadb343b049c56c0a56a4c'
3
+ metadata.gz: f52c61db709b554fc0b83bd23ede3fd67eef7d30a6c2ca56653bedfb07aa36e1
4
+ data.tar.gz: 85c84c537e0f6c838bd6cfbb1e9d91524e0ffe391d45380dba3d8dda0aed8b10
5
5
  SHA512:
6
- metadata.gz: e590a993ec1a34e0cd9dc1e7984a63f9da1f440862e96c3fad2b0733f9c69287f594e3a41b059f78d39dec94d6c5a056b766a7f394d31f816e8ae7f9aa9fb038
7
- data.tar.gz: 3f29f75df0d8117c8a14a48768fc8eb2af75375e438b7c709ca816ca70a7bcf93dbfb1eef4a62f1a04b7d928a59df330bd52b2658d8357f573a48ab00340453d
6
+ metadata.gz: cd7ea8c241c235e106c838f474d357b066bef07cdb67ec2e5df0a046b4fb0b8586b71e19ee32137ca2e78b5f269ced9d55b75003cd471251498387336f9c720b
7
+ data.tar.gz: 503206dbd8a107c38cae4f4957904a27a55db2f342a1a001346095d49b71a90ea1b945b1521da7bf180953d0343df0bb7509476670ec844044accbaceac2f39d
data/CHANGELOG.md CHANGED
@@ -1,5 +1,28 @@
1
1
  ## [Unreleased]
2
2
 
3
+ ## [0.8.0] - 2021-11-15
4
+ ### Changed
5
+ - Shuffle html layout around a bit for easier css styling like sticky
6
+
7
+ ## [0.7.0] - 2021-11-15
8
+ ### Added
9
+ - new option to display a current time indicator line (based on Time.zone.now), that is invisible unless styled, the css-class is
10
+ `current_time_indicator`
11
+ ### Fixed
12
+ - minor z-index inconsistencies for event rendering
13
+
14
+ ## [0.6.0] - 2021-11-15
15
+ ### Added
16
+ - Added option horizontal_scroll_split to view helper, which defaults to false. This option affects
17
+ horizontal orientation only. If set to false, the
18
+ different days of the calendar scroll together horizontally, which is more consistent with the
19
+ behaviour of the vertical layout. If set to true, the days scroll independently.
20
+
21
+ ## [0.5.1] - 2021-11-15
22
+ ### Fixed
23
+ - Fixed reliance of calendar on legacy function to
24
+ calculate event height
25
+
3
26
  ## [0.5.0] - 2021-11-14
4
27
  - Removed images for the README from the gem, sry :(
5
28
 
data/Gemfile.lock CHANGED
@@ -1,7 +1,7 @@
1
1
  PATH
2
2
  remote: .
3
3
  specs:
4
- simple_calendar-timeslot (0.5.0)
4
+ simple_calendar-timeslot (0.8.0)
5
5
  simple_calendar (~> 2.0)
6
6
 
7
7
  GEM
@@ -90,8 +90,6 @@ GEM
90
90
  nokogiri (1.12.5)
91
91
  mini_portile2 (~> 2.6.1)
92
92
  racc (~> 1.4)
93
- nokogiri (1.12.5-x86_64-darwin)
94
- racc (~> 1.4)
95
93
  parallel (1.21.0)
96
94
  parser (3.0.2.0)
97
95
  ast (~> 2.4.1)
@@ -159,7 +157,7 @@ GEM
159
157
  sprockets (4.0.2)
160
158
  concurrent-ruby (~> 1.0)
161
159
  rack (> 1, < 3)
162
- sprockets-rails (3.3.0)
160
+ sprockets-rails (3.4.0)
163
161
  actionpack (>= 5.2)
164
162
  activesupport (>= 5.2)
165
163
  sprockets (>= 3.0.0)
data/README.md CHANGED
@@ -47,12 +47,17 @@ If you use an SCSS file (`application.scss`), add the following line instead:
47
47
 
48
48
  TODO: Write usage instructions here
49
49
 
50
+ Your model must implement a `start_time` and `end_time` function,
51
+ or you can specify alternatives as options to the call below
52
+ as `attribute: :my_start_time` and `end_attribute: :my_end_time`.
53
+
50
54
  ```erb
51
55
  <%= timeslot_calendar(events: @events,
52
56
  number_of_days: 2,
53
57
  px_per_minute: 1.5,
54
58
  orientation: :horizontal,
55
59
  horizontal_height_px: 250,
60
+ # attribute: :my_start_time,
56
61
  # display_grid: false,
57
62
  # display_bucket_title: :event_type,
58
63
  # bucket_title_size: 30,
@@ -67,14 +72,16 @@ TODO: Write usage instructions here
67
72
  ```
68
73
 
69
74
  Shortversion in the meantime:
70
- - orientation (:vertical, :horizontal, default: :vertical)
71
- - horizontal_height_px default: 300
72
- - split_by_type (model function to call in case of bucketung f.ex.`:event_type`, default: false)
73
- - px_per_minute default: 0.65
74
- - display_bucket_title (model function to call in case of bucketung f.ex.`:event_type_name`, default: false)
75
- - bucket_title_size default: 20
76
- - grid_width default: 20px
77
- - display_grid default: true
75
+ - `orientation` (`:vertical`, `:horizontal`, default: :vertical)
76
+ - `px_per_minute` (defines size of calendar, default: 0.65)
77
+ - `horizontal_height_px` default: 300
78
+ - `horizontal_scroll_split` (scroll days separately or together, default: false)
79
+ - `split_by_type` (model function to call in case of bucketing f.ex.`:event_type`, default: false)
80
+ - `display_bucket_title` (model function to call in case of bucketing f.ex.`:event_type_name`, default: false)
81
+ - `bucket_title_size` default: 20
82
+ - `grid_width` default: 20px
83
+ - `display_grid` default: true
84
+ - `display_current_time_indicator` (display a stylable div across the timeline that display the current time, css-class: `current_time_indicator`, default: false)
78
85
 
79
86
  ## Development
80
87
 
@@ -1,14 +1,34 @@
1
1
  .timeslot-calendar div {
2
2
  box-sizing: border-box;
3
3
  }
4
- .timeslot-calendar .days-wrapper-vertical {
4
+ .timeslot-calendar .days-wrapper-vertical .days-body {
5
5
  display: flex;
6
6
  flex-direction: row;
7
7
  }
8
+ .timeslot-calendar .days-wrapper-vertical .days-heading {
9
+ width: 100%;
10
+ display: flex;
11
+ flex-direction: row;
12
+ top: 0;
13
+ /*position: sticky;*/
14
+ }
15
+ .timeslot-calendar .days-wrapper-vertical .days-heading .day-title-row{
16
+ flex: 1;
17
+ }
18
+
8
19
  .timeslot-calendar .days-wrapper-horizontal {
9
20
  display: flex;
10
21
  flex-direction: column;
11
22
  }
23
+ .timeslot-calendar .days-wrapper-horizontal .day-title-row {
24
+ display: inline-block;
25
+ left: 0;
26
+ /*position: sticky;*/
27
+ }
28
+ .timeslot-calendar .days-wrapper-horizontal.scroll-link {
29
+ overflow-x: auto;
30
+ overflow-y: hidden;
31
+ }
12
32
  .timeslot-calendar .day-wrapper {
13
33
  flex: 1 1 0;
14
34
  }
@@ -21,13 +41,14 @@
21
41
  display: flex;
22
42
  flex-direction: column;
23
43
  position: relative;
44
+ }
45
+ .timeslot-calendar .day-content-horizontal.scroll-split {
24
46
  overflow-x: auto;
25
47
  overflow-y: hidden;
26
48
  }
27
49
  .timeslot-calendar .day-content-horizontal-inner {
28
50
  position: relative;
29
51
  }
30
-
31
52
  .timeslot-calendar .hour-indicator-col-vertical {
32
53
  display: flex;
33
54
  flex: 1 1 0;
@@ -87,6 +108,9 @@
87
108
  z-index: 1;
88
109
  box-sizing: border-box;
89
110
  }
111
+ .timeslot-calendar .current_time_indicator {
112
+ position: absolute;
113
+ }
90
114
  /*--- Event example style ----*/
91
115
  .timeslot-event {
92
116
  width: 100%;
@@ -7,8 +7,8 @@
7
7
 
8
8
  <% if calendar.orientation == :vertical %>
9
9
  <div class="days-wrapper-vertical">
10
- <% date_range.slice(0, 7).each do |day| %>
11
- <div class="day-wrapper">
10
+ <div class="days-heading">
11
+ <% date_range.slice(0, 7).each do |day| %>
12
12
  <div class="day-title-row">
13
13
  <span class="day-weekday">
14
14
  <%= t('date.abbr_day_names')[day.wday] %>
@@ -17,56 +17,65 @@
17
17
  <%= day %>
18
18
  </span>
19
19
  </div>
20
- <%= content_tag :div, class: calendar.td_classes_for(day) do %>
21
- <div class="day-content-vertical" style="height:<%=calendar.height%>px;">
22
- <% if calendar.display_grid %>
23
- <div class="hour-indicator-col-vertical">
24
- <% if calendar.display_bucket_title %>
25
- <div class="bucket-title" style="height:<%=calendar.bucket_title_size%>px"></div>
26
- <% end %>
27
- <% (0..23).each do |hour| %>
28
- <div class="hour-indicator-vertical" id="hour-<%=hour %>">
29
- <%=hour%>
30
- </div>
20
+ <% end %>
21
+ </div>
22
+ <div class="days-body">
23
+ <% date_range.slice(0, 7).each do |day| %>
24
+ <div class="day-wrapper">
25
+ <%= content_tag :div, class: calendar.td_classes_for(day) do %>
26
+ <div class="day-content-vertical" style="height:<%=calendar.height%>px;">
27
+ <% if calendar.display_grid %>
28
+ <div class="hour-indicator-col-vertical">
29
+ <% if calendar.display_bucket_title %>
30
+ <div class="bucket-title" style="height:<%=calendar.bucket_title_size%>px"></div>
31
+ <% end %>
32
+ <% (0..23).each do |hour| %>
33
+ <div class="hour-indicator-vertical" id="hour-<%=hour %>">
34
+ <%=hour%>
35
+ </div>
36
+ <% end %>
37
+ </div>
38
+ <% end %>
39
+ <% if calendar.display_current_time_indicator %>
40
+ <div class="current_time_indicator" style="top:<%=calendar.current_time_offset %>px;left:0;right:0;height:0;"></div>
31
41
  <% end %>
32
- </div>
33
- <% end %>
34
- <% events = sorted_events.fetch(day, []) %>
35
- <% buckets = calendar.split_into_buckets(events) %>
36
- <div class="buckets-wrapper" style="left:<%=calendar.grid_width%>;right:0">
37
- <div class="buckets-vertical">
38
- <% buckets.each do |bucket| %>
39
- <div class="bucket-wrapper">
40
- <div class="bucket-vertical">
41
- <% if calendar.display_bucket_title %>
42
- <div class="bucket-title" style="height:<%=calendar.bucket_title_size%>px">
43
- <%= bucket&.first&.send calendar.display_bucket_title %>
44
- </div>
45
- <% end %>
46
- <div class="events-wrapper">
47
- <% events_size = calendar.slot_events(bucket, day) %>
48
- <% bucket.each do |event| %>
49
- <div class="event-wrapper" style="z-index:20;width:<%=events_size[event][0]%>%;top:<%=events_size[event][3]%>px;left:<%=events_size[event][1]%>%;height:<%=events_size[event][2]%>px">
50
- <% if defined?(Haml) && respond_to?(:block_is_haml?) && block_is_haml?(passed_block) %>
51
- <% capture_haml(event, &passed_block) %>
52
- <% else %>
53
- <% passed_block.call event %>
54
- <% end %>
42
+ <% events = sorted_events.fetch(day, []) %>
43
+ <% buckets = calendar.split_into_buckets(events) %>
44
+ <div class="buckets-wrapper" style="left:<%=calendar.grid_width%>;right:0">
45
+ <div class="buckets-vertical">
46
+ <% buckets.each do |bucket| %>
47
+ <div class="bucket-wrapper">
48
+ <div class="bucket-vertical">
49
+ <% if calendar.display_bucket_title %>
50
+ <div class="bucket-title" style="height:<%=calendar.bucket_title_size%>px">
51
+ <%= bucket&.first&.send calendar.display_bucket_title %>
55
52
  </div>
56
53
  <% end %>
54
+ <div class="events-wrapper">
55
+ <% events_size = calendar.slot_events(bucket, day) %>
56
+ <% bucket.each do |event| %>
57
+ <div class="event-wrapper" style="width:<%=events_size[event][0]%>%;top:<%=events_size[event][3]%>px;left:<%=events_size[event][1]%>%;height:<%=events_size[event][2]%>px">
58
+ <% if defined?(Haml) && respond_to?(:block_is_haml?) && block_is_haml?(passed_block) %>
59
+ <% capture_haml(event, &passed_block) %>
60
+ <% else %>
61
+ <% passed_block.call event %>
62
+ <% end %>
63
+ </div>
64
+ <% end %>
65
+ </div>
57
66
  </div>
58
67
  </div>
59
- </div>
60
- <% end %>
68
+ <% end %>
69
+ </div>
61
70
  </div>
62
71
  </div>
63
- </div>
64
- <% end %>
65
- </div>
66
- <% end %>
72
+ <% end %>
73
+ </div>
74
+ <% end %>
75
+ </div>
67
76
  </div>
68
77
  <% elsif calendar.orientation == :horizontal %>
69
- <div class="days-wrapper-horizontal">
78
+ <div class="days-wrapper-horizontal <%= calendar.horizontal_scroll_split ? "" : "scroll-link" %>">
70
79
  <% date_range.slice(0, 7).each do |day| %>
71
80
  <div class="day-wrapper">
72
81
  <div class="day-title-row">
@@ -78,7 +87,7 @@
78
87
  </span>
79
88
  </div>
80
89
  <%= content_tag :div, class: calendar.td_classes_for(day) do %>
81
- <div class="day-content-horizontal">
90
+ <div class="day-content-horizontal <%= calendar.horizontal_scroll_split ? "scroll-split" : "" %>">
82
91
  <div class="day-content-horizontal-inner" style="width:<%=calendar.height%>px;height:<%=calendar.horizontal_height_px%>px">
83
92
  <% if calendar.display_grid %>
84
93
  <div class="hour-indicator-col-horizontal" style="z-index:-10;">
@@ -94,6 +103,9 @@
94
103
  <% end %>
95
104
  </div>
96
105
  <% end %>
106
+ <% if calendar.display_current_time_indicator && !calendar.horizontal_scroll_split %>
107
+ <div class="current_time_indicator" style="left:<%=calendar.current_time_offset %>px;top:0;bottom:0;width:0;"></div>
108
+ <% end %>
97
109
  <% events = sorted_events.fetch(day, []) %>
98
110
  <% buckets = calendar.split_into_buckets(events) %>
99
111
  <div class="buckets-wrapper" style="top:<%=calendar.grid_width%>;bottom:0">
@@ -50,6 +50,14 @@ module SimpleCalendar
50
50
  @options.fetch(:display_grid, true)
51
51
  end
52
52
 
53
+ def horizontal_scroll_split
54
+ @options.fetch(:horizontal_scroll_split, false)
55
+ end
56
+
57
+ def display_current_time_indicator
58
+ @options.fetch(:display_current_time_indicator, false)
59
+ end
60
+
53
61
  def height
54
62
  #h = (24 - TimeslotCalendar::FIRST_HOUR_SLOT) * 60 * px_per_minute
55
63
  h = 24 * 60 * px_per_minute
@@ -63,9 +71,9 @@ module SimpleCalendar
63
71
  elsif event.send(attribute).to_date < event.send(end_attribute).to_date
64
72
  (event.send(end_attribute).midnight - 60 - event.send(attribute))/60
65
73
  else
66
- event.duration
74
+ (event.send(end_attribute) - event.send(attribute))/60
67
75
  end
68
- minutes * px_per_minute
76
+ minutes * px_per_minute
69
77
  end
70
78
 
71
79
  def event_top_distance(event, day)
@@ -119,6 +127,13 @@ module SimpleCalendar
119
127
  r
120
128
  end
121
129
 
130
+ def current_time_offset
131
+ now = Time.zone.now
132
+ offset = (now.hour * 60 + now.min) * px_per_minute
133
+ offset = offset + bucket_title_size if display_bucket_title
134
+ offset
135
+ end
136
+
122
137
  private
123
138
 
124
139
  def pack_events(r, columns)
@@ -2,6 +2,6 @@
2
2
 
3
3
  module SimpleCalendar
4
4
  module Timeslot
5
- VERSION = "0.5.0"
5
+ VERSION = "0.8.0"
6
6
  end
7
7
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: simple_calendar-timeslot
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.5.0
4
+ version: 0.8.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Kim Laplume
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2021-11-14 00:00:00.000000000 Z
11
+ date: 2021-11-15 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: simple_calendar