From 96946763ec4166e2190f443c334a8792aa014110 Mon Sep 17 00:00:00 2001 From: Eric Date: Wed, 14 Feb 2024 17:31:51 -0600 Subject: [PATCH] Website: add page buttons to component (#16683) Closes: #16304 Changes: - Added page buttons to the `` component --- .../testimonials-pagination-next-48x48@2x.png | Bin 0 -> 2259 bytes ...timonials-pagination-previous-48x48@2x.png | Bin 0 -> 2285 bytes .../components/scrollable-tweets.component.js | 73 ++++++++++--- .../scrollable-tweets.component.less | 103 ++++++++++-------- 4 files changed, 119 insertions(+), 57 deletions(-) create mode 100644 website/assets/images/testimonials-pagination-next-48x48@2x.png create mode 100644 website/assets/images/testimonials-pagination-previous-48x48@2x.png diff --git a/website/assets/images/testimonials-pagination-next-48x48@2x.png b/website/assets/images/testimonials-pagination-next-48x48@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..e8ff756ae1f8ed36ea115dd83385bee15511f74f GIT binary patch literal 2259 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 Hu0mjfDC}Hm literal 0 HcmV?d00001 diff --git a/website/assets/js/components/scrollable-tweets.component.js b/website/assets/js/components/scrollable-tweets.component.js index 26c2258dc..4737c58e4 100644 --- a/website/assets/js/components/scrollable-tweets.component.js +++ b/website/assets/js/components/scrollable-tweets.component.js @@ -23,16 +23,16 @@ parasails.registerComponent('scrollableTweets', { return { quotesToDisplay: [], quotesWithVideoLinks: [], - currentTweetPage: 0, - numberOfTweetCards: 0, - numberOfTweetPages: 0, + tweetsDiv: undefined, + tweetCards: undefined, + pageWidth: undefined, + numberOfTweetCardsDisplayedOnThisPage: undefined, + showPreviousPageButton: false, + showNextPageButton: true, numberOfTweetsPerPage: 0, - tweetCardWidth: 0, - tweetPageWidth: 0, - screenSize: 0, - scrolledAmount: 0, - scrollableAmount: 0, - modal: '' + syncing: false, + firstCardPosition: 0, + modal: '', }; }, @@ -41,7 +41,10 @@ parasails.registerComponent('scrollableTweets', { // ╩ ╩ ╩ ╩ ╩╩═╝ template: `
+
+
+
@@ -61,11 +64,9 @@ parasails.registerComponent('scrollableTweets', {
-
-
- +
@@ -93,7 +94,13 @@ parasails.registerComponent('scrollableTweets', { }, mounted: async function(){ - + this.tweetsDiv = $('div[purpose="tweets"]')[0]; + this.tweetCards = $('a[purpose="tweet-card"]'); + this.firstCardPosition = this.tweetCards[0].getBoundingClientRect().x; + this.numberOfTweetCardsDisplayedOnThisPage = this.tweetCards.length; + this.calculateHowManyFullTweetsCanBeDisplayed(); + $(window).on('resize', this.calculateHowManyFullTweetsCanBeDisplayed); + $(window).on('wheel', this.updatePageIndicators); }, beforeDestroy: function() { @@ -103,6 +110,46 @@ parasails.registerComponent('scrollableTweets', { // ║║║║ ║ ║╣ ╠╦╝╠═╣║ ║ ║║ ║║║║╚═╗ // ╩╝╚╝ ╩ ╚═╝╩╚═╩ ╩╚═╝ ╩ ╩╚═╝╝╚╝╚═╝ methods: { + calculateHowManyFullTweetsCanBeDisplayed: function() { + let firstTweetCard = this.tweetCards[0]; + let nextTweetCard = this.tweetCards[1]; + this.tweetCardWidth = nextTweetCard.getBoundingClientRect().x - firstTweetCard.getBoundingClientRect().x; + this.numberOfTweetsPerPage = Math.floor((document.body.clientWidth - this.firstCardPosition)/this.tweetCardWidth); + if(this.numberOfTweetsPerPage < 1){ + this.numberOfTweetsPerPage = 1; + } + this.pageWidth = this.tweetCardWidth * this.numberOfTweetsPerPage; + if(this.numberOfTweetsPerPage >= this.numberOfTweetCardsDisplayedOnThisPage){ + $(this.tweetsDiv).addClass('mx-auto'); + } else { + $(this.tweetsDiv).removeClass('mx-auto'); + } + this.updatePageIndicators(); + }, + + clickNextPage: async function() { + if(!this.syncing){ + this.tweetsDiv.scrollLeft += this.pageWidth; + await setTimeout(()=>{ + this.updatePageIndicators(); + }, 600); + } + }, + + clickPreviousPage: async function() { + if(!this.syncing){ + this.tweetsDiv.scrollLeft -= this.pageWidth; + await setTimeout(()=>{ + this.updatePageIndicators(); + }, 600); + } + }, + + updatePageIndicators: function() { + this.syncing = false; + this.showPreviousPageButton = this.tweetsDiv.scrollLeft > (this.firstCardPosition * 0.5); + this.showNextPageButton = (this.tweetsDiv.scrollWidth - this.tweetsDiv.scrollLeft - this.tweetsDiv.clientWidth) >= this.tweetCardWidth * .25; + }, clickOpenVideoModal: function(modalName) { this.modal = _.kebabCase(modalName); diff --git a/website/assets/styles/components/scrollable-tweets.component.less b/website/assets/styles/components/scrollable-tweets.component.less index c0844ae1f..6e46904a1 100644 --- a/website/assets/styles/components/scrollable-tweets.component.less +++ b/website/assets/styles/components/scrollable-tweets.component.less @@ -9,24 +9,73 @@ font-size: 13px; line-height: 20px; + position: relative; [purpose='tweets']::-webkit-scrollbar { display: none; } + [purpose='previous-page-indicator'] { + display: none; + opacity: 0; + cursor: pointer; + z-index: 30; + position: absolute; + transition: transform 1s, opacity 0.25s ease-in; + transform: scale(0.5); + bottom: 50%; + left: 10px; + width: 48px; + height: 48px; + img { + width: 48px; + height: 48px; + } + } + + [purpose='next-page-indicator'] { + display: none; + opacity: 0; + cursor: pointer; + position: absolute; + transition: transform 1s, opacity 0.25s ease-in; + transform: scale(0.5); + bottom: 50%; + z-index: 30; + right: 10px; + width: 48px; + height: 48px; + img { + width: 48px; + height: 48px; + } + } + [purpose='tweets'] { overflow-x: scroll; scroll-behavior: smooth; padding-left: 120px; padding-right: 120px; margin-top: 80px; - padding-bottom: 16px; + margin-bottom: 80px; scrollbar-width: none; -ms-overflow-style: none; + &:hover { + [purpose='previous-page-indicator'] { + opacity: 1; + transform: scale(1.0); + } + [purpose='next-page-indicator'] { + opacity: 1; + transform: scale(1.0); + } + } } [purpose='tweet-card'] { + box-shadow: none; + background-color: #FFF; [purpose='logo'] { img { max-height: 32px; @@ -78,33 +127,6 @@ box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1); } } - - [purpose='page-indictator-container'] { - margin-bottom: 80px; - padding-left: 120px; - padding-right: 120px; - } - [purpose='page-indicator'] { - cursor: pointer; - padding: 4px; - height: 16px; - width: 16px; - border-radius: 100%; - margin-right: 8px; - - background-color: @core-vibrant-blue-15; - &.selected { - background-color: @core-fleet-black-50; - } - - - } - [purpose='tweets-page-indicator'] { - li { - } - li.selected { - } - } [purpose='video-modal'] { [purpose='modal-dialog'] { width: 100%; @@ -139,15 +161,20 @@ } + @media(hover) { + [purpose='previous-page-indicator'] { + display: flex; + } + [purpose='next-page-indicator'] { + display: flex; + } + } + @media (max-width: 991px) { [purpose='tweets'] { padding-left: 80px; padding-right: 80px; } - [purpose='page-indictator-container'] { - padding-left: 80px; - padding-right: 80px; - } } @media (max-width: 768px) { @@ -155,10 +182,6 @@ padding-left: 40px; padding-right: 40px; } - [purpose='page-indictator-container'] { - padding-left: 40px; - padding-right: 40px; - } [purpose='video-modal'] { [purpose='modal-dialog'] { max-width: 97vw; @@ -179,19 +202,11 @@ padding-left: 20px; padding-right: 20px; } - [purpose='page-indictator-container'] { - padding-left: 20px; - padding-right: 20px; - } [purpose='tweet-card'] { min-width: 280px; padding: 20px; border-radius: 16px; } - [purpose='page-indicator'] { - padding: 12px; - margin-bottom: 8px; - } [purpose='video-modal'] { [purpose='modal-content'] { width: 95vw;