From 2645fc3abc020e7cecff214b3bcfad5dc7fa0d7d Mon Sep 17 00:00:00 2001
From: Swapnil <swapnil@joshsoftware.com>
Date: Mon, 7 Apr 2014 20:53:25 +0530
Subject: [PATCH] added a new call back after_render_record, updated examples
 and readme

---
 README.md                      |  6 ++++++
 examples/assets/css/stream.css |  1 -
 examples/assets/css/style.css  | 36 ++++++++++++++++++++++++++++++++++
 examples/filterjs.html         | 17 ++++++++++------
 examples/filterjs.js           | 16 ++++++++++++++-
 examples/simple_filter.js      |  1 +
 filter.js                      |  3 +++
 7 files changed, 72 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index 7190e15..64b6759 100644
--- a/README.md
+++ b/README.md
@@ -117,6 +117,12 @@ Define callback in settings. Callbacks executes after each filtering events.(In
         after_add: function(data){
           //Call after adding data to filter.
         },
+        after_render_record: function(record) {
+          //Call after each record is rendered
+          if(record.amount > 500) {
+            $('#fjs_'+record.id+' .fs_price').addClass('red'); 
+          }
+        }
     };
 
 
diff --git a/examples/assets/css/stream.css b/examples/assets/css/stream.css
index 6dcf8eb..441eddf 100644
--- a/examples/assets/css/stream.css
+++ b/examples/assets/css/stream.css
@@ -241,4 +241,3 @@ select:focus, textarea:focus, input:focus{
 .criteria select{
   margin-left: 10px;
 }
-
diff --git a/examples/assets/css/style.css b/examples/assets/css/style.css
index 7512d1b..141458b 100644
--- a/examples/assets/css/style.css
+++ b/examples/assets/css/style.css
@@ -162,3 +162,39 @@ h1, h2, h3, h4, h5, h6, p, ol, ul {
 h2{
   text-align: center;
 }
+
+.fs_price.black{
+  color: black;
+}
+.fs_price.green{
+  color: green;
+}
+.fs_price.blue{
+  color: blue;
+}
+.fs_price.red{
+  color: red;
+}
+.price_status{
+  font-size: 90%;
+  font-weight: normal;
+  margin-right: 5px;
+  padding: 1px 0 3px;
+  margin-top: 2px;
+  width: 19px !important;
+  height: 12px;
+  text-decoration: none;
+  float: right;
+}
+.price_status.black{  
+  background-color: black;
+}
+.price_status.blue{  
+  background-color: blue;
+}
+.price_status.green{  
+  background-color: green;
+}
+.price_status.red{  
+  background-color: red;
+}
diff --git a/examples/filterjs.html b/examples/filterjs.html
index 33f31a8..271ef30 100644
--- a/examples/filterjs.html
+++ b/examples/filterjs.html
@@ -214,29 +214,34 @@ <h3>Filter by Price</h3>
                     <span style="display: inline;">All</span>
                   </li>
                   <li>
-                    <input checked="checked" value="0-50" 
+                    <input checked="checked" value="0-49" 
 type="checkbox">
-                    &nbsp;&nbsp;&lt;&nbsp; $50
+                    &nbsp;&nbsp;&lt;&nbsp; $49
+                    <span class='price_status black' style="display: inline;"></span>
                   </li>
                   <li>
                     <input checked="checked" value="50-100" 
 type="checkbox">
                     &nbsp;&nbsp;$50 to $100
+                    <span class='price_status blue' style="display: inline;"></span>
                   </li>
                   <li>
-                    <input checked="checked" value="100-200" 
+                    <input checked="checked" value="100-199" 
 type="checkbox">
-                    &nbsp;&nbsp;$100 to $200
+                    &nbsp;&nbsp;$100 to $199
+                    <span class='price_status blue' style="display: inline;"></span>
                   </li>
                   <li>
-                    <input checked="checked" value="200-500" 
+                    <input checked="checked" value="200-499" 
 type="checkbox">
-                    &nbsp;&nbsp;$200 to $500
+                    &nbsp;&nbsp;$200 to $499
+                    <span class='price_status green' style="display: inline;"></span>
                   </li>
                   <li>
                     <input checked="checked" value="500-above" 
 type="checkbox">
                     &nbsp;&nbsp;$500 and above
+                    <span class='price_status red' style="display: inline;"></span>
                   </li>
                 </ul>
               </div>
diff --git a/examples/filterjs.js b/examples/filterjs.js
index 680c9c4..63e2ec7 100644
--- a/examples/filterjs.js
+++ b/examples/filterjs.js
@@ -93,7 +93,21 @@ function filterInit(template_type){
       $('.result_count').text('Found : ' + result.length);
       $('a[data-fjs]').tsort('.fs_head:visible', {order: 'asc'});
       //console.log(result);
-    }
+    },
+    after_render_record: function(record) {
+      if(record.amount < 50) {  
+        $('#fjs_'+record.id+' .fs_price').addClass('black'); 
+      }
+      if(record.amount >= 50 && record.amount < 200) {  
+        $('#fjs_'+record.id+' .fs_price').addClass('blue'); 
+      }
+      if(record.amount >= 200 && record.amount < 500) {  
+        $('#fjs_'+record.id+' .fs_price').addClass('green'); 
+      }
+      if(record.amount >= 500) {  
+        $('#fjs_'+record.id+' .fs_price').addClass('red'); 
+      }
+    }// after_render_record ends here
             
   };
 
diff --git a/examples/simple_filter.js b/examples/simple_filter.js
index 775cdcd..d44b76b 100644
--- a/examples/simple_filter.js
+++ b/examples/simple_filter.js
@@ -34,6 +34,7 @@ function filterInit() {
     },
     search: {input: '#search_box' },
     and_filter_on: true,
+    callbacks: {}, // define call backs here, if needed
     id_field: 'id' //Default is id. This is only for usecase
   };
 
diff --git a/filter.js b/filter.js
index e1a2e2c..345d51e 100644
--- a/filter.js
+++ b/filter.js
@@ -92,6 +92,9 @@
         el = $(this.view(record));
         el.attr({id: this.root + '_' + record[this.id_field], 'data-fjs': true});
         el = $container.append(el);
+
+        // Perform operations needed after rendering each record
+        this.execCallBack('after_render_record', record);
       }
     },