Implemented view types

Author: albingeorge

README.md

@@ -213,6 +213,96 @@ Consider a normal search page with basic layout as shown in the figure below and
 			]
 		}
 	```
+It can also contain multiple templates to include different view types(grid view/list view) like below:
+
+	```
+	,searchResultSetTemp:
+    {
+        "grid":
+            '{{#products}}'+
+                '{{{every_three}}}'+
+                '<div class="product-container {{{nth_item}}}">'+
+                    '<div class="product-item item-template-0 alternative">'+
+                        '<div class="img">'+
+                            '<a href="{{productUrl}}" >'+
+                                '<img src="{{imageUrl}}" alt="" onerror="this.style.display=\'none\';">'+
+                            '</a>'+
+                        '</div>'+
+                        '<div class="name">'+
+                            '<a href="{{productUrl}}" > {{title}}'+
+                            '</a>'+
+                        '</div>'+
+                        '<div class="stars">'+
+                        '</div>'+
+                        '<div class="price">'+
+                            '{{#if_on_sale this}}'+
+                            '<div class="on-sale">Sale</div>'+
+                            '<del class="price2">${{format_price retail_price}}&nbsp;</del>'+
+                            '{{/if_on_sale}}'+
+                            '<span class="hidden">&nbsp;</span> ${{format_price price}}'+
+                        '</div>'+
+                    '</div>'+
+                '</div>'+
+            '{{/products}}',
+        "list":
+            '<ul class="nxt-product-list nxt-view-list clearfix">'
+                +'{{#products}}'
+                +'<li class="nxt-product-item product-item">'
+                    +'<div class="nxt-product-item-wrap">'
+                        +'<div class="nxt-image-wrapper">'
+                            +'<a href="{{productUrl}}" >'
+                                +'<img class="nxt-product-image" width="150" height="150" src="{{imageUrl}}" alt="" onerror="this.style.display=\'none\';">'
+                                +'{{#if_on_sale this}}<div class="on-sale">Sale</div>{{/if_on_sale}}'
+                            +'</a>'
+                        +'</div>'
+                        +'<div class="nxt-product-details">'
+                            +'<div class="nxt-product-col1">'
+                                +'<div class="nxt-product-name">'
+                                    +'<a href="{{productUrl}}" >{{title}}</a>'
+                                +'</div>'
+                                +'<div class="nxt-product-description">After more than 14,000 live fittings with lady golfers, Bridgestone Golf has developed a ladies specific model engineered for moderate swing speeds. The new Lady Precept is designed to produce higher launch ...</div>'
+                            +'</div>'
+                            +'<div class="nxt-product-col2">'
+                                +'{{#if_on_sale this}}<del class="price2">${{format_price retail_price}}&nbsp;</del>{{/if_on_sale}}'
+                                +'<span class="hidden">&nbsp;</span> ${{format_price price}} '
+                                +'<div class="nxt-product-buttons">'
+                                    +'<input type="button" class="nxt-btn-primary" onclick="top.location.href=\'{{productUrl}}\'" value="More Info">'
+                                +'</div>'
+                            +'</div>'
+                        +'</div>'
+                    +'</div>'
+                +'</li>'
+                +'{{/products}}'
+            +'</ul>'
+    }
+	```
+
+In this case, we need to also mention the different view types under 'viewTypes':
+
+```
+,viewTypes: ['grid', 'list']
+```
+
+- **viewTypeContainerSelector** : The selector for the container of view types
+
+```
+,viewTypeContainerSelector: '.view_type_select'
+```
+
+- **viewTypeContainerTemp** : The template which paints the view type to the view type container selector
+
+```
+,viewTypeContainerTemp:
+    '{{#options}}'
+    +'<li class="nxt-{{#if selected}}current{{/if}}">'
+        +'<a title="{{value}} View" class="nxt-{{value}}view-button" unbxdviewtype="{{value}}">'
+            +'<span class="icon-{{value}}view">'
+            +'</span>'
+        +'</a>'
+    +'</li>'
+    +'{{/options}}'
+```
+
 - **searchResultContainer** : The jQuery selector of DOM element to append the HTML generated from **searchResultSetTemp** (*#results_container* in the first image). 
 - **isClickNScroll** : Set it to **true** if you want users to click an element to fetch the next page.
 - **clickNScrollSelector** : The jQuery selector of the DOM element that can be clicked for displaying the next page.(PS. in this case the new results will be appended to the **searchResultContainer**.)

unbxdSearch.js

@@ -605,6 +605,16 @@ var unbxdSearchInit = function(jQuery, Handlebars){
 	,setEvents : function(){
 	  var self = this;
 
+        var changeViewType = function(e) {
+            e.preventDefault();
+            var $t = jQuery(this);
+            var selected = $t.attr("unbxdviewtype");
+
+            self.setViewType(selected);
+
+            self.callResults(self.paintResultSet, true);
+        };
+
 	  var changeSort = function(e){
 	    e.preventDefault();
 	    var $t = jQuery(this),
@@ -901,6 +911,10 @@ var unbxdSearchInit = function(jQuery, Handlebars){
 		    }
 		}, 3000);
 	    }
+
+        if (this.options.searchResultSetTemp !== null && typeof this.options.searchResultSetTemp === 'object') {
+            jQuery(this.options.viewTypeContainerSelector).on("click", '[unbxdviewtype]',changeViewType);
+        }
 	}
 	,addSort : function(field, dir){
 	    this.params.sort[field] = dir || "desc";
@@ -980,6 +994,15 @@ var unbxdSearchInit = function(jQuery, Handlebars){
 	,getPageSize : function(){
 	    return this.params.extra.rows;
 	}
+
+    ,setViewType: function(viewType) {
+        this.params.extra.view = viewType;
+        return this;
+    }
+    ,getViewType: function() {
+        return this.params.extra.view;
+    }
+
 	,addQueryParam : function(key, value, dontOverried){
 	    if(!(key in this.params.extra) || !dontOverried){
 		this.params.extra[key] = value;
@@ -1086,7 +1109,7 @@ var unbxdSearchInit = function(jQuery, Handlebars){
 		}
 	      } else if(key === 'wt' || key === 'format') {
 		nonhistoryPath += '&' + key + '=' + encodeURIComponent(value);
-	      } else if(this.isUsingPagination() && key === 'rows'){
+	      } else if((this.isUsingPagination() && key === 'rows') || key === "view"){
 		url += '&' + key + '=' + encodeURIComponent(value);
 	      } else if(this.defaultParams.hasOwnProperty('extra') && this.defaultParams.extra.hasOwnProperty(key)){
 		nonhistoryPath += '&' + key + '=' + encodeURIComponent(value);
@@ -1182,6 +1205,7 @@ var unbxdSearchInit = function(jQuery, Handlebars){
                     format : "json"
                     ,page : 1
                     ,rows : 12
+                    ,view : this.options.viewTypes[0]
 		}
 	    };
 
@@ -1275,6 +1299,12 @@ var unbxdSearchInit = function(jQuery, Handlebars){
 	    if("start" in obj)
 	      params.extra.page = (parseInt(obj.start) / parseInt(params.extra.rows)) + 1;
 
+        if(!("view" in obj)) {
+            params.extra.view = this.options.viewTypes[0];
+        } else {
+            params.extra.view = obj["view"];
+        }
+
 	    return params;
 	}
 	,paintResultSet: function(obj){
@@ -1384,6 +1414,16 @@ var unbxdSearchInit = function(jQuery, Handlebars){
 
 	    if(this.getClass(this.options.searchResultSetTemp) == 'Function'){
 		this.options.searchResultSetTemp.call(this,obj);
+        } else if (this.options.searchResultSetTemp !== null && typeof this.options.searchResultSetTemp === 'object') {
+            this.paintViewTypes(obj);
+            var currentViewType = this.getViewType();
+            if (!this.compiledResultTemp) {
+                this.compiledResultTemp = {};
+                this.options.viewTypes.forEach(function(val) {
+                    this.compiledResultTemp[val] = Handlebars.compile(this.options.searchResultSetTemp[val]);
+                }.bind(this));
+            }
+            jQuery(this.options.searchResultContainer).html(this.compiledResultTemp[currentViewType](obj.response));
 	    }else{
 		if(!this.compiledResultTemp)
 		    this.compiledResultTemp = Handlebars.compile(this.options.searchResultSetTemp);
@@ -1452,6 +1492,28 @@ var unbxdSearchInit = function(jQuery, Handlebars){
 	  options: pageSizeOptions
 	}));
       }
+
+    ,paintViewTypes: function(obj) {
+        if ("error" in obj || this.options.viewTypeContainerSelector.length <= 0) {
+            return;
+        }
+        if (!this.compiledViewTypesContainerTemp) {
+            this.compiledViewTypesContainerTemp = Handlebars.compile(this.options.viewTypeContainerTemp);
+        }
+        var viewTypeOptions = this.options.viewTypes.map(function(opt) {
+
+            var values = {};
+            values["value"] = opt;
+            values["selected"] = this.getViewType() == opt ? true : false;
+            return values;
+
+            }.bind(this));
+            jQuery(this.options.viewTypeContainerSelector).html(this.compiledViewTypesContainerTemp({
+                options: viewTypeOptions
+            }));
+            return this.getViewType();
+        }
+
       ,paintPagination: function(obj) {
 	if("error" in obj)
 	  return;