bf-components v1.3.658

Bf Vue Components

npm package for custom Vue.js components used by Big Fish marketing for branded websites.

Build Setup

# install verdaccio globally
npm install -g verdaccio

# serve packages with
verdaccio

# Set your registry for publishing and pulling packages
npm set registry http://localhost:4873/

Base Components

SectionHero

import { SectionHero } from 'bf-components'

<SectionHero className="custom-class-name" idName="custom-id-name" :injectStyle="customStyleObject" :innerDivStyle="customStyleObject">
    <div slot="slot-logo">
        Add markup for logo section here
    </div>
    <div slot="slot-cta">
        Add markup for cta section here
    </div>
    <div slot="slot-tagline">
        Add markup for tagline section here
    </div>
    <div slot="slot-footer">
        Add markup for anything you'd like aligned bottom in the hero section
    </div>
</SectionHero>

This section will automatically center the inner div that contains the logo, cta, and tagline. The tagline slot and footer slot is optional, but the other two are required. You may add any raw html markup or VUE component markup in these slot sections.

SectionSplit

import { SectionSplit } from 'bf-components'

      <SectionSplit className="custom-class-name" idName="custom-id-name" wrap="reverse" :injectStyle="customStyleObject" backgroundImage="image-url.jpg" :lazyLoadWithScrollPosition="currentWindowScrollPosition" lazyLoadOffset="250">
        <div slot="slot-left">
            Add markup for left side content here
        </div>
        <div slot="slot-right">
            Add markup for right side content here
        </div>
      </SectionSplit>

SectionFull

import { SectionFull } from 'bf-components'

<SectionFull
	className="custom-class-name"
    idName="custom-id-name"
    :injectStyle="customStyleObject"
    :backgroundImage="image-url.jpg"
    :lazyLoadWithScrollPosition="currentWindowScrollPosition"
    lazyLoadOffset="250"
>
    Whatever you put in here will be in a full width section
</SectionFull>

BannerSmartApp

import {BannerSmartApp } from 'bf-components'

<BannerSmartApp
    device="currentUserDevice"
    appName="Name of App"
    companyName="Name of App Developer"
    androidRating="5"
    iosRating="5"
    :mobileOnly="true"
    googleStoreLink="http://www.link-to-google-store-download.com"
    appStoreLink="http://www.link-go-app-store-download.com"
    androidAppIcon="./images/android-app-icon.png"
    iosAppIcon="./images/ios-app-icon.png"
    :triggerResize="handleResize"
>
</BannerSmartApp>

ButtonDefault

import { ButtonDefault } from 'bf-components'

<ButtonDefault
    className="custom-class-name"
    idName="custom-id-name"
    injectStyle="customStyleObject"
    onClick="CustomFunction()"
    hyperlink="http://www.link-to-site.com"
    text="Button Display Text"
    buttonColor="Default Button Color"
    buttonHoverColor="Hover Button Color"
    animation="bounce"
    imageLink="../image-url.png"
    :lazyLoadWithScrollPosition="currentWindowScrollPosition"
    lazyLoadOffset="250"
>
</ButtonDefault>

Currently the only animation available for button is 'bounce'.

IconDefault

import { IconDefault } from 'bf-components'

<IconDefault
    className="custom-class-name"
    idName="custom-id-name"
    injectStyle="customStyleObject"
    imageLink="../image-url.png"
    hyperlink="http://www.link-to-site.com"
    imageAlt="Alt text for the icon image"
    text="Text to display with the icon"
    display="block"
    animation="bounce"
    iconSize="small"
    iconHeader="Header Info"
    iconPosition="after"
    responsive="true"
    :lazyLoadWithScrollPosition="currentWindowScrollPosition"
    lazyLoadOffset="250"
>
</IconDefault>

FrameDefault

import { FrameDefault } from 'bf-components'

<FrameDefault
    className="custom-class-name"
    idName="custom-id-name"
    injectStyle="customStyleObject"
    assetRoot="path/to/dist/assets/"
    contentLink="https:/link-to-content.com"
    frame="iphone-white"
    :isDefaultStylesEnabled="true"
    :lazyLoadWithScrollPosition="currentWindowScrollPosition"
    lazyLoadOffset="250"
    isModalEnabled="true"
>
</FrameDefault>

ModalDefault

import { ModalDefault } from 'bf-components'

<ModalDefault
    className="custom-class-name"
    idName="custom-id-name"
    assetRoot="path-to-asset-root"
    toggleModalActiveFn="toggleModalActiveFn"
    isModalActive="isModalActive"
    injectStyle="customStyleObject"
    bgColor="white"
    borderColor="#00487c"
>
    Add the HTML Markup for inside the modal here!
</ModalDefault>

Note that you should include the modalMixin wherever you include the DefaultModal component. Unless you want custom modal event handling.

SliderDefault

import { SliderDefault } from 'bf-components'

<template>
  <SliderDefault
      :slides="slideImages"
      :customProps="{
          slidesToShow: slidesToShow,
          centerMode: true,
          slidesToScroll: 2,
          dots: false
       }"
   >
   </SliderDefault>
 </template>

<script>
// Slide items can be string templates
  const slideItem1 = {
      index: 0,
      content: `<div class="some-class">content here</div>`
  }

// Or Slide Items can be full components
  const slideItem2 = {
    index: 1,
    component: SomeComponent,
    props: {
        some_component_prop: value_for_prop
      }
  }

  const slideImages = [slideItem1, slideItem2]
</script>

Slider Component Options

Slider Custom Props

ContainerFlex

import { ContainerFlex } from 'bf-components'

<ContainerFlex
    className="custom-class-name"
    idName="custom-id-name"
    alignItems="center"
    flexDirection="row"
    justifyContent="center"
    :injectStyle="customStyleObject"
    :backgroundImage="image-url.jpg"
    :lazyLoadWithScrollPosition="currentWindowScrollPosition"
    lazyLoadOffset="250"
>
    <div slot="slot-content">
        Whatever you put in here will be centered in a flexbox!
    </div>
</ContainerFlex>

ContainerBlock

import { ContainerBlock } from 'bf-components'

<ContainerBlock className="custom-class-name" idName="custom-id-name" :injectStyle="customStyleObject" :backgroundImage="image-url.jpg" :lazyLoadWithScrollPosition="currentWindowScrollPosition" lazyLoadOffset="250">
    <div slot="slot-content">
        Whatever you put in here will be centered in a block style container!
    </div>
</ContainerBlock>

Complex Components

ButtonsAppStore

import { ButtonsAppStore } from 'bf-components'

<ButtonsAppStore
    className="custom-class-name"
    idName="custom-id-name"
    injectStyle="customStyleObject"
    assetRoot="path/to/dist/assets/"
    animation="bounce"
    appStoreLink="http://hyperlink-to-app-store.com"
    googleStoreLink="http://hyperlink-to-app-store.com"
    amazonStoreLink="http://hyperlink-to-app-store.com"
    display="inline"
    lazyLoadWithScrollPosition="currentWindowScrollPosition"
    lazyLoadOffset="250"
    :isModalEnabled="true"
>
</ButtonsAppStore>

IconsSocial

import { IconsSocial } from 'bf-components'

<IconsSocial
    className="custom-class-name"
    idName="custom-id-name"
    injectStyle="customStyleObject"
    assetRoot="path/to/dist/assets/"
    iconSize="xsmall"
    animation="bounce"
    facebookLink="http://facebook.com"
    instagramLink="http://instagram.com"
    linkedinLink="http://linkedin.com"
    pinterestLink="http://pinterest.com"
    twitterLink="http://twitter.com"
    youtubeLink="http://youtube.com"
    lazyLoadWithScrollPosition="currentWindowScrollPosition"
    lazyLoadOffset="250"
></IconsSocial>

ModalTtd

import { ModalTtd } from 'bf-components'

    <ModalTtd
        className="custom-class-name"
        idName="custom-id-name"
        assetRoot="path/to/dist/assets/"
        :storedTracking="this.$store.tracking"
        gameTitle="App Name"
        gameId="app-name"
        subPublisher="my-sub-pub"
        subPlacement="hero"
        appStoreLink="http://www.link-to-app-store.com"
        googleStoreLink="http://www.link-to-app-store.com"
        amazonStoreLink="http://www.link-to-app-store.com"
        imageLink="image-url.png"
        lazyLoadWithScrollPosition="currentWindowScrollPosition"
        lazyLoadOffset="250"
        :isModalEnabled="true"
    >
    </ModalTtd>

FooterDefault

import { FooterDefault } from 'bf-components'

<FooterDefault
    assetRoot="path/to/dist/assets/"
    activeItem="genres"
    facebookLink="http://facebook.com"
    instagramLink="http://instagram.com"
    linkedinLink="http://linkedin.com"
    twitterLink="http://twitter.com"
    youtubeLink="http://youtube.com"
    lazyLoadWithScrollPosition="currentWindowScrollPosition"
    lazyLoadOffset="250"
>
</FooterDefault>

Bf Vue Mixins

Helpful mixins for building your own custom components

Lazy Loading

---

lazyContentMixin

Add the mixin to your component by doing the following:

import { lazyContentMixin } from 'bf-components'

export default { name: 'MyComponent' mixins: lazyContentMixin }

**This adds the following functionality to your component:**
*You do not need to put this code anywhere its for reference only*
```javascript
const getScrollPosition = require('../utils/get-scroll-position.js')
const handleError = require('../utils/error-handling.js')

module.exports = {
  props: {
    lazyLoadWithScrollPosition: Number,
    lazyLoadOffset: {
      type: Number,
      default: 250
    }
  },
  data: function () {
    return {
      // If lazyLoadWithScrollPosition is defined then contents should be invisible on load
      contentsVisible: typeof this.lazyLoadWithScrollPosition === 'undefined'
    }
  },
  watch: {
    lazyLoadWithScrollPosition: function () {
      // if scroll position is passed down and the images aren't visible yet.
      if (typeof this.lazyLoadWithScrollPosition !== 'undefined' && !this.contentsVisible) {
        const scrollPos = getScrollPosition(this.$el)
        const winHeight = window.innerHeight

        const lazyLoadPosition = scrollPos - winHeight
        if (lazyLoadPosition < this.lazyLoadOffset) {
          this.contentsVisible = true
        }
      }
    }
  },
  mounted: function () {
    if (this.lazyLoadOffset !== 250) {
      handleError(this.lazyLoadWithScrollPosition, 'lazyLoadOffset requires lazyLoadWithScrollPosition to be defined. Element: ' + this.$el)
    }
  }
}

This mixin adds the following props to your component |Props|Type|Default|Description| |--------|:---|:------|:----------| |lazyLoadWithScrollPosition|Number|n/a|If the current window scroll position is passed in, then it enables lazy load on all the icon images. |lazyLoadOffset|Number|250|Determines the scroll offset position for when images get loaded. This mixin adds the following data to your component |Data|Type|Default|Description| |--------|:---|:------|:----------| |contentsVisible|Boolean|n/a|This boolean returns true when the screen position is within the offset range of this component

lazyBackgroundMixin

Add the mixin to your component by doing the following:

import { lazyBackgroundMixin } from 'bf-components'

export default {
    name: 'MyComponent'
    mixins: [lazyBackgroundMixin]
}

This adds the following functionality to your component: You do not need to put this code anywhere its for reference only

const getScrollPosition = require('../utils/get-scroll-position.js')
const handleError = require('../utils/error-handling.js')

module.exports = {
  props: {
    backgroundImage: String,
    lazyLoadWithScrollPosition: Number,
    lazyLoadOffset: {
      type: Number,
      default: 250
    }
  },
  data: function () {
    return {
      // If lazyLoadWithScrollPosition is defined then contents should be invisible on load
      contentsVisible: typeof this.lazyLoadWithScrollPosition === 'undefined'
    }
  },
  watch: {
    lazyLoadWithScrollPosition: function () {
      // if scroll position is passed down and backgroundImage is defined and the images aren't visible yet.
      if (typeof this.backgroundImage !== 'undefined' && typeof this.lazyLoadWithScrollPosition !== 'undefined' && !this.contentsVisible) {
        const scrollPos = getScrollPosition(this.$el)
        const winHeight = window.innerHeight

        const lazyLoadPosition = scrollPos - winHeight
        if (lazyLoadPosition < this.lazyLoadOffset) {
          this.contentsVisible = true
        }
      }
    }
  },
  computed: {
    lazyBackground: function () {
      if (typeof this.lazyLoadWithScrollPosition !== 'undefined') {
        return {
          backgroundImage: this.contentsVisible && this.backgroundImage ? 'url(' + this.backgroundImage + ')' : 'none',
          opacity: this.contentsVisible ? 1 : 0,
          transition: 'all 1s ease-in'
        }
      } else if (this.backgroundImage) {
        return {
          backgroundImage: 'url(' + this.backgroundImage + ')'
        }
      } else {
        return
      }
    }
  },
  mounted: function () {
    if (this.lazyLoadOffset !== 250) {
      handleError(this.lazyLoadWithScrollPosition, 'lazyLoadOffset requires lazyLoadWithScrollPosition to be defined. Element: ' + this.$el.className)
    }
  }
}

This mixin adds the following props to your component |Props|Type|Default|Description| |--------|:---|:------|:----------| |lazyLoadWithScrollPosition|Number|n/a|If the current window scroll position is passed in, then it enables lazy load on all the icon images. |lazyLoadOffset|Number|250|Determines the scroll offset position for when images get loaded. This mixin adds the following computed to your component |Data|Type|Default|Description| |--------|:---|:------|:----------| |lazyBackground|String|'none'|Triggers the background image when the screen position is within the offset range of this component

Component Functionality Mixins

modalMixin

Add the mixin to your component by doing the following:

import { modalMixin } from 'bf-components'

export default {
    name: 'MyComponent'
    mixins: [mdoalMixin]
}

This adds the following functionality to your component: You do not need to put this code anywhere its for reference only

module.exports = {
  props: {
    isModalEnabled: {
      type: Boolean,
      default: false
    }
  },
  data: function () {
    return {
      isModalActive: false,
      isModalTriggerHover: false,
      modalClassName: ''
    }
  },
  methods: {
    toggleModalActiveFn: function () {
      if (this.isModalEnabled) {
        var modalStatus = !this.isModalActive
        this.modalClassName = (modalStatus) ? 'modal-trigger-active' : ''
        this.isModalActive = modalStatus
      }
    },
    toggleModalHoverFn: function () {
      if (this.isModalEnabled && !this.isModalActive) {
        this.isModalTriggerHover = !this.isModalTriggerHover
        this.modalClassName = (this.isModalTriggerHover) ? 'modal-trigger-hover' : ''
      }
    }
  }
}

Utility Mixins

contentTypeMixin

Determines the content type of of a link

Add the mixin to your component by doing the following:

import { contentTypeMixin } from 'bf-components'

export default {
    name: 'MyComponent'
    mixins: [contentTypeMixin]
}

This adds the following functionality to your component: You do not need to put this code anywhere its for reference only

module.exports = {
  props: {
    contentLink: String
  },
  methods: {
    isImage: function (url) {
      return (url.match(/\.(jpeg|jpg|gif|png)$/) != null)
    }
  },
  computed: {
    contentType: function () {
      if (typeof this.contentLink !== 'undefined') {
        if (this.isImage(this.contentLink)) {
          return 'image'
        } else return 'video'
      }
    }
  }
}

This mixin adds the following props to your component |Props|Type|Default|Description| |--------|:---|:------|:----------| |contentLink|String|n/a|The link to the content you need type determined on

This mixin adds the following computed to your component |Data|Type|Default|Description| |--------|:---|:------|:----------| |contentType|String|n/a|Returns the content type of the contentLink