Blame view

assets/plugins/pricing-tables/js/main.js 3.05 KB
cf76164e6   Ting Chan   20190709
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
  jQuery(document).ready(function($){
  	//hide the subtle gradient layer (.cd-pricing-list > li::after) when pricing table has been scrolled to the end (mobile version only)
  	checkScrolling($('.cd-pricing-body'));
  	$(window).on('resize', function(){
  		window.requestAnimationFrame(function(){checkScrolling($('.cd-pricing-body'))});
  	});
  	$('.cd-pricing-body').on('scroll', function(){ 
  		var selected = $(this);
  		window.requestAnimationFrame(function(){checkScrolling(selected)});
  	});
  
  	function checkScrolling(tables){
  		tables.each(function(){
  			var table= $(this),
  				totalTableWidth = parseInt(table.children('.cd-pricing-features').width()),
  		 		tableViewport = parseInt(table.width());
  			if( table.scrollLeft() >= totalTableWidth - tableViewport -1 ) {
  				table.parent('li').addClass('is-ended');
  			} else {
  				table.parent('li').removeClass('is-ended');
  			}
  		});
  	}
  
  	//switch from monthly to annual pricing tables
  	bouncy_filter($('.cd-pricing-container'));
  
  	function bouncy_filter(container) {
  		container.each(function(){
  			var pricing_table = $(this);
  			var filter_list_container = pricing_table.children('.cd-pricing-switcher'),
  				filter_radios = filter_list_container.find('input[type="radio"]'),
  				pricing_table_wrapper = pricing_table.find('.cd-pricing-wrapper');
  
  			//store pricing table items
  			var table_elements = {};
  			filter_radios.each(function(){
  				var filter_type = $(this).val();
  				table_elements[filter_type] = pricing_table_wrapper.find('li[data-type="'+filter_type+'"]');
  			});
  
  			//detect input change event
  			filter_radios.on('change', function(event){
  				event.preventDefault();
  				//detect which radio input item was checked
  				var selected_filter = $(event.target).val();
  
  				//give higher z-index to the pricing table items selected by the radio input
  				show_selected_items(table_elements[selected_filter]);
  
  				//rotate each cd-pricing-wrapper 
  				//at the end of the animation hide the not-selected pricing tables and rotate back the .cd-pricing-wrapper
  				
  				if( !Modernizr.cssanimations ) {
  					hide_not_selected_items(table_elements, selected_filter);
  					pricing_table_wrapper.removeClass('is-switched');
  				} else {
  					pricing_table_wrapper.addClass('is-switched').eq(0).one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function() {		
  						hide_not_selected_items(table_elements, selected_filter);
  						pricing_table_wrapper.removeClass('is-switched');
  						//change rotation direction if .cd-pricing-list has the .cd-bounce-invert class
  						if(pricing_table.find('.cd-pricing-list').hasClass('cd-bounce-invert')) pricing_table_wrapper.toggleClass('reverse-animation');
  					});
  				}
  			});
  		});
  	}
  	function show_selected_items(selected_elements) {
  		selected_elements.addClass('is-selected');
  	}
  
  	function hide_not_selected_items(table_containers, filter) {
  		$.each(table_containers, function(key, value){
  	  		if ( key != filter ) {	
  				$(this).removeClass('is-visible is-selected').addClass('is-hidden');
  
  			} else {
  				$(this).addClass('is-visible').removeClass('is-hidden is-selected');
  			}
  		});
  	}
  });