Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    brickworkerpublic

    Brickworker

    Lays the bricks that are DOM elements in neat arrangements.

    About

    Brickworker will help you arrange DOM elements on a page by placing them in columns. The layout is done using absolute positioning to get the best performance out of the browsers.

    Elements can be arranged in a given number of columns. From Infinity to 1.

    The Delegate

    Part of the reason I wanted to reinvent this particular wheel was that I found the "data layer" handling of the other modules to be — not bad — but not to my liking.

    Hence this module will use the delegate pattern, often found in iOS development, to drive the datalayer (and to some extend the presentation layer).

    API

    To use Brickworker you will have to create yourself a delegate. A delegate is an object that implements a special set of functions. These functions will be called by Brickworker to generate the layout.

    There are a bunch of functions that the delegate can implement, and a few that it has to implement.

    • .data(fn) required

      Brickworker will call the data function when it needs more data to display. For example when the user has scrolled to the bottom of the page. The function will recieve a callback. You need to call that callback and give it an array of "items" that you want to display in the layout. These "items" are not DOM elements, but the pure "JSON object" that represents one item in the layout.

      If an error happens during the loading of more content it's up to you to give Brickworker an empty array and handle the error.

    • .cellForData(data, element) required

      When Brickworker needs to render an element in the viewport it will ask you to give it a DOM element for that item. cellForData will be passed the item's data and maybe an existing DOM element. It's up to you to reset this element, or create it, and fill it in with the stuff you want in it. Like images and text.

    • .didLoadImagesForCell(element)

      Brickworker will currently wait for all images in an element before appending it to the layout. When all images for a cell has loaded you're given the oppurtunity to do something with the element before it's appended.

    • .didStartScroll() and .didEndScroll()

      Called on the delegate when scrolling started or ended.

    • .didResize()

      Called if the number of columns changes.

    • .didStartLoadingData()

      Called when loading of data starts, your opportunity to show a spinner etc.

    • .didFinishLoadingData()

      Called when data was loaded. Now hide the spinner!

    • .didInsertItems(items)

      Called when new items was inserted (if you want to animate etc).

    Setting up the Brickworker

    var delegate = // create your delegate 
    var options = {
      container: document.getElemenentById('myContainer'),
      gutter: 20, // distance between objects 
      wait: 10000, // max time to wait for images to load 
      maxColumns: Infinity, // maximum number of columns to show 
      preloadImages: true, // preload images before inserting into container 
      waitForAll: true // wait for all images in a batch to load before inserting 
    }
    var brick = new Brickworker(delegate, options);

    See examples for more information until I've fixed this.

    No Dependencies

    Brickworker does not depend on jQuery or any other lib.

    Alpha Software

    Yeah, early dev. Be careful. Contributions welcome!

    License

    MIT

    install

    npm i brickworker

    Downloadslast 7 days

    2

    version

    0.0.0

    license

    MIT

    repository

    github.com

    last publish

    collaborators

    • avatar