mirror of
https://github.com/ae-utbm/sith.git
synced 2025-07-10 03:49:24 +00:00
Smooth animation
This commit is contained in:
@ -44,7 +44,18 @@ export class IcsCalendar extends inheritHtmlElement("div") {
|
||||
return this.isMobile() ? "listMonth" : "dayGridMonth";
|
||||
}
|
||||
|
||||
currentToolbar() {
|
||||
currentFooterToolbar() {
|
||||
if (this.isMobile()) {
|
||||
return {
|
||||
start: "",
|
||||
center: "getCalendarLink",
|
||||
end: "",
|
||||
};
|
||||
}
|
||||
return { start: "getCalendarLink", center: "", end: "" };
|
||||
}
|
||||
|
||||
currentHeaderToolbar() {
|
||||
if (this.isMobile()) {
|
||||
return {
|
||||
left: "prev,next",
|
||||
@ -309,11 +320,14 @@ export class IcsCalendar extends inheritHtmlElement("div") {
|
||||
click: async (event: Event) => {
|
||||
const button = event.target as HTMLButtonElement;
|
||||
button.classList.add("text-copy");
|
||||
button.setAttribute(
|
||||
"tooltip",
|
||||
gettext("Calendar link copied to the clipboard"),
|
||||
);
|
||||
button.setAttribute("position", "top");
|
||||
if (!button.hasAttribute("position")) {
|
||||
button.setAttribute("tooltip", gettext("Link copied"));
|
||||
button.setAttribute("position", "top");
|
||||
button.setAttribute("no-hover", "");
|
||||
}
|
||||
if (button.classList.contains("text-copied")) {
|
||||
button.classList.remove("text-copied");
|
||||
}
|
||||
navigator.clipboard.writeText(
|
||||
new URL(
|
||||
await makeUrl(calendarCalendarInternal),
|
||||
@ -324,21 +338,20 @@ export class IcsCalendar extends inheritHtmlElement("div") {
|
||||
button.classList.remove("text-copied");
|
||||
button.classList.add("text-copied");
|
||||
button.classList.remove("text-copy");
|
||||
button.removeAttribute("tooltip");
|
||||
button.removeAttribute("position");
|
||||
}, 700);
|
||||
}, 1500);
|
||||
},
|
||||
},
|
||||
},
|
||||
height: "auto",
|
||||
locale: this.locale,
|
||||
initialView: this.currentView(),
|
||||
headerToolbar: this.currentToolbar(),
|
||||
footerToolbar: { start: "getCalendarLink" },
|
||||
headerToolbar: this.currentHeaderToolbar(),
|
||||
footerToolbar: this.currentFooterToolbar(),
|
||||
eventSources: await this.getEventSources(),
|
||||
windowResize: () => {
|
||||
this.calendar.changeView(this.currentView());
|
||||
this.calendar.setOption("headerToolbar", this.currentToolbar());
|
||||
this.calendar.setOption("headerToolbar", this.currentHeaderToolbar());
|
||||
this.calendar.setOption("footerToolbar", this.currentFooterToolbar());
|
||||
},
|
||||
eventClick: (event) => {
|
||||
// Avoid our popup to be deleted because we clicked outside of it
|
||||
|
@ -107,16 +107,17 @@ ics-calendar {
|
||||
button.text-copy:focus,
|
||||
button.text-copy:hover {
|
||||
background-color: #67AE6E !important;
|
||||
transition: 200ms linear;
|
||||
transition: 500ms ease-in;
|
||||
}
|
||||
|
||||
button.text-copied,
|
||||
button.text-copied:focus,
|
||||
button.text-copied:hover {
|
||||
transition: 200ms linear;
|
||||
transition: 500ms ease-out;
|
||||
}
|
||||
|
||||
[tooltip]::before {
|
||||
font-size: 10px; // this will overflow otherwise
|
||||
button.text-copied[tooltip]::before {
|
||||
opacity: 0;
|
||||
transition: opacity 500ms ease-out;
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user