npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ampersand-grid-view

v0.9.0

Published

A collection backed grid view.

Downloads

3

Readme

ampersand-grid-view

A collection backed grid view.

This is not quite a 1.0 release, but it's pretty close. It works for the simple cases.

What it does

The grid view takes a container and an ampersand-collection and renders it into a grid with a set number of columns. Items will be rendered into the currently shortest column. Hence this module can be used to create a Pinterest-like grid of items.

Usage

var AmpGridView = require('ampersand-grid-view');
var data = new AmpersandCollection(); // Create a collection containing your models

var MyView = require('./my-model-view');

var gridView = new AmpGridView({
  view: MyView,
  collection: data,
  el: document.querySelector('.some-container'),
  columnCount: 3,
  gutter: 10,
  viewOptions: {
    // additional properties passed to new views.
  }
});

This will create a grid of three columns with 10px spacing between each view. Each model in the collection data will be represented by the view MyView.

If more models are added to the collection they will automatically render into the view.

Async Views

Views can be asynchronous, meaning, you can tell the grid that you do not want to be inserted right after rendering. But rather at some point later. You do this by adding a property async to your view and set it to true. Then have the view emit a ready event when it is ready to be drawn into the grid.

This is useful when you are rendering images of unknown sizes for example. Since the grid has to know the height of the view being rendered it can't just insert it into the grid and have the image load later, this will cause overlapping.

module.exports = AmpersandView.extend({
  async: true,
  done: false,
  template: function () {
    return someTemplateThatHasAnImage;
  },

  render: function initPostView() {
    this.renderWithTemplate(this);
    var self = this;
    // Star loading image
    var image = new Image();
    image.src = this.model.image;

    // Upon success set our imageUrl property to the URL and have
    // bindings update the src attribute.
    // Then set `async` to false to prevent consecutive renders if the grid
    // reflows for example
    image.onload = function imageLoaded() {
      self.imageUrl = image.src;
      self.trigger('ready');
      self.async = false;
    };
    image.onerror = function imageError() {
      // You could remove the image here and render the view anyway. Or replace
      // it with some standard image.
      self.trigger('ready');
      self.async = false;
    };
  },
});

Note that currently there is not way to ensure ordering of views in async mode unless you keep track outside of the grid view yourself. This will be fixed in the future though.

Responsive Web Design

If you need to change the number of colums based on the window size for example you can do this by hooking up an event listener on the resize event of the window object. Then set the property columnCount on the grid view and call the reflow() method.

The grid view won't handle anything like this automatically.

A view will always be the container's width divided by column count. So you can adjust the views widths by setting the width of the container yourself and adjusting the gutter property.

Endless Scrolling

If you want endless scrolling you can just listen to the scroll event yourself and then when the user reaches the bottom you load more models and add them to the collection. They will automatically render in the grid.

You could use my toBottom module for this.

Different Views

If you have different kinds of models in you collection and need to render different kinds of views you can set the view option to an object where the keys match model.type || model.getType() and the value is a matching view constructor.

Performance Concernts

All the views will be absolutely positioned within it's container. This is to make the layout job for the browser easier. DOM operations are also somewhat grouped together to decrease the repaints etc necessary.

License

MIT