* 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;
|
||||
|
||||
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 |
|
@ -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*/
|
||||
}
|
|
@ -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>
|
|
@ -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);
|
|
@ -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,
|
||||
|
|
Loading…
Reference in New Issue