Skip to content

Commit 36a0595

Browse files
author
Jiren Patel
committed
Updated simple example and stream example with select box
1 parent ece8b78 commit 36a0595

7 files changed

Lines changed: 75 additions & 167 deletions

File tree

‎examples/assets/css/stream.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -238,4 +238,7 @@ select:focus, textarea:focus, input:focus{
238238
margin-left: 20px;
239239
}
240240

241+
.criteria select{
242+
margin-left: 10px;
243+
}
241244

‎examples/lazy_id_filter.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ <h4>Genre</h4>
5454
</div>
5555
<div class="criteria">
5656
<h4>Movie top/worst</h4>
57-
<select id="top_worst"></select>
57+
<select id="top_worst" class="col-span-8"></select>
5858
</div>
5959
<div class="criteria">
6060
<h4>Additional criteria</h4>

‎examples/simple_filter.html‎

Lines changed: 44 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,24 @@ <h3>Search</h3>
2424
<div class="sidebar_left_find">
2525
<div class="sidebar_list">
2626
<h3>Filter by Price</h3>
27-
<span id="price_range_label" style="margin:50px;">$0-$100</span>
27+
<span id="price_range_label" style="margin:50px;">$0-$500</span>
2828
<div id="price_slider"></div>
29-
<input type="hidden" id="price_filter"/>
29+
<input type="hidden" id="price_filter" value="100-500"/>
30+
</div>
31+
</div>
32+
<div class="sidebar_left_find">
33+
<div class="sidebar_list">
34+
<h3>Filter by Status</h3>
35+
<ul id="status">
36+
<li>
37+
<input id="active" value="active" type="checkbox">
38+
<span >Active</span>
39+
</li>
40+
<li>
41+
<input id="inactive" value="inactive" type="checkbox">
42+
<span>Inactive</span>
43+
</li>
44+
<ul>
3045
</div>
3146
</div>
3247
</div>
@@ -38,150 +53,58 @@ <h1 class="result_count"></h1>
3853
//<![CDATA[
3954
var services = [
4055
{
41-
"to_param": "1-mr-ona-howe",
42-
"group_number": null,
43-
"is_schedulelater": false,
4456
"permalink": "1-mr-ona-howe",
45-
"start_date": "2011-08-27",
46-
"total_transactions": null,
47-
"end_time": null,
48-
"positive_reviews": 0,
49-
"booking_capacity": 2,
50-
"is_virtual": false,
51-
"request_id": null,
5257
"title": "Mr. Ona Howe",
53-
"total_reviews": 0,
54-
"estimated_duration": 0,
55-
"thumbnail": "/images/category/cat_image_thumb.jpg",
56-
"amount": 453,
57-
"donated_amount": null,
58-
"booked_seats": 0,
59-
"id": 1,
60-
"user_id": 3,
61-
"is_public": true,
62-
"service_categories": [
63-
{
64-
"to_param": "1",
65-
"category_id": 33
66-
}
67-
],
68-
"end_date": "2011-07-30",
69-
"nonprofit_id": 15,
58+
"amount": 100,
7059
"status": "active",
71-
"start_time": null,
72-
"nonprofit": {
73-
"name": "Eldon Zulauf",
74-
"to_param": "15-eldon-zulauf",
75-
"nonprofit_categories": [
76-
{
77-
"to_param": "15",
78-
"category_id": 11
79-
}
80-
],
81-
"thumbnail": "/images/missing/nonprofit_medium.jpg"
82-
}
60+
"is_public": true,
61+
"id": 1,
62+
"nonprofit": "Eldon Zulauf"
8363
},
8464
{
85-
"to_param": "2-darien-hoeger",
86-
"group_number": null,
87-
"is_schedulelater": true,
8865
"permalink": "2-darien-hoeger",
89-
"start_date": "2011-08-23",
90-
"total_transactions": null,
91-
"end_time": null,
92-
"positive_reviews": 0,
93-
"booking_capacity": 0,
94-
"is_virtual": false,
95-
"request_id": null,
9666
"title": "Darien Hoeger",
97-
"total_reviews": 0,
98-
"estimated_duration": 0,
99-
"thumbnail": "/images/category/cat_image_thumb.jpg",
10067
"amount": 201,
101-
"donated_amount": null,
102-
"booked_seats": 0,
10368
"id": 2,
104-
"user_id": 3,
105-
"is_public": true,
106-
"service_categories": [
107-
{
108-
"to_param": "2",
109-
"category_id": 33
110-
}
111-
],
112-
"end_date": "2011-09-03",
113-
"nonprofit_id": 16,
114-
"status": "active",
115-
"start_time": null,
116-
"nonprofit": {
117-
"name": "Beryl McDermott",
118-
"to_param": "16-beryl-mcdermott",
119-
"nonprofit_categories": [
120-
{
121-
"to_param": "16",
122-
"category_id": 26
123-
}
124-
],
125-
"thumbnail": "/images/missing/nonprofit_medium.jpg"
126-
}
69+
"status": "inactive",
70+
"nonprofit": "Beryl McDermott"
12771
},
12872
{
129-
"to_param": "3-mrs-frederique-kris",
130-
"group_number": null,
131-
"is_schedulelater": true,
13273
"permalink": "3-mrs-frederique-kris",
133-
"start_date": "2011-08-08",
134-
"total_transactions": null,
135-
"end_time": null,
136-
"positive_reviews": 0,
137-
"booking_capacity": 0,
138-
"is_virtual": false,
139-
"request_id": null,
14074
"title": "Mrs. Frederique Kris",
141-
"total_reviews": 0,
142-
"estimated_duration": 0,
143-
"thumbnail": "/images/category/cat_image_thumb.jpg",
14475
"amount": 500,
145-
"donated_amount": null,
146-
"booked_seats": 0,
14776
"id": 3,
148-
"user_id": 3,
149-
"is_public": true,
150-
"service_categories": [
151-
{
152-
"to_param": "3",
153-
"category_id": 27
154-
}
155-
],
156-
"end_date": "2011-08-16",
157-
"nonprofit_id": 15,
15877
"status": "active",
159-
"start_time": null,
160-
"nonprofit": {
161-
"name": "Eldon Zulauf",
162-
"to_param": "15-eldon-zulauf",
163-
"nonprofit_categories": [
164-
{
165-
"to_param": "15",
166-
"category_id": 11
167-
}
168-
],
169-
"thumbnail": "/images/missing/nonprofit_medium.jpg"
170-
}
171-
}];
78+
"nonprofit": "Eldon Zulauf"
79+
},
80+
{
81+
"permalink": "4-jedediah-pouros",
82+
"title": "Jedediah Pouros",
83+
"amount": 300,
84+
"id": 4,
85+
"status": "inactive",
86+
"nonprofit": "Mabel Tillman I"
87+
},
88+
{
89+
"permalink": "5-mrs-daisy-macejkovic",
90+
"title": "Mrs. Daisy Macejkovic",
91+
"amount": 410,
92+
"id": 5,
93+
"status": "active",
94+
"nonprofit": "Mr. Ayden O'Keefe"
95+
} ];
17296
//]]>
17397
</script>
17498
<div class="clear"></div>
17599
</div>
176100

177101
<script id="template" type="text/html">
178-
<a title="{{title}}" href="/demo/{{to_param}}">
102+
<a title="{{title}}" href="/demo/{{permalink}}">
179103
<div class="fs_box">
180104
<div class="fs_left">
181-
<span class="fs_head">{{short_title}}</span>
105+
<span class="fs_head">{{title}}</span>
182106
<span class="fs_for">for</span>
183-
<span class="fs_disc">{{short_nonprofit_name}}</span>
184-
<span class="fs_disc">{{timeleft_str}}</span>
107+
<span class="fs_disc">{{nonprofit}}</span>
185108
</div>
186109
<div class="fs_price">${{amount}}</div>
187110
<div class="clear"></div>

‎examples/simple_filter.js‎

Lines changed: 6 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ jQuery(document).ready(function($) {
55
$("#price_slider").slider({
66
range:true,
77
min: 0,
8-
max: 1000,
8+
max: 500,
99
values:[0, 500],
1010
step: 5,
1111
slide: function(event, ui) {
@@ -14,33 +14,23 @@ jQuery(document).ready(function($) {
1414
}
1515
});
1616

17+
$('#status :checkbox').prop('checked', true);
18+
1719
fJS = filterInit();
1820
});
1921

2022
function filterInit() {
2123

22-
var calulate_day_left = function(days) {
23-
if(days == 0) return 'Last Day';
24-
else if(days == 1) return '1 day Left';
25-
else return days + ' day Left';
26-
};
27-
28-
var template, html = $.trim($("#template").html());
29-
30-
template = Mustache.compile(html);
24+
var template = Mustache.compile($.trim($("#template").html()));
3125

3226
var view = function(service){
33-
service.timeleft = Math.floor(Math.random()*10);
34-
service.timeleft_str = calulate_day_left(service.timeleft);
35-
service.short_title = service.title.length < 27 ? service.title : service.title.substring(0,27) +'...';
36-
service.short_nonprofit_name = service.nonprofit.name.length < 27 ? service.nonprofit.name : service.nonprofit.name.substring(0,27) +'...';
37-
3827
return template(service);
3928
};
4029

4130
var settings = {
4231
filter_criteria: {
43-
amount: ['#price_filter .TYPE.range', 'amount']
32+
amount: ['#price_filter .TYPE.range', 'amount'],
33+
status: ['#status :checkbox', 'status']
4434
},
4535
search: {input: '#search_box' },
4636
and_filter_on: true,

‎examples/stream.html‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,9 +40,19 @@ <h4>Runtime</h4>
4040
</div>
4141
<div class="criteria" id="year_criteria">
4242
<h4>Year</h4>
43-
<span id="year_range_label" class="slider-label">1920 - 2013</span>
44-
<div id="year_slider" class="slider"></div>
45-
<input type="hidden" id="year_filter" value="1920-2013"/>
43+
<select id="year_filter" class="col-span-8">
44+
<option value="1920-2020">All (1920 - 2020)</option>
45+
<option value="1920-1930">1920 - 1930</option>
46+
<option value="1931-1940">1931 - 1940</option>
47+
<option value="1941-1950">1941 - 1950</option>
48+
<option value="1951-1960">1951 - 1960</option>
49+
<option value="1961-1970">1961 - 1970</option>
50+
<option value="1971-1980">1971 - 1980</option>
51+
<option value="1981-1990">1981 - 1990</option>
52+
<option value="1991-2000">1991 - 2000</option>
53+
<option value="2001-2010">2001 - 2010</option>
54+
<option value="2011-2020">2011 - 2020</option>
55+
</select>
4656
</div>
4757
<div class="criteria" id="genre_criteria">
4858
<h4>Genre</h4>

‎examples/stream.js‎

Lines changed: 7 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
jQuery(document).ready(function($) {
22

3-
var template = Mustache.compile($.trim($("#template").html()))
4-
,$container = $('.movies');
5-
6-
var all_genre = ["Crime", "Drama", "Thriller", "Adventure", "Western", "Action", "Biography", "History", "War", "Fantasy", "Sci-Fi", "Mystery", "Romance", "Family", "Horror", "Film-Noir", "Comedy", "Animation", "Musical", "Music", "Sport"];
3+
var all_genre = ["Crime", "Drama", "Thriller", "Adventure", "Western", "Action", "Biography",
4+
"History", "War", "Fantasy", "Sci-Fi", "Mystery", "Romance", "Family", "Horror",
5+
"Film-Noir", "Comedy", "Animation", "Musical", "Music", "Sport"];
76
var genre_template = Mustache.compile($.trim($("#genre_template").html()))
87
,$genre_container = $('#genre_criteria')
98

@@ -35,18 +34,6 @@ jQuery(document).ready(function($) {
3534
}
3635
});
3736

38-
$("#year_slider").slider({
39-
min: 1920,
40-
max: (new Date()).getFullYear(),
41-
values:[1920, (new Date()).getFullYear()],
42-
step: 10,
43-
range:true,
44-
slide: function( event, ui ) {
45-
$("#year_range_label" ).html(ui.values[ 0 ] + ' - ' + ui.values[ 1 ]);
46-
$('#year_filter').val(ui.values[0] + '-' + ui.values[1]).trigger('change');
47-
}
48-
});
49-
5037
$.each(Movies, function(i, m){ m.id = i+1; });
5138
window.mf = MovieFilter(Movies);
5239

@@ -88,11 +75,10 @@ var MovieFilter = function(data){
8875
before_add: function(data){
8976
var offset = this.data.length;
9077

91-
if (offset == 450) {
92-
this.clearStreamingTimer();
93-
}
94-
95-
$.each(data, function(i, m) { m.id = offset+1;})
78+
if (offset == 450) this.clearStreamingTimer();
79+
80+
for(var i = 0, l = data.length; i < l; i++)
81+
data[i].id = offset + i + 1;
9682
},
9783
after_add: function(data){
9884
var percent = (this.data.length - 250)*100/250;

‎filter.js‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -162,11 +162,7 @@
162162
if (filter_type_func(category_val, v)) return n;
163163
});
164164
} else {
165-
if (category_map.constructor == Array) {
166-
ids = category_map;
167-
} else {
168-
ids = category_map[category_val];
169-
}
165+
ids = category_map.constructor == Array ? category_map : category_map[category_val];
170166
}
171167

172168
if (ids) r = r.concat(ids);

0 commit comments

Comments
 (0)