/** * * ----------------------------------------------------------------------------- * A horizontally scrolling row of tweets with an auto-updating page indicator * * @type {Component} * * ----------------------------------------------------------------------------- */ parasails.registerComponent('scrollableTweets', { // ╔═╗╦═╗╔═╗╔═╗╔═╗ // ╠═╝╠╦╝║ ║╠═╝╚═╗ // ╩ ╩╚═╚═╝╩ ╚═╝ props: [], // ╦╔╗╔╦╔╦╗╦╔═╗╦ ╔═╗╔╦╗╔═╗╔╦╗╔═╗ // ║║║║║ ║ ║╠═╣║ ╚═╗ ║ ╠═╣ ║ ║╣ // ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝ ╚═╝ ╩ ╩ ╩ ╩ ╚═╝ data: function () { return { currentTweetPage: 0, numberOfTweetCards: 6, numberOfTweetPages: 0, numberOfTweetsPerPage: 0, tweetCardWidth: 0, }; }, // ╦ ╦╔╦╗╔╦╗╦ // ╠═╣ ║ ║║║║ // ╩ ╩ ╩ ╩ ╩╩═╝ template: `

Exciting. This is a team that listens to feedback.

Erik Gomez

Staff Software Engineer @Uber

Mad props to how easy making a deploy pkg of Orbit was. I wish everyone made stuff that easy.

Wesley Whetstone

CPE @Square

#Fleet’s come a long way - to now being the top open-source #osquery manager. Just in the past 6 months.

Brendan Shaklovitz

Senior SRE @Atlassian

It’s great to see the new release of Fleet containing some really cool new features that make @osquery much more usable in practical environments. I’m really impressed with the work that @thezachw and crew are doing at @fleetctl.

Mike Arpaia

Creator of @osquery

#osquery is one of the best tools out there and #fleetdm makes it even better. Highly recommend it if you want to monitor, detect and investigate threats on a scale and also for infra/sys admin.

I have used it on 15k servers and it’s really scalable.

Ahmed Elshaer

DFIR, Blue Teaming, SecOps @wayfair

With the power of osquery, you need a scalable & resilient platform to manage your workloads. Fleet is the "just right" open-source, enterprise grade solution.

Abubakar Yousafzai

Security Software Development & Engineering @Comcast

`, // ╦ ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦ ╔═╗ // ║ ║╠╣ ║╣ ║ ╚╦╝║ ║ ║╣ // ╩═╝╩╚ ╚═╝╚═╝ ╩ ╚═╝╩═╝╚═╝ beforeMount: function() { //… }, mounted: async function(){ await this.updateNumberOfTweetPages(); // Update the number of pages for the tweet page indicator. const tweetsDiv = document.querySelector('div[purpose="tweets"]'); tweetsDiv.addEventListener('scroll', this.updatePageIndicator, {passive: true}); // Add a scroll event listener to update the tweet page indicator when a user scrolls the div. window.addEventListener('resize', this.updateNumberOfTweetPages); // Add an event listener to update the number of tweet pages based on how many tweet cards can fit on the screen. }, beforeDestroy: function() { }, // ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗ // ║║║║ ║ ║╣ ╠╦╝╠═╣║ ║ ║║ ║║║║╚═╗ // ╩╝╚╝ ╩ ╚═╝╩╚═╩ ╩╚═╝ ╩ ╩╚═╝╝╚╝╚═╝ methods: { updateNumberOfTweetPages: async function() { // Get the width of the first tweet card. let firstTweetCardDiv = document.querySelector('div[purpose="tweet-card"]'); this.tweetCardWidth = firstTweetCardDiv.clientWidth + 16; // Find out how may entire cards can fit on the screen. this.numberOfTweetsPerPage = Math.floor(window.innerWidth / this.tweetCardWidth); // Find out how many pages of tweet cards there will be. this.numberOfTweetPages = Math.ceil(this.numberOfTweetCards / this.numberOfTweetsPerPage); // Update the current page indicator. this.updatePageIndicator(); await this.forceRender(); }, updatePageIndicator: function() { // Get the tweets div. let tweetsDiv = document.querySelector('div[purpose="tweets"]'); // Find out the width of a page of tweet cards let tweetPageWidth; if(this.numberOfTweetPages === 2 && this.numberOfTweetsPerPage > 3){ tweetPageWidth = this.tweetCardWidth; } else { tweetPageWidth = this.tweetCardWidth * this.numberOfTweetsPerPage; } // Set the maximum number of pages as the maximum value let currentPage = Math.min(Math.round(tweetsDiv.scrollLeft / tweetPageWidth), (this.numberOfTweetPages - 1)); // Update the page indicator this.currentTweetPage = currentPage; }, scrollTweetsDivToPage: function(page) { // Get the tweets div. let tweetsDiv = document.querySelector('div[purpose="tweets"]'); // Find out the width of a page of tweet cards let pageWidth = this.tweetCardWidth * this.numberOfTweetsPerPage; // Figure out how much distance we're expecting to scroll. let baseAmountToScroll = (page - this.currentTweetPage) * pageWidth; // Find out the actual distance the div has been scrolled let amountCurrentPageHasBeenScrolled = tweetsDiv.scrollLeft - (this.currentTweetPage * pageWidth); // subtract the amount the current page has been scrolled from the baseAmountToScroll let amountToScroll = baseAmountToScroll - amountCurrentPageHasBeenScrolled; // Scroll the div to the specified 'page' tweetsDiv.scrollBy(amountToScroll, 0); }, } });