68 lines
2.7 KiB
JavaScript
68 lines
2.7 KiB
JavaScript
document.addEventListener('alpine:init', () => {
|
|
Alpine.directive('hx-val', (el, { value, expression }, { evaluateLater, effect, cleanup, evaluate }) => {
|
|
var config = function(evt) {
|
|
evt.detail.parameters[value] = evaluate(expression); // add a new parameter into the request
|
|
}
|
|
el.addEventListener('htmx:configRequest', config);
|
|
cleanup(() => {
|
|
el.removeEventListener('htmx:configRequest', config);
|
|
})
|
|
})
|
|
Alpine.directive('hx-header', (el, { value, expression }, { evaluateLater, effect, cleanup, evaluate }) => {
|
|
var config = function(evt) {
|
|
evt.detail.headers[value] = evaluate(expression); // add a new parameter into the request
|
|
}
|
|
el.addEventListener('htmx:configRequest', config);
|
|
cleanup(() => {
|
|
el.removeEventListener('htmx:configRequest', config);
|
|
})
|
|
})
|
|
|
|
Alpine.directive('dispatch', (el, { value, expression }, { evaluateLater, effect, cleanup, evaluate }) => {
|
|
let dependent_properties = evaluateLater(expression)
|
|
|
|
effect(() => {
|
|
dependent_properties(props => {
|
|
el.dispatchEvent(
|
|
new CustomEvent(value, {
|
|
props,
|
|
bubbles: true,
|
|
// Allows events to pass the shadow DOM barrier.
|
|
composed: true,
|
|
cancelable: true,
|
|
})
|
|
)
|
|
})
|
|
})
|
|
})
|
|
Alpine.directive(
|
|
"destroy",
|
|
(el, { expression }, { evaluateLater, cleanup }) => {
|
|
const onDestroy = evaluateLater(expression);
|
|
cleanup(onDestroy);
|
|
}
|
|
);
|
|
Alpine.directive('popper', (el, { value, expression }, { evaluateLater, effect, cleanup, evaluate, Alpine}) => {
|
|
let dependent_properties = evaluate(expression)
|
|
let tooltip = evaluate(dependent_properties['tooltip'])
|
|
let source = evaluate(dependent_properties['source'])
|
|
|
|
let popper = Popper.createPopper(source, tooltip, {placement: 'bottom', strategy: 'fixed', modifiers: [{name: 'preventOverflow'}, {name: 'offset', options: {offset: [0, 10]}}]});;
|
|
let d=Alpine.reactive({show: false});
|
|
tooltip.classList.add('opacity-0', 'transition-opacity')
|
|
|
|
let show = () => d.show = true;
|
|
let hide = () => d.show = false;
|
|
source.addEventListener('mouseover', show)
|
|
source.addEventListener('mouseout', hide)
|
|
effect(() => {
|
|
if (d.show) {
|
|
tooltip.classList.remove('opacity-0')
|
|
} else {
|
|
tooltip.classList.add('opacity-0')
|
|
}
|
|
|
|
})
|
|
cleanup(() => {popper.destroy(); source.removeEventListener('mouseover', show); source.removeEventListener('mouseout', hide) })
|
|
})
|
|
})
|