vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 00:42:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

Refactor #3965, Improve build and Added *Base models

Browse source
This commit is contained in:
mertsincan 2023-07-03 23:20:35 +01:00
parent f4ba20b222
commit 9247620421
134 changed files with 4230 additions and 1729 deletions
Download patch file Download diff file Expand all files Collapse all files

189
components/lib/ripple/Ripple.js
View file

@ -1,113 +1,104 @@
import { BaseDirective } from 'primevue/basedirective';
import { DomHandler } from 'primevue/utils';
import BaseRipple from './BaseRipple';
let timeout;
function bindEvents(el) {
el.addEventListener('mousedown', onMouseDown);
}
function unbindEvents(el) {
el.removeEventListener('mousedown', onMouseDown);
}
function create(el, binding) {
let ink = document.createElement('span');
!el.$_prippleUnstyled && (ink.className = 'p-ink');
ink.setAttribute('data-pc-name', 'ripple');
ink.setAttribute('data-pc-section', 'root');
ink.setAttribute('role', 'presentation');
ink.setAttribute('aria-hidden', 'true');
ink.setAttribute('data-p-ink', 'true');
ink.setAttribute('data-p-ink-active', 'false');
el.appendChild(ink);
el.$pEl = ink;
ink.addEventListener('animationend', onAnimationEnd);
BaseDirective.handleCSS('ripple', ink, binding);
}
function remove(el) {
let ink = getInk(el);
if (ink) {
unbindEvents(el);
ink.removeEventListener('animationend', onAnimationEnd);
ink.remove();
}
}
function onMouseDown(event) {
let target = event.currentTarget;
let ink = getInk(target);
if (!ink || getComputedStyle(ink, null).display === 'none') {
return;
}
!target.$_prippleUnstyled && DomHandler.removeClass(ink, 'p-ink-active');
ink.setAttribute('data-p-ink-active', 'false');
if (!DomHandler.getHeight(ink) && !DomHandler.getWidth(ink)) {
let d = Math.max(DomHandler.getOuterWidth(target), DomHandler.getOuterHeight(target));
ink.style.height = d + 'px';
ink.style.width = d + 'px';
}
let offset = DomHandler.getOffset(target);
let x = event.pageX - offset.left + document.body.scrollTop - DomHandler.getWidth(ink) / 2;
let y = event.pageY - offset.top + document.body.scrollLeft - DomHandler.getHeight(ink) / 2;
ink.style.top = y + 'px';
ink.style.left = x + 'px';
!target.$_prippleUnstyled && DomHandler.addClass(ink, 'p-ink-active');
ink.setAttribute('data-p-ink-active', 'true');
timeout = setTimeout(() => {
if (ink) {
!target.$_prippleUnstyled && DomHandler.removeClass(ink, 'p-ink-active');
ink.setAttribute('data-p-ink-active', 'false');
}
}, 401);
}
function onAnimationEnd(event) {
if (timeout) {
clearTimeout(timeout);
}
!event.currentTarget.$_prippleUnstyled && DomHandler.removeClass(event.currentTarget, 'p-ink-active');
event.currentTarget.setAttribute('data-p-ink-active', 'false');
}
function getInk(el) {
for (let i = 0; i < el.children.length; i++) {
if (el.children[i].getAttribute('data-pc-name') === 'ripple') {
return el.children[i];
}
}
return null;
}
const Ripple = BaseDirective.extend('ripple', {
const Ripple = BaseRipple.extend('ripple', {
mounted(el, binding) {
const primevue = binding.instance.$primevue;
if (primevue && primevue.config && primevue.config.ripple) {
el.$_prippleUnstyled = primevue.config.unstyled || false;
create(el, binding);
bindEvents(el);
this.create(el, binding);
this.bindEvents(el);
}
},
unmounted(el) {
remove(el);
this.remove(el);
},
timeout: undefined,
methods: {
bindEvents(el) {
el.addEventListener('mousedown', this.onMouseDown.bind(this));
},
unbindEvents(el) {
el.removeEventListener('mousedown', this.onMouseDown.bind(this));
},
create(el, binding) {
const ink = DomHandler.createElement('span', {
role: 'presentation',
'aria-hidden': true,
'data-p-ink': true,
'data-p-ink-active': false,
class: this.cx('root'),
onAnimationEnd: this.onAnimationEnd,
'p-bind': this.ptm('root')
});
el.appendChild(ink);
this.$el = ink;
},
remove(el) {
let ink = this.getInk(el);
if (ink) {
this.unbindEvents(el);
ink.removeEventListener('animationend', this.onAnimationEnd);
ink.remove();
}
},
onMouseDown(event) {
let target = event.currentTarget;
let ink = this.getInk(target);
if (!ink || getComputedStyle(ink, null).display === 'none') {
return;
}
!target.$_prippleUnstyled && DomHandler.removeClass(ink, 'p-ink-active');
ink.setAttribute('data-p-ink-active', 'false');
if (!DomHandler.getHeight(ink) && !DomHandler.getWidth(ink)) {
let d = Math.max(DomHandler.getOuterWidth(target), DomHandler.getOuterHeight(target));
ink.style.height = d + 'px';
ink.style.width = d + 'px';
}
let offset = DomHandler.getOffset(target);
let x = event.pageX - offset.left + document.body.scrollTop - DomHandler.getWidth(ink) / 2;
let y = event.pageY - offset.top + document.body.scrollLeft - DomHandler.getHeight(ink) / 2;
ink.style.top = y + 'px';
ink.style.left = x + 'px';
!target.$_prippleUnstyled && DomHandler.addClass(ink, 'p-ink-active');
ink.setAttribute('data-p-ink-active', 'true');
this.timeout = setTimeout(() => {
if (ink) {
!target.$_prippleUnstyled && DomHandler.removeClass(ink, 'p-ink-active');
ink.setAttribute('data-p-ink-active', 'false');
}
}, 401);
},
onAnimationEnd(event) {
if (this.timeout) {
clearTimeout(this.timeout);
}
!event.currentTarget.$_prippleUnstyled && DomHandler.removeClass(event.currentTarget, 'p-ink-active');
event.currentTarget.setAttribute('data-p-ink-active', 'false');
},
getInk(el) {
for (let i = 0; i < el.children.length; i++) {
if (el.children[i].getAttribute('data-pc-name') === 'ripple') {
return el.children[i];
}
}
return null;
}
}
});