Adapting jQuery methods to jqLite

Because of jQuery being removed from the Overlay project, several changes had to be made to adapt jQuery methods to jqLite. Many jQuery methods like first, not, width, height, outerWidth, outerHeight are 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 properly. The supported methods by 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 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 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) {...}));

.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 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 jqLite. The correct way is to 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 jqLite. A new helper called 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 jqLite. The correct way is to use the standard html attributes clientWidth and 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 jqLite. Since these methods actually modifies the CSS with and height values, the correct way is to use the standard html style attribute and width and height values. Example:

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

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

.position()

This method is not available in jqLite. 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 jqLite. The html attributes .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 was created to be used in these cases. It contains the method offset(element). Example:

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

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

.bind(), .unbind()

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

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

To trigger events such as click, blur or focus, 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 jqLite, 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';