Packages
moon
2.72.3
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
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";
},
};