@event-calendar/core 4.2.0 → 4.3.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.
- package/README.md +2 -2
- package/dist/index.css +14 -4
- package/dist/index.js +139 -45
- package/package.json +1 -1
- package/src/plugins/resource-timeline/Body.svelte +13 -10
- package/src/plugins/resource-timeline/Header.svelte +4 -3
- package/src/plugins/resource-timeline/NowIndicator.svelte +39 -0
- package/src/plugins/resource-timeline/View.svelte +5 -1
- package/src/plugins/resource-timeline/index.js +3 -0
- package/src/plugins/time-grid/NowIndicator.svelte +3 -3
- package/src/styles/index.scss +13 -4
- package/src/styles/timeline.scss +1 -0
package/README.md
CHANGED
|
@@ -227,8 +227,8 @@ This bundle contains a version of the calendar that includes all plugins and is
|
|
|
227
227
|
|
|
228
228
|
The first step is to include the following lines of code in the `<head>` section of your page:
|
|
229
229
|
```html
|
|
230
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@4.
|
|
231
|
-
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@4.
|
|
230
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@4.3.0/dist/event-calendar.min.css">
|
|
231
|
+
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@4.3.0/dist/event-calendar.min.js"></script>
|
|
232
232
|
```
|
|
233
233
|
|
|
234
234
|
<details>
|
package/dist/index.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* EventCalendar v4.
|
|
2
|
+
* EventCalendar v4.3.0
|
|
3
3
|
* https://github.com/vkurko/calendar
|
|
4
4
|
*/
|
|
5
5
|
.ec {
|
|
@@ -74,6 +74,7 @@
|
|
|
74
74
|
display: flex;
|
|
75
75
|
flex-direction: column;
|
|
76
76
|
min-width: 0;
|
|
77
|
+
position: relative;
|
|
77
78
|
}
|
|
78
79
|
.ec-timeline .ec-content {
|
|
79
80
|
flex-direction: column;
|
|
@@ -725,19 +726,28 @@
|
|
|
725
726
|
.ec-now-indicator {
|
|
726
727
|
position: absolute;
|
|
727
728
|
z-index: 1005;
|
|
729
|
+
pointer-events: none;
|
|
730
|
+
}
|
|
731
|
+
.ec-time-grid .ec-now-indicator {
|
|
728
732
|
width: 100%;
|
|
729
733
|
border-top: var(--ec-now-indicator-color) solid 2px;
|
|
730
|
-
|
|
734
|
+
}
|
|
735
|
+
.ec-timeline .ec-now-indicator {
|
|
736
|
+
height: 100%;
|
|
737
|
+
border-left: var(--ec-now-indicator-color) solid 2px;
|
|
738
|
+
will-change: transform;
|
|
731
739
|
}
|
|
732
740
|
.ec-now-indicator:before {
|
|
733
741
|
background: var(--ec-now-indicator-color);
|
|
734
742
|
border-radius: 50%;
|
|
735
743
|
content: "";
|
|
736
|
-
|
|
744
|
+
display: block;
|
|
737
745
|
height: 12px;
|
|
738
746
|
margin-top: -7px;
|
|
739
747
|
width: 12px;
|
|
740
|
-
|
|
748
|
+
}
|
|
749
|
+
.ec-timeline .ec-now-indicator:before {
|
|
750
|
+
margin-left: -7px;
|
|
741
751
|
}
|
|
742
752
|
|
|
743
753
|
.ec-resizer {
|
package/dist/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* EventCalendar v4.
|
|
2
|
+
* EventCalendar v4.3.0
|
|
3
3
|
* https://github.com/vkurko/calendar
|
|
4
4
|
*/
|
|
5
5
|
import { tick, getContext, untrack, setContext, onMount, mount, unmount } from "svelte";
|
|
@@ -1465,7 +1465,7 @@ function Buttons($$anchor, $$props) {
|
|
|
1465
1465
|
$$cleanup();
|
|
1466
1466
|
}
|
|
1467
1467
|
var root_3$5 = $.template(`<div><!></div>`);
|
|
1468
|
-
var root_1$
|
|
1468
|
+
var root_1$d = $.template(`<div></div>`);
|
|
1469
1469
|
var root$r = $.template(`<nav></nav>`);
|
|
1470
1470
|
function Toolbar($$anchor, $$props) {
|
|
1471
1471
|
$.push($$props, true);
|
|
@@ -1483,7 +1483,7 @@ function Toolbar($$anchor, $$props) {
|
|
|
1483
1483
|
});
|
|
1484
1484
|
var nav = root$r();
|
|
1485
1485
|
$.each(nav, 21, () => keys($.get(sections)), $.index, ($$anchor2, key) => {
|
|
1486
|
-
var div = root_1$
|
|
1486
|
+
var div = root_1$d();
|
|
1487
1487
|
$.each(div, 21, () => $.get(sections)[$.get(key)], $.index, ($$anchor3, buttons) => {
|
|
1488
1488
|
var fragment = $.comment();
|
|
1489
1489
|
var node = $.first_child(fragment);
|
|
@@ -1772,7 +1772,7 @@ function days(state) {
|
|
|
1772
1772
|
return days2;
|
|
1773
1773
|
});
|
|
1774
1774
|
}
|
|
1775
|
-
var root_1$
|
|
1775
|
+
var root_1$c = $.template(`<div role="columnheader"><span></span></div>`);
|
|
1776
1776
|
var root$p = $.template(`<div><div role="row"></div> <div></div></div>`);
|
|
1777
1777
|
function Header$1($$anchor, $$props) {
|
|
1778
1778
|
$.push($$props, false);
|
|
@@ -1791,7 +1791,7 @@ function Header$1($$anchor, $$props) {
|
|
|
1791
1791
|
var div = root$p();
|
|
1792
1792
|
var div_1 = $.child(div);
|
|
1793
1793
|
$.each(div_1, 5, $_days, $.index, ($$anchor2, day) => {
|
|
1794
|
-
var div_2 = root_1$
|
|
1794
|
+
var div_2 = root_1$c();
|
|
1795
1795
|
var span = $.child(div_2);
|
|
1796
1796
|
$.action(span, ($$node, $$action_arg) => setContent == null ? void 0 : setContent($$node, $$action_arg), () => $_intlDayHeader().format($.get(day)));
|
|
1797
1797
|
$.reset(div_2);
|
|
@@ -1823,7 +1823,7 @@ function Header$1($$anchor, $$props) {
|
|
|
1823
1823
|
$.pop();
|
|
1824
1824
|
$$cleanup();
|
|
1825
1825
|
}
|
|
1826
|
-
var root_1$
|
|
1826
|
+
var root_1$b = $.template(`<div></div>`);
|
|
1827
1827
|
var root$o = $.template(`<article><!></article>`);
|
|
1828
1828
|
function BaseEvent($$anchor, $$props) {
|
|
1829
1829
|
$.push($$props, true);
|
|
@@ -1909,7 +1909,7 @@ function BaseEvent($$anchor, $$props) {
|
|
|
1909
1909
|
};
|
|
1910
1910
|
{
|
|
1911
1911
|
const defaultBody = ($$anchor2) => {
|
|
1912
|
-
var div = root_1$
|
|
1912
|
+
var div = root_1$b();
|
|
1913
1913
|
$.action(div, ($$node, $$action_arg) => setContent == null ? void 0 : setContent($$node, $$action_arg), () => $.get(content));
|
|
1914
1914
|
$.template_effect(() => $.set_class(div, 1, $.clsx($theme().eventBody)));
|
|
1915
1915
|
$.append($$anchor2, div);
|
|
@@ -2268,7 +2268,7 @@ function Popup($$anchor, $$props) {
|
|
|
2268
2268
|
$$cleanup();
|
|
2269
2269
|
}
|
|
2270
2270
|
$.delegate(["pointerdown", "click", "keydown"]);
|
|
2271
|
-
var root_1$
|
|
2271
|
+
var root_1$a = $.template(`<span></span>`);
|
|
2272
2272
|
var root_5$1 = $.template(`<div><!></div>`);
|
|
2273
2273
|
var root_6 = $.template(`<div><!></div>`);
|
|
2274
2274
|
var root_4$2 = $.template(`<!> <!>`, 1);
|
|
@@ -2401,7 +2401,7 @@ function Day$4($$anchor, $$props) {
|
|
|
2401
2401
|
var node = $.sibling(time, 2);
|
|
2402
2402
|
{
|
|
2403
2403
|
var consequent = ($$anchor2) => {
|
|
2404
|
-
var span = root_1$
|
|
2404
|
+
var span = root_1$a();
|
|
2405
2405
|
$.action(span, ($$node, $$action_arg) => setContent == null ? void 0 : setContent($$node, $$action_arg), () => $.get(weekNumber));
|
|
2406
2406
|
$.template_effect(() => $.set_class(span, 1, $theme().weekNumber));
|
|
2407
2407
|
$.append($$anchor2, span);
|
|
@@ -3487,7 +3487,7 @@ function Pointer($$anchor, $$props) {
|
|
|
3487
3487
|
$$cleanup();
|
|
3488
3488
|
return $$pop;
|
|
3489
3489
|
}
|
|
3490
|
-
var root_1$
|
|
3490
|
+
var root_1$9 = $.template(`<div></div>`);
|
|
3491
3491
|
var root_2$6 = $.template(`<div></div>`);
|
|
3492
3492
|
var root$i = $.template(`<!> <!> <!>`, 1);
|
|
3493
3493
|
function Resizer($$anchor, $$props) {
|
|
@@ -3519,7 +3519,7 @@ function Resizer($$anchor, $$props) {
|
|
|
3519
3519
|
var node = $.first_child(fragment);
|
|
3520
3520
|
{
|
|
3521
3521
|
var consequent = ($$anchor2) => {
|
|
3522
|
-
var div = root_1$
|
|
3522
|
+
var div = root_1$9();
|
|
3523
3523
|
var event_handler = $.derived(() => createResizeHandler(true));
|
|
3524
3524
|
div.__pointerdown = function(...$$args) {
|
|
3525
3525
|
var _a;
|
|
@@ -3663,7 +3663,7 @@ const index$3 = {
|
|
|
3663
3663
|
state._auxiliary.update(($_auxiliary) => [...$_auxiliary, Auxiliary]);
|
|
3664
3664
|
}
|
|
3665
3665
|
};
|
|
3666
|
-
var root_1$
|
|
3666
|
+
var root_1$8 = $.template(`<div></div> <!>`, 1);
|
|
3667
3667
|
function Event$3($$anchor, $$props) {
|
|
3668
3668
|
$.push($$props, true);
|
|
3669
3669
|
const [$$stores, $$cleanup] = $.setup_stores();
|
|
@@ -3681,7 +3681,7 @@ function Event$3($$anchor, $$props) {
|
|
|
3681
3681
|
});
|
|
3682
3682
|
{
|
|
3683
3683
|
const body = ($$anchor2, defaultBody = $.noop, bgColor = $.noop, txtColor = $.noop) => {
|
|
3684
|
-
var fragment_1 = root_1$
|
|
3684
|
+
var fragment_1 = root_1$8();
|
|
3685
3685
|
var div = $.first_child(fragment_1);
|
|
3686
3686
|
let styles_1;
|
|
3687
3687
|
var node = $.sibling(div, 2);
|
|
@@ -3709,7 +3709,7 @@ function Event$3($$anchor, $$props) {
|
|
|
3709
3709
|
$.pop();
|
|
3710
3710
|
$$cleanup();
|
|
3711
3711
|
}
|
|
3712
|
-
var root_1$
|
|
3712
|
+
var root_1$7 = $.template(`<div role="listitem"><h4><time></time> <time></time></h4> <!></div>`);
|
|
3713
3713
|
function Day$3($$anchor, $$props) {
|
|
3714
3714
|
$.push($$props, true);
|
|
3715
3715
|
const [$$stores, $$cleanup] = $.setup_stores();
|
|
@@ -3770,7 +3770,7 @@ function Day$3($$anchor, $$props) {
|
|
|
3770
3770
|
var node = $.first_child(fragment);
|
|
3771
3771
|
{
|
|
3772
3772
|
var consequent = ($$anchor2) => {
|
|
3773
|
-
var div = root_1$
|
|
3773
|
+
var div = root_1$7();
|
|
3774
3774
|
div.__pointerdown = function(...$$args) {
|
|
3775
3775
|
var _a, _b;
|
|
3776
3776
|
(_b = (_a = $_interaction().action) == null ? void 0 : _a.select) == null ? void 0 : _b.apply(this, $$args);
|
|
@@ -3825,7 +3825,7 @@ function onclick$1(jsEvent, $noEventsClick, noEventsClick, $_view, _view) {
|
|
|
3825
3825
|
});
|
|
3826
3826
|
}
|
|
3827
3827
|
}
|
|
3828
|
-
var root_1$
|
|
3828
|
+
var root_1$6 = $.template(`<div></div>`);
|
|
3829
3829
|
var root$g = $.template(`<div><div><!></div></div>`);
|
|
3830
3830
|
function Body$2($$anchor, $$props) {
|
|
3831
3831
|
$.push($$props, true);
|
|
@@ -3866,7 +3866,7 @@ function Body$2($$anchor, $$props) {
|
|
|
3866
3866
|
var node = $.child(div_1);
|
|
3867
3867
|
{
|
|
3868
3868
|
var consequent = ($$anchor2) => {
|
|
3869
|
-
var div_2 = root_1$
|
|
3869
|
+
var div_2 = root_1$6();
|
|
3870
3870
|
div_2.__click = [
|
|
3871
3871
|
onclick$1,
|
|
3872
3872
|
$noEventsClick,
|
|
@@ -4015,7 +4015,7 @@ function createAllDayContent(allDayContent) {
|
|
|
4015
4015
|
}
|
|
4016
4016
|
return content;
|
|
4017
4017
|
}
|
|
4018
|
-
var root_1$
|
|
4018
|
+
var root_1$5 = $.template(`<time></time>`);
|
|
4019
4019
|
var root$f = $.template(`<div><div></div> <!></div> <div role="row"><div><!></div> <!></div>`, 1);
|
|
4020
4020
|
function Section($$anchor, $$props) {
|
|
4021
4021
|
$.push($$props, true);
|
|
@@ -4038,7 +4038,7 @@ function Section($$anchor, $$props) {
|
|
|
4038
4038
|
$.action(div_1, ($$node, $$action_arg) => setContent == null ? void 0 : setContent($$node, $$action_arg), () => $.get(allDayText));
|
|
4039
4039
|
var node = $.sibling(div_1, 2);
|
|
4040
4040
|
$.each(node, 1, $_times, $.index, ($$anchor2, time, i) => {
|
|
4041
|
-
var time_1 = root_1$
|
|
4041
|
+
var time_1 = root_1$5();
|
|
4042
4042
|
$.action(time_1, ($$node, $$action_arg) => setContent == null ? void 0 : setContent($$node, $$action_arg), () => $.get(time)[1]);
|
|
4043
4043
|
$.template_effect(() => {
|
|
4044
4044
|
$.set_class(time_1, 1, `${$theme().time ?? ""}${(i || $.get(showAllTimes)) && $.get(time)[2] ? "" : " " + $theme().minor}`);
|
|
@@ -4200,7 +4200,7 @@ function Event$2($$anchor, $$props) {
|
|
|
4200
4200
|
$$cleanup();
|
|
4201
4201
|
}
|
|
4202
4202
|
var root$d = $.template(`<div></div>`);
|
|
4203
|
-
function NowIndicator($$anchor, $$props) {
|
|
4203
|
+
function NowIndicator$1($$anchor, $$props) {
|
|
4204
4204
|
$.push($$props, true);
|
|
4205
4205
|
const [$$stores, $$cleanup] = $.setup_stores();
|
|
4206
4206
|
const $_now = () => $.store_get(_now, "$_now", $$stores);
|
|
@@ -4217,10 +4217,10 @@ function NowIndicator($$anchor, $$props) {
|
|
|
4217
4217
|
_today,
|
|
4218
4218
|
_slotTimeLimits
|
|
4219
4219
|
} = getContext("state");
|
|
4220
|
-
let start = $.derived(() => ($_now() - $_today()) / 1e3
|
|
4220
|
+
let start = $.derived(() => ($_now() - $_today()) / 1e3);
|
|
4221
4221
|
let top = $.derived(() => {
|
|
4222
|
-
let step = $slotDuration().seconds
|
|
4223
|
-
let offset = $_slotTimeLimits().min.seconds
|
|
4222
|
+
let step = $slotDuration().seconds;
|
|
4223
|
+
let offset = $_slotTimeLimits().min.seconds;
|
|
4224
4224
|
return ($.get(start) - offset) / step * $slotHeight();
|
|
4225
4225
|
});
|
|
4226
4226
|
var div = root$d();
|
|
@@ -4400,7 +4400,7 @@ function Day$2($$anchor, $$props) {
|
|
|
4400
4400
|
var node_6 = $.child(div_3);
|
|
4401
4401
|
{
|
|
4402
4402
|
var consequent_4 = ($$anchor2) => {
|
|
4403
|
-
NowIndicator($$anchor2, {});
|
|
4403
|
+
NowIndicator$1($$anchor2, {});
|
|
4404
4404
|
};
|
|
4405
4405
|
$.if(node_6, ($$render) => {
|
|
4406
4406
|
if ($nowIndicator() && $.get(isToday) && !$.get(disabled)) $$render(consequent_4);
|
|
@@ -5250,7 +5250,7 @@ function onclick(_, expanded, payload, toggle, resources) {
|
|
|
5250
5250
|
toggle($.get(payload).children, $.get(expanded));
|
|
5251
5251
|
resources.update(identity);
|
|
5252
5252
|
}
|
|
5253
|
-
var root_1$
|
|
5253
|
+
var root_1$4 = $.template(`<span></span>`);
|
|
5254
5254
|
var root_2$2 = $.template(`<button><!></button>`);
|
|
5255
5255
|
var root$6 = $.template(`<!> <span><!></span>`, 1);
|
|
5256
5256
|
function Expander($$anchor, $$props) {
|
|
@@ -5276,7 +5276,7 @@ function Expander($$anchor, $$props) {
|
|
|
5276
5276
|
var fragment = root$6();
|
|
5277
5277
|
var node = $.first_child(fragment);
|
|
5278
5278
|
$.each(node, 17, () => Array($.get(payload).level), $.index, ($$anchor2, level) => {
|
|
5279
|
-
var span = root_1$
|
|
5279
|
+
var span = root_1$4();
|
|
5280
5280
|
$.template_effect(() => $.set_class(span, 1, $theme().expander));
|
|
5281
5281
|
$.append($$anchor2, span);
|
|
5282
5282
|
});
|
|
@@ -5323,7 +5323,7 @@ function Expander($$anchor, $$props) {
|
|
|
5323
5323
|
$$cleanup();
|
|
5324
5324
|
}
|
|
5325
5325
|
$.delegate(["click"]);
|
|
5326
|
-
var root_1$
|
|
5326
|
+
var root_1$3 = $.template(`<div role="rowheader"><!> <!></div>`);
|
|
5327
5327
|
var root$5 = $.template(`<div><div></div> <div></div></div>`);
|
|
5328
5328
|
function Sidebar($$anchor, $$props) {
|
|
5329
5329
|
$.push($$props, false);
|
|
@@ -5352,7 +5352,7 @@ function Sidebar($$anchor, $$props) {
|
|
|
5352
5352
|
var div_1 = $.child(div);
|
|
5353
5353
|
var div_2 = $.sibling(div_1, 2);
|
|
5354
5354
|
$.each(div_2, 5, $_viewResources, $.index, ($$anchor2, resource) => {
|
|
5355
|
-
var div_3 = root_1$
|
|
5355
|
+
var div_3 = root_1$3();
|
|
5356
5356
|
var node = $.child(div_3);
|
|
5357
5357
|
{
|
|
5358
5358
|
var consequent = ($$anchor3) => {
|
|
@@ -5402,7 +5402,7 @@ function Sidebar($$anchor, $$props) {
|
|
|
5402
5402
|
var root_3 = $.template(`<div role="columnheader"><time></time></div>`);
|
|
5403
5403
|
var root_2$1 = $.template(`<div><time></time></div> <div></div>`, 1);
|
|
5404
5404
|
var root_4 = $.template(`<div role="columnheader"><time></time></div>`);
|
|
5405
|
-
var root_1$
|
|
5405
|
+
var root_1$2 = $.template(`<div><!></div>`);
|
|
5406
5406
|
var root$4 = $.template(`<div><div role="row"></div> <div></div></div>`);
|
|
5407
5407
|
function Header($$anchor, $$props) {
|
|
5408
5408
|
$.push($$props, false);
|
|
@@ -5410,6 +5410,7 @@ function Header($$anchor, $$props) {
|
|
|
5410
5410
|
const $theme = () => $.store_get(theme, "$theme", $$stores);
|
|
5411
5411
|
const $_headerEl = () => $.store_get(_headerEl, "$_headerEl", $$stores);
|
|
5412
5412
|
const $_viewDates = () => $.store_get(_viewDates, "$_viewDates", $$stores);
|
|
5413
|
+
const $_today = () => $.store_get(_today, "$_today", $$stores);
|
|
5413
5414
|
const $slotDuration = () => $.store_get(slotDuration, "$slotDuration", $$stores);
|
|
5414
5415
|
const $_intlDayHeaderAL = () => $.store_get(_intlDayHeaderAL, "$_intlDayHeaderAL", $$stores);
|
|
5415
5416
|
const $_intlDayHeader = () => $.store_get(_intlDayHeader, "$_intlDayHeader", $$stores);
|
|
@@ -5420,6 +5421,7 @@ function Header($$anchor, $$props) {
|
|
|
5420
5421
|
_intlDayHeader,
|
|
5421
5422
|
_intlDayHeaderAL,
|
|
5422
5423
|
_dayTimes,
|
|
5424
|
+
_today,
|
|
5423
5425
|
_viewDates,
|
|
5424
5426
|
slotDuration,
|
|
5425
5427
|
theme
|
|
@@ -5428,7 +5430,7 @@ function Header($$anchor, $$props) {
|
|
|
5428
5430
|
var div = root$4();
|
|
5429
5431
|
var div_1 = $.child(div);
|
|
5430
5432
|
$.each(div_1, 5, $_viewDates, $.index, ($$anchor2, date) => {
|
|
5431
|
-
var div_2 = root_1$
|
|
5433
|
+
var div_2 = root_1$2();
|
|
5432
5434
|
var node = $.child(div_2);
|
|
5433
5435
|
{
|
|
5434
5436
|
var consequent = ($$anchor3) => {
|
|
@@ -5491,12 +5493,13 @@ function Header($$anchor, $$props) {
|
|
|
5491
5493
|
}
|
|
5492
5494
|
$.reset(div_2);
|
|
5493
5495
|
$.template_effect(
|
|
5494
|
-
($0) => $.set_class(div_2, 1, `${$theme().day ?? ""} ${$0 ?? ""}`),
|
|
5496
|
+
($0, $1) => $.set_class(div_2, 1, `${$theme().day ?? ""} ${$0 ?? ""}${$1 ?? ""}`),
|
|
5495
5497
|
[
|
|
5496
5498
|
() => {
|
|
5497
5499
|
var _a;
|
|
5498
5500
|
return (_a = $theme().weekdays) == null ? void 0 : _a[$.get(date).getUTCDay()];
|
|
5499
|
-
}
|
|
5501
|
+
},
|
|
5502
|
+
() => datesEqual($.get(date), $_today()) ? " " + $theme().today : ""
|
|
5500
5503
|
],
|
|
5501
5504
|
$.derived_safe_equal
|
|
5502
5505
|
);
|
|
@@ -5699,7 +5702,7 @@ function Event($$anchor, $$props) {
|
|
|
5699
5702
|
$$cleanup();
|
|
5700
5703
|
return $$pop;
|
|
5701
5704
|
}
|
|
5702
|
-
var root_1 = $.template(`<!> <!> <!> <!>`, 1);
|
|
5705
|
+
var root_1$1 = $.template(`<!> <!> <!> <!>`, 1);
|
|
5703
5706
|
var root$3 = $.template(`<div role="cell"><div><!></div></div>`);
|
|
5704
5707
|
function Day($$anchor, $$props) {
|
|
5705
5708
|
$.push($$props, true);
|
|
@@ -5761,7 +5764,7 @@ function Day($$anchor, $$props) {
|
|
|
5761
5764
|
var node = $.child(div_1);
|
|
5762
5765
|
{
|
|
5763
5766
|
var consequent_2 = ($$anchor2) => {
|
|
5764
|
-
var fragment = root_1();
|
|
5767
|
+
var fragment = root_1$1();
|
|
5765
5768
|
var node_1 = $.first_child(fragment);
|
|
5766
5769
|
$.each(node_1, 17, () => $.get(dayBgChunks), (chunk) => chunk.event, ($$anchor3, chunk) => {
|
|
5767
5770
|
Event($$anchor3, {
|
|
@@ -5966,9 +5969,9 @@ var root$1 = $.template(`<div><div><div></div> <!></div></div>`);
|
|
|
5966
5969
|
function Body($$anchor, $$props) {
|
|
5967
5970
|
$.push($$props, true);
|
|
5968
5971
|
const [$$stores, $$cleanup] = $.setup_stores();
|
|
5969
|
-
const $_bodyEl = () => $.store_get(_bodyEl, "$_bodyEl", $$stores);
|
|
5970
5972
|
const $_dayTimeLimits = () => $.store_get(_dayTimeLimits, "$_dayTimeLimits", $$stores);
|
|
5971
5973
|
const $_viewDates = () => $.store_get(_viewDates, "$_viewDates", $$stores);
|
|
5974
|
+
const $_bodyEl = () => $.store_get(_bodyEl, "$_bodyEl", $$stores);
|
|
5972
5975
|
const $scrollTime = () => $.store_get(scrollTime, "$scrollTime", $$stores);
|
|
5973
5976
|
const $slotDuration = () => $.store_get(slotDuration, "$slotDuration", $$stores);
|
|
5974
5977
|
const $slotWidth = () => $.store_get(slotWidth, "$slotWidth", $$stores);
|
|
@@ -5981,28 +5984,28 @@ function Body($$anchor, $$props) {
|
|
|
5981
5984
|
const $_dayTimes = () => $.store_get(_dayTimes, "$_dayTimes", $$stores);
|
|
5982
5985
|
let {
|
|
5983
5986
|
_bodyEl,
|
|
5987
|
+
_bodyHeight,
|
|
5988
|
+
_bodyWidth,
|
|
5989
|
+
_bodyScrollLeft,
|
|
5984
5990
|
_headerEl,
|
|
5985
5991
|
_events,
|
|
5986
5992
|
_sidebarEl,
|
|
5987
5993
|
_dayTimes,
|
|
5988
5994
|
_dayTimeLimits,
|
|
5995
|
+
_recheckScrollable,
|
|
5989
5996
|
_resHs,
|
|
5990
5997
|
_viewResources,
|
|
5991
5998
|
_viewDates,
|
|
5992
|
-
_recheckScrollable,
|
|
5993
5999
|
scrollTime,
|
|
5994
6000
|
slotDuration,
|
|
5995
6001
|
slotWidth,
|
|
5996
6002
|
theme
|
|
5997
6003
|
} = getContext("state");
|
|
5998
|
-
let el = $.state(void 0);
|
|
5999
6004
|
let refs = [];
|
|
6000
|
-
$.user_effect(() => {
|
|
6001
|
-
$.store_set(_bodyEl, $.get(el));
|
|
6002
|
-
});
|
|
6003
6005
|
function scrollToTime() {
|
|
6004
6006
|
let slotTimeLimits2 = getSlotTimeLimits($_dayTimeLimits(), $_viewDates()[0]);
|
|
6005
|
-
$.
|
|
6007
|
+
$.store_mutate(_bodyEl, $.untrack($_bodyEl).scrollLeft = (toSeconds($scrollTime()) - toSeconds(slotTimeLimits2.min)) / toSeconds($slotDuration()) * $slotWidth(), $.untrack($_bodyEl));
|
|
6008
|
+
$.store_set(_bodyScrollLeft, $_bodyEl().scrollLeft);
|
|
6006
6009
|
}
|
|
6007
6010
|
$.user_effect(() => {
|
|
6008
6011
|
$_viewDates();
|
|
@@ -6021,6 +6024,12 @@ function Body($$anchor, $$props) {
|
|
|
6021
6024
|
function onscroll() {
|
|
6022
6025
|
$.store_mutate(_headerEl, $.untrack($_headerEl).scrollLeft = $_bodyEl().scrollLeft, $.untrack($_headerEl));
|
|
6023
6026
|
$.store_mutate(_sidebarEl, $.untrack($_sidebarEl).scrollTop = $_bodyEl().scrollTop, $.untrack($_sidebarEl));
|
|
6027
|
+
$.store_set(_bodyScrollLeft, $_bodyEl().scrollLeft);
|
|
6028
|
+
}
|
|
6029
|
+
function onresize() {
|
|
6030
|
+
$.store_set(_bodyHeight, $_bodyEl().clientHeight);
|
|
6031
|
+
$.store_set(_bodyWidth, $_bodyEl().clientWidth);
|
|
6032
|
+
$.store_set(_recheckScrollable, true);
|
|
6024
6033
|
}
|
|
6025
6034
|
var div = root$1();
|
|
6026
6035
|
$.event("resize", $.window, reposition);
|
|
@@ -6052,8 +6061,8 @@ function Body($$anchor, $$props) {
|
|
|
6052
6061
|
});
|
|
6053
6062
|
$.reset(div_1);
|
|
6054
6063
|
$.reset(div);
|
|
6055
|
-
$.bind_this(div, ($$value) => $.
|
|
6056
|
-
$.action(div, ($$node, $$action_arg) => observeResize == null ? void 0 : observeResize($$node, $$action_arg), () =>
|
|
6064
|
+
$.bind_this(div, ($$value) => $.store_set(_bodyEl, $$value), () => $_bodyEl());
|
|
6065
|
+
$.action(div, ($$node, $$action_arg) => observeResize == null ? void 0 : observeResize($$node, $$action_arg), () => onresize);
|
|
6057
6066
|
$.template_effect(() => {
|
|
6058
6067
|
$.set_class(div, 1, $theme().body);
|
|
6059
6068
|
$.set_class(div_1, 1, $theme().content);
|
|
@@ -6064,12 +6073,85 @@ function Body($$anchor, $$props) {
|
|
|
6064
6073
|
$.pop();
|
|
6065
6074
|
$$cleanup();
|
|
6066
6075
|
}
|
|
6067
|
-
var
|
|
6076
|
+
var root_1 = $.template(`<div></div>`);
|
|
6077
|
+
function NowIndicator($$anchor, $$props) {
|
|
6078
|
+
$.push($$props, true);
|
|
6079
|
+
const [$$stores, $$cleanup] = $.setup_stores();
|
|
6080
|
+
const $_viewDates = () => $.store_get(_viewDates, "$_viewDates", $$stores);
|
|
6081
|
+
const $_dayTimeLimits = () => $.store_get(_dayTimeLimits, "$_dayTimeLimits", $$stores);
|
|
6082
|
+
const $_today = () => $.store_get(_today, "$_today", $$stores);
|
|
6083
|
+
const $_now = () => $.store_get(_now, "$_now", $$stores);
|
|
6084
|
+
const $slotDuration = () => $.store_get(slotDuration, "$slotDuration", $$stores);
|
|
6085
|
+
const $slotWidth = () => $.store_get(slotWidth, "$slotWidth", $$stores);
|
|
6086
|
+
const $_bodyScrollLeft = () => $.store_get(_bodyScrollLeft, "$_bodyScrollLeft", $$stores);
|
|
6087
|
+
const $_bodyWidth = () => $.store_get(_bodyWidth, "$_bodyWidth", $$stores);
|
|
6088
|
+
const $theme = () => $.store_get(theme, "$theme", $$stores);
|
|
6089
|
+
const $_headerHeight = () => $.store_get(_headerHeight, "$_headerHeight", $$stores);
|
|
6090
|
+
const $_bodyHeight = () => $.store_get(_bodyHeight, "$_bodyHeight", $$stores);
|
|
6091
|
+
let {
|
|
6092
|
+
slotDuration,
|
|
6093
|
+
slotWidth,
|
|
6094
|
+
theme,
|
|
6095
|
+
_bodyHeight,
|
|
6096
|
+
_bodyWidth,
|
|
6097
|
+
_bodyScrollLeft,
|
|
6098
|
+
_headerHeight,
|
|
6099
|
+
_dayTimeLimits,
|
|
6100
|
+
_now,
|
|
6101
|
+
_today,
|
|
6102
|
+
_viewDates
|
|
6103
|
+
} = getContext("state");
|
|
6104
|
+
let left = $.derived(() => {
|
|
6105
|
+
let offset = 0;
|
|
6106
|
+
for (let i = 0; i < $_viewDates().length; ++i) {
|
|
6107
|
+
let slotTimeLimits2 = getSlotTimeLimits($_dayTimeLimits(), $_viewDates()[i]);
|
|
6108
|
+
if (datesEqual($_viewDates()[i], $_today())) {
|
|
6109
|
+
let dayStart = addDuration(cloneDate($_viewDates()[i]), slotTimeLimits2.min);
|
|
6110
|
+
let dayEnd = addDuration(cloneDate($_viewDates()[i]), slotTimeLimits2.max);
|
|
6111
|
+
if ($_now() >= dayStart && $_now() <= dayEnd) {
|
|
6112
|
+
offset += ($_now() - dayStart) / 1e3;
|
|
6113
|
+
break;
|
|
6114
|
+
} else {
|
|
6115
|
+
return null;
|
|
6116
|
+
}
|
|
6117
|
+
} else {
|
|
6118
|
+
offset += slotTimeLimits2.max.seconds - slotTimeLimits2.min.seconds;
|
|
6119
|
+
}
|
|
6120
|
+
}
|
|
6121
|
+
let step = $slotDuration().seconds;
|
|
6122
|
+
return offset / step * $slotWidth() - $_bodyScrollLeft();
|
|
6123
|
+
});
|
|
6124
|
+
var fragment = $.comment();
|
|
6125
|
+
var node = $.first_child(fragment);
|
|
6126
|
+
{
|
|
6127
|
+
var consequent = ($$anchor2) => {
|
|
6128
|
+
var div = root_1();
|
|
6129
|
+
let styles;
|
|
6130
|
+
$.template_effect(() => {
|
|
6131
|
+
$.set_class(div, 1, $theme().nowIndicator);
|
|
6132
|
+
styles = $.set_style(div, "", styles, {
|
|
6133
|
+
top: `${$_headerHeight() + 2}px`,
|
|
6134
|
+
left: `${$.get(left) ?? ""}px`,
|
|
6135
|
+
height: `${$_bodyHeight() - 1}px`
|
|
6136
|
+
});
|
|
6137
|
+
});
|
|
6138
|
+
$.append($$anchor2, div);
|
|
6139
|
+
};
|
|
6140
|
+
$.if(node, ($$render) => {
|
|
6141
|
+
if ($.get(left) !== null && $.get(left) >= 3 && $.get(left) <= $_bodyWidth() - 3) $$render(consequent);
|
|
6142
|
+
});
|
|
6143
|
+
}
|
|
6144
|
+
$.append($$anchor, fragment);
|
|
6145
|
+
$.pop();
|
|
6146
|
+
$$cleanup();
|
|
6147
|
+
}
|
|
6148
|
+
var root = $.template(`<div><!> <div><!> <!> <!></div></div>`);
|
|
6068
6149
|
function View($$anchor, $$props) {
|
|
6069
6150
|
$.push($$props, false);
|
|
6070
6151
|
const [$$stores, $$cleanup] = $.setup_stores();
|
|
6071
6152
|
const $theme = () => $.store_get(theme, "$theme", $$stores);
|
|
6072
|
-
|
|
6153
|
+
const $nowIndicator = () => $.store_get(nowIndicator, "$nowIndicator", $$stores);
|
|
6154
|
+
let { nowIndicator, theme } = getContext("state");
|
|
6073
6155
|
$.init();
|
|
6074
6156
|
var div = root();
|
|
6075
6157
|
var node = $.child(div);
|
|
@@ -6079,6 +6161,15 @@ function View($$anchor, $$props) {
|
|
|
6079
6161
|
Header(node_1, {});
|
|
6080
6162
|
var node_2 = $.sibling(node_1, 2);
|
|
6081
6163
|
Body(node_2, {});
|
|
6164
|
+
var node_3 = $.sibling(node_2, 2);
|
|
6165
|
+
{
|
|
6166
|
+
var consequent = ($$anchor2) => {
|
|
6167
|
+
NowIndicator($$anchor2, {});
|
|
6168
|
+
};
|
|
6169
|
+
$.if(node_3, ($$render) => {
|
|
6170
|
+
if ($nowIndicator()) $$render(consequent);
|
|
6171
|
+
});
|
|
6172
|
+
}
|
|
6082
6173
|
$.reset(div_1);
|
|
6083
6174
|
$.reset(div);
|
|
6084
6175
|
$.template_effect(() => {
|
|
@@ -6135,6 +6226,9 @@ const index = {
|
|
|
6135
6226
|
if (!("_viewResources" in state)) {
|
|
6136
6227
|
state._viewResources = viewResources(state);
|
|
6137
6228
|
}
|
|
6229
|
+
state._bodyHeight = writable(0);
|
|
6230
|
+
state._bodyWidth = writable(0);
|
|
6231
|
+
state._bodyScrollLeft = writable(0);
|
|
6138
6232
|
state._headerEl = writable(void 0);
|
|
6139
6233
|
state._headerHeight = writable(0);
|
|
6140
6234
|
state._dayTimeLimits = dayTimeLimits(state);
|
package/package.json
CHANGED
|
@@ -4,19 +4,15 @@
|
|
|
4
4
|
import {getSlotTimeLimits} from './lib.js';
|
|
5
5
|
import Days from './Days.svelte';
|
|
6
6
|
|
|
7
|
-
let {_bodyEl,
|
|
8
|
-
_recheckScrollable, scrollTime, slotDuration, slotWidth, theme} = getContext('state');
|
|
7
|
+
let {_bodyEl, _bodyHeight, _bodyWidth, _bodyScrollLeft, _headerEl, _events, _sidebarEl, _dayTimes, _dayTimeLimits,
|
|
8
|
+
_recheckScrollable, _resHs, _viewResources, _viewDates, scrollTime, slotDuration, slotWidth, theme} = getContext('state');
|
|
9
9
|
|
|
10
|
-
let el = $state();
|
|
11
10
|
let refs = [];
|
|
12
11
|
|
|
13
|
-
$effect(() => {
|
|
14
|
-
$_bodyEl = el;
|
|
15
|
-
});
|
|
16
|
-
|
|
17
12
|
function scrollToTime() {
|
|
18
13
|
let slotTimeLimits = getSlotTimeLimits($_dayTimeLimits, $_viewDates[0]);
|
|
19
|
-
|
|
14
|
+
$_bodyEl.scrollLeft = (toSeconds($scrollTime) - toSeconds(slotTimeLimits.min)) / toSeconds($slotDuration) * $slotWidth;
|
|
15
|
+
$_bodyScrollLeft = $_bodyEl.scrollLeft;
|
|
20
16
|
}
|
|
21
17
|
$effect(() => {
|
|
22
18
|
$_viewDates;
|
|
@@ -37,14 +33,21 @@
|
|
|
37
33
|
function onscroll() {
|
|
38
34
|
$_headerEl.scrollLeft = $_bodyEl.scrollLeft;
|
|
39
35
|
$_sidebarEl.scrollTop = $_bodyEl.scrollTop;
|
|
36
|
+
$_bodyScrollLeft = $_bodyEl.scrollLeft;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
function onresize() {
|
|
40
|
+
$_bodyHeight = $_bodyEl.clientHeight;
|
|
41
|
+
$_bodyWidth = $_bodyEl.clientWidth;
|
|
42
|
+
$_recheckScrollable = true;
|
|
40
43
|
}
|
|
41
44
|
</script>
|
|
42
45
|
|
|
43
46
|
<div
|
|
44
|
-
bind:this={
|
|
47
|
+
bind:this={$_bodyEl}
|
|
45
48
|
class="{$theme.body}"
|
|
46
49
|
{onscroll}
|
|
47
|
-
use:observeResize={
|
|
50
|
+
use:observeResize={onresize}
|
|
48
51
|
>
|
|
49
52
|
<div class="{$theme.content}">
|
|
50
53
|
<div class="{$theme.lines}">
|
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
<script>
|
|
2
2
|
import {getContext} from 'svelte';
|
|
3
|
-
import {setContent, toISOString, toSeconds, observeResize} from '#lib';
|
|
3
|
+
import {datesEqual, setContent, toISOString, toSeconds, observeResize} from '#lib';
|
|
4
4
|
|
|
5
|
-
let {_headerEl, _headerHeight,_intlDayHeader, _intlDayHeaderAL, _dayTimes,
|
|
5
|
+
let {_headerEl, _headerHeight, _intlDayHeader, _intlDayHeaderAL, _dayTimes, _today, _viewDates,
|
|
6
|
+
slotDuration, theme} = getContext('state');
|
|
6
7
|
</script>
|
|
7
8
|
|
|
8
9
|
<div class="{$theme.header}" bind:this={$_headerEl} use:observeResize={() => $_headerHeight = $_headerEl.clientHeight}>
|
|
9
10
|
<div class="{$theme.days}" role="row">
|
|
10
11
|
{#each $_viewDates as date}
|
|
11
|
-
<div class="{$theme.day} {$theme.weekdays?.[date.getUTCDay()]}">
|
|
12
|
+
<div class="{$theme.day} {$theme.weekdays?.[date.getUTCDay()]}{datesEqual(date, $_today) ? ' ' + $theme.today : ''}">
|
|
12
13
|
{#if toSeconds($slotDuration)}
|
|
13
14
|
<div class="{$theme.dayHead}">
|
|
14
15
|
<time
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import {getContext} from 'svelte';
|
|
3
|
+
import {addDuration, cloneDate, datesEqual} from '#lib';
|
|
4
|
+
import {getSlotTimeLimits} from './lib.js';
|
|
5
|
+
|
|
6
|
+
let {slotDuration, slotWidth, theme, _bodyHeight, _bodyWidth, _bodyScrollLeft,
|
|
7
|
+
_headerHeight, _dayTimeLimits, _now, _today, _viewDates} = getContext('state');
|
|
8
|
+
|
|
9
|
+
// Style
|
|
10
|
+
let left = $derived.by(() => {
|
|
11
|
+
let offset = 0;
|
|
12
|
+
for (let i = 0; i < $_viewDates.length; ++i) {
|
|
13
|
+
let slotTimeLimits = getSlotTimeLimits($_dayTimeLimits, $_viewDates[i]);
|
|
14
|
+
if (datesEqual($_viewDates[i], $_today)) {
|
|
15
|
+
let dayStart = addDuration(cloneDate($_viewDates[i]), slotTimeLimits.min);
|
|
16
|
+
let dayEnd = addDuration(cloneDate($_viewDates[i]), slotTimeLimits.max);
|
|
17
|
+
if ($_now >= dayStart && $_now <= dayEnd) {
|
|
18
|
+
offset += ($_now - dayStart) / 1000;
|
|
19
|
+
break;
|
|
20
|
+
} else {
|
|
21
|
+
return null;
|
|
22
|
+
}
|
|
23
|
+
} else {
|
|
24
|
+
offset += slotTimeLimits.max.seconds - slotTimeLimits.min.seconds;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
let step = $slotDuration.seconds;
|
|
28
|
+
return offset / step * $slotWidth - $_bodyScrollLeft;
|
|
29
|
+
});
|
|
30
|
+
</script>
|
|
31
|
+
|
|
32
|
+
{#if left !== null && left >= 3 && left <= $_bodyWidth - 3}
|
|
33
|
+
<div
|
|
34
|
+
class="{$theme.nowIndicator}"
|
|
35
|
+
style:top="{$_headerHeight+2}px"
|
|
36
|
+
style:left="{left}px"
|
|
37
|
+
style:height="{$_bodyHeight-1}px"
|
|
38
|
+
></div>
|
|
39
|
+
{/if}
|
|
@@ -3,8 +3,9 @@
|
|
|
3
3
|
import Sidebar from './Sidebar.svelte';
|
|
4
4
|
import Header from './Header.svelte';
|
|
5
5
|
import Body from './Body.svelte';
|
|
6
|
+
import NowIndicator from './NowIndicator.svelte';
|
|
6
7
|
|
|
7
|
-
let {theme} = getContext('state');
|
|
8
|
+
let {nowIndicator, theme} = getContext('state');
|
|
8
9
|
</script>
|
|
9
10
|
|
|
10
11
|
<div class="{$theme.container}">
|
|
@@ -12,5 +13,8 @@
|
|
|
12
13
|
<div class="{$theme.main}">
|
|
13
14
|
<Header/>
|
|
14
15
|
<Body/>
|
|
16
|
+
{#if $nowIndicator}
|
|
17
|
+
<NowIndicator/>
|
|
18
|
+
{/if}
|
|
15
19
|
</div>
|
|
16
20
|
</div>
|
|
@@ -51,6 +51,9 @@ export default {
|
|
|
51
51
|
if (!('_viewResources' in state)) {
|
|
52
52
|
state._viewResources = viewResources(state);
|
|
53
53
|
}
|
|
54
|
+
state._bodyHeight = writable(0);
|
|
55
|
+
state._bodyWidth = writable(0);
|
|
56
|
+
state._bodyScrollLeft = writable(0);
|
|
54
57
|
state._headerEl = writable(undefined);
|
|
55
58
|
state._headerHeight = writable(0);
|
|
56
59
|
state._dayTimeLimits = dayTimeLimits(state); // flexible time limits per day
|
|
@@ -3,11 +3,11 @@
|
|
|
3
3
|
|
|
4
4
|
let {slotDuration, slotHeight, theme, _now, _today, _slotTimeLimits} = getContext('state');
|
|
5
5
|
|
|
6
|
-
let start = $derived(($_now - $_today) / 1000
|
|
6
|
+
let start = $derived(($_now - $_today) / 1000);
|
|
7
7
|
// Style
|
|
8
8
|
let top = $derived.by(() => {
|
|
9
|
-
let step = $slotDuration.seconds
|
|
10
|
-
let offset = $_slotTimeLimits.min.seconds
|
|
9
|
+
let step = $slotDuration.seconds;
|
|
10
|
+
let offset = $_slotTimeLimits.min.seconds;
|
|
11
11
|
return (start - offset) / step * $slotHeight;
|
|
12
12
|
});
|
|
13
13
|
</script>
|
package/src/styles/index.scss
CHANGED
|
@@ -497,19 +497,28 @@
|
|
|
497
497
|
.ec-now-indicator {
|
|
498
498
|
position: absolute;
|
|
499
499
|
z-index: 1005;
|
|
500
|
-
width: 100%;
|
|
501
|
-
border-top: var(--ec-now-indicator-color) solid 2px;
|
|
502
500
|
pointer-events: none;
|
|
501
|
+
.ec-time-grid & {
|
|
502
|
+
width: 100%;
|
|
503
|
+
border-top: var(--ec-now-indicator-color) solid 2px;
|
|
504
|
+
}
|
|
505
|
+
.ec-timeline & {
|
|
506
|
+
height: 100%;
|
|
507
|
+
border-left: var(--ec-now-indicator-color) solid 2px;
|
|
508
|
+
will-change: transform;
|
|
509
|
+
}
|
|
503
510
|
|
|
504
511
|
&:before {
|
|
505
512
|
background: var(--ec-now-indicator-color);
|
|
506
513
|
border-radius: 50%;
|
|
507
514
|
content: "";
|
|
508
|
-
|
|
515
|
+
display: block;
|
|
509
516
|
height: 12px;
|
|
510
517
|
margin-top: -7px;
|
|
511
518
|
width: 12px;
|
|
512
|
-
|
|
519
|
+
.ec-timeline & {
|
|
520
|
+
margin-left: -7px;
|
|
521
|
+
}
|
|
513
522
|
}
|
|
514
523
|
}
|
|
515
524
|
|