Due to JQuery has been Because of jQuery being removed from the Overlay project, several changes had been to be made to adapt JQuery jQuery methods to JQLitejqLite. Many of the JQuery jQuery methods like first(), not(), width(), height(), outerWidth(), outerHeight() are not no longer supported, and others like .element(), .on(), find() don't allow to find elements by tag name / CSS selector. Below are listed the actions to be taken to use JQLite jqLite properly. The supported methods by JQLite jqLite are listed in the angular documentation: https://docs.angularjs.org/api/ng/function/angular.element#angular-s-jqlite

angular.element()

This method doesn't find elements by tag name / CSS selector anymore. So the properly way to use it is calling to standard the plain JS method document.querySelector, to get one element or document.querySelectorAll, to get all elements that matches the query. Keep in mind that document.querySelector returns null if no element matches the query. Example:

BEFORE: var infscroll = angular.element('.eb-infinite-scroll');
        if (infscroll.length > 0) {
          infscroll.height('calc(100% - ' + infscroll.position().top + 'px)');
        }

AFTER:  var infscroll = document.querySelector('.eb-infinite-scroll');
        if (infscroll) {
          infscroll.style.height = 'calc(100% - ' + infscroll.offsetTop + 'px)';
        }


BEFORE: var results = angular.element('#eb-results');

AFTER:  var results = angular.element(document.querySelectorAll('#eb-results'));

Important Note! : do not use 'nth-child' selector, because it doesn't work properly and is not supported by IE8.

.map()

This method is no longer supported. A new helper called ebJsExtensionsHelper ebJsExtensionsHelper was created to be used in these cases. It contains the method map(arr, fn).  Example:

BEFORE:   ebLinks.setDirect(angular.element.map(response.direct || [], function(item) {...}));

AFTER:    ebLinks.setDirect(ebJsExtensionsHelper.map(response.direct || [], function(item) {
           return {url: item.trackable_url};
          }...}));

.find(), .not(), next()

.find() method is limited to lookups by tag name, .next() doesn't support selectors and .not() method is not available anymore. The correct way is to use  use document.querySelector with angular.element method. Example:

BEFORE: var allDocs = angular.element('#eb-results').find('.eb-result').not('.ng-leave');

AFTER:  var allDocs = angular.element(document.querySelector('#eb-results .eb-result:not(.ng-leave)'));

.first(), .last()

This method is not available in JQLitejqLite. The correct way is to use  use document.querySelector with angular.element method. Do not use 'nth-child' selector because it doesn't work properly and is not supported by IE8. Example:

BEFORE: var element = angular.element(container + ' .eb-motion-grid-item').first();

AFTER:  var element = angular.element(document.querySelectorAll(container + ' .eb-motion-grid-item')[0]);


BEFORE: var element = angular.element(container + ' .eb-motion-grid-item').last();

AFTER:  var elements = document.querySelectorAll(container + ' .eb-motion-grid-item');
        var element = angular.element(elements[element.length-1]);

.outerWidth(), .outerHeight()

These methods are not available in JQLitejqLite. A new helper called ebJsExtensionsHelper  ebJsExtensionsHelper was created to be used in these cases. It contains the methods outerWidth(element, withMargin) and outerHeight(element, withMargin).  Example:

BEFORE: var articleWidth = element.outerWidth(true);
        var articleHeight = element.outerHeight(true);

AFTER:  var articleWidth = ebJsExtensionsHelper.outerWidth(element,true);
        var articleHeight = ebJsExtensionsHelper.outerHeight(element,true);

.width(), .height()

These methods are not available in JQLitejqLite. The correct way is to use  the the standard html attributes clientWidth and clientHeight clientHeight. Example:

BEFORE: var width = element.width();
        var height = element.height();

AFTER:  var width = element.clientWidth;
        var height = element.clientHeight;

.width(value), .height(value)

These methods are not available in JQLitejqLite. Since these methods actually modifies the css CSS with and height values, the correct way is to use  the the standard html style attribute and width and height  height values. Example:

BEFORE:  infscroll.height('calc(100% - 100px)');

AFTER:   infscroll.style.height = 'calc(100% - 100px)';

.position()

This method is not available in JQLitejqLite. The html attributes .offsetParent, .offsetLeft and .offsetTop must be used instead. Example:

BEFORE: infscroll.height('calc(100% - ' + infscroll.position().top + 'px)');

AFTER:  infscroll.height('calc(100% - ' + infscroll[0].offsetTop + 'px)');

.scrollTop(), .scrollLeft()

These methods are not available in JQLitejqLite. The html attributes .scrollTop scrollTop and .scrollLeft must be used instead. Example:

BEFORE:   if (ebState.getTop() > 0 && scrolledElement.scrollTop() === 0) {

AFTER:    if (ebState.getTop() > 0 && scrolledElement[0].scrollTop === 0) {

.offset()

This method is no longer supported. A new helper called ebJsExtensionsHelper ebJsExtensionsHelper was created to be used in these cases. It contains the method offset(element).  Example Example:

BEFORE:  var input = angular.element('#eb-searchField-input');

AFTER:   var input = angular.element(document.querySelector('#eb-searchField-input'));

.bind(), .unbind()

Unless Despite these methods are supported by jQLitejqLite, they are deprecated. So the methods .on() and .off() must be used instead.

.click(), .blur(), focus()

To trigger events like such as click, blur , or focus, ... jQLite jqLite offers the triggerHandler() method, which receives as parameter the name of the event. Example:

BEFORE:  angular.element(document.querySelectorAll('#eb-searchField-as li.eb-as-selected')).click();

AFTER:   angular.element(document.querySelectorAll('#eb-searchField-as li.eb-as-selected')).triggerHandler('click');

.show(), .hide()

These method are not available in JQlitejqLite, so is necessary to use the style.display attribute of the html element to achieve the effect. Example:

BEFORE:  angular.element('#eb-auto-suggest').show();

        angular.element('#eb-auto-suggest').hide();

AFTER:   angular.element('#eb-auto-suggest')[0].style.display = '';

        angular.element('#eb-auto-suggest')[0].style.display = 'none';

...