Skip to content

Configuration

Jump to bottom
riccomediamonks edited this page Jan 15, 2018 · 6 revisions

The plugin allows for some extra configuration.

{
  enablePageTransitionOut: true,
  blockConfig: {
    maxFindParentPageCount: 50,
  },
  buttonConfig: {
    scrollToNextBlockDuration: 1000,
    scrollToNextBlockOffset: 0,
    maxFindParentBlockCount: 50,
  },
  api: {
    initCall: '/api/page/{page}',
    pageCall: '/api/page/init',
    stripLeadingSlash: false,
    axiosInstance: null,
    layoutCache: true,
  },
  debugLabelStyling: {
    font: '10px/1 sans-serif',
    backgroundColor: 'red',
    color: 'white',
    padding: '5px',
    position: 'absolute',
    top: '0px',
    left: '0px',
    },  
  },
}

enablePageTransitionOut

  • description: When this flag is disabled the transition of all the blocks will not be triggered and the route change start.
  • type: boolean
  • default: true

blockConfig

On block level you can change the following options

  • maxFindParentPageCount
    • description: This is the amount of levels the block will look for a page, you will most likely not change this.
    • type: number
    • default: 50

buttonConfig

On button level you can change the following options

  • scrollToNextBlockDuration
    • description: This is the duration of the next block scroll animation in milliseconds.
    • type: number
    • default: 1000
  • scrollToNextBlockOffset
    • description: This is the offset the scrollToNextBlock will apply (for example when you have a fixed header on top of your site).
    • type: number
    • default: 0
  • maxFindParentBlockCount
    • description: This is the max amount of levels a button will look up to look for a block. If it exceeds this limit it wil stop and not find the next block.
    • type: number
    • default: 50

api

On api level you can change the following options

  • initCall
    • description: This is the path to the init file.
    • type: string
    • default: /api/init
  • pageCall
    • description: This is the path to the page, the {page} part will be replaced with the requested route.
    • type: string
    • default: /api/page/{page}
  • stripLeadingSlash
    • description: With this flag enabled the block system will always strip out the leading slash from page requests.
    • type: boolean
    • default: false
  • axiosInstance
    • description: If you want to you can provide your own custom axios instance to the block system. If it's not provided it will use a new instance.
    • type: Object
    • default: null
  • layoutCache
    • description: If you disable this flag the pages will not be cached in memory and every time the users navigates to the same page it will request it from the pageCall location.
    • type: boolean
    • default: true

debugLabelStyling

  • description: All block can contain a debug label which makes it easier to identify which block is which. Here you can overwrite the default styling of the label. It will use Tweenlite to set the properties so you can use anything that TweenLite allows for.
  • type: Object
  • default: { font: '10px/1 sans-serif', backgroundColor: 'red', color: 'white', padding: '5px', position: 'absolute', top: '0px', left: '0px', }
Clone this wiki locally