Clock: repeat option (#271)

Author: fonsp

Project.toml

@@ -1,7 +1,7 @@
 name = "PlutoUI"
 uuid = "7f904dfe-b85e-4ff6-b463-dae2292396a8"
 authors = ["Fons van der Plas <[email protected]>"]
-version = "0.7.52"
+version = "0.7.53"
 
 [deps]
 AbstractPlutoDingetjes = "6e696c72-6542-2067-7265-42206c756150"

assets/clock.js

@@ -7,8 +7,9 @@ const unit = clock.querySelector("span#unit")
 const button = clock.querySelector("button")
 
 const max_value = +clock.dataset.maxValue
+const repeat = clock.dataset.repeat === "true"
 
-var t = clock.value = 1
+var t = (clock.value = 1)
 var starttime = null
 var dt = 1
 
@@ -29,16 +30,21 @@ analogfront.onanimationiteration = (e) => {
         const running_time = (Date.now() - starttime) / 1000
         t = Math.max(t + 1, Math.floor(running_time / dt))
         if (!isNaN(max_value)) {
-            t = Math.min(t, max_value)
+            if (repeat) {
+                if(t > max_value) {
+                    t = 1
+                    starttime = Date.now()
+                }
+            } else {
+                if (t >= max_value) {
+                    clock.classList.add("stopped")
+                    t = max_value
+                }
+            }
         }
         clock.value = t
         clock.dispatchEvent(new CustomEvent("input"))
     }
-
-    if (t >= max_value) {
-        clock.classList.add("stopped")
-        t = 0
-    }
 }
 unit.onclick = (e) => {
     clock.classList.toggle("inverted")
@@ -48,6 +54,6 @@ button.onclick = (e) => {
     starttime = Date.now()
     clock.classList.toggle("stopped")
     if (!clock.classList.contains("stopped")) {
-        t = 1 - 1
+        t = 1
     }
 }

src/Clock.jl

@@ -1,19 +1,9 @@
 ### A Pluto.jl notebook ###
-# v0.19.12
+# v0.19.27
 
 using Markdown
 using InteractiveUtils
 
-# This Pluto notebook uses @bind for interactivity. When running this notebook outside of Pluto, the following 'mock version' of @bind gives bound variables a default value (instead of an error).
-macro bind(def, element)
-    quote
-        local iv = try Base.loaded_modules[Base.PkgId(Base.UUID("6e696c72-6542-2067-7265-42206c756150"), "AbstractPlutoDingetjes")].Bonds.initial_value catch; b -> missing; end
-        local el = $(esc(element))
-        global $(esc(def)) = Core.applicable(Base.get, el) ? Base.get(el) : iv(el)
-        el
-    end
-end
-
 # ╔═╡ 3689bb1b-23f8-41ae-a392-fb2ee2ec40d7
 # ╠═╡ skip_as_script = true
 #=╠═╡
@@ -24,12 +14,6 @@ begin
 end
   ╠═╡ =#
 
-# ╔═╡ e7a070ab-67e7-444b-88d8-87c14aaef046
-# ╠═╡ skip_as_script = true
-#=╠═╡
-names(@__MODULE__)
-  ╠═╡ =#
-
 # ╔═╡ fed9022f-1e8e-4f47-92d8-f99065023d29
 import AbstractPlutoDingetjes.Bonds
 
@@ -47,14 +31,15 @@ begin
 		fixed::Bool = false
 		start_running::Bool = false
 		max_value::Union{Int64,Nothing} = nothing
+		repeat::Bool = false
 
 		# Clock(interval, fixed, start_running, max_value) = interval >= 0 ? new(interval, fixed, start_running, max_value) : error("interval must be non-negative")
 	end
 
 	# for backwards compat
-	Clock(interval; kwargs...) = Clock(interval=interval; kwargs...)
+	Clock(interval; kwargs...) = Clock(; interval=interval, kwargs...)
 
-	Clock(interval, fixed, start_running=false) = Clock(interval, fixed, start_running, nothing)
+	Clock(interval, fixed, start_running=false, max_value=nothing) = Clock(; interval=interval, fixed=fixed, start_running=start_running, max_value=max_value)
 
 	# We split the HTML string into multiple files, but you could also write all of this into a single (long) string 🎈
 	const cb = read(joinpath(@__DIR__, "..", "assets", "clock_back.svg"), String)
@@ -67,7 +52,7 @@ begin
 		clock.interval < 0 && error("interval must be non-negative")
 
 		result = """
-		<plutoui-clock class='$(clock.fixed ? " fixed" : "")$(clock.start_running ? "" : " stopped")' data-max-value=$(repr(clock.max_value))>
+		<plutoui-clock class='$(clock.fixed ? " fixed" : "")$(clock.start_running ? "" : " stopped")' data-max-value=$(repr(clock.max_value)) data-repeat=$(repr(clock.repeat))>
 			<plutoui-analog>
 				<plutoui-back>$(cb)</plutoui-back>
 				<plutoui-front>$(cf)</plutoui-front>
@@ -105,6 +90,11 @@ end
 @bind tick Clock()
   ╠═╡ =#
 
+# ╔═╡ 4930b73b-14e1-4b1d-8efe-686e31d69070
+#=╠═╡
+tick
+  ╠═╡ =#
+
 # ╔═╡ 9ecd95f0-d7a5-4ee9-9e18-9d87e5d43ab7
 #=╠═╡
 tick; rand()
@@ -126,6 +116,18 @@ tick
 fasttick
   ╠═╡ =#
 
+# ╔═╡ b45005b3-822b-4b72-88ef-3f9fe865de6a
+# ╠═╡ skip_as_script = true
+#=╠═╡
+@bind loopy Clock(0.5, max_value=4, repeat=true)
+  ╠═╡ =#
+
+# ╔═╡ e7a070ab-67e7-444b-88d8-87c14aaef046
+# ╠═╡ skip_as_script = true
+#=╠═╡
+loopy
+  ╠═╡ =#
+
 # ╔═╡ a5f8ed96-136c-4ff4-8275-bd569f0dae40
 md"""
 ## Different constructors
@@ -155,6 +157,12 @@ Clock(3.0, true, true)
 Clock(3.0, true, true, 5)
   ╠═╡ =#
 
+# ╔═╡ f9f1e6db-d4a6-40dc-908e-51ed5833011c
+# ╠═╡ skip_as_script = true
+#=╠═╡
+Clock(3.0, true, true, 5, true)
+  ╠═╡ =#
+
 # ╔═╡ 9115fbcd-1550-4439-a830-c69b83b774b3
 # ╠═╡ skip_as_script = true
 #=╠═╡
@@ -194,10 +202,12 @@ a
 
 # ╔═╡ Cell order:
 # ╠═06289ad2-9e2f-45b3-9d15-7c5a4167e138
+# ╠═4930b73b-14e1-4b1d-8efe-686e31d69070
 # ╠═9ecd95f0-d7a5-4ee9-9e18-9d87e5d43ab7
 # ╠═d82dae11-b2c6-42b5-8c52-67fbb6cc236a
 # ╠═80c6e80e-077a-4e31-9467-788a8c437bfc
 # ╠═63854404-e6a5-4dc6-a40e-b09b9f531465
+# ╠═b45005b3-822b-4b72-88ef-3f9fe865de6a
 # ╠═e7a070ab-67e7-444b-88d8-87c14aaef046
 # ╠═3689bb1b-23f8-41ae-a392-fb2ee2ec40d7
 # ╠═fed9022f-1e8e-4f47-92d8-f99065023d29
@@ -208,6 +218,7 @@ a
 # ╠═83a021ab-7cca-47c7-a560-9cbf58b35ab7
 # ╠═c96dfd13-ddd4-443f-ab09-30e15ea76785
 # ╠═78ee5465-ce3b-45f6-acec-aa69175807f5
+# ╠═f9f1e6db-d4a6-40dc-908e-51ed5833011c
 # ╠═9115fbcd-1550-4439-a830-c69b83b774b3
 # ╠═f4104cb3-7c07-4814-99f9-a00764ebadf6
 # ╠═21cba3fb-7bb0-43ae-b4c4-5c1eb7241fec