An infinite scrolling plugin, that tackles grid layout of the items being scrolled, and can adapt as the list of items it is scrolling changes.

https://adammcfadden.github.io/budgie/

Install currently out of date. Will publish new npm package upon request.

npm install @helios-interactive/budgie --save

Note:

Budgie element refers to the whole element, with all items contained inside of it.

Budgie item refers to a single items within the Budgie Element

Currently including the script file is the only way to use budgie.

Budgie will be available in the global namespace once it has been included with the script tag

<script src="node_modules/@helios-interactive/budgie/dist/budgie.min.js" type="text/javascript"></script>

To create a Budgie element, you will need a list of items that you want to make up the tiles within the Budgie element. You will also need to have an empty div on your page that will contain the Budgie element. You can also supply additional optional configuration as an options object

<script>
    new Budgie(items, '.element', options)
</script>

Budgie accepts three types of content as Budgie items.

• Elements
  • Any HTMLElement can be passed as an item to budgie.
• Images - as a source string
  • The following extensions wil be created as images: ['jpg', 'gif', 'png', 'bmp', 'jpeg']
• Videos - as a source string
  • The following extensions wil be created as videos: ['mp4','ogg', 'webm']

You can send the whole list as one of these types, or mix and match them as desired.

Budgie intentionally does very little with styling so that the user can have full control of that aspect. All styles applied by budgie are applied as classes, so issues with specificty should be rare.

All Budgie items will have the class of budgie-item. You can use this to select the items and apply a class, or add your styling to that class.

The Budgie element will have a class of budgie-container

Yep. Each Budgie will generate a code to keep it uniquely identified. This is stored on the Budgie object as budgieId

If you have multiple budgie elements, then you can use the budgieId to select the one you want. Budgie items will have the class budgie-item-<budgieId>. The Budgie element will have the class budgie-container-<budgieId>

Configuration options are passed on initialization as an options object.

• IE11
• Edge11
• Chrome 49
• Opera 42
• Safari 9.2
• Firefox 50
• Sorry, no Netscape Navigator or Lynx support :/

For more support add:

• classList pollyfill
• Flexbox pollyfill
• forEach pollyfill

MIT License

Copyright (c) [2017] [Adam McFadden]

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.