Commit 2972852db7f50aee1ed5a3417ee802dbcb37232f
- Diff rendering mode:
- inline
- side by side
swtr/static/js/swtmaker.js
(77 / 17)
| 234 | 234 | }); | |
| 235 | 235 | ||
| 236 | 236 | var FilterView = Backbone.View.extend({ | |
| 237 | el: $("#filter-div"), | ||
| 237 | el: $('#filter-div'), | ||
| 238 | 238 | events: { | |
| 239 | "click #filter-user-div input": "filterSweet", | ||
| 240 | "click #filter-tags-div input": "filterSweet" | ||
| 239 | 'click #filter-user-div input': 'filter', | ||
| 240 | 'click #filter-tags-div input': 'filter' | ||
| 241 | 241 | }, | |
| 242 | 242 | initialize: function() { | |
| 243 | this.filter_users_template = _.template($('#filter-users').html()); | ||
| 244 | this.filter_tags_template = _.template($('#filter-tags').html()); | ||
| 243 | 245 | this.render(); | |
| 244 | 246 | }, | |
| 245 | 247 | render: function() { | |
| 246 | // console.log(this.collection); | ||
| 247 | var template = _.template($("#filter-users").html()); | ||
| 248 | var tags_template = _.template($("#filter-tags").html()); | ||
| 248 | //console.log(this.collection); | ||
| 249 | 249 | // pluck uniq authors of sweets | |
| 250 | |||
| 251 | 250 | var authors = _.uniq(this.collection.pluck('who')); | |
| 251 | // render them as filter controls | ||
| 252 | 252 | _.each(authors, function(author) { | |
| 253 | $("#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) { | ||
| 256 | if(model.get('how').tags) { | ||
| 257 | _.each(model.get('how').tags, function(tag) { | ||
| 258 | $("#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(); | ||
| 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 | 324 | filterSweet: function(event) { | |
| 265 | if(!event.currentTarget.checked) { | ||
| 325 | /*if(!event.currentTarget.checked) { | ||
| 266 | 326 | var results = this.collection.filter(function(model) { | |
| 267 | 327 | if(model.get('who') != event.currentTarget.name) | |
| 268 | 328 | return model; | |
| … | … | ||
| 350 | 350 | // anno.removeAll(); | |
| 351 | 351 | // } | |
| 352 | 352 | // swtr.annoView.collection = results; | |
| 353 | // swtr.annoView.renderWith(); | ||
| 353 | // swtr.annoView.renderWith();*/ | ||
| 354 | 354 | } | |
| 355 | 355 | }); | |
| 356 | 356 | ||
| … | … | ||
| 649 | 649 | success: function(data) { | |
| 650 | 650 | if(_.isArray(data)) { | |
| 651 | 651 | swtr.sweets.add(data); | |
| 652 | new FilterView({collection: swtr.sweets}); | ||
| 652 | swtr.filterview = new FilterView({collection: swtr.sweets}); | ||
| 653 | 653 | // _.each(data, function(swt) { | |
| 654 | 654 | // swt.how['editable'] = false; | |
| 655 | 655 | // swt.how.text = swtr.annoView.createPopupText(swt.how); |
