Commit 2972852db7f50aee1ed5a3417ee802dbcb37232f
Fix FilterView
- FilterView is fixed to filter annotations and show them. Also filterTags is
implemented. Not tested though.
| | | | | 234 | }); | 234 | }); |
|---|
| 235 | | 235 | |
|---|
| 236 | var FilterView = Backbone.View.extend({ | 236 | var FilterView = Backbone.View.extend({ |
|---|
| 237 | el: $("#filter-div"), | | el: $("#filter-div"), |
|---|
| | 237 | el: $('#filter-div'), | | 238 | events: { | 238 | events: { |
|---|
| 239 | "click #filter-user-div input": "filterSweet", | | "click #filter-user-div input": "filterSweet", |
|---|
| 240 | "click #filter-tags-div input": "filterSweet" | | "click #filter-tags-div input": "filterSweet" |
|---|
| | 239 | 'click #filter-user-div input': 'filter', | | | 240 | 'click #filter-tags-div input': 'filter' |
|---|
| 241 | }, | 241 | }, |
|---|
| 242 | initialize: function() { | 242 | initialize: function() { |
|---|
| | 243 | this.filter_users_template = _.template($('#filter-users').html()); |
|---|
| | 244 | this.filter_tags_template = _.template($('#filter-tags').html()); |
|---|
| 243 | this.render(); | 245 | this.render(); |
|---|
| 244 | }, | 246 | }, |
|---|
| 245 | render: function() { | 247 | render: function() { |
|---|
| 246 | // console.log(this.collection); | | // console.log(this.collection); |
|---|
| 247 | var template = _.template($("#filter-users").html()); | | var template = _.template($("#filter-users").html()); |
|---|
| 248 | var tags_template = _.template($("#filter-tags").html()); | | var tags_template = _.template($("#filter-tags").html()); |
|---|
| | 248 | //console.log(this.collection); | | 249 | // pluck uniq authors of sweets | 249 | // pluck uniq authors of sweets |
|---|
| 250 | | | |
|---|
| 251 | var authors = _.uniq(this.collection.pluck('who')); | 250 | var authors = _.uniq(this.collection.pluck('who')); |
|---|
| | 251 | // render them as filter controls |
|---|
| 252 | _.each(authors, function(author) { | 252 | _.each(authors, function(author) { |
|---|
| 253 | $("#filter-user-div").append(template({who: author})); | | $("#filter-user-div").append(template({who: author})); |
|---|
| | 253 | $('#filter-user-div').append(this.filter_users_template({ | | | 254 | who: author |
|---|
| | 255 | })); |
|---|
| | 256 | }, this); |
|---|
| | 257 | |
|---|
| | 258 | // pluck uniq tags of sweets |
|---|
| | 259 | var tags = _.chain(this.collection.pluck('how')).pluck('tags').uniq(). |
|---|
| | 260 | value(); |
|---|
| | 261 | // render them as filter controls |
|---|
| | 262 | _.each(tags, function(tag) { |
|---|
| | 263 | if(tag) { |
|---|
| | 264 | $('#filter-tags-div').append(this.filter_tags_template({ |
|---|
| | 265 | tag: tag |
|---|
| | 266 | })); |
|---|
| | 267 | } |
|---|
| | 268 | }, this); |
|---|
| | 269 | |
|---|
| | 270 | //this.delegateEvents(); |
|---|
| | 271 | }, |
|---|
| | 272 | filter: function(event) { |
|---|
| | 273 | // get id of div - parent to parent to the clicked input |
|---|
| | 274 | var target_id = $(event.currentTarget).parent().parent().attr('id'); |
|---|
| | 275 | // find out user/tag div |
|---|
| | 276 | var which = target_id.split('-')[1]; |
|---|
| | 277 | |
|---|
| | 278 | var selected = []; |
|---|
| | 279 | $('#'+target_id + ' input:checked').each(function() { |
|---|
| | 280 | selected.push($(this).attr('name')); |
|---|
| 254 | }); | 281 | }); |
|---|
| 255 | this.collection.each(function(model) { | | this.collection.each(function(model) { |
|---|
| 256 | if(model.get('how').tags) { | | if(model.get('how').tags) { |
|---|
| 257 | _.each(model.get('how').tags, function(tag) { | | _.each(model.get('how').tags, function(tag) { |
|---|
| 258 | $("#filter-tags-div").append(tags_template({tag:tag})); | | $("#filter-tags-div").append(tags_template({tag:tag})); |
|---|
| 259 | }); | | }); |
|---|
| | 282 | | | | 283 | if(which === 'user') { |
|---|
| | 284 | this.filterUsers(selected); |
|---|
| | 285 | } |
|---|
| | 286 | else if(which === 'tags') { |
|---|
| | 287 | this.filterTags(selected); |
|---|
| | 288 | } |
|---|
| | 289 | }, |
|---|
| | 290 | filterUsers: function(users) { |
|---|
| | 291 | if(!users.length) { |
|---|
| | 292 | return; |
|---|
| | 293 | } |
|---|
| | 294 | var filtered_swts = this.collection.filter(function(model) { |
|---|
| | 295 | if(_.indexOf(users, model.get('who')) > -1) { |
|---|
| | 296 | return model; |
|---|
| 260 | } | 297 | } |
|---|
| 261 | }); | 298 | }); |
|---|
| 262 | // this.delegateEvents(); | | // this.delegateEvents(); |
|---|
| | 299 | if(filtered_swts.length) { | | | 300 | anno.removeAll(); |
|---|
| | 301 | _.each(filtered_swts, function(swt) { |
|---|
| | 302 | anno.addAnnotation(swt.get('how')); |
|---|
| | 303 | }); |
|---|
| | 304 | } |
|---|
| 263 | }, | 305 | }, |
|---|
| | 306 | filterTags: function(tags) { |
|---|
| | 307 | if(!tags.length) { |
|---|
| | 308 | return; |
|---|
| | 309 | } |
|---|
| | 310 | var filtered_swts = this.collection.filter(function(model) { |
|---|
| | 311 | _.each(model.get('how').tags, function(tag) { |
|---|
| | 312 | if(_.indexOf(tags, tag) > -1) { |
|---|
| | 313 | return model; |
|---|
| | 314 | } |
|---|
| | 315 | }); |
|---|
| | 316 | }); |
|---|
| | 317 | if(filtered_swts.length) { |
|---|
| | 318 | anno.removeAll(); |
|---|
| | 319 | _.each(filtered_swts, function(swt) { |
|---|
| | 320 | anno.addAnnotation(swt.get('how')); |
|---|
| | 321 | }); |
|---|
| | 322 | } |
|---|
| | 323 | }, |
|---|
| 264 | filterSweet: function(event) { | 324 | filterSweet: function(event) { |
|---|
| 265 | if(!event.currentTarget.checked) { | | if(!event.currentTarget.checked) { |
|---|
| | 325 | /*if(!event.currentTarget.checked) { | | 266 | var results = this.collection.filter(function(model) { | 326 | var results = this.collection.filter(function(model) { |
|---|
| 267 | if(model.get('who') != event.currentTarget.name) | 327 | if(model.get('who') != event.currentTarget.name) |
|---|
| 268 | return model; | 328 | return model; |
|---|
| … | | … | |
|---|
| 350 | // anno.removeAll(); | 350 | // anno.removeAll(); |
|---|
| 351 | // } | 351 | // } |
|---|
| 352 | // swtr.annoView.collection = results; | 352 | // swtr.annoView.collection = results; |
|---|
| 353 | // swtr.annoView.renderWith(); | | // swtr.annoView.renderWith(); |
|---|
| | 353 | // swtr.annoView.renderWith();*/ | | 354 | } | 354 | } |
|---|
| 355 | }); | 355 | }); |
|---|
| 356 | | 356 | |
|---|
| … | | … | |
|---|
| 649 | success: function(data) { | 649 | success: function(data) { |
|---|
| 650 | if(_.isArray(data)) { | 650 | if(_.isArray(data)) { |
|---|
| 651 | swtr.sweets.add(data); | 651 | swtr.sweets.add(data); |
|---|
| 652 | new FilterView({collection: swtr.sweets}); | | new FilterView({collection: swtr.sweets}); |
|---|
| | 652 | swtr.filterview = new FilterView({collection: swtr.sweets}); | | 653 | // _.each(data, function(swt) { | 653 | // _.each(data, function(swt) { |
|---|
| 654 | // swt.how['editable'] = false; | 654 | // swt.how['editable'] = false; |
|---|
| 655 | // swt.how.text = swtr.annoView.createPopupText(swt.how); | 655 | // swt.how.text = swtr.annoView.createPopupText(swt.how); |
|---|
