Skip to content

Commit

Permalink
Flexcol.mosaic.js - v.1.0.0
Browse files Browse the repository at this point in the history
  • Loading branch information
Piotr Nalepa committed Aug 6, 2015
1 parent 4d921a5 commit 7e0fdf0
Show file tree
Hide file tree
Showing 7 changed files with 395 additions and 2 deletions.
50 changes: 50 additions & 0 deletions .jshintrc
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
{
"browser": true,
"bitwise": true,
"curly": true,
"eqeqeq": false,
"forin": true,
"immed": true,
"newcap": true,
"noarg": true,
"noempty": true,
"nomen": false,
"onevar": true,
"plusplus": false,
"regexp": false,
"strict": false,
"trailing": true,
"unused": "vars",
"white": false,
"asi": false,
"boss": false,
"debug": false,
"eqnull": false,
"es5": false,
"esnext": false,
"evil": false,
"expr": false,
"funcscope": false,
"globalstrict": false,
"iterator": false,
"lastsemic": false,
"laxbreak": true,
"laxcomma": false,
"loopfunc": false,
"multistr": false,
"onecase": false,
"proto": false,
"regexdash": false,
"scripturl": false,
"shadow": false,
"smarttabs": false,
"sub": false,
"supernew": false,
"maxerr": 500,
"maxlen": 150,
"passfail": false,
"latedef": true,
"camelcase": true,
"indent": 4,
"undef": true
}
84 changes: 82 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,82 @@
# flexcol-mosaic
Javascript plugin to enable mosaic in 2 columns with dynamic height detection
# Flexcol.Mosaic.js
It's a tiny (just 1.2kB) Javascript library to enable mosaic grid in multiple columns with dynamic height detection.

![Flexcol.Mosaic.js - 2 columns grid](https://dl.dropboxusercontent.com/u/55990510/flexcol.mosaic.2.cols.png)

## How it works?
This plugin uses [CSS flexbox](http://caniuse.com/#feat=flexbox) for setting items in columns. The JavaScript part is responsible for dynamically setting the height of a container according to desired number of columns.

![Flexcol.Mosaic.js - 3 columns grid](https://dl.dropboxusercontent.com/u/55990510/flexcol.mosaic.3.cols.png)

## How to use it?

### CSS
At first you have to add some CSS rules to your stylesheet:
```css
.flexcol-container {
box-sizing: border-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}

.flexcol-item {
box-sizing: border-box;
// the value - 1rem - is a sum of left and right margin of the element
width: calc((100% / 3) - 1rem);
padding: 1rem;
margin: 0 .5rem 1rem;
background: #eee;
}
```
As you can see there are 2 rules. The most important rule to make desirent amount of columns in the container is `.flexcol-item`. It's **very important** to set correct width of elements. You have to follow the rule:
* if you want to have 2 columns, then you have to set width like this:
```
width: calc(50% - 1rem);
```
* if you want to have 3 columns, then you have to set width like this:
```
width: calc((100% / 3) - 1rem);
```
* etc.

### JavaScript
Just add a link to the `flexcol.mosaic.js` or `flexcol.mosaic.min.js` scripts in your HTML file, just like this:
```html
<script src="js/flexcol.mosaic.js"></script>
```
Then, just call the library the following way:
```javascript
new FlexcolMosaic();
```
And that's it! It's working now.

## Options

There is a bunch of options you can provide to the plugin instance:

### columns {Integer}
The number of columns visible in the container.

**Default value** - 2.
### containerSelector {String}
The CSS selector used to find a container of items that should be displayed in columns.

**Default value** - '.flexcol-container'.
### itemSelector {String}
The CSS selector used to find items in the container.

**Default value** - '.flexcol-item'.

## Methods

The plugin instance has only one method provided to end developer.

### setColumns (columnsNumber)
The method takes a columns number as a parameter. The type of param should be an integer. When set, it updates the elements container to allow items to be aligned in desired number of columns.
37 changes: 37 additions & 0 deletions flexcol.mosaic.demo.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
(function (window, document) {
'use strict';

var configHash = [{
className: 'cols-2',
columns: 2
}, {
className: 'cols-3',
columns: 3
}, {
className: 'cols-4',
columns: 4
}, {
className: 'cols-5',
columns: 5
}],
containerClassName = 'flexcol-container',
containerSelector = '.' + containerClassName,
container = document.querySelector(containerSelector),
headline = document.getElementById('columns-count'),
mosaic = new window.FlexcolMosaic(),
activeConfig = configHash[1];

window.setInterval(function () {
var configs = configHash.filter(function (config) {
return config.columns !== activeConfig.columns;
});

activeConfig = configs[Math.floor(Math.random() * configs.length)];

container.className = containerClassName;
headline.innerHTML = activeConfig.columns;

container.classList.add(activeConfig.className);
mosaic.setColumns(activeConfig.columns);
}, 5000);
})(window, window.document, window.console);
101 changes: 101 additions & 0 deletions flexcol.mosaic.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
/* @preserve
*
* Flexcol.mosaic v1.0.0
* https://github.com/sunpietro/flexcol-mosaic
*
* Copyright 2015 Piotr Nalepa/sunpietro
* http://blog.piotrnalepa.pl
*
* Released under the MIT license
* https://github.com/sunpietro/flexcol-mosaic/blob/master/LICENSE
*
* Date: 2015-08-06T18:00Z
*/
;(function (window, document) {
'use strict';

var flexcolMosaic = function (customParams) {
var params = {
columns: 3,
containerSelector: '.flexcol-container',
itemSelector: '.flexcol-item'
},
overflowInitValue = 0.5,
overflowIncreaseValue = 0.25,
calculationsTimeout,
setFlexContainerHeight,
makeHeightCalculations,
correctOverflow,
setColumns,
container,
items,
key;

for (key in customParams) {
if (customParams.hasOwnProperty(key)) {
params[key] = customParams[key];
}
}

container = document.querySelector(params.containerSelector);
items = Array.prototype.slice.call(container.querySelectorAll(params.itemSelector));

setFlexContainerHeight = function setFlexContainerHeight () {
window.clearTimeout(calculationsTimeout);

params.columns = parseInt(params.columns, 10);

calculationsTimeout = window.setTimeout(makeHeightCalculations, 100);
};

setColumns = function setColumns (columnsNumber) {
params.columns = columnsNumber;

setFlexContainerHeight();
};

correctOverflow = function correctOverflow (finalHeight, itemMinHeight) {
function checkOverflow (height, multiply) {
if (container.offsetWidth < container.scrollWidth) {
container.style.height = finalHeight + (height * multiply) + 'px';

checkOverflow(height, multiply + overflowIncreaseValue);
}
}

checkOverflow(itemMinHeight, overflowInitValue);
};

makeHeightCalculations = function makeHeightCalculations () {
var itemsHeight = 0,
itemMaxHeight = 0,
itemMinHeight = 0,
finalHeight = 0;

container.style.height = 'auto';

items.forEach(function (item) {
var itemOffset = item.getBoundingClientRect();

itemMaxHeight = itemOffset.height > itemMaxHeight ? itemOffset.height : itemMaxHeight;
itemMinHeight = !itemMinHeight || itemOffset.height < itemMinHeight ? itemOffset.height : itemMinHeight;
itemsHeight += itemOffset.height;
});

finalHeight = (itemsHeight / params.columns);
container.style.height = finalHeight + 'px';

correctOverflow(finalHeight, itemMinHeight);
};

window.addEventListener('load', setFlexContainerHeight);
window.addEventListener('resize', setFlexContainerHeight);
window.addEventListener('orientationchange', setFlexContainerHeight);

return {
setColumns: setColumns
};
};

window.FlexcolMosaic = flexcolMosaic;
})(window, window.document);
14 changes: 14 additions & 0 deletions flexcol.mosaic.min.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
/* @preserve
*
* Flexcol.mosaic v1.0.0
* https://github.com/sunpietro/flexcol-mosaic
*
* Copyright 2015 Piotr Nalepa/sunpietro
* http://blog.piotrnalepa.pl
*
* Released under the MIT license
* https://github.com/sunpietro/flexcol-mosaic/blob/master/LICENSE
*
* Date: 2015-08-06T18:00Z
*/
(function(e,t){"use strict";var n=function(n){var o={columns:3,containerSelector:".flexcol-container",itemSelector:".flexcol-item"},i=.5,c=.25,r,l,s,u,a,h,f,d;for(d in n){if(n.hasOwnProperty(d)){o[d]=n[d]}}h=t.querySelector(o.containerSelector);f=Array.prototype.slice.call(h.querySelectorAll(o.itemSelector));l=function m(){e.clearTimeout(r);o.columns=parseInt(o.columns,10);r=e.setTimeout(s,100)};a=function g(e){o.columns=e;l()};u=function y(e,t){function n(t,o){if(h.offsetWidth<h.scrollWidth){h.style.height=e+t*o+"px";n(t,o+c)}}n(t,i)};s=function v(){var e=0,t=0,n=0,i=0;h.style.height="auto";f.forEach(function(o){var i=o.getBoundingClientRect();t=i.height>t?i.height:t;n=!n||i.height<n?i.height:n;e+=i.height});i=e/o.columns;h.style.height=i+"px";u(i,n)};e.addEventListener("load",l);e.addEventListener("resize",l);e.addEventListener("orientationchange",l);return{setColumns:a}};e.FlexcolMosaic=n})(window,window.document);
66 changes: 66 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>Flexbox - mosaic</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Flexbox.Mosaic.js | <small><span id="columns-count">3</span> columns</small></h1>
<p>In this demo, you can see how <strong>Flexcol.mosaic</strong> library works. For demo purposes, I have set a 5 seconds interval, in which I am changing the number of columns in the container. This way you are able to see how it works with different number of columns.</p>
<div class="flexcol-container">
<div class="flexcol-item">
<img src="http://placehold.it/400x300" alt="">
<p>Minions ipsum me want bananaaa! Para tú hahaha tank yuuu! Ti aamoo! Hana dul sae. Underweaaar bee do bee do bee do aaaaaah hahaha me want bananaaa! Chasy daa daa chasy uuuhhh chasy. Butt me want bananaaa! Bananaaaa la bodaaa tulaliloo uuuhhh poulet tikka masala chasy. Potatoooo tulaliloo jeje bee do bee do bee do po kass butt hana dul sae hahaha. Bappleees poulet tikka masala hahaha poopayee bappleees tulaliloo hana dul sae poopayee. Tatata bala tu wiiiii aaaaaah para tú. Wiiiii pepete me want bananaaa! Baboiii tank yuuu! Uuuhhh gelatooo poulet tikka masala butt hana dul sae. Bappleees pepete poopayee hahaha jiji tank yuuu! </p>
</div>
<div class="flexcol-item">
<img src="http://placehold.it/400x130" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores laboriosam numquam optio tenetur delectus animi incidunt aperiam, tempora non totam rerum iste officia doloremque asperiores praesentium suscipit reprehenderit, repellendus, libero.</p>
</div>
<div class="flexcol-item">
<img src="http://placehold.it/400x270" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores laboriosam numquam optio tenetur delectus animi incidunt aperiam, tempora non totam rerum iste officia doloremque asperiores praesentium suscipit reprehenderit, repellendus, libero.</p>
</div>
<div class="flexcol-item">
<img src="http://placehold.it/400x250" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores laboriosam numquam optio tenetur delectus animi incidunt aperiam, tempora non totam rerum iste officia doloremque asperiores praesentium suscipit reprehenderit, repellendus, libero.</p>
</div>
<div class="flexcol-item">
<img src="http://placehold.it/400x180" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores laboriosam numquam optio tenetur delectus animi incidunt aperiam, tempora non totam rerum iste officia doloremque asperiores praesentium suscipit reprehenderit, repellendus, libero.</p>
</div>
<div class="flexcol-item">
<img src="http://placehold.it/400x300" alt="">
<p>Minions ipsum hahaha ti aamoo! Me want bananaaa! La bodaaa para tú pepete pepete potatoooo butt uuuhhh para tú poulet tikka masala potatoooo. Chasy bee do bee do bee do pepete ti aamoo! Para tú pepete para tú tank yuuu! Chasy jeje gelatooo daa ti aamoo! Bappleees la bodaaa tulaliloo poopayee tank yuuu! Hahaha. Jeje me want bananaaa! Aaaaaah butt chasy potatoooo bananaaaa. </p>
</div>
<div class="flexcol-item">
<img src="http://placehold.it/400x150" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores laboriosam numquam optio tenetur delectus animi incidunt aperiam, tempora non totam rerum iste officia doloremque asperiores praesentium suscipit reprehenderit, repellendus, libero.</p>
</div>
<div class="flexcol-item">
<img src="http://placehold.it/400x290" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores laboriosam numquam optio tenetur delectus animi incidunt aperiam, tempora non totam rerum iste officia doloremque asperiores praesentium suscipit reprehenderit, repellendus, libero.</p>
</div>
<div class="flexcol-item">
<img src="http://placehold.it/400x350" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores laboriosam numquam optio tenetur delectus animi incidunt aperiam, tempora non totam rerum iste officia doloremque asperiores praesentium suscipit reprehenderit, repellendus, libero.</p>
</div>
<div class="flexcol-item">
<img src="http://placehold.it/400x430" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores laboriosam numquam optio tenetur delectus animi incidunt aperiam, tempora non totam rerum iste officia doloremque asperiores praesentium suscipit reprehenderit, repellendus, libero.</p>
</div>
<div class="flexcol-item">
<img src="http://placehold.it/400x460" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores laboriosam numquam optio tenetur delectus animi incidunt aperiam, tempora non totam rerum iste officia doloremque asperiores praesentium suscipit reprehenderit, repellendus, libero.</p>
</div>
<div class="flexcol-item">
<img src="http://placehold.it/400x256" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores laboriosam numquam optio tenetur delectus animi incidunt aperiam, tempora non totam rerum iste officia doloremque asperiores praesentium suscipit reprehenderit, repellendus, libero.</p>
</div>
</div>
<script src="flexcol.mosaic.js"></script>
<script src="flexcol.mosaic.demo.js"></script>
</body>
</html>
Loading

0 comments on commit 7e0fdf0

Please sign in to comment.