terribleplan/TileFlooring.js
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

update docs

Browse source
This commit is contained in:
Kegan Myers 2015-08-27 19:33:12 -05:00
parent 18d1a601d7
commit 48c7511452
4 changed files with 90 additions and 185 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
LICENSE.md
View file

@ -1,23 +0,0 @@
Copyright (c) 2015, terribleplan
All rights reserved.
Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice,
this list of conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above copyright
notice, this list of conditions and the following disclaimer in the
documentation and/or other materials provided with the distribution.
THIS SOFTWARE IS PROVIDED BY THE AUTHOR AND CONTRIBUTORS ``AS IS'' AND ANY
EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
DISCLAIMED. IN NO EVENT SHALL THE AUTHOR OR CONTRIBUTORS BE LIABLE FOR ANY
DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT
LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY
OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH
DAMAGE.

32
README.md
View file

@ -1,32 +0,0 @@
TileFlooring.js
===============
You want a masonry-style layout? You got it.
I got sick of isotope/masonry, so decided to write this. Right now it takes a very simple approach and is a little limited in what it can do.
This simply figures out how many columns to make, and then puts things into those columns.
Usage
=====
```javascript
var floor = new TileFloor(myDivElement, {
elementSelector: ".item",
columns: {
maxWidth: 200,
maxCount: 5
}
});
```
And now you have 5 columns that are each a maximum of 200px wide. If you only have 620px to work with, you get 4 columns, 600 gets 3, etc.
TileFlooring.js automatically responds to width changes through a combination of CSS, styles, and javascript, but only needs to run intensive javascript if the number of columns is changed, everything else is done by styles!
Limitations
===========
TileFlooring does not (and will not) work on browsers that do not have proper HTML5 support, sorry. Not worth the trouble or cruft.
TileFlooring.js is a young project and not all features are implemented yet. There are plans to add more options to the column layout, the ability to dynamically add elements without having to recreate the floor, the ability to actually destroy a floor, and more layout options.
Contributing
============
Just send a PR, as long as you're cool with publishing your code under the BSD license.

94
index.html
View file

@ -1,14 +1,100 @@
<html>
<head>
<title></title>
<title>TileFlooring.js</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdn.rawgit.com/terribleplan/TileFlooring.js/4fe5b698fd224257996d5ea3c7da003c6477373d/tile.min.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div class="container">
<h1>TileFlooring.js</h1>
<p>Tile flooring is a html layout engine that provides a masonry-like column packing feature.</p>
<p><a href="https://raw.githubusercontent.com/terribleplan/TileFlooring.js/master/tile.js">Get it!</a></p>
<p class="small">We don't have a CDN yet, so you'll have to host it yourself.</p>
<p><a href="https://cdn.rawgit.com/terribleplan/TileFlooring.js/4fe5b698fd224257996d5ea3c7da003c6477373d/tile.min.js">Get it!</a></p>
<p class="small">We don't have our own CDN but, you can get it from rawgit.</p>
<pre>https://cdn.rawgit.com/terribleplan/TileFlooring.js/4fe5b698fd224257996d5ea3c7da003c6477373d/tile.min.js</pre>
<div id="container row">
<div class="item col-xs-12">
<div class="panel panel-primary">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent cursus finibus lacus, vulputate imperdiet ex suscipit sit amet. Vestibulum varius placerat ultricies. Sed tellus lectus, mattis vel tempor ut, dictum eu ligula. Vivamus lacinia, arcu nec malesuada viverra, ex sapien aliquam enim, a tristique libero nunc sit amet justo. In sagittis, lectus et commodo viverra, elit odio interdum odio, nec tempor nibh erat eu sapien. Nullam et molestie tellus. Maecenas facilisis ac felis eget cursus. Proin finibus, nunc nec lacinia pharetra, tortor tortor semper mauris, sed posuere lacus nibh id ante. Donec fringilla dui ac fermentum dignissim. Nam eget nisi sem. Aenean sed tincidunt enim. Curabitur ornare diam vel dolor consectetur fermentum. Nam vitae lobortis mi. In hac habitasse platea dictumst. Etiam varius tellus orci, lobortis faucibus turpis elementum sed.</p>
</div>
</div>
</div>
<div class="item col-xs-12">
<div class="panel panel-success">
<div class="panel-body">
<p>Morbi blandit libero sit amet luctus lacinia. Integer nisl felis, malesuada dignissim scelerisque id, maximus sit amet sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed eu malesuada augue. Phasellus euismod viverra auctor. Suspendisse ac sem eget enim fermentum bibendum. Sed tincidunt lorem sed cursus laoreet. Nullam sapien nibh, pulvinar ut neque sed, pretium convallis dui.</p>
</div>
</div>
</div>
<div class="item col-xs-12">
<div class="panel panel-info">
<div class="panel-body">
<p>Vivamus eu ipsum sem. Fusce consectetur lorem sit amet lectus malesuada, non euismod quam imperdiet. Duis rhoncus felis quis lacus hendrerit, consectetur finibus velit commodo. Maecenas sem tellus, posuere vel magna sed, facilisis facilisis odio. Curabitur eleifend, velit egestas mattis dignissim, arcu ante gravida urna, a tristique ante orci vel augue. Donec venenatis sit amet enim at convallis. Proin in mollis odio. Mauris tempus, est in vestibulum dictum, erat dolor rhoncus felis, id lobortis erat eros tincidunt nisi. Nullam laoreet id dolor in pretium. Etiam ac dolor rhoncus, convallis libero at, vestibulum ex. Cras maximus ipsum arcu, vitae faucibus nisl sollicitudin in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam iaculis sem at erat rhoncus pellentesque at id lorem. Maecenas lobortis a metus vitae pretium. Morbi placerat mi ut vestibulum malesuada.</p>
</div>
</div>
</div>
<div class="item col-xs-12">
<div class="panel panel-warning">
<div class="panel-body">
<p>Aenean eleifend varius vehicula. Proin pellentesque ipsum massa, a tempus tellus aliquam imperdiet. Sed sodales dolor accumsan, blandit nisi sit amet, suscipit nibh. Fusce nec ullamcorper felis, aliquam blandit lectus. Suspendisse vulputate aliquet libero, varius fermentum ex pulvinar in. Aliquam erat volutpat. Ut luctus laoreet rutrum.</p>
</div>
</div>
</div>
<div class="item col-xs-12">
<div class="panel panel-danger">
<div class="panel-body">
<p>Donec commodo sagittis dolor sed finibus. Duis in lacinia nibh, vitae auctor tellus. Fusce nulla ex, tempor a metus quis, egestas molestie elit. Phasellus lorem lorem, rutrum ut pretium et, congue eu nulla. Vivamus tincidunt augue in turpis scelerisque, consectetur bibendum ante varius. Nunc aliquam vestibulum nisi et tristique. Vivamus sit amet molestie ipsum. Praesent eros mauris, lobortis suscipit mollis ut, porta id magna.</p>
</div>
</div>
</div>
<div class="item col-xs-12">
<div class="panel panel-primary">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent cursus finibus lacus, vulputate imperdiet ex suscipit sit amet. Vestibulum varius placerat ultricies. Sed tellus lectus, mattis vel tempor ut, dictum eu ligula. Vivamus lacinia, arcu nec malesuada viverra, ex sapien aliquam enim, a tristique libero nunc sit amet justo. In sagittis, lectus et commodo viverra, elit odio interdum odio, nec tempor nibh erat eu sapien. Nullam et molestie tellus. Maecenas facilisis ac felis eget cursus. Proin finibus, nunc nec lacinia pharetra, tortor tortor semper mauris, sed posuere lacus nibh id ante. Donec fringilla dui ac fermentum dignissim. Nam eget nisi sem. Aenean sed tincidunt enim. Curabitur ornare diam vel dolor consectetur fermentum. Nam vitae lobortis mi. In hac habitasse platea dictumst. Etiam varius tellus orci, lobortis faucibus turpis elementum sed.</p>
</div>
</div>
</div>
<div class="item col-xs-12">
<div class="panel panel-success">
<div class="panel-body">
<p>Morbi blandit libero sit amet luctus lacinia. Integer nisl felis, malesuada dignissim scelerisque id, maximus sit amet sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed eu malesuada augue. Phasellus euismod viverra auctor. Suspendisse ac sem eget enim fermentum bibendum. Sed tincidunt lorem sed cursus laoreet. Nullam sapien nibh, pulvinar ut neque sed, pretium convallis dui.</p>
</div>
</div>
</div>
<div class="item col-xs-12">
<div class="panel panel-info">
<div class="panel-body">
<p>Vivamus eu ipsum sem. Fusce consectetur lorem sit amet lectus malesuada, non euismod quam imperdiet. Duis rhoncus felis quis lacus hendrerit, consectetur finibus velit commodo. Maecenas sem tellus, posuere vel magna sed, facilisis facilisis odio. Curabitur eleifend, velit egestas mattis dignissim, arcu ante gravida urna, a tristique ante orci vel augue. Donec venenatis sit amet enim at convallis. Proin in mollis odio. Mauris tempus, est in vestibulum dictum, erat dolor rhoncus felis, id lobortis erat eros tincidunt nisi. Nullam laoreet id dolor in pretium. Etiam ac dolor rhoncus, convallis libero at, vestibulum ex. Cras maximus ipsum arcu, vitae faucibus nisl sollicitudin in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam iaculis sem at erat rhoncus pellentesque at id lorem. Maecenas lobortis a metus vitae pretium. Morbi placerat mi ut vestibulum malesuada.</p>
</div>
</div>
</div>
<div class="item col-xs-12">
<div class="panel panel-warning">
<div class="panel-body">
<p>Aenean eleifend varius vehicula. Proin pellentesque ipsum massa, a tempus tellus aliquam imperdiet. Sed sodales dolor accumsan, blandit nisi sit amet, suscipit nibh. Fusce nec ullamcorper felis, aliquam blandit lectus. Suspendisse vulputate aliquet libero, varius fermentum ex pulvinar in. Aliquam erat volutpat. Ut luctus laoreet rutrum.</p>
</div>
</div>
</div>
<div class="item col-xs-12">
<div class="panel panel-danger">
<div class="panel-body">
<p>Donec commodo sagittis dolor sed finibus. Duis in lacinia nibh, vitae auctor tellus. Fusce nulla ex, tempor a metus quis, egestas molestie elit. Phasellus lorem lorem, rutrum ut pretium et, congue eu nulla. Vivamus tincidunt augue in turpis scelerisque, consectetur bibendum ante varius. Nunc aliquam vestibulum nisi et tristique. Vivamus sit amet molestie ipsum. Praesent eros mauris, lobortis suscipit mollis ut, porta id magna.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
var tf = new TileFloor(document.querySelector(".container"), {
elementSelector: ".item",
columns: {
maxWidth: 400,
maxCount: 3
}
})
</script>
</html>

126
tile.js
View file

@ -1,126 +0,0 @@
var TileFloor = (function() {
function elementSuicide(element) {
if (element.parentElement !== null) {
element.parentElement.removeChild(element);
}
}
if (typeof document.querySelectorAll !== "function") {
throw new Error("TileFloor is only compatible with HTML5 browsers");
}
function TileElement(element) {
this.element = element;
this.originalParent = element.parent;
}
TileElement.prototype.removeSelf = function removeSelf() {
elementSuicide(this.element);
};
function TileElementContainer(element) {
this.element = element;
}
TileElementContainer.prototype.removeSelf = TileElement.prototype.removeSelf;
TileElementContainer.prototype.height = function height() {
return this.element.offsetHeight;
};
TileElementContainer.prototype.addChild = function addChild(child) {
return this.element.appendChild(child);
};
function Tile(element, options) {
if (!element.tagName || typeof element.querySelectorAll !== "function") {
throw new Error("The first argument must be a DOM Element");
}
if (!options.hasOwnProperty("elementSelector")) {
throw new Error("You must define an element selector");
}
if (options.hasOwnProperty("columns")) {
if (!options.columns.hasOwnProperty("maxWidth")) {
throw new Error("You must define a max width for your columns");
}
if (!options.columns.hasOwnProperty("maxCount")) {
options.columns.maxCount = Infinity;
}
} else {
throw new Error("The only display mode is `columns`");
}
this.masterElement = element;
this.destroyed = false;
this.options = options;
this.elements = Array.prototype.map.call(element.querySelectorAll(options.elementSelector), function (element) {
return new TileElement(element)
});
this.containers = [];
this.containerElement = null;
var cssPostfix = "-generated-tf" + Math.floor(Math.random() * 10000);
this.clearfixClassName = "clearfix" + cssPostfix;
this.columnClassName = "responsive-column" + cssPostfix;
this.clearfixStylesheet = document.createElement("style");
document.head.appendChild(this.clearfixStylesheet);
this.clearfixStylesheet.sheet.insertRule("." + this.clearfixClassName + ":after{content:\"\";display:table;clear:both}", 0);
this.clearfixStylesheet.sheet.insertRule("." + this.columnClassName + "{float:left;max-width:" + options.columns.maxWidth + "px}",0);
this.flow();
//Adjust columns when the window is resized
var _this = this;
this.onResize = function onResize() {
var newColumnCount = _this.determineColumns();
if (_this.containers.length !== newColumnCount) {
return _this.flow();
}
};
window.addEventListener('resize', this.onResize, false);
}
function goAway(element) {
element.removeSelf();
}
function create() {
return document.createElement("div");
}
function shortest(arr) {
var shortIndex = 0, shortHeight = Infinity;
arr.forEach(function(container, i) {
var h = container.height();
if (h < shortHeight) {
shortIndex = i;
shortHeight = h;
}
});
return arr[shortIndex];
}
Tile.prototype.flow = function flow() {
var _this = this;
if (this.containerElement !== null) {
elementSuicide(this.containerElement);
}
this.elements.forEach(goAway);
this.containers.forEach(goAway);
var columnCount = this.determineColumns();
if (columnCount === 0) {
throw new Error("Cowardly refusing to flow elements into 0 columns");
}
this.containerElement = create();
this.containerElement.className = this.clearfixClassName;
this.containers = (new Array(columnCount));
for (var i = 0; i < columnCount; i++) {
var div = create();
div.className = _this.columnClassName;
div.style.width = (100 / columnCount) + "%";
_this.containerElement.appendChild(div);
this.containers[i] = new TileElementContainer(div);
}
this.masterElement.appendChild(this.containerElement);
this.elements.forEach(function(newChild) {
shortest(_this.containers).addChild(newChild.element);
});
};
Tile.prototype.determineColumns = function determineColumns() {
return Math.min(Math.ceil(this.masterElement.offsetWidth / this.options.columns.maxWidth), this.options.columns.maxCount);;
};
return Tile;
})();