Skip to content

Commit 2aeebde

Browse files
JohnnyTheTankJohnnyTheTank
committed
finished v1.0.0
1 parent 68926bf commit 2aeebde

9 files changed

Lines changed: 313 additions & 32 deletions

File tree

‎Gruntfile.js‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
module.exports = function(grunt) {
2+
3+
var banner = '/**\n @name: <%= pkg.name %> \n @version: <%= pkg.version %> (<%= grunt.template.today("dd-mm-yyyy") %>) \n @author: <%= pkg.author %> \n @url: <%= pkg.homepage %> \n @license: <%= pkg.license %>\n*/\n';
4+
5+
var sources = [
6+
'src/angular-bricklayer.js'
7+
];
8+
9+
grunt.initConfig({
10+
pkg: grunt.file.readJSON('package.json'),
11+
uglify: {
12+
js: {
13+
files : {
14+
'dist/angular-bricklayer.min.js' : sources
15+
}
16+
},
17+
options: {
18+
banner: banner
19+
}
20+
},
21+
concat: {
22+
options: {
23+
separator: ';',
24+
banner: banner
25+
},
26+
dist: {
27+
src: sources,
28+
dest: 'dist/angular-bricklayer.js'
29+
}
30+
},
31+
watch: {
32+
minifiyJs: {
33+
files: sources,
34+
tasks: ['uglify', 'concat'],
35+
options: {
36+
spawn: true
37+
}
38+
}
39+
}
40+
});
41+
42+
grunt.loadNpmTasks('grunt-contrib-concat');
43+
grunt.loadNpmTasks('grunt-contrib-uglify');
44+
grunt.loadNpmTasks('grunt-contrib-watch');
45+
46+
grunt.registerTask('default', ['watch']);
47+
48+
};
49+

‎README.md‎

Lines changed: 82 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,83 @@
1-
**WIP**
2-
31
# angular-bricklayer
4-
AngularJS module for [ademilter's bricklayer](https://github.com/ademilter/bricklayer)
2+
AngularJS module for [ademilter's bricklayer](https://github.com/ademilter/bricklayer), a lightweight & independent cascading grid layout library
3+
4+
[![npm version](https://badge.fury.io/js/angular-bricklayer.svg)](https://badge.fury.io/js/angular-bricklayer)
5+
[![Bower version](https://badge.fury.io/bo/angular-bricklayer.svg)](https://badge.fury.io/bo/angular-bricklayer)
6+
7+
## Demos
8+
- [Simple demo](https://rawgit.com/JohnnyTheTank/angular-bricklayer/master/demo/index.html)
9+
10+
## Installation
11+
12+
1. Install via either [bower](http://bower.io/), [npm](https://www.npmjs.com/) or downloaded files:
13+
1. via bower: `bower install --save angular-bricklayer`
14+
2. via npm: `npm install --save angular-bricklayer`
15+
3. via [downloaded files](https://github.com/JohnnyTheTank/angular-bricklayer/zipball/master)
16+
17+
2. Include dependencies and angular-bricklayer in your HTML.
18+
1. When using bower
19+
```html
20+
<link rel="stylesheet" href="bower_components/bricklayer/dist/bricklayer.min.css">
21+
<script src="bower_components/bricklayer/dist/bricklayer.min.js"></script>
22+
<script src="bower_components/angular-bricklayer/dist/angular-bricklayer.min.js"></script>
23+
```
24+
2. When using npm
25+
```html
26+
<link rel="stylesheet" href="node_modules/bricklayer/dist/bricklayer.min.css">
27+
<script src="node_modules/bricklayer/dist/bricklayer.min.js"></script>
28+
<script src="node_modules/angular-bricklayer/dist/angular-bricklayer.min.js"></script>
29+
```
30+
3. When using downloaded files
31+
```html
32+
<link rel="stylesheet" href="YOUR_PATH/bricklayer.min.css">
33+
<script src="YOUR_PATH/bricklayer.min.js"></script>
34+
<script src="YOUR_PATH/angular-bricklayer.min.js"></script>
35+
```
36+
37+
3. Add `jtt_bricklayer` to your application's module dependencies.
38+
39+
## Usage
40+
41+
- Create a simple list:
42+
43+
```html
44+
<div class="bricklayer">
45+
<div>Your item</div>
46+
<div>Your another item</div>
47+
<div>Your another but long item</div>
48+
<div>Your another but very short item</div>
49+
<div>Your one more item</div>
50+
<div>Your smallest item</div>
51+
</div>
52+
```
53+
54+
- Define **bricklayer column size**:
55+
56+
```css
57+
@media screen and (min-width: 1200px) {
58+
.bricklayer-column-sizer {
59+
/* divide by 3. */
60+
width: 33.3%;
61+
}
62+
}
63+
64+
@media screen and (min-width: 768px) {
65+
.bricklayer-column-sizer {
66+
/* divide by 2. */
67+
width: 50%;
68+
}
69+
}
70+
```
71+
72+
## Add bricks dynamically
73+
74+
```html
75+
<div class="bricklayer">
76+
<!-- append -->
77+
<div bricklayer-append ng-repeat="item in appendData"></div>
78+
79+
<!-- prepend -->
80+
<div bricklayer-prepend ng-repeat="item in prepedData"></div>
81+
</div>
82+
83+
```

‎bower.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
"Jonathan Hornung <jonathan.hornung@gmail.com>"
66
],
77
"description": "AngularJS module for bricklayer, a lightweight & independent cascading grid layout library",
8-
"main": "",
8+
"main": "dist/angular-bricklayer.js",
9+
"version": "1.0.0",
910
"moduleType": [],
1011
"keywords": [
1112
"angular",
@@ -24,6 +25,9 @@
2425
"demo"
2526
],
2627
"license": "MIT",
28+
"devDependencies": {
29+
"angular": "^1.5.3"
30+
},
2731
"dependencies": {
2832
"bricklayer": "^0.3.0"
2933
}

‎demo/app.js‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,15 @@
1-
angular.module('app', ['jtt_bricklayer']);
1+
angular.module('app', ['jtt_bricklayer']);
2+
3+
angular.module('app')
4+
.controller("appController", function ($scope, $timeout) {
5+
$scope.data = [];
6+
7+
var heights = [30, 40, 50, 60, 70, 90, 100, 120, 150, 200];
8+
9+
for (var i = 0; i < 60; i++) {
10+
$scope.data.push({
11+
color: '#' + Math.random().toString(16).substr(-6),
12+
height: heights[Math.floor(Math.random() * heights.length)],
13+
});
14+
}
15+
});

‎demo/index.html‎

Lines changed: 33 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,40 @@
88
<title>angular-bricklayer</title>
99

1010
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bricklayer/0.2.4/bricklayer.min.css">
11-
12-
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.min.js"></script>
1311
<script src="//cdnjs.cloudflare.com/ajax/libs/bricklayer/0.2.4/bricklayer.min.js"></script>
12+
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.min.js"></script>
13+
14+
<!--
15+
<link rel="stylesheet" href="../bower_components/bricklayer/dist/bricklayer.min.css">
16+
<script src="../bower_components/bricklayer/dist/bricklayer.min.js"></script>
17+
<script src="../bower_components/angular/angular.min.js"></script>
18+
-->
19+
1420

1521
<script src="app.js"></script>
16-
<script src="../src/angular-bricklayer.js"></script>
22+
<script src="../dist/angular-bricklayer.js"></script>
1723

1824
<style>
19-
.bricklayer-column-sizer {
20-
width: 10%;
25+
/* Bricklayer calculates its column sizes from the `bricklayer-column-sizer` element. You can give it some width with media queries to make it responsive */
26+
@media screen and (min-width: 300px) {
27+
.bricklayer-column-sizer {
28+
/* If page is greater than 300px, columns will be 20% wide. */
29+
width: 20%;
30+
}
31+
}
32+
33+
@media screen and (min-width: 400px) {
34+
.bricklayer-column-sizer {
35+
/* If page is greater than 400px, columns will be 10% wide, which are more narrow. */
36+
width: 10%;
37+
}
38+
}
39+
40+
@media screen and (min-width: 700px) {
41+
.bricklayer-column-sizer {
42+
/* If page is greater than 700px, columns will be 5% wide. That means there will be lots of columns */
43+
width: 5%;
44+
}
2145
}
2246

2347
.box {
@@ -26,35 +50,18 @@
2650
</style>
2751

2852
</head>
29-
<body ng-app="app">
53+
<body ng-app="app" ng-controller="appController">
3054

3155
<!-- Bricklayer needs to have "bricklayer" class name. -->
56+
3257
<div class="bricklayer">
3358
<div class="box" style="background-color: red; height: 100px"></div>
3459
<div class="box" style="background-color: green; height: 70px"></div>
3560
<div class="box" style="background-color: blue; height: 30px"></div>
3661
<div class="box" style="background-color: orange; height: 40px"></div>
37-
<div class="box" style="background-color: red; height: 100px"></div>
38-
<div class="box" style="background-color: green; height: 70px"></div>
39-
<div class="box" style="background-color: blue; height: 30px"></div>
40-
<div class="box" style="background-color: orange; height: 40px"></div>
41-
<div class="box" style="background-color: red; height: 100px"></div>
42-
<div class="box" style="background-color: green; height: 70px"></div>
43-
<div class="box" style="background-color: blue; height: 30px"></div>
44-
<div class="box" style="background-color: orange; height: 40px"></div>
45-
<div class="box" style="background-color: red; height: 100px"></div>
46-
<div class="box" style="background-color: green; height: 70px"></div>
47-
<div class="box" style="background-color: blue; height: 30px"></div>
48-
<div class="box" style="background-color: orange; height: 40px"></div>
49-
<div class="box" style="background-color: red; height: 100px"></div>
50-
<div class="box" style="background-color: green; height: 70px"></div>
51-
<div class="box" style="background-color: blue; height: 30px"></div>
52-
<div class="box" style="background-color: orange; height: 40px"></div>
53-
<div class="box" style="background-color: red; height: 100px"></div>
54-
<div class="box" style="background-color: green; height: 70px"></div>
55-
<div class="box" style="background-color: blue; height: 30px"></div>
56-
<div class="box" style="background-color: orange; height: 40px"></div>
62+
<div class="box" bricklayer-append style="background-color: {{item.color}}; height: {{item.height + 'px'}}" ng-repeat="item in data"></div>
5763
</div>
5864

65+
5966
</body>
6067
</html>

‎dist/angular-bricklayer.js‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
/**
2+
@name: angular-bricklayer
3+
@version: 1.0.0 (23-04-2016)
4+
@author:
5+
@url: https://github.com/JohnnyTheTank/angular-bricklayer
6+
@license: MIT
7+
*/
8+
angular.module('jtt_bricklayer', [])
9+
.directive('bricklayer', function () {
10+
return {
11+
restrict: 'C',
12+
replace: 'false',
13+
link: function (scope, element, attrs) {
14+
var bricklayer = new Bricklayer(element[0]);
15+
16+
scope.$on('bricklayer.append', function (event, element) {
17+
setTimeout(function () {
18+
bricklayer.append(element)
19+
}, 0)
20+
});
21+
22+
scope.$on('bricklayer.prepend', function (event, element) {
23+
setTimeout(function () {
24+
bricklayer.prepend(element)
25+
}, 0)
26+
});
27+
}
28+
}
29+
})
30+
.directive('bricklayerAppend', function () {
31+
return {
32+
require: '?bricklayer',
33+
restrict: 'ACE',
34+
replace: 'false',
35+
link: function (scope, element, attrs) {
36+
scope.$emit('bricklayer.append', element[0]);
37+
}
38+
}
39+
})
40+
.directive('bricklayerPrepend', function () {
41+
return {
42+
require: '?bricklayer',
43+
restrict: 'ACE',
44+
replace: 'false',
45+
link: function (scope, element, attrs) {
46+
scope.$emit('bricklayer.prepend', element[0]);
47+
}
48+
}
49+
});

‎dist/angular-bricklayer.min.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/**
2+
@name: angular-bricklayer
3+
@version: 1.0.0 (23-04-2016)
4+
@author:
5+
@url: https://github.com/JohnnyTheTank/angular-bricklayer
6+
@license: MIT
7+
*/
8+
angular.module("jtt_bricklayer",[]).directive("bricklayer",function(){return{restrict:"C",replace:"false",link:function(a,b,c){var d=new Bricklayer(b[0]);a.$on("bricklayer.append",function(a,b){setTimeout(function(){d.append(b)},0)}),a.$on("bricklayer.prepend",function(a,b){setTimeout(function(){d.prepend(b)},0)})}}}).directive("bricklayerAppend",function(){return{require:"?bricklayer",restrict:"ACE",replace:"false",link:function(a,b,c){a.$emit("bricklayer.append",b[0])}}}).directive("bricklayerPrepend",function(){return{require:"?bricklayer",restrict:"ACE",replace:"false",link:function(a,b,c){a.$emit("bricklayer.prepend",b[0])}}});

‎package.json‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
{
2+
"name": "angular-bricklayer",
3+
"version": "1.0.0",
4+
"authors": [
5+
"Jonathan Hornung <jonathan.hornung@gmail.com>"
6+
],
7+
"description": "AngularJS module for bricklayer, a lightweight & independent cascading grid layout library",
8+
"main": "dist/angular-bricklayer.js",
9+
"keywords": [
10+
"angular",
11+
"angularjs",
12+
"grid",
13+
"bricklayer",
14+
"masonry"
15+
],
16+
"scripts": {
17+
"test": "echo \"Error: no test specified\" && exit 1"
18+
},
19+
"repository": {
20+
"type": "git",
21+
"url": "git+https://github.com/JohnnyTheTank/angular-bricklayer.git"
22+
},
23+
"author": "",
24+
"license": "MIT",
25+
"bugs": {
26+
"url": "https://github.com/JohnnyTheTank/angular-bricklayer/issues"
27+
},
28+
"homepage": "https://github.com/JohnnyTheTank/angular-bricklayer",
29+
"devDependencies": {
30+
"angular": "^1.5.3",
31+
"grunt": "^0.4.5",
32+
"grunt-contrib-concat": "^0.5.1",
33+
"grunt-contrib-uglify": "^0.11.0",
34+
"grunt-contrib-watch": "^0.6.1"
35+
},
36+
"dependencies": {
37+
"bricklayer": "^0.3.0"
38+
}
39+
}

0 commit comments

Comments
 (0)