Gridstack on Meteor #77
Description
Hi @troolee,
Thx for this library! Totally awesome.
I just worked out how to use gridstack on Meteor. I have implemented persistent edits, which stores the grid tile properties in a Mongo collection. I have to say, it's pretty cool!
Below is the code I've used.
Add existing smart package from atmospherejs.com (https://atmospherejs.com/tarzak/gridstackjs) -- I'm trying to find out if the author will publish their package code onto GitHub.
meteor create myApp
cd myApp
meteor add tarzak:gridstackjs
HTML:
<!-- myApp.html -->
<body>
{{> gridstack}}
</body>
<template name="gridstack">
<div class="grid-stack"></div>
</template>Shared client/server JavaScript to create a Mongo collection
// myApp.js
GridTiles = new Mongo.Collection("gridTiles");
/* GridTiles.insert({
_id: "abcd", // mongoId
x: 0,
y: 1,
width: 2,
height: 2
}); */Client JavaScript
// client/myGridstack.js
Template.gridstack.rendered = function () {
var gridstackOptions = {};
Tracker.autorun(function () {
var gridTiles = GridTiles.find().fetch();
var grid = $('.grid-stack').gridstack(gridstackOptions).data('gridstack');
grid.remove_all();
_.each(gridTiles, function (tile) {
var widgetElement = $('<div><div class="grid-stack-item-content" /><div/>')
if(widgetElement) {
grid.add_widget(widgetElement, tile.x, tile.y, tile.width, tile.height);
widgetElement.attr('data-custom-id', tile._id);
}
});
}); // End autorun
// Define onchange to update Mongo collection
$('.grid-stack').on('change', function (event, items) {
_.each(items, function (item) {
var attributes = item.el.data();
GridTiles.update({_id:attributes.customId},
{x:attributes.gsX,y:attributes.gsY,height:attributes.gsHeight, width:attributes.gsWidth});
});
});
}; That's it! =-)
New tiles can be added on the fly (i.e., reactively) just by inserting into the Mongo collection. When you move or resize the tiles, the new locations are saved. The "bindings" are already hooked up because of the Tracker.autorun() function.
The Meteor community is building procedures for libraries like Gridstack.js to have "official" integrations with Meteor (i.e., sponsored by the official maintainers). If you're open to this, I can try to help with the set-up as well as add documentation.