Merge pull request #108 from jasalt/master

Add back to top button & `binding` example
phel-lang · Dec 31, 2024 · 98da3c7 · 98da3c7
2 parents ce7df43 + 7b0d8b5
commit 98da3c7
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 1 deletion.
diff --git a/content/documentation/global-and-local-bindings.md b/content/documentation/global-and-local-bindings.md
@@ -69,3 +69,29 @@ To update a variable with a function the `swap!` function can be used.
 (swap! foo + 2) # Evaluates to 12
 (deref foo) # Evaluates to 12
 ```
+
+## Binding
+
+While writing tests on code depending on external state can be challenging, `binding` function allows to remap existing bindings which can be used for mocking functions or values during tests. As example, code depending on runtime environment:
+
+```phel
+(ns my-app\tests\demo
+  (:require phel\test :refer [deftest is]))
+
+# Function that would return e.g. "x86_64", depending on the environment:
+(defn get-system-architecture [] (php/php_uname "m"))
+
+(defn greet-user-by-architecture []
+  (print "Hello" (get-system-architecture) "user!"))
+
+# With binding, a mock function can be used in place of the original one
+# allowing to write tests for cases that depend on system state:
+(deftest greeting-test
+  (binding [get-system-architecture |(str "i386")] # <- mock function
+    (let [greeting-out (with-output-buffer (greet-user-by-architecture))]
+      (is (= "Hello i386 user!" greeting-out)
+          "i386 system user is greeted accordingly"))))
+
+# Test is successful:
+# ✔ greet-test: i386 system user is greeted accordingly
+```
diff --git a/sass/site.scss b/sass/site.scss
@@ -13,7 +13,27 @@
 @import 'post-list';
 
 body {
-    padding-top: $header-height;
+  padding-top: $header-height;
+
+  #back-to-top-button {
+	display: none;
+	position: fixed;
+	bottom: 20px;
+	right: 30px;
+	z-index: 99;
+	border: none;
+	outline: none;
+	background-color: $color-base-primary;
+	color: $color-text-inverted;
+	cursor: pointer;
+	padding: 15px;
+	border-radius: 2px;
+	font-size: 18px;
+
+	&:hover {
+	  background-color: $color-base-hover;
+	}
+  }
 }
 
 footer {

diff --git a/static/back_to_top.js b/static/back_to_top.js
@@ -0,0 +1,19 @@
+// Get the button:
+let mybutton = document.getElementById("back-to-top-button");
+
+// When the user scrolls down 20px from the top of the document, show the button
+window.onscroll = function() {scrollFunction()};
+
+function scrollFunction() {
+  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+    mybutton.style.display = "block";
+  } else {
+    mybutton.style.display = "none";
+  }
+}
+
+// When the user clicks on the button, scroll to the top of the document
+function backToTop() {
+  document.body.scrollTop = 0; // For Safari
+  document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
+}
diff --git a/templates/base.html b/templates/base.html
@@ -29,9 +29,12 @@
 <body>
   {% block body %} {% endblock %}
 
+  <button onclick="backToTop()" id="back-to-top-button" title="Go to top">Top</button>
+
   <script type="text/javascript" src="{{ get_url(path='elasticlunr.min.js') }}" defer></script>
   <script type="text/javascript" src="{{ get_url(path='api_search.js') }}" defer></script>
   <script type="text/javascript" src="{{ get_url(path='search.js') }}" defer></script>
+  <script type="text/javascript" src="{{ get_url(path='back_to_top.js') }}" defer></script>
 </body>
 
 </html>