fleet/website/assets/js/components/logo-carousel.component.js

/**
 * <logo-carousel>
 * -----------------------------------------------------------------------------
 * A row of logos that scroll infinitly to the left.
 *
 * @type {Component}
 *
 * -----------------------------------------------------------------------------
 */

parasails.registerComponent('logoCarousel', {
  //  ╔═╗╦═╗╔═╗╔═╗╔═╗
  //  ╠═╝╠╦╝║ ║╠═╝╚═╗
  //  ╩  ╩╚═╚═╝╩  ╚═╝
  props: [
    'displayBottomRow'
  ],

  //  ╦╔╗╔╦╔╦╗╦╔═╗╦    ╔═╗╔╦╗╔═╗╔╦╗╔═╗
  //  ║║║║║ ║ ║╠═╣║    ╚═╗ ║ ╠═╣ ║ ║╣
  //  ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝  ╚═╝ ╩ ╩ ╩ ╩ ╚═╝
  data: function (){
    return {
      bottomRowVisible: this.displayBottomRow ? true : false,
      isSafariThirteen: bowser.safari && _.startsWith(bowser.version, '13'),
      isIosThirteen: bowser.safari && _.startsWith(bowser.version, '13') && bowser.ios,
    };
  },

  //  ╦ ╦╔╦╗╔╦╗╦
  //  ╠═╣ ║ ║║║║
  //  ╩ ╩ ╩ ╩ ╩╩═╝
  template: `
  <div purpose="logos" class="mx-auto d-flex flex-column align-items-center">
    <div purpose="logo-carousel-top">
      <div purpose="logo-row" class="d-flex flex-row align-items-center" :class="[isIosThirteen ? 'ios-13-scroll-animation' : isSafariThirteen ? 'safari-13-scroll-animation' : '']">
        <a href="/customers">
          <!-- Group three -->
          <img alt="Easygo logo" src="/images/logos/[email protected]">
          <img alt="Knostic logo" src="/images/logos/[email protected]">
          <img alt="Dropbox logo" src="/images/logos/[email protected]">
          <img alt="Amps logo" src="/images/logos/[email protected]">
          <img alt="Leidos logo" src="/images/logos/[email protected]">
          <img alt="Prenuvo logo" src="/images/logos/[email protected]">
          <img alt="Gitlab logo" src="/images/logos/[email protected]">
          <img alt="Fastly logo" src="/images/logos/[email protected]">
          <img alt="Drata logo" src="/images/logos/[email protected]">
          <img alt="Hubspot logo" src="/images/logos/[email protected]">
          <img alt="Abridge logo" src="/images/logos/[email protected]">
          <img alt="Coinbase logo" src="/images/logos/[email protected]">
          <!-- Group two -->
          <img alt="Csiro logo" src="/images/logos/[email protected]">
          <img alt="Copia logo" src="/images/logos/[email protected]">
          <img alt="Hadrian logo" src="/images/logos/[email protected]">
          <img alt="Gusto logo" src="/images/logos/[email protected]">
          <img alt="Fireblocks logo" src="/images/logos/[email protected]">
          <img alt="Snowflake logo" src="/images/logos/[email protected]">
          <img alt="Vibe logo" src="/images/logos/[email protected]">
          <img alt="Conductorone logo" src="/images/logos/[email protected]">
          <img alt="Benchling logo" src="/images/logos/[email protected]">
          <img alt="Cursor logo" src="/images/logos/[email protected]">
          <!-- Group one -->
          <img alt="Grafana labs logo" src="/images/logos/[email protected]">
          <img alt="Rivian logo" src="/images/logos/[email protected]">
          <img alt="Epic Games logo" src="/images/logos/[email protected]">
          <img alt="Reddit logo" src="/images/logos/[email protected]">
          <img alt="Uber logo" src="/images/logos/[email protected]">
          <img alt="Proton logo" src="/images/logos/[email protected]">
          <img alt="Nutanix logo" src="/images/logos/[email protected]">
          <img alt="Mr Beast logo" src="/images/logos/[email protected]">
          <img alt="Deeploi logo" src="/images/logos/[email protected]">
          <img alt="Flywire logo" src="/images/logos/[email protected]">
          <img alt="SandboxAQ logo" src="/images/logos/logo-sandboxaq-132x24.png">
          <img alt="Webflow logo" src="/images/logos/[email protected]">
          <!-- Group four -->
          <img alt="Censys logo" src="/images/logos/[email protected]">
          <img alt="Faire logo" src="/images/logos/[email protected]">
          <img alt="Bitmex logo" src="/images/logos/[email protected]">
          <img alt="Mozilla logo" src="/images/logos/[email protected]">
          <img alt="Flock Safety logo" src="/images/logos/[email protected]">
          <img alt="Schodinger logo" src="/images/logos/[email protected]">
          <img alt="Deloitte logo" src="/images/logos/[email protected]">
          <img alt="Calendly logo" src="/images/logos/[email protected]">
          <img alt="Notion logo" src="/images/logos/[email protected]">
          <img alt="Lastpass logo" src="/images/logos/[email protected]">
          <img alt="Smarter Technologies logo" src="/images/logos/[email protected]">
          <img alt="Treeline logo" src="/images/logos/[email protected]">

        </a>
      </div>
      <div purpose="logo-row" class="d-flex flex-row align-items-center" :class="[isIosThirteen ? 'ios-13-scroll-animation' : isSafariThirteen ? 'safari-13-scroll-animation' : '']">
        <a href="/customers">
          <!-- Group three -->
          <img alt="Easygo logo" src="/images/logos/[email protected]">
          <img alt="Knostic logo" src="/images/logos/[email protected]">
          <img alt="Dropbox logo" src="/images/logos/[email protected]">
          <img alt="Amps logo" src="/images/logos/[email protected]">
          <img alt="Leidos logo" src="/images/logos/[email protected]">
          <img alt="Prenuvo logo" src="/images/logos/[email protected]">
          <img alt="Gitlab logo" src="/images/logos/[email protected]">
          <img alt="Fastly logo" src="/images/logos/[email protected]">
          <img alt="Drata logo" src="/images/logos/[email protected]">
          <img alt="Hubspot logo" src="/images/logos/[email protected]">
          <img alt="Abridge logo" src="/images/logos/[email protected]">
          <img alt="Coinbase logo" src="/images/logos/[email protected]">
          <!-- Group two -->
          <img alt="Csiro logo" src="/images/logos/[email protected]">
          <img alt="Copia logo" src="/images/logos/[email protected]">
          <img alt="Hadrian logo" src="/images/logos/[email protected]">
          <img alt="Gusto logo" src="/images/logos/[email protected]">
          <img alt="Fireblocks logo" src="/images/logos/[email protected]">
          <img alt="Snowflake logo" src="/images/logos/[email protected]">
          <img alt="Vibe logo" src="/images/logos/[email protected]">
          <img alt="Conductorone logo" src="/images/logos/[email protected]">
          <img alt="Benchling logo" src="/images/logos/[email protected]">
          <img alt="Cursor logo" src="/images/logos/[email protected]">
          <!-- Group one -->
          <img alt="Grafana labs logo" src="/images/logos/[email protected]">
          <img alt="Rivian logo" src="/images/logos/[email protected]">
          <img alt="Epic Games logo" src="/images/logos/[email protected]">
          <img alt="Reddit logo" src="/images/logos/[email protected]">
          <img alt="Uber logo" src="/images/logos/[email protected]">
          <img alt="Proton logo" src="/images/logos/[email protected]">
          <img alt="Nutanix logo" src="/images/logos/[email protected]">
          <img alt="Mr Beast logo" src="/images/logos/[email protected]">
          <img alt="Deeploi logo" src="/images/logos/[email protected]">
          <img alt="Flywire logo" src="/images/logos/[email protected]">
          <img alt="SandboxAQ logo" src="/images/logos/logo-sandboxaq-132x24.png">
          <img alt="Webflow logo" src="/images/logos/[email protected]">
          <!-- Group four -->
          <img alt="Censys logo" src="/images/logos/[email protected]">
          <img alt="Faire logo" src="/images/logos/[email protected]">
          <img alt="Bitmex logo" src="/images/logos/[email protected]">
          <img alt="Mozilla logo" src="/images/logos/[email protected]">
          <img alt="Flock Safety logo" src="/images/logos/[email protected]">
          <img alt="Schodinger logo" src="/images/logos/[email protected]">
          <img alt="Deloitte logo" src="/images/logos/[email protected]">
          <img alt="Calendly logo" src="/images/logos/[email protected]">
          <img alt="Notion logo" src="/images/logos/[email protected]">
          <img alt="Lastpass logo" src="/images/logos/[email protected]">
          <img alt="Smarter Technologies logo" src="/images/logos/[email protected]">
          <img alt="Treeline logo" src="/images/logos/[email protected]">
        </a>
      </div>
      <div purpose="fade-left"></div>
      <div purpose="fade-right"></div>
    </div>
    <div purpose="logo-carousel-bottom" v-if="bottomRowVisible">
      <div purpose="logo-row" class="d-flex flex-row-reverse align-items-center" :class="[isIosThirteen ? 'ios-13-scroll-animation' : isSafariThirteen ? 'safari-13-scroll-animation' : '']" >
        <a href="/customers">

          <!-- Group two -->
          <img alt="Csiro logo" src="/images/logos/[email protected]">
          <img alt="Copia logo" src="/images/logos/[email protected]">
          <img alt="Hadrian logo" src="/images/logos/[email protected]">
          <img alt="Gusto logo" src="/images/logos/[email protected]">
          <img alt="Fireblocks logo" src="/images/logos/[email protected]">
          <img alt="Snowflake logo" src="/images/logos/[email protected]">
          <img alt="Vibe logo" src="/images/logos/[email protected]">
          <img alt="Conductorone logo" src="/images/logos/[email protected]">



          <!-- Group three -->
          <img alt="Easygo logo" src="/images/logos/[email protected]">
          <img alt="Knostic logo" src="/images/logos/[email protected]">
          <img alt="Dropbox logo" src="/images/logos/[email protected]">
          <img alt="Amps logo" src="/images/logos/[email protected]">
          <img alt="Leidos logo" src="/images/logos/[email protected]">
          <img alt="Prenuvo logo" src="/images/logos/[email protected]">
          <img alt="Gitlab logo" src="/images/logos/[email protected]">
          <img alt="Fastly logo" src="/images/logos/[email protected]">
          <img alt="Drata logo" src="/images/logos/[email protected]">
          <img alt="Hubspot logo" src="/images/logos/[email protected]">


          <!-- Group four -->
          <img alt="Censys logo" src="/images/logos/[email protected]">
          <img alt="Faire logo" src="/images/logos/[email protected]">
          <img alt="Bitmex logo" src="/images/logos/[email protected]">
          <img alt="Mozilla logo" src="/images/logos/[email protected]">
          <img alt="Flock Safety logo" src="/images/logos/[email protected]">
          <img alt="Schodinger logo" src="/images/logos/[email protected]">
          <img alt="Deloitte logo" src="/images/logos/[email protected]">
          <img alt="Calendly logo" src="/images/logos/[email protected]">
          <img alt="Notion logo" src="/images/logos/[email protected]">
          <img alt="Lastpass logo" src="/images/logos/[email protected]">
          <!-- Group one -->
          <img alt="Grafana labs logo" src="/images/logos/[email protected]">
          <img alt="Rivian logo" src="/images/logos/[email protected]">
          <img alt="Epic Games logo" src="/images/logos/[email protected]">
          <img alt="Reddit logo" src="/images/logos/[email protected]">
          <img alt="Uber logo" src="/images/logos/[email protected]">
          <img alt="Proton logo" src="/images/logos/[email protected]">
          <img alt="Nutanix logo" src="/images/logos/[email protected]">
          <img alt="Mr Beast logo" src="/images/logos/[email protected]">
          <img alt="Deeploi logo" src="/images/logos/[email protected]">
          <img alt="Flywire logo" src="/images/logos/[email protected]">

        </a>
      </div>
      <div purpose="logo-row" class="d-flex flex-row-reverse align-items-center" :class="[isIosThirteen ? 'ios-13-scroll-animation' : isSafariThirteen ? 'safari-13-scroll-animation' : '']">
        <a href="/customers">

          <!-- Group two -->
          <img alt="Csiro logo" src="/images/logos/[email protected]">
          <img alt="Copia logo" src="/images/logos/[email protected]">
          <img alt="Hadrian logo" src="/images/logos/[email protected]">
          <img alt="Gusto logo" src="/images/logos/[email protected]">
          <img alt="Fireblocks logo" src="/images/logos/[email protected]">
          <img alt="Snowflake logo" src="/images/logos/[email protected]">
          <img alt="Vibe logo" src="/images/logos/[email protected]">
          <img alt="Conductorone logo" src="/images/logos/[email protected]">

          <!-- Group three -->
          <img alt="Easygo logo" src="/images/logos/[email protected]">
          <img alt="Knostic logo" src="/images/logos/[email protected]">
          <img alt="Dropbox logo" src="/images/logos/[email protected]">
          <img alt="Amps logo" src="/images/logos/[email protected]">
          <img alt="Leidos logo" src="/images/logos/[email protected]">
          <img alt="Prenuvo logo" src="/images/logos/[email protected]">
          <img alt="Gitlab logo" src="/images/logos/[email protected]">
          <img alt="Fastly logo" src="/images/logos/[email protected]">
          <img alt="Drata logo" src="/images/logos/[email protected]">
          <img alt="Hubspot logo" src="/images/logos/[email protected]">
          <!-- Group four -->
          <img alt="Censys logo" src="/images/logos/[email protected]">
          <img alt="Faire logo" src="/images/logos/[email protected]">
          <img alt="Bitmex logo" src="/images/logos/[email protected]">
          <img alt="Mozilla logo" src="/images/logos/[email protected]">
          <img alt="Flock Safety logo" src="/images/logos/[email protected]">
          <img alt="Schodinger logo" src="/images/logos/[email protected]">
          <img alt="Deloitte logo" src="/images/logos/[email protected]">
          <img alt="Calendly logo" src="/images/logos/[email protected]">
          <img alt="Notion logo" src="/images/logos/[email protected]">
          <img alt="Lastpass logo" src="/images/logos/[email protected]">
          <!-- Group one -->
          <img alt="Grafana labs logo" src="/images/logos/[email protected]">
          <img alt="Rivian logo" src="/images/logos/[email protected]">
          <img alt="Epic Games logo" src="/images/logos/[email protected]">
          <img alt="Reddit logo" src="/images/logos/[email protected]">
          <img alt="Uber logo" src="/images/logos/[email protected]">
          <img alt="Proton logo" src="/images/logos/[email protected]">
          <img alt="Nutanix logo" src="/images/logos/[email protected]">
          <img alt="Mr Beast logo" src="/images/logos/[email protected]">
          <img alt="Deeploi logo" src="/images/logos/[email protected]">
          <img alt="Flywire logo" src="/images/logos/[email protected]">
        </a>
      </div>
      <div purpose="fade-left"></div>
      <div purpose="fade-right"></div>
    </div>

  </div>
  `,

  //  ╦  ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦  ╔═╗
  //  ║  ║╠╣ ║╣ ║  ╚╦╝║  ║  ║╣
  //  ╩═╝╩╚  ╚═╝╚═╝ ╩ ╚═╝╩═╝╚═╝
  beforeMount: function() {
    //…
  },
  mounted: async function(){
    //…
  },
  beforeDestroy: function() {
    //…
  },

  //  ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗
  //  ║║║║ ║ ║╣ ╠╦╝╠═╣║   ║ ║║ ║║║║╚═╗
  //  ╩╝╚╝ ╩ ╚═╝╩╚═╩ ╩╚═╝ ╩ ╩╚═╝╝╚╝╚═╝
  methods: {
    //…
  }
});