This repository has been archived by the owner on Feb 2, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
249 lines (170 loc) · 8.43 KB
/
index.html
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title>AngularJs Justified Layoyt - codekraft studio</title>
<meta name="author" content="codekraft-studio">
<meta name="description" content="The passion for the code and opensource guides us in what we do.">
<meta name="Robots" content="ALL,INDEX">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0">
<meta name="mobile-web-app-capable" content="yes">
<meta property="og:title" content="Codekraft Studio, coding for fun and profit." />
<meta property="og:description" content="The passion for the code and opensource guides us in what we do." />
<meta property="og:image" content="https://avatars2.githubusercontent.com/u/12395152" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.codekraft.it/" />
<meta property="og:site_name" content="Codekraft Studio, coding for fun and profit." />
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Codekraft Studio, coding for fun and profit." />
<meta name="twitter:description" content="The passion for the code and opensource guides us in what we do." />
<meta name="twitter:image" content="https://avatars2.githubusercontent.com/u/12395152" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="style.css" media="screen" title="no title" charset="utf-8">
<style>
[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
display: none !important;
}
</style>
</head>
<body ng-controller="MainCtrl" ng-cloak>
<article>
<header>
<div class="container">
<h1>angular-justified-layout</h1>
<h2>angularjs wrapper for <strong>flickr justified layout</strong></h2>
</div>
<a href="https://github.com/codekraft-studio/angular-justified-layout"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/52760788cde945287fbb584134c4cbc2bc36f904/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png"></a>
</header>
<section class="container">
<div class="row">
<div class="col-md-6">
<div class="row title-bar">
<div class="col-md-12">
<h2>It's very simple to use!</h2>
<p>There is only one directive called <b>justified-layout</b> you must pass to it an attribute called <b>items</b> which will be an array of rateo values or objects containing width and height, as described in: <a href="https://github.com/flickr/justified-layout">flickr/justified-layout</a></p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>It can be used iwth an array of aspect rateos that will be converted into objects to use in the template:</p>
<pre> <justified-layout items="[1, 1.5 ,0.5, 1.2, 1]"></justified-layout> </pre>
<p>Or directly with an array of objects:</p>
<pre> <justified-layout items="myArray"></justified-layout> </pre>
<p>Note, if you want to use the array of objects option, each object inside <code>myArray</code> <b>must</b> contain theese properties:</p>
<ul>
<li><b>width</b>: The element (image, box, whatever) real width</li>
<li><b>height</b>: The element (image, box, whatever) real height</li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-10">
<h2>Default template:</h2>
<justified-layout items="defaultBoxes" options="defaultOptions"></justified-layout>
<p>With a few lines of style and this module, this is what you get.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2>Custom template</h2>
<p>As you can see, you can use a custom template for your justified-layout, is also super easy to do it!</p>
<p>The directive will accept transcluded content, if you want to access the directive scope, as per example, the items data, just call <code>$parent.items</code> in your template and you will have access to them!</p>
</div>
</div>
<div class="row">
<div class="col-md-8">
<justified-layout items="images" options="{
containerPadding: 2,
boxSpacing: 5,
targetRowHeight: 120
}">
<div ng-repeat="image in $parent.items track by $index" class="box" ng-style="image.style">
<div class="box-inside">
<div class="details-block" ng-click="removeItem(image, $index)"></div>
</div>
</div>
</justified-layout>
</div>
<div class="col-md-4">
<div class="btn-group-vertical">
<button type="button" class="btn btn-default btn-lg" ng-click="addImage()">
<span class="glyphicon glyphicon-plus"></span>
ADD BLOCK
</button>
<button type="button" class="btn btn-default btn-lg" ng-click="randomize()">
<span class="glyphicon glyphicon-refresh"></span>
RANDOMIZE
</button>
<button type="button" class="btn btn-default btn-lg" ng-click="clearImages()">
<span class="glyphicon glyphicon-remove"></span>
CLEAR BLOCKS
</button>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2>Many thanks to Flickr for the aweome script!</h2>
<p>All this has been made possible thanks to Flickr who has shared its magic code! If you are insterested visit <a href="http://code.flickr.net/2016/04/05/our-justified-layout-goes-open-source/" target="_blank">this</a> page.</p>
</div>
</div>
<button type="button" ng-init="hideView = false" ng-click="hideView = !hideView"></button>
<div class="row" ng-show="hideView">
<div class="col-md-12">
<justified-layout items="defaultBoxes" options="defaultOptions"></justified-layout>
</div>
</div>
</section>
</article>
</body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script type="text/javascript" src="./dist/angular-justified-layout.min.js"></script>
<script>
angular.module('app', ['angular-justified-layout'])
.controller('MainCtrl', function($scope) {
$scope.defaultOptions = {
targetRowHeight: 120
};
$scope.defaultBoxes = [1, 1.5, 0.5, 2];
$scope.images = [];
$scope.clearImages = function() {
$scope.images = [];
};
$scope.addImage = function(title) {
var rateo = (Math.random() * (1.5 - 0.8) + 0.8).toFixed(2);
var width = Math.round(Math.random() * (1024 - 340) + 340);
var height = Math.round(rateo * width);
var url = ['https://placehold.it/', width, 'x', height].join('');
$scope.images.push({
height: height,
width: width,
url: url,
title: title
});
}
$scope.removeItem = function(item, index) {
$scope.images.splice(index, 1);
}
$scope.randomize = function(number) {
number = !number ? (Math.random() * (16 - 6) + 6) : number;
$scope.images = [];
for (var i = 0; i < number; i++) {
var title = 'Image number: ' + i;
$scope.addImage(title);
}
}
// Init view
$scope.randomize();
});
</script>
</html>