View file assets/js/qs.slider.js

File size: 13.3Kb
/*! Cloud Pricing Slider | (c) 1014 QsThemes.com
// Licensed Under codecanyon license aggrement. // http://codecanyon.net/licensess
*/

(function($) {

	$.fn.extend({
	qsSlider: function(options) {
		
		var defaults = {
			//Set Your own Pricing if want use in whmcs pricing should be must same as per whmcs configuration option pricing
			PriceBase	: '45.12',		// base price should be as per this calcution (1 CPU Core + 256MB RAM + 50GB HDD)
			PriceCPU	: '15.00',		// per month per unit
			PriceRAM	: '20.48',		// per month per 1024 MB
			PriceHDD 	: '5.00',		// per month per 10 GB
			
			
			//Maximum Slider values
			MaxCPU	: '16',		// Maximum CPU
			MaxRAM	: '14',		// Maximum RAM //It should be + 2 like if you want maximum RAM 16 GB then make it 18 etc..		
			MaxHDD	: '50',		// Maximum HDD //Its for 500 GB HDD Storage maximum, if want to change it make 100 for 1000 GB, 150 For 1500GB and so on..
			
			//Set BuyNow Link
			BuyNowLink	: '',
			
			//IDs get from WHMCS configuration Options
			cpuID	: '',
			ramID	: '',
			hddID	: '',
			cpID	: '',
			
			//Contorl Panel value configuration options IDs
			cpYesID	: '',
			cpNoID	: '',
			
			cPanelPrice	: '10',
			
			//Disocunt on annually billing i.e. 0.10 for 10% so no..
			discount	: '0.0',
			
			//Tooltips Contents
			TipsXS	: '',
			TipsS	: '',
			TipsM	: '',
			TipsL	: '',
			TipsXL	: '',
			
			//Default Preset Configuration
			defaultPreset : 's'
		};
	  
		var o = $.extend(defaults, options);
		
		this.each(function(){
		
			$(function() {
				// Create the qsSlider controller class, so its specs can be used
				// to create the controls.
				var ISpec = new qsSlider; 

				$("div#qsSlider #QsControls div.slider").each( 
					function(i, control) {
						var id = $(control).attr('id');

						$(control).slider({
							orientation: "horizontal",
							range:       "min",
							min:         parseFloat(ISpec.specification[id].min),
							max:         parseFloat(ISpec.specification[id].max),
							step:        parseFloat(ISpec.specification[id].step),
							slide: function(event, ui) {
						
								if (id == 'cpu') {
									ISpec.setCPU( ui.value );
								
								} else if (id == 'ram') {
									ISpec.setRAM( ui.value );
								
								} else if (id == 'hdd') {
									ISpec.setHDD( ui.value );
								}
								ISpec.updatePrice();
							}
						});

					}
				);

				// For useability add a click link for the cPanel addon.
				$("div#qsSlider #panelstext").on('click', function(e) {
					e.preventDefault();
					$("div#qsSlider #panel").slider("option", "value", "1");
				});

				// Add the yes/no selector switch.
				$("div#qsSlider #panel").slider({
					orientation: "vertical",
					min:         parseFloat(0),
					max:         parseFloat(1),
					step:        parseFloat(1),
					change: function(event, ui) {
						ISpec.updatePrice();
					}
				});

				// For useability add a click link to the offertext.
				$("div#qsSlider #offerstext").on('click', function(e) {
					e.preventDefault();
					$("div#qsSlider #period").slider("option", "value", "1");
				});

				// Add the month/year selector switch.
				$("div#qsSlider #period").slider({
					orientation: "vertical",
					min:         parseFloat(0),
					max:         parseFloat(1),
					step:        parseFloat(1),
					change: function(event, ui) {
						ISpec.updatePrice();
					}
				});

				// Add the preset buttons
				var presetNames    = new Array;
					presetNames[0] = "xs";
					presetNames[1] = "s";
					presetNames[2] = "m";
					presetNames[3] = "l";
					presetNames[4] = "xl";
	
				//Add tootip contents
				var presetTips   = new Array;
					presetTips[0] = o.TipsXS
					presetTips[1] = o.TipsS
					presetTips[2] = o.TipsM
					presetTips[3] = o.TipsL
					presetTips[4] = o.TipsXL

				for (var i = 0; i < presetNames.length; i++) {
					var id = presetNames[i]
					var presetClass = "product preset" + id.toLowerCase(); 

					$("div#presets").append(
						$('<div>').addClass(presetClass).append(
							$("<button type='button' class='btn btn-sm'>").text(id).on('click', function(e) {
									e.preventDefault();
									ISpec.selectPreset( $(this).text() );
								}
							)
							.hover(
								function(e) {
								// Find the tip for this preset 
									var toolTip;
									var presetText = $(this).text();
										for (var j = 0; j < presetNames.length; j++) { 
									if (presetNames[j] == presetText) {
										toolTip = presetTips[j];
									}	
								}

								if ( toolTip != undefined
										&& toolTip != "") {
										var offsetTop = $(this).offset().top - $("div#qsSlider").offset().top;
										$("div#tooltip div.text").text(toolTip);
										$("div#tooltip").fadeIn();
									}
								},
								function(e) {
									$("div#tooltip").hide();
								}
							)
						)
					);
				};

				// Preset the slider to default
				ISpec.selectPreset(o.defaultPreset);
			});


			var qsSlider = function() {

				// Tweak slider steps
				var cpuslider = {
					min:     1,                     // Slider min value
					max:     o.MaxCPU,              // Slider max value
					step:    1                      // Slider increments
				};

				var ramslider = {
					min:     1,                     // Slider min value
					max:     o.MaxRAM,              // Slider max value 
					step:    1                      // Slider increments
				};

				var hddslider = {
					min:     1,                     // Slider min value
					max:     o.MaxHDD,              // Slider max value
					step:    1                      // Slider increments
				};

				// Presets buttons - numbers reference the number of slider steps.
				var presetspec = {
					xs:  { cpu: "1",  ram: "1",  hdd: "1"   },
					s:   { cpu: "1",  ram: "2",  hdd: "1"   },
					m:   { cpu: "4",  ram: "4",  hdd: "30"  }, 
					l:   { cpu: "12",  ram: "6", hdd: "10"  },
					xl:  { cpu: "8",  ram: "14",  hdd: "30" }
				};
   
				// Exported spec.
				this.specification = { 
					cpu: cpuslider,
					ram: ramslider,
					hdd: hddslider
				};
	
				// Getting priceing
				var pricespec = {
					baseprice:  o.PriceBase,
					cpu_ghz_mo: o.PriceCPU,
					ram_gb_mo:  o.PriceRAM,
					hdd_gb_mo:  o.PriceHDD
				};


				// Functions //

				// Sets the number of CPU.
				this.setCPU = function(sliderStep) {
	
					var units ='CORE';
					var sTotal = sliderStep + " " + units;
		
					// And the Text box.
					$("div.values div#cpuvalue").text(sTotal);
		
					// And update the slider (if we were called by preset, this will actually change the slider, if we're called by the slider nothing will happen.
					$("div#qsSlider div#QsControls div#cpu").slider("value", sliderStep);
				}


				// Sets the number of RAM.   
				this.setRAM = function(sliderStep) {

					// And the Text box. Now there's a little specialness here, as we want
					// bump the first 2 steps to a named value, then subtract 2 from the
					// rest. Ie. 256 / 512 / 1 / 2 ...
					var value = sliderStep - 2;
					if (value == -1) {
						value = 256;
					} else if (value == 0) {
						value = 512;
					}
					var units = (value < 256) ? 'GB' : 'MB';		
					var sTotal = value + " " + units;
		
					// And the indicator text.
					$("div.values div#ramvalue").text(sTotal);

					// And update the slider (if we were called by preset, this will actually change the slider, if we're called by the slider nothing will happen.
					$("div#qsSlider div#QsControls div#ram").slider("value", sliderStep);
				}

				// Sets the number of GB HDD Storage. 
				this.setHDD = function(sliderStep) {
	
					var units ='GB';
		
					// And the Text box.
					var value = (sliderStep * 10) + 0;
					var sTotal = value + " " + units;
		
					$("div.values div#hddvalue").text(sTotal);

					// And update the slider (if we were called by preset, this will actually change the slider, if we're called by the slider nothing will happen.
					$("div#qsSlider div#QsControls div#hdd").slider("value", parseFloat(sliderStep) );
				}

   
				this.selectPreset = function(presetName) {
					var presetData = $(presetspec).attr(presetName);
					this.setCPU(presetData.cpu);
					this.setRAM(presetData.ram);
					this.setHDD(presetData.hdd);
					this.updatePrice();
				};


				// Updates the price container with the current price and updates the "buynow" button CTA URL.  Also fires the check to see if 
				// the sliders are at a preset value, and updates the preset button state if it is.
     
				this.updatePrice = function() {
					var price = calculatePrice();
					$("div#QsPrice span#doller").text(price.doller);
					$("div#QsPrice span#cents").text("." + price.cents);

					$("div#QsPrice div#btn-buynow").on('click', function (e) {
						e.preventDefault();
						window.location = buyURL();
						}
					);

					checkValueForPreset();
				};


				// Work out the price.

				var calculatePrice = function() {
					var price = parseFloat(pricespec.baseprice);
					var cpu = parseInt( $("div.values div#cpuvalue").text() );
					var ram = parseInt( $("div.values div#ramvalue").text() );
					var hdd = parseInt( $("div.values div#hddvalue").text() );
					var panel_is_nocp = parseInt( $("div#panelselector div#panel").slider("value") );
					var period_is_year = parseInt( $("div#periodselector div#period").slider("value") );

					// Calculate the CPU extra cost - CPU - the inital 1GB
					var price1GHz = parseFloat(pricespec.cpu_ghz_mo); 
					if (cpu == 1) {
						price += 0;
					} else {
						price += ( price1GHz * cpu ) - price1GHz;
					}

					// Calculate the RAM extra cost - RAM - the initial 256MB
					var price256 = parseFloat(pricespec.ram_gb_mo) / 4;
					if (ram == 256) {
						price += 0;
					} else if (ram == 512) {
						price += ( parseFloat(pricespec.ram_gb_mo) / 2 ) - price256;
					} else {
						price += ( parseFloat(pricespec.ram_gb_mo) * ram ) - price256;
					}

					// Calculate the HDD - disc space minus the inital 50GB
					var price10GB = parseFloat(pricespec.hdd_gb_mo);  
					if (hdd == 50) {
						price += 0;
					} else {
						price += ( price10GB * (hdd / 10) ) - (price10GB * 5);
					}
		
					// Check the price, if its a cpanel selected
					if (panel_is_nocp) {
						price -= o.cPanelPrice; 
					}

					// Check the period, if its a year then multiply by 12
					if (period_is_year) {
						price *= 12; 
					}
		
					// Discount on annually billing?
					// do that too.
					if (period_is_year) {
						price = price - ( price * o.discount );
						price = price = ( price / 12 );
					}
		
					// now split the price and return an object.
					var priceParts = price.toFixed(2).toString().split(".");
					return {
						"doller": priceParts[0],
						"cents":  priceParts[1],
						"price":  price
					}
				};
    
				// Let's work for buy now url values
				var buyURL = function() {
		
					// Getting RAM value numaric only
					var ramAmount = $("div.values div#ramvalue").text().replace(/[^0-9]/gi, '');
		
					// Calculation for RAM to convert GB to MB for > then 512MB
					if (ramAmount < 256) {
					ramAmount *= 1024;
					} else {
						ramAmount
					}
		
					// Getting CPU and HDD values numaric only 
					var cpuAmount = $("div.values div#cpuvalue").text().replace(/[^0-9]/gi, '');
					var hddSize = $("div.values div#hddvalue").text().replace(/[^0-9]/gi, '');
		
					// Returns the URL that will set the cart	

					// URL can use any CURL options // example is for whmcs cart/order from	
					var bterms = ( $("#qsSlider #period").slider("value") ) ? "annually" : "monthly" // Biling Terms Annually or Monthly
					var nocp = ( $("#qsSlider #panel").slider("value") ) ? o.cpYesID : o.cpNoID  // ids are only for example, please collect them from your whmcs Configuration options
		
					// &configoption[id]  are only for example, please collect them from your whmcs admin >> Configuration options
					var url = o.BuyNowLink
						+ o.cpuID  + cpuAmount 
						+ o.ramID  + ramAmount
						+ o.hddID  + hddSize
						+ o.cpID  + nocp
						+ "&billingcycle=" + bterms;
					return url;
				};

 
				// Checks the position of the sliders to see if they are at a preset. if they are, then sets that preset button selected. 
				var checkValueForPreset = function() {
					// Remove the classes first. 
					$("div#presets div.product .btn").removeClass('btn-primary');        
					// If one is a preset... make it selected.
					for (i in presetspec) {
						var presetData = presetspec[i];
						var sliderCPU  = $("div#QsControls div#cpu").slider("value");
						var sliderRAM  = $("div#QsControls div#ram").slider("value");
						var sliderHDD  = $("div#QsControls div#hdd").slider("value");
						if ( presetData.cpu == sliderCPU
							&& presetData.ram == sliderRAM
							&& presetData.hdd == sliderHDD ) {
							var presetClass = "preset" + i.toLowerCase();
							$("div#presets div.product .btn").removeClass('btn-primary');           
							$("div#presets div."+presetClass+" .btn").addClass('btn-primary');
						} 
					}
				};
			};
		});
			
			// maintain chainability
			return this;
		}
	});

	$.fn.extend({
		qsSlider: $.fn.qsSlider
	});
  
})(jQuery);