Great to have the new Ultima 4.2.0 version as a starter.
One thing that bothered me though is the requirement of jQuery just to have the ripple effect and nicer menu scrollbars.
So I have rewritten the ripple.js script in native JavaScript, and also replaced the Nano-Scroller Plugin for jQuery with the Simple-Scrollbar which is smaller and written in native JavaScript. Works nicely and since I don't need the Scheduler, my app is now completely independent of jQuery.
If anybody @PrimeTek is interested in my code in oder to include it in the next version, let me know.
Use of jQuery in Ultima 4.2.0
Forum rules
Please note that response time for technical support is within 3-5 business days.
Please note that response time for technical support is within 3-5 business days.
-
- Prime
- Posts: 18616
- Joined: 05 Jan 2009, 00:21
- Location: Cybertron
- Contact:
Coming soon, for nano replacement, we'll introduce a component in PrimeNG itself and replace the ripple with our native ripple. Please share your ripple so we can compare with our own.
p-scrollable will be in PrimeNG 5.0.3 and then we'll update Ultima to use it.
p-scrollable will be in PrimeNG 5.0.3 and then we'll update Ultima to use it.
Ok, here is my ripple.js without the jQuery:
Code: Select all
(function(d) {
var ready = function() {
var ripple = function(e) {
var ink = this.querySelector('.ink');
if (!ink) {
if (this.classList.contains('ripplelink'))
Array.prototype.slice.call(this.children).filter(function(c) {
return c.tagName == 'SPAN'
}).forEach(function(c) {
c.insertAdjacentHTML('afterend', '<span class="ink"></span>');
});
else
this.insertAdjacentHTML('beforeend', '<span class="ink"></span>');
ink = this.querySelector('.ink');
}
ink.classList.remove('ripple-animate');
if (!ink.offsetHeight && !ink.offsetHeight)
ink.style.height = ink.style.width = Math.max(this.offsetWidth, this.offsetHeight) + 'px';
var rect = this.getBoundingClientRect();
ink.style.left = e.pageX - d.body.scrollLeft - rect.left - ink.offsetWidth/2 + 'px';
ink.style.top = e.pageY - d.body.scrollTop - rect.top - ink.offsetHeight/2 + 'px';
ink.style.pointerEvents = 'none';
ink.classList.add('ripple-animate');
};
Array.prototype.slice.call(d.body.querySelectorAll('.ripplelink,.ui-button:enabled')).forEach(function(e) {
e.addEventListener('mousedown', ripple);
}
);
};
if (d.attachEvent ? d.readyState === "complete" : d.readyState !== "loading")
ready();
else
d.addEventListener('DOMContentLoaded', ready);
})(document);
-
- Prime
- Posts: 18616
- Joined: 05 Jan 2009, 00:21
- Location: Cybertron
- Contact:
Awesome, thank you.
-
- Information
-
Who is online
Users browsing this forum: No registered users and 9 guests