Fix reset button rendering on iOS, minor refactoring

adamjhf · Oct 30, 2023 · 6791d96 · 6791d96
1 parent ec625a4
commit 6791d96
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 24 deletions.
diff --git a/README.md b/README.md
@@ -17,7 +17,7 @@ Triggers a `rated` event in the DOM, so can be used with HTMX, hyperscript or ot
 ## Example usage
 Import `hyperstars.css` before loading hyperscript:
 ```
-<link href="hyperstars.css" rel="stylesheet" type="text/css" />
+<link href="hyperstars.css" rel="stylesheet" type="text/css">
 <script src="hyperstars._hs" type="text/hyperscript"></script>
 <script src="https://unpkg.com/[email protected]"></script>
 ```

diff --git a/hyperstars._hs b/hyperstars._hs
@@ -39,7 +39,7 @@ behavior Hyperstars(inputHandle, resettable)
 
     if resettable then
       make a <span/>
-      put "🞨" into it
+      put "×" into it
       set span to it
       make a <button.hyperstars-reset/>
       set @type of it to "reset"
@@ -48,7 +48,6 @@ behavior Hyperstars(inputHandle, resettable)
       put span into it
       put it into me
     end
-
 
     make a <div.hyperstars-slider/>
     set @_ of it to "install HyperstarsSlideable"
@@ -87,7 +86,7 @@ behavior Hyperstars(inputHandle, resettable)
     tell .hyperstars-selected in me
       get previous .hyperstars-empty
       measure its width
-      set initW to Math.round((value-min) * (width / stars))
+      set initW to calculateStarWidth(value, min, max, width)
       set your *width to initW + "px"
     end
 
@@ -98,7 +97,6 @@ behavior HyperstarsSlideable
 
   on mouseenter
     if @aria-readonly is "true" then exit end
-    log @aria-readonly
     tell .hyperstars-hover in me
       show you
     end
@@ -121,14 +119,10 @@ behavior HyperstarsSlideable
     if @aria-readonly is "true" then exit end
     set max to @aria-valuemax as Number
     set min to @aria-valuemin as Number
-    set stars to max - min
     set step to @data-hs-step as Number
     measure my x, width
-    set offset to pageX - x
-    if offset > width then set offset to width end
-    set value to min
-      + (Math.ceil(offset / (width / (stars / step))) * step)
-    set w to Math.round((value-min) * (width / stars))
+    set value to calculateStarValue(x, pageX, min, max, step, width)
+    set w to calculateStarWidth(value, min, max, width)
     set hover to the .hyperstars-hover in me
     pick match of "^(.+)px$" from the width of hover's style
     set curWidth to it[1] as Int
@@ -147,14 +141,10 @@ behavior HyperstarsSlideable
     if @aria-readonly is "true" then exit end
     set max to @aria-valuemax as Number
     set min to @aria-valuemin as Number
-    set stars to max - min
     set step to @data-hs-step as Number
     measure my x, width
-    set offset to pageX - x
-    if offset > width then set offset to width end
-    set value to min
-      + (Math.ceil(offset / (width / (stars / step))) * step)
-    set w to Math.round((value-min) * (width / stars))
+    set value to calculateStarValue(x, pageX, min, max, step, width)
+    set w to calculateStarWidth(value, min, max, width)
     set @aria-valuenow to value
     tell .hyperstars-hover in me
       hide you
@@ -183,4 +173,15 @@ behavior HyperstarsSlideable
     end
   end
 
+end
+
+def calculateStarValue(x, pageX, min, max, step, width)
+  set stars to max - min
+  set offset to pageX - x
+  if offset > width then set offset to width end
+  return min + (Math.ceil(offset / (width / (stars / step))) * step)
+end
+
+def calculateStarWidth(value, min, max, width)
+  return Math.round((value-min) * (width / (max-min)))
 end
diff --git a/hyperstars.css b/hyperstars.css
@@ -43,7 +43,7 @@ button.hyperstars-reset {
 
 button.hyperstars-reset>span {
   display: inline;
-  font-size: 0.4em;
+  font-size: 0.5em;
   line-height: 1em;
   float: left;
 }

diff --git a/index.html b/index.html
@@ -17,26 +17,52 @@
     input[type=range] {
       display: none;
     }
+
+    pre {
+      display: block;
+    }
   </style>
-  <link href="hyperstars.css" rel="stylesheet" type="text/css" />
+  <link href="hyperstars.css" rel="stylesheet" type="text/css">
   <script src="hyperstars._hs" type="text/hyperscript"></script>
   <script src="https://unpkg.com/[email protected]"></script>
 </head>
 
 <body>
   <h1>_hyperstars examples</h1>
-  <h2>Default:</h2>
+  <h3>Default:</h3>
+  <pre>
+    <code _="init put escapeHTML(outerHTML of next <span/>) into me"></code>
+  </pre>
   <span _="install Hyperstars()"></span>
-  <h2>With reset button:</h2>
+  <h3>With reset button:</h3>
+  <pre>
+    <code _="init put escapeHTML(outerHTML of next <span/>) into me"></code>
+  </pre>
   <span _="install Hyperstars(resettable: true)"></span>
-  <h2>With custom input:</h2>
+  <h3>With custom input:</h3>
+  <pre>
+    <code _="init put escapeHTML(outerHTML of next <span/>) into me"></code>
+  </pre>
   <span _="install Hyperstars()">
     <input type="range" min="2" max="10" step="1" value="5">
   </span>
-  <h2>Readonly/disabled:</h2>
+  <h3>Readonly/disabled:</h3>
+  <pre>
+    <code _="init put escapeHTML(outerHTML of next <span/>) into me"></code>
+  </pre>
   <span _="install Hyperstars()">
-    <input type="range" value="2.5" readonly>
+    <input type="range" value="2.5" disabled>
   </span>
+
+  <script type="text/hyperscript">
+    def escapeHTML(html)
+      js(html)
+        return html.replace(/[\u00A0-\u9999<>\&]/g,
+          i => '&#'+i.charCodeAt(0)+';')
+      end
+      return it
+    end
+  </script>
 </body>
 
 </html>