|
1 --- |
|
2 title: BIG Graph |
|
3 layout: default |
|
4 category: custom-layout-modes |
|
5 --- |
|
6 |
|
7 <section id="copy"> |
|
8 <p><a href="../docs/extending-isotope.html">Custom layout mode</a> to replicate the Flash interface of <a href="http://big.dk">big.dk</a>. Similiar to <a href="category-rows.html">Category rows</a>, item elements are grouped by their sorting data into columns.</p> |
|
9 |
|
10 {% highlight javascript %} |
|
11 |
|
12 $container.isotope({ |
|
13 layoutMode: 'bigGraph', |
|
14 bigGraph: { |
|
15 columnWidth: 45, // size of item |
|
16 rowHeight: 45, // size of item |
|
17 maxRows: 11, // max number of items vertically |
|
18 gutterWidth: { // width of gutter, needs to match getSortData names |
|
19 year: 0, |
|
20 scale: 60, |
|
21 program: 40, |
|
22 status: 60, |
|
23 title: 0 |
|
24 } |
|
25 }, |
|
26 // options... |
|
27 }); |
|
28 |
|
29 {% endhighlight %} |
|
30 |
|
31 <p>To use this layout mode, grab the <code>$.Isotope.prototype</code> methods from the script at the bottom of this page's source.</p> |
|
32 |
|
33 </section> |
|
34 |
|
35 <section id="options" class="clearfix"> |
|
36 |
|
37 <h3>Sort</h3> |
|
38 |
|
39 <ul id="sort-by" class="option-set clearfix" data-option-key="sortBy"> |
|
40 <li><a href="#sortBy=year" data-option-value="year" class="selected" data>Chronological</a></li> |
|
41 <li><a href="#sortBy=title" data-option-value="title">Alphabetical</a></li> |
|
42 <li><a href="#sortBy=program" data-option-value="program">Programmatic</a></li> |
|
43 <li><a href="#sortBy=scale" data-option-value="scale">Scale</a></li> |
|
44 <li><a href="#sortBy=status" data-option-value="status">Status</a></li> |
|
45 </ul> |
|
46 |
|
47 </section> <!-- #options --> |
|
48 |
|
49 <div id="container" class="big-graph clearfix"> |
|
50 |
|
51 </div> <!-- #container --> |
|
52 |
|
53 |
|
54 <script src="../{{ site.jquery_js }}"></script> |
|
55 <script src="../{{ site.isotope_js }}"></script> |
|
56 <script src="../js/make-big-graph-projects.js"></script> |
|
57 <script> |
|
58 |
|
59 // categoryRows custom layout mode |
|
60 $.extend( $.Isotope.prototype, { |
|
61 |
|
62 _bigGraphReset : function() { |
|
63 this.bigGraph = { |
|
64 x : 0, |
|
65 y : 0, |
|
66 height : 0, |
|
67 column: 0, |
|
68 row: 0, |
|
69 gutter: 0, |
|
70 currentCategory : null |
|
71 }; |
|
72 }, |
|
73 |
|
74 _bigGraphLayout : function( $elems ) { |
|
75 var instance = this, |
|
76 containerWidth = this.element.width(), |
|
77 bigGraphOpts = this.options.bigGraph, |
|
78 sortBy = this.options.sortBy, |
|
79 elemsGroup = {}, |
|
80 props = this.bigGraph; |
|
81 |
|
82 // group item elements into categories based on their sorting data |
|
83 $elems.each( function() { |
|
84 var category = $.data( this, 'isotope-sort-data' )[ sortBy ]; |
|
85 elemsGroup[ category ] = elemsGroup[ category ] || []; |
|
86 elemsGroup[ category ].push( this ); |
|
87 }); |
|
88 |
|
89 var group, groupName, groupMaxRows, groupLen, |
|
90 gutterWidth = bigGraphOpts.gutterWidth[ sortBy ], |
|
91 x, y; |
|
92 // for each group... |
|
93 for ( groupName in elemsGroup ) { |
|
94 group = elemsGroup[ groupName ]; |
|
95 groupLen = group.length; |
|
96 // make groups look nice, by limiting rows, makes for blockier blocks |
|
97 groupMaxRows = groupLen / Math.ceil( groupLen / bigGraphOpts.maxRows ); |
|
98 |
|
99 $.each( group, function( i, elem ) { |
|
100 x = props.column * bigGraphOpts.columnWidth + props.gutter * gutterWidth; |
|
101 y = (bigGraphOpts.maxRows - props.row - 1) * bigGraphOpts.rowHeight; |
|
102 instance._pushPosition( $(elem), x, y ); |
|
103 |
|
104 if ( props.row >= groupMaxRows - 1 ) { |
|
105 // start a new column |
|
106 props.row = 0; |
|
107 props.column++; |
|
108 } else { |
|
109 props.row++; |
|
110 } |
|
111 }); |
|
112 // start a new group |
|
113 if ( props.row > 0 ) { |
|
114 props.row = 0; |
|
115 props.column++; |
|
116 } |
|
117 props.gutter++; |
|
118 } |
|
119 props.gutter--; |
|
120 props.width = props.column * bigGraphOpts.columnWidth + props.gutter * gutterWidth; |
|
121 }, |
|
122 |
|
123 _bigGraphGetContainerSize : function () { |
|
124 bigGraphOpts = this.options.bigGraph; |
|
125 this.bigGraph.column++; |
|
126 return { |
|
127 width: this.bigGraph.width, |
|
128 height: bigGraphOpts.maxRows * bigGraphOpts.rowHeight |
|
129 }; |
|
130 }, |
|
131 |
|
132 _bigGraphResizeChanged : function() { |
|
133 return false; |
|
134 } |
|
135 |
|
136 }); |
|
137 |
|
138 |
|
139 $(function(){ |
|
140 |
|
141 // -------- dynamically create items ---------------- // |
|
142 |
|
143 var i = 120, |
|
144 projects = []; |
|
145 |
|
146 while (i--) { |
|
147 projects.push( makeBigGraphProject() ); |
|
148 } |
|
149 |
|
150 var $container = $('#container'); |
|
151 |
|
152 $container.append( $( projects.join('') ) ); |
|
153 |
|
154 // -------- isotope ---------------- // |
|
155 |
|
156 $container.isotope({ |
|
157 itemSelector: '.project', |
|
158 layoutMode: 'bigGraph', |
|
159 bigGraph: { |
|
160 columnWidth: 45, // size of item |
|
161 rowHeight: 45, // size of item |
|
162 maxRows: 11, // max number of items vertically |
|
163 gutterWidth: { // width of gutter, needs to match getSortData names |
|
164 year: 0, |
|
165 scale: 0, |
|
166 program: 35, |
|
167 status: 80, |
|
168 title: 0 |
|
169 } |
|
170 }, |
|
171 sortBy: 'year', |
|
172 getSortData: { |
|
173 year: function( $elem ) { |
|
174 return $elem.attr('data-year'); |
|
175 }, |
|
176 scale: function( $elem ) { |
|
177 return $elem.attr('data-scale'); |
|
178 }, |
|
179 program: function( $elem ) { |
|
180 return $elem.attr('data-program'); |
|
181 }, |
|
182 status: function( $elem ) { |
|
183 return $elem.attr('data-status'); |
|
184 }, |
|
185 title: function( $elem ) { |
|
186 var chara = $elem.find('p').text()[0]; |
|
187 return isNaN( parseInt( chara ) ) ? chara : '0'; |
|
188 } |
|
189 } |
|
190 }); |
|
191 |
|
192 {% include option-set-buttons.js %} |
|
193 |
|
194 |
|
195 }); |
|
196 </script> |