Using addListener() to change the circle colours...

[wimbarelds]

Using addListener() to change the circle colours...

[wimbarelds]

You can simply trigger TimeCircles() again, like so:

$("#idle_timer").TimeCircles({ time: { Minutes: { color: "#FF0000" } , Seconds: { color: "#FF0000" } } });

However I agree that $(this) should be accessible.

[oucil]

I tried that but I seem to be getting two stacked timers rather than the original being overwritten, can you confirm, or might it be my environment? My case may be special, I'm setting the original timer from the parent document, but it's reset via an iframe each time a new child page is loaded, the child uses a selector scope of 'window.parent.document' when setting the new TimeCircles().

[wimbarelds]

That shouldn't happen, could you please give an example of where this is happening?

When created, TimeCircles adds a data attribute to the container element. Before creating ti checks if that data attribute is set. So, if it's already there- it shouldn't create another.

[oucil]

It might very well be my environment, but just in case here's what I'm doing...

// This same code block is called from both the parent and from within the child page in the iframe.
var idle_timer = $('div#idle_timer',window.parent.document);
// This is how I got around the stacking described...
idle_timer.children('div.time_circles').remove();
// Oddly, TimeCircles() wouldn't see the data attribute when I used .data('timer',1800);
idle_timer.attr('data-timer',1800);
idle_timer.TimeCircles({ time: { Days: { show:false }, Hours: { show:false }, Minutes: { color: '#4D8DC1' }, Seconds: { color: '#4D8DC1' } } })
.addListener(function(unit,value,total) { if (total == 1200) { /* THIS IS WHERE I'M TRYING TO CHANGE COLOURS */ } else if (total == 1500) { alert('Your session will expire in 5 minutes, you should save your work and / or reload the page.'); } } );

I'm wondering if the same issue that's causing TS not to see the data attribute 'timer' when set using data() vs attr() is involved?

[wimbarelds]

So you're applying TimeCircles immediately to a document element? I think that might be the problem.

It will probably work if you place a div inside the document, give it whatever size you need, and apply TimeCircles to that. I'm not sure to what extend the document element can have data applied to it.

I have now also committed a new version that gives you the 'this' keyword. I won't do a new release until I have more to add though.

7ce5854

[oucil]

I don't believe that's what I'm doing...

var idle_timer = $('div#idle_timer',window.parent.document);

... is targetting a DIV element in the parent document, and all of this is encased in an ready() so it shouldn't be called until the document is fully loaded. The first time the timer is created is by the parent, but than any subsequent child page loaded in the iframe tries to overwrite it. This is where I'm getting the stacked one rather than the overwrite like I'm expecting. The parent and child are both in the same domain so it shouldn't be affected by xss blocks.

P.S. Thanks for adding the $(this) support, very handy!

[oucil]

Here's a quick example demonstrating the dynamic setting of the data-timer attribute and how TimeCircles() isn't seeing it, even in the local scope...

<h1>TIMER CIRCLE</h1>
<div id="idle_timer" style="width:300px; height:150px; border:1px solid #666; margin:50px;"></div>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link type="text/css" rel="stylesheet" href="./TimeCircles.css">
<script type="text/javascript" src="./TimeCircles.js"></script>
<script>
$( document ).ready(function() {
var idle_timer = $('div#idle_timer');

    idle_timer.children('div.time_circles').remove();

    idle_timer.data('timer',1800);

    alert(idle_timer.data('timer'));

    idle_timer.TimeCircles({ time: { Days: { show:false }, Hours: { show:false }, Minutes: { color: '#4D8DC1' }, Seconds: { color: '#4D8DC1' } } })
    .addListener(function(unit,value,total) { if (total == 600) {  } else if (total == 300) { alert('Your session will expire in 5 minutes, you should save your work and / or reload the page.'); } } );
});
</script>

The alert() I added shows the data attribute was correctly set.

[wimbarelds]

Ah! Good point, I read that wrong.

If $(this) works, then great. If it doesn't work, you can:

// This same code block is called from both the parent and from within the child page in the iframe.
var idle_timer = $('div#idle_timer',window.parent.document);
// This is how I got around the stacking described...
idle_timer.children('div.time_circles').remove(); 
// Oddly, TimeCircles() wouldn't see the data attribute when I used .data('timer',1800);
idle_timer.attr('data-timer',1800); 
var tc = idle_timer.TimeCircles({ time: { Days: { show:false }, Hours: { show:false }, Minutes: { color: '#4D8DC1' }, Seconds: { color: '#4D8DC1' } } });
tc.addListener(function(unit,value,total) {
    if (total == 1200) {
        tc.foreach(function(instance) {
            instance.setOptions({ time: { Minutes: { color: "#FF0000" } , Seconds: { color: "#FF0000" } } });
        });
        /* THIS IS WHERE I'M TRYING TO CHANGE COLOURS */
    } else if (total == 1500) {
        alert('Your session will expire in 5 minutes, you should save your work and / or reload the page.');
    }
});

I've also committed a new version which should accept dynamically set data-timer.

[oucil]

I'll update and give that a shot, thanks for all your work and quick responses btw, very much appreciated!

[wimbarelds]

Can you tell me if this has fixed the issue?

[oucil]

I've been testing the dynamically set timer value and was stuck on it, I think I've identified a bug, but again, you may have had a reason for it without getting to further into the code. The additional code you added at lines 346-348 where you test for a value and then overwrite it with the data attribute work great, but then in the next block on lines 349, 354, 358 you test for type, but only the first one tests the actual attr_data_timer var set above, so in the case of setting the value dynamically with .data('timer',100) your code evaluates the type as number but then ignores the value in attr_data_timer when setting this.data.attributes.timer.

Actually, even the typeof calls are referencing config vars instead.

[wimbarelds]

Ah you're right. With when you set it as html attribute, it's bound to be a string. I hadn't really given thought to setting it dynamically and setting it a number.

Easy workaround is using .data('timer', '100'). Will fix this myself though.

[oucil]

I've tested the following in all three scenarios (dynamic set with .data, dynamic set with attr, and attribute set inline) and they all work...

var attr_data_timer = $(this.element).attr('data-timer');
            if (typeof attr_data_timer === "undefined") {
                attr_data_timer = $(this.element).data('timer');
            }
            if (typeof attr_data_timer === "string") {
                this.data.attributes.timer = parseFloat(attr_data_timer);
                $(this.element).removeAttr('data-timer');
                $(this.element).removeData('timer');
            }
            else if (typeof attr_data_timer === "string") {
                this.data.attributes.timer = parseFloat(attr_data_timer);
                this.config.timer = null;
            }
            else if (typeof attr_data_timer === "number") {
                this.data.attributes.timer = attr_data_timer;
                this.config.timer = null;
            }

[wimbarelds]

Can you explain why you check for the string type on the same variable twice? That doesn't seem like it would do anything.

Anyway, I've committed an update that should fix this for .data('timer', 100)

[oucil]

Didn't notice that :) I was just swapping out vars, so you can probably remove that second check. You used to be checking a different var there than the first string check but I think it might have just been left over since like you said it would never hit in an inline defined data-timer.

[oucil]

Tested and working in all scenarios, thanks!

Now just getting back to altering the colour of the circles during an event listener triggered threshold, i.e. I'm counting down from 10 and I want the colour to change at 5, how to I reference the circles within the canvas?

My event listener is as described earlier:

.addListener(
    function(unit,value,total) { 
        if (total == 5) {  /* CHANGE COLOUR HERE */ }
    } 
);

$(this) is referencing the parent container which is great, but how do I target a specific circle in the canvas?

This may be another question altogether, or best served by just resetting the timer, but is it possible to start with a minute timer only, then using the listener trigger a change at the 60 sec mark to hide the minute timer and show the previously hidden seconds timer?

[wimbarelds]

That last question is probably best done using .destroy(). I'm not sure what exactly you mean by referencing the circles. You can change the color using one of the methods I posted above.

[oucil]

Ah you're right, sorry :) Accomplished this with:

if (total == 10) {
    idle_timer.data('timer',10);
    idle_timer.TimeCircles({ time: { Days: { show:false }, Hours: { show:false }, Minutes: { color: '#900' }, Seconds: { color: '#900' } } })
}

That's great, appreciate all your help.

One last thing, I'm still experiencing the stacking issue when used with iframes, I'll start a new issue for you and supply some code to reproduce.