Skip to content

Commit

Permalink
[REF] Convert all jquery related code in vanilla Javascript
Browse files Browse the repository at this point in the history 
This commit aims to convert all jQuery code into Vanilla JS in
website_twitter, this way we will reduce the dependency of jQuery in
Odoo codebase.

task-3770362

Co-authored-by: Mohammed Shekha <msh@odoo.com>
  • Loading branch information
@visp-odoo @msh-odoo
visp-odoo and msh-odoo committed May 9, 2024
1 parent 60027c8 commit 5057e7b
Showing 1 changed file with 55 additions and 36 deletions.
91 changes: 55 additions & 36 deletions addons/website_twitter/static/src/js/website.twitter.animation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,16 @@ publicWidget.registry.twitter = publicWidget.Widget.extend({
*/
start: function () {
var self = this;
var $timeline = this.$('.twitter_timeline');
const timeline = this.el.querySelector(".twitter_timeline");

$timeline.append('<center><div><img src="/website_twitter/static/src/img/loadtweet.gif"></div></center>');
const newElement = document.createElement("center");
newElement.innerHTML = '<div><img src="/website_twitter/static/src/img/loadtweet.gif"></div>';
timeline.appendChild(newElement);
var def = rpc('/website_twitter/get_favorites').then(function (data) {
$timeline.empty();
timeline.innerHTML = '';

if (data.error) {
$timeline.append(renderToElement('website.Twitter.Error', {data: data}));
timeline.append(renderToElement("website.Twitter.Error", { data: data }));
return;
}

Expand Down Expand Up @@ -77,20 +79,27 @@ publicWidget.registry.twitter = publicWidget.Widget.extend({
var f = Math.floor(tweets.length / 3);
var tweetSlices = [tweets.slice(0, f).join(' '), tweets.slice(f, f * 2).join(' '), tweets.slice(f * 2, tweets.length).join(' ')];

self.$scroller = $(renderToElement('website.Twitter.Scroller')).appendTo($timeline);
self.$scroller.find('div[id^="scroller"]').toArray().forEach((element, index) => {
var $scrollWrapper = $('<div/>', {class: 'scrollWrapper'});
var $scrollableArea = $('<div/>', {class: 'scrollableArea'});
$scrollWrapper.append($scrollableArea)
.data('scrollableArea', $scrollableArea);
$scrollableArea.append(tweetSlices[index]);
$(element).append($scrollWrapper);
self.scroller = timeline.appendChild(renderToElement('website.Twitter.Scroller'));
[...self.scroller.querySelectorAll('div[id^="scroller"]')].forEach((element, index) => {
const scrollWrapper = document.createElement("div");
scrollWrapper.className = "scrollWrapper";
const scrollableArea = document.createElement("div");
scrollableArea.className = "scrollableArea";
scrollWrapper.appendChild(scrollableArea);
scrollWrapper.dataset.scrollableArea = scrollableArea;
scrollableArea.append(tweetSlices[index]);
element.append(scrollWrapper);
var totalWidth = 0;
$scrollableArea.children().forEach((area) => {
totalWidth += $(area).outerWidth(true);
scrollableArea.childNodes.forEach((area) => {
// TODO_VISP: debug this as i'm not sure
totalWidth +=
area.offsetWidth +
parseFloat(window.getComputedStyle(area).marginLeft) +
parseFloat(window.getComputedStyle(area).marginRight);
});
$scrollableArea.width(totalWidth);
$scrollWrapper.scrollLeft(index*180);
scrollableArea.style.width = totalWidth;
// TODO-VISP: debug this as we need to create method
scrollWrapper.scrollLeft = index * 180;
});
self._startScrolling();
});
Expand All @@ -113,37 +122,47 @@ publicWidget.registry.twitter = publicWidget.Widget.extend({
* @private
*/
_startScrolling: function () {
if (!this.$scroller) {
if (!this.scroller) {
return;
}
this.$scroller.find('.scrollWrapper').toArray().forEach((el) => {
var $wrapper = $(el);
$wrapper.data('getNextElementWidth', true);
$wrapper.data('autoScrollingInterval', setInterval(function () {
$wrapper.scrollLeft($wrapper.scrollLeft() + 1);
if ($wrapper.data('getNextElementWidth')) {
$wrapper.data('swapAt', $wrapper.data('scrollableArea').children(':first').outerWidth(true));
$wrapper.data('getNextElementWidth', false);
[...this.scroller.querySelectorAll(".scrollWrapper")].forEach((el) => {
const wrapper = el;
wrapper.dataset.getNextElementWidth = true;
wrapper.dataset.autoScrollingInterval = setInterval(function () {
const firstChild = wrapper.querySelector(".scrollableArea").firstElementChild;
wrapper.scrollLeft = wrapper.scrollLeft + 1;
if (wrapper.dataset.getNextElementWidth) {
// TODO_VISP: debug this as we need to create method
const totalWidth =
firstChild.offsetWidth +
parseFloat(window.getComputedStyle(firstChild).marginLeft) +
parseFloat(window.getComputedStyle(firstChild).marginRight);
wrapper.dataset.swapAt = totalWidth;
wrapper.dataset.getNextElementWidth = false;
}
if ($wrapper.data('swapAt') <= $wrapper.scrollLeft()) {
var swap_el = $wrapper.data('scrollableArea').children(':first').detach();
$wrapper.data('scrollableArea').append(swap_el);
$wrapper.scrollLeft($wrapper.scrollLeft() - swap_el.outerWidth(true));
$wrapper.data('getNextElementWidth', true);
if (wrapper.dataset.swapAt <= wrapper.scrollLeft) {
const swap_el = firstChild.remove();
wrapper.querySelector(".scrollableArea").append(swap_el);
wrapper.scrollLeft =
wrapper.scrollLeft -
swap_el.offsetWidth +
parseFloat(window.getComputedStyle(swap_el).marginLeft) +
parseFloat(window.getComputedStyle(swap_el).marginRight);
wrapper.dataset.getNextElementWidth = true;
}
}, 20));
}, 20);
});
},
/**
* @private
*/
_stopScrolling: function (wrapper) {
if (!this.$scroller) {
if (!this.scroller) {
return;
}
this.$scroller.find('.scrollWrapper').toArray().forEach((el) => {
var $wrapper = $(el);
clearInterval($wrapper.data('autoScrollingInterval'));
[...this.scroller.querySelectorAll(".scrollWrapper")].forEach((el) => {
const wrapper = el;
clearInterval(wrapper.dataset.autoScrollingInterval);
});
},

Expand Down Expand Up @@ -171,7 +190,7 @@ publicWidget.registry.twitter = publicWidget.Widget.extend({
if (ev.target.tagName === 'A') {
return;
}
var url = $(ev.currentTarget).data('url');
var url = ev.currentTarget.dataset.url;
if (url) {
window.open(url, '_blank');
}
Expand Down

0 comments on commit 5057e7b

Please sign in to comment.