Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
  • 3 commits
  • 4 files changed
  • 0 comments
  • 1 contributor
Mar 29, 2012
Roberto Inetti Added the option Match to display only those options that matches
Signed-off-by: Roberto Inetti <copertus@gmail.com>
267441d
Mar 30, 2012
Roberto Inetti test
Signed-off-by: Roberto Inetti <copertus@gmail.com>
447cb61
Roberto Inetti New helper methods
1-Method to get numbers of options available
2-Method to get number of options already selected
3-Option to hide the search bar

Signed-off-by: Roberto Inetti <copertus@gmail.com>
f45d407

Showing 4 changed files with 60 additions and 10 deletions. Show diff stats Hide diff stats

  1. +2 0  index.html
  2. +53 6 js/filtrify.js
  3. +4 3 match.html
  4. +1 1  movies.html
2  index.html
@@ -108,6 +108,8 @@ <h2 id="demos">Demos</h2>
108 108 <li><a href="block.html">Block "data" attributes from being added as categories</a></li>
109 109 <li><a href="lazyload.html">Load images with Lazy Load</a></li>
110 110 <li><a href="jpages.html">Add pagination with jPages</a></li>
  111 + <li><a href="match.html">Only shows results when matches</a></li>
  112 +
111 113 </ul>
112 114
113 115 <h2 id="style">Style</h2>
59 js/filtrify.js
@@ -23,6 +23,8 @@
23 23 this._query = {};
24 24 this._match = [];
25 25 this._mismatch = [];
  26 + this.totals=[];//saves the # of available options/panel
  27 + this.selectedOptions=[];//saves the # of options selected/panel
26 28 this._z = 9999;
27 29
28 30 this._bind = function ( fn, me ) {
@@ -75,7 +77,6 @@
75 77 };
76 78
77 79 this._matrix.push( data );
78   -
79 80 }, this ) );
80 81 };
81 82
@@ -105,9 +106,12 @@
105 106 html = "<li class='ft-field'>" +
106 107 "<span class='ft-label'>" + f + "</span>" +
107 108 "<div class='ft-panel ft-hidden'>" +
108   - "<ul class='ft-selected' style='display:none;'></ul>" +
109   - "<fieldset class='ft-search'><input type='text' placeholder='Search' /></fieldset>" +
110   - "<ul class='ft-tags'>";
  109 + "<ul class='ft-selected' style='display:none;'></ul>";
  110 + if(this.options.search){
  111 + html+="<fieldset class='ft-search'><input type='text' placeholder='Search' /></fieldset>";
  112 + }
  113 +
  114 + html+="<ul class='ft-tags'>";
111 115
112 116 for ( tag in this._fields[f] ) {
113 117 tags.push( tag );
@@ -307,12 +311,18 @@
307 311
308 312 this.hideMismatch( f );
309 313 };
  314 + Filtrify.prototype.handleSearch=function(f){
  315 + //console.log($(f).find('.ft-active').children.length);
  316 + //console.log($('.ft-label ft-opened ft-active').children().length);
  317 + //var obj=$(f).find('.ft-active');
  318 + //console.log(obj);
  319 + //console.log($(obj).siblings().find(".ft-tags").children().attr("display: block").length);
  320 + }
310 321
311 322 Filtrify.prototype.showResults = function ( f, txt ) {
312 323 var results = 0;
313 324
314 325 this.hideMismatch( f );
315   -
316 326 this._menu[f].tags
317 327 .children()
318 328 .not(this._menu[f].active)
@@ -343,6 +353,7 @@
343 353 if ( this.options.close ) {
344 354 this.closePanel( f );
345 355 };
  356 + this.handleSearch(f);
346 357 };
347 358
348 359 Filtrify.prototype.updateQueryTags = function ( f, tag ) {
@@ -369,7 +380,13 @@
369 380 };
370 381
371 382 Filtrify.prototype.addToActive = function ( f ) {
  383 + var selected=this.getNumSelected(f)
  384 + this.setNumSelected(f,++selected);
  385 + var childs=this.getNumChilds(f);
  386 + childs--;
  387 + this.setNumChilds(childs)
372 388 this._menu[f].active = this._menu[f].active.add( this._menu[f].highlight );
  389 +
373 390 };
374 391
375 392 Filtrify.prototype.unselect = function ( f, tag ) {
@@ -470,22 +487,52 @@
470 487
471 488 Filtrify.prototype.rewriteFields = function () {
472 489 var field;
  490 + var total_count= new Array();
473 491 for ( field in this._fields ) {
  492 + this._menu[field].count=0;
474 493 this._menu[field].tags
475 494 .children()
476 495 .each( this._bind( function( index, element ) {
  496 +
477 497 var tag = ( element.textContent || element.innerText ),
478 498 count = this._fields[field][tag] === undefined ? 0 : this._fields[field][tag];
479 499 if(this.options.match && count<=0 ){
480   - $(element).hide();
  500 + $(element).hide();
  501 +
481 502 }else{
482 503 $(element).show();
483 504 element.setAttribute("data-count", count );
  505 + this._menu[field].count++;
484 506 }
485 507 }, this ) );
  508 +
  509 + this.setNumChilds(field,this._menu[field].count-this.getNumSelected(field));
  510 + var str = "available options on "+field +"'s panel = " +this.getNumChilds(field)+",";
  511 + str+=String(this.getNumSelected(field)) +" options have been selected on this panel";
  512 + console.log(str);
486 513 };
487 514 };
488 515
  516 + //returns the number of options available on a menu
  517 + Filtrify.prototype.getNumChilds=function(field){
  518 + return this.totals[field];
  519 +
  520 + }
  521 + Filtrify.prototype.setNumChilds=function(field,value){
  522 + this.totals[field]=value;
  523 + }
  524 + //returns how many optios has being selected on a menu
  525 + Filtrify.prototype.getNumSelected=function(field){
  526 + if(this.selectedOptions[field]===undefined){
  527 + return 0;
  528 + }else{
  529 + return this.selectedOptions[field]
  530 + };
  531 +
  532 + }
  533 + Filtrify.prototype.setNumSelected=function(field,value){
  534 + this.selectedOptions[field]=value;
  535 + }
489 536 Filtrify.prototype.resetCachedMatch = function () {
490 537 this._match = [];
491 538 this._mismatch = [];
7 match.html
@@ -25,7 +25,7 @@
25 25
26 26 $(function() {
27 27
28   - $.filtrify("container", "placeHolder",{match:true});
  28 + $.filtrify("container", "placeHolder",{match:true,search:true});
29 29
30 30 });
31 31
@@ -33,7 +33,8 @@
33 33
34 34 </head>
35 35 <body>
36   -<!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</span><![endif]-->
  36 +[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</span><![endif]-->
  37 +
37 38
38 39 <div id="header" role="banner">
39 40 <h1><a href="http://luis-almeida.github.com/filtrify/">filtrify</a></h1>
@@ -43,7 +44,7 @@
43 44 <a href="https://twitter.com/lmgalmeida" class="twitter-follow-button" data-show-count="false">Follow @lmgalmeida</a>
44 45 <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://luis-almeida.github.com/filtrify/" data-text="Filtrify - Beautiful advanced tag filtering with HTML5 and jQuery" data-via="lmgalmeida" data-related="lmgalmeida">Tweet</a>
45 46 <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fluis-almeida.github.com%2Ffiltrify%2F&amp;send=false&amp;layout=button_count&amp;width=90&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90px; height:21px;" allowTransparency="true"></iframe>
46   -<!--<div class="g-plusone" data-size="medium" data-href="http://luis-almeida.github.com/filtrify/"></div>-->
  47 +<div class="g-plusone" data-size="medium" data-href="http://luis-almeida.github.com/filtrify/"></div>
47 48
48 49 </div>
49 50
2  movies.html
@@ -25,7 +25,7 @@
25 25
26 26 $(function() {
27 27
28   - $.filtrify("container", "placeHolder",{match:true});
  28 + $.filtrify("container", "placeHolder");
29 29
30 30 });
31 31

No commit comments for this range

Something went wrong with that request. Please try again.