Permalink
Browse files

Basic demos with sample code

1. Resizable grid using 1x1 tiles
2. Variable sized tiles using fixed templates
  • Loading branch information...
1 parent 3cf5e3f commit 5c449e42f8cbbe1d73cc12128cb5924295ce4aaa @joelfillmore joelfillmore committed Aug 21, 2012
Showing with 305 additions and 1 deletion.
  1. +1 −1 README.md
  2. +82 −0 demos/demo.css
  3. +133 −0 demos/demo.js
  4. BIN demos/dev-tiles-sprite.png
  5. +89 −0 demos/index.html
View
@@ -18,7 +18,7 @@ Once you sign-in to Pulse, check out the [Behind the Scenes](http://www.pulse.me
Compiled size: 6 KB (just over 2 KB gzipped).
###Sample Code###
-Coming Soon...
+There are 2 samples in the demos directory. A proper site with documentation and additional samples is coming soon...
###Tile###
A tile is a rectangular element that covers one or more cells in a grid. Each tile has a unique identifier and maintains its current position in the grid (top, left, width, height).
View
@@ -0,0 +1,82 @@
+body {
+ padding: 20px;
+ font-family: Arial;
+}
+
+.grid {
+ width: 95%;
+ height: 600px;
+ position: relative;
+ overflow-x: hidden;
+ overflow-y: scroll;
+ background-color: #ddd;
+ margin: 10px 0px;
+ border: 10px solid #ddd;
+ clear: both;
+}
+
+.grid > div {
+ background-color: #fff;
+ position: absolute;
+}
+
+/* slider for sample 1 */
+
+.slider {
+ width: 200px;
+ display: inline-block;
+ margin: 0px 10px;
+}
+
+.sliderLabel {
+ font-size: 18px;
+ font-weight: bold;
+}
+
+/* template selections for sample #2 */
+
+.dev-tile-number {
+ font-size: 36px;
+ padding: 10px;
+}
+
+#dev-tiles-templates ul {
+ margin-bottom: 10px;
+}
+
+#dev-tiles-templates li {
+ margin-right: 20px;
+ height: 35px;
+ display: inline-block;
+ background: url(dev-tiles-sprite.png) no-repeat;
+ cursor: pointer;
+}
+
+#dev-tiles-templates li.selected {
+ background-position-y: -200px;
+}
+
+#dev-tiles-templates #dev-l1 {
+ width: 47px;
+}
+
+#dev-tiles-templates #dev-l2 {
+ width: 47px;
+ background-position-x: -68px;
+}
+
+#dev-tiles-templates #dev-l3 {
+ width: 39px;
+ background-position-x: -135px;
+}
+
+#dev-tiles-templates #dev-l4 {
+ width: 39px;
+ background-position-x: -194px;
+}
+
+#dev-tiles-templates #dev-l5 {
+ width: 47px;
+ background-position-x: -245px;
+ margin-right: 0px;
+}
View
@@ -0,0 +1,133 @@
+// The grid manages tiles using ids, which you can define. For our
+// examples we'll just use the tile number as the unique id.
+var TILE_IDS = [
+ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14,
+ 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25
+];
+
+// SAMPLE #1
+$(function() {
+
+ // create the grid and an event which will update the grid
+ // when either tile count or window size changes
+ var el = document.getElementById('sample1-grid'),
+ grid = new Tiles.Grid(el),
+ updateGrid = function(event, ui) {
+
+ // update the set of tiles and redraw the grid
+ grid.updateTiles(TILE_IDS.slice(0, ui.value));
+ grid.redraw(true /* animate tile movements */);
+
+ // update the tile count label
+ $('#tileCount').text('(' + ui.value + ')');
+ };
+
+ // use a jQuery slider to update the number of tiles
+ $('#sample1-tiles')
+ .slider({
+ min: 1,
+ max: 25,
+ step: 1,
+ create: updateGrid,
+ slide: updateGrid,
+ change: updateGrid
+ })
+ .slider('value', 8);
+
+ // wait until user finishes resizing the browser
+ var debouncedResize = debounce(function() {
+ grid.resize();
+ grid.redraw(true);
+ }, 200);
+
+ // when the window resizes, redraw the grid
+ $(window).resize(debouncedResize);
+});
+
+// SAMPLE #2
+$(function() {
+
+ // templates in JSON matching the predefined selections you can
+ // choose on the demo page
+ var DemoTemplateRows = [
+ [
+ " A A B B C C ",
+ " A A B B C C ",
+ " . . . . . . ",
+ " D D E E F F "
+ ], [
+ " A A A A A A ",
+ " B B C C D D ",
+ " B B C C D D ",
+ " B B C C D D "
+ ], [
+ " A A B B . ",
+ " A A B B . ",
+ " A A C C . ",
+ " . . . . ."
+ ], [
+ " A A . . ",
+ " A A . . ",
+ " B B . . ",
+ " C C . ."
+ ], [
+ " A A A B B B ",
+ " A A A B B B ",
+ " A A A C C . ",
+ " . . . . . ."
+ ]
+ ];
+
+ var el = document.getElementById('sample2-grid')
+ grid = new Tiles.Grid(el);
+
+ // template is selected by user, not generated so just
+ // return the number of columns in the current template
+ grid.resizeColumns = function() {
+ return this.template.numCols;
+ };
+
+ // by default, each tile is an empty div, we'll override creation
+ // to add a tile number to each div
+ grid.createTile = function(tileId) {
+ var tile = new Tiles.Tile(tileId);
+ tile.$el.append('<div class="dev-tile-number">' + tileId + '</div>');
+ return tile;
+ };
+
+ // update the template selection
+ var $templateButtons = $('.dev-template').on('click', function(e) {
+
+ // unselect all templates
+ $templateButtons.removeClass("selected");
+
+ // select the template we clicked on
+ $(e.target).addClass("selected");
+
+ // get the JSON rows for the selection
+ var index = $(e.target).index(),
+ rows = DemoTemplateRows[index];
+
+ // set the new template and resize the grid
+ grid.template = Tiles.Template.fromJSON(rows);
+ grid.isDirty = true;
+ grid.resize();
+
+ // adjust number of tiles to match selected template
+ var ids = TILE_IDS.slice(0, grid.template.rects.length)
+ grid.updateTiles(ids);
+ grid.redraw(true);
+ });
+
+ // make the initial selection
+ $('#dev-l1').trigger('click');
+
+ // wait until users finishes resizing the browser
+ var debouncedResize = debounce(function() {
+ grid.resize();
+ grid.redraw(true);
+ }, 200);
+
+ // when the window resizes, redraw the grid
+ $(window).resize(debouncedResize);
+});
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>Tiles.js Basic Demos</title>
+
+
+ <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
+ <link rel="stylesheet" href="demo.css" />
+
+ <script type="text/javascript">
+ // debounce utility from underscorejs.org
+ var debounce = function(func, wait, immediate) {
+ var timeout;
+ return function() {
+ var context = this, args = arguments;
+ var later = function() {
+ timeout = null;
+ if (!immediate) func.apply(context, args);
+ };
+ if (immediate && !timeout) func.apply(context, args);
+ clearTimeout(timeout);
+ timeout = setTimeout(later, wait);
+ };
+ };
+ </script>
+ <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
+ <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
+ <script src="http://cloud.github.com/downloads/thinkpixellab/tilesjs/tiles.js"></script>
+ <script src="demo.js"></script>
+</head>
+<body>
+
+ <h2>Sample 1: Resizable grid using 1x1 tiles</h2>
+ <p>
+ Let's start with a a simple resizable grid of 1x1 tiles. We'll create a Tiles.js grid and
+ provide a parent div which will hold our tiles. The parent div should use relative positioning
+ and tile divs should be absolutely positioned.
+
+ When the grid is drawn, the
+ library looks at the width of the element and determines the number of cell columns
+ that will fit given a minimum cell width. Once we have a grid of cells, the next
+ step is to determine how to lay out the tiles on the grid.
+ </p>
+ <p>
+ The simple, default template factory is named UniformTemplates. All of the tiles in the templates
+ produced by this factory are the same size: 1x1s which each cover a single cell in the grid.
+ </p>
+ <p>
+ Adjust the slider below to change the number of tiles displayed by the grid. Try resizing the
+ browser window and watch the grid adjust the size and layout of the tiles. View the page source
+ to see the code.
+ </p>
+
+ <span class="sliderLabel">Number of Tiles</span>
+ <div id="sample1-tiles" class="slider"></div>
+ <span id="tileCount" class="sliderLabel"></span>
+ <div id="sample1-grid" class="grid"></div>
+
+ <h2>Sample 2: Variable sized tiles using fixed templates</h2>
+ <p>
+ The grid uses a pluggable template factory, which makes it possible to generate
+ templates at run time. The grid will provide the factory with the number of columns
+ and the target number of tiles. The template factory is expected to return a rectangular
+ template defined by the number of columns, rows, and the set of rectangles specifying
+ where each tile goes.
+ </p>
+ <p>
+ The tile count is only a target because it may not be possible for
+ some template factories to create a rectangular layout for a particular column + tile combination.
+ If that happens, the factory should add extra tiles so that the template remains rectangular.
+ </p>
+ <p>
+ For this example, we'll bypass the factory by setting the template directly. We've predefined 5 templates using JSON. Select any of the templates below to update the layout of the grid.
+ </p>
+
+ <div id="dev-tiles-templates">
+ <ul>
+ <li id="dev-l1" class="selected dev-template"></li>
+ <li id="dev-l2" class="dev-template"></li>
+ <li id="dev-l3" class="dev-template"></li>
+ <li id="dev-l4" class="dev-template"></li>
+ <li id="dev-l5" class="dev-template"></li>
+ </ul>
+ </div>
+ <div id="sample2-grid" class="grid"></div>
+
+</body>
+</html>

0 comments on commit 5c449e4

Please sign in to comment.