jQuery timer: change value between pause and play

Vote count:

0

If you know 14dayz you'll have seen those project/task timers. They exist of an input box holding the time (00:00) and a toggle button which can start or pause the timer. While the timer is active the value in the input gets updated every second.

When you visit back the next day, time will be loaded from the database and you can start timing where you stopped.

It might however happen that you forget to hit the button when starting to work on a project/task. Thats why the timers allow you to edit the input value manualy to something like 00:45. When you hit the button after typing in the value, it simply starts from that point.

In my project I allready use jquery.timer.js so I thought to use it for these kind of timers as well.

I've got the HTML build up like this:

<div class="input-append">
    <input class="span2" id="time" type="text" value="00:20:00">
    <button class="btn btn-toggle-timer" type="button"><i class="icon-time"></i></button>
</div>

It works fine when it starts from 00:00 or a stored time (db) like 00:20. But, if I pause the timer, edit the value and play it again, it will jump back to the time that was in the input at the moment I paused it. It seems to be the default behaviour of the jQuery timer plugin. I've took several shots to rebuild their example1 (stopwatch) so it fits my needs. Now I'm starting to believe dark magic has something to do with it.

The final js I tried:

var Example1 = new (function() {
    var $stopwatch, // Stopwatch element on the page
    incrementTime = 1000, // Timer speed in milliseconds
    currentTime, // Current time in hundredths of a second
    updateTimer = function() {
        $stopwatch.val(formatTime(currentTime));
        currentTime += incrementTime / 10;
        Example1.Timer.remaining = currentTime;
    },
    init = function() {
        $stopwatch = $("#appendedInputButton");
        currentTime = unformatTime();
        console.log(currentTime);
        Example1.Timer = $.timer(updateTimer, incrementTime, false);
    };
    this.play = function(reset) {
        if(!this.Timer.isActive) {
            if(reset) {this.Timer.setTimer();}
            else {this.Timer.setTimer(this.currentTime);this.currentTime = unformatTime();}
            this.Timer.isActive = true;
        }
        return this;
    };
    this.pause = function() {
        if(Example1.Timer.isActive) {
            Example1.Timer.isActive = false;
            Example1.Timer.remaining -= unformatTime() - Example1.Timer.last;
            Example1.Timer.clearTimer();
        }
        return this;
    };
    this.toggle = function(reset) {
        if(Example1.Timer.isActive) {
            this.pause();
        }
        else if(reset) {this.play(true);}
        else {
            this.play();
        }
        return this;
    };
    this.resetStopwatch = function() {
        currentTime = 0;
        this.Timer.stop().once();
    };
    $(init);
});
// Common functions
function pad(number, length) {
    var str = "" + number;
    while (str.length < length) {str = "0" + str;}
    return str;
}
function formatTime(time) {
    var min = parseInt(time / 6000),
        sec = parseInt(time / 100) - (min * 60),
        hundredths = pad(time - (sec * 100) - (min * 6000), 2);
    return (min > 0 ? pad(min, 2) : "00") + ":" + pad(sec, 2) + ":" + hundredths;
}
function unformatTime() {
    var timeEnd = $("#appendedInputButton").val();
    console.log(timeEnd);
    return (Number(timeEnd.split(":")[0]) * 6000) + ((Number(timeEnd.split(":")[1]) * 100) + (Number(timeEnd.split(":")[0]) / 60));
}

// Trigger for the toggle button
$(document).on('click', '.btn-toggle-timer', function(e) {
    Example1.toggle();
    $(this).toggleClass("btn-success").find("i").toggleClass("icon-pause icon-time");
} 

I tried to set up a jsFiddle but I didn't succeed in adding the timer plugin. It keeps throwing errors.

I hope someone knows what I am doing wrong on this one. Thanks for any help at all.

asked 1 min ago

Brainfeeder

565