* 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 filemaster
parent
cc1753acab
commit
7ebdcdfbd2
|
@ -13,10 +13,12 @@ zci answer_type => 'countdown';
|
||||||
|
|
||||||
zci is_cached => 1;
|
zci is_cached => 1;
|
||||||
|
|
||||||
|
my $goodieVersion = $DDG::GoodieBundle::OpenSourceDuckDuckGo::VERSION // 999;
|
||||||
|
|
||||||
triggers startend => 'countdown to','time until','how long until';
|
triggers startend => 'countdown to','time until','how long until';
|
||||||
|
|
||||||
# Handle statement
|
# Handle statement
|
||||||
handle remainder => sub {
|
handle remainder => sub {
|
||||||
|
|
||||||
my $remainder = $_;
|
my $remainder = $_;
|
||||||
|
|
||||||
|
@ -30,12 +32,16 @@ handle remainder => sub {
|
||||||
return $diff,
|
return $diff,
|
||||||
structured_answer => {
|
structured_answer => {
|
||||||
data => {
|
data => {
|
||||||
remainder => $_,
|
remainder => $_,
|
||||||
difference => $diff,
|
countdown_to => $date->strftime("%B %d, %Y, %r"), #remove after the Dates Role is updated
|
||||||
countdown_to => date_output_string($date,1)
|
goodie_version => $goodieVersion,
|
||||||
|
input_date => $date->datetime()
|
||||||
},
|
},
|
||||||
templates => {
|
templates => {
|
||||||
group => "text",
|
group => "text",
|
||||||
|
options => {
|
||||||
|
title_content => 'DDH.countdown.countdown'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
Binary file not shown.
Before Width: | Height: | Size: 23 KiB |
|
@ -1,19 +1,9 @@
|
||||||
.zci--countdown .time-unit,
|
|
||||||
.zci--countdown .separator {
|
|
||||||
text-align: center;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.zci--countdown .time-unit {
|
.zci--countdown .time-unit {
|
||||||
|
display: inline-block;
|
||||||
min-width: 3em;
|
min-width: 3em;
|
||||||
|
padding: 0px 3.2em 0.5em 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.zci--countdown .separator {
|
.zci--countdown .number {
|
||||||
padding: 0 0.4em 0;
|
font-size: 2.5rem; /*for 36px*/
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
|
|
||||||
.zci--countdown .number,
|
|
||||||
.zci--countdown .separator {
|
|
||||||
font-size: 2.5em;
|
|
||||||
}
|
}
|
|
@ -1,31 +1,30 @@
|
||||||
<div class="countdown_container seventy--screen-m whole--screen-s">
|
<div class="countdown_container ninety--screen-m whole--screen-s">
|
||||||
<span class="time-unit year is-hidden">
|
{{#if year}}
|
||||||
<div class="tx-clr--slate number years">00</div>
|
<span class="time-unit">
|
||||||
<div class="tx-clr--grey unit">Years</div>
|
<div class="tx-clr--grey unit">Years</div>
|
||||||
|
<div class="tx--36 tx-clr--slate number years">{{year}}</div>
|
||||||
</span>
|
</span>
|
||||||
<span class="tx-clr--slate separator year is-hidden">:</span>
|
{{/if}}
|
||||||
<span class="time-unit month is-hidden">
|
{{#if month}}
|
||||||
<div class="tx-clr--slate number months">00</div>
|
<span class="time-unit">
|
||||||
<div class="tx-clr--grey unit">Months</div>
|
<div class="tx-clr--grey unit">Months</div>
|
||||||
|
<div class="tx-clr--slate number months">{{month}}</div>
|
||||||
</span>
|
</span>
|
||||||
<span class="tx-clr--slate separator month is-hidden">:</span>
|
{{/if}}
|
||||||
<span class="time-unit">
|
<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--grey unit">Days</div>
|
||||||
|
<div class="tx-clr--slate number days">{{day}}</div>
|
||||||
</span>
|
</span>
|
||||||
<span class="tx-clr--slate separator">:</span>
|
|
||||||
<span class="time-unit">
|
<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--grey unit">Hours</div>
|
||||||
|
<div class="tx-clr--slate number hours">{{hour}}</div>
|
||||||
</span>
|
</span>
|
||||||
<span class="tx-clr--slate separator">:</span>
|
|
||||||
<span class="time-unit">
|
<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--grey unit">Minutes</div>
|
||||||
|
<div class="tx-clr--slate number minutes">{{minute}}</div>
|
||||||
</span>
|
</span>
|
||||||
<span class="tx-clr--slate separator">:</span>
|
|
||||||
<span class="time-unit">
|
<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--grey unit">Seconds</div>
|
||||||
|
<div class="tx-clr--slate number seconds">{{second}}</div>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
|
@ -5,46 +5,13 @@ DDH.countdown = DDH.countdown || {};
|
||||||
var hasShown = false,
|
var hasShown = false,
|
||||||
countdown = "",
|
countdown = "",
|
||||||
initialDifference,
|
initialDifference,
|
||||||
$countdownContainer,
|
$display,
|
||||||
$time_display,
|
|
||||||
$displayYears, $displayMonths, $displayDays,
|
|
||||||
$displayHrs, $displayMins, $displaySecs,
|
|
||||||
$year,$month,$display,
|
|
||||||
stopped = false,
|
stopped = false,
|
||||||
cachedPlayer, soundIsPlaying = false,
|
cachedPlayer, soundIsPlaying = false,
|
||||||
SOUND_NAME = "alarm-sound",
|
SOUND_NAME = "alarm-sound",
|
||||||
soundUrl = 'share/goodie/countdown/alarm.mp3',
|
soundUrl,
|
||||||
isVisible = true;
|
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() {
|
function loop() {
|
||||||
cachedPlayer.play(SOUND_NAME, soundUrl, {
|
cachedPlayer.play(SOUND_NAME, soundUrl, {
|
||||||
autoPlay: true,
|
autoPlay: true,
|
||||||
|
@ -63,6 +30,7 @@ DDH.countdown = DDH.countdown || {};
|
||||||
cachedPlayer = player;
|
cachedPlayer = player;
|
||||||
endCountdown();
|
endCountdown();
|
||||||
});
|
});
|
||||||
|
$display = $(".zci--countdown").find(".countdown_container").find('.number');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
// if a sound is already playing, stop for a moment
|
// 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
|
// start looping sound - single click anywhere on the screen will
|
||||||
// stop looping
|
// stop looping
|
||||||
loop();
|
loop();
|
||||||
|
|
||||||
soundIsPlaying = true;
|
soundIsPlaying = true;
|
||||||
$(document).one("click", stopLoop);
|
$(document).one("click", stopLoop);
|
||||||
|
|
||||||
setInterval(function() {
|
setInterval(function() {
|
||||||
if(isVisible) {
|
$display.toggleClass("tx-clr--silver");
|
||||||
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");
|
|
||||||
}
|
|
||||||
}, 500);
|
}, 500);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -94,10 +56,7 @@ DDH.countdown = DDH.countdown || {};
|
||||||
if(stopped) {
|
if(stopped) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
var s = difference.years() + ":" + difference.months() + ":" + difference.days() + ":" + difference.hours() + ":" + difference.minutes() + ":" + difference.seconds();
|
if(difference > 0) {
|
||||||
countdown = s;
|
|
||||||
if(difference >= 0) {
|
|
||||||
displayCountdown();
|
|
||||||
difference = difference.subtract(1, 's');
|
difference = difference.subtract(1, 's');
|
||||||
} else {
|
} else {
|
||||||
stopped = true;
|
stopped = true;
|
||||||
|
@ -106,48 +65,64 @@ DDH.countdown = DDH.countdown || {};
|
||||||
return difference;
|
return difference;
|
||||||
}
|
}
|
||||||
|
|
||||||
function getReferences() {
|
DDH.countdown.build_async = function(ops, DDH_async_add) {
|
||||||
$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) {
|
|
||||||
var remainder = ops.data.remainder,
|
var remainder = ops.data.remainder,
|
||||||
countdown_to = ops.data.countdown_to,
|
countdown_to = ops.data.countdown_to,
|
||||||
|
soundUrl = 'share/goodie/countdown/' + ops.data.goodie_version + '/alarm.mp3',
|
||||||
|
input_date = ops.data.input_date,
|
||||||
duration;
|
duration;
|
||||||
initialDifference = ops.data.difference;
|
|
||||||
return {
|
DDG.require('moment.js', function() {
|
||||||
data: {
|
var now = moment();
|
||||||
title: "Counting down to " + countdown_to + ","
|
var then = moment(input_date);
|
||||||
},
|
|
||||||
templates: {
|
initialDifference = then.diff(now,'seconds');
|
||||||
group: 'text',
|
if(initialDifference <= 0)
|
||||||
options: {
|
return;
|
||||||
content: DDH.countdown.countdown
|
|
||||||
|
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'
|
||||||
|
]
|
||||||
},
|
},
|
||||||
},
|
data: {
|
||||||
onShow: function() {
|
year : duration.years(),
|
||||||
if(hasShown) {
|
month : duration.months(),
|
||||||
return;
|
day : duration.days(),
|
||||||
}
|
hour : duration.hours(),
|
||||||
hasShown = true;
|
minute : duration.minutes(),
|
||||||
getReferences();
|
second : duration.seconds(),
|
||||||
DDG.require('moment.js', function() {
|
subtitle: "Countdown to " + countdown_to,
|
||||||
var initialDifferenceDuration = moment.duration(initialDifference,'seconds');
|
},
|
||||||
duration = getCountdown(initialDifferenceDuration);
|
templates: {
|
||||||
|
group: 'text',
|
||||||
|
options: {
|
||||||
|
title_content: DDH.countdown.countdown
|
||||||
|
},
|
||||||
|
},
|
||||||
|
onItemShown: function(item) {
|
||||||
|
if(hasShown) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
hasShown = true;
|
||||||
|
|
||||||
setInterval(function() {
|
setInterval(function() {
|
||||||
duration = getCountdown(duration);
|
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);
|
}, 1000);
|
||||||
});
|
}
|
||||||
}
|
});
|
||||||
};
|
});
|
||||||
};
|
};
|
||||||
})(DDH);
|
})(DDH);
|
|
@ -7,22 +7,29 @@ use Test::More;
|
||||||
use Test::MockTime qw( :all );
|
use Test::MockTime qw( :all );
|
||||||
use DDG::Test::Goodie;
|
use DDG::Test::Goodie;
|
||||||
use DDG::Test::Location;
|
use DDG::Test::Location;
|
||||||
|
use DateTime;
|
||||||
|
|
||||||
zci answer_type => "countdown";
|
zci answer_type => "countdown";
|
||||||
zci is_cached => 1;
|
zci is_cached => 1;
|
||||||
|
|
||||||
|
my $goodieVersion = $DDG::GoodieBundle::OpenSourceDuckDuckGo::VERSION // 999;
|
||||||
|
|
||||||
sub build_structured_answer {
|
sub build_structured_answer {
|
||||||
my ($remainder, $initialDifference, $output_string) = @_;
|
my ($remainder, $initialDifference, $date_string, $output_string) = @_;
|
||||||
|
|
||||||
return $initialDifference,
|
return $initialDifference,
|
||||||
structured_answer => {
|
structured_answer => {
|
||||||
data => {
|
data => {
|
||||||
remainder => $remainder,
|
remainder => $remainder,
|
||||||
difference => $initialDifference,
|
countdown_to => $output_string,
|
||||||
countdown_to => $output_string
|
goodie_version => $goodieVersion,
|
||||||
|
input_date => $date_string
|
||||||
},
|
},
|
||||||
templates => {
|
templates => {
|
||||||
group => "text",
|
group => "text",
|
||||||
|
options => {
|
||||||
|
title_content => 'DDH.countdown.countdown'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
@ -34,16 +41,16 @@ set_fixed_time("2016-04-15T15:31:02Z");
|
||||||
ddg_goodie_test(
|
ddg_goodie_test(
|
||||||
[qw( DDG::Goodie::Countdown )],
|
[qw( DDG::Goodie::Countdown )],
|
||||||
|
|
||||||
'time until 1st June 2016' => build_test("1st June 2016", 4019338 , "01 Jun 2016 00:00:00 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 31st December 2016' => build_test("31st December 2016", 22426138, "31 Dec 2016 00:00:00 EST"),
|
'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, "16 Apr 2016 11:31:02 EDT"),
|
'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
|
## 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 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 , "16 Apr 2016 10:00:00 EDT"),
|
#'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 , "01 May 2016 12:00:00 EDT"),
|
#'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, "16 Apr 2016 13:00:00 EDT"),
|
#'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, "16 Apr 2016 01:00:00 EDT"),
|
#'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
|
#invalid
|
||||||
'how long until 01:00:00 am yesterday' => undef,
|
'how long until 01:00:00 am yesterday' => undef,
|
||||||
|
|
Loading…
Reference in New Issue