VP3 Slider - Prototype #3

Points up/down mechanism via buttons (server-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="https://raw.github.com/gist/adc747116a80189dc824/280c94c72f07981010e584e875f536fbe91d8fe6/VP3Calculator.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="-20" data-icon="minus">Decrease</a>
                    <a data-role="button" data-delta="100" data-icon="plus">Increase</a>
                </div>
                
                <div data-role="field-contain" class="hide">
                    <input type="number" 
                           name="vp3"...

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(),
        $delta = $('[data-icon="plus"]'),
        delta = parseInt($delta.data().delta, 10),
        newDelta = Math.abs(vp3.points - points);
    
    $('#points', $product).val(vp3.points);
    $('#pay', $product).val(vp3.pay);
    
    if (delta > 0 && newDelta > delta) {
        $delta.data('delta', newDelta);
    }
};

//
// 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) {
    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);

    render(vp3);
};

// 
// Change event throttled at 300ms
$('.product')
    .delegate('[data-delta]', 'click, vmousedown, mousedown', update);