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:
Code Block |
---|
|
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:
Code Block |
---|
|
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:
Code Block |
---|
|
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:
Code Block |
---|
|
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:
Code Block |
---|
|
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:
Code Block |
---|
|
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:
Code Block |
---|
|
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:
Code Block |
---|
|
BEFORE: infscroll.height('calc(100% - ' + infscroll.position().top + 'px)');
AFTER: infscroll.height('calc(100% - ' + infscroll[0].offsetTop + 'px)'); |
These methods are not available in JQLitejqLite. The html attributes .
scrollTop scrollTop
and .scrollLeft
must be used instead. Example:
Code Block |
---|
|
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:
Code Block |
---|
|
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:
Code Block |
---|
|
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:
Code Block |
---|
|
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'; |
...