Packages
moon
2.76.0
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/bottom_sheet.js
const addEvent = (() => {
if (document.addEventListener) {
return (el, type, fn) => {
if (el && el.nodeName || el === window) {
el.addEventListener(type, fn, false);
} else if (el && el.length) {
for (let i = 0; i < el.length; i++) {
addEvent(el[i], type, fn);
}
}
};
} else {
return (el, type, fn) => {
if (el && el.nodeName || el === window) {
el.attachEvent(`on${type}`, () => { return fn.call(el, window.event); });
} else if (el && el.length) {
for (let i = 0; i < el.length; i++) {
addEvent(el[i], type, fn);
}
}
};
}
})();
import Animation from './animation'
export default {
...Animation,
mounted() {
Animation.mounted.bind(this)();
this.dragHandle = this.el.querySelector(".moon-drag-handle");
},
updated() {
Animation.updated.bind(this)();
if (this.dragHandle) {
this.setupSwipePanel();
};
},
setupSwipePanel() {
const startPosition = {
x: 0,
y: 0
};
let startedSwipe = false;
addEvent(document.body, "touchstart", event => {
const touch = event.targetTouches[0];
if ((this.el.dataset.is_open !== undefined)) {
startPosition.x = touch.pageX;
startPosition.y = touch.pageY;
panelHeight = this.panel.offsetHeight;
startedSwipe = true;
}
});
addEvent(document.body, "touchmove", event => {
const touch = event.targetTouches[0];
if (startedSwipe && (this.el.dataset.is_open !== undefined) && touch.pageY > startPosition.y) {
let position = Math.max(touch.pageY - startPosition.y, 0);
this.panel.style.transform = `translate(0, ${position}px)`;
}
});
addEvent(document.body, "touchend", event => {
const touch = event.changedTouches[0];
const panelHeight = this.panel.offsetHeight;
let position = Math.max(touch.pageY - startPosition.y, 0);
const endPosition = panelHeight - position ;
if (startedSwipe && endPosition <= panelHeight / 2) {
this.panel.classList.add("animate-backdrop_leave_swipe");
if (this.backdrop) {
this.backdrop.classList.replace("animate-backdrop_enter", "animate-backdrop_leave_swipe");
};
setTimeout (() => {
this.el.classList.add(...this.hiddenClasses())
this.pushEventTo(this.el, "set_close", {});
document.body.style.overflow = "auto";
}, 100);
startedSwipe = false;
} else if (startedSwipe && endPosition > panelHeight / 2) {
this.panel.style.transform = `translate(0, 0)`;
startedSwipe = false;
}
});
},
};