bf-components

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

Usage no npm install needed!

<script type="module">
  import bfComponents from 'https://cdn.skypack.dev/bf-components';
</script>

README

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>
Props Type Default Description
className String n/a Allows user to add a custom class name to the root of the component
idName String n/a Allows user to add a custom id name to the root of the component
injectStyle Object n/a Allows user to add or override default inline styles on the root of the component
innerDivStyle Object n/a Allows user to add or override default inline styles to the inner div of the component

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>
Props Type Default Description
className String n/a Allows user to add a custom class name to the root of the component
idName String n/a Allows user to add a custom id name to the root of the component
injectStyle Object n/a Allows user to add or override default inline styles on the root of the component
wrap String 'default' Accepts default or reverse. Dictates the wrap order behavior of the section
isDefaultStylesEnabled Boolean true Enables or disables the default styling inlined on the component
backgroundImage String n/a Optional image path to background image for the section
lazyLoadWithScrollPosition Number n/a If the current window scroll position is passed in, then it enables lazy load on the background image for this section.
lazyLoadOffset Number 250 Determines the scroll offset position for when images get loaded.

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>
Props Type Default Description
className String n/a Allows user to add a custom class name to the root of the component
idName String n/a Allows user to add a custom id name to the root of the component
injectStyle Object n/a Allows user to add or override default inline styles on the root of the component
isDefaultStylesEnabled Boolean true Enables or disables the default styling inlined on the component
backgroundImage String n/a Optional image path to background image for the section
lazyLoadWithScrollPosition Number n/a If the current window scroll position is passed in, then it enables lazy load on the background image for this section.
lazyLoadOffset Number 250 Determines the scroll offset position for when images get loaded.

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>
Props Type Default Description
device String 'desktop' The detected device of the current user. Usually stored in state.
appName String 'This Game' The name of the app
companyName String 'Big Fish Games' The name of the company that made the app
androidRating Number 5 The star rating of the app in the Google Play Store (out of 5)
iosRating Number 5 The star rating of the app in the iOS App Store (out of 5)
mobileOnly Boolean true Dictates whether or not the smart app banner displays on mobile only
googleStoreLink String 'www.google.com' The download link for the app in the Google Play Store
appStoreLink String 'www.apple.com' The download link for the app in the Apple App Store
androidAppIcon String n/a The image link for the Android App Icon
iosAppIcon String n/a The image link for the iOS App Icon
triggerResize Function n/a Fires when the modal closes so the page can reload with new dimensions

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>
Props Type Default Description
className String n/a Allows user to add a custom class name to the root of the component
idName String n/a Allows user to add a custom id name to the root of the component
injectStyle Object n/a Allows user to add or override default inline styles on the root of the component
onClick Function n/a Allows user to add a custom onClick handler to the button
hyperlink String n/a Sets the hyperlink for the button
text String n/a Sets the text that appears on a non-image button
buttonColor String n/a Sets the background color of a non-image button
buttonHoverColor String n/a Sets the hover color of a non-image button
animation String n/a Accepts bounce. Determines the css hover animation of the button
imageLink String n/a Accepts an image filepath and turns the button into an image button
isDefaultStylesEnabled Boolean true Enables or disables the default styling inlined on the component
lazyLoadWithScrollPosition Number n/a If the current window scroll position is passed in, then it enables lazy load on the button Image.
lazyLoadOffset Number 250 Determines the scroll offset position for when images get loaded.

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>
Props Type Default Description
className String n/a Allows user to add a custom class name to the root of the component
idName String n/a Allows user to add a custom id name to the root of the component
injectStyle Object n/a Allows user to add or override default inline styles on the root of the component
imageLink String n/a Accepts an image filepath for the icon
hyperlink String n/a Sets the hyperlink for the icon
imageAlt String n/a Sets the alt-text for the icon image
text String n/a Text that appears next to the icon
display String 'inline' Accepts block or inline. Determines how the icon and text are displayed.
animation String n/a Accepts bounce. Determines the css hover animation of the icon.
iconSize String 'medium' Accepts small, medium, large, or xlarge. Determines icon size.
iconPosition String 'before' Accepts before or after. Determines icon position relative to text.
iconHeader String n/a Adds text to the heading of the icon.
responsive Boolean true Dictates whether or not icon behaves responsively when display is inline.
isDefaultStylesEnabled Boolean true Enables or disables the default styling inlined on the component.
lazyLoadWithScrollPosition Number n/a If the current window scroll position is passed in, then it enables lazy load on the icon Image.
lazyLoadOffset Number 250 Determines the scroll offset position for when images get loaded.

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>
Props Type Default Description
className String n/a Allows user to add a custom class name to the root of the component
idName String n/a Allows user to add a custom id name to the root of the component
injectStyle Object n/a Allows user to add or override default inline styles on the root of the component
assetRoot String n/a Path to the dist assets folder
contentLink String n/a File path to the image or video to be rendered in the frame
frame String 'iphone-white' Accepts iphone-white, iphone-black, ipad, or galaxy-black. Determines frame image.
isDefaultStylesEnabled Boolean true Enables or disables the default styling inlined on the component
lazyLoadWithScrollPosition Number n/a If the current window scroll position is passed in, then it enables lazy load on the frame.
lazyLoadOffset Number 250 Determines the scroll offset position for when images get loaded.
isModalEnabled Boolean false Controls whether a modal will display when the frame is clicked with a lightbox of the contents.

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>
Props Type Default Description
className String n/a Allows user to add a custom class name to the root of the component
idName String n/a Allows user to add a custom id name to the root of the component
injectStyle Object n/a Allows user to add or override default inline styles on content of the component
bgColor String "white" Determines the background color of the modal
borderColor String "#00487c" Determines the top border color for the modal
isModalActive Boolean false Triggers the modal's visiblity when true. See the modalMixin
toggleModalActiveFn Function n/a Function that handles modal visiblity. See the modalMixin
isDefaultStylesEnabled Boolean true Enables or disables the default styling inlined on the component.

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

Props Type Default Description
slides Array n/a An Array of slide objects
customProps Object n/a Overrides the default slider props. See below:

Slider Custom Props

Props Type Default Description
className String n/a Defines custome classname for slider
autoplay Boolean false Determines whether slider autoplays
centerMode Boolean false Centers the slides and displays preview of next and previous slides.
dots Boolean true Determines whether guide dots should display
draggable Boolean true Toggles draggability of the slider.
easing String 'linear' Determines easing animation of the slider
edgeFriction Integer 0.35 Adds friction to the edge of the slider
infinite Boolean true Determines whether the slider scrolls forever or not
initialSlide Integer 0 Determines default slide number to show on load
slidesToShow Integer 1 Determines number of slides to show at a time
slidesToScroll Integer 1 Determines number of slides to scroll at a time
speed Integer 500 Determines speed of slider scroll

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>
Props Type Default Description
className String n/a Allows user to add a custom class name to the root of the component
idName String n/a Allows user to add a custom id name to the root of the component
injectStyle Object n/a Allows user to add or override default inline styles on the root of the component
alignItems String 'center' Accepts start, end, center, stretch, and baseline. Dictates flex behavior.
flexDirection String 'row' Accepts row, row-reverse, column, and column-reverse. Dictates flex behavior.
justifyContent String 'center' Accepts start, end, center, space-around and space-between. Dictates flex behavior.
backgroundImage String n/a Optional image path to background image for the container
lazyLoadWithScrollPosition Number n/a If the current window scroll position is passed in, then it enables lazy load on the background image for this container.
lazyLoadOffset Number 250 Determines the scroll offset position for when images get loaded.
isDefaultStylesEnabled Boolean true Enables or disables the default styling inlined on the component

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>
Props Type Default Description
className String n/a Allows user to add a custom class name to the root of the component
idName String n/a Allows user to add a custom id name to the root of the component
injectStyle Object n/a Allows user to add or override default inline styles on the root of the component
backgroundImage String n/a Optional image path to background image for the container
isDefaultStylesEnabled Boolean true Enables or disables the default styling inlined on the component.
lazyLoadWithScrollPosition Number n/a If the current window scroll position is passed in, then it enables lazy load on the background image for this container.
lazyLoadOffset Number 250 Determines the scroll offset position for when images get loaded.

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>
Props Type Default Description
className String n/a Allows user to add a custom class name to the root of the component
idName String n/a Allows user to add a custom id name to the root of the component
injectStyle Object n/a Allows user to add or override default inline styles on the root of the component
assetRoot String n/a Path to the dist assets folder
animation String n/a Accepts bounce. Determines the css hover animation of the App Store badges.
display String 'inline' Accepts block or inline. Determines how the links are displayed.
isReleased Boolean true Toggle when game is released. Controls button clickability.
appStoreLink String n/a Path to iTunes App Store install link
googleStoreLink String n/a Path to Google Play Store install link
amazonStoreLink String n/a Path to Amazon Store install link
pcStoreLink String n/a Path to PC Store Link.
gameRoomLink String n/a Path to Gameroom Link.
isDefaultStylesEnabled Boolean true Enables or disables the default styling inlined on the component.
lazyLoadWithScrollPosition Number n/a If the current window scroll position is passed in, then it enables lazy load on all the button images.
lazyLoadOffset Number 250 Determines the scroll offset position for when images get loaded.
isModalEnabled Boolean false Controls whether a modal will display when the PC download is clicked with a modal of install information.

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>
Props Type Default Description
className String n/a Allows user to add a custom class name to the root of the component
idName String n/a Allows user to add a custom id name to the root of the component
injectStyle Object n/a Allows user to add or override default inline styles on the root of the component
assetRoot String n/a Path to the dist assets folder
iconSize String 'xsmall' Accepts small, medium, large, or xlarge. Determines icon size.
animation String n/a Accepts bounce. Determines the css hover animation of the icons.
facebookLink String n/a Path to Facebook page
instagramLink String n/a Path to Instagram page
linkedinLink String n/a Path to Linkedin page
pinterestLink String n/a Path to Pinterest page
twitterLink String n/a Path to Twitter page
youtubeLink String n/a Path to Youtube page
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.
isDefaultStylesEnabled Boolean true Enables or disables the default styling inlined on the component.

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>
Props Type Default Description
className String n/a Allows user to add a custom class name to the root of the component
idName String n/a Allows user to add a custom id name to the root of the component
assetRoot String n/a Path to the dist assets folder
injectStyle Object n/a Allows user to add or override default inline styles on the root of the component.
appStoreLink String n/a Link to the iOS store
googleStoreLink String n/a Link to the Google Play Store
amazonStoreLink String n/a Link to the Amazon Store
storedTracking Object n/a If the tracking object is passed in, then this is used to create a smartlink for the text-to-download functionality.
subPublisher String n/a The sub-publisher for the tracking link
subPlacement String n/a The sub-placement for the tracking link
gameTitle String "this game" Replaces 'this game' with the name of the App
gameId String n/a Required ttd id for the app. Usually game title with dashes. ex: cooking-craze
imageLink String 'assets/sms-badge.svg' Link to the button image that toggles the modal
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.
isModalEnabled Boolean false Controls whether a modal will display when the TTD button is clicked.

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>
Props Type Default Description
activeItem String 'games' Accepts games, genres, waystoplay, about, and blog. Determines which header is active.
assetRoot String n/a Path to the dist assets folder
FacebookLink String n/a Path to Facebook page
instagramLink String n/a Path to Instagram page
linkedinLink String n/a Path to Linkedin page
twitterLink String n/a Path to Twitter page
youtubeLink String n/a Path to Youtube page
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.

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

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