https://8proof.com/js/pricing.js

1'use strict';
2
3/**
4 * PRICING TABLES
5 **/
6
7
8(function ($, $scope) {
9    $scope.$pricingTable = $(".pricing-table table");
10
11    $scope.gridFloatBreakpointMax = 768 - 1;
12
13    $scope.basis = $('input[name="pricing-basis"]').val();
14
15    // Needs a way to calculate prices, it will require additional logic and work
16    $scope.calculatePrice = function() {
17        return {
18
19        }
20    };
21
22    $scope.resizeWindow = function(e) {
23        if(e.innerWidth <= $scope.gridFloatBreakpointMax) {
24            $("> .expand-mobile .visible-cell", $scope.$pricingTable).attr("colspan", 2);
25        } else {
26            $("> .expand-mobile .visible-cell", $scope.$pricingTable).removeAttr("colspan");
27        }
28    };
29
30    $scope.moveToPricingTab = function(tab) {
31        var hid = "ph-" + tab;
32
33        //$("thead th.visible-cell", $pricingTable).removeClass("visible-cell").removeAttr("colspan");
34        $(".expand-mobile .visible-cell", $scope.$pricingTable).removeClass("visible-cell").removeAttr("colspan");
35        $("thead th#" + hid, $scope.$pricingTable).addClass("visible-cell").attr("colspan", 2);
36        $('.expand-mobile td[headers*=' + hid + ']', $scope.$pricingTable).attr("colspan", 2);
37
38        $('td[headers].visible-cell', $scope.$pricingTable).removeClass("visible-cell");
39        $('td[headers*=' + hid + ']', $scope.$pricingTable).addClass("visible-cell");
40    };
41
42    $(function() {
43        $(".pricing-table-tabs").on("change", 'input[name="pricing-plan"]', function() {
44            $scope.moveToPricingTab(this.value);
45        });
46
47        $(".pricing-table-basis").on("change", 'input[name="pricing-basis"]', function() {
48            $scope.basis = this.value;
49            $scope.$pricingTable.removeClass("yearly-display monthly-display").addClass($scope.basis + "-display");
50
51            $(".odometer").each(function() {
52                this.innerHTML = $(this).data($scope.basis);
53            });
54        });
55
56        $('.pricing-details').on('change', '[data-toggle="price"]', function() {
57            var $element = $(this);
58            var currentValue = $element.val();
59
60            var price = $scope.calculatePrice(currentValue);
61
62            // Calculating the prices will require additional effort,
63            // As a demo matter just toggle between monthly and yearly values
64            $scope.basis = $scope.basis === 'yearly' ? 'monthly' : 'yearly';
65
66            $(".odometer").each(function() {
67                this.innerHTML = $(this).data($scope.basis);
68            });
69        });
70
71        // Windows resize
72        $(window).resize(function() {
73            $scope.resizeWindow(this);
74        });
75
76        $scope.resizeWindow(window);
77    });
78})(jQuery, {});