VP3 Slider - Prototype #3

Dollar up/down mechanism via buttons (client-side)

by davidhong

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css">
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script src="http://jquery-json.googlecode.com/files/jquery.json-2.2.min.js"></script>
<script src="https://raw.github.com/cowboy/jquery-throttle-debounce/v1.1/jquery.ba-throttle-debounce.min.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="https://raw.github.com/gist/adc747116a80189dc824/63ef39f5514d2423e18e1697d2ac4834f827045e/VP3Calculator.v2.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1">

<div id="home" data-role="page">
    <header data-role="header"><h1>My Shopping Bag</h1></header>
    
    <div data-role="content">
        <div class="product">
            <h1>Apple iPhone 4S 32gb</h1>
            <img src="http://images.freshnessmag.com/wp-content/uploads//2011/10/summary.png">
            <div>Discover the features and specifications that set the Apple iPhone 4S 64GB White apart from other mobile phones. It's your ticket to a world of information and entertainment via the Telstra network.</div>
            
            <form action="/echo/json" method="post">
                <div class="ui-grid-a">
                    <div class="ui-block-a">
                        <input type="text" name="pay" id="pay" value="0" />
                    </div>
                    <div class="ui-block-b">
                        <input type="text" name="points" id="points" value="22000" step="10" />
                    </div>
                </div>
                <div class="fill" data-role="controlgroup" data-type="horizontal">
                    <a data-role="button" data-delta="-1" data-icon="minus">Pay less</a>
                    <a data-role="button" data-delta="1" data-icon="plus">Pay more</a>
                </div>
                <p>Tap and hold to increase or decrease the pay faster!</p>
    ...

CSS

.hide { display: none; }

form { margin: 1.5em 0; }

.product img { width: 100%; }
.product .ui-grid-a input { width: 100%; box-sizing: border-box; }
.product .ui-block-a * { float: left; }
.product .ui-block-b * { float: right; }
input.ui-slider-input { display:none !important; }

.fill .ui-btn { width: 50%; box-sizing: border-box; }

JavaScript

//
// VP3 render
var render = function(vp3) {
    var $product = $('.product'),
        $points = $('#points', $product),
        points = $points.val();

    $('#points', $product).val(vp3.points);
    $('#pay', $product).val(vp3.pay);
};

//
// VP3 update function
var update = function(event) {
    event.preventDefault();

    var $input = $('#points'),
        $element = $(this),
        $product = $input.parents('.product'),
        delta = $element.data().delta,
        points = ~~$input.val(),
        min = 13100,
        max = 22000,
        minCpp = 0.0043,
        maxCpp = 0.0063,
        vp3 = VP3(min, max, minCpp, maxCpp, points + delta);

    $.ajax({
        type: 'POST',
        url: '/echo/json/',
        data: {
            json: $.toJSON(vp3),
            delay: 0
        },
        success: function(response) {
            render(response);
        }
    });
};
//
// VP3 update function
var feedback = function(event) {
    var $input = $('#pay'),
        $element = $(this),
        $product = $input.parents('.product'),
        delta = $element.data().delta,
        pay = ~~$input.val(),
        min = 13100,
        max = 22000,
        minCpp = 0.0043,
        maxCpp = 0.0063,
        vp3 = VP3.byPayChange(min, max, minCpp, maxCpp, pay + delta);

    render(vp3);
};

// 
// Simulate tap-and-holder (or click-and-hold)
var id;
$('.product')
    .delegate('[data-delta]', 'mousedown, vmousedown', function(event) {
        var callback = _.bind(feedback, this, event);
        
        if (id == null) {
            id = setInterval(callback, 250);
        }
    })
    .delegate('[data-delta]', 'mouseleave, mouseup', function (event) {
        if (id != null) {
            clearInterval(id);
            id = null;
        }
    });