Pricing Calculator

by Taulant

HTML

<script src='https://cdnjs.cloudflare.com/ajax/libs/sammy.js/0.7.6/sammy.min.js' type='text/javascript'></script>
<script src='https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js' type='text/javascript'></script>
<div class="container-fluid body-content pricing-calculator">
    <!-- ko with: home -->
    <div class="container row" id="pricingCalculator">
        <div class="col-md-6">
            <div class="calculator">
                <form>
                    <div class="form-group document-type">
                        <h2>
                          TO REPRODUCE THE ISSUE IN SAFARI OR IE:
                        </h2>
                        <label>Tell us about your document type:</label> 
                        <select data-bind="options: productOptions, value: selectedOption, valueUpdate: 'afterkeydown', optionsText: 'Name'" id="calculatorProductTypeSelect"></select>
                    </div>
                    <div class="form-group document-size" data-bind="visible: shouldShowMessage" style="display: none;">
                        <label>Document Size</label> <select data-bind="options: sizeOptions, value: selectedSize, optionsText: 'Name'">
                            <option value="">Letter</option>
                        </select>
                    </div>
                    <div class="form-group number-of-pages">
                        <label data-content="Count all pages in your finished document. If you would like to print on both sides, count each side as one page. We price all documents with double sided printing. For more options please &lt;a href=/contact-us&gt;contact us&lt;/a&gt;." data-html="true" data-placement="top" data-toggle="popover" data-trigger="click">Number of Pages in Your Document <i class="fa fa-info-circle"></i></label> <input data-bind="value: pages, valueUpdate: 'keyup'" data-toggle="tooltip" id="numberofPages" type="text">
                    </div>
                    <div class="form-group...

JavaScript

// AppDataModel
function AppDataModel() {
        var self = this;
        // Routes
        self.userInfoUrl = "/api/Me";
        self.siteUrl = "/bbc";
        // Data
        self.returnUrl = self.siteUrl;
        // Data access operations
        self.setAccessToken = function(accessToken) {
            sessionStorage.setItem("accessToken", accessToken);
        };
        self.getAccessToken = function() {
            return sessionStorage.getItem("accessToken");
        };
    }
    // AppViewModel

function AppViewModel(dataModel) {
        // Private state
        var self = this;
        // Private operations
        function cleanUpLocation() {
                window.location.hash = "";
                if (typeof(history.pushState) !== "undefined") {
                    history.pushState("", document.title, location.pathname);
                }
            }
            // Data
        self.Views = {
            Loading: {} // Other views are added dynamically by app.addViewModel(...).
        };
        self.dataModel = dataModel;
        // UI state
        self.view = ko.observable(self.Views.Loading);
        self.loading = ko.computed(function() {
            return self.view() === self.Views.Loading;
        });
        // UI operations
        // Other navigateToX functions are added dynamically by app.addViewModel(...).
        // Other operations
        self.addViewModel = function(options) {
            var viewItem = new options.factory(self, dataModel),
                navigator;
            // Add view to AppViewModel.Views enum (for example, app.Views.Home).
            self.Views[options.name] = viewItem;
            // Add binding member to AppViewModel (for example, app.home);
            self[options.bindingMemberName] = ko.computed(function() {
                return self.Views[options.name];
            });
            if (typeof(options.navigatorFactory) !== "undefined") {
                navigator = options.navigatorFactory(self,...