Click to change color scheme

Notes on codes, projects and everything

Generating grids in javascript

Recently I find some of my pet projects share a common pattern, they all are based on some kind of grids. So I find myself writing similar piece of code over and over again. While re-inventing wheels is quite fun, especially when you learn new way of getting things done with every iteration, it is actually quite tedious after a while.

So after spending some time to properly plan for the grid-generation, I rewrote the grid generation, hopefully for the last time. I didn’t check whether there’s existing implementation out there though.

Not sure where I read it from, the proper way to work on the element is through event handler. Therefore I made the plugin event based-driven. Also I thought might as well made hooks for both before and after for the events (for most of them).

So long story short, before including the grid-maker script into the project, the pre-requisites are jQuery and Underscore.js (these two are probably my go-to libraries). Then initialize the grid by calling .grid().

$('#element').grid()

By default a responsive (buzzword alert) grid with 10 rows and 10 columns is generated. As the plugin is very much event-baseddriven, so it is possible to subscribe the events. To be precise, the before and/or after the events are fired.

For example, in order to bind a handler after the block is initialized

$('#element').grid()
             .trigger('board:block:init:pre', // or 'board:init:post'
                      function(_event, context, options) {
                          var block = this
                      })

So in this case context is the element that calls .grid(), and options is the list of options for the grid.

Getting a specific block, or a list of blocks can be done by supplying coordinates to board:block:get and board:block:list events respectively. Also a callback is needed so that the result can be set as the context of the callback. For example, getting a block by supplying a set of coordinates can be done as follows,

var x = 0, y = 0,
    callback = function() { var found_block = this }

$('#element`).grid()
             .trigger('board:block:get', [x, y, callback])

and

var list = [[0, 0], [0, 1]],
    callback = function() { var found_blocks = this }

$('#element`).grid()
             .trigger('board:block:get', [x, y, callback])

The first draft of the code is already uploaded to github for forking. I have not decide which license to use, but possibly a BSD/MIT license, or simply WTFPL. Also the detailed documentation is to be updated there instead of another announcement for endless minor changes here.

Instead of using flexbox, the script generates the grid with css float property, which should somehow provide good backward compatibility. However, I do not run extensive testing on the code, and don’t intend to.

leave your comment

name is required

email is required

have a blog?

This blog uses scripts to assist and automate comment moderation, and the author of this blog post does not hold responsibility in the content of posted comments. Please note that activities such as flaming, ungrounded accusations as well as spamming will not be entertained.