Countdown: Continue PR #3485 (#3936)

* Implement changed design, fix #3500

* Remove comment

* Update test file to use ISO8601 dates and avoid testing of Role

* Include subtitle in the template

* Take current time using momentjs, calculate difference in JS

* Remove subtitle from the template, make corrections to endCountdown

* Pass date string to JS and find difference in moment objects, change toggling at countdown end

* Remove use of difference passed from the backend

* Update test file
master
Rasika Pohankar 2017-04-24 19:10:05 +05:30 committed by Zaahir Moolla
parent cc1753acab
commit 7ebdcdfbd2
6 changed files with 105 additions and 128 deletions

View File

@ -13,10 +13,12 @@ zci answer_type => 'countdown';
zci is_cached => 1;
my $goodieVersion = $DDG::GoodieBundle::OpenSourceDuckDuckGo::VERSION // 999;
triggers startend => 'countdown to','time until','how long until';
# Handle statement
handle remainder => sub {
handle remainder => sub {
my $remainder = $_;
@ -30,12 +32,16 @@ handle remainder => sub {
return $diff,
structured_answer => {
data => {
remainder => $_,
difference => $diff,
countdown_to => date_output_string($date,1)
remainder => $_,
countdown_to => $date->strftime("%B %d, %Y, %r"), #remove after the Dates Role is updated
goodie_version => $goodieVersion,
input_date => $date->datetime()
},
templates => {
group => "text",
options => {
title_content => 'DDH.countdown.countdown'
}
}
};
};

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

View File

@ -1,19 +1,9 @@
.zci--countdown .time-unit,
.zci--countdown .separator {
text-align: center;
display: inline-block;
}
.zci--countdown .time-unit {
display: inline-block;
min-width: 3em;
padding: 0px 3.2em 0.5em 0px;
}
.zci--countdown .separator {
padding: 0 0.4em 0;
vertical-align: top;
}
.zci--countdown .number,
.zci--countdown .separator {
font-size: 2.5em;
.zci--countdown .number {
font-size: 2.5rem; /*for 36px*/
}

View File

@ -1,31 +1,30 @@
<div class="countdown_container seventy--screen-m whole--screen-s">
<span class="time-unit year is-hidden">
<div class="tx-clr--slate number years">00</div>
<div class="countdown_container ninety--screen-m whole--screen-s">
{{#if year}}
<span class="time-unit">
<div class="tx-clr--grey unit">Years</div>
<div class="tx--36 tx-clr--slate number years">{{year}}</div>
</span>
<span class="tx-clr--slate separator year is-hidden">:</span>
<span class="time-unit month is-hidden">
<div class="tx-clr--slate number months">00</div>
{{/if}}
{{#if month}}
<span class="time-unit">
<div class="tx-clr--grey unit">Months</div>
<div class="tx-clr--slate number months">{{month}}</div>
</span>
<span class="tx-clr--slate separator month is-hidden">:</span>
{{/if}}
<span class="time-unit">
<div class="tx-clr--slate number days">00</div>
<div class="tx-clr--grey unit">Days</div>
<div class="tx-clr--slate number days">{{day}}</div>
</span>
<span class="tx-clr--slate separator">:</span>
<span class="time-unit">
<div class="tx-clr--slate number hours">00</div>
<div class="tx-clr--grey unit">Hours</div>
<div class="tx-clr--slate number hours">{{hour}}</div>
</span>
<span class="tx-clr--slate separator">:</span>
<span class="time-unit">
<div class="tx-clr--slate number minutes">00</div>
<div class="tx-clr--grey unit">Minutes</div>
<div class="tx-clr--slate number minutes">{{minute}}</div>
</span>
<span class="tx-clr--slate separator">:</span>
<span class="time-unit">
<div class="tx-clr--slate number seconds">00</div>
<div class="tx-clr--grey unit">Seconds</div>
<div class="tx-clr--slate number seconds">{{second}}</div>
</span>
</div>

View File

@ -5,46 +5,13 @@ DDH.countdown = DDH.countdown || {};
var hasShown = false,
countdown = "",
initialDifference,
$countdownContainer,
$time_display,
$displayYears, $displayMonths, $displayDays,
$displayHrs, $displayMins, $displaySecs,
$year,$month,$display,
$display,
stopped = false,
cachedPlayer, soundIsPlaying = false,
SOUND_NAME = "alarm-sound",
soundUrl = 'share/goodie/countdown/alarm.mp3',
soundUrl,
isVisible = true;
function padZeroes(s, len) {
while (s.length < len) {
s = '0' + s;
}
return s;
}
function displayCountdown() {
var parts = countdown.split(":");
if(parts.length > 1) {
if(parts[0] > 0) {
$year.removeClass("is-hidden");
$month.removeClass("is-hidden");
$displayYears.html(padZeroes(parts[0],2));
$displayMonths.html(padZeroes(parts[1],2));
$displayDays.html(padZeroes(parts[2],2));
} else if(parts[1] > 0) {
$month.removeClass("is-hidden");
$displayMonths.html(padZeroes(parts[1],2));
$displayDays.html(padZeroes(parts[2],2));
} else {
$displayDays.html(padZeroes(parts[2],2));
}
$displayHrs.html(padZeroes(parts[3],2));
$displayMins.html(padZeroes(parts[4],2));
$displaySecs.html(padZeroes(parts[5],2));
}
}
function loop() {
cachedPlayer.play(SOUND_NAME, soundUrl, {
autoPlay: true,
@ -63,6 +30,7 @@ DDH.countdown = DDH.countdown || {};
cachedPlayer = player;
endCountdown();
});
$display = $(".zci--countdown").find(".countdown_container").find('.number');
return;
}
// if a sound is already playing, stop for a moment
@ -75,18 +43,12 @@ DDH.countdown = DDH.countdown || {};
// start looping sound - single click anywhere on the screen will
// stop looping
loop();
soundIsPlaying = true;
$(document).one("click", stopLoop);
setInterval(function() {
if(isVisible) {
isVisible = false;
$display.removeClass("tx-clr--slate");
$display.addClass("tx-clr--silver");
} else {
isVisible = true;
$display.addClass("tx-clr--slate");
$display.removeClass("tx-clr--silver");
}
$display.toggleClass("tx-clr--silver");
}, 500);
}
@ -94,10 +56,7 @@ DDH.countdown = DDH.countdown || {};
if(stopped) {
return;
}
var s = difference.years() + ":" + difference.months() + ":" + difference.days() + ":" + difference.hours() + ":" + difference.minutes() + ":" + difference.seconds();
countdown = s;
if(difference >= 0) {
displayCountdown();
if(difference > 0) {
difference = difference.subtract(1, 's');
} else {
stopped = true;
@ -106,48 +65,64 @@ DDH.countdown = DDH.countdown || {};
return difference;
}
function getReferences() {
$countdownContainer = $(".zci--countdown").find(".countdown_container");
$display = $countdownContainer.find('.number');
$displayYears = $countdownContainer.find('.years');
$displayMonths = $countdownContainer.find('.months');
$displayDays = $countdownContainer.find('.days');
$displayHrs = $countdownContainer.find('.hours');
$displayMins = $countdownContainer.find('.minutes');
$displaySecs = $countdownContainer.find('.seconds');
$year = $countdownContainer.find(".year");
$month = $countdownContainer.find(".month");
}
DDH.countdown.build = function(ops) {
DDH.countdown.build_async = function(ops, DDH_async_add) {
var remainder = ops.data.remainder,
countdown_to = ops.data.countdown_to,
soundUrl = 'share/goodie/countdown/' + ops.data.goodie_version + '/alarm.mp3',
input_date = ops.data.input_date,
duration;
initialDifference = ops.data.difference;
return {
data: {
title: "Counting down to " + countdown_to + ","
},
templates: {
group: 'text',
options: {
content: DDH.countdown.countdown
DDG.require('moment.js', function() {
var now = moment();
var then = moment(input_date);
initialDifference = then.diff(now,'seconds');
if(initialDifference <= 0)
return;
duration = moment.duration(initialDifference,'seconds');
DDH_async_add({
id: 'countdown', //class name of enclosing div is inferred as .zci--answer, without this
meta: {
rerender: [
'year','month','day','hour','minute','second'
]
},
},
onShow: function() {
if(hasShown) {
return;
}
hasShown = true;
getReferences();
DDG.require('moment.js', function() {
var initialDifferenceDuration = moment.duration(initialDifference,'seconds');
duration = getCountdown(initialDifferenceDuration);
data: {
year : duration.years(),
month : duration.months(),
day : duration.days(),
hour : duration.hours(),
minute : duration.minutes(),
second : duration.seconds(),
subtitle: "Countdown to " + countdown_to,
},
templates: {
group: 'text',
options: {
title_content: DDH.countdown.countdown
},
},
onItemShown: function(item) {
if(hasShown) {
return;
}
hasShown = true;
setInterval(function() {
duration = getCountdown(duration);
if(duration)
item.set({ year: duration.years(),
month: duration.months(),
day: duration.days(),
hour: duration.hours(),
minute: duration.minutes(),
second: duration.seconds()
});
}, 1000);
});
}
};
}
});
});
};
})(DDH);

View File

@ -7,22 +7,29 @@ use Test::More;
use Test::MockTime qw( :all );
use DDG::Test::Goodie;
use DDG::Test::Location;
use DateTime;
zci answer_type => "countdown";
zci is_cached => 1;
my $goodieVersion = $DDG::GoodieBundle::OpenSourceDuckDuckGo::VERSION // 999;
sub build_structured_answer {
my ($remainder, $initialDifference, $output_string) = @_;
my ($remainder, $initialDifference, $date_string, $output_string) = @_;
return $initialDifference,
structured_answer => {
data => {
remainder => $remainder,
difference => $initialDifference,
countdown_to => $output_string
remainder => $remainder,
countdown_to => $output_string,
goodie_version => $goodieVersion,
input_date => $date_string
},
templates => {
group => "text",
options => {
title_content => 'DDH.countdown.countdown'
}
}
};
}
@ -34,16 +41,16 @@ set_fixed_time("2016-04-15T15:31:02Z");
ddg_goodie_test(
[qw( DDG::Goodie::Countdown )],
'time until 1st June 2016' => build_test("1st June 2016", 4019338 , "01 Jun 2016 00:00:00 EDT"),
'how long until 31st December 2016' => build_test("31st December 2016", 22426138, "31 Dec 2016 00:00:00 EST"),
'countdown to tomorrow' => build_test("tomorrow", 86400, "16 Apr 2016 11:31:02 EDT"),
'time until 2016-06-01' => build_test("2016-06-01", 4019338, "2016-06-01T00:00:00", "June 01, 2016, 12:00:00 AM"),
'how long until 2016-12-31' => build_test("2016-12-31", 22426138, "2016-12-31T00:00:00", "December 31, 2016, 12:00:00 AM"),
'countdown to tomorrow' => build_test("tomorrow", 86400, "2016-04-16T11:31:02", "April 16, 2016, 11:31:02 AM"),
## Currently these do not trigger, uncomment after PR #2810 is merged
#'countdown to 10:00:00 am 26th July' => build_test("10:00:00 am 26th July", 8807338000000000, "26 Jul 2016 10:00:00 EDT"),
#'countdown to 10:00:00 am' => build_test("10:00:00 am", 80938000000000 , "16 Apr 2016 10:00:00 EDT"),
#'time until 1st May 12:00:00 pm' => build_test("1st May 12:00:00 pm",1384138000000000 , "01 May 2016 12:00:00 EDT"),
#'how long until 01:00:00 pm tomorrow' => build_test("01:00:00 pm tomorrow", 91738000000000, "16 Apr 2016 13:00:00 EDT"),
#'how long until 01:00:00 am today' => build_test("01:00:00 am today", 48538000000000, "16 Apr 2016 01:00:00 EDT"),
#'countdown to 10:00:00 am 26th July' => build_test("10:00:00 am 26th July", 8807338000000000, "2016-07-26T10:00:00", "26 Jul 2016 10:00:00 AM"),
#'countdown to 10:00:00 am' => build_test("10:00:00 am", 80938000000000 , "2016-04-16T10:00:00", "16 Apr 2016 10:00:00 AM"),
#'time until 1st May 12:00:00 pm' => build_test("1st May 12:00:00 pm",1384138000000000 , "2016-05-01T12:00:00", "01 May 2016 12:00:00 PM"),
#'how long until 01:00:00 pm tomorrow' => build_test("01:00:00 pm tomorrow", 91738000000000, "2016-04-16T13:00:00", "16 Apr 2016 01:00:00 PM"),
#'how long until 01:00:00 am today' => build_test("01:00:00 am today", 48538000000000, "2016-04-16T01:00:00", "16 Apr 2016 01:00:00 AM"),
#invalid
'how long until 01:00:00 am yesterday' => undef,