Packages
moon
2.90.5
2.90.5
retired
2.90.4
2.90.3
2.90.2
2.90.1
2.90.0
2.89.4
2.89.1
2.89.0
2.88.0
2.87.11
2.87.10
2.87.9
2.87.8
2.87.7
2.87.6
2.87.5
2.87.4
2.87.3
2.87.2
2.87.1
2.87.0
2.86.1
2.86.0
2.85.1
2.85.0
2.84.0
2.83.0
2.82.0
2.81.4
2.81.3
2.81.2
2.81.1
2.81.0
2.80.2
2.80.1
2.80.0
2.79.13
2.79.12
2.79.11
2.79.10
2.79.9
2.79.8
2.79.7
2.79.6
2.79.5
2.79.4
2.79.3
2.79.2
2.79.1
2.79.0
2.78.4
2.78.3
2.78.2
2.78.1
2.78.0
2.77.0
2.76.5
2.76.4
2.76.3
2.76.2
2.76.1
2.76.0
2.75.0
2.74.1
2.74.0
2.73.8
2.73.7
2.73.6
2.73.5
2.73.4
2.73.3
2.73.2
2.73.1
2.73.0
2.72.5
2.72.4
2.72.3
2.72.2
2.72.1
2.72.0
2.71.1
2.71.0
2.70.0
2.69.2
2.69.1
2.69.0
2.68.11
2.68.10
Components-based design system written in elixir
Retired package: Deprecated - Package no longer supported. Use moon_live_view package instead
Current section
Files
Jump to
Current section
Files
assets/js/hooks/animation.js
function getSelectionText() {
var text = "";
if (window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
text = document.selection.createRange().text;
}
return text;
}
export default {
hiddenClasses() {
return ["sm", "md", "lg", "xl", "2xl"].map(size => `${size}:hidden`).concat(["hidden"]);
},
mounted() {
this.backdrop = this.el.querySelector(".moon-backdrop");
this.panel = this.el.querySelector(".moon-panel");
this.showElementIfNeeded();
//some dirty hack to make page scroll working after phx-style links are clicked
window.addEventListener("phx:navigate", _ => {
document.body.style.overflow = "auto";
});
},
updated() {
this.showElementIfNeeded();
this.hideElementIfNeeded();
},
showElementIfNeeded() {
(this.el.dataset.is_open === undefined) || !this.el.classList.contains("hidden") || this.showElement();
},
hideElementIfNeeded() {
if (this.el.dataset.is_closing === "true"){
if (getSelectionText()) {
this.pushEventTo(this.el, "stop_closing", {});
} else {
this.hideElement()
}
}
},
hideElement() {
if(this.el.dataset.lg_persists !== undefined && document.body.clientWidth >= 1024) return;
this.panel.classList.remove(...this.panel.dataset.animate_enter_class.split(" "));
this.panel.classList.add(...this.panel.dataset.animate_leave_class.split(" "));
if (this.backdrop) {
this.backdrop.classList.replace("animate-backdrop_enter", "animate-backdrop_leave");
};
setTimeout (() => {
this.el.classList.add(...this.hiddenClasses())
this.pushEventTo(this.el, "set_close", {});
document.body.style.overflow = "auto";
this.was_open = false;
}, 200);
},
showElement() {
this.el.classList.remove(...this.hiddenClasses());
if(!this.was_open){
this.panel.classList.add(...this.panel.dataset.animate_enter_class.split(" "));
if (this.backdrop) {
this.backdrop.classList.add("animate-backdrop_enter");
}
}
this.was_open = this.el.dataset.is_open !== undefined;
document.body.style.overflow = "hidden";
},
};