Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[REF] Convert all jquery related code in vanilla Javascript #165022

Draft
wants to merge 2 commits into
base: master
Choose a base branch
from
Draft

[REF] Convert all jquery related code in vanilla Javascript #165022

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4fec8be
[REF] Convert all jquery related code in vanilla Javascript
visp-odoo May 9, 2024
d9b4f00
[IMP] Improvements after code review
msh-odoo May 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
88 changes: 52 additions & 36 deletions addons/website_twitter/static/src/js/website.twitter.animation.js
View file
Open in desktop
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.append("<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.replaceChild();

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,25 @@ 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) => {
totalWidth +=
area.getBoundingClientRect().width +
parseFloat(window.getComputedStyle(area).marginLeft) +
parseFloat(window.getComputedStyle(area).marginRight);
});
$scrollableArea.width(totalWidth);
$scrollWrapper.scrollLeft(index*180);
scrollableArea.style.width = totalWidth;
scrollWrapper.scrollLeft = index * 180;
});
self._startScrolling();
});
Expand All @@ -113,37 +120,46 @@ 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((wrapper) => {
wrapper.dataset.getNextElementWidth = true;
// TODO: VISP: To Test, as dataset will store in string format while interval is integer value
wrapper.dataset.autoScrollingInterval = setInterval(function () {
const firstChild = wrapper.querySelector(".scrollableArea").firstElementChild;
wrapper.scrollLeft = wrapper.scrollLeft + 1;
if (Boolean(wrapper.dataset.getNextElementWidth)) {
const totalWidth =
firstChild.getBoundingClientRect().width +
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 (parseInt(wrapper.dataset.swapAt) <= wrapper.scrollLeft) {
const swap_el = firstChild.remove();
// TODO: VISP: To Test
wrapper.getAttribute("data-scrollableArea").append(swap_el);
wrapper.scrollLeft =
wrapper.scrollLeft -
swap_el.getBoundingClientRect().width +
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((wrapper) => {
clearInterval(wrapper.dataset.autoScrollingInterval);
});
},

Expand Down Expand Up @@ -171,7 +187,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