Use of jQuery in Ultima 4.2.0

Post Reply
cito
Posts: 8
Joined: 12 Aug 2017, 13:43

18 Aug 2017, 12:51

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.
Last edited by cito on 12 Sep 2017, 14:16, edited 1 time in total.

merve7
Posts: 482
Joined: 12 Sep 2017, 10:44

12 Sep 2017, 14:07

Thank you, we have our own ripple for Ultima React for jQuery and in next version we'll also replace the jquery one with native javascript one.

About scrollbar, PrimeNG will have a native scrollpanel component coming up so we'll replace nano with it.

cito
Posts: 8
Joined: 12 Aug 2017, 13:43

12 Sep 2017, 14:20

Sounds good :)

cito
Posts: 8
Joined: 12 Aug 2017, 13:43

26 Nov 2017, 12:38

I noticed that Ultima 5.0.0 still has the jQuery based nanoscroller and ripple effect. Please don't forget the plan to change this!

cagatay.civici
Prime
Posts: 18104
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

01 Dec 2017, 13:09

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.

cito
Posts: 8
Joined: 12 Aug 2017, 13:43

01 Dec 2017, 13:18

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);

cagatay.civici
Prime
Posts: 18104
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

01 Dec 2017, 14:02

Awesome, thank you.

Post Reply

Return to “Ultima - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest