Added views

hermajan · Nov 7, 2023 · 74ec176 · 74ec176
1 parent 6fa7768
commit 74ec176
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 6 deletions.
diff --git a/examples/index.html b/examples/index.html
@@ -7,18 +7,18 @@
 <body>
 	<h3>With text</h3>
 	<h4>Source:</h4>
-	<pre><code class="language-html">&lt;time class="countdown" data-lang="en" datetime="2021-12-21T15:16" data-remains="Remains" data-after="." data-ended="The event is over."&gt;2021-12-21T15:16&lt;/time&gt;</code></pre>
+	<pre><code class="language-html">&lt;time class="countdown" data-lang="en" datetime="2024-12-21T15:16" data-remains="Remains" data-after="." data-ended="The event is over."&gt;2024-12-21T15:16&lt;/time&gt;</code></pre>
 
 	<h4>Rendered:</h4>
-	<time class="countdown" data-lang="en" datetime="2021-12-21T15:16" data-remains="Remains" data-after="." data-ended="The event is over.">2021-12-21T15:16</time>
+	<time class="countdown" data-lang="en" datetime="2024-12-21T15:16" data-remains="Remains" data-after="." data-ended="The event is over." data-view="rest">2024-12-21T15:16</time>
 	<hr>
 
 	<h3>Without text</h3>
 	<h4>Source:</h4>
-	<pre><code class="language-html">&lt;time class="countdown" datetime="2021-12-21T15:16" data-ended="The event is over."&gt;2021-12-21T15:16&lt;/time&gt;</code></pre>
+	<pre><code class="language-html">&lt;time class="countdown" datetime="2024-12-21T15:16" data-ended="The event is over."&gt;2024-12-21T15:16&lt;/time&gt;</code></pre>
 
 	<h4>Rendered:</h4>
-	<time class="countdown" datetime="2021-12-21T15:16" data-ended="The event is over.">2021-12-21T15:16</time>
+	<time class="countdown" datetime="2024-12-21T15:16" data-ended="The event is over.">2024-12-21T15:16</time>
 
 	<script src="../src/countdown.js"></script>
 	<script>startCountdowns();</script>

diff --git a/src/countdown.js b/src/countdown.js
@@ -32,7 +32,7 @@ function inflection(count, what, lang = "en") {
 		return words[lang][what][0];
 	}
 
-	if(0 < count && count < 5) {
+	if(2 <= count && count < 5) {
 		return words[lang][what][1];
 	}
 	return words[lang][what][2];
@@ -66,9 +66,39 @@ function countdown(element) {
 		lang = element.getAttribute("data-lang");
 	}
 
+	let view = "blank";
+	if(element.hasAttribute("data-view")) {
+		view = element.getAttribute("data-view");
+	}
+
+	let visible = [];
+	let showRemains = false;
+	for(let what in remain) {
+		switch(view) {
+			case "all":
+				visible[what] = true;
+				break;
+			case "rest":
+				if(remain[what] > 0) {
+					visible[what] = true;
+				}
+				break;
+			default:
+			case "blank":
+				if(showRemains === true || remain[what] > 0) {
+					visible[what] = true;
+					showRemains = true;
+				} else {
+					visible[what] = false;
+				}
+				break;
+		}
+	}
+
 	for(let what in remain) {
 		let count = remain[what];
-		if(count > 0) {
+
+		if(visible[what] === true) {
 			if(element.hasAttribute("data-lang")) {
 				output += " " + count + " " + inflection(count, what, lang);
 			} else {