Packages
moon
2.68.11
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
lib/moon/design/snackbar.hooks.js
const getContent = (el) => document.getElementById(el.id + "-content")
export default {
mounted() {
this.handleStateChange(this.el);
},
updated() {
this.handleStateChange(this.el);
},
handleStateChange(el) {
if (el.dataset.is_open && !el.dataset.visible) {
this.showContent(el);
}
if (!el.dataset.is_open && el.dataset.visible) {
this.hideContent(el);
}
},
hideContent(el) {
el.dataset.visible = false;
if (this.hidingTimeout) {
clearTimeout(this.hidingTimeout);
}
let content = getContent(el);
content.classList.replace(el.dataset.animate_class, "animate-fadeout");
setTimeout(() => {
content.classList.replace("animate-fadeout", "hidden")
this.pushEventTo(el, "set_close", {});
}, 500);
},
showContent(el) {
el.dataset.visible = true;
let content = getContent(el);
this.hideAllSnackbarsExpect(el);
content.classList.replace("hidden", el.dataset.animate_class);
if (el.dataset.autoclose) {
this.hidingTimeout = setTimeout(() => this.hideContent(el), el.dataset.timeout);
}
},
hideAllSnackbarsExpect(el) {
let snackbars = Array.from(document.querySelectorAll('[data-snackbar]'));
snackbars.forEach(snackbar => {
if (snackbar.id !== el.id && snackbar.dataset.is_open) {
this.hideContent(snackbar);
}
});
}
};