Simulating Spinner Number with mousedown

Question

I made a control (numeric spinner up and down), to work in a table:

JSFIDDLE: http://jsfiddle.net/Leandro1981/wn8vd/1/

and I want simulate the "mousedown, increment while mouse button is helding" but I can't do it. I tried to mix it with the following and functional script:

JSFIDDLE: http://jsfiddle.net/Leandro1981/kKW85/

but I couldn't make it.

My last attempt here: http://jsfiddle.net/Leandro1981/S8Zt9/1/

Maybe the wrong is the

timeout = setInterval(function () {

But I couldn't figure out. I'm using bootstrap 3, so I can't use some JQuery UI plugins...

Any help will be preciated!

Please comment below if you have any question, comment or anything to improve this question, and sorry for my english :)

Please be free to use my code/control in any way.

Thanks and kind regards

Paul S. · Accepted Answer · 2014-04-01T20:22:48.580

Write a factory to set up each control so you get a closure over the variables, now it's just a matter of being able to make it work given the relevant elements. For this, you'll need to

Listen for mousedown on the up and down nodes to set off the changes
Start a timeout loop to keep doing your change
Listen for mouseup on window to ensure you cancel the timeout loop (you may also want to listen for mouseout/loss of focus)

So all together,

function spinFactory(node, up, down) { // I wrote this vanilla :D
    var spinning, delta;
    window.addEventListener('mouseup', stopSpin);
    function spin() {
        node.value = +node.value + delta;
        spinning = setTimeout(spin, 500);
    }
    function stopSpin() { // maybe also invoke this on mouseout/loss of focus
        window.clearTimeout(spinning);
        delta = 0;
    }
    up.addEventListener('mousedown', function spinUp() {
        delta = 1;
        spin();
    });
    down.addEventListener('mousedown', function spinDown() {
        delta = -1;
        spin();
    });
}
// apply to your control, used a bit of jQuery to make life easier
$('.PNET-spinner').each(function () {
    spinFactory(
        this.getElementsByTagName('input')[0],
        $(this).find('.btn:first-of-type')[0],
        $(this).find('.btn:last-of-type')[0]
    );
});

DEMO

score 1 · Answer 2 · answered Apr 01 '14 at 20:17

I have updated the Fiddle here ... Please check this and it might helps you..

Script

            $('.PNET-spinner .btn:first-of-type').on('mousedown', function (e) {
                var timer, proxy = this;

                timer = setInterval(function () {
                    increment(proxy);
                }, 200);

                $(document).one("mouseup", function () {
                    increment(proxy);
                    if (timer) clearInterval(timer);
                });
            });
            $('.PNET-spinner .btn:last-of-type').on('mousedown', function () {
                var timer, proxy = this;

                timer = setInterval(function () {
                    decrement(proxy);
                }, 200);

                $(document).one("mouseup", function () {
                    decrement(proxy);
                    if (timer) clearInterval(timer);
                });
            });

        function increment(proxy) {
            var numupdown = $('.PNET-spinner input', $(proxy).closest("tr"));
            var inputValue = parseInt($(numupdown).val(), 10);
            inputValue++;
            $(numupdown).val(inputValue);
        }
        function decrement(proxy) {
            var numupdown = $('.PNET-spinner input', $(proxy).closest("tr"));
            var inputValue = parseInt($(numupdown).val(), 10);
            if (inputValue > 1) {
                inputValue--;
                $(numupdown).val(inputValue);
            }
        }

score 0 · Answer 3 · answered Apr 01 '14 at 21:10

You simply need to take care of two things. First, your function to increment and decrement the value in the textbox should be called again and again till user do mouseout or mouseup. Second, make surethis has the right value in var numupdown = $('.PNET-spinner input', $(this).closest("tr"));

Following code shows how to do it for the increment button. Similar thing, you can implement for decrement button.

var timeout;
var inc = function () {
    var myThis = this;
    var numupdown = $('.PNET-spinner input', $(this).closest("tr"));
    var inputValue = parseInt($(numupdown).val(), 10);
    inputValue++;
    console.log(inputValue);
    $(numupdown).val(inputValue);
    clearTimeout(timeout);
    timeout = setTimeout(function(){
        //http://stackoverflow.com/questions/3630054/how-do-i-pass-the-this-context-to-a-function
        inc.apply(myThis, arguments);
    }, 1000);
};
var incStop = function(){
    clearTimeout(timeout);
}
$('.PNET-spinner .btn:first-of-type').on('mousedown', inc);
$('.PNET-spinner .btn:first-of-type').on('mouseup', incStop);
$('.PNET-spinner .btn:first-of-type').on('mouseout', incStop);

Check this DEMO here.

Simulating Spinner Number with mousedown

3 Answers3